TypeScript之Web开发

于 2022-11-17 17:03:18 发布
阅读量1k 收藏 4
点赞数
分类专栏： 2023年前端—入门到精通 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itcast_cn/article/details/127906289
版权

​​​​​​1. 1 概述

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

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

三者之间的关系：

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

 

1.2 HTML

HTML（Hyper Text Markup Language，即：超文本标记语言）负责创建页面结构。

创建第一个 HTML 步骤：

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

1. 创建 a.html 文件。

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

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

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

<div></div> 布局标签（独占一行）
<p></p> 段落标签（存放文字）
<h1></h1> 标题标签
<button></button> 按钮标签
<img src="" /> 图片标签
...

1.3 CSS

CSS（Cascading Style Sheets，即：层叠样式表）负责美化页面结构。

使用 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 标签引入该文件。
<link ref="stylesheet" href ="./index .css " />

1.4 浏览器中使用 JavaScript

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

使用 JS 的两种方式：

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

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

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

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

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

1.5 自动刷新浏览器

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

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

1.如何使用？

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

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

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

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

2. 浏览器中运行TS

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

浏览器中运行 TS 的步骤：

  • 1. 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。
  • 2. 在页面中，使用 script 标签引入生成的 js 文件（注意是 js 文件）。
<script src="./index.js"></script>
问题：每次修改 ts 文件后，都要重新运行 tsc 命令将 ts 转化为 js 。
 
解决方式：使用 tsc 命令的 监视模式 。 
tsc --watch index.ts
解释： --watch 表示启用监视模式，只要重新保存了 ts 文件，就会自动调用 tsc 将 ts 转化为 js 。

3. DOM 操作

3.1 概述

DOM（Document Object Modal）：文档对象模型。

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 设置内容。

3.2 获取元素

常用方法有两个：

  •  querySelector(selector) 作用：获取某一个 DOM 元素。
  •  querySelectorAll(selector) 作用：同时获取多个 DOM 元素。

1. 获取一个 DOM 元素：

document.querySelector(selector)

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

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

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

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

let title = document.querySelector('#title')

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

类型断言

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

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

不管是 h1 还是 img 都是元素。

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

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

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

语法：

值 as 更具体的类型

比如：

let img = document.querySelector('#image') as HTMLImageElement

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

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

2. 获取多个 DOM 元素：

document.querySelectorAll(selector)

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

推荐：使用 class 选择器。

示例：

let list = document.querySelectorAll('.a')

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

3.3 操作文本内容

读取：

dom.innerText

设置：

dom.innerText = '等你下课'

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

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

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

// 简化

dome.innerText += ' – 周杰伦'

3.4 操作样式

两种方式：

  •  dom.style 属性：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等）。
  •  dom.classList 属性：类样式操作，也就是操作类名，比如，添加类名、移除类名等。

 

1. style 属性（行内样式）

读取：

dom.style.样式名称

设置：

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

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

dom.style.fontSize = '30px'

dom.style.display = 'none'

2. classList 属性（类样式）

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

添加：

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

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

比如：

<p class="a"></p>

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

移除：

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

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

比如：

<p class="a b c"></p>

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

判断类名是否存在：

let has = dom.classList.contains(类名)

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

比如：

<p class="b"></p>

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

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

3.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，会在触发事件后，自动将事件移除，达到只触发一次的目的。

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

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

btn.addEventListener('click', handleClick)

function handleClick() {}

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

// 1 先调用函数

fn()

// 2 再声明函数

function fn() {}

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

btn.addEventListener('click', handleClick)

function handleClick(event: MouseEvent) {

    console.log(event.target)

}

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

 往期文章发布内容：

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~

黑马程序员官方
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
自学前端需要达到什么水平才能去找工作？来看看这套前端学习路线图
11-26 2万+
自学前端需要达到什么水平？当然是水平越高，越容易找到工作。在竞争这么激烈的2020年，就需要更加的努力，充实自己，让自己不被代替！看了好多的回答，大家都是再说学到什么水平能找到工作，我就来分享干货吧！祝看到这篇干货的小伙伴，工作步步高升！黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）第一阶段：HTML5+css配套学习视频：前端小白零基础入门HTML5+CSS3完整视频：http://yun.itheima.co.
博客
软件测试全套教程，2020年全新软件测试学习路线图
05-04 1万+
2020年全新的软件测试学习路线图来袭，零基础入行入职必备学习教程，高质量免费资源在线学习！还在等什么，想学习软件测试的小伙伴，快来点击进入学习状态吧！一、基础入门课程亮点1. 熟悉计算机相关概念。2. 掌握基础的测试理论。3. 熟练掌握HTML常用标签input。4. 掌握使用CSS选择器。配套学习视频：软件测试基础入门之HTML基础​软件测试基础入门......
博客
Java多线程编程，来看这篇就够了！全新Java多线程教程！
06-25 6933
对于Java程序员来讲，Spring全家桶几乎可以搞定一切，Spring全家桶便是精妙的招式，多线程就是内功心法很重要的一块，线上出现性能问题，多线程更是不可回避的问题。因此多线程基础知识对于高级程序员的重要性不必言语！很多公司在面试高级程序员时候，多线程相关知识也必定是考核的标准之一。那我们为什么要学习多线程呢？掌握Java多线程可以：应对面试、优化之路、深入理解。应对面试在面试中，求职...
博客
QT教程，QT从入门到实战教程完整版
06-17 7万+
Qt是一个跨平台开发框架，可以使用C++和Qml开发，同时它又不仅仅只是开发框架，它也是一种技术策略，可以让你快速、高效地设计、开发、部署和维护软件，同时在所有设备上提供无缝的用户体验。因而，对于C/C++工程师而言，QT是必须要学习的一个跨平台开发框架，今天分享一个QT教程！课程亮点1，知识体系完备，内容精炼2，脉络清晰，讲解过程把握知识主线。3，结合工作实践及分析应用，培养...
博客
软件测试人员应该如何介绍自己测试过的项目
05-09 4万+
测试人员在找工作的过程中，通常有一个问题是很难绕开的。就是要如何向别人介绍自己之前做过的项目。下面我们就这个问题简单的做一些分析。要解决这个问题，大体上可以分为如下几个步骤：1、对项目进行基本介绍2、说明自己负责测试的模块3、针对部分模块展开进行说明一. 对项目进行基本介绍以下就以一个简单的项目进行介绍说明：最近测试的Tpshop项目是一个B/S架构的Web项...
博客
软件测试全套教程，软件测试自学线路图
07-09 19万+
软件测试：软件测试是为了发现程序中的错误而执行程序的过程。通俗的说，软件测试需要在发布软件之前，尽可能的找软件的错误，尽量避免在发布之后给用户带来不好的体验，并要满足用户使用的需求。现在市面上这么多软件，每个软件背后都有软件测试工程师的功劳，这也造就了软件测试行业前景非常好，今天我就分享一下自学线路图，及全套教程！软件测试学习线路图点击查看大图第一阶段：该...
博客
Python入门教程完整版（懂中文就能学会）
09-28 18万+
今天本宝宝给大家带来了干货，Python入门教程完整版，完整版啊！完整版！言归正传，我来给大家介绍一下这套教程，希望每个小伙伴都沉迷学习，无法自拔！本套教程学习时间15天1-3天内容：为Linux基础命令4-13天内容：为Python基础教程14-15 天内容：为飞机大战项目演练第一阶段（1-3天）：该阶段首先通过介绍不同领域的三种操作系统，操作系统的发展简史以及...
博客
Java学习路线图，全套Java基础视频教程
09-07 23万+
深知广大爱好Java的人学习是多么困难，没视频没资源，上网花钱还老被骗。为此我呕心沥血整理了这套Java教程，不管你是不懂电脑的小白，还是已经步入开发的大牛，这套路线路你都值得拥有，小白看上面的视频可以成功学会Java并且顺利工作，大神看了上面的资源肯定会谆谆乐道，教程的宗旨就是分享，专业，便利，让喜爱Java的人，都能平等的学习。首先建立好开发环境非常重要，工欲善其事，必先利其器。做任何开发.........
博客
千字Java学习路径，超全！从零基础到精通~
07-01 430
Java并发编程实践》是并发编程的里程碑著作，从并发编程的基本理论入手，逐步介绍设计Java并发程序时的重要设计原则、设计模式及思维模式，使开发人员能够快速领悟Java并发编程要领，迅速构建大规模并发应用程序。这本书详细讲解了Java SE的所有内容及其原理，如果你能彻底掌握这本书，将会为你未来的技术进阶打下坚实的基础。《Java核心技术卷2：高级特征》全面覆盖了Java技术的高级主题，对Java技术的阐述精确到位，叙述方式深入浅出，并包含大量示例，帮助读者充分理解Java语言及其类库的相关特性。
博客
Java若依框架入门，初始化项目、Maven构建等配置
06-28 1012
这些版本的框架为开发者提供了多样化的选择，无论是传统的Web应用、现代化的前后端分离应用，还是复杂的微服务架构和跨平台的移动端应用，都能找到合适的若依框架版本来满足开发需求。
博客
Python学习指南：6个步骤快速上手
06-27 995
Python 是一种高级解释型编程语言，由 Guido van Rossum 创建，首次发布于1991年。它注重代码的可读性，其语法允许程序员用比C++或Java更少的代码行来表达相同的概念。Python 支持多种编程范式，包括过程式编程、面向对象编程和函数式编程。简单来说，这意味着它非常灵活，可以用不同的方式编写代码，无论是为计算机设定一系列任务（过程式），创建事物或概念的数字模型（面向对象），还是像处理数学问题一样处理代码（函数式）。
博客
鸿蒙开发培训，5000家App已加入鸿蒙生态，华为鸿蒙设备增长至9亿
06-24 421
在2024年华为开发者大会上，华为终端BG CEO余承东宣布，目前鸿蒙生态设备已超过9亿，HarmonyOS开发者人数达到了254万，鸿蒙学堂的参与人次达到了435万。余承东指出，鸿蒙原生应用已进入全面冲刺阶段，并呼吁更多开发者加入鸿蒙生态。华为也承诺将持续提供完善的开发工具及资金扶持。鸿蒙生态的快速发展为开发者提供了广阔的前景和机遇。那么，如何投身鸿蒙技术，成为一名合格的鸿蒙开发者呢？以下是详细的学习路径，帮助你从基础到进阶，逐步掌握鸿蒙开发的核心技术。
博客
Python入门，Python爬虫基础知识
06-19 561
网络爬虫（Web Crawler 或 Spider）是一种在互联网上自动获取信息的程序。它根据设定的规则，从互联网上下载网页、图片、视频等内容，并提取有用信息进行处理。简而言之，网络爬虫就像是在互联网上自动“爬行”的程序，从一个或多个初始网页开始，读取网页内容，找到其中的链接，再通过这些链接找到下一个网页，如此循环，直到抓取完所有目标网页。网络爬虫的应用非常广泛，如搜索引擎的网页抓取、数据挖掘、网站监测等。例如，搜索引擎通过爬虫技术抓取网页信息，建立索引数据库，以便用户进行关键词搜索时能快速找到相关信息。
博客
Java入门，深入理解Java平台及其关键特性
06-19 492
Java的标志性特点是“一次编写，到处运行”（Write once, run anywhere）。通过字节码和Java虚拟机（JVM），Java可以在不同的操作系统和硬件上运行，这种跨平台的抽象屏蔽了底层的细节，使得Java程序具备了很强的可移植性。
博客
5分钟上手Python爬虫，轻松掌握爬虫技巧
06-17 1252
本文的重点在于引导读者初步掌握爬虫技术。入门并不难，但在实际操作中可能会遇到一些困难，比如有些网站不允许直接访问，需要登录或进行人机验证等。因此，建议先从爬取一些新闻资讯类的网站开始，因为这样相对容易。涉及用户支付等敏感信息的网站就不那么容易获取了。因此，在入门阶段，不要选择太复杂的网站，先尝试简单的爬取。一旦理解了基本原理，遇到问题时可以考虑添加组件或使用第三方库来解决。# 初始化彩色输出init()# 定义颜色# 打印初始信息。
博客
Java面试重点知识体系解析及高效复习指南
06-12 377
Java 后端的知识体系非常庞大，在准备面试时，需要优先抓住重点进行复习。
博客
鸿蒙开发培训，5分钟学会鸿蒙开发语言关键知识点
06-11 813
ArkTS 是 HarmonyOS 的主要开发语言。它在 TypeScript 的基础上进行了优化和扩展，保留了 TypeScript 的优点，同时屏蔽了其缺点，并与 ArkUI 框架一起构建了鸿蒙应用。本文将介绍 ArkTS 的相关内容。基于上述需求，ArkTS 强制使用静态类型。这意味着在 ArkTS 中，声明变量、函数参数和返回值时必须指定类型，并在编译时进行严格的类型检查。
博客
深入理解三大经典算法：快速排序、动态规划背包问题和Dijkstra算法
06-06 374
很多业务场景需要算法，成熟的算法可以提高效率，减少不必要出现的问题，规避风险！今天给大家总结了3个在实现业务场景中使用到的算法，分享给你。
博客
Java学习：Java中的常见数据结构以及其示例代码
06-05 283
这些示例代码展示了如何使用Java中的一些常见数据结构。你可以根据具体需求进行修改和扩展，以适应不同的应用场景。了解和熟练使用这些数据结构，将帮助你编写出更高效、可维护的代码。在Java编程中，了解和掌握常见的数据结构是至关重要的。
博客
掌握Java的80%：面向对象与并发编程
06-04 673
Java作为一种广泛使用的编程语言，其强大之处在于其面向对象的特性和对并发编程的卓越支持。作为一名程序员，深刻理解Java的面向对象概念、集合框架、多线程与并发编程，以及Java虚拟机（JVM）的基础知识，对于编写高效、可维护的代码至关重要。本文将引导你快速掌握这些核心概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值