（一）JavaScript起源和基本语法
1、定义
定义：JavaScript 决定了网页的交互
| 语言 | 名称 | 作用 |
|---|---|---|
| HTML | 超文本标记语言 | 网页的结构 |
| CSS | 层叠样式表 | 网页的样式 |
| javascript | JavaScript | 网页的交互 |
JavaScript与Java有什么关系？
没有关系！！
2、起源
javascript之父，布兰登.艾奇。早期因为表单格式提交不正确，导致服务器资源浪费，发明js进行前端的一些表单验证，避免一些错误或者没有必要的请求。
1995年，将js嵌入Netscape Navigaor 3.0
3、组成部分
| 核心语法 | 文档对象模型 | 浏览对象模型 |
|---|---|---|
| ECMAScript | DOM | BOM |
| 内功心法 | 招式（使用js操作html和css） | 招式（使用js操作浏览器） |
4、ECMAScript是什么？
核心语法：变量、数据类型、语句、类、函数。
语言是相通的，任何编程语言都有核心语法。
5、js基础写法
==三种引入方式：==
1.写在HTML里面，script标签之间
2.写在外部JS文件中里，使用script标签引入，将地址指定给src属性
3.写在标签上面，没有固定统一的写法
你好
前端页面=HTML文件+CSS文件+JS文件
==前端一定要注意：行为、结构、表现三者分离==
6.JS注释写法
1、单行注释 //注释内容
2、多行注释 /*注释内容*/
3、文档注释
/**
* 注释内容1
* 注释内容2
*/
7.标识符和关键字、保留字
| 含义 | 命名规则 | |
|---|---|---|
| 标识符 | 名称，用来定义js变量，函数名等。不能跟关键字相同 | 以字母、$或下划线开头，由字母数字下划线$组成 |
| 关键字 | js已经定义好的一些名称，有特定含义 | 以字母、$或下划线开头，由字母数字下划线$组成 |
| 保留字 | 预留的关键字，以后可能会用到的关键字 | 以字母、$或下划线开头，由字母数字下划线$组成 |
JavaScript关键字：
| break | do | instanceof | typeof | case | else | new | var | catch |
|---|---|---|---|---|---|---|---|---|
| finally | return | void | continue | for | switch | while | debugger* | function |
| this | with | default | if | throw | delete | in | try | let* |
| yield* |
JavaScript保留字：
| tract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
8.变量
1.定义：变化的量，本质是程序在内存中的一个存储单元。作用是为数据提供存储的容器。
2.命名规则：标识符的命名规则，下划线、组成。不能是关键字或者保留字。区分大小写。
3.命名做到见名知意、使用驼峰命名法 var teacherAge;
4.变量的声明：var a;
5.赋值：``a=20;`
6.声明并赋值：var teacherAge=18,number=20;
9.常量
- 定义：一直不变化的量，ES5中没有常量的概念。EC6里面有。
- 定义方法：
var PASSWARD=123456;
10.作用域和生存期
1.作用域：变量产生作用的范围
2.生存期：变量在计算中存在的有效时间
（二）数据类型和运算符
1、数据类型
定义：描述我们变量的值的类型
-
分类：
基本数据类型：字符串string、数字number、布尔类型boolean、null、undefined
引用数据类型：对象object
2、基本数据类型
| 类型 | 形式 | 举例 |
|---|---|---|
| 字符串string | 单引号或者双引号引起来 | var a='100; var name="ruyue"; |
| 数字number | 正数、负数、0、非数字的数字 | var a=100; var b=NaN;非数字的数字 |
| 布尔类型boolean | true false | vara=true;var b=false; |
| null类型 | 空，没有，不占据内存空间 | var n=null; |
| undefined类型 | 未定义，只是没有赋值，占据内存空间 | var aa; |
3.控制台输出console
console.log(a,b...);//控制台输出，如果在网页中调试，换行使用ctrl+enter
4.检测数据类型typeof
作用：得到当前变量的数据类型
-
var res=typeof(a); console.log(res);数据类型 返回值 字符串 string 数字 number 布尔 boolean undefined undefined null object
5.数据类型转化
1.定义：将变量数据类型进行改变
2.分类：强制数据类型转化和隐式数据类型转化
3.强制数据类型转换
| trans | function | description |
|---|---|---|
| boolean/number----->string | 变量.toString(); |
原来形式+'' |
| string---->boolean | Boolean(变量); |
空：false 非空：true |
| number----->boolean | Boolean(变量)； |
0/NaN：false 其他：true |
| Boolean----->number | Number(变量)；parseInt(变量)；parseFloat(变量)； |
|
| string------>number | Number(变量)；parseInt(变量)；parseFloat(变量)； |
|
| undefined>string/number/boolean | string:报错，不能转换 ; boolean:false; number:NAN | |
| null--->string/number/boolean | string:报错，不能转换； boolean:false；number：0 NAN NAN |
字符串转数字的方法比较：
| type | Number() | parseInt() | parseFloat() |
|---|---|---|---|
| var a='0'; | 0 | 0 | 0 |
| var b='abc'; | NaN | NaN | NaN |
| var c=''; | 0 | NaN | NaN |
| var d='NaN'; | NaN | NaN | NaN |
| var e='10.356'; | 10.356 | 10 | 10.356 |
| var f='10.34act'; | NaN | 10 | 10.34 |
| var g='ab123'; | NaN | NaN | NaN |
boolean转数字的方法比较：
| type | Number() | parseInt() | parseFloat() |
|---|---|---|---|
| var aa=true; | 1 | NaN | NaN |
| var bb=false; | 0 | NaN | NaN |
4.隐式数据类型转化
定义：在我们进行数据和数据的运算的时候，我们的数据类型会发生变化
规则：
字符串和任何类型做加法，都是字符串的拼接。
var a="str" var b=30; console.log(a+b); "str30"除了加法以外的运算符（- * /），会将非数字类型的数据，自动转换为数字类型（number），进行运算。
NAN和任何数据类型做任何运算都是NAN
6.运算符
1.算数运算符： + - * / %
- ++: +1 前++：先自加再运算 后++：先运算再自加
- --: -1 前--：先自减再运算 后--：先运算再自减
2.比较运算符： 结果为布尔值 > < >= <= == != === !==
- ===:值相同且数据类型相同
- ！==：值
3.赋值运算符 = += -= *= /= %/
4.逻辑运算符：&& || ！ ==遵循短路原则==
|| 的运用，设定初始值
var aa=100;
var nums=aa || 20;//如果aa值为null,则nums=20；如果aa值不为空，则nums=aa
5.三元运算符 条件 ？ 值1 ： 值2
6.优先级问题
| 运算符 | 描述 |
|---|---|
| . [] () | 字段访问、数组下标、函数调用以及表达式分组 |
| ++ -- - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
| * / % | 乘法、除法、取模 |
| + - + | 加法、减法、字符串连接 |
| << >> >>> | 移位 |
| < <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== |
等于、不等于、严格相等、非严格相等 |
| & | 按位与 |
| ^ | 按位异或 |
| | | 按位或 |
| && | 逻辑与 |
| || | 逻辑或 |
| ?: | 条件 |
| = oP= | 赋值、运算赋值 |
| , | 多重求值 |
（三）分支和循环结构
1.分支结构
if语句
if(条件) {
语句；
}
if(条件) {
语句1；
}else {
语句2；
}
if(条件1) {
语句1；
}else if(条件2) {
语句2；
}else {
语句3；
}
switch语句
switch(值) {
case 值1：
语句1；
break;
case 值2：
语句2；
break;
case 值3：
语句3；
break;
default:
默认执行；
}
2.循环结构
for语句
for(初始变量；条件；变量变化) {
循环代码块；
}
for in语句：往往用来循环对象，不能循环数字
for (var a in data
代码块；
}
while语句
while(条件) {
语句；
变量的变化；
}
do-while语句 do-while语句至少执行一次
do {
语句；
变量的变化；
} while(条件)
3.continue：结束此次循环，继续进行下一次循环
4.break：结束整个循环
（四）函数和对象基础知识
1.函数的概念
函数是执行某种特定功能的代码块。
2.函数的分类
-
系统函数（内置函数）：JavaScript语言内部已经定义好的函数。
function features console.log() 控制台输出 alert(); 弹框显示，阻碍程序执行 prompt() 弹框输入框，阻碍程序执行 confirm() 确认框，阻碍程序执行 document.write() 页面上输出 自定义函数：开发者自己定义的函数
3.定义函数的方法
1.声明方式定义函数：可定义命名的函数变量，而无需给变量赋值，这是一种独立的结构，不能嵌套在非功能模块中。函数名在自身作用域和父作用域内是可获取的（其他域是取不到的）。当解析器读取js代码时，会先读取函数的声明，此种方式定义的函数在执行任何代码之前都可以访问。声明方式定义的函数，js也会像变量声明提前一样，放到作用域的最前面。
function 函数名(形参){
代码块；
}
2.字面量方式定义函数：将函数定义为表达式语句的一部分。函数可以是命名的也可以是匿名的。而且必须等到解析器执行到它所在的代码行才能真正被解释执行。
var 函数名 = function() {
代码块；
}
var fun = function funName(arg1,arg2){}
(function 函数名(){代码})();
3.new关键字定义函数：参数必须加引号，代码都写在（）中，一般开发中较少使用。
var 函数名 = new Function(代码)；
4.函数的参数
形参：定义函数时用于某种用途的参数 function 函数名（形参）{}
实参：实际调用的时候。传入的参数
函数名(实参)；
形参和实参必须一一对应：如果没有一一对应，那么形参使用的时候就是undefined
函数的参数个数不确定，也就是实参个数不能确定，从而没有办法在定义函数的时候设计好形参的个数
参数对象：arguments:函数内部关键字。表示函数调用的时候传入实参对象，这个实参包含了函数调用时实际传入的所有参数
5.函数的返回值
return 返回值：
- 当一个函数没有返回值时，去接收得到的是undefined
- return跳出当前函数，下面的代码将不会执行
6.变量作用域
1.作用域
- 定义：变量产生作用的范围
- 分类：全局作用域和局部作用域
一个变量是全局还是局部的，观察它定义的位置
局部可以访问全局变量，全局不可以访问局部变量
2.声明提前（预编译）
JavaScript在执行之前，会将所有的变量的声明放到所在==作用域==的最前面
3.作用域链
JavaScript在执行的时候，如果变量在所在作用域中声明，则用此变量，否则，向外一层作用域寻找。
7.递归函数
定义：函数体调用本函数
注意：能够在某种条件下调出函数
用处：求阶乘
function sum(num){
if(num <= 1){
return 1;
}else{
return num + sum(num - 1);
}
}
8.匿名函数
定义：没有名字的函数
function（形参）{代码块}
字面量方式定义的函数，我们调用函数必须在代码块之后，之前调用会报错。
匿名函数因为没有名字，所以定义的时候就需要立即去执行
==出现的原因：==命名冲突的问题
写法1：(推荐)
定义!function(){} 调用!function(){}()
定义+function(){} 调用+function(){}()
定义-function(){} 调用-function(){}()
定义~function(){} 调用~function(){}()
写法2：
定义：;(function(){}())
写法3：
定义：;(function(){})()