当前位置：首页 > news >正文

javascript基础 - Ref

news 2025/9/21 14:13:22

javascript

01-javascript介绍

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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>

以上代码实现点击哪个按钮，哪个按钮的颜色变为粉色

02-javascript书写位置

01-内部js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!-- 内部js--><script>// 页面弹出警示框alert('hello, js')</script>
</body>
</html>

02-外部js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="index.js"></script>
</body>
</html>

03-内联js

03-javascript注释和结束符

04-js 输入和输出语句和字面量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 1.文档输出内容document.write("hello, this is a output");document.write('<h1> hello, js</h1>')</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 1.文档输出内容document.write("hello, this is a output");document.write('<h1> hello, js</h1>');console.log("控制台输出！");</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 1.文档输出内容document.write("hello, this is a output");document.write('<h1> hello, js</h1>')console.log("控制台输出！")// 输入语句prompt("请输入您的喜好：")</script>
</body>
</html>

js 书写位置：标签内联， script 标签内部， script 标签引用外部js 文件

05-变量的声明和赋值

06-变量的更新以及输入用户名案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>let uname = prompt("请输入姓名");document.write(uname);</script>
</body>
</html>

07-交互两个变量案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>let num1 = 10;let num2 = 20;let temp = num1;num1 = num2;num2 = temp;console.log(num1, num2);</script>
</body>
</html>

08-变量的本质和命名规则

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>let username = prompt("please input your name");let age = prompt("please input your age");let gender = prompt("please input your gender");document.write(username);document.write(age);document.write(gender);</script>
</body>
</html>

09-var 和 let 区别

10-数组的基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>let arr = ['嘿嘿', "哈哈", "啦啦"];document.write(arr[1]);</script>
</body>
</html>

11.常量

12.数字数据类型和算术运算符

13.字符串数据类型及拼接

14.模版字符串

15.布尔型、null、undefined、类型检测

16.隐式转换和显示转换

17.小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.center {text-align: center;}table {/*合并相邻边框*/border-collapse: collapse;height: 80px;margin: 0 auto;text-align: center;}th {padding: 5px 30px;}table,th,td {border: 1px solid #000;}</style>
</head>
<body><h2 class="center">订单确认</h2><script>// 用户输入let price = +prompt('请输入商品价格：')let num = +prompt('请输入商品数量：')let address = prompt('请输入收获地址:')// 计算总额let total = price * num// 页面打印渲染document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收获地址</th></tr><tr><td>xx手机</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`)</script>
</body>
</html>