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.如果是字符串是一个空串或者是一个全是空格的字符串，则转换为0Boolean –>数字
1.true-->1 2.false-->0null –>数字
null -->0undefined –>数字
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)
总之:最后得到的结果都是一样的
类型转换
- 隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。
- 规则：
- +号两边只要有一个是字符串，都会把另外一个转成字符串
除了+号外的算术运算符，比如 - * /等都会把数据转成数字类型
- 小技巧：
由于转换类型不明确，会有点小坑：+号作为正号解析可以转成数字型
任何数据和字符串 相加结果都是字符串
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) //结果为3return 后面代码不会在被执行，会立即结束当前函数，
所以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>
