JS
JavaScript 概述
1、什么是JavaScript
JavaScript 简称 JS，是一种专门运行于JS解释器/引擎中的解释型脚本语言
2、JS发展史
1、1992年Nombas公司开发了一款运行在网页中的脚本语言，名称为 CMM(C--),后来更名为 ScriptEase
2、1995年Netscape(网景)为自己的浏览器Navigator2.0开发了另一款脚本语言-LiveScript,更名为 JavaScript
3、1996年，Microsoft为自己的IE3.0，发布了JavaScript的克隆版本 JScript
4、1997年，Netscape找到了ECMA(欧洲计算机制造商协会)，将JS提交给了ECMA。从此JS的核心更名为 ECMA Script 简称为
ES
JS的组成：
1、核心 - ECMA Script
包含了JS的最基本的语法规范
2、文档对象模型
Document Object Model -> DOM
允许JS操作HTML网页上的内容
DOM的规范是由W3C来制定的
3、浏览器对象模型
Browser Object Model -> BOM
允许JS操作浏览器
使用JS
1、使用元素事件执行JS脚本代码
事件：用户在元素上所激发的行为操作
onclick 事件：
当用户单击元素时要做的操作
语法：
JS脚本代码：
console.log('向控制台中输出的内容');
2、嵌入在网页中的
语法：
特点：
网页加载的时候就开始执行
document.write() 向网页输出一句话
注意：如果通过按钮的单击事件执行document.write()的话，则会刷新网页内容
3、将JS脚本写在外部的JS文件中
步骤：
1、创建JS文件(xxx.js)并编写脚本
2、在网页中对JS文件进行引入
JS基础语法
1、语法规范
1、JS都是由语句来组成的
1、由运算符，表达式，关键字组成
2、严格区分大小写
console.log(); 正确
Console.log(); 错误
3、每条语句必须以 ; 表示结束
2、JS中的注释
单行注释：// 注释内容
多行注释：/* */
JS中的变量 和 常量
1、变量
1、声明变量的语法
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值： var 变量名=值;
注意：
1、声明变量时，尽量使用var关键字，如果省略，也可以，但容易出问题
2、声明变量但未赋值的话，默认值为 undefined
2、变量名的命名规范
1、不能使用JS中的关键字或保留关键字
2、由字母，数字，下划线(_)和$组成
var u-name = "";错误
var u_name = "";正确
var $ = 35; 正确
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
var a;
var b;
var stuName;
var ab;
6、如无特殊需求的话，尽量使用小驼峰命名法
var age;
var stuAge;
2、常量
1、什么是常量
一经声明就不允许修改的数据就是常量
2、语法
const 常量名 = 值;
注意：
常量名采用全大写的形式
数据类型
1、作用
约束了数据在内存中所占空间大小问题的
2、JS数据类型分类
1、基本数据类型(值类型)
1、number类型
数字类型，可以表示32位的整数或64位的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 111;var num = 321;
八进制：var num = 010;
十六进制：var num = 0x22;
小数：
小数点计数法：var num = 123.456;
科学计数法：var num = 1.5e2;
2、string类型
字符串
都是由Unicode的字符，数字，标点组成的
1、查看字符的Unicode码
var str = "张";
var uCode=str.charCodeAt().toString(2)
2、如何将Unicode码转换成对应的字符??
已知Unicode码:5f20
var str = "\u5f20";
console.log(str);
3、中文范围
"\u4e00" ~ "\u9fa5"
4、转义字符
\n : 换行
\t : 制表符
" : "
' : '
\ :
3、boolean类型
布尔类型，只用于表示真(true)或假(false)
注意：
在参与数字运算时，true当作1运算，false当作0运算
var r = 365 + true ; // 366
var r = 27.58 * false; // 0
var r = true + false; // 1
4、查看数据类型
使用 typeof() 或 typeof 都可以查看变量的数据类型
2、引用数据类型
3、数据类型转换
1、隐式转换
不同类型的数据在做加法运算时，会进行自动转换
1、字符串 + 数字 ：将数字转换为字符串
var num = 15;
var str = "18";
var r = num + str; //1518
var r = "15" + 18 + 15; //151815
var r = 15 + 18 + "15"; //3315
2、数字 + 布尔 ：将布尔转为数字做加法
var boo = true;
var num = 15;
var r = boo + num; //16
3、字符串 + 布尔 ：将布尔转换为字符串做连接
var boo = true;
var str = "Hello";
var r = boo + str;//trueHello
4、布尔 + 布尔 ：都转换为数字做加法运算
var b1 = true;
var b2 = false;
var r = b1 + b2; //1
2、强制转换(转换函数)
1、toString()
将任意类型的数据转换成字符串，并返回转换后的结果
语法：
var r = 变量.toString();
var r = 变量+"";
2、parseInt()
作用：将指定的数据尽量转换成整数,如果实在无法转换的话，则返回NaN(Not a Number)
ex:
1、
var r = parseInt("456");
r : 456
2、
var r = parseInt("123.456");
r : 123
3、
var r = parseInt("123Hello");
r : 123
4、
var r = parseInt("Hello123");
r : NaN
3、parseFloat()
作用：尽量将任意类型的数据转换为小数，如果实在无法转换，那么结果为 NaN
1、
var r = parseFloat("3.14");
r : 3.14
2、
var r = parseFloat("3.14Hello");
r : 3.14
3、
var r = parseFloat("Hello3.14")
r : NaN
4、Number()
作用：将任意类型的数据转换为数字，只要包含非法字符，结果就是NaN
1、
var r = Number("35");
r : 35
2、
var r = Number("35.65");
r : 35.65
3、
var r = Number("35NIHAO");
r : NaN
运算符
1、算数运算符
1、+，-，*，/，%
5 / 2 ： 2.5
5 % 2 ： 1
2 % 5 ： 2
var num = 1234;
var ge = num % 10;
var shi = parseInt(num / 10) % 10
var bai = parseInt(num / 100) % 10;
var qian = parseInt(num / 1000);
2、++，--
++ ：自增运算符，在自身基础上做+1操作
-- ：自减运算符，在自身基础上做-1操作
前后缀：
var num = 10;
num++;
特点：先使用num的值，然后再做自增运算
var num = 10;
console.log(num++); 输出 10
console.log(num); 输出 11
var num = 10;
++num;
特点:先对变量进行自增，然后再使用变量的值
var num = 10;
console.log(++num); 输出 11
console.log(num);输出 11
var num = 5;
5 (6)6 6(7) (8)8 8
var result = num + ++num + num++ + ++num + num ;
结果：33
2、关系运算符(比较运算符)
>,<,>=,<=,,!=,=,!==
1、10 > 5 : true
2、"10" > 5 : true
运算符两端如果有一个是数字的话，那么另外一个会自动转换(通过Number())成数字，再进行比较
3、"10a" > 5 : false
4、"10a" < 5 : false
NaN 除了 != 以外，其他比较都是false
5、"10" > "5" : false
比较的是 字符1的ASCII 和 字符5的ASCII
6、"张三丰">"张无忌" : false
三：19977
无：26080
7、"10" == 10 : true
=== : 判断数值和数据类型必须全相等的时候，结果才为真
!== : 数值 和 数据类型 任何一个不等的话，结果都为真
"10" !== 10 : true
"10" != 10 : false
3、逻辑运算符
!:逻辑非，等同于python Not
非真即假，非假即真
&&:逻辑与，等同于python and
||:逻辑或，等同于python or
4、位运算符
1、按位与 &
两个数字的二进制位进行比较，对应位都为1，则该位结果为1，否则为0
场合：奇偶性验证
7 & 1 : 1 奇数
7 : 111
1 : 001
6 : 110
1 : 001
2、按位异或 ^
不借助第三方变量交换两个数字时
var a = 3;
var b = 5;
a = a ^ b; a = 6
3:011
5:101
==============
110 : 6
b = b ^ a; b = 3
b: 5:101
a: 6:110
==============
011 : 3
a = a ^ b; a = 5
a: 6:110
b: 3:011
=================
101 : 5
5、条件运算符
单目运算符：++，--，!,-
双目运算符：+,-,... ...
三目运算符：? :
语法：? :
条件表达式 ? 表达式1 : 表达式2;
当条件表达式的结果为true的时候，执行表达式1中的内容，并将表达式1的结果作为整体表达式的结果。否则，则执行表达
式2的内容，并将表达式2的结果作为整体表达式的结果
6、赋值运算符
+=，-=，*=，/=，
var a = 5;
a += 5; // a=a+5
var a = 3;
var b = 5;
a ^= b; // a = a ^ b;
b ^= a; // b = b ^ a;
a ^= b; // a = a ^ b;
流程控制
1、程序控制结构
1、顺序结构
2、分支结构 / 选择结构
3、循环结构
2、分支结构
1、if 结构
1、if结构
语法：
if(条件){
语句块;
}
2、if ... else 结构
语法：
if(条件){
语句块1;
}else{
语句块2;
}
3、if ... else if ... 结构
语法：
if(条件1){
语句块1
}else if(条件2){
语句块2
}else if(条件n){
语句块n
}else{
语句块n+1
}
分支结构
1、if结构(略)
2、switch结构
1、作用
等值判断
2、语法
switch(变量){
case 值1:
语句块1
//break; //跳出switch结构 ，可选
case 值2:
语句块2
break; //跳出switch结构 ，可选
... ...
default:
语句块n
/所有case都未匹配上时，才执行default/
}
注意：
1、变量 和 case后的值的判断，采用 === 来判断的。
2、break，如果省略break的话，则从匹配的case块开始，依次向下执行(执行下面所有case块的内容 或 default的内
容),直到碰见break或执行结束为止
循环结构
1、作用
重复的执行相同或相似的代码
2、循环二要素
1、循环条件
循环从什么时候开始，到什么时候结束
2、循环操作
循环中要做的事情(要执行的代码)
ex:
1、控制台中输出100遍Hello World
条件：从第1遍开始 到 第100遍结束
操作：输出 Hello World
2、打印 1-100 之间所有的数字
条件：从第1遍开始 到 第100遍结束
操作：输出 条件 的值
3、while 循环
1、语法
while(循环条件){
循环操作
}
流程：
1、判断循环条件(boolean值/表达式)
2、如果条件为真，则执行循环操作
2.1 执行完操作后，再回来判断条件...
3、如果条件为假，则退出循环
ex:
1、打印 100 遍 Hello World
条件：从 1 开始 ，到 100 结束
操作：打印 Hello World
4、do ... while 循环
语法：
do{
循环操作
}while(循环条件);
流程：
1、先执行循环操作
2、再判断循环条件
3、如果条件为真，则继续执行循环操作，否则退出循环
5、循环的流程控制
1、break
跳出循环结构
2、continue
结束本次循环，继续执行下次循环
6、for 循环
1、while
打印 1-100 之间所有的数字
var i=1;//循环条件的初始化
while(i <= 100){ //循环条件的判断
console.log(i);//循环操作
i++;//更新循环条件
}
2、for 循环
语法：
for(表达式1;表达式2;表达式3){
循环操作
}
表达式1：循环条件的初始化
表达式2：循环条件的判断
表达式3：更新循环条件
流程：
1、先执行表达式1,即循环条件初始化(执行1次)
2、再判断表达式2的值，true 或 false
3、如果为true，则执行循环操作
如果为false，则退出循环结构
4、 执行完循环操作后，再执行表达式3
5、再判断表达式2，同步骤2...
3、循环嵌套
允许在一个循环中再出现另一个循环
for(var i=1;i<=10;i++){ // 外层循环
for(var j=1;j<=10;j++){ //内层循环
}
}
外层循环走一次，内层循环走一轮
函数 - function
1、函数的声明
function 函数名(参数){
函数体
}
1、参数
参数列表，允许声明0或多个参数，多个参数的话，使用 , 隔开即可
2、返回值
返回值是可选的，如果需要返回值的话，通过 return 值 ; 进行返回
2、函数调用
在任意JS的合法位置处，都允许做函数调用
函数名(参数列表);
函数
1、由ES提供的函数
在网页中无需声明，就可以直接使用
已学：parseInt() / parseFloat() / Number()
1、isNaN(value)
判断value是否为非数字
true:不是数字
false:是数字
2、eval()
执行由字符串来表示的JS代码
2、局部变量 与 全局变量
1、全局变量
一经声明后，在JS的任何位置处都能使用的变量就是全局变量
1、
2、
推荐：
全局变量声明的时候
1、使用 var 关键字
2、一律放在
4、事件行为详解
1、load 事件
常用场合：当网页加载完毕时，要执行的操作
方式1：在元素中绑定事件
方式2：JS中动态绑定
事件
1、事件行为
1、load 事件
2、submit 事件
功能：表单被提交时要触发的事件
注意：通过一个boolean的返回值，通知表单是否被提交
返回值：true，可以提交表单
返回值：false，不能提交表单
3、focus 事件
功能：当元素获取焦点时要触发的事件
4、blur 事件
2、事件对象 (event对象)
1、什么是事件对象
事件对象中封装了事件中要用到的一些参数和一些操作
2、获取事件对象(event对象)
1、html元素中绑定事件
2、使用JS动态绑定
3、事件对象的常用属性
1、事件源
事件源：表示触发当前事件的元素
获取事件源：
通过 event.target 获取事件源
返回DOM元素
2、鼠标事件
1、offsetX，offsetY
获取鼠标在 元素上 的坐标点
以元素的左上角为(0,0)计算的
2、clientX，clientY
获取鼠标在 网页上 的坐标点
以文档的左上角为(0,0)计算的
3、screenX，screenY
获取鼠标在 显示器上 的坐标点
以显示器的左上角为(0,0)计算的
3、键盘事件
1、event.key
得到 按下的 字符
在 keypress 中 和 keydown 中
1、在 keypress 中
event.which : 表示按下字符的ASCII码
2、在 keydown 中
event.which : 表示的 键位码 ，只记录键位，不记录字符(大小写英文字符的键位码是相同的，一些数字和标点的
键位码有可能是相同的)
4、事件冒泡
1、什么是事件冒泡
当激发子元素的事件时，把父元素对应的事件也一并给执行了
场合：
1、必须是父子元素或具备层级关系的元素
2、为元素们设置了相同的事件
2、阻止事件冒泡
只让事件在当前元素中执行，不向上冒泡
event.stopPropagation();
浙公网安备 33010602011771号