js01~
-
-
渲染引擎：用来解析 HTML 与 CSS，俗称内核，比如 chrome 的 blink，老版本的 webkit
-
js 引擎：也成为 js 解释器，用来读取网页中的 js 代码，对其处理后运行，比如 chrome 的 v8
-
-
浏览器本身并不会执行 js 代码，而是通过 内置的 js 引擎（解释器）来执行 js 代码。js 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 js 语言归为脚本语言，会逐行解释执行
JS
基础语法
流程控制
数组
函数
对象
JS 基础语法
JS 介绍
变量
数据类型
类型转换
案例
JS 介绍
JS 是什么？
JS 书写位置
JS 注释
JS 结束符
输入输出语法
字面量
-
JS 是什么？
-
一种运行于客户端（浏览器）的编程语言，实行人机交互
-
-
作用：
-
网页特效
-
表单验证（发明目的）
-
数据交互
-
服务端编程
-
-
JS 组成
-
JS
-
ECMAScript --> 规定 JS 基础核心语法
-
Web APIs
-
DOM --> 操作文档
-
BOM --> 操作浏览器
-
-
-
JS 书写位置
-
内联
<button onclick="alert('内联')">点击</button>-
内部
// html 文件中 用 script 标签包住
// script 标签写在 </body> 上面 -- 最好的策略
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
alert('内部');
})
</script>-
外部
// script 标签中无需写代码 自动忽略
// .js
alert('外部')
// .html
<Script src="demo01-js书写位置.js"></Script> -
-
JS 注释
-
单行注释 --> // ctrl + /
-
多行注释 --> /* */ shift + alt + a
-
-
JS 结束符
-
; --> 语句结束
-
Why？
-
enter --> 换行 --> 结束符
-
-
一般不使用结束符 ;
-
-
输入输出语句
-
输出
-
document.write() 可解析标签
-
alert()
-
console.log()
-
-
输入
-
prompt()
-
-
<script>
// 输出语句
// 1. *可解析标签
document.write('js')
document.write('<h3>js</h3>')
// 2.
alert('js')
// 3.
console.log('js');
// 输入语句
prompt('你喜欢js吗?')
</script>
-
字面量
-
什么是字面量？ 计算机中描述事物
-
100 数字字面量
-
'100' 字符串字面量
-
[] 数组字面量
-
{} 对象字面量
-
变量
变量是什么?
变量的基本使用
变量的本质
变量的命名规则和规范
-
变量是什么？
-
计算机存储数据的 容器
-
-
变量的使用
-
声明变量 let（声明关键字） 变量名（标识符）
-
变量赋值 变量名（标识符） = 值（字面量）
-
更新变量 变量名（标识符） = 值（字面量）即变量重新赋值
-
变量的初始化 let（声明关键字） 变量名（标识符）= 值（字面量）
-
<script>
// 声明变量
let name
// 变量赋值
name = 'js'
// 更新变量
name = 'javascript'
// 变量初始化
let age = 18
</script>
-
变量的本质
-
内存：计算机中存储数据的地方，相当于一个空间
-
变量：程序于内存中申请的一块用来存放数据的小空间
-
垃圾回收机制：变量不使用时则自动回收
-
-
变量命名规则与规范
-
规则 必须遵守 否则报错
-
不能使用关键字
-
只能用 _ $ 字母 数字，且数字不能开头
-
字母严格区分大小写
-
-
规范
-
起名有意义
-
遵守小驼峰命名法
-
-
-
let 和 var 的区别
-
let 解决了 var 的一些问题
-
var 可以使用后声明
-
var 声明过的变量可以重复声明
-
变量提升、全局变量、无块级作用域等
-
-
<script>
// - var 可以使用后声明
age = 17
alert(age) // 输出17
var age
// - var 声明过的变量可以重复声明 不报错
var num = 18
var num = 19
alert(num) // 输出19
// - 变量提升、全局变量、无块级作用域等
</script>
-
变量拓展 --> 数组
-
什么是数组？ 一种可以按顺序保存多个数据的变量
-
数组声明 let 数组名 = [数据1,数据2,... ,数据n]
-
数组取值 数组名[索引或下标]
-
概念
-
数组元素：数组中的数据
-
索引或下标：数组中的数据按顺序保存，从0开始
-
数组长度：数组中数据的个数，通过数组的 length 属性获得
-
-
<script>
// 数组声明
let arr = ['马超','黄忠','刘备','关羽','张飞','吕布','貂蝉']
// 数组取值
alert(arr[1]) // 输出黄忠
// 数组长度 获取
alert(arr.length) //输出7
</script>
数据类型
数据类型
检测数据类型
-
作用：
-
更充分和高效利用内存
-
更方便程序员使用数据
-
-
数据类型
-
基本数据类型
数值型 字符串型 布尔型 未定义型 空类型 Number String Boolean Undefined Null -
引用数据类型
对象 函数 数组 Object Function Array
-
-
数值型 js中整数、小数、正数、负数等统一称为数值类型
-
字符串型 ''、""、`` 包裹的数据都叫做字符串
-
推荐使用 ''
-
无论单双引号必须成对使用
-
单双引号可以互相嵌套，但是不可以自己嵌套自己，即外单内双或外双内单
-
必要时可以使用转义字符 \，输出单双引号
-
字符串拼接 即利用 + 做字符串拼接
-
模板字符串 ``
-
拼接字符串和变量
-
没有它之前，拼接字符串比较麻烦
-
内容拼接变量时，用 $() 包住变量
-
-
<script>
let price = prompt('请输入价格')
let num = prompt('请输入数量')
let address = prompt('请输入地址')
document.write(`
<table border = '1'>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机</td>
<td>${price}</td>
<td>${num}</td>
<td>${num * price}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
-
布尔型
-
true 1
-
false 0
-
-
未定义型
-
只声明不赋值
-
使用场景：判断是否有数据传递过来
-
-
空类型
-
使用场景：将来有一个变量里存放的是一个对象，但对象还没被创建好，可以先给 null
-
-
未定义型 和 空类型 的区别
-
undefined 表示没有赋值
-
null 表示赋值了，但内容为空
-
使用场景的区别 如上
-
-
检测数据类型 typeof
<script>
// Number
console.log(typeof 123);
// String
console.log(typeof '123');
// Boolean
console.log(typeof true);
// undefined
console.log(typeof undefined);
// Object
console.log(typeof null);
</script>
类型转换
为什么要进行类型转换？
隐式转换
显示转换
-
为什么要进行类型转换？
-
js 是 弱类型数据
-
-
隐式转换
-
什么是隐式转换？ 某些运算符被执行时系统自动将数据类型进行转换
-
规则：
-
两边只要有一个为字符串，都会把另一个转换为字符串
-
除 + 以外的算数运算符，会把数据转成 数值类型
-
-
缺点：转换类型不明确，靠经验总结
-
小技巧：+ 号作为正号解析可以转换成数值类型
-
<script>
// - 两边只要有一个为字符串，都会把另一个转换为字符串
console.log('123' + 10); // 12310
console.log(123 + '10'); // 12310
// - 除 + 以外的算数运算符，会把数据转成 数值类型
console.log('123' / 123); // 1
console.log('1' * '1'); // 1
// + 号作为正号解析可以转换成数值类型
console.log(+ '123'); // 123
console.log(- '123'); // -123
</script>
-
显示转换
-
Number()
-
转换成数值类型
-
如果字符串里有非数字，转换失败，结果为 NaN，即非数字
-
NaN 也是数值类型的数据，代表非数值
-
无过滤功能
-
-
parsetInt()
-
只保留整数
-
有过滤功能
-
-
parseFloat()
-
可以保留小数
-
有过滤功能
-
-
String()
-
变量.toString(2) 2 --> 二进制
-
<script>
// Number()
console.log(Number('123')); // 123
// parsetInt()
console.log(parseInt('123')); // 123
// parsetFloat()
console.log(parseFloat('123')); //123
// 保留整数
console.log(parseInt('123.123')); // 123
// 保留小数
console.log(parseFloat('123.123')); // 123.123
// 过滤功能
console.log(Number('123abc')); // NaN
console.log(parseInt('123abc')); // 123
console.log(parseFloat('123.123abc')); // 123.123
</script>
流程控制
运算符
语句
break continue
综合案例
-
运算符
-
算术运算符
-
+、-、*、/、%、
<script>
// 计算圆的面积
// 声明定义圆的半径
let r = prompt('请输入圆的半径')
// 计算圆的面积并输出
console.log(Math.pow(r,2));
console.log(Math.PI * Math.pow(r,2))
</script> -
-
赋值运算符
-
=、+=、-=、*=、/=、%=、
<script>
// 赋值运算符
// age+=1 ==> age = age + 1 依次类推
let age = 0
console.log(age+=1) // 1 执行了 age = age + 1
console.log(age-=1) // 0 执行了 age = age - 1
console.log(age/=1) // 0 执行了 age = age / 1
console.log(age%=1) // 0 执行了 age = age % 1
</script> -
-
一元运算符（一个操作数）
-
++、--、
-
前置和后置单独使用时没有区别
-
前置和后置参与运算时有区别
<script>
let i = 1
console.log(++i + 2); // 4 2
console.log(i);
console.log(i++ + 2); // 4 3
console.log(i);
console.log(--i + 2); // 4 2
console.log(i);
console.log(i-- +2); // 4 1
console.log(i);
let j = 1
console.log(j++ + ++j + j); // 7
// 1 + ++j + j j = 2
// 1 + 3 + j j = 3
// 1 + 3 + 3 =7
</script> -
-
比较运算符
-
>、<、>=、<=、==、!=、===、!===、
-
字符串比较，即比较字符对用的 ASCⅡ 码
-
从左到右依次比较，第一位一样，比较第二位，以此类推
-
NaN 不等于任何值，包括它本身
-
尽量不比较小数，小数有精度问题
-
隐式转换
<script>
console.log(5 == '5'); // true 值相等，不管数据类型
console.log(5 === '5'); // false 值相等数据类型不相等，数据类型和值需一致
console.log('pink' > 'red'); // false 比较字符串中从左到右的字符的 ascⅡ码
console.log(NaN === NaN); // false NaN 不等于任何值，包括它本身
console.log(5 < 5.20); // false 尽量不比较小数，小数有精度问题
</script> -
-
逻辑运算符
-
&&、||、!、
-
&&(与) 两边都必须为真，结果才为真
-
||(或) 两边有一个为真，结果为真
-
false，数字0，''，undefined，null 都为假，其余为真
-
逻辑短路，即通过左边即可得到整个式子的结果，因此没必要判读右边
-
&& 左false短路，|| 左true短路
<script>
// && 左假短路 同理类推 ||
let num = prompt('请输入一个数')
console.log(num % 4 === 0 && num % 0 !== 0);
</script> -
-
优先级
-
什么是优先级？同时使用多个运算符编写程序时，会按某种顺序先后执行，称为优先级
优先级 运算符 顺序 1 小括号 () 2 一元 ++、--、 3 算数 *、/、%、+、-、 4 关系 >、>=、<、<=、 5 相等 ==、!=、===、!==、 6 逻辑 &&、||、 7 赋值 = 8 逗号 ， -
-
-
语句
-
表达式与语句
-
什么是表达式？ 表达式是一组代码的集合，JS 解释器会将其计算出一个结果
-
什么是语句？JS 整句或命令，JS 语句以分号结束（可省略）
-
表达式计算出一个值，但语句用来自行以使某件事发生
-
-
分支语句
-
if 语句
-
单分支
-
双分支
-
多分支
-
<script>
// if 语句
// 单分支
let score = prompt('请输入您的分数')
if (score >= 60 ) console.log('请继续努力哟~');
// 双分支
if (score >= 60) {
console.log('请继续努力哟~');
}else{
console.log('加油哟~下次争取及格');
}
// 多分支
if (score > 90) {
console.log('保持住~');
}
else if (score >= 60){
console.log('请继续努力哟~');
}
else{
console.log('加油哟~下次争取及格');
}
</script>-
三元
<script>
// 使用场景： 一般用来取值 if 双分支的简单写法
// 条件 ? 满足条件执行的代码 ： 不满足条件执行的代码
let num = +prompt('请输入一个数')
console.log(num = num > 0 ? num : num+=1);
</script>-
switch 语句
-
匹配且全等
-
一般用于等值判断，不适合用于区间判断
-
搭配 break 关键字，没有 break 关键字会在成穿透现象，即 case 穿透
-
<script>
// 简单的计算器
let num1 = +prompt('')
let num2 = +prompt('')
let operation = prompt('')
switch (operation) {
case '+':
console.log(num1+num2);
break
case '-':
console.log(num1-num2);
break;
case '*':
console.log(num1*num);
break
case '/':
console.log(num1/num2);
break
default:
alert('请输入正确的运算符')
}
</script> -
-
循环语句
-
循环三要素 变量起始值、终止条件、变量变化量
-
for - 循环代码块一定的次数
-
for/in - 循环遍历对象的属性
-
while - 当指定的条件为 true 时循环指定的代码块
-
do/while - 同样当指定的条件为 true 时循环指定的代码块
<script>
// 变量起始值 终止条件 变量变化量
// for 循环
// i = 0 循环开始前执行 可初始化任意或多个值 也可省略语句（循环开始前设置了值）
// i < 5 运行循环的条件 可省略 但必须在循环内提供 break 否则循环无法停止 程序崩溃
// i ++ 循环已被执行后执行 用法多种多样 可省略（循环内部有相应的代码时）
let x = 0;
for (let i = 0; i < 5; i++) {
console.log(`x += ${i} = ${x += i}`);
}
// 循环变量初始值
let i = 0
for (;;) {
// 循环条件 循环语句
if (i < 5) {
console.log(`x += ${x} = ${x += i}`)
i+=2
}else{
break;// 终止
}
}
// for/in 循环 更多内容见对象
let person = {
name: 'zs',
age: 18,
gender: '男'
}
for (let k in person) {
console.log(k);
console.log(person[k]);
}
// while 循环 变量初始值 循环条件 变量变化量
let j = 0
while (j < 5) {
console.log(`This is number ${j}`);
j++
}
let l = 5
// do...while do...while 至少会执行一次
do {
console.log(`This is number ${l}`);
l++
}while( l < 5)
</script> -
-
-
break continue
-
break 语句用于跳出循环
-
continue 用于跳过循环中的一个迭代
<script>
// break 跳出当前循环
let res = 0
for (let i = 1; ; i++) {
res+=i
if (res === 5050) {
console.log('1+...+100' + '=' + res);
console.log('跳出循环，循环结束');
break
}
}
// continue 跳出当前循环的迭代，然后继续下一个迭代
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue
}
console.log(i);
}
</script> -
数组
数组是什么
数组的基本使用
操作数组
冒泡算法
-
数组是什么
-
概念 按顺序保存数据的数据类型
-
优点 保存多个变量
-
-
数组的基本使用
2.1 概念
-
元素
-
下标 / 索引
-
长度
2.2 数组声明语法
<script>
// 数组声明
// 顺序保存 编号（索引或下表）从0开始，存储任意类型数据
let 数组名 = [数据1,数据2,2.3 数组访问
-
数组名[索引/下标]
2.4 遍历数组
<script>
// 数组声明
// 顺序保存 编号（索引或下表）从0开始，存储任意类型数据
let arr = ['张三','李四','王五','赵六']
let num = [1,22,33,99]
let max = num[0]
// 数组访问 与 遍历数组
for (let i = 0; i < arr.length; i++) {
document.write(`
arr[${i}]: ${arr[i]}
`)
}
// 找出数组内 的 最大值
for (let i = 1; i < num.length; i++) {
max = max > num[i] ? max : num[i]
}
console.log(max);
</script> -
-
操作数组
查改增删
3.1 查
-
数组[索引/下标]
3.2 改
-
数组[索引/下标] = 新值
3.3 增
-
arr.push(新增内容)
-
arr.unshift(新增内容)
<script>
// 操作数组 增
let arr = [0]
// push() 将一个或者多个元素添加到数组末尾，并返回该数组的新长度
let length = arr.push(1,2)
console.log(arr);
console.log(length);
// unshift 将一个或多个元素添加到数组的开头，并返回该元素的新长度
length = arr.unshift(-2,-1)
console.log(arr);
console.log(length);
</script>3.4 删
-
arr.pop()
-
arr.shift()
-
arr.splice(起始下标，删除个数)
<script>
let arr = [0,1,2,3]
// pop() 从数组中删除最后一个元素，并返回该元素的值
let val = arr.pop()
console.log(arr);
console.log(val);
// shift() 从数组中删除第一个元素，并返回该元素的值
let val1 = arr.shift()
console.log(arr);
console.log(val1);
// splice(起始位置（指定删除的开始位置，从0计数），删除个数（可选，省略默认从指定位置删除到最后）) 删除指定元素
let val2 = arr.splice(0,1)
console.log(arr);
console.log(val2);
</script> -
-
冒泡算法
对象
什么是对象
对象使用
操作对象
遍历对象
内置对象
-
什么是对象
-
JS 里的一种数据类型，用于描述某个事物无序的数据集合，包括静态特征和动态行为
-
-
对象使用
2.1 对象声明语法
<script>
let 对象名 = {
// 属性名与属性值成对出现，英文:分割
// 属性之间英文,分隔
// 属性是依附于对象上的变量
// 属性名可以使用''或""，一般情况下省略，除非名称遇到特殊字符，如空格，横线等
属性名: 属性值,
// 方法和函数两部分构成
// : 分隔
// 方法是依附于对线上的函数
// 方法名可以使用''或""，一般情况下省略，除非名称遇到特殊字符，如空格，横线等
方法名: 函数
}
</script>2.2 属性访问
-
对象名.属性名
-
对象名['属性名']
2.3 方法访问
-
对象名.方法名()
<script>
// 声明对象
let person = {
name: '张三',
age: '18',
gender: '男',
sayHi: function(sayWhat) {
console.log(sayWhat)
}
}
// 对象访问
// 属性访问
console.log(person.name)
console.log(person['age'])
// 方法访问
person.sayHi('Hello,World!')
// 适用场景 结合遍历对象展示说明
</script> -
-
操作对象
查改增删
3.1 查
-
属性访问
-
方法访问
3.2 改
-
对象名.属性名 = 值
-
对象名['属性名'] = 值
-
对象名.方法 = function() {}
3.3 增
-
对象名.新属性名 = 新值
-
对象名['新属性名'] = 新值
-
对象名.新方法名 = function() {}
3.4 删
-
delete 对象名.属性名
-
delete 对象名.方法名
<script>
// 声明对象
let obj = {
name: '张三',
age: 18,
sayHi: function() {
console.log('Hi');
}
}
// 操作对象 改
obj.name = '李四'
obj['age'] = 19
obj.sayHi = function(sayWhat) {
console.log(sayWhat);
}
console.log(obj);
// 操作对象 增
obj.gender = '男'
obj['phone'] = '12306'
obj.saySorry = function(sayWhat) {
console.log(sayWhat);
}
console.log(obj);
// 操作对象 删
delete obj.gender
delete obj['phone']
delete obj.saySorry
console.log(obj);
</script> -
-
遍历对象
-
for in
<script>
// 声明对象
let obj = {
name: '张三',
age: 18,
gender: '男',
phone: '12306',
address: '广东省广州市从化区'
}
// 遍历对象 k / key
for (let k in obj)
{
// 输出 k 值 -- 属性名
console.log(k)
// 输出每个属性的值
// k 值 为属性名 数据类型为 字符串
// console.log(obj['k']) 该属性访问方法 输出 结果未 undefined k 值为字符穿情况下 obj['k'] 等价于 obj[''属性名'']
// console.log(obj.k) 该属性访问方法 输出 结果未 undefined 该情况下 解析器将 k 看作一个变量 而该变量尚未声明赋值
console.log(obj[k])
}
</script> -
-
内置对象
内置对象是什么
常见的内置对象 Math
生成任意范围随机数
5.1 内置对象是什么
-
JS 内部提供的对象，包含各种属性和方法给开发者调用
5.2 内置对象 Math
-
random() 生成0~1之间的随机数（包括0但不包括1）
-
ceil() 向上取整
-
floor() 向下取整
-
max() 找最大数
-
min() 找最小数
-
pow() 幂运算
-
abs() 绝对值
-
round() 就近取证（.5 往大取整）
-
......
-
5.3 生成任意范围随机数
<script>
// 公理 Math.floor(Math.random() * (max - min + 1)) + min
// 生成 0-10 的随机数
// 封装函数
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 生成并保存一个随机数
let random = getRandom(0,10)
console.log(random);
</script> -
-
数组对象
<script>
// 声明一个数组对象
let arr = [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '张四',
age: 18,
gender: '男'
},
{
name: '张五',
age: 18,
gender: '男'
},
{
name: '张六',
age: 18,
gender: '男'
}
]
// 将数组对象渲染至表格中
document.write(`
<table border = 1>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
`)
for (let i = 0; i < arr.length; i++) {
document.write(`
<tr>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
</tr>
`)
}
document.write(`</table>`)
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY