【JavaScript】简介

2024年4月28日 225次阅读 来源: sgosky

JavaScript诞生于1995年，它的重要目标是处置惩罚之前由服务器端言语担任的一些输入考证操纵。

完整的JavaScript完成由以下三个差别的部份构成：

  1. 中心（ECMAScript）

  2. 文档对象模子（DOM）

  3. 浏览器对象模子（BOM）

一、JavaScript简介

1.1 ECMAScript

ECMAScript是由EXMA-262定义的，它供应了中心言语功用。

Web浏览器只是ECMAScript完成能够的宿主环境之一。宿主环境不仅供应基础的ECMAScript完成，同时也会供应当言语的扩大，以便言语与环境之间对接交互。

ECMA-262划定这门言语的以下构成部份：语法、范例、语句、关键字、保留字、操纵符、对象

ECMAScript就是对完成该规范划定的各个方面内容的言语的形貌。
ECMAScript的差别版本又称为版次，以第x版示意。现在最新的是ECMAScript 6.0（简称：ES6）

1.2 文档对象模子（DOM）

文档对象模子（DOM，Document Object Model）是针对XML但经由拓展用于HTML的运用程序接口（API，Application Programming Interface）。

DOM把悉数页面映照为一个多层节点的构造（构造树）。HTML或XML页面中的每一个构成部份都是某种范例的节点，这些节点又包括着差别范例的数据。

DOM供应接见和操纵网页内容的要领和接口。

1.3 浏览器对象模子（BOM）

浏览器对象模子（BOM，Browser Object Model）是指能够接见和操纵浏览器窗口的运用程序接口（API）

BOM供应与浏览器交互的要领和接口。

二、在HTML中运用JavaScript

2.1 <script>元素

向HTML页面中插进去JavaScript的重要要领，就是运用<script>元素。

<script>中定义了以下5个属性：

async：可选，示意应当马上下载剧本，但不该阻碍页面中的其他操纵。只对外部剧本文件有用
defer：可选，示意剧本能够延晚到文档完整被剖析和显现以后再实行。只对外部剧本文件有用。
charset：可选，示意经由过程src属性指定的代码的字符集，比较罕用。
src：可选，示意包括要实行代码的外部文件
type：可选，示意编写代码运用的剧本言语的内容范例（也称为MIME范例）。在HTML5中，默许是text/javascript，所以不须要设置。

运用<script>元素嵌入JavaScript代码，有两种体式格局：

第一种：直接在页面中嵌入JavaScript代码，包裹在<script>元素之间：

<script>
    console.log('Hello World');
</script>

注重：在运用<script>嵌入JavaScript代码时，牢记不要在代码中的任何地方涌现</script>。
实行下面的代码时，会发生一个毛病：

<script>
function loadScript(){
alert('</script>');
}
</script>

JavaScript代码的实行递次：只需不存在defer和async属性，JavaScript代码就会从上至下顺次剖析。

第二种：运用外链剧本情势，必须有src属性，而且指定一个外部JavaScript文件的链接。

<script src=”example.js”></script>
注重：带有src属性的<script>元素不该当在其<script>和</script>标签之间再包括分外的JavaScript代码，嵌入代码会被疏忽。

只需不存在defer和async属性，浏览器都邑根据<script>涌现的先后递次对它们顺次举行剖析。

平常将悉数JavaScript援用放在<body>元素中页面的内容背面。

2.2 耽误剧本

当给<script>元素增加了defer属性时，src指向的外部文件会马上下载，但包括的剧本会延晚到浏览器碰到</html>标签（悉数页面剖析终了）后再实行（按增加递次实行），会先于DOMContentLoaded事宜实行。

<script defer=”defer” src=”example.js”></script>
<script async src=”example2.js”></script>
会先实行example.js，然后实行example2.js

注重：defer只合适外部剧本文件。

2.3 异步剧本

async与defer属性相似，都用于转变处置惩罚剧本的行动，适用于外部剧本文件，并通知浏览器马上下载，但标记为async的剧本并不保证根据指定它们的先后递次实行。

<script async src=”example.js”></script>
<script async src=”example2.js”></script>
两个实行递次不定。

指定async属性的目标是不让页面守候两个剧本下载和实行，从而异步加载页面其他内容。

注重：异步剧本不要在加载时期修正DOM。

异步剧本肯定会在页面的load事宜前实行，但能够会在DOMContentLoaded事宜触发之前或以后实行。

2.4 运用外部文件的优点

可保护性：将JavaScript文件都放在一个文件夹中，比每次都须要到差别的HTML页面修正JavaScript轻易保护。
可缓存：浏览器会缓存一切外部JavaScript文件，所以当你有多个页面运用同一个JavaScript剧本时，这个剧本只需下载一次。
2.5 <noscript>元素

当浏览器不支撑JavaScript或被禁用时，显现内里的内容。

<noscript>
 本页面须要浏览器支撑（启用）JavaScript
</noscript>

小结

  • JavaScript由ECMAScript、DOM、BOM三部份构成；

  • ECMAScript由ECMA-262定义，供应中心言语功用；

  • 文档对象模子（DOM），供应接见和操纵网页内容的要领和接口；

  • 浏览器对象模子（BOM），供应与浏览器交互的要领和接口；

  • 把JavaScript插进去到HTML页面中要运用<script>元素，能够内嵌，也能够外链文件；

  • 运用defer属性能够让剧本在文档完整显现以后再实行，耽误剧本老是根据它们的递次实行；

  • 运用async属性示意当前剧本没必要守候其他剧本，也没必要壅塞文档显现，不能保证根据它们在页面中涌现的递次实行。

  • 运用<noscript>元素能够指定在不支撑剧本的浏览器中显现的提醒内容。

    原文作者：sgosky
    原文地址: https://segmentfault.com/a/1190000008687516
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞