文章目录
JavaScript 是什么?JavaScript 简介1. JavaScript 的历史2. JavaScript 与 ECMAScript 的关系3. 如何运行 JavaScript4. JavaScript 具有以下特点
Node.js 是什么?Node.js 简介1. 运行时是什么?2. Node.js 的诞生3. Node.js 的组成4. 总结
第一个JavaScript 程序1. 在脚本文件中编写 JavaScript 代码2. JavaScript 代码执行顺序
JavaScript 中的几个重要概念1. 标识符2. 关键字3. 保留字4. 区分大小写5. 直接量
JS注释(多行注释+单行注释)1. 单行注释2. 多行注释3. 使用注释来阻止程序执行4. HTML 注释
JS 变量定义和赋值1. 变量的命名规则2. 定义变量3. 为变量赋值4. 变量提升5. let 和 const 关键字
JS 数据类型(基本数据类型+引用类型)1. JS 基本数据类型1) String 类型2) Number 类型3) Boolean 类型4) Null 类型5) Undefined 类型6) Symbol 类型
2. JS 引用数据类型1) Object 类型2) Array 类型3) Function 类型
JS 运算符汇总1. 算术运算符2. 赋值运算符3. 字符串运算符4. 自增、自减运算符5. 比较运算符6. 逻辑运算符7. 三元运算符8. 位运算符1) JS移位运算符2) JS逻辑位运算符
JS 输出语句汇总(5种)1. alert() 函数2. confirm() 函数3. console.log()4. document.write()5. innerHTML
JS if else语句:条件判断语句1. if 语句2. if else 语句3. if else if else 语句
JS switch case语句详解1. case 子句2. default语句
JS while循环语句的用法1. JS while 循环语法2. JS while 循环示例
JS do while循环语句的用法JS for循环语句的用法1. JS for 循环语法2. JS for 循环中的三个表达式3. JS for 循环嵌套4. for 循环变体1) for in循环语句的用法2) for of循环语句的用法
JS break和continue语句:跳出循环1. JS break 语句2. JS continue 语句3. JavaScript 标签
JS 函数(function)的定义和使用1. JS 定义函数2. JS 调用函数3. 参数的默认值4. JS 函数返回值5. JS 函数表达式
JS 事件(event)处理1. 事件绑定2. JS 事件示例
JS 作用域1. JS 全局作用域2. JS 局部作用域
JS 对象的创建和使用1. JS 创建对象2. 访问对象的属性3. 设置修改对象的属性4. JS 删除对象的属性5. JS 调用对象的方法
JS Number(数字)对象1. ±Infinity(无穷)2. NaN(非数字)3. Number 对象4. Number 属性5. Number 方法
JS String(字符串)对象1. String 对象中的属性2. String 对象中的方法3. 特殊字符
JS Array(数组)对象1. Array 对象中的属性2. Array 对象中的方法
JS Date(时间/日期)对象1. 创建 Date 对象2. Date 对象中的属性3. Date 对象中的方法
JS Math(数学)对象1. Math 对象中的属性2. Math 对象中的方法
JS RegExp(正则表达式)对象1. 定义正则表达式2. 使用正则表达式
JS DOM(文档对象模型)1. Document 对象2. Document 对象中的属性3. Document 对象中的方法
JS Element对象(元素对象)1. Element 对象中的属性2. Element 对象中的方法
JS attributes对象(元素属性对象)JS BOM(浏览器对象模型)1. window 对象中的属性2. window 对象中的方法
JS Navigator对象:获取浏览器信息1. navigator 对象中的属性2. navigator 对象中的方法
JS Screen对象:获取屏幕信息1. screen 对象中的属性2. 获取屏幕的宽度和高度3. 获取屏幕的颜色深度
JS Location对象:获取URL1. location 对象中的属性2. location 对象中的方法
JS History对象:获取浏览历史1. history 对象中的属性2. history 对象中的方法
JS 定时器:setTimeout和setInterval1. setTimeout()2. setInterval()3. JS 取消定时器
JS try catch用法:异常处理1. 错误和异常的区别2. JS 异常处理3. JS try catch finally 语句4. JS 抛出错误5. JS 错误类型
JS 表单验证1. 使用 JavaScript 进行表单验证2. 必填字段验证3. 数据格式验证
JS 动画效果的实现JS 调试(Debug)教程1. 控制台2. 如何调试 JavaScript 代码3. 断点调试1) 找到要调试的文件2) 打断点3) 断点调试4) 逐语句执行
4. debugger关键字
JS 闭包的原理和作用1. 什么是闭包2. 闭包的用途3. 闭包的高级用法
JS严格模式(use strict)1. 什么是严格模式2. 启用严格模式3. 严格模式中的变化
JS 解析JSON1. 什么是 JSON2. 在 JavaScript 中解析 JSON 数据3. 解析嵌套的 JSON 数据4. 将数据转换为 JSON
JS cookie的设置、获取和删除1. JS 设置 Cookie2. JS 获取 Cookie3. JS 修改或更新 Cookie 的值4. JS 删除 Cookie
JS Ajax 请求1. Ajax 的工作原理2. 发送 Ajax 请求3. 检索响应信息
JS 类型转换1. JS 隐式类型转换2. JS 强制类型转换1) 使用 Number() 函数2) 使用 parseInt() 函数3) 使用 parseFloat() 函数
JS 事件冒泡与事件捕获1. 事件捕获2. 事件冒泡3. 阻止事件捕获和冒泡4. 阻止默认操作
JS事件委托(事件代理)1. 为什么要使用事件委托2. 事件委托实现原理3. 事件委托的优点1) 减小内存消耗2) 动态绑定事件
4. 总结
JavaScript 是什么?JavaScript 简介
JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页,其中:
HTML 用来定义网页的内容,例如标题、正文、图像等;CSS 用来控制网页的外观,例如颜色、字体、背景等;JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的样式或其中的内容等,可以让网页更加生动。
1. JavaScript 的历史
JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。 之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
同一时期,微软和 Nombas(一家名为 Nombas 的公司)也分别开发了 JScript 和 ScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 ECMA-262 标准(ECMAScript)。
第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。
2. JavaScript 与 ECMAScript 的关系
ECMAScript(简称“ES”)是根据 ECMA-262 标准实现的通用脚本语言,ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分,目前 ECMAScript 的最新版是 ECMAScript6(简称“ES6”)。
至于 JavaScript,有时人们会将 JavaScript 与 ECMAScript 看作是相同的,其实不然,JavaScript 中所包含的内容远比 ECMA-262 中规定的多得多,完整的 JavaScript 是由以下三个部分组成:
核心(ECMAScript):提供语言的语法和基本对象;文档对象模型(DOM):提供处理网页内容的方法和接口;浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口。
3. 如何运行 JavaScript
作为一种脚本语言,JavaScript 代码不能独立运行,通常情况下我们需要借助浏览器来运行 JavaScript 代码,所有 Web 浏览器都支持 JavaScript。
除了可以在浏览器中执行外,也可以在服务端或者搭载了 JavaScript 引擎的设备中执行 JavaScript 代码,浏览器之所以能够运行 JavaScript 代码就是因为浏览器中都嵌入了 JavaScript 引擎,常见的 JavaScript 引擎有:
V8:Chrome 和 Opera 中的 JavaScript 引擎;SpiderMonkey:Firefox 中的 JavaScript 引擎;Chakra:IE 中的 JavaScript 引擎;ChakraCore:Microsoft Edge 中的 JavaScript 引擎;SquirrelFish:Safari 中的 JavaScript 引擎。 JavaScript 的特点
4. JavaScript 具有以下特点
1) 解释型脚本语言 JavaScript 是一种解释型脚本语言,与 C、C++ 等语言需要先编译再运行不同,使用 JavaScript 编写的代码不需要编译,可以直接运行。 2) 面向对象 JavaScript 是一种面向对象语言,使用 JavaScript 不仅可以创建对象,也能操作使用已有的对象。 3) 弱类型 JavaScript 是一种弱类型的编程语言,对使用的数据类型没有严格的要求,例如您可以将一个变量初始化为任意类型,也可以随时改变这个变量的类型。 4) 动态性 JavaScript 是一种采用事件驱动的脚本语言,它不需要借助 Web 服务器就可以对用户的输入做出响应,例如我们在访问一个网页时,通过鼠标在网页中进行点击或滚动窗口时,通过 JavaScript 可以直接对这些事件做出响应。 5) 跨平台 JavaScript 不依赖操作系统,在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行,只需要系统上的浏览器支持 JavaScript 即可。
Node.js 是什么?Node.js 简介
JavaScript 诞生于 1995 年,几乎是和互联网同时出现;Node.js 诞生于 2009 年,比 JavaScript 晚了 15 年左右。
在 Node.js 之前,JavaScript 只能运行在浏览器中,作为网页脚本使用,为网页添加一些特效,或者和服务器进行通信。有了 Node.js 以后,JavaScript 就可以脱离浏览器,像其它编程语言一样直接在计算机上使用,想干什么就干什么,再也不受浏览器的限制了。
Node.js 不是一门新的编程语言,也不是一个 JavaScript 框架,它是一套 JavaScript 运行环境,用来支持 JavaScript 代码的执行。用编程术语来讲,Node.js 是一个 JavaScript 运行时(Runtime)。 现在的 JavaScript 除了用于 Web 前端编程(网页编程),还能干很多事情,比如:
开发网站后台,这原本是 PHP、Java、Python、Ruby 等编程语言擅长的;开发 GUI 程序,也就是我们常说的带界面的电脑软件,比如 QQ、360、迅雷等;手机 APP,包括 Android APP、iOS APP;CLI 工具,也就是不带界面的命令行程序。
你看,学会了 JavaScript,你不但是全栈工程师,甚至还将无所不能,这都是 Node.js 带给我们的。
Node.js 官网中文版:https://nodejs.org/zh-cn/
1. 运行时是什么?
所谓运行时,就是程序在运行期间需要依赖的一系列组件或者工具;把这些工具和组件打包在一起提供给程序员,程序员就能运行自己编写的代码了。
对于 JavaScript 来说,它在运行期间需要依赖以下组件: 1) 解释器 JavaScript 是一种脚本语言,需要一边解释一边运行,用到哪些源代码就编译哪些源代码,整个过程由解释器完成。没有解释器的话,JavaScript 只是一堆纯文本文件,不能被计算机识别。 2) 标准库 我们在 JavaScript 代码中会调用一些内置函数,这些函数不是我们自己编写的,而是标准库自带的。 3) 本地模块 所谓本地模块,就是已经被提前编译好的模块,它们是二进制文件,和可执行文件在内部结构上没有什么区别,只是不能单独运行而已。这些本地模块其实就是动态链接库(在 Windows 下是 .dll 文件),如果你使用过C语言、C++ 等编译型语言,那你应该能够更好地理解它。
JavaScript 的很多功能都需要本地模块的支持,比如:
Cookie 用于存储少量的用户数据,它是用户计算机上的一种小文件,使用 Cookie 必须有文件操作模块的支持。Ajax 可以借助互联网从服务器请求数据,这是一种网络操作,必须有网络库的支持。一步一步跟踪代码的执行流程,从中发现逻辑错误,这个过程叫做调试,需要有调试器(Debugger)的支持。JavaScript 可以操作 HTML,这需要 HTML 解析模块提前构建起 DOM 树。
本地模块一般封装了通用功能,对性能要求较高,所以通常使用编译型语言来实现,比如C语言、C++、汇编语言等。
JavaScript 解释器需要本地模块的支持,标准库在编写时也会调用本地模块的接口,而我们编写的 JavaScript 代码一般不会直接使用本地模块,所以 Web 前端程序员触及不到它们。
本地模块是幕后英雄,它不显山露水,但是又不可或缺。
总结
解释器、标准库、本地模块等各种组件/工具共同支撑了 JavaScript 代码的运行,它们统称为 JavaScript 运行时。
在 Node.js 之前,JavaScript 运行时被绑定在浏览器中,作为浏览器的各种模块出现。这意味着,要想运行 JavaScript 代码就必须启动浏览器,JavaScript 逃不出浏览器的手掌心,它的功能受到很大的限制,只能作为网页脚本使用。
2. Node.js 的诞生
JavaScript 的一生伴随着浏览器大战。JavaScript 由 Netscape(网景)浏览器发布,但是 Netscape 在和 IE 的竞争中落败,早已不复存在;后来谷歌公司的 Chrome 浏览器异军突起,凭借强悍的性能把 IE 按在地上摩擦。
谷歌公司在 Chrome 浏览器中集成了一种名为“V8”的 JavaScript 引擎(也即 JavaScript 解释器),它能够非常快速地解析和执行 JavaScript 代码。
V8 引擎使用 C++ 语言编写,可以独立运行,也可以嵌入到任何其它 C++ 程序中。谷歌公司将 V8 引擎甚至整个 Chrome 浏览器都开源了,任何人都可以免费地将 V8 应用到自己的项目中。
V8 引擎的强大,以及当年 JavaScript 的火爆,使得一名叫 Ryan Dahl 的程序员动起了“歪心思”,他希望在浏览器之外再为 JavaScript 构建一个运行时,让 JavaScript 能够直接在计算机上运行,这样 JavaScript 就能像 Python、Ruby、PHP 等其它脚本语言一样大展宏图,不必再受限于浏览器,只能做一些小事情。
Ryan Dahl 和他的团队真的做到了,并且做得很好,他们将这套独立的 JavaScript 运行时命名为 Node.js;为了避免被误认为是 JavaScript 框架,现在也经常简称为 Node。
V8 引擎官网:https://v8.dev/
3. Node.js 的组成
Node.js 运行时主要由 V8 引擎、标准库和本地模块组成,尤其是本地模块的多少,从底层决定了 Node.js 功能的强弱。
1) V8 引擎 V8 引擎就是 JavaScript 解释器,它负责解析和执行 JavaScript 代码。
V8 引擎借鉴了 Java 虚拟机和 C++ 编译器的众多技术,它将 JavaScript 代码直接编译成原生机器码,并且使用了缓存机制来提高性能,这使得 JavaScript 的运行速度可以媲美二进制程序。
2) 本地模块 Node.js 集成了众多高性能的开源库,它们使用 C/C++ 语言实现,比如:
模块说明libuv一个跨平台的、基于事件驱动的异步 I/O 库。但是 libuv 不仅限于 I/O,它还提供了进程管理、线程池、信号处理、定时器等其它功能。Linux 中一切皆文件,这里的 I/O 不仅仅包括文件读写,还包括数据库读写、网络通信(socket)等。nmpNode.js 包管理器,可以下载包、安装包、卸载包、更新包、上传包等。http_parser一款由C语言编写的轻量级 HTTP 解析器,用以支持 Web 应用开发。zlib工业级的数据压缩/解压模块,Nodejs 借助 zlib 来创建同步、异步或者流式的压缩/解压接口。OpenSSL该模块提供了经过严密测试的许多加密/解密功能,现代 Web 依赖这些功能来实现安全性,比如 SSL 协议和 https 协议。c-ares异步 DNS 查询和解析库。
Node.js 直接在计算机上运行 JavaScript 代码,并且要赋予 JavaScript 强大的能力,所以它的本地模块和浏览器中的运行时有很多大区别,甚至说几乎没有什么关联。Node.js 几乎完全抛弃了浏览器,自己从头构建了一套全新的 JavaScript 运行时。
3) 标准库 本地模块使用 C/C++ 编写,而 Node.js 面向 JavaScript 开发人员,所以必须要封装本地模块的 C/C++ 接口,提供一套优雅的 JavaScript 接口给开发人员,并且要保持接口在不同平台(操作系统)上的一致性。
这套 JavaScript 接口,就是 Node.js 标准库。标准库是否优雅和强大,决定了 Node.js 的易用性,直接影响 Node.js 的市场表现。
总结 V8 引擎和众多本地模块都是现成的,别人已经造好了轮子,Node.js 的主要工作就是选择合适的模块,将它们集成在一起,并编写好 JavaScript 接口。
当然,并不是所有的本地模块都能找到合适的,Node.js 也自己编写了几个模块,典型的代表就是 Libuv。Libuv 是 Node.js 最核心最基础的模块,Node.js 完全基于 Libuv 而构建。
你可能听说过 Node.js 采用了基于事件的、单线程的异步 I/O 架构,这是 Node.js 最大的特点,也是它和其它脚本语言最大的区别,Node.js 的这种能力就是依赖 Libuv 实现的。
Libuv 如此强大,官方决定将它从 Node.js 中剥离出来,作为一个单独的网络库发布,并且开源免费。现在的 Libuv 已经变得非常流行,和传统的 Libevent 和 libev 库并称为“C/C++ 三大网络库”。
Node.js 之所以大名鼎鼎,主要是因为它采用了 V8 引擎和 Libuv 库:V8 引擎保证了 Node.js 运行高效,Libuv 库提供了基于事件循环的异步 I/O 能力。
Libuv 官网:http://libuv.org/
4. 总结
Node.js 是一个 JavaScript 运行时,它让 JavaScript 脱离了浏览器环境,可以直接在计算机上运行,极大地拓展了 JavaScript 用途。我们应该将 JavaScript 和 Python、Java、Ruby 等其它编程语言同等对待,不能再将它视为一种“小玩意”。
最后我们来汇总一下 JavaScript 和 Node.js 的历史:
Netscape 浏览器衍生出了 JavaScript 脚本,赋予网页编程能力;Chrome 浏览器衍生了 V8 引擎,提高了 JavaScript 性能;V8 引擎构建了 Node.js,拓展了 JavaScript 的编程能力;Node.js 衍生了 Libuv 库,给网络开发增加了一款优秀的工具。
第一个JavaScript 程序
JavaScript 程序不能够独立运行,只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中,借助浏览器环境来运行。
在 HTML 文档中嵌入 JavaScript 代码 在 HTML 页面中嵌入 JavaScript 脚本需要使用
<
s
c
r
i
p
t
>