一.初识JavaScript

前言

本系列旨在记录自己学习JavaScript的笔记，文章中有许多知识来源于《JavaScript高级程序设计》和《JavaScript权威指南》两本书中，以及B站上的相关视频教程。

1.什么是JavaScript

1995年，JavaScript问世。当时，它的主要用途是代替Perl等服务器端语言处理输入验证。在此之前，要验证某个必填字段是否已填写，或者某个输入的值是否有效，需要与服务器的一次往返通信。网景公司希望通过在其Navigator浏览器中加入JavaScript来改变这个局面。

由于JavaScript 1.0很成功，网景又在Netscape Navigator 3中发布了1.1版本。尚未成熟的Web的受欢迎程度达到了历史新高，而网景则稳居市场领导者的位置。这时候，微软决定向IE投入更多资源。就在Netscape Navigator 3发布后不久，微软发布了IE3，其中包含自己名为JScript（叫这个名字是为了避免与网景发生许可纠纷）的JavaScript实现。1996年8月，微软重磅进入Web浏览器领域，这是网景永远的痛，但它代表JavaScript作为一门语言向前迈进了一大步。微软的JavaScript实现意味着出现了两个版本的JavaScript：Netscape Navigator中的JavaScript，以及IE中的JScript。与C语言以及很多其他编程语言不同，JavaScript还没有规范其语法或特性的标准，两个版本并存让这个问题更加突出了。

随着业界担忧日甚，JavaScript终于踏上了标准化的征程。1997年，JavaScript 1.1作为提案被提交给欧洲计算机制造商协会（Ecma）。第39技术委员会（TC39）承担了“标准化一门通用、跨平台、厂商中立的脚本语言的语法和语义”的任务（参见TC39-ECMAScript）。TC39委员会由来自网景、Sun、微软、Borland、Nombas和其他对这门脚本语言有兴趣的公司的工程师组成。他们花了数月时间打造出ECMA-262，也就是ECMAScript（发音为“ek-ma-script”）这个新的脚本语言标准。1998年，国际标准化组织（ISO）和国际电工委员会（IEC）也将ECMAScript采纳为标准（ISO/ IEC-16262）。自此以后，各家浏览器均ECMAScript作为自己JavaScript实现的依据，虽然具体实现各有不同。

大致上，JavaScript这个术语通常涵盖了以下3个部分。

ECMAScript—语言的核心部分（即变量，函数，循环等等）：这个部分独立于浏览器之外，并可以在其他环境中使用。
-文档对象模型（DOM）：它实际上是提供了一种与HTML、XML文档交互的方式。最初，JavaScript只能提供对页面上一部分元素的有限访问能力，主要集中在表单，超链接和图片这些元素上。后来权限逐渐被扩大，如今几乎所有元素都已经可以访问了。为此，万维网联盟（W3C）还专门创建了DOM标准。该标准是一种独立的（即它并不依赖于JavaScript）操作结构化文档的方式。
浏览器对象模型（BOM）：这实际上是一个与浏览器环境有关的对象集合。原本没有任何标准可言，直到HTML5诞生之后，人们才定义了一些浏览器之间通用的对象标准。

2.如何引入JavaScript

2.1<script>元素

将JavaScript插入HTML的主要方法是使用<script>元素。这个元素是由网景公司创造出来，并最早在Netscape Navigator 2中实现的。后来，这个元素被正式加入到HTML规范。<script>元素有下列8个属性。

async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
charset：可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在IE7及更早的版本中，对行内脚本也可以指定这个属性。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2"或"VBScript”）。大多数浏览器都会忽略这个属性，不应该再使用它。
src：可选。表示包含要执行的代码的外部文件。
type：可选。代替language，表示代码块中脚本语言的内容类型（也称MIME类型）。按照惯例，这个值始终都是"text/javascript尽管”text/javascript“和”text/ecmascript"都已经废弃了。JavaScript文件的MIME类型通常是"application/x-javascript"，不过给type属性这个值有可能导致脚本被忽略。在非IE的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"。如果这个值是module，则代码会被当成ES6模块，而且只有这时候代码中才能出现import和export关键字。

使用<script>的方式有两种：通过它直接在网页中嵌入JavaScript代码，以及通过它在网页中包含外部JavaScript文件。

要嵌入行内JavaScript代码，直接把代码放在<script>元素中就行：

<script>   
function helloWorld() { 
	console.log("Hello World");   
} 
</script>

要包含外部文件中的JavaScript，就必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

<script src="example.js"></script>

这个例子在页面中加载了一个名为example.js的外部文件。文件本身只需包含要放在<script>的起始及结束标签中间的JavaScript代码。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。（阻塞时间也包含下载文件的时间。）

使用了src属性的<script>元素不应该再在标签中再包含其他JavaScript代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

2.2标签位置

过去，所有<script>元素都被放在页面的标签内，如下面的例子所示：

<!DOCTYPE html> 
<html>    
	<head>   
	<title>Example HTML Page</title>  
	<script src="example1.js"></script>   
	<script src="example2.js"></script>   
	</head>   
	<body>   <!-- 这里是页面内容 -->   
	</body> 
</html>

这种做法的主要目的是把外部的CSS和JavaScript文件都集中放到一起。不过，把所有JavaScript文件都放在<head>里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面，如下面的例子所示：

<!DOCTYPE html>
<html>
	<head>
	<title>Example HTML Page</title>
	</head>
	<body>
	<!--这里是页面内容-->
	<script src="example1.js"></script>
	<script src="example2.js"></script>
	</body>
</html>

这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

2.3行内代码与外部文件

虽然可以直接在HTML文件中嵌入JavaScript代码，但通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。

可维护性。JavaScript代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的HTML页面来编辑代码。
-浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。

2.4<noscript>元素

针对早期浏览器不支持JavaScript的问题，需要一个页面优雅降级的处理方案。最终，<noscript>元素出现，被用于给不支持JavaScript的浏览器提供替代内容。虽然如今的浏览器已经100%支持JavaScript，但对于禁用JavaScript的浏览器来说，这个元素仍然有它的用处。

浏览器不支持脚本；
浏览器对脚本的支持被关闭。

任何一个条件被满足，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

下面是一个例子：

<!DOCTYPE html> 
<html>    
	<head>   
	<title>Example HTML Page</title>   
	<script defer="defer" src="example1.js"></script>   
    <script defer="defer" src="example2.js"></script>   
	</head>   
    <body> 
	<noscript> 
   	 <p>This page requires a JavaScript-enabled browser.</p> 
	</noscript>   
	//这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。
	</body> 
</html>

最后给大家推荐两本JavaScript的语法书也就是我最开始提到的两本语法书的电子版。
链接：百度网盘
提取码：1234
--来自百度网盘超级会员V3的分享

posted @ 2023-01-12 19:04 蜡笔晓天阅读(22) 评论(0) 收藏举报来源

刷新页面返回顶部

zxtgiser