九、TypeScript之Web 开发

一、Web 开发基础

1 概述

下棋游戏（XXOO）是通过Web（网页）开发实现的，因此，我们要学习Web开发的相关知识。

Web 开发涵盖以下内容： HTML 、 CSS 、 JavaScript （ HTML 、 CSS 不是本课程的重点，仅简单讲解）。

三者之间的关系：

（结构）HTML负责创建页面结构。
（样式）CSS负责美化页面结构（相当于化妆）。
（行为）JavaScript负责让页面“动”起来，解锁更多动效。

2 HTML

HTML （ H yper T ext M arkup L anguage ，即：超文本标记语言）负责创建页面结构。

创建第一个 HTML 步骤：

1. 创建 a .html 文件。

2. 快速生成 HTML 基本骨架：在文件中输入英文叹号（ ! ），然后，按 tab 键。

3. 创建按钮标签：在 body 标签中，输入 button ，按 tab 键。

4. 打开 HTML 页面：在文件夹中找到页面文件，双击打开。

注意：页面中可见的内容，写在 body 标签中。

3 CSS

CSS （ C ascading S tyle S heets ，即：层叠样式表）负责美化页面结构。

使用 CSS 的三种方式：

1.style 属性：在 HTML 标签中，通过 style 属性来添加样式。

<p style="color:red;font-size:50px;" > 天青色等烟雨 ...</p>

2.style 标签：在 head 标签中，创建 style 标签。

<style>

/* 标签选择器 */

p{color:red;}

</style>

技巧：先通过选择器获取标签，再设置样式。

常用的 CSS 选择器：

/* 标签选择器 */

p{color:red;}

/*id 选择器 */

# txt{font-size:50px;}/

* 类（名）选择器 –- 推荐 */

. cls{backgroud-color:pink;}

推荐：使用类选择器来给标签添加样式！

3.CSS 文件：创建 .css 文件，将样式放在该文件中，然后在 head 中通过 link 标签引入该文件。

<linkref="stylesheet"href="./index.css"/>

总结：

作用：美化页面结构。

使用方式：

1.HTML 标签的 style 属性。

2.style 标签（在 head 标签中创建）。

3.CSS 文件（在 head 中通过 link 标签引入）。

常用的 CSS 选择器：

p{color:red;}/* 标签选择器 */

#txt{font-size:50px;}/*id 选择器 */

. cls{backgroud-color:pink;}/* 类（名）选择器 –- 推荐 */

4 浏览器中使用JavaScript

JavaScript （简称： JS ），负责让页面 “ 动 ” 起来，为页面添加动效。

使用 JS 的两种方式：

1.script 标签：在 body 标签的最后面，创建 script 标签。

注意： console.log 方法打印的内容，需要在浏览器控制台中查看。

打开控制台（ console ）的方式：在页面中点击鼠标右键，选择“检查”，切换到 Console 面板。

2. 独立 js 文件：创建 index .js 文件，在 body 标签的最后面，通过 script 标签引入。

<scriptsrc="./index.js"></script>

5 自动刷新浏览器

问题：每次修改页面内容后，都要手动刷新浏览器，才能看到修改后的内容。

解决方式：使用 VSCode 的 LiveServer 插件，实现自动刷新浏览器。

作用：监视 html 或引入的 css 、 js 的变化，在保存文件时，该插件就会帮我们自动刷新浏览器。

如何使用？

注意：不再双击打开html页面！

使用方式：在 html 文件中，点击鼠标右键，再点击 OpenwithLiveServer 按钮即可。

注意： html 文件所在的文件夹名称 不要包含中文 ，否则，打开页面失败，插件功能无法生效！

二、浏览器中运行TS

注意：浏览器中只能运行 JS ， 无法直接运行 TS ，因此，需要将 TS 转化为 JS 然后再运行。

浏览器中运行 TS 的步骤：

1. 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。

2. 在页面中，使用 script 标签引入生成的 js 文件（注意是 js 文件）。

<scriptsrc="./index.js"></script>

问题：每次修改 ts 文件后，都要重新运行 tsc 命令将 ts 转化为 js 。

解决方式：使用 tsc 命令的监视模式。

tsc --watch index.ts

解释：--watch表示启用监视模式，只要重新保存了ts文件，就会自动调用tsc将ts转化为js。

三、DOM 操作

1 概述

DOM （ D ocument O bject M odal ）：文档对象模型。

DOM 是浏览器提供的（ 浏览器特有 ），专门用来 操作网页内容 的一些 JS 对象。

目的：让我们可以使用 JS/TS 代码来操作页面（ HTML ）内容，让页面“动”起来，从而实现 Web 开发。

HTML ：超文本标记语言，用来创建网页结构。

两者的关系：浏览器根据 HTML 内容创建相应的 DOM 对象，也就是：每个 HTML 标签都有对应的 DOM 对象

。

学习四个常用 DOM 操作： 1 获取 DOM 元素（ DOM 对象） 2 设置样式 3 设置内容 4 绑定（解绑）事件。

DOM 操作的套路（技巧）：先找人后做事。

● 找人：获取 DOM 元素。

●做事：设置样式、内容、绑定（解绑）事件。

document.title='等你下课'

比如：将 p 标签中的内容修改为：天青色等烟雨而我在等你。

步骤： 1 获取 p 元素 2 设置内容。

总结：

DOM 是浏览器提供的（ 浏览器特有 ），专门用来 操作网页内容 的一些 JS对象（API ）。

通过 DOM 操作，可以让 JS/TS 控制页面（ HTML ）内容，让页面“动”起来，从而实现 Web 开发。

HTML 标签和 DOM 的关系：每个 HTML 标签都有对应的 DOM 对象。

DOM 操作的套路（技巧）：先找人后做事。

2 获取元素

常用方法有两个：

● querySelector(selector)作用：获取某一个 DOM 元素。

● querySelectorAll(selector)作用：同时获取多个 DOM 元素。

2.1 获取一个DOM元素：

document.querySelector(selector)

document 对象：文档对象（整个页面），是操作页面内容的入口对象。

selector 参数：是一个 CSS 选择器（标签、类、 id 选择器等）。

作用：查询（获取）与选择器参数匹配的 DOM 元素，但是，只能获取到第一个！

推荐：使用 id 选择器（唯一）。

lettitle=document.querySelector('#title')

解释：获取页面中id为title的DOM元素。

类型断言

问题：调用querySelector()通过id选择器获取DOM元素时，拿到的元素类型都是Element。

因为无法根据 id 来确定元素的类型，所以，该方法就返回了一个宽泛的类型：元素

（Element ）类型。不管是h1 还是 img 都是元素。

导致新问题：无法访问 img 元素的 src 属性了。

因为： Element 类型只包含所有元素共有的属性和方法（比如： id 属性）。

解决方式：使用类型断言，来手动指定 更加具体 的类型（比如，此处应该比 Element 类型更加具体）。

语法：

值as更具体的类型

比如：

letimg=document.querySelector('#image') as HTMLImageElement

解释：我们确定 id="image" 的元素是图片元素，所以，我们将类型指定为 HTMLImageElement 。

技巧：通过 console.dir() 打印 DOM 元素，在属性的最后面，即可看到该元素的类型。

总结：

类型断言：手动指定 更加具体（精确） 的类型。

使用场景：当你比 TS 更了解某个值的类型，并且需要指定更具体的类型时。

//document.querySelector() 方法的返回值类型为： Element

// 如果是 h1 标签：

lettitle=document.querySelector('#title') as HTMLHeadingElement

// 如果是 img 标签：

letimage=document.querySelector('#image') as HTMLImageElement

技巧：通过console.dir()打印DOM对象，来查看该元素的类型。

2.2 获取多个DOM元素：

document.querySelectorAll(selector)

作用：获取所有与选择器参数匹配的 DOM 元素，返回值是一个列表。

3 操作文本内容

读取：

dom.innerText

设置：

dom.innerText='等你下课'

注意：需要通过类型断言来指定 DOM 元素的具体类型，才可以使用 innerText 属性。

注意：设置内容时，会 覆盖原来的内容 。如何实现追加内容（比如，青花瓷  青花瓷 – 周杰伦）？

dom.innerText=dom.innerText+'– 周杰伦 '

// 简化

dome.innerText+='– 周杰伦 '

4 操作样式

两种方式：

● dom. style 属性：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等）。

●dom. classList 属性：类样式操作，也就是操作类名，比如，添加类名、移除类名等。

4.1 style 属性（行内样式）

读取：

dom.style.样式名称

设置：

dom. style . 样式名称 = 样式值

说明：所有的样式名称都与 CSS 相通，但命名规则为驼峰命名法。

dom.style.fontSize='30px'

dom.style.display='none'

4.2 classList 属性（类样式）

包含三个常用方法：添加、移除、判断是否存在。

添加：

dom. classList.add ( 类名 1, 类名 2,...)

参数表示：要添加的类名，可以同时添加多个。

比如：

<pclass="a"></p>

dom.classList.add('b','c') // 添加 class 样式 ==>class="abc"

移除：

dom. classList.remove ( 类名 1, 类名 2,...)

参数表示：要移除的类名，可以同时移除多个。

比如：

<pclass="abc"></p>

dom.classList.remove('a','c') // 移除 class 样式 ==>class="b"

判断类名是否存在：

lethas=dom.classList .contains ( 类名 )

参数表示：要判断存在的类名。

比如：

<pclass="b"></p>

dom.classList.contains('a') //false

dom.classList.contains('b') //true

总结：

类样式（ classList ）的操作有三种：

// 添加

dom.classList.add('a','b')

// 移除

dom.classList.remove('b','c')

// 判断是否存在

lethas=dom.classList.contains('a')

5 操作事件

在浏览网页时，我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作，来使用网站提供的功能。

如果要让我们自己实现这样的功能，就需要通过操作事件来实现了。

实际上，移入鼠标、点击鼠标、敲击键盘等，都是常见的 DOM 事件。

操作事件的两个方法：

●addEventListener 添加（绑定）事件。

●removeEventListener移除（解绑）事件。

1.addEventListener添加事件

作用：给 DOM 元素添加事件。

dom. addEventListener ( 事件名称 , 事件处理程序 )

事件名称：字符串，比如： 'click' （鼠标点击事件）、 'mouseenter' （鼠标进入事件）。

事件处理程序：回调函数，指定要实现的功能，该函数会在触发事件时调用。

示例：鼠标点击按钮，打印内容。

btn.addEventListener('click',function(){

console.log(' 鼠标点击事件触发了 ')

})

事件对象（ event ），是事件处理程序（回调函数）的参数。

表示：与当前事件相关的信息，比如：事件类型（ type ）、触发事件的 DOM 元素（ target ）等。

btn.addEventListener('click',function( event ){

console.log(event.type) //click

console.log(event.target) //btn 元素

})

2.removeEventListener移除事件

作用：移除给 DOM 元素添加的事件，移除后，事件就不再触发了。

dom. removeEventListener ( 事件名称 , 事件处理程序 )

事件名称：同添加事件的第一个参数。

事件处理程序： 必须要跟添加事件时的事件处理程序是同一个 ，否则无法移除！

正确方式：

function handleClick (){}

btn.addEventListener('click', handleClick )

btn.removeEventListener('click', handleClick )

说明：添加和移除事件时，事件处理程序是同一个，都是函数 handleClick 。

错误演示：

btn.addEventListener('click',function(){})

btn.removeEventListener('click',function(){})

注意：以上两个函数虽然长的一样，却是不同的函数（双胞胎，不是同一个人）。

如果事件只需要触发一次，可以在添加事件时处理。

处理方式：传入第三个参数，将 once 属性设置为 true 。

btn.addEventListener('click',function(){}, {once:true} )

once ：如果值为 true ，会在触发事件后，自动将事件移除，达到只触发一次的目的。

移除事件总结：

当 DOM 元素的事件不再使用时，就可以通过 removeEventListener 方法移除事件。

注意： 添加和移除的事件处理程序必须是同一个 ，否则无法移除！

function handleClick (){}

btn.addEventListener('click', handleClick )

btn.removeEventListener('click', handleClick )

如果事件只需要触发一次，可以在添加事件时，通过once属性来实现。

btn.addEventListener('click',function(){},{once:true})

函数声明形式的事件处理程序说明

1.可以先使用函数，再声明函数。

btn.addEventListener('click',handleClick)

functionhandleClick(){}

原因：函数声明在当前ts文件中的任意位置都有定义。

//1 先调用函数

fn()

//2 再声明函数

functionfn(){}

2.使用事件对象参数时，应该指定类型注解，否则，访问事件对象的属性时没有任何提示。

btn.addEventListener('click',handleClick)

functionhandleClick(event :MouseEvent ){

console.log(event.target)

}

技巧：使用原始方式（匿名回调函数）查看参数类型。

总结：

函数声明在当前 ts 文件中的任意位置都有定义。

btn.addEventListener('click',handleClick)

functionhandleClick(){}

fn() //先调用函数

functionfn(){} // 再声明函数

在函数声明形式的事件处理程序中，使用事件对象时，应该指定参数类型。

btn.addEventListener('click',handleClick)

functionhandleClick(event :MouseEvent ){}

想要视频教学？

请点击下方链接吧！(本文章归于本人学习笔记，如有侵权必删)

黑马程序员前端TypeScript教程，TypeScript零基础入门到实战全套教程_哔哩哔哩_bilibili