TypeScript2024第3周拓展实训——单词点读机和三人站队推理游戏

在这里我们将通过两个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>

专业视野

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)数组 
    let arr:number[] = [1,2,3]
    let arr:string[] = ['甲','乙','丙']    

2)对象
    let 英雄 :object = { name:'陈龙',age :22 }

    函数
    function 函数( 参数:类型 ):返回类型 {  }
    吃饭( 食物:object , 水:object ):boolean {  }

S2 三人站队推理游戏------------猜猜他们都是谁

操作指引

步骤1 建立S2.ts文件复制以下代码

根据上图任务的位置，在下方?中填入对应的数组下标。

接下来准备运行程序。.ts类型代码需要编译成js代码才可以运行。

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 )

步骤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               

步骤3* 观察对比最终js文件和ts的差异

其他参考

1.TypeScript官网

www.typescriptlang.org/zh

2.专业简历

3.疯狂星期四