JavaScript技术入门(javascript进阶教程)

南窗分类：IT技术人气：102 回帖：0 发布于1年前收藏

介绍

JavaScript web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript ，这个版本就是1.0版。

ECMAScript 和 JavaScript 的关系是，ECMAScript 是一个简单的 JavaScript 标准规范，JavaScript 是 ECMAScript 的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript ）。并且，ECMAScript 持续不断的为 JavaScript 添加新功能。

从 1997年7月 ECMAScript 1.0发布到现在，ECMAScript 已经正式发布了 11 版，下面我们主要介绍从ES6（ES2015）到ES11（最新 ES2020 ）期间，每版发布的新功能。

ES6、ES7、ES8、ES9、ES10新特性一览：https://juejin.cn/post/6844903811622912014

本文并没有详细介绍每个知识点，因为官方的文档介绍的更好，建议前往学习（https://www.w3cschool.cn/javascript/），本文主要记录一些重点内容和细节。

基础概念

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。

可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件。

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。出于测试目的，您可以将JavaScript直接写在HTML 文档中。

<p>我的第一个段落。</p>

document.write(Date());

</script>

请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

JavaScript 数据类型

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

constructor 属性返回所有 JavaScript 变量的构造函数。

"John".constructor // 返回函数 String() { [native code] } (3.14).constructor // 返回函数 Number() { [native code] }

可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }

变量

字符串（String）字面量 可以使用单引号或双引号。函数（Function）字面量 定义一个函数，如：function myFunction(a, b) { return a * b;}。var 关键词告诉浏览器创建一个新的变量，如var x=5;。可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可，声明也可横跨多行，如：var lastname="Doe", age=30, job="carpenter";。

JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符，包含标点等字符。JavaScript 中，常见的是驼峰法的命名规则。JavaScript 对大小写是敏感的。

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。在 JavaScript 中，用分号来结束语句是可选的。

可以在文本字符串中使用反斜杠对代码行进行换行。单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。

无值的变量。未使用值来声明的变量，其值实际上是 undefined。如果重新声明 JavaScript 变量，该变量的值不会丢失。

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。局部变量，包括 window 对象可以覆盖全局变量和函数。

全局方法 String() 可以将其它类型的变量转换为字符串。String(123) // 将数字 123 转换为字符串并返回

将其它类型变量的方法toString()也是有同样的效果。(123).toString()

全局方法 Number() 可以将字符串转换为数字。空字符串转换为 0。其他的字符串会转换为 NaN (不是个数字)。parseFloat()和parseInt()，如parseInt("10")

全局方法 Number() 可将布尔值和日期转换为数字。

Operator + 可用于将变量转换为数字。

var y = "5"; //string var x = + y; //number

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null // 返回 5 because null is converted to 0 "5" + null // 返回"5null" because null is converted to "null" "5" + 1 // 返回 "51" because 1 is converted to "1" "5" - 1 // 返回 4 because "5" is converted to 5

在 JavaScript 中 null 表示 "什么都没有"，是一个只有一个值的特殊类型，表示一个空对象引用。当设置为“null”时，可以用来清空对象

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法。

isNaN(x)可以判断是否为NaN

js支持自增和自减运算符、三目运算符。===是绝对等于（值和类型均相等）

把十进制转换为二进制

function dec2bin(dec){ return (dec >>> 0).toString(2); }

把二进制转换为十进制

function bin2dec(bin){ return parseInt(bin, 2).toString(10); }

js支持for、while、do...while、for in、switch、break、continue等控制语句。Switch case 使用严格比较（===）。

var person={fname:"John",lname:"Doe",age:25}; for (x in person){ txt=txt + person[x]; }

数组

下面的代码创建名为 cars 的数组：

var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

var cars=["Saab","Volvo","BMW"];

对象

对象属性有两种寻址方式：

name=person.lastname; name=person["lastname"];

声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

字符串

可以使用索引位置来访问字符串中的每个字符：var character = carname[7];

可以在字符串添加转义字符来使用引号：var answer = 'It\'s alright';

可以使用内置属性 length 来计算字符串的长度

可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")，不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用，如不是绝对等于（===）。

字符串有很多方法，如charAt()和indexOf()，参考：https://www.w3cschool.cn/javascript/js-strings.html

表单验证

function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x==""){ alert("姓必须填写"); return false; } }

JavaScript 标签

如需标记 JavaScript 语句，请在语句之前加上冒号： label: statements

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

cars=["BMW","Volvo","Saab","Ford"]; list:{ document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); }

HTML DOM事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

参考：https://www.w3cschool.cn/jsref/dom-obj-event.html

javascript:void

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(alert('Warning!!!'))">点我!</a>，在用户点击链接后显示警告信息

function getValue(){ var a,b,c; a = void ( b = 5, c = 7 ); document.write('a = ' + a + ' b = ' + b +' c = ' + c ); }

输出：a = undefined b = 5 c = 7

正则表达式

正则表达式是由一个字符序列形成的搜索模式。字面量的形式（var patt = /school/i）和构造函数形式等价（var patt1=new RegExp("school", "i");）。

var patt = /school/i

/school/i 是一个正则表达式。

school 是一个模式 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。

var str = "Visit school"; var n = str.search(/school/i);

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式，这时区分大小写，如var n = str.search("school");

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 school : var str = "Visit Microsoft!"; var res = str.replace(/microsoft/i, "school");

replace() 方法将接收字符串作为参数：varres = str.replace("Microsoft","school");

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/; patt.test("The best things in life are free!");

或

/e/.test("The best things in life are free!")

exec() 方法是一个正则表达式方法。exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为: e

compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数。 var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); patt1.compile("d"); document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：truefalse

异常处理

try{ //在这里运行代码

}catch(err){

//在这里处理错误

}

throw 语句允许我们创建自定义错误。创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么能够控制程序流，并生成自定义的错误消息。

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

调试

在浏览器调试窗口中，你可以设置 JavaScript 代码的断点。

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用，debugger 语句将无法工作。

var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x;

JSX

React 使用一种名为 JavaScript XML (JSX) 的特殊语法。借助 JSX，你可将 HTML（或可能会创建的自定义组件）和 JavaScript 集成到一个文件中，甚至可以集成到单个代码行中。通过使用 JSX，你可以依赖 JavaScript 语法来实现逻辑。

浏览器本机不支持 JSX。因此，必须从 JSX 文件生成 JavaScript 和 HTML，才能由浏览器呈现它们。有几种捆绑程序和其他工具可以执行所需完成的任务。这些工具包括Webpack和Snowpack。

参考：

https://www.w3cschool.cn/react_tutorial/dotlhozt.html

https://www.papermachined.com/React/1.html#%E4%BB%80%E4%B9%88%E6%98%AFjsx

ES6

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，当前使用的比较广泛。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。

虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。了解ES6语法之前，我们得先了解下Babel。 Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看。

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

ES6特性学习参考：

https://segmentfault.com/a/1190000004365693

https://segmentfault.com/a/1190000004368132

JQuery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

学习地址：https://www.w3school.com.cn/jquery/index.asp

JQuery UI

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择，是由jquery官方维护的ui方向的插件，是免费的界面库。

jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

官网：https://www.jqueryui.org.cn/

学习地址：https://www.runoob.com/jqueryui/jqueryui-tutorial.html

JQuery EasyUI

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，是第三方维护的插件，商业应用要钱的界面库。

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。

官网：https://www.jeasyui.net/

学习地址：https://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

学习途径

在线学习

javascript知识图谱：https://www.w3cschool.cn/javascript/javascript-skillmap.html

w3cschool：https://www.w3cschool.cn/javascript/

w3cschool：https://www.w3school.com.cn/js/index.asp

菜鸟教程：https://www.runoob.com/js/js-tutorial.html

介绍