js书写位置
<body>
<!-- 内部写法 -->
<script>
alert('你好，js')
</script>
<!-- 外部的js代码在src中带入 -->
<script src="./index.js"> </script>
<!-- 不要再中间写 -->
</body>
行内js
<button onclick="alert('逗你玩')">点我月入过万</button>
变量
<script>
// 声明变量
let username
// 变量赋值
username = 18
// 不要加引号
document.write(username)
// 直接赋值
let age = 18
console.log(age)
let num = 20
let uname = '张三' 18
console.log(num) 20
console.log(uname) 张三
</script>
更新变量的值
<script>
let age = 18
age = 19
console.log(age)
</script>
输入和输出语法
<script>
// document.write('需要输出的内容')
// alert('输出的内容')向浏览器弹出的警告框
// console.log('控制台需要输出的内容')
// 输出在浏览器能够看到的
// 输入通过键盘我们拿到的
// prompt('请输入你的银行卡密码')提示显示输入框
</script>
弹出用户名
1、声明一个变量来接收名字 2.在浏览器打印你的名字
<script>
let name = prompt('请输入你的名字')
document.write(name)
</script>
交换俩个变量的值
<script>
let num1 = 10 声明变量一
let num2 = 20 声明变量二
let temp 创建一个临时变量
temp = num1 吧变量一赋值给临时变量
num1 = num2 吧变量二赋值给变量一
num2 = temp 吧临时变量赋值给变量二
接收单位=赋值单位
console.log(num1) 20
console.log(num2) 10
</script>
变量命名的规范与规则
- 关键字不能以js内置的一些英语词汇.例如let.var .if for等等
- 只能用下划线，字母，数字 $组成切数字不能开头
- 严格区分大小写、
- 小驼峰命名法 userName
let和var的区别
// var可以先使用后声明
console.log(age)
var age = 12
// 可以重复声明
var age = 123
数组的基本使用
<script>
// 变量保存一个数据
// 数组保存多个数据
// 数组最好用log打印
// 数组从0开始，叫索引也叫下标
let arr = ['张三','刘备','关羽']
console.log(arr)
// 需求:控制台打印关羽
// console.log(arr[2])--关羽
// console.log(arr.length) 3
// length -数组长度用点号加length
常量
<script>
// 常量 const
// 声明一个常量
// 一旦声明，值不能修改，声明后必须要赋值
const π =3.1415926
console.log(π)
</script>
数据类型
- 数据类型分为俩大类一类是基本数据类型一类是应用数据类型
- 基本数据类型：number数字型，string字符串型。boolean布尔型，undefined未定义，null空类型
- 引用数据类型：object对象
NAN
相当于是一个错误我的理解是字符串无法减去数字log结果为NAN。加号则是拼接
<script>
console.log('pink' - 2)
</script>
反引号模板字符串
- 多行字符串：模板字符串可以跨越多行，而不需要使用反斜杠来转义换行符
- 字符串插值：可以使用 ${expression} 的形式在字符串中插入变量或表达式的值。
- 标签模板：可以使用标签模板来改变模板字符串的解析过程。
- 方便的字符串拼接：模板字符串可以很方便的实现字符串的拼接，代替了传统的字符串拼接的麻烦方式。
<script>
// 我叫蔡徐坤今年18岁了
let name ='蔡徐坤'
let age = 18
let str = `我叫${name}今年${age}岁了`
// console.log(str) 我叫蔡徐坤我今年18岁了
document.write(`
<h1>水果列表</h1>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>`)
</script>
布尔类型
<script>
const flag = true
console.log(flag)
</script>
undefined未定义
<script>
// 哪几种情况会出现未定义类型
// 只声明变量未赋值，变量默认值为undefined
// 直接赋值undefined
let run =undefined
console.log(run)
let sun
console.log(sun)
</script>
null类型
<script>
// null代表空的
// 将这变量的值设置为null
let run = null
console.log(run)
// 现在有些程序员会将null作为为创建的对象
</script>
检测数据类型
- typeof 值
- typeof（）
字符串转数字类型
<script>
let str = '1234'
// 使用Number()
console.log(Number(str))
let num = '123'
console.log( typeof(String(num)))
</script>
parseint和parsefloat
<script>
// 字符串转数字类型的俩种方法
let str = '123adasd'
console.log(parseInt(str))
// parseInt保留整数,第一个字如果不是数字则是NAN
let stri = '123.123px'
console.log(parseFloat(stri))
// 保留小数
</script>
转字符串
- string()
- 变量.toString(进制)
转boolean
<script>
// 0 -0 '' null undefined NaN false 都是false
// 将字符串转换boolean 除了''会转成false其他的都是ture
let v1 = ''
let v2 = '-'
console.log(Boolean(v1))
console.log(Boolean(v2))
// 将数字转成boolean 除了0 NAN -0 是false其他都是ture
let srt = -1
console.log(Boolean(srt));
// undefined转成boolean 都是false
let srt1 = undefined
console.log(Boolean(srt1));
// null转boolean 都是false
let srt2 = null
console.log(Boolean(srt2));
</script>
隐式转换
<script>
let str = '12'
console.log(12+ +str) 24
// 直接在前面加上+-符号即可转换成功
<script>
// let str1 = +prompt('输入第一个数') 10
// let str2 = +prompt('输入第二个数') 10
// let sun = str1 + str2
// console.log(sun) 20
</script>
</script>
表格练习输入案例
<style>
h1{
text-align: center;
margin-top: 100px;
}
table{
/* 表格边框合并为一条 */
border-collapse: collapse;
margin: 0 auto;
text-align: center;
height: 80px;
}
table,
th,
td{
border: 1px solid rgb(13, 13, 13);
}
th{
padding: 10px 20px;
}
</style>
</head>
<body>
<script>
let name = prompt('请输入商品名称')
let moenky = +prompt('请输入商品价格')
let num = +prompt('请输入商品数量')
// let sum = prompt('请输入总价')
let total = moenky * num
let adderss = prompt('请输入地址')
document.write(`
<h1>订单确认</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>${name}</td>
<td>${moenky}</td>
<td>${num}</td>
<td>${total}</td>
<td>${adderss}</td>
</tr>
</table>
`)
</script>
