本文最后更新于109 天前，其中的信息可能已经过时，如有错误请发送邮件到619701626@qq.com

简介

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript能做的

1.常见的网页效果[表单验证，轮播图。。。
2.与H5配合实现游戏[水果忍者]
3.实现应用级别的程序[http://naotu.baidu.com]
4.实现图表统计效果[https://echarts.apache.org/examples/zh/]
5.js可以实现人工智能[面部识别]
6.后端开发，app开发，桌面端开发……

书写位置

和css一样，我们的js也可以有多种方式书写在页面上让其生效
js也有多种方式书写，分为行内式，内嵌式，外链式（与css相同）
外部脚本不能包含<script>标签。

行内式（不推荐）

<body>
    <button onclick="alert('hello')">点我</button>
    <a href="JavaScript:alert('hello')">点我</a>
</body>

内嵌式（`<body>`或`<head>`中）

	<script>
        document.write("123456")
	</script>

外链式（推荐）

<script src="./xxxxxx.js"></script>

在引入外链式后，<script src="./xxxxxx.js"></script>中写的代码失效一个页面可以引入多个JavaScript文件

用法

在 HTML 页面中插入 JavaScript，使用 <script> 标签。
放在在<head> 或者<body>中
尽量把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

输出

JavaScript 没有任何打印或者输出的函数。
而是以不同方式“显示”数据：

使用window.alert()写入警告框
使用document.write()写入 HTML 输出
使用innerHTML写入 HTML 元素
使用console.log()写入浏览器控制台

使用`window.alert()`写入警告框

	<script>
        window.alert("我的第一个JavaScript")
	</script>

使用`document.write()`写入 HTML 输出

<script>
       document.write("Hello World")
</script>

使用`console.log()`写入浏览器控制台

F12>Console 中显示

    <script>
        a = 1;
        b = 2;
        c = a + b;
        console.log(c);
    </script>

prompt输入框

    <script>
        let uname = prompt("请输入你的名字");
        document.write(uname)
    </script>

注释与规范

注释

快捷键：Ctrl+/
// console.log(c);

快捷键：Shift+Alt+A
/* 
a = 1;
b = 2;
c = a + b;
console.log(c); 
*/

规范

每句后面分号可有可无，写在同一行必须加分号，不然报错

a = 1;
b = 2;
c = a + b;
console.log(c);

变量（重点）

变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
语法: var/let 变量名 =值
let不允许多次声明，var是全局声明

定义变量及赋值

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;

// 定义三个变量的同时给其赋值
var x = 1, y = 2, z = 3

注意:
1.一个变量名只能存储一个值
2.当再次给一个变量赋值的时候，前面一次的值就没有了
3.变量名称区分大小写 (JS严格区分大小写)

变量的命名规则和命名规范

规则：必须遵守的，不遵守就是错

1.一个变量名称可以由数字、字母、英文下划线 (_)、美元符号($)
2.严格区分大小写
3.不能由数字开头
4.不能是保留字或者关键字
5.不要出现空格

规范：建议遵守的 (开发者默认)，不遵守不会报错

1.变量名尽量有意义 (语义化)
2.遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
3.不要使用中文

变量扩展-数组

数组（Array）：一组数据存储在单个变量名下

//定义
let 数组名 = [数据1，数据2，···，数据n]；
let name = ['小明','小红','小李']；
// arr[索引号]; 从零开始
let arr = ['张三','李四','王五'];
document.write(arr[0]);   //输出张三

let arr = ['周一','周二','周三','周四','周五','周六','周日']; //元素
console.log(arr[6]);  //下标
console.log(arr.length);  //数组长度

常量

使用const声明的变量
命名规范与变量一致
常量不允许重新赋值，声明的时候必须赋值（初始化）
不需要重复赋值的数据使用const

const a = 10;
console.log(a);

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
（其中未定义（Undefined）就是声明了但是未赋值）不知道未来用作存什么值
空（Null）知道未来存什么类型的值

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

完成进制转换：

var x = 0x99     //153   16*9+9
var x = 0xff     //255   16*15+15
var y = 0b11     //3     1*2+1

算术运算符

+  //求和
-  //求差
*  //求积
/  //求商
%  //取余

运算符优先级

//先乘除后加减，有括号先算括号里面的
console.log(1 + 2 * 3)
console.log(10 - 8 / 2)
console.log(2 % 5 + 4 * 2)

判断数据类型

var x1
console.log(typeof x1)     //undefined

var x2 = null
console.log(typeof x2)     //object

var x3 = 123
console.log(typeof x3)     //number

var x4 = "你好"
console.log(typeof x4)     //string

数据类型转换

转数值

两种方法，Number()比较严格，parseInt()比较松散

Number(变量)

如果string类型中有非数值，在转换后会显示NaN，意为”Not a Number”
转Ture和False则会变成1和0
转Null会变成0
转Undefined会变成NaN

var a = "100"
var b = Number(a)
console.log(a,b)                  //100 100
console.log(typeof a,typeof b)    //string number

parseInt(变量)

意思为”解析为整型”

var a = "100a"        //如果是小数，点后面的会舍掉
var b = parseInt(a)
console.log(a,b)      //100a 100

parseFloat(变量)

意思为”解析为浮点型”

var a = "100.12a"
var b = parseFloat(a)
console.log(a,b)      //100.12a 100.12

非加号

var a = "100"
var b = a - 0       //有三种：-0  /1  *1
console.log(b)      //100

转字符串

模板字符串：

//使用反引号``,类似python中的f""
let age = 18;
document.write(`我今年${age}岁了`);
document.write('我今年${age}岁了');

String(变量)

所有类型都能转换

var a = 100
var b = String(a)
console.log(b,typeof b)    //100 string

.toString()

Null和Undefined不能转换

var a = 100
var b = a.toString()
console.log(b,typeof b)    //100 string

加号

字符串拼接: 只要+任意一边是字符串，就会进行字符串拼接
加法运算:只有两边都是数字的时候，才会进行数学运算

var a = 100
var b = a + ""
console.log(b, typeof b)      //100 string
console.log(a, b)             //100 '100'

转布尔

Boolean(变量)

在JavaScript中，只有""、0、Null、undefined、NaN，这些是False
其余都是True

var a = 100
var b = Boolean(a)
console.log(b, typeof b)     //true 'boolean'
console.log(a, b)            //100 true
var a1 
var  b1=Boolean(a1)
console.log(b1, typeof b1)   //false 'boolean'
console.log(a1, b1)          //undefined false

隐式转换

隐式转换：系统内部自动将数据类型进行转换

//+号两边只要有一个是字符串，都i会把另外一个给转成字符串
console.log('Hello' + 1)
结果：Hello1
//除了+以外的算数运算符，比如- * / 等都会把数据转成数字类型
console.log('Hello' - 1)   //结果：NaN
console.log('1' - 1)   //结果：0,进行了隐式转换
console.log(+ '123')   //结果：123，转换为了数字型

显式转换

显式转换：自己写代码告诉系统该转成什么类型

let str = '123'
console.log(Number(str))
//123
let num = +prompt('请输入一个数字')
console.log(num)
//123

console.log(parseInt('12px'))   //12
console.log(parseInt('12.34px'))   //12
console.log(parseInt('12.94px'))   //12
console.log(parseFloat('12px'))   //12
console.log(parseFloat('12.34px'))   //12.34
console.log(parseFloat('12.94px'))   //12.94

运算符

赋值运算符

对变量进行赋值的运算符

//=  将等号右边的值赋予给左边，要求左边必须是一个容器
a = 1

//+=
let num = 1
num = num + 1
num1 += 1   //赋值运算符
console.log(num)     //结果：2

一元运算符

能够使一元运算符做自增运算
使用场景：计数，进行10次操作，计算进行了多少次

//二元运算符
let num = 10 + 20

//一元运算符 自增 ++
"""
自增相当于num = num + 1
1.前置自增
let num = 1
++num
document.write(num)
2.后置自增
let num = 1
num++
document.write(num)
"""
前置自增和后置自增如果参与运算就有区别

let i = 1
console.log(++i + 2)  //结果：4
let i = 1
console.log(i++ + 2)  //结果：3

比较运算符

比较两个数据的大小、是否相等

> //大于
<  //小于
>=   //大于等于
<=   //小于等于
==   //值相等
===   //类型和值相等
!==   //不全等
-------------------------------------------
其中有隐式转换
2 == '2'   //True
-------------------------------------------
2 === '2'   //False
Nan === Nan  //False
-------------------------------------------
字符串比较ascii码，从左往右依次比较
涉及'Nan'都是False
不要比较小数，有精度问题

逻辑运算符

符号	名称	含义	特点	口诀
&&	逻辑与	并且	符号两边都为True 结果才为True	一假则假
\|\|	逻辑或	或者	符号两边有一个为True 就为True	一真则真
!	逻辑非	取反	True变False False变True	真变假，假变真

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ — !
3	算数运算符	先*/后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后\|\|
7	赋值运算符	=
8	逗号运算符	,

语句

程序三大流程控制语句：顺序结构，分支结构，循环结构
顺序结构：按照上往下的顺序运行
分支结构：根据条件选择执行代码
循环结构：一段代码重复执行

表达式和语句

区别：表达式可以被求值，语句不一定有值

//表达式
num = 1 + 2
//语句
docment.write() & console.log()  & alert() & break

分支语句

有选择地执行代码

if分支语句

三种使用：单分支、双分支、多分支

//单分支
if (条件) {
    满足条件要执行的代码
}
注意：
1.括号内的条件为true时，进入大括号里执行代码
2.小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
3.如果大括号只有一个语句，大括号可以省略（不建议）

//双分支
if (条件) {
    满足条件要执行的代码
}else {
    不满足条件要执行的代码
}

//多分支，多选一        使用场景：学生评分 优、良、合、不合
if (条件1) {           先判断条件1，若满足条件1就执行代码1，其他不执行
    代码1
} else if (代码2) {    若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
    代码2
} else if (代码3) {    若依然不满足继续往下判断，依次类推
    代码3
} else {               若以上条件都不满足，执行else里的代码n
    代码n
}

案例：
        // 1.输入成绩
        let score = +prompt('请输入成绩')
        // 2.判断
        if (score >= 90) {
            alert('优秀')
        } else if (score >= 70) {
            alert('良好')
        } else if (score >= 60) {
            alert('合格')
        } else {
            alert('不合格')
        }

三元运算符

一般用来取值，场景适用于简单的if else

语法：条件 ? 满足条件执行的代码 :  不满足条件执行的代码
console.log(5 > 13 ? '真' : '假')

switch语句

1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case一般需要配合break关键字使用 没有break会造成case穿透

语法：
switch (数据){   //找到跟小括号里数据全等的case值，并执行里面对应的代码
    case 值1:
        代码1
        break
    case 值2:   //例:数据若跟值2全等，则执行代码2
        代码2
        break
    default:    //若没有全等 ===的则执行default里的代码
        代码n
        break
}

案例：
switch (1){   
    case 1:
        console.log('选择的是1')
        break
    case 2:  
        console.log('选择的是2')
        break
    default:  
        console.log('没有符合的')
        break
}
=======================================================================
        let num1 = +prompt('输入第一个数')
        let num2 = +prompt('输入第二个数')
        let operator = prompt('请输入运算符')
        switch (operator) {
            case '+':
                alert(`您选择了加法，结果是${num1 + num2}`)
                break
            case '-':
                alert(`您选择了减法，结果是${num1 - num2}`)
                break
            case '*':
                alert(`您选择了乘法，结果是${num1 * num2}`)
                break
            case '/':
                alert(`您选择了除法，结果是${num1 / num2}`)
                break
            default:
                alert('请选择运算符')
        }

循环语句

断点调试：F12 -> sources(源代码)

while循环

//while循环语法：
while (循环条件){
    要重复执行的代码(循环体)
}

while循环具备三要素：
1.变量起始值
2.终止条件(没有终止条件，循环会一直执行，造成死循环)
3.变量变化量(用自增或者自减)

let i=1         //变量起始值
while(i<=3){    //终止条件
    document.write('循环3次<br>')
    i++         //变量变化量
}

// 死循环
while(true){}

简介

JavaScript能做的

书写位置

行内式（不推荐）

内嵌式（<body>或<head>中）

外链式（推荐）

用法

输出

使用window.alert()写入警告框

使用document.write()写入 HTML 输出

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

prompt输入框

注释与规范

注释

规范

变量（重点）

定义变量及赋值

变量的命名规则和命名规范

变量扩展-数组

常量

数据类型

算术运算符

运算符优先级

判断数据类型

数据类型转换

转数值

Number(变量)

parseInt(变量)

parseFloat(变量)

非加号

转字符串

String(变量)

.toString()

加号

转布尔

Boolean(变量)

隐式转换

显式转换

运算符

赋值运算符

一元运算符

比较运算符

逻辑运算符

运算符优先级

语句

表达式和语句

分支语句

if分支语句

三元运算符

switch语句

循环语句

while循环

for循环

推荐文章

内嵌式（`<body>`或`<head>`中）

使用`window.alert()`写入警告框

使用`document.write()`写入 HTML 输出

使用`console.log()`写入浏览器控制台