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

2024-07-29 16:45:30 浏览数 (2)

前端语言的基本功能

前端语言三件套分别指 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：
代码语言：javascript复制
p {
  font-size: 14px;
}
  1. 类选择器，例如选择带有“red-text”类的元素，并将字体颜色设置为红色：
代码语言：javascript复制
.red-text {
  color: red;
}
  1. ID选择器，例如选择ID为“header”的元素，并将背景颜色设置为灰色：
代码语言：javascript复制
#header {
  background-color: gray;
}
  1. 后代选择器，例如选择ul下面所有li元素，并将列表样式设置为无序：
代码语言：javascript复制
ul li {
  list-style: none;
}
  1. 相邻兄弟选择器，例如选择紧接在h1元素后面的p元素，并将字体大小设置为18px：
代码语言：javascript复制
h1   p {
  font-size: 18px;
}
  1. 子元素选择器，例如选择ul下面直接子元素li，并将文字颜色设置为蓝色：
代码语言：javascript复制
ul > li {
  color: blue;
}
  1. 属性选择器，例如选择所有href属性值以“https”开头的链接，并将颜色设置为绿色：
代码语言：javascript复制
a[href^="https"] {
  color: green;
}
  1. 伪类选择器，例如选择鼠标悬停在按钮上时的状态，并将背景颜色设置为橙色：
代码语言：javascript复制
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 代码示例来说明不同数据类型的用法。

原始数据类型

代码语言：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)

对象数据类型

代码语言：javascript复制
// 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。

  1. 预处理

在解析代码的过程中，V8 还会进行一些预处理操作，例如分配内存、创建对象、解析作用域等。这些操作有助于提高代码执行的效率，并且允许 V8 更好地管理内存空间。

  1. 编译代码

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

  1. 执行代码

在 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 : 约定好的键值对
代码语言：javascript复制
<!--指定网页的字符集为 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资源
代码语言：javascript复制
<!--<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 存储和读取数据：

代码语言：javascript复制
// 将数据存储到本地储存中
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 存储和读取数据：

代码语言：javascript复制
// 创建 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)

拓展交流

课程总结

对象 浏览器 前端 存储 笔记

0 人点赞