JavaScript技术入门|当前动态

2023-03-07 17:08:36 来源: 腾讯云

介绍

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 页面的 和 部分中。那些老旧的实例可能会在 <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 文档中。

我的第一个段落。

<script>

document.write(Date());

</script>

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

JavaScript 数据类型

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

stringnumberbooleanobjectfunction

3 种对象类型:

ObjectDateArray

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

nullundefined

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

请注意:

NaN 的数据类型是 number数组(Array)的数据类型是 object日期(Date)的数据类型为 objectnull 的数据类型是 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"; //stringvar 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] + "
"); document.write(cars[1] + "
"); document.write(cars[2] + "
"); break list;document.write(cars[3] + "
"); document.write(cars[4] + "
"); document.write(cars[5] + "
"); }

HTML DOM事件

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

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

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

javascript:void

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

单击此处什么也不会发生

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

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

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

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

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

点我!,在用户点击链接后显示警告信息

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

推荐书籍

《JavaScript 高级程序设计(第 3 版)》:俗称红宝书,只是这本书版本有些旧,第四版预计于 2020 年下半年出版,可以关注一下。这本书前七章讲的是语言特性,一定要掌握。如果你有其他语言的编程基础,理解起来会更快。第 8、10-14、20、21、23、24 章也要重点看,第 25 章的第一节也要看,其他没提到的章节属于非重点的扩展内容,有空就大概读一下。至于 XML 这种过时的东西就不用看了,书中有大量 API 的章节,不用死记硬背,浏览一下就行,用到再回来查。你一定要先看《现代 JavaScript 教程》再看这本红宝书,因为这里的内容在教程中都有,而且都是最新的,红宝书只是用于复习巩固。《JavaScript 权威指南》:俗称犀牛书,和《CSS 权威指南》类似,都是大而全的工具书。《ES6 标准入门》:你一定听过 ES6 或者 ES2015 吧,其实指的是一个东西,就是 2015 年发布的 ECMAScript 规范,发布的一些语言特性。这本书是阮一峰老师的书,是学习 ES6 必买书籍,当然里面也参杂了一些作者的个人理解。《深入理解 ES6》:尼古拉斯大佬的力作,必买书籍!讲解非常详细且深入。《深入理解 JavaScript 特性》:尼古拉斯大佬的最新书籍,由李松峰老师翻译,主要讲的也是 ES6 的内容。《JavaScript DOM 编程艺术》:DOM 必备书籍,本书主要讲的是 DOM 知识,还会带你通过实战深入理解相关知识,很有帮助。《JavaScript 语言精粹》:俗称蝴蝶书,很薄的一本,里面讲的都是 JavaScript 语言最核心的部分。半天就能看一遍,可以买了反复看。《Head First JavaScript 程序设计》:这本书对于没有编程经验的新手友好,内容比较简单。

标签:

相关热词搜索:

[责任编辑:]

相关阅读

最近更新