JavaScript基础语法、函数、js事件一篇讲够

·  阅读 210

一、JavaScript简介

1、概念:

JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。

诞生于1995年,当时的主要目的是验证表单的数据是否合法

JavaScript本来应该叫Livescript,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。

js组成部分:

javascript三大组成部分

(1)核心(ECMAScript):这一部分主要是js的基本语法。

(2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

(3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后的页面。(增删改查)

2、特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)

3、和Java区别:

特点JavaJavaScript
面向对象面向对象编程语言基于对象,不完全面向过程。有部分面向对象的特点
运行方式编译型语言,生成中间文件,字节码解释型,解释一部分,再运行一部分不会生成中间文件
跨平台安装虚拟机跨平台运行在浏览器中,只要系统有浏览器就可以运行。
数据类型强类型语言,不同的数据弱类型,同一个变量可以赋值不同的数据类型。类型严格区分
大小写区分大小写区分大小写

我目前是在职java开发,如果你现在也想学习java开发技术,在入门学习java的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的java学习交流裙:前面:893 中间:241 后面:279。里面聚集了一些正在自学java的初学者,转行者,初阶者,我这里也有我做java技术这段时间整理的一些java学习手册,java大厂面试题,java语法pdf,需要的话都可以找裙猪获取。

4、作用

JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

在目前学习阶段只要记住最常用的二个: (1)运态修改html及css代码 (2)验证表单

5、书写位置

5.1、内嵌式:

理论上js可以书写在页面的任意位置。

<script>

alert("内嵌式")

</script>
复制代码

5.2、外链式:

首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>
复制代码

5.3、行内式:

直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。     onclick单击事件

<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
复制代码

6、注释:

单行注释:		
//	注释语句		
快捷键ctrl+/多行注释:		
/* 注释语句 */    
快捷键ctrl+shift+/   
注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
复制代码

7、数据类型:

Js中的数据类型:

数值型:number(凡是数字都是数值型,不区分整数和小数) 字符串:string(凡是引号包裹起来的内容全部都是字符串) 布尔:boolean(true、false) 对象类型:object(特殊取值null) 未定义型:undefined

对比java中的数据类型:

整数:byte short int long
小数:float double
字符:char 
布尔:boolean
字符串:String
复制代码

8、变量:

8.1、定义:就是存放数据的、内疗可以存储任意数据

8.2、声明变量:

var 变量名称 = 存储的数据; (variable 变量)

8.3、变量命名规范:

  1. 只能由字母、数字、_(下划线)、$(美元符号)组成。
  2. 不能以数字开头。
  3. 命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。

js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自定判断该变量是何种类型:

数值型:var i = 1;	var d = 2.35;
字符串:var str = "用心学习";
布尔型:var b = true;
复制代码

对比Java:java是强类型的语言,注重类型的定义,Java定义类型如下:

整型:int i = 1;
浮点型:double d = 2.35;
字符串:String str = “用心学习”;
布尔型:boolean b = true;
复制代码

总结:js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

9、检测数据类型:

typeof(value); 或者typeof value; 返回这个变量的类型. 说明 : 同一个变量, 可以进行不同类型的数据赋值.

<script type="text/javascript">       
 var a;    
alert(typeof a);  // undefined   
  a = 998;    alert(typeof a); // number    
 a = "JavaScript用心学习";    
alert(typeof a); // string     
a = true;   
 alert(typeof a); // boolean   
 </script>
复制代码

10、算术运算符

+ - * / % ++ --

注意:

  1. 由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
  2. 字符串和其他的数据使用+号运算,会连接成一个新的字符串。
  3. 字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
<script>     
alert(1234 / 1000 * 1000); // 1234      
var s = "12";     
s -= 10;    
alert(s);  // 2     
var s = "aa";    
s -= 10;    
alert(s);  // NaN      
Not a Number 不是一个数字     
var s = "12";    
s += 10;    
alert(s);       // 1210  
</script>
复制代码

11、关系(比较)运算符

> >= < <= != == 等于(只比较内容) === 恒等于(比较内容的同时还要比较数据类型) 注意:关系运算符返回的结果只有两个:true / false

<script>
     // 请问1 : 3 > 5, 结果为 ?    
alert(3 > 5);   // false     
// 请问2 : “22” == 22  结果为 ?   
 alert("22" == 22); // true  (仅仅判断数值)     
// 请问3 : “22” === 22  结果为 ?    
alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)    
</script>
复制代码

12、逻辑运算符

&&true&&false ====>false||true||false ====>true!!true ====>falsefalse(理解):false, 0, null, undefined true(理解):true, 非0, 非null, 非undefined 针对 && 顺口溜: 找第一个出现的假值. (一假即假)针对 || 顺口溜: 找第一个出现的真值. (一真即真)

演示一:

<script>   
  // 短路与 (一假即假)    // 口诀 : 找第一个为假的值.     
// 请问1 :  8 < 7 && 3 < 4, 结果为 ?    
alert(8 < 7 && 3 < 4);  // false    
 // 请问2 :  -2 && 6 + 6 && null 结果为 ?    
alert(-2 && 6 + 6 && null); // null     
// 请问3 :  1 + 1 && 0 && 5  结果为 ?    
alert(1 + 1 && 0 && 5); // 0 </script>
复制代码

演示二:

<script>   
  // 短路或 : 一真即真.    // 口诀 : 找第一个为真的值.    
 // 请问1 :  0 || 23 结果为 ?    alert(0 || 23); // 23     
// 请问2 :  0 || false || true  结果为 ?    
alert(0 || false || true); // true     
// 请问3 :  null || 10 < 8 || 10 + 10结果为 ?    
alert(null || 10 < 8 || 10 + 10);  // 20     
// 请问4 :  null || 10 < 8 || false结果为 ?    
alert(null || 10 < 8 || false); // false    
</script>
复制代码

13、三元运算符:

条件?表达式1:表达式2如果条件为true,返回表达式1的结果如果条件为false,返回表达式2的结果
复制代码

演示:

<script> 
    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
    alert(3 ? "aaa" : "bbb");       // aaa    
 // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?  
  alert(0 ? "ccc" : "ddd");       // ddd   
 </script>
复制代码

14、if条件语句

这个和Java中if语句一样。

演示:

<script>    
   var score = 59;   
    if (score >= 90) {  
        alert("优秀");     
 } else if (score >= 80) {
          alert("良好");  
    } else if (score >= 60) {   
       alert("及格");  
   } else {     
     alert("不及格");    
  }   
</script>
复制代码

15、switch分支结构

这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串

演示:

<script>      
 var score = 59;     
 // 需求 : 将需要一个整型数值, 不想要小数点.   
   // window 对象的 parseInt 方法.   
   score = window.parseInt(score / 10 + "");      
// alert(score);       
switch (score) {      
    case 10:       
  case 9:           
   alert("优秀!");   
           break;   
       case 8:      
        alert("良好!");   
           break;   
       case 7:       
   case 6:       
      alert("及格!");    
          break;   
       default:       
       alert("不及格!");    
          break;   
   }  
 </script>
复制代码

16、循环结构 while、do-while. for;

while(循环条件){
循环体;
}do{
循环体;
}
while(循环条件);
for(循环变量赋初值;循环条件;循环变量增值){
循环语句;
}console.log(...);
 以日志的形式在控制台输出结果!
复制代码

演示:

<script>     // 需求 : 统计 1~100 之间能够被3和7整除的数字个数  
   var count = 0;     // 1\. 遍历 1~100 之间的所有整型数值 
   for (var i = 1; i <= 100; i++) {     
    // 2\. 判断      
  if (i % 3 == 0 && i % 7 == 0) {    
        // alert(i);           
 console.log(i);      
      // 3\. 累加个数     
       count++;       
 }  
  } 
    // 4\. 查看结果    
// alert(count);    
console.log(count); 
复制代码

console.log显示如下:

输出结果

17、循环嵌套

演示案例9*9乘法表

 <style>        
table {            
/* 将 table 表格的线变成了细线 */
border-collapse: collapse;            
/*color: red;*/
border-color: red;        
}    
</style>
<script>
// 需求 : 九九乘法口诀表 
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");        
document.write("<caption>九九乘法口诀表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script> 
复制代码

18、自定义函数

函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:

格式:

function 函数名(形式参数){函数体}调用函数:函数名(实际参数);

18.1、函数只有被调用后才会执行

18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :    alert(demo2()); 
</script>
复制代码

18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :    alert(demo3(10, 20));//显示30
</script>
复制代码

18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

对比java、java有重载(同名不同参)、重写(同名同参同返回值类型、方法体不一样)

演示:

<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4(); 
</script>
复制代码

会显示二次下面的图片:

image

19、匿名函数

匿名函数是没有名字的函数

function(形式参数){
函数体
}
调用方式:
将匿名函数赋值给一个变量,通过变量名调用函数定义函数并赋值给变量:
var fn = function(形式参数){
函数体
}调用函数:
fn(实际参数);
复制代码

演示:

<script type="text/javascript">     
// 匿名函数 : 没有名称的函数    
var func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :  
 func("柳岩", "小白");
//显示柳岩love小白 
</script>
复制代码

20、案例-轮播图

说明1 : script 标签需要放在 body 标签之后. 说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数); 说明3 : window.setInterval(函数名称, 时间毫秒数); 说明4 : window.setInterval(匿名函数, 时间毫秒数);            推荐使用

<head>    
<meta charset="UTF-8">    
<title>轮播图</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
 </head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="图片">
</div>
</body>
复制代码

实现一:

<script>     
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1\. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 1.2 定义一个函数
function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}
// 2\. 循环切换图片
// window.setInterval(函数, 时间毫秒);
在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
// 调用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 调用方式二 :
window.setInterval(changeImageSrc, 1000); 
</script>
复制代码

实现二:

<script>     
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1\. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 2\. 循环切换图片
// window.setInterval(匿名函数, 时间毫秒);
 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}, 1000); 
</script>
复制代码

21、js事件

21.1、事件概述:

事件三要素: 1.事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签 2.事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等 3.执行指令:事件触发后需要执行的代码,一般使用函数进行封装语法格式:事件源.事件类型=执行指令

21.2、常用的事件:

常用的事件

案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
// 事件源 : window
事件类型 : 页面加载完成事件 (onload)
执行指令: 就是赋值的 function 函数.
window.onload = function () {
// 获取页面的 btn 按钮
var btn = document.getElementById("btn");
// alert(btn);
// 给 btn 按钮绑定一个事件 (单击事件 onclick)
// 事件源 : btn按钮
事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
btn.onclick = function () {
alert("恭喜你,获得免费精品女朋友一个!");
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
复制代码

到此基础结束。

==============《轮播图图片路径问题》================

分类:
后端
标签:
收藏成功!
已添加到「」, 点击更改