二、JS书写位置、输入输出语句、变量常量、数据类型、运算符
CSS美化HTML样式；JS是一种运行在浏览器的编程语言，使网页由静变动。
1. js书写位置
1.1 内部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入css -->
</head>
<body>
<!-- html -->
<!-- 1. 内部JS 放在</body>上面 -->
<script>
// 控制台输出 浏览器控制台输出的字符串和数字颜色不一样（彩色为数字类型）
console.log('Hello');
console.log(666);
// 界面弹窗 alert把浏览器界面卡到当前行，不点确定不执行后续代码
alert('界面弹窗')
alert(888)
</script>
</body>
</html>1.2 外部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2. 外部js -->
<script src="./js/02_外部.js">
// 引入js文件后，script标签内不放代码，会忽略不执行
alert('引入外部js后script标签内部书写js代码')
</script>
</body>
</html>console.log('外部js')
alert('外部js')
document.write('引入外部js')1.3 行内js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 3. 行内js 直接写在标签内部 -->
<!-- JavaScript中行内js不常见，vue框架内比较常见 -->
<button onclick="alert(666)">按钮</button>
<!-- 双引套双引→报错 外双内单/外单内双/反引号 -->
<!-- <button onclick="alert("字符串")">按钮</button> -->
<button onclick="alert('字符串')">按钮</button>
<button onclick='alert("字符串")'>按钮</button>
<button onclick="alert(`字符串`)">按钮</button>
</body>
</html>2. 语句
2.1 输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<div class="box">
div
</div>
<div class="father">
<div>内嵌的div1</div>
<div>内嵌的div2</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
alert()
console.log()
// document 整个网页文档
// querySelector 按css选择器找标签（任意选择器）只返回第一个匹配的元素
// innerHTML 替换html选中标签内的现有内容
document.querySelector('h1').innerHTML = 'js一级标题'
document.querySelector('.box').innerHTML = 'js div'
document.querySelector('.father div').innerHTML = 'js .father里面的div1'
// querySelectorAll返回值为数组
console.log(document.querySelectorAll('ul li'));
</script>
</body>
</html>2.2 输入语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 确定 保存用户输入的数据到变量name
// 取消 null
let name = prompt('请输入用户名')
document.write(name)
// 模板字符串
document.write(`用户输入的内容为${name}`)
</script>
</body>
</html>3. 变量常量
3.1 let
3.2 const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Fn+F12 检查→控制台
let name = 'Tom'
console.log(name)
// 声明变量名称不能重复
// let name = ''
// 变量名称严格区分大小写，不能为关键字 不能数字开头
let Name = 'Jerry'
console.log(Name)
const PI = 3.14
console.log(PI)
</script>
</body>
</html>3.3 var
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 声明变量 ES6之前？已废弃？
// 问题一：允许先使用后定义
// 问题二：允许变量名称重复
console.log(name)
var name = 'Tom'
var name = 'Jerry'
// let 未定义变量先使用的话，浏览器控制台报错
// let声明的变量有块作用域
// console.log(age);
let age = 19
// let 不允许重复变量的声明
// let age = ''
console.log(age);
</script>
</body>
</html>案例1-交换变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = 10
let num2 = 20
console.log(num1, num2)
console.log('----交换----');
// 临时变量 可不赋初始值
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)
</script>
</body>
</html>
案例2-输出用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="uname"></p>
<p class="age"></p>
<p class="sex"></p>
<!--
变量练习-输出用户信息(同学自行练习)
需求：让用户输入自己的名字、年龄、性别，再输出到网页
分析：
①：弹出 输入 框(prompt）：请输入您的姓名(uname):用变量保存起来。
②：弹出输入框(prompt）：请输入您的年龄(age):用变量保存起来。
③：弹出输入框(prompt）：请输入您的性别(sex):用变量保存起来。
④：页面分别 输出 (document.querySelectorO、innerHTML) 刚才的 3 个变量。
-->
<script>
// 1. 定义变量 弹出窗口
let uname = prompt('输入您的姓名')
// 数字型数据弹出窗口点击取消后 返回值为0
let age = +prompt('输入您的年龄')
let sex = prompt('输入您的性别')
// 2. 输出用户输入的信息
// document.querySelectorC'css选择器').innerHTML = '设置的内容'
document.querySelector('.uname').innerHTML = uname
document.querySelector('.age').innerHTML = age
document.querySelector('.sex').innerHTML = sex
// document.write
document.write(`姓名${uname}，年龄${age}，性别${sex}`)
</script>
</body>
</html>4. 数据类型
4.1 简单数据类型
number、string、boolean、undefined未定义、null空
4.2 复杂数据类型
Object、Function、Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
JS数据类型整体分为两大类：
1. 基本数据类型 (简单数据类型)
number、string、boolean、undefined未定义、null空
2. 引用数据类型 (复杂数据类型)
Object、Function、Array
-->
<script>
// number
let num1 = 10
console.log(num1);
console.log(`num1的数据类型为${typeof num1}`)
// string
let name = 'Tom'
console.log(name);
console.log(`name的数据类型为${typeof name}`)
// boolean 只有两个值true/false
let isLogin = true
console.log(isLogin);
console.log(`isLogin的数据类型为${typeof isLogin}`)
// undefined 声明变量但不赋值（JS弱数据类型语言）
/* 工作使用场景：声明变量等待传送过来的数据，
可以通过检测这个变量是不是undefined，以此判断用户是否有数据传递过来 */
let age
console.log(age); //undefined
console.log(`age的数据类型为${typeof age}`) //undefined
// null 赋值了但内容为空
/* null开发中的使用场景：
官方解释：把null作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null */
let obj = null
console.log(obj); //null
console.log(`obj的数据类型为${typeof obj}`) //object
// 倒计时发验证码 用定时器 → 类型是对象型 → 用变量保存才能清除定时器
</script>
</body>
</html>4.3 字符串 string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 普通字符串不支持换行，换行报错
let str1 = '普通字符串'
/* let str1 = '普通
字符串' */
console.log(str1)
// 模板字符串支持换行显示
let str2 = `模板字符串
换行`
console.log(str2)
// 字符串拼接 + 或 ${}
// 模板字符串内部支持运算
let name = 'Tom'
let age = 18
console.log(name);
console.log('+拼接 名字为' + name + ',年龄为' + age);
console.log(`模板字符串\${} 名字为${name}，年龄为${age + 1}`);
</script>
</body>
</html>
案例3-输出姓名和年龄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输出姓名和年龄案例</title>
<style>
body {
background: #f0f2f5;
}
.container {
display: flex;
align-items: center;
width: 600px;
height: 100px;
margin: 50px auto;
background-color: #fff;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
}
.container img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.container .info {
flex: 1;
}
.container p {
line-height: 1;
}
.container #job {
color: #697086;
}
</style>
</head>
<body>
<div class="container">
<img src="./images/28.jpg" alt="">
<div class="info">
<p>江苏传智播客教育科技股份有限公司</p>
<p id="job">总裁办 | 张三 38岁</p>
<!-- id选择器在调用时 #id名字 -->
</div>
</div>
<script>
// 需求：页面弹出对话框，输入名字和年龄，页面显示：员工信息
let name = prompt('输入名字')
let age = prompt('输入年龄')
document.querySelector(`#job`).innerHTML = `总裁办 | ${name} ${age}岁`
</script>
</body>
</html>
5. 运算符
5.1 算数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = 9
let num2 = 4
console.log(num1 + num2); //13
console.log(num1 - num2); //5
console.log(num1 * num2); //36
console.log(num1 / num2); //2.25
console.log(num1 % num2); //1
</script>
</body>
</html>案例4-商品小计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算商品小计案例</title>
<style>
.media {
width: 600px;
margin: 50px auto;
display: flex;
align-items: flex-start;
background-image: url(./images/bg_banner.png);
background-repeat: no-repeat;
padding: 1.2rem 1.2rem 1rem 1.2rem;
border-radius: 0.25rem 0.25rem 0 0;
box-shadow:
2.5px 5.1px 5.3px rgba(0, 0, 0, 0.036),
8.5px 17.2px 17.9px rgba(0, 0, 0, 0.054),
38px 77px 80px rgba(0, 0, 0, 0.09);
}
.media h4 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="media">
<h4 id="title">
商品单价：100元, 购买数量：2, 总计：¥200
</h4>
</div>
<script>
// 需求：用户输入商品价格和数量，可以计算出小计，显示到页面中
let price = prompt('输入商品价格')
let count = prompt('输入商品数量')
let money = price * count
document.querySelector('h4').innerHTML = `商品单价：${price}元, 购买数量：${count}, 总计：¥${money}`
</script>
</body>
</html>
5.2 赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = 18
console.log(age);
age += 1
console.log(age)
</script>
</body>
</html>案例5-商品订单信息页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>综合案例-商品订单信息页面</title>
<style>
.title {
text-align: center;
color: #3e3e3e;
}
.order {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
border-radius: 10px 10px 0 0;
overflow: hidden;
}
/* 给行添加渐变背景颜色 */
.order tr:nth-child(1) {
background-image: linear-gradient(to right, #f46e33, #f057a5);
}
.order tr:nth-child(2) {
background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
}
.order tr:nth-child(2) :last-child {
color: #f282bb;
}
.order th {
padding: 5px 50px;
color: #fff;
}
.order,
th,
td {
border: 1px solid #fff;
line-height: 50px;
}
</style>
</head>
<body>
<h2 class="title">订单详情页面</h2>
<div id="container">
<table class="order">
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>1900元</td>
<td>2</td>
<td>3800元</td>
<td>黑马程序员</td>
</tr>
</table>
</div>
<script>
// 需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
// 1. 用户输入
let price = prompt('输入商品价格')
let num = prompt('输入商品数量')
let address = prompt('输入收货地址')
// 2. 页面输出
document.querySelector('tr:nth-child(2)').innerHTML = `
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${price * num}元</td>
<td>${address}</td>
`
/* document.querySelector('tr:nth-child(2) td:nth-child(2)').innerHTML = `${price}元`
document.querySelector('tr:nth-child(2) td:nth-child(3)').innerHTML = `${num}`
document.querySelector('tr:nth-child(2) td:nth-child(4)').innerHTML = `${price * num}元`
document.querySelector('tr:nth-child(2) td:nth-child(5)').innerHTML = `${address}` */
/* document.write(`
<div id="container">
<table class="order">
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${price * num}元</td>
<td>${address}</td>
</tr>
</table>
</div>
`) */
</script>
</body>
</html>
6. 作业
6.1 获取用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
题目描述
依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。
-->
<script>
// 1. 用户输入
let name = prompt('请输入您的姓名：')
let age = prompt('请输入您的年龄：')
let sex = prompt('请输入您的性别：')
// 2. 控制台打印
console.log(`用户的姓名：${name}`);
console.log(`用户的年龄：${age}`);
console.log(`用户的性别：${sex}`);
</script>
</body>
</html>6.2 增加年龄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
题目描述
1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁
2、增加5岁后，通过弹出框提示用户“据我估计，五年后，你可能XX岁了"
-->
<script>
let age = +prompt('你现在多少岁了？')
age+=5
alert(`据我估计，五年后，你可能${age}岁了`)
</script>
</body>
</html>6.3 计算银行卡余额
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
table{
border: 1px solid #000;
margin: 0 auto;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
padding: 5px 50px;
}
</style>
</head>
<body>
<h2>2020年12月消费支出</h2>
<table>
<tr>
<th>银行卡余额</th>
<th>水费</th>
<th>电费</th>
<th>网费</th>
<th>银行卡余额</th>
</tr>
<tr>
</tr>
</table>
<!--
题目描述
1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
2、页面打印一个表格，计算出本月银行卡还剩下的余额。
-->
<script>
let totalAmount = +prompt('请输入银行卡总额：')
let electricityBill = +prompt('请输入本月花费的电费：')
let waterBill = +prompt('请输入本月花费的水费：')
let internetBill = +prompt('请输入本月花费的网费：')
let balance = totalAmount - electricityBill - waterBill - internetBill
document.querySelector('tr:nth-child(2)').innerHTML = `
<td>${totalAmount}元</td>
<td>${electricityBill}元</td>
<td>${waterBill}元</td>
<td>${internetBill}元</td>
<td>${balance}元</td>
`
</script>
</body>
</html>