JavaScript 是什么
JavaScript是什么？
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
作用（做什么？）
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据, 渲染到前端
- 服务端编程 (node.js)
JavaScript的组成（有什么？）
- ECMAScript:
- 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等
- Web APIs :
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JavaScript 书写位置
内部 JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
拓展： alert(‘你好，js’) 页面弹出警告对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 内部js -->
<script>
// 页面弹出警示框
alert('你好，js~')
</script>
</body>
</html>外部 JavaScript
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/my.js">
// 中间不要写内容
</script>
</body>
</html>注意事项：
1. script标签中间无需写代码，否则会被忽略！
2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
内联 JavaScript
代码写在标签内部
语法：
注意： 此处作为了解即可，但是后面vue框架会用这种模式
JavaScript 注释
- 单行注释
- 符号：//
- 作用：//右边这一行的代码会被忽略
- 快捷键：ctrl + /
- 块注释
- 符号：/* */
- 作用：在/* 和 */ 之间的所有内容都会被忽略
- 快捷键：shift + alt + A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
// 单行注释
// let bts = document.querySelectorAll('button')
// 块注释
/*for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.pink').className = ''
this.className = 'pink'
})
}*/
</script>
</body>
</html>JavaScript 结束符
- 结束符
- 作用： 使用英文的 ; 代表语句结束
- 实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
- 现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
- 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）
<script>
alert(1);
alert(2);
</script>
<script>
alert(1)
alert(2)
</script>JavaScript 输入输出语法
什么是语法：
- 人和计算机打交道的规则约定
- 我们要按照这个规则去写
- 比如： 你吃了吗？
- 我们程序员需要操控计算机，需要计算机能看懂
输出语法：
<script>
// 语法1
document.write('要输出的内容')
// 作用：向body内输出内容
// 注意：如果输出的内容写的是标签，也会被解析成网页元素
// 语法2
alert('要输出的内容')
// 作用：页面弹出警告对话框
// 语法3：
console.log('控制台打印')
// 作用：控制台输出语法，程序员调试使用
</script>输入语法：
<script>
// 语法：
prompt('请输入您的名字')
// 作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
</script>JavaScript 代码执行顺序
- 按HTML文档流顺序执行JavaScript代码
- alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）
字面量
在计算机科学中，字面量（literal）是在计算机中描述 事/物
变量
变量是什么？
- 白话：变量就是一个装东西的盒子
- 通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆
- 注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子
变量的基本使用
声明变量：
要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）
<script>
// 语法
let 变量名
</script>- 声明变量有两部分构成：声明关键字、变量名（标识）
- let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
<script>
// 举例
let age
</script>- 我们声明了一个age变量
- age 即变量的名称，也叫标识符
变量赋值
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值
注意：是通过变量名来获得变量里面的数据
<script>
// 举例
let age
age = 18
</script>简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量初始化。
<script>
// 举例
let age = 18
</script>更新变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它
注意： let 不允许多次声明一个变量。
<script>
// 举例
let age = 18
age = 19
</script>声明多个变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
<script>
// 语法（多个变量中间用逗号隔开）
let age = 18，name = '张三'，sex = '男'
// 说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。
// 语法（一行只声明一个变量）
let age = 18
let name = '张三'
let sex = '男'
</script>变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
变量命名规则与规范
规则：必须遵守，不遵守报错 (法律层面)
规范：建议，不遵守不会报错，但不符合业内通识 （道德层面）
1. 规则：
- 不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如 Age 和 age 是不同的变量
2. 规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName
变量命名规则与规范
| 变量名 | 是否报错 | 是否符合规范 |
| 21age | 报错 | |
| _age | 不报错 | 符合规范 |
| user-name | 报错 | |
| username | 不报错 | 不符合规范 |
| userName | 不报错 | 符合规范 |
| let | 报错 | |
| na@me | 报错 | |
| $age | 不报错 | 符合规范 |
变量拓展-let和var的区别
let 和 var 区别
在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。
var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题
var 声明
- 可以先使用 在声明 (不合理)
- var 声明过的变量可以重复声明(不合理)
- 比如变量提升、全局变量、没有块级作用域等等
结论 var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let
常量
常量的基本使用
概念：使用 const 声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let
命名规范：和变量一致
常量使用
// 常量
const PI = 3.14
console.log(PI)
//常量不允许再次赋值
PI = 100
console.log(PI)注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const
数据类型
计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据，为什么要给数据分类？
- 更加充分和高效的利用内存
- 也更加方便程序员的使用数据
数据类型整体分为两大类
- 基本数据类型
- 引用数据类型
基本数据类型：number 数字型、string 字符串型、boolean 布尔型、undefined 未定义型、null 空类型
引用数据类型：object 对象
数据类型 – 数字类型（Number）
即我们数学中学习到的数字，可以是整数、小数、正数、负数
let age = 18 //整数
let price = 88.99 //小数JavaScript 中的正数、负数、小数等 统一称为 数字类型
JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型 例如 int a = 3 必须是整数
数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 – 等等，所以经常和算术运算符一起
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）
- +：求和
- -：求差
- *：求积
- /：求商
- %：取模（取余数）
- 开发中经常作为某个数字是否被整除
同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行。
- 乘、除、取余优先级相同
- 加、减优先级相同
- 乘、除、取余优先级大于加、减
- 使用 () 可以提升优先级
- 总结： 先乘除后加减，有括号先算括号里面的~~~
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
console.log('老师' - 2) //NaNNaN 是粘性的。任何对 NaN 的操作都会返回 NaN
console.log(NaN + 2) //NaN数据类型 – 字符串类型（string）
通过单引号（ ”） 、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
let uname = '张三' //使用单引号
let gender = "男" //使用双引号
let goods = `手机` //使用反引号
let tel = '15555555555' //看上去是数字，但是引号包裹了就是字符串
let str = '' //这种情况就是空字符串- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
- 必要时可以使用转义符 \，输出单引号或双引号
字符串拼接
场景： + 运算符 可以实现字符串的拼接
口诀：数字相加，字符相连
document.write('hello' + 'world')
document.write('<br>')
let age = 18
document.write('我今年'+ age + '岁了')模板字符串
- 使用场景
- 拼接字符串和变量
- 在没有它之前，要拼接变量比较麻烦
- 语法
- “ (反引号)
- 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
- 内容拼接变量时，用 ${ } 包住变量
let age = 18
document.write(`我今年${age}岁了`)数据类型 – 布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
// true fales 是布尔型字面量
let isCool = true
console.log(isCool)数据类型 – 未定义类型（undefined）
未定义是比较特殊的类型，只有一个值 undefined。
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined
let age
document.write(age)工作中的使用场景
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来
数据类型 – null（空类型）
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
let obj =null
console.log(obj)null 和 undefined 区别
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
null 开发中的使用场景：
官方解释：把 null 作为尚未创建的对象
大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
控制台输出语句和检测数据类型
控制台输出语句
let age = 18
let uname = '张三'
let flag = false
let buy
console.log(age)
console.log(uname)
console.log(flag)
console.log(buy)- 控制台语句经常用于测试结果来使用。
- 可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
通过 typeof 关键字检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
1. 作为运算符： typeof x （常用的写法）
2. 函数形式： typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法
let age = 18
let uname = '张三'
let flag = false
let buy
console.log(typeof age)
console.log(typeof uname)
console.log(typeof flag)
console.log(typeof buy)类型转换
为什么要类型转换
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则：
- + 号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符 比如 – * / 等都会把数据转成数字类型
缺点：
- 转换类型不明确，靠经验才能总结
小技巧：
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串
console.log(11 + 11)
console.log('11' + 11)
console.log(11 - 11)
console.log('11' - 11)
console.log(1 * 1)
console.log('1' * 1)
console.log(typeof '123')
console.log(typeof + '123')
console.log(+'11' + 11)显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
概念：自己写代码告诉系统该转成什么类型
转换为数字型
- Number(数据)
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
- parseInt(数据)
- 只保留整数
- parseFloat(数据)
- 可以保留小数
转换为字符型
- String(数据)
- 变量.toString(进制)
运算符
赋值运算符
- 赋值运算符：对变量进行赋值的运算符
- 已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
- 其他赋值运算符：
- +=
- -=
- *=
- /=
- %=
- 使用这些运算符可以在对变量赋值时进行快速操作
我们以 += 赋值运算符来举例
以前我们让一个变量加 1 如何做的？
let num = 1
num = num + 1
console.log(num)现在我们有一个简单的写法啦
let num = 1
num += 1
console.log(num)一元运算符（重要）
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
- 二元运算符
- 例：
let num = 10 + 20- 一元运算符
- 例： 正负号
- 自增：
- 符号：++
- 作用：让变量的值 +1
- 自减
- 符号：–
- 作用：让变量的值 -1
- 使用场景：经常用于计数来使用。 比如进行10次操作，用它来计算进行了多少次了
自增运算符的用法：
前置自增
前置自增：先自加再使用（记忆口诀：++在前 先加）
let i = 1
console.log(++i + 2) // 4 后置自增
后置自增：先使用再自加（记忆口诀：++在后 后加）
let i = 1
console.log(i++ + 2) // 3 自增运算符的用法
1. 前置自增和后置自增独立使用时二者并没有差别！
2. 一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用
比较运算符
比较运算符的介绍
使用场景：比较两个数据大小、是否相等
比较运算符：
- > ： 左边是否大于右边
- <： 左边是否小于右边
- >=： 左边是否大于或等于右边
- <=： 左边是否小于或等于右边
- ==： 左右两边值是否相等
- ===： 左右两边是否类型和值都相等
- !==： 左右两边是否不全等
- 比较结果为boolean类型，即只会得到 true 或 false
对比：
- = 单等是赋值
- == 是判断
- === 是全等
- 开发中判断是否相等，强烈推荐使用 ===
- 字符串比较，是比较的字符对应的ASCII码
- 从左往右依次比较
- 如果第一位一样再比较第二位，以此类推
- 比较的少，了解即可
- NaN不等于任何值，包括它本身
- 涉及到”NaN“ 都是false
- 尽量不要比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
- 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==
逻辑运算符
逻辑运算符的介绍
- 如果我想判断一个变量 num 是否大于5且小于10，怎么办？
- 错误写法： 5 < num < 10
- 使用场景：逻辑运算符用来解决多重条件判断
- 正确写法： num > 5 && num < 10
- 逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
| && | 逻辑与 | 并且 | 符号两边都为true 结果才为true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个 true就为true | 一真则真 |
| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
语句
表达式和语句
表达式：表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
语句：语句是一段可以执行的代码。
比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等
区别：
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
表达式 num = 3 + 4
语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出
某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句)
分支语句
程序三大流程控制语句
- 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
- 有的时候要根据条件选择执行代码，这种就叫分支结构
- 某段代码被重复执行，就叫循环结构
分支语句
- 分支语句可以让我们有选择性的执行想要的代码
- 分支语句包含
- If分支语句
- 三元运算符
- switch 语句
if语句
- if语句有三种使用：单分支、双分支、多分支
- 单分支使用语法
// 单分支语句
if(条件){
满足条件要执行的代码
}- 括号内的条件为true时，进入大括号里执行代码
- 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
- 如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做
双分支if语法
//双分支语句
if(条件) {
满足条件要执行的代码
} else {
不满足条件执行的代码
}多分支if语法
使用场景： 适合于有多个结果的时候， 比如学习成绩可以分为： 优 良 中 差
if (条件1) {
代码1
} else if (条件2) {
代码2
} else if (条件3) {
代码3
} else {
代码n
}释义
- 先判断条件1，若满足条件1就执行代码1，其他不执行
- 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
- 若依然不满足继续往下判断，依次类推
- 若以上条件都不满足，执行else里的代码n
- 注：可以写N个条件，但这里演示只写2个
评论