前端语言串讲 | 青训营笔记

前端言语的根本功用

前端言语三件套别离指 HTML、CSS 和 JavaScript，它们是构建网页的根本组成部分。

1. HTML（Hypertext Markup Language）是用来描述文档结构和语义的符号言语。经过运用一系列的标签和特色，能够将页面划分成不同的区域，并为这些区域增加文本、图片、链接等内容。HTML 是网页中的骨架，能够方便地搭建出网页根底结构。

2. CSS（Cascading Style Sheets）是用于设置网页款式的款式表言语。经过界说各种款式规矩，如字体、色彩、布局等，能够使得网页到达某种漂亮而一致的规划作用。CSS 让开发者专注于网页的视觉作用和交互作用，进步了用户体会。

3. JavaScript 是一门动态的脚本言语，具有强壮的功用和丰厚的 API 库。JavaScript 能够为网页增加呼应式的交互性，比如与用户进行交互、获取并修正页面元素的内容、处理用户提交的表单数据、与后端进行数据交互等。在现代网页中，JavaScript 现已成为不可或缺的言语。

三者合作起来，构成了一个完整的网页。HTML 界说了网页的结构和内容，CSS 帮助咱们完成网页的外观和款式，而 JavaScript 则担任为网页增加动态交互和行为。

HTML

HTML是一种符号言语，用于创立网页的结构和内容。

HTML代表超文本符号言语（Hypertext Markup Language），它运用一系列符号来指示浏览器怎么显现页面上的内容。

经过将标签和特色放置在一个文档中，能够界说文本、图画、链接、多媒体和其他页面元素的格局和位置。

HTML还支撑多种新颖的元素和API，使开发人员能够创立更丰厚、交互性更强的Web应用程序。

CSS

CSS是一种用于网页款式规划的言语，代表层叠款式表（Cascading Style Sheets）。经过界说各种款式规矩和特色，能够操控网页上一切元素的外观、布局和交互作用。

CSS被广泛用于规划网站、Web应用程序和移动应用程序

它的特色包含简洁性、可重用性、可扩展性和可维护性。与HTML结合运用，CSS能够更好地阻隔内容和款式，进步代码的可读性和可维护性，一起也为用户供给了更好的视觉体会。

CSS 挑选器

以下是一些常用的CSS挑选器代码示例：

1. 元素挑选器，例如挑选一切p标签，并设置字体大小为14px：

p {
  font-size: 14px;
}

2. 类挑选器，例如挑选带有“red-text”类的元素，并将字体色彩设置为红色：

.red-text {
  color: red;
}

3. ID挑选器，例如挑选ID为“header”的元素，并将布景色彩设置为灰色：

#header {
  background-color: gray;
}

4. 后代挑选器，例如挑选ul下面一切li元素，并将列表款式设置为无序：

ul li {
  list-style: none;
}

5. 相邻兄弟挑选器，例如挑选紧接在h1元素后面的p元素，并将字体大小设置为18px：

h1 + p {
  font-size: 18px;
}

6. 子元素挑选器，例如挑选ul下面直接子元素li，并将文字色彩设置为蓝色：

ul > li {
  color: blue;
}

7. 特色挑选器，例如挑选一切href特色值以“https”开头的链接，并将色彩设置为绿色：

a[href^="https"] {
  color: green;
}

8. 伪类挑选器，例如挑选鼠标悬停在按钮上时的状况，并将布景色彩设置为橙色：

button:hover {
  background-color: orange;
}

JavaScript

JavaScript是一种用于Web开发的高档编程言语。

它能够经过HTML和CSS网页上完成交互性和动态作用。

JavaScript作为一种根据目标和事情驱动的言语，供给了各种特性和API，如变量、函数、条件语句、循环语句、数组、面向目标编程、DOM操作、AJAX、Canvas等。

这些特性答应开发者创立各种动态作用，为用户供给更好的体会。另外，JavaScript还被广泛应用于服务器端、桌面应用程序和游戏开发。

JavaScript 的开展前史

JavaScript 的开展前史能够追溯到 995 年，当时 Netscape 公司的工程师 Brendan Eich 在只是10 天的时间内规划出了这门言语。之后，Netscape 将它命名为 JavaScript，并将其作为一种脚本言语嵌入到其 Navigator 浏览器中。

在接下来的几年中，JavaScript 迅速流行起来，并被其他浏览器厂商选用。1997 年，JavaScript 发布了第一个版别的规范 ECMAScript，它界说了 JavaScript 的语法和根本功用，并被广泛运用。

随着互联网的不断开展，Web 应用程序越来越杂乱，JavaScript 也逐步开展成一种功用强壮、可扩展性好的编程言语。2009 年，Node.js 项目发布，使得 JavaScript 能够脱离浏览器环境，进而开发服务器端应用程序。

2010 年，jQuery 框架发布，它大大简化了 JavaScript 开发的进程，并使得它变得更简略上手。此外，AngularJS、Vue.js 等前端框架和库的出现，也让 JavaScript 开发变得愈加高效和便捷。

近年来，JavaScript 生态体系的开展十分迅速，出现了很多新的技能和工具，如 React、Webpack、Babel 等，它们为 JavaScript 的开展带来了新的机遇和应战。现在，JavaScript 现已成为最流行的编程言语之一，被广泛应用于 Web 开发、移动开发、服务器端开发、人工智能等范畴。

JavaScript的每个版别说明

1. JavaScript 1.0：1995 年发布，并被 Netscape Navigator 2.0 浏览器选用。这个版别包含了最初的 JavaScript 完成，并具有根本的语法和目标模型。
2. JavaScript 1.1：1996 年发布，是第一个规范化的 JavaScript 版别。它引进了命名函数和正则表达式等新特性。
3. JavaScript 1.2：1997 年发布，引进了一些新的特性，如对数组和日期的支撑、动态图画替换（DHTML）、图片映射和框架等。
4. ECMAScript 1：1997 年发布，是第一个 JavaScript 规范。它规定了 JavaScript 的语法、数据类型、操作符等，为后续的 JavaScript 版别奠定了根底。
5. ECMAScript 2：1998 年发布，增加了一些新的特性，如反常处理、更完整的正则表达式支撑和新的数组办法等。
6. ECMAScript 3：1999 年发布，是现在广泛运用的 JavaScript 版别。它引进了 try/catch 反常处理、switch 语句中的 fall-through、正则表达式字面量和 JSON 目标等新特性。
7. ECMAScript 4：该版别方案于 2008 年发布，但因为争议太大，最终被放弃。
8. ECMAScript 5：2009 年发布，引进了一些新的特性，如严格形式、JSON 目标的增强和 Object.create() 办法等。
9. ECMAScript 6（也称为 ES2015）：2015 年发布，是一次重要的更新。它引进了诸如箭头函数、类、模板字符串、解构赋值、let/const 块级作用域变量等新特性，使得 JavaScript 愈加现代化、易读易写。
10. ECMAScript 7（ES2016）、ECMAScript 8（ES2017）、ECMAScript 9（ES2018）、ECMAScript( ES2019 均为相对较小的更新，引进了一些新特性，如 async/await、Object.values()、Promise.finally()、Array.flat() 和 Array.flatMap() 等。

JavaScript 里边的数据类型包含原始数据类型和目标数据类型，别离是：

1. 原始数据类型：包含 Undefined、Null、Boolean、Number、String 和 Symbol 六种类型。

   • Undefined 类型表明未界说或不存在的值。
   • Null 类型表明一个空目标指针。
   • Boolean 类型表明逻辑上的 true 或 false。
   • Number 类型表明数值，能够是整数或小数，也能够用科学计数法表明。
   • String 类型表明字符串，表明一组由零个或多个 Unicode 字符组成的字符序列。
   • Symbol 类型表明独一无二的值，用于创立唯一的目标特色名。

2. 目标数据类型：包含 Object、Array、Date、RegExp、Function 等。

   • Object 是一个键值对的集合，其间每个键都是一个字符串（或 Symbol），对应的值能够是任何类型。Object 是 JavaScript 中的中心数据类型之一。
   • Array 是一组有序的值的集合，运用数字索引来拜访每个元素。在 JavaScript 中数组本质上也是目标，但它们是具有特殊行为和特色的目标。
   • Date 表明日期和时间，能够存储毫秒级的时间戳，并供给了一些办法进行日期格局化和计算等操作。
   • RegExp 表明正则表达式，它用于匹配字符串中的形式。
   • Function 是一类特殊的目标，它能够被调用并履行预界说的代码块。

以上是 JavaScript 数据类型的简略概述。需求留意的是，在 JavaScript 中，一切数据类型都是可变的，也就是说，变量的值能够在运转时改动它所引用的目标或原始值，这一点与某些强类型言语不同。

下面举几个简略的 JavaScript 代码示例来说明不同数据类型的用法。

原始数据类型

// Undefined
let x;
console.log(x); // undefined
// Null
let y = null;
console.log(y); // null
// Boolean
let a = true, b = false;
if (a && !b) {
  console.log('True');
}
// Number
let c = 3.14;
console.log(c.toFixed(2)); // 3.14
// String
let str = 'Hello, world!';
console.log(str.length); // 13
// Symbol
const sym1 = Symbol();
const sym2 = Symbol('foo');
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(foo)

目标数据类型

// Object
let person = { name: 'Alice', age: 18 };
console.log(person.name); // Alice
// Array
let arr = [1, 2, 3];
console.log(arr[0]); // 1
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
// Date
let date = new Date();
console.log(date.toLocaleDateString()); // 2022/12/01
// RegExp
let pattern = /JavaScript/gi;
let matchResult = pattern.exec('JavaScript is great!');
console.log(matchResult[0]); // JavaScript
// Function
function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 3

html,css,js 怎么在浏览器编译运转的

HTML、CSS 和 JavaScript 是构成 Web 页面的三个根本部分，它们在浏览器中的运转方法如下：

1. HTML 的运转方法

当浏览器接收到服务器回来的 HTML 文件时，它会对文件进行解析，并将其间的符号（例如等）转换为浏览器能够了解和展现的内容。然后，浏览器会按照 HTML 文件中所界说的结构和款式来烘托页面。

2. CSS 的运转方法

与 HTML 类似，浏览器也会解析 HTML 文件中的 CSS 款式表，并将其应用于现已解析的 HTML 元素上。CSS 款式表中界说了网页元素的布局、色彩、字体等特色，使得网页愈加漂亮和易读。

3. JavaScript 的运转方法

当浏览器解析完 HTML 文件和 CSS 款式表后，它会履行 HTML 中嵌入的 JavaScript 代码，或引用外部 JavaScript 文件。JavaScript 担任完成网页的交互逻辑，例如呼应用户输入、改动网页内容、发送网络请求等。浏览器经过 JavaScript 引擎来解说和履行 JavaScript 代码，例如 Chrome 浏览器运用 V8 引擎。

JavaScript 代码能够拜访和修正 HTML 和 CSS 元素的特色，使得网页愈加动态和丰厚。一起，JavaScript 还能够监听事情（如鼠标点击、键盘输入等）和与后端进行数据交互，然后完成愈加杂乱的应用程序。

总体来说，HTML、CSS 和 JavaScript 三者相互合作，使得浏览器能够加载和显现网页内容，并供给丰厚的交互功用。

浏览器V8 运转机制

V8 是 Google 开发的高功用 JavaScript 引擎，用于解说和履行 JavaScript 代码。它是 Chrome 浏览器中默认的 JavaScript 引擎，也被 Node.js 等渠道所选用。

JavaScript本质上也是一段文本，需求经过解说器才能够运转

1. Source code：JavaScript 源代码作为 V8 引擎的输入。
2. Parser：V8 引擎将 JavaScript 源代码解析成``一个笼统语法树（Abstract Syntax Tree，简称 AST）。AST 是源代码的一种树状表明，其间每个节点表明一个源代码中的语法结构（如变量声明、函数调用等）。
3. AST：生成的笼统语法树将用于接下来的编译和优化进程。
4. Ignition：V8 引擎中的 Ignition 是一个解说器（Interpreter），它担任将 AST 转换为字节码（Bytecode）。字节码是一种中间表明，比源代码更挨近机器代码，但仍具有渠道无关性。
5. Bytecode Execute：Ignition 解说器履行字节码，完成 JavaScript 源代码的功用。在履行字节码的进程中，V8 会收集代码的运转时信息（如类型信息等），用于后续的优化进程。
6. Feedback：V8 引擎收集的运转时信息（如变量类型、函数调用频率等）称为反应（Feedback）。这些信息将用于指导后续的即时编译（JIT）进程，生成更高效的机器代码。
7. TurboFan：V8 引擎中的 TurboFan 是一个即时编译器（Just-In-Time Compiler，简称 JIT），它担任将字节码优化为机器代码。TurboFan 会依据收集到的反应信息对代码进行特定的优化（如内联函数、消除数组边界检查等），生成功用更好的机器代码。
8. Machine code (Intel, ARM, MIPS)：TurboFan 生成的机器代码是针对特定处理器架构（如 Intel x86/x64、ARM、MIPS 等）的初级代码。这些机器代码能够直接在目标处理器上履行，完成更高的功用。

V8 引擎经过这个工作流程完成了 JavaScript 源代码的高效履行。在实际运用进程中，V8 会依据代码的运转情况动态调整优化策略，确保在不同场景下都能完成最佳功用。

V8 的运转机制能够分为以下几个步骤：

1. 解析 JavaScript 代码

当 V8 接收到 JavaScript 代码时，它首先需求将代码进行解析，并转换成一种称为笼统语法树（AST）的数据结构。这个进程由解析器完成，它会识别代码中的语法、变量和函数等元素，并将其转换成 AST。

2. 预处理

在解析代码的进程中，V8 还会进行一些预处理操作，例如分配内存、创立目标、解析作用域等。这些操作有助于进步代码履行的功率，并且答应 V8 更好地管理内存空间。

3. 编译代码

V8 在履行 JavaScript 代码之前，会将其编译成一种称为字节码的中间形式。字节码比原始 JavaScript 代码更挨近于机器指令，因此它的履行速度也更快。

4. 履行代码

在 V8 中，代码的履行是经过一种称为“热门剖析”（hotspotting）的技能来完成的。V8 会对代码进行剖析，确定哪些部分最常被履行，然后将这些部分编译成本地机器码，并缓存起来，以便下次履行时更快地加载和履行。

此外，V8 中还有一种称为“废物收回”（garbage collection）的机制用于管理内存。当 JavaScript 代码履行时，它会创立许多目标、数组等数据结构，这些数据通常在不需求运用时就会被 V8 自动收回，以防止内存泄漏和程序溃散。

总归，V8 引擎经过解析、预处理、编译和履行 JavaScript 代码的方法，完成了高效和快速的 JavaScript 履行速度。

前端言语的协和合作

开展:

CSS in HTML

从上向下 别离对应的是 行内式 内嵌式 外联式

JS in HTML

经过script 标签 引进外部资源 或者在script 标签块里边写脚本代码

HTML in JS

CSS in JS

经过js 供给的dom api 能够修正元素的css特色

你不知道的HTML

标签分类

• 文档型
• 闭合型
• 履行型
• H5 新增元素

head 头部标签

• title : 网站标题
• meta : 约定好的键值对

<!--指定网页的字符集为 UTF-8，这样能够支撑更多言语和字符。-->
<meta charset="UTF-8">  
<!--告诉浏览器以最高版别的 IE 内核烘托页面，确保网页能在不同版别的 IE 浏览器中正常显现。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 界说了网页在移动设备上的视口，使得网页布局愈加适应不同的设备屏幕尺寸。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• link 引进外部css资源

<!--<link>标签的 rel 特色界说了链接的类型，href 特色指向要链接的资源文件，其间 type 特色能够省略，浏览器会自动识别资源类型 -->
<link rel="stylesheet" href="style.css">

• script 引进外部js资源

  

body 里边的标签

H5 新增语义化标签

HTML5 引进了许多新的语义化标签，以下是一些常见的 HTML5 新增语义化标签：

1. <article>：表明一个独立的内容块。

2. <aside>：界说一个隶属信息的区域。

3. <details>：表明用户能够检查或隐藏的弥补信息。

4. <figcaption>：为图片或图表增加标题。

5. <figure>：用于组合一组相关元素，例如图表和其标题。

6. <footer>：界说文档的页脚。

7. <header>：界说文档的页眉。

8. <main>：代表文档或应用程序的主要内容。

9. <nav>：用于界说导航链接集合的部分。

10. <section>：用于划分页面上的段落、主题、内容区块等。

建议: 用对比不用好,不用比用错好

H5 存储

HTML5 引进了两种新的客户端存储技能：Web 存储和 IndexedDB。

一 .Web 存储

Web 存储包含 localStorage 和 sessionStorage 两种，能够保存在浏览器端，不需求每次向服务器请求数据，进步了网页加载速度。这两种存储方法都是以 key-value 对的形式进行存储，并且只能存储字符串类型的数据。

localStorage：该存储方法保存于本地，在整个浏览器中都有用，在封闭浏览器后再次打开相同的页面时依然可用。

sessionStorage：该存储方法也保存于本地，但它与会话相关，意味着当用户封闭标签或脱离网站时，存储的数据将被删去。

下面是一个比如，展现怎么运用 localStorage 存储和读取数据：

// 将数据存储到本地贮存中
localStorage.setItem('username', 'John');
localStorage.setItem('password', '123456');
// 从本地贮存中读取数据
var username = localStorage.getItem('username');
var password = localStorage.getItem('password');
console.log(username); // 输出 "John"
console.log(password); // 输出 "123456"

二. IndexedDB

IndexedDB 是浏览器中另一种存储机制，它是一种更灵活的目标数据库，答应存储非字符串类型的数据，例如 Blob 和 ArrayBuffer 等。

IndexedDB 运用异步 API 进行操作，需求运用数据库、业务、目标存储区域等概念。下面是一个简略的示例，展现怎么运用 IndexedDB 存储和读取数据：

// 创立 IndexedDB 数据库
var request = indexedDB.open('myDatabase', 1);
var db;
request.onerror = function(event) {
  console.log("IndexedDB 数据库打开失败");
};
request.onsuccess = function(event) {
  // 将数据库目标存储在变量中
  db = event.target.result;
  console.log("IndexedDB 数据库打开成功");
  // 运用业务进行读写操作
  var transaction = db.transaction(['users'], 'readwrite');
  var objectStore = transaction.objectStore('users');
  var user = { username: 'John', password: '123456' };
  // 存储数据
  var request = objectStore.add(user);
  request.onsuccess = function(event) {
    console.log("数据存储成功");
  };
  // 读取数据
  var getRequest = objectStore.get('John');
  getRequest.onsuccess = function(event) {
    console.log("数据读取成功", event.target.result);
  };
};

需求留意的是，因为这两种存储方法都是针对客户端而言的，因此不宜存储敏感信息，例如暗码等，以及过多的数据，不然可能会导致程序功用问题。

H5 音频

H5 视频

H5 API

HTML5 API是指HTML5规范所界说的一系列JavaScript API，它们供给了开发者处理DOM、Canvas、Web Storage、WebSocket等各种功用的才能。下面是一些常用的HTML5 API：

1. DOM API：答应开发者以编程方法拜访和操作文档目标模型(DOM)，包含查询和修正网页中的元素和特色，增加和删去节点等。

2. Canvas API：答应开发者在浏览器中绘制图形和动画，包含绘制直线、圆形、矩形、文本等。

3. WebSocket API：答应开发者创立根据TCP的双向通信通道，使得服务器能够自动推送数据给客户端。

4. Web Storage API：答应开发者在浏览器端存储键值对，包含localStorage和sessionStorage。

5. File API：答应开发者读取和写入本地文件体系中的文件，包含上传和下载文件，检查文件特色等。

6. Geolocation API：答应开发者获取用户的位置信息，包含经度和纬度坐标等。

7. Media API：答应开发者在浏览器中播放音频和视频，包含媒体操控面板、音频和视频源设置等。

8. Drag and Drop API：答应开发者经过拖拽来移动和重排网页上的元素。

这些HTML5 API供给了丰厚的功用和强壮的操控才能，使得开发者能够愈加方便地完成各种Web应用程序。

webGL and WebGPU

WebGL和WebGPU都是用于在Web浏览器中完成高功用图形烘托的技能，但它们之间有一些差异。

WebGL是一种根据OpenGL ES 2.0的JavaScript API，可用于在Web浏览器中呈现交互式3D和2D图形。它使开发者能够运用规范的OpenGL ES编程言语来编写动画、游戏、数据可视化和其他图形应用程序，并在Web上运转。WebGL支撑硬件加速，与传统的Canvas API相比具有更高的功用和更好的图形作用。

相比之下，WebGPU是一种正在开发中的API，旨在为Web浏览器供给底层的图形烘托接口。WebGPU的规划参考了Vulkan、DirectX 12和Metal等跨渠道的图形API，能够为Web应用程序供给与本地应用程序类似的功用和功用。WebGPU能够直接拜访GPU硬件，使得开发者能够更好地操控图形处理流程，然后完成更快的图形烘托和更高的帧率。

总归，WebGL和WebGPU都是用于在Web浏览器中完成高功用图形烘托的技能，但WebGPU还处于开发阶段，其功用和功用将会愈加强壮和灵活。开发者能够依据需求挑选其间的一种技能来完成各种图形应用程序。

一些运用WebGl 做出来的Demo: 9 More Mind-Blowing WebGL Demos (davidwalsh.name)

拓宽沟通

课程总结