冷静不了一点

JavaScript是什么（如有不懂得可以查看mdn）

含义：简称js,是一种运行在客户端（浏览器）的编程语言（脚本语言），实现人机交互效果。
组成：

ECMAScript: 规定了js基础语法核心知识（如：变量，分支语句ect）
Web APIS:DOM(操作文档，比如对页面元素进行移动，大小，添加删除等操作)、BOM（操作浏览器，比如页面弹窗，检查窗口宽度、存储数据到浏览器等等）

脚本语言的定义：无需编译，可以有某种解释器直接执行（sql、python、html、css、JavaScript）直接有某种解释器（引擎）解释执行，逐行从上往下解释执行。

作用：

网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

具有的特点：

解释型脚本语言：
JavaScript是一种解释型脚本语言，与C、C++等语言需要先编译在运行不同，使用JavaScript编写的代码不需要运行，可以直接运行。
弱类型：
JavaScript是一种弱类型的编程语言，对使用的数据类型没有严格的要求。
面向对象：
JavaScript是一种面向对象语言，使用JavaScript不仅可以创建对象，也能操作使用已有的对象。
动态性：
JavaScript是一种采用事件驱动的脚本语言，它不需要借助Web服务器就可以对用户的输做出响应。例如我们再访问一个网页时，通过鼠标再网页中进行点击或滚动窗口时，通过JavaScript可以直接对这些事件做出响应。
跨平台性：
JavaScript不依赖操作系统，再浏览器中就可以运行。因此一个JavaScript脚本再编写完成后可以再任意系统上运行，只需要系统上的浏览器支持JavaScript即可。

执行顺序：

JavaScript代码执行顺序：
可以写在HTML文档<head>标签与<body>标签中，写在不同的标签中的执行顺序不同

书写位置（3种）：

内部（写在body里面）：

      <body>
          <!--内部js-->
          <script>
              <!-- alert:页面弹出警示框-->
              alert("你好，js")
          </script>
      </body>

1.注意事项：
我们将<script>尽量放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML，如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失败。

外部（通过src引入外部js文件）：

  <body>
      <!-- 通过src引入外部js文件-->
      <script src="./myjs/my.js"></script>
  </body>

注意事项：
<script>标签中间无需写代码，否则会被忽略！外部的JavaScript会使代码更加有序，更易于复用，且没有脚本的混合，HTML也会更加易于读。

内联（代码写在标签内部）：

  <body>
      <button onclick="alert('逗你玩玩')">点击我有好运喔</button>
  </body>

输入、输出语法：

理解：人和计算机的交互，用户用过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语法：

 <body>
     <script>
         // 1.文档输出内容（在后面Ctrl+/ 生成单行注释）：向body内输出内容     1. 注意事项：如果输出的内容写的是标签，也会被解析成网页元素

         document.write('我是图图小淘气')
         document.write('<h1>面对世界很好奇</h1>')

         // 2.alert直接输出 ：页面弹出警告对话框

         alter('图图真棒')

         /*3.控制台打印输出 给程序员调试使用 （开始shift+alt+a生成多行注解)*/

         console.log('看一看对与不对')
         console.log('客户端又看不到的地方')   

     </script>
 </body>

总之，JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

        <!DOCTYPE html>
        <html>
        <body>

        <h1>我的第一个 Web 页面</h1>

        <p id="demo">我的第一个段落</p>

        <script>
        document.getElementById("demo").innerHTML = "段落已修改。";
        </script>

        </body>
        </html>

使用 console.log() 写入到浏览器的控制台。

输入语句：
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入信息
```
                 prompt('请输入你的姓名：')
```

变量：

含义：变量是计算机存储数据的容器，注意：变量不是数据本身，它仅仅是一个用于存储数据的容器，可以理解为一个个用来装东西的子箱子。

声明（var 、let、const）：

          let age=18    //注意let 不允许多次声明一个变量，但是var可以多次声明同一个变量（不太好）

精辟： var既可以重新声明，也可以重新赋值；let不能重新声明，可以重新赋值；const 既不能重新声明，也不能重新赋值（专一的好家伙，定义常量时必须赋值）。
变量赋值之后如何更新新值：
直接给它一个不同的值更新它的值，例如：
```
          lat age = 18
           age = 19 
```
本质：是程序再内存中申请的一块用来存放数据的小空间
变量命名规则与规范：

规则：
- 不能用关键字（有特殊含义的字符，如js中的let、var、const、if、for等）
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写
规范：
- 起名要由意义
- 遵守小驼峰命名法（第一个单词的首字母小写，后面每一个单词的首字母大写。如：userName）

优先级（同时使用多个运算符编写程序时，会按照某种顺序先后执行）：

JavaScript中优先级越高越先被执行，优先级相同时从左向右执行。

（乘、除、取余优先级相同）>（加、减优先级相同）
使用（）可以提升优先级
总之：先乘除后加减，有括号的先算括号里面的

数据类型

数字类型（number）：其中包括整型数和浮点数
1.注意事项：
NaN代表一个计算错误。它是一个不正确的或者是一个未被定义的数字操作所得到的结果（NaN是粘性的：任何对NaN的操作都会返回Nan）。
字符串类型（String）：
通过单引号（’’）、双引号（””）、或则反引号（``）包裹的数据都叫字符串，单双引号没有本质上的区别。
2.注意事项：
无论是单双引号都必须成对使用
单引号/双引号可以互相嵌套，但是不可以自己嵌套自己。

必要时可以使用转义字符\，输出单引号或双引号

      console.log('我是图图"小淘气"')
      console.log("我是图图'小淘气'")
      console.log('我是图图\'小淘气\'')

字符串的拼接：

        let age = 18
        //方法一：模板字符串（外面用反引号``,里面用${变量名}）
        document.write(`我今年${age}岁了`)  
        //方法二;直接用+号拼接法
        document.write('我今年' + age + '岁了')

布尔类型（Boolean）:
有两个固定的值，表示为真时（true），表示为假时（false）
未定义类型（undefined）：
未定义是比较特殊的类型，只有一个值undefined。（用在只声明变量，不赋值的情况下，变量的默认值为undefined

空类型（null）：
JavaScript中的null仅仅是一代表”无”，”空”，”值未知”的特殊值
3.注意事项：

          null和undefined区别：
          undefined表示`没有赋值`（还有就是如果检测到变量是undefined就说明没有值传过来）
          null表示`赋值了，但是内容为空`（官方解释：把null作为尚未创建的对象，说白了就是，有一个变量里面存放的是一个对象呢，但是对象还没有创建好，可以先给个null，后面再来赋值）

          console.log(undefined + 1)  //结果为NaN
          console.log(null + 1)  //结果为1，null是赋了值，但是值为空

强制类型转换

强制类型转换是指将一个数据类型强制转换为其他的数据类型。一般是指，将其它的数据类型转换成为String、Number、Boolean。
转换为String类型：
有三种方式：toString()、String()、拼串。

toString()：
调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是要注意的是：null和undefined这两个值没有toString()方法，如果调用他们的方法会报错。

let a =1234
a=a.toString()
console.log(a)
console.log(typeof a)
String()：
调用该函数，并将被转换的数据作为参数传递给函数，使用String()函数作强制转换时，对于Number和Boolean实际上就是调用toString()方法，但是对于null和undefined，就不会调用toString()方法，而是会将null和undefined直接转换为：”null”、”undefined”。

let a =1234
a=String(a)
console.log(a)
console.log(typeof a)

为任何数据类型+""

                 let a=1234
                 a=a+""
                 console.log(a)
                 console.log(typeof a)

转换为Number类型：
有三个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()。Number()可以用用来转换任意类型的数据，而后两只能用于转换字符串。

Number()函数：

字符串 –> 数字

          1.如果是纯数字的字符串，则直接转换为数字
          2.如果字符串中有非数字的内容，则转换为NaN
          3.如果是字符串是一个空串或者是一个全是空格的字符串，则转换为0

Boolean –>数字

          1.true-->1
          2.false-->0

null –>数字
```
          null -->0
```
undefined –>数字
```
          undefined  -->NaN
```

parseInt()：
把一个字符串转换为一个整数
parseFloat():
把一个字符串转换为一个浮点数

注意：

            如果是对非String类型使用parseInt()或者parseFloat(),它会先将其转换为String然后再操作。

转换为Boolean类型：
只使用Boolean()函数

Boolean()函数：
- 数字–>Boolean

除了0和NaN，其余都是true
- 字符串–>Boolean
除了空串，其余都是true
- null 和 undefined都会转换为false
- 对象也会转换为true

控制台输出语句和检测数据类型

用过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型。它支持两种语法形式

作为运算符： typeof x （常用的写法）
函数形式： typeof(x)
总之:最后得到的结果都是一样的

类型转换

隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。
规则：
1. +号两边只要有一个是字符串，都会把另外一个转成字符串
2. 除了+号外的算术运算符，比如 - * /等都会把数据转成数字类型
小技巧：
由于转换类型不明确，会有点小坑：
1. +号作为正号解析可以转成数字型
2. 任何数据和字符串相加结果都是字符串
```
   console.log('one'+1)  //one1
   console.log(2-'2')    //0
   console.log(+12)     //12
   console(+'123')      //123  转换成数字型
```

赋值运算符：（对变量进行赋值的运算符）

一元运算符：（自增，自减）

 <!-- 前置自增和后置自增的在运算时区别，but再单独使用的时候没有差别 -->
 let i =1
 console.log(++i + 2) //结果是4
 //注意i=2， i先自加1，变为2之后，在和后面的2相加

 console.log(i++ + 2)  //结果是3
 注意此时i=1 ，先和2相加，先运算输出完毕后，i再自加是2

比较运算符：（比较结果为Boolean型，即只会得到true 或 false）
其他的都一样，只有以下特殊的：

  ==：左右两边值是否相等
  ===：左右两边值是否类型和值都相等
  !==:左右两边是否不全等
  //对比：
  =：是赋值
  ==：是判断
  ===：是全等（开发中判断是否相等，强烈推荐使用===）

注意：

            <!-- 不同类型之间比较会发生隐式转换,最终把数据隐式转换成number类型再比较 例如： 2=='2'结果为true  -->
            <!-- 字符串比较的字符对应的ASCII码：从左往右一次比较，如果第一位一样在比较第二位，以此类推 -->
            <!-- NaN不等于任何值,包括它本身(只要涉及到全为false) -->
            <!-- 尽量不要比较小数,因为小数有精度问题 -->

逻辑运算符:

      &&(一假为假)     ||(一真为真)     !(取反)

运算符优先级

小括号
一元运算符(++ – !（优先级高）)
算数运算符(先 * / % 后 + -)
关系运算符(> >= < <=)
相等运算符(== != === !==)
逻辑运算符(先&& 后 ||)
赋值运算符(=)
逗号运算符(,)

条件语句

含义：通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的语句有：

if…else
switch …case(需要注意的是一旦符合case的条件程序会一直运行到结束，所以我们一般会在case中添加break作为语句的结束，判断值一定是要
===的)

循环语句

含义：只要满足一定的条件将会一直执行，最基本的语句有：

while
do …while
for

跳转控制

break：结束最近的一次循环，可以在循环和switch语句中使用
continue：结束本次循环，执行下一次循环，只能在循环中使用

函数

作用：声明一个需要的函数，可以把具有相同或相似的逻辑代码“包裹起来”，通过函数调用执行，做到精简代码方便复用。function()->是被设计为执行特定任务的代码块

声明：

          function 函数名（）{
              方法体
          }
          <!-- 调用 -->
          函数名（）
          <!-- 函数的复用代码和循环重复代码用什么不同：
          - 循环代码写完立即执行，不能很方便控制执行位置
          - 函数随时调用，随时执行，可重复调用
           -->

有返回值的函数

在函数体中使用return关键字能将内部的执行结果交给函数外部使用

     function getTotalPrice(x,y){
         return x+y
     }
     let sum=getTotalPrice(1,2)
     console.log(sum)  //结果为3

return 后面代码不会在被执行，会立即结束当前函数，所以return后面的数据不要换行写

return 函数可以没有return，这种情况函数默认返回值为undefined，例如：

     function fn(){

     }
     let re = fn()
     console.log(re)   //返回结果为undefined

使用误区

JavaScript中允许在字符串中使用断行语句：

             var x =
             "Hello World!";

但是，在字符串中直接使用回车换行是会报错的；所以字符串断行需要使用反斜杠()，如下所示:

                var x = "Hello \
                World!";

Undefined 不是 Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。
```
         if (typeof myObj !== "undefined" && myObj !== null) 
```
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。以下代码的的变量 i 返回 10，而不是 undefined：
```
         实例
         for (var i = 0; i < 10; i++) {
             // some code
         }
         return i;
```

thi关键字：

在JavaScript中this不是固定不变的，它会随着执行环境的改变而改变

在方法中，this表示该方法所属的对象

          var person = {
          firstName: "John",
          lastName : "Doe",
          id       : 5566,
          fullName : function() {
              return this.firstName + " " + this.lastName;
          }
          };

如果单独使用，this表示全局对象

          //在浏览器中，window就是该全局对象为`object Window`
          var x = this
          //严格模式下，如果单独使用，this 也是指向全局(Global)对象。
          "use strict";
          var x = this;

在函数中，this表示全局对象

          //在函数中，函数的所属者默认绑定到this上
          function myFunction(){
              return this;
          }

在函数中，严格模式下，this是undefined

          //严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
          "use strict";
          function myFunction() {
          return this;
          }

在事件中，this表示接受事件的元素

          在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
          <button onclick = "this.style.display='none'">点我后我就消失不见了</button>

类似call() 和 apply() 方法可以将this引用到任何对象，即显示函数绑定
在JavaScript中函数也是对象，对象则有方法，call()、apply()就是函数对象方法。这两个方法异常强大，允许切换函数执行的上下文环境，即切换this绑定的对象。例如：

         <p id="demo"></p>
          <script>
          var person1 = {
          fullName: function() {
              return this.firstName + " " + this.lastName;
          }
          }
          var person2 = {
          firstName:"John",
          lastName: "Doe",
          }
          var x = person1.fullName.call(person2); //// 返回 "John Doe"
          document.getElementById("demo").innerHTML = x; 
          </script>

表单及其验证、验证API

表单验证：HTML表单验证可以通过JavaScript来完成
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

      <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <script>
          function validateForm() {
              var x = document.forms["myForm"]["fname"].value;
              if (x == null || x == "") {
                  alert("需要输入名字。");
                  return false;
              }
          }
          </script>
          </head>
          <body>

          <form name="myForm" action="demo_form.php"
          onsubmit="return validateForm()" method="post">
          名字: <input type="text" name="fname">
          <input type="submit" value="提交">
          </form>

          </body>
          </html>

HTML表单自动验证：
HTML表单验证也可以通过浏览器来自动完成，就是设置必填required，判断其值是否为空，为空时候required属性会阻止表单的提交：

          <form action="demo_from.php" method="post">
          <input type="text" name="fname" required="required">
          <input type="submit" value="提交">
          </form>

          1.E-mail 验证：在数据在送往服务器前对数据通过条件自动检测
          下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

          意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

          function validateForm(){
          var x=document.forms["myForm"]["email"].value;
          var atpos=x.indexOf("@");
          var dotpos=x.lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
              alert("不是一个有效的 e-mail 地址");
              return false;
          }
          }
          下面是连同 HTML 表单的完整代码：

          实例
          <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
              Email: <input type="text" name="email">
              <input type="submit" value="提交">
          </form>

数据验证
数据验证用于确保用户输入的数据是有效的。典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。例如：

服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

验证API：

约束验证 DOM 方法

checkValidity()：如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()
设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity(‘’)
setCustomValidity(null)
setCustomValidity(undefined)

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <script>
                    function myFunction(){
                        var x =document.getElementById("id1");
                        x.setCustomValidity("");  //使用前先取消定义，否则下次点击checkValidity总会返回false,若是不取消下次直接默认checkValidity==false 
                        if(x.checkValidity() == false){
                            x.setCustomValidity("错误");
                            document.getElementById("demo").innerHTML=x.validationMessage;
                        }else{
                            x.setCustomValidity("对啦");
                            document.getElementById("demo").innerHTML=x.validationMessage;
                        }
                    }
                </script>
            </head>

            <body>
                <p>输入数字并点击验证按钮：</p>
                <input type="number" id="id1" max="300" min="100" required>
                <button type="submit" onclick="myFunction()">点我</button>
                <p>如果输入数字100-300以外，会提示错误信息。</p>
                <p id="demo"></p>
                
            </body>
            </html>

void（）

该操作指定要计算一个表达式但是不返回值（但是括号内的表达式还是要运行的）。

javascript:void(0)：相当于一个死链接，什么都不会发生。

          <a href="javascript:void(0)">单击此处什么也不会发生</a>

区别href=”#”与href=”javascript:void(0)”

#包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

            <a href="javascript:void(0);">点我没有反应的!</a>
            <a href="#pos">点我定位到指定位置!</a>
            <br>
            ...
            <br>
            <p id="pos">尾部定位点</p>