神出鬼没的Enderman

JavaScript 概述

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等

使用方式

1. 元素绑定事件

• 事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
• 事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
• 常用事件：onclick (单击事件)
• 语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。

<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>

2. 文档内嵌。使用标签书写 JS 代码

<script type="text/javascript">
alert("网页警告框");
</script>

• 注意 ：标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果

3. 外部链接

• 创建外部的JS文件 XX.js，在HTML文档中使用引入

<script src="index.js"></script>

• 注意 ：既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一

基础语法

1. JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
2. JS严格区分大小写
3. 注释语法

• 单行注释使用//
• 多行注释使用/* */

变量与常量

变量

1. 作用 : 用于存储程序运行过程中可动态修改的数据
2. 语法 : 使用关键var声明,自定义变量名

var a;      //变量声明
a = 100;    //变量赋值
var b = 200; //声明并赋值
var m,n,k;  //同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

3. 命名规范 :

• 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
• 禁止与关键字冲突(var const function if else for while do break case switch return class)
• 变量名严格区分大小写
• 变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"

4. 使用注意 :

• 变量如果省略var关键字,并且未赋值,直接访问会报错
• 变量使用var关键字声明但未赋值,变量初始值为undefined
• 变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

常量

1. 作用 : 存储一经定义就无法修改的数据
2. 语法 : 必须声明的同时赋值

const PI = 3.14;

3. 注意 :

• 常量一经定义,不能修改,强制修改会报错
• 命名规范同变量,为了区分变量,常量名采用全大写字母

数据类型

1. 十进制表示

var a = 100;

2. 八进制表示

• 以0为前缀

var b = 021; //结果为十进制的 17

3. 十六进制

• 以0x为前缀

var c = 0x35;//结果为十进制的 53

• 使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数

1. 小数点表示

var m = 1.2345;

2. 科学计数法

• 例 : 1.5e3
• e表示10为底,e后面的数值表示10的次方数
• 1.5e3 等价于 1.5 * 10(3)

string 字符串类型

• 字符串 : 由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码

var s = "100";
var s1 = "张三";

boolean 布尔类型

• 只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0

var isSave = true;
var isChecked = false;

undefined (程序返回的值)

• 特殊值,变量声明未赋值时显示undefined

var a;
console.log(a);//undefined

null 空类型 (主动使用的)

• 解除对象引用时使用null,表示对象为空

引用数据类型

• 主要指对象，函数

数据类型转换

不同类型的数据参与运算时,需要转换类型

强制类型转换

1. 转换字符串类型

• 方法 : toString()
• 返回转换后的字符串

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

2. 转换number类型

• Number(param)
• 参数为要进行数据类型转换的变量或值，返回转换后的结果:
• 如果转换成功,返回number值
• 如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN

Number("abc")
typeof NaN
Number(undefined)
Number(null)

• parseInt(param)
• 参数为要解析的数据
• 作用 : 从数据中解析整数值

1. 如果参数为非字符串类型,会自动转成字符串
2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果

• parseFloat(param)
• 作用 : 提取number值，包含整数和小数部分

隐式类型转换

1. 当字符串与其他数据类型进行+运算时,表示字符串的拼接，不再是数学运算

• 转换规则 ：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

2. 其他情况下，一律将操作数转number进行数学运算

运算符

赋值运算符

• = : 将右边的值赋给左边变量

算数运算符

• +,-,*,/,% : 加减乘除取余

复合运算符

• +=,-=,*=,/=,%=

自增或自减运算符

• ++,-- : 变量的自增和自减指的是在自身基础上进行+1或-1的操作

注意

• 自增或自减运算符在单独与变量结合时，放前和放后没有区别
• 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/--,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++/--

关系运算符/比较运算符

• >,<,>=,<=,==,!=,===,!==
• 关系运算符用来判断表达式之间的关系,结果永远是布尔值true/false
• 字符串与字符串之间的比较,依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
• 一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
• null和其他数据类型做等值比较运算 不转换成数字
• null和undefined相等,但是null和undefined不全等
• 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
• 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

逻辑运算符

1. &&逻辑与

• 表达式同时成立,最终结果才为true;

2. ||逻辑或

• 表达式中只要有一个成立,最终结果即为true;

3. !逻辑非

• 对已有表达式的结果取反

三目运算符

表达式1 ? 表达式2 : 表达式3;

• 判断表达式1是否成立,返回布尔值
• 如果表达式1成立,执行表达式2
• 如果表达式1不成立,执行表达式3

流程控制

if语句

if(条件表达式){
表达式成立时执行的代码段
}

除零值以外，其他值都为真，以下条件为假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

• if-else结构

if(条件表达式){
//条件成立时执行
}else{
//条件不成立时选择执行
}

• 多重分支结构

if(条件1){
//条件1成立时执行
}else if(条件2){
//条件2成立时执行
}else if(条件3){
//条件3成立时执行
}...else{
//条件不成立时执行
}

switch语句

switch(value){
    case 值1 :
    //value与值1匹配全等时,执行的代码段
        break; //结束匹配
    case 值2 :
    //value与值2匹配全等时,执行的代码段
        break;
    case 值3 :
    //value与值3匹配全等时,执行的代码段
        break;
    default:
    //所有case匹配失败后默认执行的语句
        break;
}

1. switch语句用于值的匹配，case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作

循环结构

1. while循环

定义循环变量;
   while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}

2. do-while循环

do{
    循环体;
    更新循环变量
}while(循环条件);

与while循环的区别

• while 循环先判断循环条件，条件成立才执行循环体
• do-while 循环不管条件是否成立，先执行一次循环体

3. for 循环

for(定义循环变量;循环条件;更新循环变量){
    循环体;
}

1. break 强制结束循环
2. continue 结束当次循环，开始下一次循环

函数

  //函数声明
  function 函数名(参数列表){
    函数体
    return 返回值;
  }
  //函数调用
  函数名(参数列表);

函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

匿名函数

• 匿名函数自执行

 (function (形参){

 })(实参);

• 定义变量接收匿名函数

 var fn = function (){};
 fn(); //函数调用

作用域

JavaScript 中作用域分为全局作用域和函数作用域，以函数的{}作为划分作用域的依据

1. 全局变量和全局函数

• 只要在函数外部使用var关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
• 所有省略var关键字定义的变量，一律是全局变量

2. 局部变量/局部函数

• 在函数内部使用var关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问

3. 作用域链

• 局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域

DOM节点操作

DOM全称为Document Object Model，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

• 元素节点 (操作标签）
• 属性节点（操作标签属性）
• 文本节点（操作标签的文本内容）

标签属性都是元素节点对象的属性,可以使用点语法访问

h1.id = "d1";        //set 方法
console.log(h1.id);  //get 方法
h1.id = null;       //remove 方法

• 属性值以字符串表示
• class属性需要更名为className,避免与关键字冲突，例如：h1.className = "c1 c2 c3";

获取多个DOM元素和控制属性

1. 根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/

2. 根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/

3. 元素节点对象提供了以下属性来操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值

4. 操作 DOM 树中的属性值

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性

5. 操作元素样式

为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style = "width:300px;";
p.style.color = "white";
p.style.fontSize = "20px";

• 属性值以字符串形式给出，单位不能省略
• 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize