一 JavaScript介绍

JavaScript语言诞生主要是来完成页面的数据验证。因此它运行在客户端，需要浏览器来解析执行JavaScript代码。JavaScrip是Netscape公司的产品，最早取名为Live script，为了吸引更多的Java程序员，更名为JavaScript。

JavaScript是弱类型，Java是强类型。

弱类型就是类型可变，在定义了一个变量之后，这个变量的类型是可以随意更改的。
强类型是不可变类型，类型一旦确定了就不能再变了。

1.1 特点

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

1.2 JS和HTML代码结合的方式

1、script标签
在head或者body标签中编写JavaScript代码

  1. <script type="text/javascript">
  2.     alert("halo");
  3. </script>

2、单独的js文件
使用script标签来引入外部单独的JavaScript代码文件
src：属性，设置js文件的路径，可以是相对路径，也可以是绝对路径

  1. <script type="text/javascript" src="1.js"></script>

二 变量

JavaScript 在 ES6 之前一共有 6 种数据类型，ES6 后新增了 Symbol
一般只要不是前 5 种基本数据类型，其他的都是对象

  1. String 字符串
  2. Number 数值
  3. Boolean 布尔值
  4. Null 空值
  5. Undefined 未定义
  6. Object 对象
  7. Symbol

需要注意，NAN 是一个特殊值，含义是：非数值，字符

三 运算操作

3.1、关系运算

1、等于：==：是简单的做字面值的比较
2、全等于：===：除了做字面值的比较，还会比较两个值的数据类型

  1. const a = 10;
  2. const b = '10'
  4. console.log(a == b)            // true
  5. console.log(a === b)        // false

3.2、逻辑运算

1、且：&&
2、或：||
3、取反：！
在JavaScript语言中，所有的变量都可以作为一个boolean类型的变量去使用
0，null，undefined，””（空串），都认为是 false

&&运算结果

  1. 当表达式全为真的时候，返回最后一个表达式的结果
  2. 当表达式中有一个为假的时候，返回第一个假的表达式结果

||运算结果

  1. 当表达式全为假时，返回最后一个表达式的值

  2. 当表达式有真的时候，返回第一个为真的表达式的值

    四 对象

    在JS中，对象（Object）就是一种复合的数据类型，在对象中，可以保存多个不同数据类型的属性
    对象分类：

  3. 内建对象：如 ES 标准中定义的对象，在任何 ES 的实现中都可以使用，如：Math，Date，String，Number，Boolean 等。。

  4. 宿主对象：由JavaScript的运行环境决定，如JavaScript可以运行在不同的浏览器上，可以运行在 nodeJs 上。这些宿主都会提供一些对象给开发者使用
  5. 自定义对象：由开发者自己创建的对象

对象的基本操作

  1. <script>
  2.     // 创建对象
  3.     let p = {
  4.         'name': 'lz',
  5.         'age': 18
  6.     }
  8.     // 给对象添加属性
  9.     p.addrees = '广州'
  11.     // 修改属性
  12.     p.name = '韩寒'
  14.     // 删除属性
  15.     delete p.age
  17.     // 判断 name 属性是否包含在 p 对象当中
  18.     console.log('name' in p)
  20. </script>

4.1、函数

函数是一个特殊的对象，在函数中，可以封装一些特殊的功能，在特定的场景下执行。

  1. // 函数定义格式
  2. function 函数名 (形参列表) {
  3.   函数体
  4. }
  6. // 需要带返回值，就使用 return 返回
  7. function fun(a, b){
  8.   alert("fun函数体 a="+a+" b="+b)
  9.   return a+b
  10. }

使用变量指向函数

  1. var 函数名 = function(形参列表){
  2.   函数体
  3. }
  5. var fun2 = function (a, b) {
  6.   alert("fun函数体 a=" + a + " b=" + b)
  7.   return a + b
  8. }

注意：js中，函数不允许重载，因为函数名相同，会自动加载最后一个定义的同名函数

arguments
在函数中，JavaScript 会默认存在一个属性：arguments，这个属性接收调用此函数传过来的所有实参

  1. <script>
  2.     function fn1() {
  3.         console.log(arguments)
  4.     }
  5.     fn1(1, 2, 3, 4) // 打印一个 Arguments 对象，包含 1，2，3，4
  6. </script>

4.2、内建对象

Array，Date，Math

1、Array，数组对象
数组中的元素不存在时，读取返回 undefined，不会报错。

  1. let arr = []
  2. arr[0] = 10
  3. arr[1] = 12
  5. // 在数组末尾添加元素
  6. arr.push(100)
  7. // 删除末尾元素
  8. arr.pop()
  9. // 在数组开头添加元素
  10. arr.unshift(1000, 1001)
  11. // 删除开头元素
  12. arr.shift()
  14. // 数组遍历
  15. for (const item of arr) {
  16.   console.log('item: ', item)
  17. }

六 事件

什么是事件？事件是电脑输入设备和页面进行交互的响应，我们称之为事件。

6.1 常用事件

①onload：加载完成的事件，页面加载完成之后，常用于页面js代码的初始化
②onclick：单击事件，常用于按钮的点击响应
③onblur：失去焦点的事件，常用于输入框失去焦点后验证其输入是否合法
④onchange：内容发生改变的事件，常用于下拉列表和输入框内容发生改变后的操作
⑤onsubmit：表单提交事件，常用于表单提交前，验证所有表单项是否合法

6.2 事件注册

分为静态注册和动态注册。
什么是事件注册？其实就是告诉浏览器，当事件响应后要执行哪些操作代码。叫事件注册或事件绑定。

1）静态注册
通过html标签的事件属性直接赋予事件响应后的代码，这种方式就叫做静态注册

2）动态注册
先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}，这种形式赋予事件响应后的代码，叫做动态注册
步骤：
①获取标签对象
②标签对象事件名 = function(){}

6.3 onload事件

onload事件是浏览器解析完页面之后就会自动触发的事件 

  1. <body onload="alert('我是onload事件')">

6.4 onclick事件

单击事件，当点击了会触发该事件

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var btn01 = document.getElementById("btn01");
  4.         btn01.onclick = function(){
  5.             alert("我是btn01");
  6.         }
  7.     }
  8. </script>

6.5 onsubmit事件

表单提交事件
onsubmit=” return false;” 可以阻止表单提交

  1. <form id="btn01" action="http://localhost:8080" method="post">
  2.     <input type="submit" value="提交" ></input>
  3. </form>
  4. <script>
  5.     window.onload = function(){
  6.         document.getElementById("btn01").onsubmit= function(){
  7.             return false;
  8.         }
  9.     }
  10. </script>

七 DOM对象模型

DOM（Document Object Model）文档对象模型
简单来说：就是把文档中的标签，属性，文本，转换成对象来管理。

document对象的理解
①document管理所有HTML文档内容
②document是一种树形结构的文档，有层级关系
③它让我们所有的标签都对象化
④可以通过document访问到所有的标签对象

7.1 document对象中的方法介绍

1）document.getElementById(elementId)
通过标签的 id 属性来查找 dom 对象，elementId 是标签的 id 属性值
返回第一个拥有指定 id 属性值的对象引用

2）document.getElementsByName(elementName)
通过标签的 name 属性查找 dom 对象，elementName 是标签的 name 属性值
返回带有指定属性值的对象集合

3）document.getElementsByTagName(tagName)
通过标签名来查找dom对象，tagName 是标签名
返回带有指定标签名的对象集合

4）document.createElement(tagName)
通过标签名创建一个标签对象，tagName 是标签名

注意：document对象的查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询，如果没有 id 属性，则优先使用 getElementByName 方法来进行查询，如果最后都没有的话，就使用标签名来进行查询 getElementByTagName

7.2 正则表达式对象

正则表达式是描述字符模式的对象
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具

1）创建正则表达式对象的方式

  1. var patt = new RegExp("e");
  2. var patt = /e/
  • 测试：用于判断字符串是否符合正则
    1. var patt = new RegExp("e");
    2. alert(patt.test("abdce"))
    2）判断是否包含某些字符
    1. var patt = /[a-zA-Z0-9]/

7.3 节点的常见属性

节点就是标签对象
方法：
1）getElementsByTagName() ：通过具体元素节点调用此方法，获取当前节点的指定标签孩子节点
2）appendChild(oChildNode)：可以添加一个子节点，oChildNode是要添加的孩子节点

属性：
1）childNodes：获取当前节点的所有子节点
2）firstNode：获取当前节点的第一个子节点
3）lastNode：获取当前节点的最后一个子节点
4）parentNode：获取当前节点的父节点
5）nextSiling：获取当前节点的下一个兄弟节点
6）previousSibling：获取当前节点的上一个兄弟节点
7）className：获取或者设置标签的class属性值
8）innerHTML：获取/设置起始标签和结束标签中的内容
9）innerText：获取/设置起始标签和结束标签中的文本