九、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文件,就会自动调用tscts转化为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')

解释:获取页面中idtitleDOM元素。

类型断言

问题:调用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 元素,返回值是一个列表。
推荐:使用 class 选择器。
示例:
letlist=document.querySelectorAll( '.a' )

解释:获取页面中所有class属性包含a的元素。

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