周报02JavaScript语言基础学习与 Aeb APIs学习
7.27
1.引入方式
JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过script标签将 JavaScript 代码引入到 HTML 中，有两种方式：
内部方式：
通过script标签包裹 JavaScript 代码
外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
// demo.js document.write('嗨吼哈嘿！')<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --> <script src="demo.js"></script> </body> </html>如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签内的代码会被忽略！！！
2.输出 、输入
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：alert()、document.wirte()
输入
向prompt()输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
3.变量、常量（const)
变量是计算机中用来存储数据的“容器”，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）
4.声明
声明关键字、变量名（标识）
关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如let的含义是声明变量的，看到let后就可想到这行代码的意思是在声明变量，如let age;
let和var都是 JavaScript 中的声明变量的关键字，推荐使用let声明变量
5.赋值
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
6.数据类型
注：通过typeof 关键字检测数据类型 number,string , boolean, undefined(未定义)
7.模板字符串
外面用``(反引号)，内部用${...变量名}
8.制类型转换
(1)转换为String类型:
将其它数值转换为字符串有三种方式：toString()、String()、 拼串(+）。
(2)转换为Number类型:Number()、parseInt() 和parseFloat()。
Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。
（3）转换为Boolean类型：Boolean()函数
9.案例练习
<!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> 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> // 用户输入（price num address）计算总额 页面打印 let price = +prompt('请输入商品价格：') let num = +prompt('请输入商品数量：') let address = prompt('请输入收货地址：') let total = price*num document.write(` <table> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收货地址</th> </tr> <tr> <td>小米青春版PLUS</td> <td>${price}元</td> <td>${num}</td> <td>${total}元</td> <td>${address}</td> </tr> </table> `) </script> </body> </html>7.28
1.运算符
| 算术运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模（取余数），开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
| 赋值运算符 | 作用 |
|---|---|
| += | 加法赋值 |
| -+ | 减法赋值 |
| *= | 乘法赋值 |
| /= | 除法赋值 |
| %= | 取余赋值 |
| 自增自减运算 | 作用 | 说明 |
|---|---|---|
| ++ | 自增 | 变量自身的值加1，例如: x++ |
| – | 自减 | 变量自身的值减1，例如: x– |
| 比较运算符 | 作用 |
|---|---|
| > | 左边是否大于右边 |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| === | 左右两边是否类型和值都相等（重点） |
| == | 左右两边值是否相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等 |
| 逻辑运算符 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 |
| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
2.语句
分支语句包含：
- if分支语句
- 三元运算符（...?...:...）
3.switch语句
switch(){
case:......break
default:......
}
循环语句：1.while循环 2.for 循环
3.综合案例
乘法表案例
<style> span { display: inline-block; padding: 5px 10px; border:1px solid pink; margin: 2px; border-radius: 5px; } </style> <body> <script> let i = 1 let j = 1 for(i=1;i<10;i++){ for(j=1;j<=i;j++){ document.write(`<span>${i}×${j}=${i*j}</span>`) } document.write('<br>') } </script>4.数组
操作数组数组做为对象数据类型，不但有length属性可以使用，还提供了许多方法：
- push 动态向数组的尾部添加一个单元
- unshift 动态向数组头部添加一个单元
- pop 删除最后一个单元
- shift 删除第一个单元
- splice 动态删除任意单元
下面说一下splice函数：
处理数组的方法很多，javascript splice()算是最强大的了，它可以用于插入、删除或替换数组的元素。
1.删除-用于删除元素，两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数）
2.插入-向数组指定位置插入任意项元素。三个参数，第一个参数（其实位置），第二个参数（0），第三个参数（插入的项）
3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）
7.29
1、函数
声明：完整函数包括关键字（function）、函数名、形式参数、函数体、返回值
调用：使用()调用函数。
函数可以分为具名函数和匿名函数
匿名函数：没有名字的函数,无法直接使用。
函数表达式 // 声明 let fn = function() { console.log('函数表达式') } // 调用 fn()2. 对象
属性：用于描述对象特征的数据信息。多个属性之间使用英文逗号,分隔。
访问：可以通过点号.或方括号[]来获取对象中属性对应的值。
覆盖规则：在同一个对象中，如果出现同名的属性或方法，后面的会覆盖前面的。
ansparent">方法
- Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1 Math.random()- Math.ceil，数字向上取整
// 舍弃小数部分，整数部分加1 Math.ceil(3.4)- Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变 Math.floor(4.68)- Math.round，四舍五入取整
// 取整，四舍五入原则 Math.round(5.46539) Math.round(4.849)- Math.max，在一组数中找出最大的
// 找出最大值 Math.max(10, 21, 7, 24, 13)- Math.min，在一组数中找出最小的
// 找出最小值 Math.min(24, 18, 6, 19, 21)- Math.pow，幂方法
// 求某个数的多少次方 Math.pow(4, 2) // 求 4 的 2 次方 Math.pow(2, 3) // 求 2 的 3 次方- Math.sqrt，平方根
// 求某数的平方根 Math.sqrt(16)8.1
1、DOM（文档对象模型）
操作网页内容
DOM 树：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
DOM 节点：节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
2、获取DOM对象（根据CSS选择器来获取DOM元素）
- querySelector 满足条件的第一个元素
- querySelectorAll 满足条件的元素集合 返回伪数组
- 其他方式
- getElementById
- getElementsByTagName
- document.getElementById 专门获取元素类型节点，根据标签的
id属性查找 - 任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
3.操作元素内容
（1）通过修改 DOM 的文本内容，动态改变网页的内容。
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。innerHTML将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
总结：如果文本内容中包含html标签时推荐使用innerHTML，否则建议使用innerText属性。
（2）实现对属性的修改：
常用属性修改：直接通过属性名修改
控制样式属性：
（1） 修改行内样式style属性，实现对样式的动态修改；（对象.style.样式属性 = 值）
任何标签都有style属性，通过style属性可以动态更改网页标签的样式，如要遇到css属性中包含字符-时，要将-去掉并将其后面的字母改成大写，如background-color要写成box.style.backgroundColor
（2）操作类名(className) 操作CSS（修改样式比较多的情况）
（3）通过 classList 操作类控制CSS：为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加add() 删除remove() 切换类toggle()
<style> .box { width: 200px; height: 200px; color: #333; } .active { color: red; background-color: pink; } </style> </head> <body> <div class="box">123</div> <script> // 获取元素 const box = document.querySelector('.box') //修改 box.classList.add('active') </script> </body>4.随机抽奖案例
<title>年会抽奖</title> <style> .wrapper { width: 840px; height: 420px; background: url(./images/bg01.jpg) no-repeat center / cover; padding: 100px 250px; box-sizing: border-box; } </style> </head> <body> <div class="wrapper"> <strong>传智教育年会抽奖</strong> <h1>一等奖：<span id="one">???</span></h1> <h3>二等奖：<span id="two">???</span></h3> <h5>三等奖：<span id="three">???</span></h5> </div> <script> const person = ['a', 'b', 'c', 'd'] const random = Math.floor(Math.random() * person.length) // console.log(person[random]) const one = document.querySelector('#one') one.innerHTML = person[random] person.splice(random, 1) const random2 = Math.floor(Math.random() * person.length) const two = document.querySelector('#two') two.innerHTML = person[random2] person.splice(random2, 1) const random3 = Math.floor(Math.random() * person.length) const three = document.querySelector('#three') three.innerHTML = person[random3] person.splice(random3, 1) s </script> </body>