重学JavaScript【JavaScript历史及脚本引用】

简介: 重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。

网络异常,图片无法展示
|

重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈)github 上。


JavaScript问世


JavaScript 最开始的用途是代替 perl 等后端语言处理输入验证的。在那个年代,验证输入是需要走接口的的,为了解决这一问题,1995年,网景 公司开发了叫 **Mocha(后改名为 LiveScript) **的脚本语言,为了赶时间,网景 和 Sun公司合作,但是后来网景把它改名为 JavaScript,目的就是当时 Java 的炒作,想蹭热度。

JavaScript1.0 问世之后,Web 领域受欢迎程度创历史新高,而网景也成了市场的领导者。这时候微软不服,花了大量资源定向投入 IE,而微软创立的语言叫 JScript(为了避免纠纷)。

1996年,微软开始重磅进入 Web 领域,慢慢的 JavaScript 也规范了起来。

1997年,JavaScript1.1 作为提案被提交给 ECMA(欧洲计算机制造商协会),之后该组织开始标准化Web脚本,打造了新的 ECMAScript

1998年,ISO(国际标准化组织) 和 IEC(国际电工委员会) 也将 ECMAScript 作为标准,从此各家浏览器都开始用 ECMAScript 作为自己的JavaScript实现依据。


组成



ECMAscript

JavaScript 包括了:核心(ECMAscript), 文档对象模型(DOM),浏览器对象模型(BOM),也就是说JavaScript 是一个有自己规范和组成的成品,而ECMAScript是一个定义的语言,它并不局限于浏览器,它定义的只是一个基准,浏览器只是ECMAScript实现的一个宿主环境。如果不涉及浏览器,ECMAScript定义了以下部分:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 全局对象

所以有关前端的JS语言更新,新的API的使用,其实是基于ECMAScript的更新。


DOM

DOM(文档对象模型) 是一个API,用于在 HTML 中使用扩展的 XML,DOM其实就是把整个页面抽象成一个分组了的节点,它们包含了不同的数据。

大多数情况下一个HTML页面的DOM包括 head 和 body,DOM可以通过创建文档树来让开发者随心所欲控制网页的内容和结构,并且通过开发的 DOM API 可以轻松的对DOM进行增删改查。


BOM

BOM(浏览器对象模型) 也是一个API,它是用来访问和操作浏览器窗口的,在各家浏览器百花争艳的年代,BOM没有一个统一的标准,从HTML5出现之后,这个版本的HTML以正式规范的形式涵盖了尽可能多的BOM。

总体来说,BOM主要针对于浏览器窗口和子窗口(frame),对于它们,有一套专门的API。


JavaScript脚本


一般情况下,我们通过 <script> 元素插入HTML,来实现脚本运行,<script> 元素一共有8个属性:

  • async:异步下载脚本,只对外部脚本文件有效
  • defer:同步下载脚本,脚本可以延迟到文档解析显示完毕,只对外部脚本有效
  • crossorigin:配置请求的CORS,默认不使用,该配置主要表示需不需要请求凭据
  • integrity:允许比对接收到的资源和加密签名,如果签名不匹配,脚本不会执行
  • src:要执行的外部文件
  • language:弃用,表示语言类型
  • type:代替 language,表示脚本的 MIME 类型。一般情况下为 "text/javascript",MIME类型通常是 "application/x-javascript" ,如果该属性设置为 module,表示代码会当成 ES6 模块,此时才可以使用 importexport 关键字。

<script> 元素最强大的也是最受争议的,在于可以包含来自外域的 JavaScript 文件,再请求时,浏览器会发送 GET 请求获取文件,如果该文件是 JavaScript 类型,那么该请求就不受浏览器的同源策略限制,但是返回并执行的javascript受限制。此时,来自外域的代码会被当成该页面的一部分加载,此时就会有危险性,所以要保证域的安全性。

过去,<script> 被放在 <head> 中间,目的是为了把所有的外部文件都集中到一起,但是这样也就意味着必须把所有代码都下载,解析和解释完后,才开始渲染页面,所以现代Web通常将所有JavaScript放在 <body> 内部,从而加快页面的加载速度,减少白屏。


加载

一般情况下,可以通过如下方法往页面中加入脚本:

let script = document.createElement('script'); 
script.src = 'test.js'; 
document.head.appendChild(script);
复制代码

这种方式是异步加载的,其实就相当于给脚本添加了 async 属性,但是有的浏览器不支持该属性,所以最好的做法是加上 script.async = false ,从而将代码变为同步加载。


文档模式

文档模式 是由IE5.5发明的,即可以使用 doctype 切换文档模式,最初有 混杂模式标准模式,后来出现了 准标准模式,而到现在HTML5,对于文档类型已经同意,由最初的混杂的写法,全部统一为<!DOCTYPE html>


noscript

noscript 标签是针对不支持JavaScript浏览器而出现的,如果浏览器不支持JavaScript,或者浏览器对脚本的支持被关闭了,那么就会执行该标签的内容:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
 <script defer="defer" src="example.js"></script> 
 </head> 
 <body> 
  <noscript> 
    <p>页面需要开启javascript</p> 
  </noscript> 
 </body> 
</html>


目录
相关文章
|
4月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
148 1
|
4月前
|
JavaScript 前端开发 Java
liteflow规则引擎 执行Javascript脚本
liteflow规则引擎 执行Javascript脚本
121 1
|
4月前
|
移动开发 JavaScript 数据可视化
分享88个JS播放器脚本,总有一款适合您
分享88个JS播放器脚本,总有一款适合您
107 0
|
4月前
|
移动开发 JavaScript 前端开发
分享95个JS表单脚本,总有一款适合您
分享95个JS表单脚本,总有一款适合您
47 0
|
4月前
|
移动开发 JavaScript 前端开发
分享106个JS表单脚本,总有一款适合您
分享106个JS表单脚本,总有一款适合您
38 0
|
4月前
|
移动开发 JavaScript 前端开发
分享98个JS表单脚本,总有一款适合您
分享98个JS表单脚本,总有一款适合您
48 0
|
4月前
|
JavaScript 前端开发 Unix
Node.js Shell 脚本开发指南(中)
Node.js Shell 脚本开发指南(中)
104 0
|
4月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
117 0
|
4月前
|
JavaScript 前端开发 NoSQL
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
【5月更文挑战第11天】MongoDB 的 JavaScript 引擎允许在服务器端直接执行脚本,提升效率并实现定制化操作。脚本环境提供独立但与数据库关联的运行空间,引擎负责脚本的解析、编译和执行。执行过程包括脚本提交、解析、编译和执行四个步骤。掌握脚本逻辑设计和 JavaScript 语言特性对于高效利用这一功能至关重要。例如,通过脚本可以计算商品总销售额,增强数据库操作的灵活性。
80 1
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
|
4月前
|
JavaScript 前端开发
Playwright执行 JavaScript 脚本:探索浏览器自动化的新境界
在Web自动化中,Playwright提供`page.evaluate()`和`page.evaluate_handle()`来执行JavaScript脚本。`page.evaluate()`返回脚本执行结果,而`page.evaluate_handle()`返回JSHandle。示例展示了如何使用它们,如打印网页标题、操作元素及获取页面内容。通过这些方法,可以处理常规方法难以操作的网页元素。
123 2