一、JS初体验
1.基本认识
- JS是一种运行在客户端（浏览器）的编程语言。可以通过控制网页上的内容用来响应用户的各种行为，让网页动起来。
体验：控制台输入代码可以执行JS
const items = document.querySelectorAll('.icon-cover span:nth-child(1)')
items.forEach(item=>{item.click() })
2.内部+外部方式
- 内部：在
body标签里面的最下面 或者head标签里面的最下面 通过script标签包裹 JavaScript 代码 - 外部：一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过
script标签的src属性引入
例：创建
demo.js文件后 → 引入文件：<body><script src="demo.js"></script></body>
3.用JS输出界面和接受用户信息
body里面的内容div等都可以包裹输出，例：<script>document.write('<div><h1>帅！</h1></div>')</script>- tips:里面的内容用反引号包扩
- prompt('这里可以接受用户的输入信息')
- alert('这里弹窗输出信息')
4.运算符
①算数运算符
例： console.log(1 + 2 * 3 / 2) // 4
let num = 10
console.log(num + 10) // 20
console.log(num + num) // 20
②赋值运算符
例：
num += 1 // 当前情况下是等价于 num = num + 1
console.log(num)
③自增、自减运算
注意：
- 只有变量能够使用自增和自减运算符
- ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x
④比较运算符
例：
console.log(3 > 5) // false
console.log(3 < 5) // true
console.log(3 >= 5) // false
console.log(3 >= 3) // true
console.log(3 <= 5) // true
⑤逻辑运算符
⑥运算符优先级
5.类型转换
①转换为数字型
- Number(数据)
- 转换成功返回一个数字类型,转换失败则返回 NaN (例如数据里面包含非数字）
- parseInt(数据)
-
只保留整数
-
如果数字开头的字符串，只保留整数数字 比如 12px 返回 12
- parseFloat(数据)
-
可以保留小数
-
如果数字开头的字符串，可以保留小数 比如 12.5px 返回 12.5
②显示转换
③隐式转换
- 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
6.语句
①分支语句包含：
-
if分支语句（重点）： if(条件表达式) {}
-
三元运算符： a<b?num1:num2
-
switch语句:switch(属性名){case属性值:运行代码 break...}
- 注意：
-
switch case语句一般用于等值判断, if适合于区间判断
-
switchcase一般需要配合break关键字使用 没有break会造成case穿透
-
if 多分支语句开发要比switch更重要，使用也更多
- 例：
②循环语句：
1.while循环 ：while(条件表达式){ //循环体 }
在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码
2.for 循环（重点）：for (初始值; 循环条件; 变量计数) { // 满足条件执行的循环体 }
- 循环三要素：
1.初始值 （经常用变量）
2.循环条件
3.变量计数（常用自增或者自减）
③中止循环
break中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）continue中止本次循环，一般用于排除或者跳过某一个选项的时候
④无限循环
- 1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）
- 2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
