JavaScript

JavaScript

一门客户端脚本语言，运行在客户端，每一个浏览器都有JavaScript解析引擎，增强用户与HTML页面的交互过程，用来控制HTML元素，增加动态效果，增强用户体验。

1. 发展历程：

1. 专用于表单校验的客户端脚本语言c--，后来更名为ScriptEase
2. 网景公司开发的LiveScript脚本语言，后来与sun公司专家合作改进LiveScript开发出JavaScript
3. 微软抄袭JavaScript开发脚本语言JScript
4. ECMA（欧洲计算机制造商协会），制定标准ECMAScript，成为所有客户端脚本语言的标准
5. 简而言之：JavaScript = ECMAScript + JavaScript（BOM + DOM）

2. ECMAScript

1. 基本语法

   1. 与HTML的结合方式

      1. 内部JS：在HTML页面了定义script标签，在script内部写JavaScript代码
      2. 外部JS：在HTML页面了定义script标签，通过src属性引入外部js文件
      3. 注意：
         1. script标签的位置影响执行的顺序，是阻塞执行的
         2. Script标签可以定义在HTML页面的任意位置

   2. 注释

      1. 单行注释：// 注释内容
      2. 多行注释：/* 多行注释 */

   3. 数据类型

      1. 5种原始数据类型：
         1. number：数字，包括整数、小数、NaN
         2. string：字符串
         3. boolean：true和false
         4. null：一个对象为空的占位符
         5. undefined：未定义，变量没有给初始化值，默认赋值为undefined
      2. 引用数据类型：
      3. 数据类型转换：在JavaScript中，如果运算数不熟运算符要求的数据类型，那么js引擎会自动将运算数进行类型转换
         • 其他类型转为number：
           • string转为number：按照字面值进行转换，如果字面值无法转换，就转化为NaN
           • boolean转为number：true转为1，false转为0
         • 其他类型转boolean：
           • number转boolean：0或者NaN为false，其他为true
           • string转boolean：除了空字符串，其他全是true
           • null&object转boolean：全是false
           • 对象：所有对象全是true

   4. 变量：一个存储数据的内存区域

      1. JavaScript是弱类型语言，在开辟变量存储空间时，不定义空间存储的数据类型，可以存储任意的数据类型
      2. 语法：var 变量名 = 变量值；
      3. 使用typeof运算符可以获取变量的类型，注意有一个小bug是ECMA沿用的JavaScript的小bug，typeof获取null的的类型是object

   5. 运算符

      1. 一元运算符：只有一个运算数 ++ 、--、 +（正号）

         var s = +("123"); // 自动发生转换，转为number类型的123
         

      2. 算术运算符：+、- 、 * 、/

      3. 赋值运算符：=、+=、-=

      4. 比较运算符：>、<、、>= 、<=、=

         • 类型相同的比较：直接比较

           • string按照字典顺序、按位比较直到比出结果

         • 类型不同的比较：先转换类型再比较

           “123” == 123 //先进行类型转换返回true
           “123” === 123 // 在比较前先判断类型是否一致，返回false
           

      5. 逻辑运算符：&&、||、！

      6. 三元运算符：（表达式？ 值1：值2）

   6. 流程控制语句:

      1. if...else
      2. switch：可以接收任意的原始数据类型
      3. while
      4. do...while
      5. for

   7. JavaScript的一些特殊语法：

      1. 语句以分号结尾，当一行只有一条语句的时候可以省略分号
      2. 变量定义可以使用关键字var，但是也可以不使用
         • 使用关键字var：定义的是局部变量
         • 不使用关键字var：定义的是全局变量

3. 基本对象

1. Function：用来描述方法（函数）的对象

   1. 创建：

      1. var fun = new Function(形式参数列表，方法体)；（不常用）
      2. function 方法名称(形式参数列表){方法体}
      3. var 方法名 = function(形式参数列表){方法体}

   2. 方法：

   3. 属性：

      1. 有一个length属性，表示形式参数的个数

   4. 特点：

      1. 定义方法不用写参数类型，因为都是var

      2. 方法是一个对象，如果定义名称相同的方法，那么后面回覆盖前面

      3. 在js中，方法的调用只与方法的名称有关，与参数列表无关，写几个参数都可以

      4. 在js方法的声明中，有一个隐藏的内置对象，是一个数组，名为arguments，用来封装调用时候传入的实际参数

         var sum = function () {// 返回值类型都是var，不用写
             var ans = 0;
             for(i = 0; i < arguments.length; i++) {
                 ans += arguments[i];
             }
             return ans;
         }
         
         alert(sum(1,2,3));
         alert(sum(1,2,3,4));
         

2. Array：

   1. 创建:
      1. var arr = new Array(元素列表);
      2. var arr = new Array(默认长度);
      3. var arr = [元素列表];
   2. 方法
      1. join(参数)：将数组中的元素按照指定的分隔符将拼接成为一个字符串，无参数默认用“，”分割；
      2. push()：向数组的末尾添加一个或者多个元素，返回值是新的数组长度；
   3. 属性
   4. 特点:
      1. 创建的时候只有一个值，那么就是表示数组的默认长度，有多个就表示元素列表
      2. 同一个数组可以有不同类型的元素，也就是可以装不同类型的元素；
      3. 数组的长度是可变的，使用到了会自动扩容

3. Boolean：相当于原始数据类型boolean的包装类

4. Date：

   1. 创建：var date = new Date();
   2. 方法：
      1. toLocaleString()：返回当前date对象对应的时间本地字符串格式
      2. getTime()：获取当前对象的毫秒值

5. Math：

   1. 创建：与java类似，不用创建对象，使用Math.方法名()
   2. 方法：
      1. random()：返回0 - 1之间的随机数，包含0，不包含1
      2. ceil()：天花板方法，向上取整
      3. floor()：地板方法，向下取整
      4. round()：四舍五入

6. Number：原始数据类型的包装类对象

7. String：原始数据类型的包装类对象

8. RegExp：正则表达式对象

   1. 正则表达式：定义字符串的组成规则
      1. 单个字符：[]
         1. 如:[a]——一个字母a，[ab]——a或者b，[a-zA-Z0-9_]——小写字母、大写字母、数字、下划线
         2. d——单个数字字符[0-9]，w——单个单词字符[a-zA-Z0-9]
      2. 量词符号：
         1. *：出现0次或1一次
         2. ?：出现0次或多次
         3. +：出现一次或多次
         4. {m,n}：长度>=m && 长度 <= n；缺省m表示最多n次，缺省n表示最少m次
   2. 创建
      1. var reg = new RegExp("正则表达式");
      2. var reg = /正则表达式/
   3. 方法
      1. test(参数)：验证字符串参数是否符合定义的规则

9. Global：全局对象

   1. 特点：全局对象，这个对象的方法不需要对象可以直接使用：方法名()

   2. 方法：

      1. encodeURL()：URL编码

      2. decodeURL()：URL解码

      3. encodeURLComponent()：URL编码

      4. decodeURLComponent()：URL解码

         var str = "你是猪吗";
         var encode = encodeURI(str);
         document.write(encode + "<br>");// %E4%BD%A0%E6%98%AF%E7%8C%AA%E5%90%97
         var decode = decodeURI(encode);
         document.write(decode + "<br>");// 你是猪吗
         

      5. parseInt()：将字符串转为数字，会逐一字符判断是否可以转为数字，直到无法转为数字

         “1234”:1234
         "1234abc”：1234
         

      6. isNaN()：判断一个值是否NaN

      7. eval()：将字符串转为js代码，并且执行该代码

         var jscode = "alert(123)";
         eval(jscode); // 弹出123
         

4. BOM对象

1. 概念：Browser Object model，浏览器对象模型，将浏览器的各个组成部分封装成对象。

2. 浏览器的对象：

   1. window窗口对象：

      1. 创建：
      2. 方法：
         1. 与弹出框有关的方法：
            • alert()：显示一段消息以及一个确认按钮的警告框
            • confirm()：显示一段消息以及一个确认按钮和一个取消按钮
              • 确定：返回true
              • 取消：返回false
            • prompt()：显示可提示用户输入的对话框
              • 返回值是用户输入的信息
         2. 与打开关闭有关的方法：
            • open(参数)：打开一个新窗口，返回新的一个Window对象，参数是URL，空参表示打开空白窗口
            • close()：关闭调用close()的对象，如new_window.close()关闭的是new_window窗口，默认是当前窗口
         3. 与定时器有关的方法：
            • setTimeOut()：在指定的毫秒数后调用函数或者计算表达式
              • 参数：
                • 参数1：js代码片段或者Function对象
                • 参数2：毫秒值
              • 返回值：定时器的名字
            • clearTimeOut()：取消由setTimeOut()方法设置的timeout
              • 参数：传入要取消的定时器
            • setInterval()：按照指定的周期(以毫秒计算)来调用函数或者计算表达式
            • clearInterval()：取消由setInterval()方法设置的interval
      3. 属性：
         1. 获取其他的BOM对象
            1. history
            2. location
            3. Navigator
            4. Screen
         2. 获取DOM对象
            1. document对象就是通过window对象获取的
      4. 特点：
         1. Window对象不用创建，可以直接使用：window.方法名()；

   2. Location地址栏对象：

      1. 创建：通过window.location获取，或者直接history获取

      2. 方法：

         1. reload()：重新加载当前文档，也就是刷新页面

      3. 属性：

         1. href：设置或者返回完整的URL

      4. demo

         // 5秒钟后自动跳转到百度
         
         var second = 5;
         var showTime = function () {
             second--;
             if(second == 0) {
                 location.href = "https://www.baidu.com";
             }
             var time = document.getElementById("time");
             time.innerHTML = second + "";
         
         }
         setInterval(showTime, 1000);
         

   3. History历史记录对象：

   4. Navigator浏览器对象：

   5. Screen屏幕对象：

5. DOM对象：Document Object Model

概念：定义了访问HTML和XML文档的标准，允许程序和脚本可以动态的访问和更新文档的内容、结构、样式；

W3C DOM标准被分为3个不同的部分：

1. 核心DOM：针对任何结构化文档的标准模型
   1. Document：文档对象
   2. Element：元素对象
   3. Attribute：属性对象
   4. Text：文本对象
   5. Comment：注释对象
   6. Node：结点对象，是其他5个对象父对象
2. XML DOM：针对XML文档的标准模型
3. HTML DOM：针对HTML文档的标准模型

1.Document对象

1. 创建（获取）：使用window获取，window.document或者直接document
2. 方法：
   1. 获取Element对象的方法：
      1. getElementById()：根据id属性值获取元素对象，id属性值一般是唯一的
      2. getElementByTagName()：根据元素名称获取对象们（全部同名的元素），返回一个元素对象的数组
      3. getElementByClassName()：根据class属性的值获取元素对象们，返回一个数组；
      4. getElementByName() ：根据name属性值获取元素对象们，返回一个数组
   2. 创建其他DOM对象的方法：
      1. createAttribute(name)
      2. createcomment():
      3. createElement()：
      4. createTextNode()：
3. 属性：

2. Element元素对象

1. 创建（获取）：通过document获取
2. 方法：
   1. removeAttribute()：删除属性
   2. setAttribute()：设置属性

3. Node结点对象

1. 特点：所有的DOM对象都可以认为一个Node对象

2. 方法：

   1. CRUD DOM树的方法

      1. appendChild()：向节点的子节点列表的结尾添加新的节点；
      2. removeChild(参数)：删除并返回当前节点的指定子节点
      3. replaceChild(参数1，参数2)：用新节点替换原来的节点

      del.onclick = function () {
          var div1 = document.getElementById("div1");
          var div2 = document.getElementById("div2");
          div1.removeChild(div2);
      }
      
      var add = document.getElementById("add");
      add.onclick = function () {
          var div1 = document.getElementById("div1");
          var div3 = document.createElement("div");
          div3.setAttribute("id", "div3");
          div1.appendChild(div3);
      }
      // 点击连接希望连接不跳转，可以这样实现
      <a href="javascript:void(0);" id="del">删除节点</a>
      

3. 属性：parentNode获取到当前节点的父节点

6.HTML DOM

1. 标签体的设置和获取：innerHTML

   使用 += 添加子元素：

   table.innerHTML += "<tr>
   " +
       "        <td>"+id+"</td>
   " +
       "        <td>"+name+"</td>
   " +
       "        <td>"+gender+"</td>
   " +
       "        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
   " +
       "    </tr>";
   

2. 使用HTML元素对象的属性

3. 控制样式

   var div1 = document.getElementsByTagName("div")[0];
   div1.onclick = function () {
       // 1.使用style修改属性，style 是每一个标签都有的属性
       div1.style.border = "1px solid green";
       div1.style.width = "300px";
       div1.style.fontSize = "20px";
   }
   
   // 2. 提前定义好class选择器的样式，修改标签的class属性，那么提前定义好的样式就可以作用了
   var div2 = document.getElementsByTagName("div")[1];
   div2.onclick = function () {
       div2.className = "div2";
   }
   

7.事件的监听机制

概念：某些组件被执行了某些操作之后，出发某些代码的执行

事件：单击、双击、按下键盘、鼠标移动等

事件源：按钮、文本输入框等

监听器：代码

1. 常见的事件

   1. 点击事件：

      1. onclick：单击事件
      2. ondbclick：双击事件

   2. 焦点事件：

      1. onblur：失去焦点，一般用于表单校验，比如失去焦点后就应该校验用户输入的用户名是否存的、格式之类的。
      2. onfocus：元素获得焦点

   3. 加载事件：

      1. onload：一个页面、图片加载完成
         • 一般给body、window绑定onload事件

   4. 鼠标事件：

      1. onmousedown：鼠标按钮被按下

         1. 定义方法的时候可以给方法一个形式参数，用来接收event对象，该对象有一个属性button，可以获取是鼠标的哪一个键别按下了

            username.onmousedown = function (event) {
                alert(event.button);// 鼠标三键左中右对应012
            }
            

      2. onmousemove：鼠标被移动

      3. onmouseout：鼠标从元素移开

      4. onmouseover：鼠标被移到某个元素之上

      5. onmouseup：鼠标按钮被松开

   5. 键盘事件：

      1. onkeydown：某个键盘按钮被按下

         username.onkeydown = function(event) {
             alert(event.keyCode);
         }
         

      2. onkeyup：某个键盘按钮被松开

      3. onkeypress：某个键盘按钮被按下并松开

   6. 选择和改变：

      1. onchange：域的内容被改变
      2. onselect：文本该选中

   7. 表单事件：

      1. onsubmit：确认按钮被点击

         一般用来阻止表单提交，比如用户名校验不通过就阻止了，在方法里return false;

      2. onreset：重置按钮被点击