前端语言串讲 | 青训营

SIckDlo
98 阅读13分钟

一.前端语言的基本概念以及功能

前端语言三件套分别指 HTML、CSS 和 JavaScript

  1. HTML（Hypertext Markup Language）HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。是用来描述文档结构和语义的标记语言。通过使用一系列的标签和属性，可以将页面划分成不同的区域，并为这些区域添加文本、图片、链接等内容。HTML 是网页中的骨架，可以方便地搭建出网页基础结构。
  2. CSS（Cascading Style Sheets）是用于设置网页样式的样式表语言。通过定义各种样式规则，如字体、颜色、布局等，可以使得网页达到某种美观而统一的设计效果。CSS 让开发者专注于网页的视觉效果和交互效果，提高了用户体验。
  3. JavaScript是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。

day1笔记（1）.jpg

二.CSS 选择器

类型选择器

类型选择器有时也叫做“标签名选择器*”*或者是”元素选择器“，因为它在文档中选择了一个 HTML 标签/元素的缘故。在下面的示例中，我们已经用了 span、em 和 strong 选择器，<span>、<em>和<strong>元素的所有实例这样就都被样式化了。 以下是一些常用的CSS选择器代码示例：

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

.red-text {
  color: red;
}

ID 选择器

ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。在下面的示例里，你可以看看这两种用法。

ID选择器，例如选择ID为“header”的元素，并将背景颜色设置为灰色：

#header {
  background-color: gray;
}

全局选择器

全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。下面的示例中，我们已经用全局选择器，移去了所有元素上的外边距。这就是说，和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。

* {
    margin: 0;
}

三.JavaScript

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。 JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

API

JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interface，API）将为你的代码提供额外的超能力。 API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，然后再组装成书柜要简单得多。

JavaScript发展进程

JavaScript的发展历史可以追溯到上个世纪90年代初，以下是JavaScript发展的关键里程碑：

  1. 1995年：诞生与初期发展

  • Netscape公司的Brendan Eich开发了JavaScript，最初称为LiveScript，后来更名为JavaScript。

  • JavaScript作为网页浏览器的脚本语言首次亮相，用于实现简单的网页交互功能。

  1. 1996年：标准化和ECMAScript

  • 为了规范JavaScript语言，Netscape将JavaScript提交给ECMA（欧洲计算机制造商协会）。

  • ECMA制定了ECMAScript标准，第一版于1997年发布。它定义了JavaScript的核心语法和特性。

  1. 1997年 - 2005年：标准化的推进和版本迭代

  • 1997年，ECMAScript 2发布，引入了一些改进和新特性。

  • 1999年，ECMAScript 3发布，成为JavaScript的主要版本，为后续几年的发展奠定了基础。

  • 2000年，ECMAScript 4的开发开始，但由于过于庞大和复杂，最终被搁置。

  1. 2005年：Ajax的出现
  • Jesse James Garrett提出了Ajax（Asynchronous JavaScript and XML）概念，将JavaScript与XML、CSS和HTTP等技术结合，实现了异步通信和动态内容加载。
  1. 2009年：ECMAScript 5的发布

  • ECMAScript 5（简称ES5）是一个重要的里程碑，引入了许多新特性，如严格模式、JSON支持、数组迭代方法等。

  • ES5标准的发布推动了JavaScript在前端开发中的发展，并为后续的版本演进铺平了道路。

  1. 2015年：ES6（ES2015）的发布和模块化

  • ECMAScript 6（简称ES6或ES2015）是一个重要的版本，引入了许多语言增强，如箭头函数、模板字面量、解构赋值、类等。

  • ES6的发布标志着JavaScript的现代化，并为开发人员提供了更强大、更易用的语言特性和工具。

  1. 2016年至今：年度版本迭代和发展

  • 自2016年起，ECMAScript每年发布一个新版本，每个版本都引入了新的语法和功能，以满足开发人员的需求和改进开发体验。

  • 这些版本包括ES2016、ES2017、ES2018、ES2019、ES2020和ES2021，每个版本都有自己的特性和改进。

JavaScript的发展一直在不断推进，开发人员和社区对其进行了广泛的实践和探索，衍生出了众多的框架、库和工具。JavaScript成为了前端开发的基石，同时在后端开发、移动应用开发和其他领域也发挥着重要作用。随着技术的进步和需求的变化，JavaScript仍在持续发展和演进。

现代 Web 开发框架和库的兴起 近年来，随着 JavaScript 的发展，许多现代 Web 开发框架和库应运而生。这些框架和库（如 Angular、React、Vue.js 等）极大地提高了开发者的生产力，改变了 Web 开发的方式和规模。

day1笔记（2）.jpg

JavaScript的应用领域

JavaScript广泛应用于各个领域，以下是一些JavaScript的主要应用领域：

  1. 前端开发：

  • 网页开发：JavaScript是网页开发中最重要的语言之一。通过操作HTML文档对象模型（DOM），JavaScript可以实现动态更新页面内容、响应用户交互行为，为用户提供更丰富的用户体验。

  • 前端框架：JavaScript框架如React、Angular和Vue.js等提供了强大的工具和组件，简化了前端开发的复杂性，并提供了高效的开发模式。

  1. 后端开发：
  • Node.js：Node.js是基于JavaScript的运行时环境，使JavaScript能够在服务器端执行。借助Node.js，开发人员可以构建高性能、可伸缩的后端应用程序，处理请求和响应，与数据库进行交互等。
  1. 移动应用开发：

  • React Native：React Native是一个基于JavaScript的移动应用开发框架，可以使用JavaScript构建跨平台的原生移动应用程序。开发人员可以共享大部分代码，并在iOS和Android平台上运行应用程序。

  • Ionic：Ionic是一个使用HTML、CSS和JavaScript构建混合移动应用的开发框架。它提供了一套UI组件和工具，使开发人员能够快速开发跨平台的移动应用。

  1. 桌面应用开发：
  • Electron：Electron是一个基于JavaScript、HTML和CSS构建桌面应用程序的框架。开发人员可以使用JavaScript开发跨平台的桌面应用，如Visual Studio Code、Slack和GitHub Desktop等。
  1. 数据可视化：
  • D3.js：D3.js是一个用于创建数据可视化的JavaScript库。它提供了丰富的功能和工具，使开发人员能够以交互式和动态的方式呈现数据。
  1. 游戏开发：
  • Phaser：Phaser是一个基于JavaScript的游戏开发框架，提供了丰富的游戏开发功能和工具，帮助开发人员创建2D游戏。

除了以上领域，JavaScript还在许多其他领域有应用，如机器学习（TensorFlow.js）、物联网（物联网设备的前端交互）、服务器端渲染（SSR）等。JavaScript的广泛应用和持续发展使其成为一门非常强大和多样化的编程语言。

JavaScript数据类型

JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有9种：

  • 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
  • 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

1、Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。

2、Null：Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。

3、Boolean：即布尔类型，该类型有两个值：true

false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。

4、Number：该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。

5、String：String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。

6、Symbol类型

符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的

1var s = Symbol()

Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象

Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述

7、Object：Object数据类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。

8、Array（数组）

JavaScript 数组用方括号书写。数组的项目由逗号分隔。

下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）：

1var cars = [``"Porsche"`` , ``"Volvo"`` , ``"BMW"``];

数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。

ECMAScript中的数组和其他语言的数组有着相当大的区别：

  • ECMAScript 数组的每一项可以保存任何类型的数据；
  • ECMAScript数组的大小可以动态调整，可向数组添加元素或者删除元素；

9、Function

ECMAScript中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。

day1笔记（3）.jpg

四.在浏览器中的运行

  1. HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。
  2. 构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。
  3. 计算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点形式表示的 CSS 规则结构。
  4. 排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。渲染树包含了 DOM 中的可见元素及其对应的 CSS 规则。接着，浏览器会计算渲染树中每个节点的位置和大小，这个过程称为排版或布局（Layout）。
  5. 渲染合成：浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。每个层包含一个或多个节点，具有独立的绘制和合成上下文。
  6. 绘制（Painting）：浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。绘制过程可能会在 GPU（图形处理器）上完成，以提高性能。
  7. 合成（Compositing）：浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。合成过程通常由 GPU 完成，以实现高效的图像合成。

在这个过程中，JavaScript 代码的解析与执行可能穿插在各个阶段，因为 JavaScript 可以操作 DOM、CSSOM 和浏览器 API，从而改变页面的内容、样式和交互行为。这些变化可能需要浏览器重新执行排版、绘制和合成等任务。因此，在编写 JavaScript 代码时，应尽量减少对 DOM 和 CSSOM 的操作，以提高页面性能。

上述浏览器运行这一栏内容来源于作者：2002XiaoYu

day1笔记（4）.jpg

ps：本人艾克在学习过程当中学到了很多，上述笔记是一些基础，还有很多点不能一时去掌握，但有了大致的概念和方向。

avatar
文章
阅读
粉丝