Mao-Design的博客

外观

引用js

3661字约12分钟

2026-01-22

调用js的两种方式

<body>
    <!-- 引用外部js文件 -->
    <script src="js/index.js">
        // 如果引用了外部的js文件，该内部的js代码则不会被执行
    </script>

    <!--  使用内部js文件 -->
    <script>
		let name = 'zhangsan'
    </script>
</body>

小弹窗

弹窗输出内容

alert("Hello,Woeld!")

注释

// 单行注释

/*
    多行注释
*/

​

文档输出语句

  • 在网页上输出一段语句
  • html语法会被识别渲染
// 输出一段语句
document.write('Who am I')
// html语法会被识别渲染
document.write('<h1>标题一</h1>')
// 控制台页面显示的字体，调试用
console.log('调试面板')

小弹窗输入语句

输入的内容为字符串类型

// 输入语句
// 浏览器弹出一个小弹窗，在小弹窗中输入内容
prompt('请输入密码：')

声明变量

// 声明变量
let age = 18
let name1 = 'zhangsan'
// 输出age和name1
document.write(age, name1)

组合

let name2 = prompt('输入内容')
document.write(name2)

变量命名规范

  • 不能使用关键字
  • 只能使用下划线、字母、数字、$组成的变量（其它符号会报错），且数字不能放在开头
  • JS字母严格区分大小写
  • 起名要有意义
  • 命名规则尽量遵守小驼峰命名规则，例：userName

Let和Var的区别

Var关键字的一些不合理的问题：

  • 可以重复声明
  • 可以先使用在声明
  • 变量提升、全局变量和没有块级作用域

let关键字就是为了解决var关键字的一些历史遗留问题

开发推荐使用let关键字

常量

  • const声明的变量称为常量
  • 当某个变量永远不变，或者说你不想改变，则可以使用 const来声明
  • 命名规范和变量一样，但常量名一般为大写
  • 声明的时候必须赋值（初始化），但不允许重新赋值
const PI = 2

数据类型

js是一门弱数据类型语言，所以变量属于那种数据类型，需要赋值之后才能确定

基本数据类型：

  • number数字型
  • string字符串
  • boolean布尔值
  • undefined未定义
  • null空类型

引用数据类型：

  • object对象
// 整数
let number = 1
// 字符串
let number1 = 'zhangsan'
// 布尔值
let number2 = true
// 小数
let number3 = 3.14

细节（NaN）

如果你的运算结果为NaN，则表示你的运算结果不是一个数字

NaN也是number数字类型，表示非数字

// undefined表示未定义的值，既然是未定义的值 + 1；其结果就不确定是不是一个数字
// 所以结果为NaN
document.write(undefined + 1)   // 输出 NaN
// null为空值，空值 + 1，自然就为 1
document.write(null + 1)    // 输出 1

检测数据类型

typeof检测数据类型

其写法有两种：

  • typeof 变量名 推荐使用该写发
  • typeof(变量名)
let b = 'hello'
document.write(typeof b)	// 输出 string
let b1 = null
document.write(typeof b1) 	// 输出 object

数据类型转换

隐式转换

  • + 号两边只要有一个是字符串，则会自动将另一边的数据类型转换成字符串类型
let r = 5
let num = 3.14 * r * r
document.write("圆的面积：" + num)	// 输出 圆的面积：78.5

显式转换

手动指定需转换的数据类型，有三种类型：

  • Number 数字类型，转换成数字类型
  • parseInt 整数，意思是只保留整数（不会四舍五入）
  • parseFloat 小数，意思是只保留小数
let c = '123'
document.write(Number(c))   // 输出 123
// 字符串转数字的前提是字符串的内容是数字
let c1 = '我是字符串'
document.write(Number(c1))   // 输出 NaN

字符串

被单引号 '' ，双引号 "" ，反引号 `` 包裹的数据就叫字符串，这些引号本质上没有什么区别，推荐使用单引号

let str = 'Hello,World!'

空字符串

let str = ''

引号嵌套引号，转义符

document.write('hello,"world"')	// 输出hello,"world"
document.write('hello,\'world\'')  // 输出hello,'world'

模板字符串

  • 需使用反引号才能生效
  • 模板字符串格式${变量名}
let num = 10
document.write("圆的面积：" + num)
document.write(`圆的面积：${num}`)

运算符

算术运算符

优先级：先乘除后加减，有括号先算括号里面的

+  加

-  减

*  乘

/  除

%  取模（取余数）
document.write(1 + 2)   // 3
document.write(1 - 2)   // -1
document.write(1 * 2)   // 2
document.write(1 / 2)   // 0.5
document.write(1 % 2)   // 1

练习：圆的面积

公式：π*r*r

代码

let r = 5
let num = 3.14 * r * r
document.write("圆的面积：" + num)

赋值运算符

// 将 1 赋值给变量num
let num = 1

// num += 1 等于 num = num + 1
num += 1
/**
下面这些运算符同理
+=  -=  *=  /=  %=
*/

自增运算符

// 先自增(运算)在赋值
++1
// 先赋值在自增(运算)
1++
/*
同理：
自增
++
自减
--
*/
let a = 1
console.log(++a + 2)  // 4
console.log(++a + 2)  // 5
let b = 1
console.log(b++ + 2)  // 3
console.log(b++ + 2)  // 4
console.log(++b + 2)  // 6

比较运算符

  • 比较结果为boolean值，true（真）和false（假）
  • NaN 不等于任何类型，包括自己
  • 尽量不要比较小数，因为小数有精度问题
>  // 判断左边的值是否大于右边的值
<  // 判断右边的值是否大于左边的值
>=  // 判断左边的值是否大于或等于右边的值
<=  // 判断右边的值是否大于或等于左边的值
==  // 判断两边的值是否相等（不管数据类型是否一样）
// （==和===，推荐使用===）
===  // 判断两边的数据类型和值是否相等
!==  // 判断两边的值是否不相等（不管数据类型是否一样）

逻辑运算符

console.log(3 > 2 && 4 > 3) // true

运算符优先级

  • 优先级从上到下

三元运算符

条件 ? 满足条件 : 未满足条件

实例

// 3小于5条件为真，所以 num 被赋值为 3
let num = 3 < 5 ? 3 : 5

数字补零

利用三元运算

let num = prompt('请输入一个数字')

num = num < 10 ? 0 + num : num

// 当输入 3 时，输出结果为 03
// 当输入 12 时，输出结果为 12
alert(num)

分支语句

分支少用if...else

分支多则用switch

if分支

  • 单分支
// 当括号内的结果为真，则执行大括号内的代码
if (true) {
	console.log('执行代码')
}
  • 双分支
// 当括号内的结果为假，则执行else下的代码
if (false) {

} else {
	console.log('执行代码')
}
  • 多分支
// 当第一个if条件不满足时，则继续往下判断
// 直到条件为真为止
// 如果所有的if条件都为假，则运行最后的else语句
if (false) {

} else if (true) {

} else {
	console.log('当所有的if判断都为假时，执行该语句')
}

switch分支

switch(值a) {
    case 值a:
		代码
		break
    
    case 值b:
		代码
		break
    
    default:
    	代码
    	break
}

实例

循环

  1. 明确循环次数的，推荐使用 for
  2. 不明确循环次数的，推荐使用 while

while循环

while(条件) {
	代码
}

实例

let num = 3
while (num < 4) {
	document.write('循环')
	num++
}
输出结果
循环

无限循环

while (true) {

}

for循环

for (变量初始值; 终止条件; 变化条件) {

}

实例

for (let i = 1; i < 3; i++) {
    document.write(`i<br>`)
}
输出结果
i
i

无限循环

for (;;) {

}

嵌套循环

for (let i = 1; i < 5; i++) {
	for (let j = 3; j < 6; j++) {
		
	}
}

冒泡排序

结束语句

  1. break：退出循环
  2. continue：结束本次循环，进入下次循环

数组

数组长度：数组名.length

let arr = ['数组1', '数组2', '数组3']

实例

let arr = [1, 2, 3]
// 输出数组中的第一组值
alert(arr[0])
输出结果
1

新增数组元素

在数组最后添加元素

数组名.push(arr1, arr2, arr3)
let arr = [1, 2, 3, 4]

arr.push(5, 6, 7)

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
1234567

在数组前面添加元素

数组名.unshift(arr1, arr2, arr3)
let arr = [1, 2, 3, 4]

arr.unshift(5, 6, 7)

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
5671234

筛选元素

let arr = [2, 1, 5, 8, 3, 1]
let arr1 = []
for (let i = 0; i < arr.length; i++) {
    // 将大于 2 的元素筛选出来，赋值到新的数组中
    if (arr[i] > 2) {
        arr1.push(arr[i])
    }
}

for (let i = 0; i < arr1.length; i++) {
    document.write(arr1[i])
}

删除数组元素

删除最后一个元素

数组名.pop()
let arr = [1, 2, 3, 4, 5]

arr.pop()

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
1234

删除第一个元素

数组名.shift()
let arr = [1, 2, 3, 4, 5]

arr.shift()

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
2345

删除自定义元素

数组名.splice(定义起始位置, 删除元素个数)

1. 如果未定义需要删除的元素个数
   则从默认定义的位置开始删到最后一个元素
let arr = [1, 2, 3, 4, 5]
// 从下标2开始删除
arr.splice(2)

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
12
let arr = [1, 2, 3, 4, 5]
// 从下标1开始删除，删除3个元素
arr.splice(1, 3)

for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
}
输出结果
15

遍历数组

let arr = [1, 2, 3];
// 遍历数组
arr.forEach(function (e) {
    console.log(e); // 1， 2， 3
})
// forEach 与 for遍历的区别
    // forEach只遍历有值的元素，不会将空值遍历出来
    // for循环无论有没有值都会遍历出来
// 简写
arr.forEach((e) => {
    console.log(e); // 1， 2， 3
})

函数

形参参数不需要类型，返回值也不需要类型

// 定义方式一
function add(a, b) {
    return a + b
}

// 定义方式二
let add = function(a, b) {
    return a + b
}

let a = add(10, 20);

alert(a);   // 30

对象

let user = {
    name: "zhangsan",
    age: 20,
    fs() {
        alert("我叫" + this.name + "年龄" + this.age)
    }
}
// 调用属性
alert(user.name);
// 调用方法
user.fs();

JSON

// json
let json1 = `{"name":"tom","age":"20","addr":["北京","上海"]}`;

// json -转-> js
let js = JSON.parse(json1);
alert(js.name); // tom

// js -转-> json
let json2 = JSON.stringify(js);
alert(json2);  // {"name":"tom","age":"20","addr":["北京","上海"]}

BOM

  • BOM 是 Browser Object Model（浏览器对象模型） 的缩写，它是用于操作浏览器窗口和浏览器功能的 API 集合。
  • BOM 不像 DOM（文档对象模型）那样有统一的标准，而是由浏览器厂商实现，因此不同浏览器可能存在一些差异，但核心功能基本一致

对话框

// 对话框：确定（返回true） 与 取消（返回false）
let boo = confirm("你确定？");
alert(boo);

计时器

let i = 10;
// 定时器：周期性的执行某个函数
// 1000等于1秒
setInterval(() => {
    i--;
    alert(i);
}, 2000);
// 延迟定时器：指定时间后执行一次函数
setTimeout(() => {
    console.log("hi,js");
}, 10000);

跳转链接

// 获取当前页面的完整 URL
alert(location.href);
// 给 location.href 赋值新的 URL，可以让浏览器立即跳转到该 URL 对应的页面
location.href = "https://www.bing.com";

DOM

JavaScript 和 HTML DOM 参考手册

<body>
    <p id="d1">id</p>
    <div>标签</div>
    <input type="checkbox" name="inpName"> name
    <p class="p1">class</p>
    <img src="1.png" class="img1">
</body>

监听事件

事件绑定

<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on1()">
    <input type="button" id="btn2" value="事件绑定2">
</body>
<script>
    function on1() {
        alert("事件绑定1被点击");
    }
    document.getElementById('btn2').onclick = function () {
        alert("事件绑定2被点击");
    }
</script>

练习

购物清单

HTML

JS

ATM取款机

九九乘法表

js

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
        document.write(`
            <span>${i} x ${j} = ${i * j}</span>
        `)
    }
    document.write(`<br><br>`)
}

css

span {
    padding: 5px;
    border: 2px solid pink;
}