Skip to content

JavaScript 简介

1. 服务器端与客户端编程

1.1 服务器端编程

运行在 Web 服务器上， 在把页面发送给用户前执行脚本，确定把哪些内容发送给浏览器以显示给用户。

常见功能（通过Node.js）（负责“逻辑”和“数据”）：

  • 连接并操作数据库。
  • 处理用户身份验证（登录/注册）。
  • 文件读写与处理。
  • API 接口开发。

1.2 客户端编程

把脚本与页面内容一起发送给用户的浏览器，浏览器运行脚本，操作已经发送给浏览器的页面内容。

常见功能（负责“长相”和“交互”）：

  • 处理按钮点击、表单验证。
  • 制作动画效果。
  • 在不刷新页面的情况下从服务器获取新数据（AJAX/Fetch）。

2. 相关历史

2.1 诞生于分裂（1990s）

  • 起源：20世纪90年代中期，Netscape Navigator 2 浏览器引入1.0版本。（程序员 Brendan Eich 仅用 10 天就设计出 JavaScript，名字似乎是为了蹭当时 Java 的热度改的）

  • 浏览器战争：微软开发自己版本的 JavaScript，称为 JScript 用于 IE 浏览器。开发者被迫编写两个版本的脚本，并利用复杂的程序来判断用户浏览器，再切换到适当的版本。

2.2 标准化建立

  • ECMAScript 诞生：“欧洲计算机制造商协会”（ECMA）介入制定了 ECMAScript 规范。(1997)

  • W3C（World Wide Web Consortium）：国际组织“网际网络联盟”（W3C）致力于制定开放标准，通过 DOM（文档对象模型）来规范浏览器制作商操作页面的方式。

    • 1 级 DOM 于 1998 年完成。

    • 2 级 DOM 于 2000 年完成。

  • 浏览器战争 IE 胜出，微软停止对 IE 大规模更新，导致 Web 技术停滞。

  • 网景”余部“组成的 Mozilla 基金会发布 Firefox，打破 IE 垄断。

  • 第二次浏览器战争：Google 发布 Chrome，其搭载的 V8 引擎提升 JS 的执行速度，推动性能竞赛。最终除了 Firefox 和 Safari，几乎所有主流浏览器包括 Edge 都使用 Google 的 Chromium 内核。

  • ECMAScript 持续发布更新，其中 ECMAScript 6 (ES6) 是语言特性大幅提升的重要版本 -- 语法简化，引入了类、模块、箭头函数等现代特性。（2015）

3. JavaScript 语言特点

  1. ”解释型“语言，由浏览器或 Node.js 环境解释执行
  2. 动态类型 -- 不需要声明变量类型
  3. 自动管理内存
  4. 生态强 -- 开发者数量多，第三方工具库（NPM）丰富
  5. 单线程与异步编程 -- 一次只能做一件事，但擅长多任务并行（如等待服务器返回数据时继续渲染页面）
  6. 原型继承 （区别于 Java 的类继承）
  7. ~~设计草率导致一些不严谨的逻辑和语法。~~

4. DOM 简介

”文档对象模型“ （Document Object Model， DOM）是对文档及其内容的抽象表示。

4.1 定义与本质

浏览器加载页面时执行”解析“过程，在内存里创建页面及其全部元素的一个内部表示体系，就是 DOM。

  • DOM 将 HTML 源码映射为一个逻辑化、层级化的结构（互相关联的父对象和子对象组成树形结构）。
  • 在模型中，每个 HTML 标签都被视为一个拥有属性和方法的 JavaScript 对象。
  • DOM 是 JavaScript 访问和编辑网页内容的接口，允许开发者动态改变页面的显示内容和用户的交互方式。

4.2 DOM 的演进历程

  • 0 级 DOM：早期非正式的规范，仅支持对图像、表单等极少数元素的简单访问（如通过名称访问 registration 表单）。该阶段缺乏统一标准，各厂商定义的规范不同。
  • W3C 标准化： 1 级 DOM 奠定操作规范基础，2 级 DOM 扩展事件处理等复杂功能。

4.3 浏览器对象模型 BOM（Browser Object Model）

  • 早期，对 Web 页面进行最基本访问的“0 级 DOM”有时也称为 BOM。

  • BOM 负责处理网页内容之外的浏览器功能，它提供了与浏览器窗口交互的对象，如 window 顶层对象、location 地址栏控制、history 浏览记录 和 navigator 浏览器信息。

  • 浏览器环境中，DOM 与 BOM 通过 window 对象统一管理 -- window 是 BOM 的核心，代表整个浏览器窗口， document 是 window 对象的子对象， 在浏览器加载任何HTML 页面时都会被创建，包含全部 HTML 内容及其他构成页面显示的资源。 window.document 是 DOM 的入口，即 window 对象是页面 DOM 表示中的一切对象的父对象。

用句点方式表示树形结构里的对象，这种表示法可以扩展任意多次，表示树形结构中的任何对象。表示法的最后一个部分处理对象，还可以是属性或方法。

5. 与用户交互 -- window 和 document 对象的一些方法和属性

window.alert()

调用 alert() 方法时，浏览器弹出对话框显示设置的信息，还有一个“确定”按钮。 例：<script>window.alert("Here is my message");</script>

  • window. 在实际编码过程中可以不明确书写，因为它时 DOM 层级结构的最顶层（有时也被称为“全局对象”），任何没有明确对象的方法调用都会被指向 window。

  • 引号可以是单引号，也可以是双引号。

  • 在用户单击“确定”前页面上不能进行其他操作，具有这种行为模式的对话框称为 “模态”对话框。

document.write()

用于直接向 HTML 文档写入字符。 例： <script>document.write("Here is another message");</script>

  • 从功能、编码风格和可维护性来说都很局限且笨拙，一般不使用。

读取 document 对象的属性

e.g. alert(document.title) 获取 HTML 页面的 <title> 标签中定义的标题。（JavaScript 把 document.title 属性的值传递给 alert() 方法。）

  • document.lastModified 属性包含 Web 页面最近一次修改的日期和时间。