跳转到主要内容

书籍

JavaScript 教程

全面介绍 JavaScript 核心语法，覆盖 ES5 与 DOM 规范的主要内容。适合前端入门系统学习，也可当作日常速查。

82 页更新于 6 个月前

开始阅读
CC BY-SA 3.0

目录82

  1. 01 导论 什么是 JavaScript 语言？ JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览... 7 年前
  2. 02 JavaScript 语言的历史 诞生 JavaScript 因为互联网而生，紧跟着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史讲起。 1990年底，欧洲核能研究组织（CERN）科学家 Tim Berners-Lee，在全世界最大的电脑网络... 4 年前
  3. 03 JavaScript 的基本语法 语句 JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。 语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。 var a ... 3 年前
  4. 04 数据类型概述 简介 JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了 Symbol 和 BigInt 数据类型，本教程不涉及。） 数值（number）：整... 3 年前
  5. 05 null, undefined 和布尔值 null 和 undefined 概述 null与 undefined都可以表示“没有”，含义非常相似。将一个变量赋值为 undefined或 null，老实说，语法效果几乎没区别。 var a = undefin... 2 年前
  6. 06 数值 概述 整数和浮点数 JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以， 1与 1.0是相同的，是同一个数。 1 === 1.0 // true 这就是说，JavaScript ... 2 年前
  7. 07 字符串 概述 定义 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。 'abc' "abc" 单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。 'key = "value"' "It's... 8 年前
  8. 08 对象 概述 生成方法 对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。 什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。 var ob... 4 年前
  9. 09 函数 函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数有唯一对应的返回值。 概述 函数的声明 JavaScript 有三种声明函数的方法。 （1）function 命令 function命令声明的代码区... 4 年前
  10. 10 数组 定义 数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。 var arr = ['a', 'b', 'c']; 上面代码中的 a、 b、 c就构成一个数组，两端的方括号... 5 年前
  11. 11 算术运算符 运算符是处理数据的基本方法，用来从现有的值得到新的值。JavaScript 提供了多种运算符，覆盖了所有主要的运算。 概述 JavaScript 共提供10个算术运算符，用来完成基本的算术运算。 加法运算符： x ... 8 年前
  12. 12 比较运算符 概述 比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。 2 > 1 // true 上面代码比较 2是否大于 1，返回 true。 注意，比较运算符可以比较各种类型的值，不仅仅是数值。 ... 3 年前
  13. 13 布尔运算符 概述 布尔运算符用于将表达式转为布尔值，一共包含四个运算符。 取反运算符： ! 且运算符： && 或运算符： || 三元运算符： ?: 取反运算符（!） 取反运算符是一个感叹号，用于将布尔值变为相反值，即 true... 6 年前
  14. 14 二进制位运算符 概述 二进制位运算符用于直接对二进制位进行计算，一共有7个。 二进制或运算符（or）：符号为 |，表示若两个二进制位都为 0，则结果为 0，否则为 1。 二进制与运算符（and）：符号为 &，表示若两个二进制位都为... 4 年前
  15. 15 其他运算符，运算顺序 void 运算符 void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回 undefined。 void 0 // undefined void(0) // undefined 上面是 void运算符的... 6 年前
  16. 16 数据类型的转换 概述 JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。 var x = y ? 1 : 'a'; 上面代码中，变量 x到底是数值还是字符串，取决于另一个变量 y的值。 y为 true... 6 年前
  17. 17 错误处理机制 Error 实例对象 JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供 Error构造函数，所有抛出的错误都是这个构造函数的实例。 var err = ne... 5 年前
  18. 18 编程风格 概述 “编程风格”（programming style）指的是编写代码的样式规则。不同的程序员，往往有不同的编程风格。 有人说，编译器的规范叫做“语法规则”（grammar），这是程序员必须遵守的；而编译器忽略的部... 4 年前
  19. 19 console 对象与控制台 console 对象 console对象是 JavaScript 的原生对象，它有点像 Unix 系统的标准输出 stdout和标准错误 stderr，可以输出各种信息到控制台，并且还提供了很多有用的辅助方法。 c... 7 年前
  20. 20 Object 对象 概述 JavaScript 原生提供 Object对象（注意起首的 O是大写），本章介绍该对象原生的各种方法。 JavaScript 的所有其他对象都继承自 Object对象，即那些对象都是 Object的实例。 ... 1 年前
  21. 21 属性描述对象 概述 JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应... 5 年前
  22. 22 Array 对象 构造函数 Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。 var arr = new Array(2); arr.length // 2 arr // [ empty ... 5 年前
  23. 23 包装对象 定义 对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。 所谓“包装对象”，指的是与数值... 6 年前
  24. 24 Boolean 对象 概述 Boolean对象是 JavaScript 的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。 var b = new Boolean(true); typeof b // "object... 8 年前
  25. 25 Number 对象 概述 Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用。 作为构造函数时，它用于生成值为数值的对象。 var n = new Number(1); typeof n // "obj... 6 年前
  26. 26 String 对象 概述 String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。 var s1 = 'abc'; var s2 = new String('abc'); typeof s1 // "... 6 年前
  27. 27 Math 对象 Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在 Math对象上调用。 静态属性 Math对象的静态属性，提供以下一些数学常数。 Math.... 6 年前
  28. 28 Date 对象 Date对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。 普通函数的用法 Date对象可以作为... 2 年前
  29. 29 RegExp 对象 RegExp对象提供正则表达式的功能。 概述 正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配文本。比如，正则表达式给出一... 2 年前
  30. 30 JSON 对象 JSON 格式 JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式... 3 年前
  31. 31 实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力，本章介绍 JavaScript 面向对象编程的基础知识。 对象是什么 面向对象编程（Object Oriented Programming，缩写为 OOP）是目... 6 年前
  32. 32 this 关键字 涵义 this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。 前一章已经提到， this可以用在构造函数之中，表示实例对象。除此之外， this还可以用在别的场合。但不管是什... 1 年前
  33. 33 对象的继承 面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。 大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承... 4 年前
  34. 34 Object 对象的相关方法 JavaScript 在 Object对象上面，提供了很多相关方法，处理面向对象编程的相关操作。本章介绍这些方法。 Object.getPrototypeOf() Object.getPrototypeOf方法返回... 6 年前
  35. 35 严格模式 除了正常的运行模式，JavaScript 还有第二种运行模式：严格模式（strict mode）。顾名思义，这种模式采用更加严格的 JavaScript 语法。 同样的代码，在正常模式和严格模式中，可能会有不一样的... 1 年前
  36. 36 异步操作概述 单线程模型 单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。 注意，JavaScript 只在一个线程上运行，不代表 ... 3 年前
  37. 37 定时器 JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout()和 setInterval()这两个函数来完成。它们向任务队列添加定时任务。 setTimeout() set... 6 个月前
  38. 38 Promise 对象 概述 Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让... 4 年前
  39. 39 DOM 概述 DOM DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如... 6 年前
  40. 40 Node 接口 所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。 属性 Node.prototype.nodeType nodeType属性返回一个整数值，表示节点的类型。 do... 7 年前
  41. 41 NodeList 接口，HTMLCollection 接口 节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点： NodeList和 HTMLCollection。 这两种集合都属于接口规范。许多 DOM 属性和方法，返回的... 5 年前
  42. 42 ParentNode 接口，ChildNode 接口 节点对象除了继承 Node 接口以外，还拥有其他接口。 ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。 ChildNode接口表示当前节点是一个子节点，提供一些相关方法。 Parent... 5 年前
  43. 43 Document 节点 概述 document节点对象代表整个文档，每张网页都有自己的 document对象。 window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 docu... 2 年前
  44. 44 Element 节点 简介 Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个 Element节点对象（以下简称元素节点）。 元素节点的 nodeType属性都是 1。 var p ... 2 年前
  45. 45 属性的操作 HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。 <a id="test" href="http://www.example.com"> 链接 </a> 上面代码中， a... 7 年前
  46. 46 Text 节点和 DocumentFragment 节点 Text 节点的概念 文本节点（ Text）代表元素节点（ Element）和属性节点（ Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。 通常我们使用父... 7 年前
  47. 47 CSS 操作 CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本章介绍如何通过 JavaScript... 2 年前
  48. 48 Mutation Observer API 概述 Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 概念上，它很接近事件，可以理解为 DOM 发... 2 年前
  49. 49 EventTarget 接口 事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。 介绍具体的事件之前，先来看看如何让 DOM 节点监听事件。 概述 DOM 节点的事... 5 年前
  50. 50 事件模型 监听函数 浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。 Java... 6 年前
  51. 51 Event 对象 概述 事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个 Event对象，所有的事件都是这个对象的实例，或者说继承了 Event.prototype对象。 Event对象本身就是一个构造函数... 6 年前
  52. 52 鼠标事件 鼠标事件的种类 鼠标事件主要有下面这些，所有事件都继承了 MouseEvent接口（详见后文）。 （1）点击事件 鼠标点击相关的有四个事件。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同... 5 年前
  53. 53 键盘事件 键盘事件的种类 键盘事件由用户击打键盘触发，主要有 keydown、 keypress、 keyup三个事件，它们都继承了 KeyboardEvent接口。 keydown：按下键盘时触发。 keypress：按下... 6 年前
  54. 54 进度事件 进度事件的种类 进度事件用来描述资源加载的进度，主要由 AJAX 请求、 <img>、 <audio>、 <video>、 <style>、 <link>等外部资源的加载触发，继承了 ProgressEvent接口... 7 年前
  55. 55 表单事件 表单事件的种类 input 事件 input事件当 <input>、 <select>、 <textarea>的值发生变化时触发。对于复选框（ <input type=checkbox>）或单选框（ <input ... 7 年前
  56. 56 触摸事件 触摸操作概述 浏览器的触摸 API 由三个部分组成。 Touch：一个触摸点 TouchList：多个触摸点的集合 TouchEvent：触摸引发的事件实例 Touch接口的实例对象用来表示触摸点（一根手指或者一根... 7 年前
  57. 57 拖拉事件 拖拉事件的种类 拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默... 5 年前
  58. 58 其他常见事件 资源事件 beforeunload 事件 beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。 如果该事件对象的 returnValue属性是一个非空字符串，那么浏览... 6 年前
  59. 59 GlobalEventHandlers 接口 指定事件的回调函数，推荐使用的方法是元素的 addEventListener方法。 div.addEventListener('click', clickHandler, false); 除了之外，还有一种方法可以... 7 年前
  60. 60 浏览器环境概述 JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本... 4 年前
  61. 61 window 对象 概述 浏览器里面， window对象（注意， w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。 a = 1; wi... 2 年前
  62. 62 Navigator 对象，Screen 对象。 window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。 Navigator 对象的属性 Navigator.userAgent navig... 5 年前
  63. 63 Cookie 概述 Cookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。 HTTP 协议不带有状态，有些请求需要区分状态，就通过 Cookie 附带字符串... 3 年前
  64. 64 XMLHttpRequest 对象 简介 浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。 1999年，微软公司发布 IE 浏览器5.0版，第... 4 年前
  65. 65 同源限制 浏览器安全的基石是“同源政策”（same-origin policy）。很多开发者都知道这一点，但了解得不全面。 概述 含义 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策... 2 年前
  66. 66 CORS 通信 CORS 是一个 W3C 标准，全称是“跨源资源共享”（Cross-origin resource sharing），或者通俗地称为“跨域资源共享”。它允许浏览器向跨源的服务器，发出 XMLHttpRequest请... 3 年前
  67. 67 Storage 接口 概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口： window.sessionStorage和 window.localStorage。 sessionStorage保存的数据用于浏览器... 5 年前
  68. 68 History 对象 概述 window.history属性指向 History 对象，它表示当前窗口的浏览历史。 History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。 window.hist... 5 年前
  69. 69 Location 对象，URL 对象，URLSearchParams 对象 URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL。 Location 对象 Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过 window.locati... 5 年前
  70. 70 ArrayBuffer 对象，Blob 对象 ArrayBuffer 对象 ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。 这个对象是 ES6 才... 5 年前
  71. 71 File 对象，FileList 对象，FileReader 对象 File 对象 File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。 最常见的使用场合是表单的文件上传控件（ ... 7 年前
  72. 72 表单，FormData 对象 表单概述 表单（ <form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用，具体的控件种类和用法请参考 HTML 语言的教程。本章主... 5 年前
  73. 73 IndexedDB API 概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB... 5 年前
  74. 74 Web Worker 概述 JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大... 5 年前
  75. 75 <a> 元素 <a>元素用来设置链接。除了网页元素的通用接口（ Node接口、 Element接口、 HTMLElement接口），它还继承了 HTMLAnchorElement接口和 HTMLHyperlinkElementU... 7 年前
  76. 76 <img> 元素 概述 <img>元素用于插入图片，主要继承了 HTMLImageElement 接口。 浏览器提供一个原生构造函数 Image，用于生成 HTMLImageElement实例。 var img = new Imag... 7 年前
  77. 77 <form> 元素 <form>元素代表了表单，继承了 HTMLFormElement 接口。 HTMLFormElement 的实例属性 elements：返回一个类似数组的对象，成员是属于该表单的所有控件元素。该属性只读。 len... 7 年前
  78. 78 <input> 元素 <input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。 HTMLInputElement 的实例属性 特征属性 name：字符串，表示 <input>节点的名称。该属性可读写。 ty... 4 年前
  79. 79 <button> 元素 <button>元素继承了 HTMLButtonElement接口。它有以下的实例属性。 （1）HTMLButtonElement.accessKey HTMLButtonElement.accessKey属性返回... 7 年前
  80. 80 <option> 元素 <option>元素表示下拉框（ <select>， <optgroup>或 <datalist>）里面的一个选项。它是 HTMLOptionElement 接口的实例。 属性 除了继承 HTMLElement 接... 7 年前
  81. 81 <video>，<audio> 概述 <video>元素用来加载视频，是 HTMLVideoElement对象的实例。 <audio>元素用来加载音频，是 HTMLAudioElement对象的实例。而 HTMLVideoElement和 HTM... 5 年前
  82. 82 前言 我写这本教程，主要原因是自己需要。 编程时，往往需要查阅资料，确定准确用法。理想的 JavaScript 参考书，应该简明易懂，一目了然，告诉我有哪些注意点，提供代码范例。如果涉及重要概念，还应该适当讲解。可是大多... 8 年前