1、书写位置
行内式(内嵌式)：写在元素内部，一般不常用。
a：<a href="javascript: alert('11');">超链接</a>
非a：<button onclick="alert('11')"></button>
内部式：可以存在多个，且可以和内嵌式同时存在。
外链式：外链式的script标签中是不可以书写js代码的，写了也会被忽略掉，最常用。
2、注释
单行注释：ctrl + /
多行注释：alt + shift + a
3、量
用来存储和表示数据的容器。
4、***变量
用来存储和表示数据的容器，且运行中，变量的值可能会发生变化，必须要定义才能输出。
5、常量
用来存储和表示数据的容器，且运行中，常量的值不会发生变化，不需要定义即可输出。
6、如何定义变量
语法一：(声明并赋值)
var 变量名 = 值(数字，字符串(''/""引起来)，true，false)
语法二：(先声明再赋值)
var 变量名;
变量名 = 值
语法三：(先声明多个再赋值)
var 变量名1,变量名2,变量名3;
变量名1 = 值1;
变量名2 = 值2;
变量名3 = 值3
报错：Uncaught ReferenceError: a is not defined(变量未定义)
7、变量重新赋值
var a = 20; 创建一个a的变量，并赋值为20
a = 10; 给a重新赋值
此时a便是10,20则会被覆盖
8、输出方式
alert(输出内容）//弹出框弹出
console.log(输出内容) //控制台打印
document.write(输出内容) //页面输出，可以识别标签
9、变量的命名
变量的命名规则(必须要遵守，不遵守会报错)：
1.变量名组成是由 数字、字母、下划线(_)，美元符号($)组成
2.不能以数字开头
3.不能是关键字或保留字(被js赋予特定含义的单词):
关键字：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
保留字：abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、Native、synchronized、class、float、package、throws、const、goto、private、transient、 debugger、implements、protected、volatile、double、import、public
4.严格区分大小写，var和Var不是一个意思
5.汉子也可以作为变量名出现，但是极度不推荐
变量的命名规范(建议遵守)：
1.见名知意
2.小驼峰命名法(第一个单词小写，第二个单词开始，首字母大写) applePrice
10、***js的数据类型
10.1基本数据类型：
1.数字类型 number
整数、小数、科学计数法、NaN(尝试将其他类型转换为数字类型，转换失败的产物)
八进制：0开头
十六进制：0x开头 0-9和a-f
二进制：0b开头
2.字符串类型 string
英文""双引号或''单引号包裹的都是字符串
\ 转义字符
\n 代表换行 \t 代表tab键 \\ 代表的是 \ \' 代表的是'
拼接：任何类型与字符串拼接(+)，结果都为字符串
3.布尔类型 boolean
true：真 参与数学运算时为1
false：假 参与数学运算时为0
4.未定义类型：undefined
定义了一个变量，但没有给变量赋值，则该变量值为undefined
5.空类型：null
当一个变量将来要被赋值为复杂数据类型时，可以使用null来定义
10.2复杂数据类型：
1.数组：数组里面可以存储很多条数据，数组的单词是array，数组的标志是[]。(详见P20)
11、检测数据类型
typeof 检测数据类型：
语法一：typeof 要检测的内容
语法二：typeof(要检测的内容)
结果：以字符串的形式显示检测的类型
12、数据类型转换
12.1、数字类型转换
1.为什么要类型转换？
输入框输入的值都是字符串，如果需要运算，则需要把输入的字符串转换为数字，再进行运算。
2.转数字类型的三种语法(js内置提供的三种方法)：
2.1 语法：Number(变量)
结果：以数字类型呈现
转换的规则：1.纯数字的字符串转为数字
2.true转为1，false转为0
3.其他类型转为NaN
2.2 语法：parseInt(变量)
结果：以数字类型呈现
转换的规则：1.纯数字的字符串转为数字
2.以数字开头的字符串，可以转为数字
3.true和false转为NaN
4.其他类型转为NaN
5.转整数，有小数直接省掉
2.3 语法：parseFloat(变量)
结果：以数字类型呈现
转换的规则：1.纯数字的字符串转为数字
2.以数字开头的字符串，可以转为数字
3.true和false转为NaN
4.其他类型转为NaN
5.转小数，有小数点就可以转换
12.2、字符串类型转换
1.1 语法:String(变量名)
可以任意类型转换为字符串
1.2 语法:变量名.toString()
除了undefined、null，可以将任意类型转换为字符串
12.3、布尔类型转换
1.1 语法：Boolean(变量名)
只有''、0、NaN、null、undefined、false被转换为false，其余都是true
13、运算符
1.算术运算符：+ - * / %(取余)
+ 拼接：字符串+数字 / 字符串+字符串
2.关系运算符：> < >= <= == === !=
比较的结果为布尔类型
== 与 ===类型 ==只比较值，而===不但比较值，还比较类型
3.赋值运算符：= += -= *= /= %=
赋值运算符可以让变量的值，发生改变
4.逻辑运算符：|| && !
表达式：能够计算出一个结果的式子：例1+2、2>3
条件表达式：能够计算出真或假的表达式 4>2
|| 一真及真，都为假为假，短路，前面为假则不看后面
&& 一假及假，都为真为真，短路，前面为真则不看后面
！ 真为假，假为真
5.自加自减运算符：++ --
含义：a++ 、++a 自身加1
a-- 、--a 自身减1
相同点：都加一或减一
不同点：在参与输出，运算，赋值等操作时，a++先执行这些操作，再加1
++a先加1，再执行这些操作
14、隐式转换
+：数字+字符串 会将数字转换为字符串
- * / % > < == 数字 - 字符串 隐式会将字符串转换为数字
15、判断是否为数字isNaN()
isNaN(内容)：等价于isNaN(Number(内容))
检测内容是否为非数字，如何是非数字，结果则为true
如何是数字，结果则为false
16、条件分支语句
16.1 条件分支语句
if 语法：
if单分支：
语法：if(条件表达式){语句体;}
执行流程：条件表达式成立，就执行语句体，不成立就不执行
if双分支：
语法：if(条件表达式){语句体1;}else{语句体2;}
执行流程：条件表达式成立，就执行语句体1，不成立就则执行语句体2
if多分支：
语法：if(条件表达式1){语句体1;}
else if(条件表达式2){语 句体2;}
else{语句体3}
执行流程：条件表达式1成立，就执行语句体1，条件表达式2成立，就执行语句体2，都不成立就则执行语句体3
分支语句的嵌套：
语法：if(条件表达式){
if(条件表达式){
语句体;
}
}
if (表达式)------>等价于if(boolean(表达式)){}
if (表达式) alert("")只有一行时，可以省略{}，但不推荐
switch 语法：
switch (key) {
case value:
语句体；
break;
case value:
语句体；
break;
default:
语句体；
break;
}
执行流程，拿着switch里的key和case后的value进行精准匹配(全等匹配)，成功就执行，都不匹配则执行default。
注意事项：依次向下执行，不写break会穿透，遇到break中止，key一般为变量，value为常量。
16.2 循环结构：重复做一件事
while 语法：
初始化变量;
while(表达式){
循环体;
变量的更新
}
先判断表达式，为true再执行，false则直接结束
do while 语法：
初始化变量;
do{
循环体;
变量的更新
}while(表达式)
先执行一次循环体，再判断表达式，为true再执行，false则直接结束
for 语法：
for(表达式1；表达式2；表达式3){
循环体;
}
循环嵌套：
1.外层循环控制行数
2.内层循环控制每行执行的个数
3.外层循环每走1次，内层循环执行一轮
break ：用于 switch 、循环
用在循环里：终止本层循环,并结束循环
continue ：
用在循环里：跳过本次循环，继续执行下一次循环
17、函数
17.1 概念：
函数就是把完成特定功能的一段代码抽取出来，使之成为程序中的一个独立实体，起个名字（函数名）。
可以在同一个程序或其他程序中多次重复使用（通过函数名调用）
17.2 语法：
定义函数的语法：
function 函数名([形参1，形参2...]){
函数体
}
var 函数名 = function() {
函数体
}
调用函数的语法：
函数名(实参1，实参2);
调用时：1、实参-传递给形参2、代码从上到下
注意点：
1. 函数不调用，则不执行
2. 函数名遵循变量的命名规则和规范
3. 定义函数的参数叫形参。
return 返回值：
1.可以带出一个函数的运算结果
2.终止函数的作用
3.任何函数都是有return，如果不写，系统会自带一个return undefined
arguments ：任何函数都有的一个方法，接收所有的实参
17.3 预解析
1、浏览器在解析代码时，会将 var 和 function ，提升到作用域最顶端。
2、然后从上往下依次执行
3、函数提升和变量提升同时存在时，函数提升优先于变量提升
17.4 作用域
1、概念：一段代码生效的范围，分为全局作用域和局部作用域。
全局变量和局部变量的区别：
全局变量：
定义位置：script内部，函数外部。
访问的位置：都可以访问
生命周期：打开页面产生，页面关闭销毁
局部变量：
定义位置：函数的内部
访问的位置：只能在定义的函数内部访问
生命周期：函数调用时产生，调用完毕立马销毁
2、访问规则：
先在自己作用域查找，有就拿来用，没有则向上一级查找，依次类推，如果全局作用域也没有，则报错。
3、赋值规则：
先在自己作用域内部查找，有就直接赋值
没有就去上一级作用域内部查找，有就直接赋值，依次类推
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值
4、作用域链：
各个作用域互相嵌套，链接成的域，叫做作用域链
18、对象
1、对象：编程界万事万物皆对象。
抽取出的两个概念：特征(属性)、行为(方法)
2、声明方式：
var 对象名 = {
属性名 : 属性值
方法名 : function(){
方法体
}
};
3、访问对象的属性或方法：
对象名.属性名
对象名.方法名()
4、JSON对象：只有属性，没有方法。键和值都是双引号包裹(数字可以不使用""包裹)
使用for...in...来遍历
5、对象的增删改查：
写法1： .语法
增：对象名.属性名 = 属性值
删：delete 对象名.属性名
改：对象名.属性名 = 属性值
查：打印
写法2： []语法
增：对象名[属性名] = 属性值
删：delete 对象名[属性名]
改：对象名[属性名] = 属性值
查：打印
19、简易计算器小demo
1、获取标签：var name = document.getElementById("id名")
2、获取输入框值：name.value
3、给输入框赋值：name.value = 值
4、点击事件： 标签.onclick = function(){}
练习：
20、数组
20.1 数组的创建
方式一：字面量方式
语法： var 变量名 = [数据1，数据2，数据3]
方式二：内置构造函数方式：
语法： var 变量名 = new Array(数据1，数据2，数据3)
方式二创建数组时，如果只输入一个数字，则创建的是一个长度为该数字的数组，如var x = new Array(10),则表示创建了一个长度为10的数组，此时没有给数组赋值，会用empty占位
一个数组中可以存储不同类型的数据，但建议只存储同一种类型数据
20.2 数组的长度
1.获取：
语法： 数组名.length
2.设置
语法： 数组名.length = 数字
将数组长度设置的比初始长度小，会从后往前删除到符合长度为止。
将数组长度设置的比初始长度大，会用empty占位到符合长度为止。
将数组长度设置的和初始长度一样，数组无变化。
20.3 数组的索引
1.数组的索引
数组中数据的编号，叫做索引，或者叫下标
数组中索引是从左到右，从0开始依次加1
数组的规律：数组最小索引为0，最大索引为length - 1
2.通过索引获取数组中的数据
语法： 数组名[索引]
如果索引存在，则可以得到对应数据
如果不存在，则结果为undefined
3.通过索引设置数据
语法：数组名[索引] = 值
如果索引存在，则修改对应的数据
如果不存在，索引大于数组长度，则使用empty占位将，数组长度追加到该索引值，并将该索引值修改为对应数据
20.4 数组的遍历
1. 遍历：从头到尾挨个访问一遍
遍历数组：从头到尾挨个访问一遍该数组中的数据
2. 使用for循环遍历数组：
for (var i = 0; i < 数组名.length; i++) {
数组名[i]
}
20.5 数组的常用方法
20.5.1 直接修改原始数组
1. push()：//向数组的末尾追加一条数据
语法：数组名.push(数据)
返回值：追加数据后数组的长度
2. pop()：//从数组的末尾删除一条数据
语法：数组名.push()
返回值：被删除的数据
3. unshift()：//从数组开头添加一条数据
语法：数组名.unshift(数据)
返回值：添加数据后数组的长度
4. shift()：//从数组开头删除一条数据
语法：数组名.shift()
返回值：被删除的数据
5. reverse()：//反转数组
语法：数组名.reverse()
返回值：反转后的数组
6. sort()：//对数组中数据进行排序
语法1：数组名.sort()
默认排序规则为：一位一位进行比较
//形参a和b可以随意起名字
语法2：数组名.sort(function(a,b){
return a-b;//从小到大排序
return b-a;//从大到小排序
})
返回值：排序后的数组
7. splice()//从指定位置添加或删除数据
语法1：数组名.splice(开始索引，删除个数)
语法2：数组名.splice(开始索引，删除个数，要插入的数据1、数据2...)
返回值：被删除的数据
20.5.2 不改变原始数组
8. concat()//进行数组的拼接，会把括号内数据和数组拼接为一个数组
语法：数组名.concat(数据1，数据2...)
返回值：拼接后的数组
9. join()//利用连接符将数组中数据连接成一个字符串
语法：数组名.join("连接符")
连接符不写，默认连接符为逗号(",")
返回值：连接符连接后的字符串
10. slice()//截取指定索引的数组(包前不包后)
语法：数组名.slice(开始索引，结束索引)
返回值：截取到的新数组
注意:只写开始索引，则截取到最后
开始和结束都不写，则从头到位把数组复制一遍
写负索引的话则索引从右往左，从-1、-2依次递减
11. indexOf()//从左到右查找该数据
语法1：数组名.indexOf(数据)//从左到右查找该数据，第一次出现的索引
语法2：数组名.indexOf(数据,开始索引)//从开始索引位置向右查找该数据，第一次出现的索引(包含开始索引)
返回值：查找到则返回索引，未找到则返回-1
12. lastIndexOf()//从右到左查找该数据
与indexOf()相同，查找方向相反
20.5.3 总结
| 修改原始数组 | 不修改原始数组 |
|---|---|
| push() | concat(数据1，数据2) |
| pop() | join("连接符") |
| unshift() | slice(开始索引，结束索引) |
| shift() | indexOf(数据，开始索引) |
| reverse() | lastIndexOf(数据，开始索引) |
| sort() | |
| splice(开始索引，删除个数，插入数据) |
20.6 冒泡排序
1.核心思想：拿数组中相邻的两个数字作比较，如果要进行从大到小排序，把大的向后放置接口。
2.代码实现
var arr = [10, 12, 31, 4, 5, 16]
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
var temp = arr[j];
if (arr[j] > arr[j + 1]) {
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
20.7 选择排序
1.核心思想：找到该数组最小的数据，定义一个变量min记录最小数据的索引，将最小数据和索引为0的数据进行位置交换，这样索引为0的便是最小的数据。依次类推，下次找到最小索引数据和1交换位置...
2.代码实现
arr = [77, 8, 452, 53, 76, 98, 95, 76, 9]
for (var j = 0; j < arr.length - 1; j++) {
var min = j
for (var i = j + 1; i < arr.length; i++) {
if (arr[min] > arr[i]) {
min = i
}
}
var temp = arr[j]
arr[j] = arr[min]
arr[min] = temp
}
20.8 数组常用方法(2)
| 不改变原始数组 | |
|---|---|
| forEach() 遍历 | findIndex() |
| map() | every() |
| filter() | some() |
| find() | reduce() |