JS介绍
JS运行在浏览器
JS目标: 用户与网页交互
JS组成:1 ECMAScript: 语法规则 2 WebAPIs
DOM: 网页效果 BOM: 浏览器操作
JS书写规则
内部 :script标签
外部:文件是js后缀
内连:Vue使用
JS输入与输出
输入: prompt('提示信息')
输出{alert() 提示框
document.write() 输出到body}
可以输出标签
console.log() 输出到控制台
参考代码
<script>
let age = prompt('请输入您的xm')
let name = prompt('请输入您的年龄')
document.write(`大家好,我叫${age},我今年${name}岁`)
</script>
变量
作用: 存储数据( 字面量)
本质: 内存中开辟一块小内存, 存储数据
操作
1. 声明变量: let 变量名
2. 赋值: 变量名 = 值
3. 使用: 变量名(可以重复使用)
4. 修改变量: 变量 = 新值
交换两个变量的值
1. 定义两个变量: 有值
2. 定义一个新变量: 不需要值
3. 将其中一个变量: 赋值给新变量
新变量与赋值变量: 值相同
与另外一个不同
4. 将另外一个变量, 赋值给第一个变量
新变量: 保存第一个变量值
第一个和第二个: 都是第二个变量的值
5. 将新变量, 赋值给第二个变量
新变量: 第一个变量的值
第一个和第二个交换成功
变量的命名规则与规范
规则: 不遵守会报错
不能使用关键字
组成: 数字 字母 下划线 $
数字不能开头
变量严格区分大小写
规范: 从业人员的职业操守
参考代码
<script>
let name
let age
let time
name = 'zyc'
age = 1
time = '11:31'
time = '12:31'
console.log(age)
document.write(name)
console.log(time)
</script>
数据类型
作用: 方便使用
两大类
基本数据类型
数字
整数
小数
负数
字符串
单引号''
双引号""
反引号``
模板字符串
里面可以解析变量: ${变量}
布尔
true
false
未定义
undefined
空
null
引用数据类型
数组
函数
对象
检测数据类型: typeof
得到的结果是: 英文描述
代码参考
<script>
let num = 123
let str = '阿斯达'
let bl = true
let nu = null
let un =
console.log(typeof num)
console.log(typeof str)
console.log(typeof bl)
console.log(typeof un)
console.log(typeof nu)
</script>
类型转换
隐式转换
优点: 代码少
缺点: 结果不可控
显式转换
字符串转数字
Number()+
parseInt()
parseFloat()
其他转字符串
String(数据)
变量.toString()
代码参考
let a = prompt('请输入第一个数')
let b = prompt('请输入第二个数')
// alert( Number(a) + Number(b) )
a = (Number(a))
b = (Number(b))
alert(a + b)
</script>
运算符
作用: 实际开发需要进行各种运算
算术运算符
+ - * /
Infinity无穷
%
判定是否可以被整除
求奇偶数
赋值运算符
= += -= *= /= %=
带操作赋值(修改变量本身)
自操作运算
++ --
前置自操作
后置自操作
比较运算符
> < >= <= == != === !==
特殊比较
字符串比较规则
不比长度
比对应位置的字母的ASCII码值
NaN比较
不能比较, 所得结果一定是false
小数不适合精确比较
小数存储不精确
逻辑运算符
逻辑与&&
一假则假
逻辑或||
一真则真
逻辑非!
取反
运算符优先级
运算从左往右
()可以提升优先级
流程控制
顺序结构
代码从上往下, 顺序执行(一定会执行)
分支结构
代码根据条件选择执行(可以跳过代码)
循环结构
代码重复执行( 减少代码书写)
运算符参考代码
<script>
// 逻辑与和逻辑或
// 逻辑与短路: 左边为假, 右边不执行
3 > 5 && console.log('完犊子')
// 逻辑或短路: 左边为真, 右边不执行
5 > 3 || console.log('逻辑或短路')
// 需求: 用户输入一个数, 判定是否大于10
let num = prompt('请输入一个数字')
// 简单粗暴的写法: 只有大于10,才告知用户
num > 10 && console.log(`您输入的数字大于10,为${num}`)
// 扩展: 逻辑与和或的结果未必是布尔结果(除非两边本身都是布尔结果)
console.log(10 && 20) // 20
// 数字转布尔: 只有0是false, 其他都是true
// 逻辑运算的结果: 最终能代表结果的那个表达式
// 实际应用: 兼容处理
let box = document.querySelector('.box')
box.onclick = function (e) {
// e: 事件对象Event
e = e || window.event
// 利用短路运算
// 如果e有值: e = e
// 如果e没有值 undefined: e = window.event
}
</script>
if分支
单分支
控制代码是否执行
双分支
二选一: 选择一段代码执行
多分支
多选一: 选择一段代码执行, 条件分层
分支
三元运算
三个表达式参与
语法: 条件表达式 ? 结果表达式1 : 结果表达式2
1或者2代表整个结果
条件真: 1代表结果
条件假: 2代表结果
作用: 简化 if-else双分支
取值 赋值
switch-case分支
条件是全等比较
case代表一个条件
break: 结束case以及switch
没有break: 穿透到下一个case
default: 所有条件都不匹配
参考代码
<script>
let num1 = +prompt('按时')
// let num2 = prompt('阿斯达')
let res = num1 < 10 ? '0' + num1 : num1
document.write(res)
</script>
while循环
条件在外部定义
条件变化在循环体中变化
适合: 不限定次数的循环( 死循环)
for循环
条件初始化, 条件判定, 条件变化: 都在for()小括号中
循环体: 只要专注解决业务问题
适合: 指定次数的循环
数组的循环遍历
循环案例
求和: 空筐思想
循环外面定义一个筐: 空的
循环里面不断的给筐添加内容(累加)
扩展平均值: 求和 / 数量
求极值: 擂台思想
循环外面定义一个擂主
循环里面不断pk擂主: 成功更换擂主
循环控制
给程序员提供了一种方便的机制, 让程序员可以在循环的内容控制循环
continue
跳过continue之后的代码
break
终止循环
循环嵌套
循环内部嵌入循环
执行逻辑
外部一次, 内部全部
数组
作用: 存储多个数据
每个数据: 元素
每个元素: 都有下标
从0开始
每次变化1
最后一个: 数组.length - 1
<script>
debugger
let arr = [2, 6, 1, 77, 52]
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
document.write(max)
document.write(`最小数${min}`)
</script>
数组操作
C: 新增
low版
数组[下标] = 新值
下标不存在
动态: 数组.length
高级
往后加
数组.push(新元素)
往前加
数组.unshift(新元素)
R: 查看
数组[下标]
U: 修改
数组[下标] = 新值
D: 删除
从最后删: pop()
从最前删: shift()
从中间删(任意位置): splice()
<script>
let a = [11, 22, 33, 44, 55]
document.write(a[3])
a[0] = 'a'
a.unshift('9')
a.push('8')
a.pop()
a.shift()
a.splice(2, 4)
console.log(a)
</script>
函数
函数: 保存了一段可以重复使用的代码
作用: 实现代码的复用( 重复使用 )
函数基本语法
先定义
function 名字(){ 函数体 }
不会自己运行
后调用
名字()
可以重复调用
function get1() {
let num1 = +prompt('输入第一个数')
let num2 = +prompt('输入第二个数')
let res = num1 + num2
document.write(res)
}
参数
作用: 让函数写死的代码, 可以变得灵活
形参
声明函数的()里面
可以多个, 用逗号分隔
只能在函数体内使用
必须是变量名
实参
调用函数的()里面
必须传入: 具体数据
字面量
保存数据的变量
表达式: 1 + 1
数量: 与形参数量保持一致
顺序必须对应
实参不限定数据类型
<script>
function a(x, y) {
x = x || 0
y = y || 0
console.log(x - y)
}
a(5 + 4, 2 + 1)
a(5, 2)
</script>
返回值
作用: 让函数结果变得灵活
函数一定有返回值
默认是undefined
修改返回值
return 数据
返回到函数调用处
一般: let 变量 = 函数(), 将返回值保存到变量中
return会结束函数: 后面代码不运行
后续开发中: 单分支使用最多
function getmax(shuzu) {
let a = shuzu[0]
for (let i = 0; i < shuzu.length; i++) {
if (shuzu[i] > a) {
a = shuzu[i]
}
}
return a;
}
let c = getmax([8, 3, 4])
document.write(c)
作用域
保护数据的安全( 全局的不安全 )
减少命名的冲突( 不同作用域可以同名 )
三个作用域
全局作用域
全局变量
到处都可以访问
局部作用域
局部变量
只有当前函数内部可以访问
形参属于局部变量
块级作用域
块级变量
只能对应的{}里面使用
作用域链
所有的作用域都是基于全局
每开辟一层就会形成作用域链条
变量的访问原则
就近原则
自己没有找上级
<script>
let a = 11
function jubu() {
a = 10
document.write(a)
}
jubu()
</script>
匿名函数
没有名字
将函数保存到变量中: 函数表达式
调用: 变量名()
事件函数
回调函数
立即执行函数
作用: 解决污染问题(全局容易被污染)
沙箱
(function(){ // 代码 })()
(function(){}) 代表函数
() 代表调用
<script>
// 匿名函数;函数表达式
// 函数没名字, 讲函数的声明赋值给变量保存
// 要给匿名函数加名字: 没有存在的意义(外部不能通过函数名调用)
let a = function (b, c) {
return b + c
}
let res = a(2, 3)
document.write(res)
</script>
对象
一种数据类型, 能够很好的描述数据
对象语法
{属性, 方法}
属性名: 属性值
方法名: function(){}匿名函数
名字: 都是字符串
多个属性间 , 逗号分隔
对象访问
专属语法: .语法
对象.属性名
对象.方法名()
中括号语法
对象['属性名']
对象操作
C
对象.新属性名 = 值
对象['新属性名'] = 值
U
与C一样, 区别在于属性名是已经存在的
D
delete 对象.属性名
对象遍历
for-in语法
for(let 变量名 in 对象)
变量名: 保存的是每个属性的名字
值访问: 对象[变量名]
实际开发中: 数据的存在形式
[{},{}....]
数组内部包对象
遍历数组取出对象
对象.属性名访问
<!-- 对象命名 -->
<script>
let goods = {
brand: 带米,
name: '带米11',
num: 100012816024,
weight: '550克',
address: '中国大陆'
};
console.log(goods)
// goods.toString() ====[object Object]
</script>
