JavaScript 基础教程

JavaScript 首页 JavaScript 路线图 JavaScript 概述 JavaScript 功能特性 JavaScript 启用 JavaScript 位置 JavaScript 语法 JavaScript Hello World JavaScript Console.log() JavaScript 注释 JavaScript 变量 JavaScript let 语句 JavaScript 常量 JavaScript 数据类型 JavaScript 类型转换 JavaScript 严格模式 JavaScript 保留关键字

JavaScript 运算符

JavaScript 运算符 JavaScript 算术运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 位运算符 JavaScript 赋值运算符 JavaScript 条件运算符 JavaScript typeof 运算符 JavaScript 空值合并运算符 JavaScript 安全赋值运算符 JavaScript 删除运算符 JavaScript 逗号运算符 JavaScript 分组运算符 JavaScript Yield 运算符 JavaScript 展开运算符 JavaScript 幂运算符 JavaScript 运算符优先级

JavaScript 控制流

JavaScript If...Else JavaScript While 循环 JavaScript For 循环 JavaScript For...in JavaScript For...of JavaScript 循环控制 JavaScript Break 语句 JavaScript Continue 语句 JavaScript Switch Case JavaScript 用户定义迭代器

JavaScript 函数

JavaScript 函数 JavaScript 函数表达式 JavaScript 函数参数 JavaScript 默认参数 JavaScript Function() 构造函数 JavaScript 函数提升 JavaScript 自调用函数 JavaScript 箭头函数 JavaScript 函数调用 JavaScript 函数 call() 方法 JavaScript 函数 apply() 方法 JavaScript 函数 bind() 方法 JavaScript 闭包 JavaScript 变量作用域 JavaScript 全局变量 JavaScript 智能函数参数

JavaScript 对象

JavaScript Number JavaScript Boolean JavaScript Strings JavaScript Arrays JavaScript Date JavaScript DataView JavaScript Handler JavaScript Math JavaScript RegExp JavaScript Symbol JavaScript Sets JavaScript WeakSet JavaScript Maps JavaScript WeakMap JavaScript 可迭代对象 JavaScript Reflect JavaScript TypedArray JavaScript 模板字面量 JavaScript 带标签的模板

面向对象的 JavaScript

JavaScript 对象 JavaScript 类 JavaScript 对象属性 JavaScript 对象方法 JavaScript 静态方法 JavaScript 显示对象 JavaScript 对象访问器 JavaScript 对象构造函数 JavaScript 原生原型 JavaScript ES5 对象方法 JavaScript 封装 JavaScript 继承 JavaScript 抽象 JavaScript 多态 JavaScript 解构 JavaScript 解构赋值 JavaScript 对象解构 JavaScript 数组解构 JavaScript 嵌套解构 JavaScript 可选链式调用 JavaScript 全局对象 JavaScript Mixins (混合) JavaScript 代理

JavaScript 版本

JavaScript 历史 JavaScript 版本 JavaScript ES5 JavaScript ES6 ECMAScript 2016 ECMAScript 2017 ECMAScript 2018 ECMAScript 2019 ECMAScript 2020 ECMAScript 2021 ECMAScript 2022

JavaScript 异步

JavaScript 异步 JavaScript 回调函数 JavaScript Promises JavaScript Async/Await JavaScript Microtasks (微任务) JavaScript Promises JavaScript Promises 链 JavaScript 定时事件 JavaScript setTimeout() JavaScript setInterval()

JavaScript Cookies

JavaScript Cookies JavaScript Cookie 属性 JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型 JavaScript Window 对象 JavaScript Document 文档对象 JavaScript Screen 对象 JavaScript History 对象 JavaScript Navigator 对象 JavaScript Location 对象 JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API JavaScript History API JavaScript Storage API JavaScript Forms API JavaScript Worker API JavaScript Fetch API JavaScript Geolocation API

JavaScript 事件

JavaScript 事件 JavaScript DOM 事件 JavaScript addEventListener() JavaScript 鼠标事件 JavaScript 键盘事件 JavaScript 表单事件 JavaScript 窗口/文档事件 JavaScript 事件委托 JavaScript 事件冒泡 JavaScript 事件捕获 JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理 JavaScript try...catch JavaScript 调试 JavaScript 自定义错误 JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this 关键字 JavaScript void 关键字 JavaScript new 关键字 JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM JavaScript DOM 方法 &属性 JavaScript DOM 文档 JavaScript DOM 元素 JavaScript DOM 属性 (Attr) JavaScript DOM 表单 JavaScript 修改 HTML JavaScript 修改 CSS JavaScript DOM 动画 JavaScript DOM 导航 JavaScript DOM 集合 JavaScript DOM NodeList JavaScript DOM DOMTokenList

JavaScript 高级章节

JavaScript 冒泡排序算法 JavaScript 循环引用错误 JavaScript 使用 Jest 进行代码测试 JavaScript CORS 处理 JavaScript 数据分析 JavaScript 死区 JavaScript 设计模式 JavaScript Engine 和 Runtime JavaScript 执行上下文 JavaScript 函数组合 JavaScript 不可变性 JavaScript Kaboom.js JavaScript 词法作用域 JavaScript 本地存储 JavaScript 记忆化 JavaScript 压缩 JS JavaScript 可变性 vs 不可变性 JavaScript 包管理器 JavaScript 解析 S 表达式 JavaScript 原型继承 JavaScript 响应式 JavaScript Require 函数 JavaScript Selection API JavaScript SessionStorage JavaScript SQL CRUD 操作 JavaScript 增强排序 JavaScript 临时死区 JavaScript 节流 JavaScript TRPC 库 JavaScript 真值和假值 JavaScript 上传文件 JavaScript 日期比较 JavaScript 递归 JavaScript 数据结构 JavaScript Base64 编码 JavaScript 回调函数 JavaScript 当前日期/时间 JavaScript 日期验证 JavaScript 过滤方法 JavaScript 生成颜色 JavaScript HTTP 请求 JavaScript 插入排序 JavaScript 延迟加载 JavaScript 链表 JavaScript 嵌套循环 JavaScript 空值检查 JavaScript 获取当前 URL JavaScript 图算法 JavaScript 高阶函数 JavaScript 空字符串检查 JavaScript 表单处理 JavaScript 函数式编程 JavaScript 形参 vs 实参 JavaScript 原型 JavaScript 响应式编程 JavaScript Reduce 方法 JavaScript Rest 运算符 JavaScript 短路 JavaScript 未定义检查 JavaScript 单元测试 JavaScript 验证 URL

JavaScript 杂项

JavaScript Ajax JavaScript 异步迭代 JavaScript Atomics 原子对象 JavaScript Rest 参数 JavaScript 页面重定向 JavaScript 对话框 JavaScript 页面打印 JavaScript 表单验证 JavaScript 动画 JavaScript 多媒体 JavaScript 图像映射 JavaScript 浏览器 JavaScript JSON JavaScript 多行字符串 JavaScript 日期格式 JavaScript 获取日期方法 JavaScript 设置日期方法 JavaScript 模块 JavaScript 动态导入 JavaScript BigInt JavaScript Blob JavaScript Unicode JavaScript 浅拷贝 JavaScript 调用堆栈 JavaScript 引用类型 JavaScript IndexedDB JavaScript 点击劫持攻击 JavaScript 柯里化 JavaScript 图形 JavaScript Canvas 画布 JavaScript 防抖 JavaScript 性能 JavaScript 代码风格指南

JavaScript 实用资源

JavaScript 面试题 JavaScript 速查表 JavaScript 函数


Javascript - 概述

什么是 JavaScript?

JavaScript 是一种动态计算机编程语言。它轻量级,最常用于网页开发,其实现允许客户端脚本与用户交互并创建动态页面。它是一种具有面向对象功能的解释型编程语言。

JavaScript 是一种单线程编程语言,可用于客户端或服务器端开发。它是一种动态类型编程语言,这意味着我们在编写 JavaScript 代码时无需考虑变量数据类型。此外,它还包含控制语句、运算符和对象,例如数组、数学、数据等。

JavaScript 最初被称为 LiveScript,但 Netscape 将其更名为 JavaScript,可能是因为 Java 引发了人们的热议。 JavaScript 于 1995 年在 Netscape 2.0 中首次亮相,名称为 LiveScript。该语言的通用核心已嵌入 Netscape 和其他 Web 浏览器中。

ECMA-262 规范定义了核心 JavaScript 语言的标准版本。

  • JavaScript 是一种轻量级的解释型编程语言。

  • 专为创建以网络为中心的应用程序而设计。

  • 与 Java 互补并可与其集成。

  • 与 HTML 互补并可与其集成。

  • 开放且跨平台

JavaScript 的历史

JavaScript 由 Netscape 的计算机科学家兼程序员 Brendan Eich 开发。通信公司。JavaScript 最初名为"Mocha",之后更名为"LiveScript",最终更名为"JavaScript"。

1996 年至 1997 年间,欧洲计算机制造商协会 (ECMA) 对 JavaScript 进行了标准化。此后,JavaScript 经历了 3 次修订。

在 ES5(2009 年)中,Node.js 被引入,使用 JavaScript 作为服务器端语言。ES6(2015 年)是 JavaScript 的一次重要修订,引入了 JavaScript 的高级特性。

目前,JavaScript 已达到 ES14 版本。ES14(ECMAScript 2023)是第 14 个版本,将于 2023 年 6 月发布。

客户端 JavaScript

客户端 JavaScript 是 JavaScript 语言最常见的形式。该脚本应该包含在 HTML 文档中或被 HTML 文档引用,以便浏览器解释执行代码。

这意味着网页不必是静态 HTML,而是可以包含与用户交互、控制浏览器以及动态创建 HTML 内容的程序。

JavaScript 客户端 机制比传统的 CGI 服务器端脚本具有许多优势。例如,您可以使用 JavaScript 检查用户是否在表单字段中输入了有效的电子邮件地址。

JavaScript 代码在用户提交表单时执行,只有所有输入都有效时,才会提交到 Web 服务器。

JavaScript 可用于捕获用户发起的事件,例如按钮点击、链接导航以及用户显式或隐式发起的其他操作。

用于 JavaScript 开发的常用客户端库包括 ReactJS、NextJS、Vue JS、Angular JS 等。

服务器端 JavaScript

早期,JavaScript 用于前端开发,为 HTML 页面添加行为。自 2009 年以来,JavaScript 也被用作服务器端编程语言,用于构建可扩展的动态 Web 应用程序。

Node.js 是使用 JavaScript 构建应用程序服务器的最佳和最流行的 JavaScript 运行时环境之一。使用 Node.js,我们可以在浏览器之外执行 JavaScript 代码并管理服务器任务。服务器任务可以是与数据库的交互、API、文件处理,甚至是网络通信。由于 Node.js 采用事件驱动架构,它比其他服务器端编程语言更快。

JavaScript 的优势

使用 JavaScript 的优点如下:-

  • 更少的服务器交互 - 您可以在将页面发送到服务器之前验证用户输入。这样可以节省服务器流量,从而减少服务器负载。

  • 立即向访问者反馈 − 他们无需等待页面重新加载即可查看是否忘记输入内容。

  • 增强交互性 − 您可以创建界面,当用户用鼠标悬停在其上或通过键盘激活时,界面会做出反应。

  • 更丰富的界面 − 您可以使用 JavaScript 添加拖放组件和滑块等项目,为网站访问者提供丰富的界面。

JavaScript 的局限性

我们不能将 JavaScript 视为一种成熟的编程语言。它缺少以下重要特性:

  • 客户端 JavaScript 不支持文件读写。出于安全原因,此代码已被保留。

  • JavaScript 无法用于网络应用程序,因为目前尚无此类支持。

  • JavaScript 不具备任何多线程功能。

  • 再次强调,JavaScript 是一种轻量级的解释型编程语言,它允许您在静态 HTML 页面中构建交互性。

命令式 JavaScript 与声明式 JavaScript

命令式和声明式是一种编程范式,JavaScript 同时遵循这两种范式。

  • 命令式 JavaScript − 在命令式 JavaScript 中,我们按照代码描述获取输出步骤的方式编写代码。因此,我们既关注代码执行流程,也关注输出。例如,要对所有数组元素求和,如果我们编写 for 循环代码,它会解释计算和的每个步骤。

  • 声明式 JavaScript − 在声明式 JavaScript 中,我们无需担心执行流程,但最终应该获得正确的输出。例如,我们使用内置的 array.reduce() 方法来计算数组元素的和。在这里,我们无需关心 reduce() 方法在库中的实现方式。

JavaScript 开发工具

JavaScript 的主要优势之一是它不需要昂贵的开发工具。您可以从简单的文本编辑器(例如记事本)开始。由于 JavaScript 是一种在 Web 浏览器上下文中运行的解释型语言,因此您甚至无需购买编译器。

这里有一些免费工具,在使用 JavaScript 开发应用程序时可能会有所帮助。

  • Visual Studio Code (VS Code) − VS Code 是大多数开发人员用来编写 JavaScript 代码的代码编辑器。它功能丰富,并包含各种扩展程序,可以提高任何开发人员的工作效率。

  • Chrome 开发工具 − 程序员可以使用 Chrome 开发工具来调试 JavaScript 代码。但是,他们也可以使用任何浏览器自带的调试工具。

以上两个工具可以提高开发人员编写代码的效率。此外,您还可以使用其他工具,例如 Git 进行版本控制、Webpack 构建应用程序等。

JavaScript 的现状如何?

2015 年,JavaScript 的 ES6 版本发布,其中包含多项重大增强,包括面向对象概念、匿名函数、模板字面量等。2023 年 6 月,JavaScript 的第 14 个版本 ES14(ECMAScript 2023)发布。