JavaScript的学习笔记,随手记一记

JavaScript简介

JavaScript诞生于1995年,当时是为了解决在客户端实现一些输入验证而诞生,而如今,JavaScript已经成为了一门功能全面的编程语言,能够处理复杂的计算以及交互,同时也成为了web的重要组成部分。
JavaScript是一门解释型的脚本语言,通过其宿主环境来实现各种功能。JavaScript还是一门弱类型的编程语言,没有各种各样的类型声明。

JavaScript的标准化


在1997年,以JavaScript-1.1为蓝本的建议被提交给欧洲计算机制造协会(ECMA,European Computer Manufacturers Association)。该协会指定39号技术委员会(TC39,Technical Committee #39)负责“标准化一种通用的、跨平台、供应商中立的脚本语言的语法和语义”。最后通过来自Netscape、Sun、微软、Borland及其它关注脚本语言的发展的公司的程序员,经过数月的努力完成了EMCA-262——定义了一种名为ECMAScript的新脚本语言标准。第二年,ISO/IEC(国际标准化组织和国际电工委员会)也采用了EMCAScript作为标准(ISO/IEC-16262)

在此之后各个浏览器厂商便开始将EMCAScript作为各自实现JavaScript的基础。

JavaScript的实现


一个完整的Javascript实现应该由以下三个部分组成:

EMCAScript

EMCA-262定于的EMCAScript与浏览器没有依赖关系。浏览器只是可能实现EMCAScript的宿主环境之一,Node(Node.js)和Adobe Flash也是宿主环境。
EMCA-262规定了语言的语法、类型、语句、关键字、保留字、操作符、对象。

文档对象模型(DOM)

来自MDN的解释:
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改。

DOM提供如下对文档的层级(树级)模型

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
    </div>
</body>
</html>

DOM级别
DOM标准的级别或版本,版本从0级开始,但实际上并不存在DOM0级,这只是DOM历史坐标的一个参考点,表示由Internet Explorer4.0和Netscape Navigator4.0最初支持的DHTML。

在后续的DOM版本中加入了许多新的模块,实际上如今的DOM版本并不仅仅只是提供对文档的对象模型接口,还包括:

  • DOM视图:定义了跟踪不同文档视图的接口(比如应用CSS文档前后的文档)
  • DOM事件:定义了事件和事件处理的接口
  • DOM样式:定义了基于CSS为元素应用样式的接口
  • DOM遍历与范围:定义了遍历和存在文档树的接口
  • ......

实际上DOM并不只是针对于Javascript的,许多其它的语言也实现并应用了DOM

浏览器对象模型(BOM)

参见链接:https://www.jianshu.com/p/0c8b34111e95
BOM,Browser Object Model,即浏览器对象模型。浏览器页面初始化时,会在内存创建一个全局对象,用来描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型。

不同于DOM的标准化组织是W3C,JavaScript的语法标准化组织是ECMA,BOM没有官方标准,它最初是Netscape浏览器标准的一部分,也就是说,对于现代浏览器,每个浏览器都有自己的BOM实现方法,所以直接使用BOM会有兼容性问题

BOM有一个核心对象window,window对象包含了6大核心模块

  • document对象,即文档对象
  • frames,即HTML自框架
  • history,即页面的历史记录
  • location,即当前页面的地址
  • navigator,包含浏览器相关信息
  • screen,用户显示屏幕相关属性

JavaScript在HTML文档中的使用


通过在HTML文档中插入<script>元素来使用JavaScript。通常有两种使用方式:

  • 使用嵌入式JavaScript代码:只需要把JavaScript代码放在<script>元素中即可
  • 使用外部JavaScript代码:通过指定<script>元素的属性来引用外部JavaScript文档

嵌入式JavaScript代码
HTML文档:

<html>
    <head>
        <script type="text/javascript">
            function demo(){
                alert("Hello World!");
            }
            demo();
        </script>
    </head>
    <body>
    </body>
</html>

外部JavaScript代码
HTML文档:

<html>
    <head>
        <script type="text/javascript" src="./demo.js">
        </script>
    </head>
    <body>
    </body>
</html>

JavaScript文档:

function demo(){
    alert("Hello World!");
}
demo();

<scriipt>元素的属性
<script>元素的各个属性:参见MDN

JavaScript脚本的执行顺序
按照在HTML文档中<script>元素出现的先后顺序,对元素所包含的JavaScript代码依次解析执行,无论是嵌入式JavaScript代码,还是外部JavaScript代码。但是当<script>元素指定了async或defer属性时,该顺序可能会方式改变。

MIME类型


媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。

重要:浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理URL,因此Web服务器在响应头中添加正确的MIME类型非常重要。如果配置不正确,浏览器可能会曲解文件内容,网站将无法正常工作,并且下载的文件也会被错误处理。

参见MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

JavaScript在XHTML文档中的使用


参见来自MDN的解释:
XHTML(eXtensible HyperText Markup Language,可扩展超文本标记语言)

2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。

XHTML是在2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准的,认为是HTML的一个最新版本,并且将逐渐替换HTML。现在所有的浏览器都支持XHTML,XHTML兼容 HTML 4.0。

简单来讲:XHTML是在HTML的基础上,对于语法的要求更加的严格的一种新的语言。

需要注意的是,在XHTML中一些在HTML下可以被解析的语句,在XHTML中无法被解析,比如:

<script type="text/javascript">
    function max(a,b){
        if(a>b)
            return a;
        else
            return b;
    }
    max(4,6);
</script>

在上面的代码块中">"号对于XHTML来说会被认为是一个新的标签的开始,因此会出现语法错误。为了避免这些错误通常有两种方法:

  • 使用相应的HTML实体来替换代码中对于XHTML存在歧义的符号
  • 使用CDATA片段来包含JavaScript代码块

HTML实体对照表:

HTML实体代码符号含义
&lt;<小于
&gt;>大于
&amp;&和号
&apos;'省略号
&quot;"引号

使用CDATA片段demo:

<script type="text/javascript"><![CDATA[
    function max(a,b){
    if(a>b)
        return a;
    else
        return b;
    }
    max(4,6);
]]></script>

注:可以通过将页面的MIME类型指定为application/xhtml+xml来让浏览器以XHMTL标准来解析页面文档,但是这依赖于浏览器是否支持该行为。

嵌入代码还是使用外部文件


在上面我们已经知道在HTML中使用JavaScript代码有两种方法,但在实际应用中,最好使用外部文件来包含JavaScript代码,这种方法有如下优点:

  • 可维护性:将JavaScript代码与HTML标签分离,将提升JavaScript代码的阅读性,在大型项目中常常有许多的HTML文件和JavaScript代码文件,如果选择将JavaScript代码嵌入HTML文件中将不利于JavaScript代码的管理。
  • 可缓存:浏览器能够根据具体的设置来链接所有的外部JavaScript文件。也就是说,如果存在着两个或两个以上的页面使用了同一个JavaScript文件那么该文件不需要下载两次,因此可以加快页面的加载速度。
  • 适应未来:对于HTML与XHTML来说,通过外部文件来包含JavaScript代码,所使用的语法是相同的。

文档模式


文档模式(文档类型)声明告诉浏览器使用何种HTML或XHTML标准来解析该文档,这主要是为了让浏览器行为一致,防止浏览器进入混杂模式,在混杂模式下,不同的浏览器对CSS的解析执行会出现非常大的差异,并且在某些情况下会影响到JavaScript的解析与执行。

下面是MDN对文档类型声明的解释:
在HTML中,文档类型声明是必要的。在所有的文档的头部,你都将会看到<!DOCTYPE html>的身影。这个声明的目的是防止浏览器在渲染文档时,切换到我们称为“怪异模式(兼容模式)”的渲染模式。<!DOCTYPE html> 确保浏览器按照最佳的相关规范进行渲染,而不是使用一个不符合规范的渲染模式。

当浏览器不支持(未启用)JavaScript时


对于现代浏览器来说基本上都支持JavaScript,但是也许会存在着一些JavaScript被禁用的情况,因此对这类问题,可以通过使用<noscript>元素来解决。

在HTML中加入<noscript>标签,当JavaScript被禁用时,浏览器会显示<noscript>标签的内容,可以用作提示信息。

比如下面这个简单的例子:

<html>
    <head>
        <script type="text/javascript">
            function demo(){
                alert("Hello World!");
            }
            demo();
        </script>
    </head>
    <body>
        <noscript>
            <p>您的浏览器未启用(不支持)JavaScript</p>
        </noscript>
    </body>
</html>
Last modification:April 15th, 2020 at 09:11 am