前端语言串讲 | 青训营

南弦月
145 阅读6分钟

随着前端的不断探索和进化，传统的前端“三剑客”技术也是日新月异，而且彼此之间联系越来越紧密。本节课旨在复习前端的基本知识，并且拓展课外知识。

01 前端语言的基本能力

HTML，cCSS和Javascript 我们来看下面这张图片

QQ截图20230815161306.jpg 它很形象的描述了HTML，CSS,Javascript在网页编程里面的作用：HTML构成了人类的骨骼，在网页变成厘米那，人类骨骼即代表了网页的基本构架，HTML一同构成了人类的皮囊，在网页中，人类的皮囊即网页的样式，javascript是人类的肌肉，使人有结实的身体，控制人类的运动与交互，在网页中，JAVASCRIPT也起到了支持网页交互的作用，可以处理复杂的函数可以保证更高的效率和可用性。
接下来，我们分别来学习HTML，CSS，和JS

HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 [CSS]），或功能与行为（如 [JavaScript]）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接， HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>、<title>、<body>、<header>、[<footer>]、[<article>]、[<section>]、[<p>]、[<div>]、[<span>]、[<img>]、[<aside>]、[<audio>]、[<canvas>]、[<datalist>]、[<details>]、[<embed>]、[<nav>]、[<output>]、[<progress>]、[<video>]、[<ul>]、[<ol>]、[<li>] 等等。

HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

CSS 是开放 Web 的核心语言之一，并根据 W3C 规范在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。

在 CSS2.1 之后，规范的制定范围不断地增加，并且不同的 CSS 模块进展差异如此之大，以至于按照模块来单独进行开发并发布建议变得更加有效。W3C 现在不再对 CSS 规范进行版本控制，而是定期对 CSS 规范的最新稳定状态和各个模块的进展用快照来记录。CSS 模块现在有版本号或者级别，例如 CSS Color Module Level 5。

Javascript

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。

Javascript的诞生

1995年发明的LiveScript是javascript的前身。
1995年5月，网景公司做出决策，未来的网页脚本语言必须”看上去与Java足够相似”，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。

Brendan Eich被指定为这种”简化版Java语言”的设计师。

但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。

由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。他的设计思路为：

  • （1）借鉴C语言的基本语法；
  • （2）鉴Java语言的数据类型和内存管理；
  • （3)借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
  • （4）借鉴Self语言，使用基于原型（prototype）的继承机制。

JavaScript 到底是什么？

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

  • 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。

本节是一篇 JavaScript 简介，因此这个阶段不会对 JavaScript 语言和上述工具做过多的介绍。之后可以到 JavaScript 学习区 和 MDN 的其他地方学习更多细节。

下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器 API 特性。

“Hello World!”示例

读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例（一切始于 Hello World）。

  1. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。

  2. 下一步，在 index.html 文件 标签前的新行添加以下代码。

    HTMLCopy to Clipboard

    <script src="scripts/main.js" defer></script>

  3. 与 CSS 的 <link> 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：

  4. 现在将以下代码添加到 main.js 文件中：

    JSCopy to Clipboard

    let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

  5. 最后，保存 HTML 和 JavaScript 文件，用浏览器打开 index.html。可以屏幕中出现了"hello world“

avatar
文章
阅读
粉丝