在这里我们将通过两个JS案例S1、S2，见识到JS在前端浏览器和后端的工作差异。
S1 单词点读机——哪里不会点哪里
哪里不会点哪里，妈妈再也不用担心的学习。——曾经的小学生学英语点读机广告
目标效果
在这里我们通过分析一个在线单词查询网站，使用HTML+JS代码定制我们个性化单词点读机。
其实是有声音的，因为图片无法播放。
技能目标
- 掌握单词网页URL地址提取和参数分析
- 学会HTML网页设计和JS捕获页面DOM元素绑定事件
- 学会使用JS新建子窗口、偏移层叠窗口、一键关闭窗口等功能增加
操作指引
步骤1 在浏览器控制台查看单词URL地址
进入网站有道词典中播放单词读音，
在浏览器使用F12进入控制台模式和网络选项，复制出单词的播放网址。
步骤2 分析网址URL并在新的页面访问测试
使用浏览器打开 dict.youdao.com/dictvoice?a… 页面，经过观察
很容易发现这个网址中存在两个参数：
audio=单词 表示需要发音的单词
type=1 其中1表示英式发音，2表示美式发音
步骤3 编写基础HTML代码
在文件夹w3中创建文件 S1.html,核心代码如下：
步骤4 编写JS代码
4.1 在HTML代码中增加以下代码。其中：
document.querySelectorAll('ul li')获取所有的li元素存入arr.
arr.forEach((one, i) => { }) 循环每一个元素
4.2 为每个li对象绑定点击事件打开新的子窗口
运行查看HTML网页效果，建议安装Live Server的插件，模仿服务器 运行网站。
步骤5* 功能 子窗口层叠效果
步骤6* 功能扩展 一键关闭窗口
在HTML中增加按钮代码并赋值ID <button id="btn">关闭</button>
S1 爱心扩展作业
目标效果
步骤1 复制代码
复制S1.html代码重命名S1爱心.html。在JS代码中插入以下爱心坐标数据：
let n = 0 //窗口 下标
let pointArr = [ //爱心的坐标
{ x: 200, y: 0 },
{ x: 300, y: 0 },
{ x: 500, y: 0 },
{ x: 600, y: 0 },
{ x: 100, y: 100 },
{ x: 400, y: 100 },
{ x: 700, y: 100 },
{ x: 100, y: 200 },
{ x: 700, y: 200 },
{ x: 200, y: 300 },
{ x: 600, y: 300 },
{ x: 200, y: 400 },
{ x: 600, y: 400 },
{ x: 300, y: 500 },
{ x: 400, y: 500 },
{ x: 500, y: 500 },
]
步骤2 修改代码
步骤3 替换QQ头像测试效果
专业视野
1.计算机专业沟通与表达实训www.bilibili.com/video/BV1eC…
2.信息论先驱——香农www.bilibili.com/video/BV1Xo…
TypeScript常用数据类型
在w3中新建文件 TS数据类型.txt
一、核心语法
let 变量名 :数据类型 = 值
二.常见的数据类型
数值(运算) VS 字符串(文本)
1)数值 number let a:number = 10000
2)字符串 string
let s :string = '你好'
let s :string = "你好"
let s :string = `你好`
3)布尔 boolean
let 布尔:boolean = true
let 布尔:boolean = false
4)未定义 undefined 不知道值是什么
let 甲
let 甲 = undefined
5)空值 null 对象不存在
let 乙:null
let 乙:null = null
三、复合数据类型
1)数组 array
let arr:number[] = [1,2,3]
let arr:string[] = ['甲','乙','丙']
2)对象 object
let 英雄 :object = { name:'陈龙',age :22 }
3)函数 function
function 函数( 参数:类型 ):返回类型 { }
吃饭( 食物:object , 水:object ):boolean { }
S2 三人站队推理游戏————猜猜他们都是谁
操作指引
步骤1 建立S2.ts文件复制以下代码
let arr:string[] = ['刘备','张飞','黄忠','魏延','赵云','诸葛亮','关羽']
let str:string = `
1. ${arr[?]}-${arr[?]}-${arr[?]} 一个姓名正确，位置正确
2. ${arr[?]}-${arr[?]}-${arr[?]} 一个姓名正确，但是位置不正确
3. ${arr[?]}-${arr[?]}-${arr[?]} 两个姓名正确，但是位置都不正确
4. ${arr[?]}-${arr[?]}-${arr[?]} 没有一个姓名正确
5. ${arr[?]}-${arr[?]}-${arr[?]} 一个姓名正确，但是位置不正确
`;
console.log(str )
根据上图任务的位置，在下方?中填入对应的数组下标。
接下来准备运行程序。
.ts类型代码需要编译成js代码才可以运行。
步骤2 编译ts代码为js后执行
因为ts代码无法直接运行，我们需要下载 typescript模块(包含tsc编译工具)
ts文件 → 编译 → js文件
ts文件 → 编译 → js文件
// 第一步 全局安装 typescript 模块
pnpm i -g typescript
！！！！在命令行执行
pnpm setup执行完pnpm setup后:
关闭VScode后重启VScode，重复执行以下三步：
关闭VScode后重启VScode，重复执行以下三步：
关闭VScode后重启VScode，重复执行以下三步：
// 第一步 全局安装 typescript 模块
pnpm i -g typescript
// 第二步 使用tsc命令编译当前TS代码 得到最终的的JS代码
tsc S2.ts
// 第三步 使用 node 运行编译后的JS代码
node S2.js
