引用js
3661字约12分钟
2025-11-21
调用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>')// 如果要渲染多个html标签,则推荐使用反引号,因为反引号可以换行
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米su7</td>
<td>${money}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)// 控制台页面显示的字体,调试用
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) // 输出 stringlet 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 str = " Java Script ";
// * 表示空格
console.log(str); // **Java Script**
// length:字符串长度
console.log(str.length); // 15
// charAt:提取字符 (空格也算一个字符)
console.log(str.charAt(2)) // J
// indexOf:查找第一个字符对应的下标
console.log(str.indexOf("a")); // 3
// trim:去掉字符串两边多余的空格
console.log(str.trim()); // Java Script
// substring:显示下标 [0, 5) 的值(后面的下标值不可取)
console.log(str.substring(0, 5)); // **Jav模板字符串
- 需使用反引号才能生效
- 模板字符串格式
${变量名}
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) // 5let 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
}实例
let num1 = +prompt('请输入数值1')
let num2 = +prompt('请输入数值2')
let sp = prompt('请示加减乘除的符号')
switch (sp) {
case '+':
alert(`两数相加总和${num1 + num2}`)
break
case '-':
alert(`两数相减差值${num1 - num2}`)
break
case '*':
alert(`两数相乘结果${num1 * num2}`)
break
case '/':
alert(`两数相除结果${num1 / num2}`)
break
default:
alert(`符号错误`)
break
}循环
- 明确循环次数的,推荐使用
for - 不明确循环次数的,推荐使用
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++) {
}
}冒泡排序
结束语句
- break:退出循环
- 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])
}输出结果
12let 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
<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>// 获取元素
// 通过ID标签获取元素
let id1 = document.getElementById('d1');
alert(id1);
// 修改内容:修改ID=d1标签中的内容为 id111
id1.innerHTML = "id111";
// 修改属性值:将ID=d1的标签改为ID=d2
id1.id="d2";
// 更具标签名获取元素
let bq = document.getElementsByTagName('div');
alert(bq);
// 修改标签div中的内容为 标签111
// getElements是动态集合,所以第一个标签用 [0] 表示
bq[0].innerHTML = "标签111";
// 通过name名称获取元素
let name1 = document.getElementsByName('inpName');
alert(name1);
// 通过class名获取元素
let class1 = document.getElementsByClassName('img1');
alert(class1);
// 修改属性值:将src中的1.png改为2.png
class1[0].src="2.png";监听事件
事件绑定
<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>
<body>
<form action="" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input class="b1" type="submit" value="提交">
<input class="b1" type="button" value="单击事件" onclick="fn1()">
</form>
</body>
<script>
// 创建对应函数
function bfn() {
console.log("元素失去焦点");
}
function ffn() {
console.log("元素获得焦点");
};
function kfn() {
console.log("键盘被按下");
};
function subfn() {
alert("提交");
}
</script>练习
购物清单
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
margin: auto;
width: 800px;
height: 100px;
}
table,
tr,
th,
td {
border: 2px solid red;
text-align: center;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<!-- 引用外部js文件 -->
<script src="js/index.js">
// 如果引用了外部的js文件,内部的js代码则不会被执行
</script>
</body>
</html>JS
let money = Number(prompt('单价:'))
let num = Number(prompt('数量:'))
let address = prompt("地址:")
let total = money * num
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米su7</td>
<td>${money}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
ATM取款机
let money = 0
while (true) {
let a = 0
let n = +prompt(`请选择:
1.存钱
2.取钱
3.查看余额
4.退出
`)
if (n === 4) {
break
}
switch (n) {
case 1:
a = +prompt('输入存款金额')
money = money + a
break
case 2:
a = +prompt('输入取出金额')
money = money - a
break
case 3:
alert(`余额${money}`)
break
}
}九九乘法表
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;
}