1、js书写的位置 - 内部
<body>
<!-- 习惯把 js 放到 /body 的后面 -->
<script>
console.log('这是内部 js 的书写位置')
alert('内部js')
</script>
</body>
<body>
<!-- 习惯把 js 放到 /body 的后面 -->
<script>
console.log('这是内部 js 的书写位置')
alert('内部js')
</script>
</body>
2、js书写的位置 - 外部
<body>
<!-- script src= -->
<!-- 如果写了 src 引入了单独的 js 文件,script 中间不要再放代码(会被忽略) -->
<script src="./my.js">
alert('我是script src 中间的代码,会被忽略')
</script>
</body>
3、js书写的位置 - 行内
<body>
<!-- vue 好多行内 js -->
<button onclick="alert('hi')">按钮</button>
</body>
4、js注释和结束符
<script>
// 单行注释
/* 块注释
可换行
*/
; 结束符
</script>
5、js输出语句
document.querySelector('h1').innerHTML = '我是js设置的内容'
找到了就能控制,找不到返回null
6、js输入语句 - prompt
<script>
// 确定 - 保存用户输入的数据到变量
// 取消 - null
let name = prompt('请输入用户名:')
console.log(name)
</script>
// 确定 - 保存用户输入的数据到变量
// 取消 - null
7、变量let、常量const、变量var?
8、交换变量值
<script>
let num1 = 10
let num2 = 20
console.log(num1,num2) // 10 20
// 临时变量 做中间过渡
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1,num2) // 20 10
</script>
9、数据类型
<script>
let num1 = 10
console.log(typeof num1) // number
let name = '小红'
console.log(typeof name) // string
let isLogin = true
console.log(typeof isLogin) // boolean
let num100
console.log(typeof num100) // undefined
let num200 = null
console.log(typeof num200) // object
// 倒计时发验证码 用定时器 -> 类型是对象类型 -> 用变量保存才能清除定时器
</script>
倒计时发验证码 用 定时器 → 类型是对象型 → 用变量保存才能清除定时器
10、拼接字符串,+ 和 模版字符串
<script>
// 输入年龄数字,控制台输出“我今年xx岁了”
let age = prompt('你的年龄')
console.log(`我今年${age}岁了`)
console.log('我今年'+age+'岁了')
</script>
11、算术运算符
<script>
let num1 = 9
let num2 = 2
console.log(num1 + num2) // 11
console.log(num1 - num2) // 7
console.log(num1 * num2) // 18
console.log(num1 / num2) // 4.5
// 判断是否整除
console.log(num1 % num2) // 1
</script>
12、赋值运算符?
+=,-=
13、总结表
2.1、自增自减运算符
<script>
// 自增:先算数再加法运算
let num = 5
// num++
// ++num
console.log(num)
// ++ 在后:先运算,再自增
// let res = num++
// console.log(num,res) // 6 , 5
// ++ 在前:先自增,再运算
let res = ++num
console.log(num, res) // 6 , 6
</script>
2.2、比较运算符
<script>
console.log(3 != '3') // false
console.log(3 !== '3') // true
</script>
== 只判断数值是否相等
=== 既判断类型又判断数值 是否相等
2.3、逻辑运算符
<script>
// 取反
console.log(!false) // true
// &&: 都真才真
// && : 遇到false后面的不执行,输出前面的值
console.log(3 > 5 && 5 < 10) // false
console.log(0 && 10) // 0
console.log(1 && 10) // 10
// || : 遇到true后面的不执行
console.log(3 < 5 || 5 > 10) // true
console.log(3 || 0) // 3
console.log(0 || 3) // 3
</script>
2.4、类型转换转数字
<script>
let num1 = '6'
let num2 = '6.6'
let x = '66px'
// 保留小数转换
console.log(parseFloat(num1)) // 6
console.log(parseFloat(num2)) // 6.6
console.log(parseFloat(x)) // 66
// 取整转换
console.log(parseInt(num1)) // 6
console.log(parseInt(num2)) // 6
console.log(parseInt(x)) // 66
console.log(typeof Number(num1)) // number
console.log(typeof Number(num2)) // number
console.log(typeof Number(x)) // number
</script>