前言
记录时间：2023.2.28
坚持的第二天
JavaScript从入门到精通
学习javascript时间历程记录打卡
晚上8：00到 23：00
JS基础总结
完成代码练习
1.常量
<!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>Document</title>
</head>
<body>
<script>
// 1.常量 不允许更改值
// const PI = 3.14
// console.log(PI)
// PI =3.15
// console.log(PI);
//2.常量声明的时候必须赋值
</script>
</body>
</html>2.基本数据类型-数字型
<!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>Document</title>
</head>
<body>
<script>
// js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
// let num = 'try栈'
let num = 10.11
console.log(num);
console.log(1 + 1);
console.log(1 * 1);
console.log(1 / 1);
console.log(4 % 2); //求余数 0
console.log(5 % 3); //求余数 2
console.log(3 % 5); //求余数 3
// java 强数据类型的语言 int num = 10
</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>Document</title>
</head>
<body>
<script>
// 1. 页面弹出输入框
let r = prompt('请输入圆的半径：')
// 2. 计算圆的面积（内部处理）
let re = 3.14 * r * r
// 3. 页面输出
document.write(re)
//NaN not a number
console.log("try栈" - 2) //NaN
console.log("NaN" - 2)//NaN
console.log("NaN" + 2) //NaN2
console.log("NaN" / 2) //NaN
console.log(NaN === NaN) //false
</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>Document</title>
</head>
<body>
<script>
// let str = 'try'
// let str1 = 'try'
// let str2 = `中文`
// console.log(str2)
// console.log(11)
// console.log(`11`)
// console.log(str)
// console.log('str')
// console.log('这是一个打印的"控制台"')
// console.log("这是一个打印的'控制台'")
// console.log('这是一个打印的\'控制台\'')
console.log(1 + 1)
console.log('try' + '栈') //try栈
let age = 18
document.write('年龄:' + 19 + '\n') //年龄:19
document.write('年龄:' + age + '\n') //年龄:18
document.write('今年:' + age + '岁了' ) //今年:18岁了
</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>Document</title>
</head>
<body>
<script>
// let age = 18
// // 模板字符串 外面用`` 里面 ${变量名}
// document.write(`我今年${age}岁了`)
let uname = prompt('请输入您的姓名：')
let age = prompt('请输入您的年龄：')
//输出
document.write(`大家好，我叫${uname}，今年${age}岁了`)
</script>
</body>
</html>6.数据类型-其他三种类型
<!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>Document</title>
</head>
<body>
<script>
// 1. true false 是布尔型字面量
console.log(3 > 4)
let isCool = false
console.log(isCool)
// 2. 未定义类型 弱数据类型 声明一个变量未赋值就是 undefined
let num
console.log(num)
// 3.null 空的
let obj = null
console.log(null)
// 计算有区别
console.log(undefined + 1)
console.log(null + 1)
</script>
</body>
</html>7.检测数据类型
<!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>Document</title>
</head>
<body>
<script>
let num = 10
console.log(typeof num) //number
let str = 'try'
console.log(typeof str) //string
let str1 = '10'
console.log(typeof str1) //string
let falg = false
console.log(typeof falg) //boolean
let un
console.log(typeof un) //undefined
let obj = null
console.log(typeof obj) //object
let num1 = prompt('请输入第一个数：')
console.log(typeof num1) //string
</script>
</body>
</html>8.隐式转换
<!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>Document</title>
</head>
<body>
<script>
//数据的转换
console.log(1 + 1) //2
console.log('try' + 1) //try1
console.log(2 + 2) //4
console.log(2 + '2') //22
console.log(2 - 2) //0
console.log(2 - '2') //0
console.log(+12) //12
console.log(+'123') //123 单用 转换为数字类型
</script>
</body>
</html>9.显示转换
<!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>Document</title>
<style>
.box {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<script>
let str = '123'
console.log(Number(str)) //123
console.log(Number('try')) //NaN
// let num = prompt('输入年龄')
// let num = Number(prompt('输入年龄'))
// let num1 = +prompt('输入年龄')
console.log(parseInt('12px')); // 12 parseInt取整数
console.log(parseInt('12.55px')); // 12 parseInt取整数
console.log(parseInt('abc12.48px')); // NaN
console.log(parseFloat('12px')); //12
console.log(parseFloat('12.55px')); //12.55
console.log(parseFloat('12.85px')); //12.85
console.log(parseFloat('abc12.98px')); //NaN
</script>
</body>
</html>10.求和案例
<!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>Document</title>
</head>
<body>
<script>
// 1. 用户输入 prompt 得到是字符串类型 要转换为 数字型
let num1 = +prompt('请输入一个数字：')
let num2 = +prompt('请输入一个数字：')
// 2. 输出
alert(`两个数的相加求和：${num1 + num2}`)
</script>
</body>
</html>11.综合案例
<!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>Document</title>
<style>
h2 {
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>订单确认</h2>
<script>
//1.用户输入
let price = +prompt('请输入商品价格：')
let num = +prompt('请输入商品数量：')
let address = prompt('请输入商品收货地址：')
//2.计算总额
let tatal = price * num
//3.页面打印渲染
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>手机</td>
<td>${price}元</td>
<td>${num}</td>
<td>${tatal}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![光遇自动更新每日任务接口[接口分享]-try栈](https://www.vqqc.cn/wp-content/uploads/2022/12/1670250329-apijktppt.png)
![简单用html写了一个光遇蜡烛查询的网页工具[实用工具]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1676084107-微信图片_20230211105428.png)
![php基础教程-数组冒泡排序算法[技术分享]-try栈](https://www.vqqc.cn/wp-content/uploads/2022/12/1670257414-slt..png)
![JS基础教程：2023.4.2坚持第35天-JavaScript web APIs BOM操作[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/04/1680450097-Web-APIs.png)
![JS基础教程：2023.2.27第一天-JavaScript从入门到精通[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1677510437-JS基础.png)
![java入门基础教程：2023.2.27第一天，Java快速入门、IDEA开发工具的使用[java教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/02/1677498626-画布-1.png)
![JS基础教程：2023.3.5第七天-JavaScript数组和循环使用[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/03/1678026321-JS基础.png)
![JS基础教程：2023.3.2第四天-JavaScript流程控制使用[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/03/1677769054-JS基础.png)
![JS基础教程：2023.4.3坚持第36天-JavaScript web APIs BOM操作[js教程]-try栈](https://www.vqqc.cn/wp-content/uploads/2023/04/1680537133-Web-APIs.png)
暂无评论内容