当前位置:网站首页>认识JS基础与浏览器引擎
认识JS基础与浏览器引擎
2022-07-26 15:15:00 【JS人柱力】
认识JavaScript
维基百科对JavaScript的定义:
JavaScript(通常缩写为JS)是一种高级的,解释性的编程语言
JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式函数,以及函数式编程
是一种客户端语言,在浏览器执行的。是一种脚本语言,直接就能解释执行的叫脚本代码。像dos命令还有SQL也是。
JavaScript的起源
1994年,网景公司(Netscape) 发布了Navigator浏览器0.9版
这是历史上第一个比较成熟的网络浏览器,轰动一时
但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力
网景公司急需一种网页脚本语言,使得浏览器可以与网页互动
网景公司当时想要选择一种语言来嵌入到浏览器中:
采用现有的语言,比如Perl、Python、Tcl、Scheme等等,允许它们直接嵌入网页;
1995年网景公司招募了程序员Brendan Eich,希望将Scheme 语言作为网页脚本语言的可能性
就在这时,发生来另外一件大事:1995年Sun公司将Oak语言改名为Java,正式向市场推出;
Java推出之后立马在市场上引起了轰动,Java当初有一个口号:‘write once run anywhere’;
网景公司心动了,决定与Sun公司结成联盟,希望将Java嵌入到网页中来运行;
Brendan Eich本人非常热衷于Scheme,但是管理层那个时候有点倾向于Java,希望可以简化Java来适应网页脚本的需求
但是Brendan Eich对此并不感兴趣,他用10天时间设计出来了JavaScript;
最初这门语言的名字是Mocha(摩卡);
在Navigator2.0 beta版本更名为LiveScript
在Navigator2.0 beta 3版本正式重命名为JavaScript,当时是为了给这门语言搭上Java这个热词;
当然10天设计出来的语言足够说明Brendan Eich是天才,但是这门语言当时更像是一个多种语言的大杂烩;
借鉴C语言的基本语法;
借鉴Java语言的数据类型和内存管理;
借鉴Scheme语言,将函数提升到了"第一等公民"(first class) 的地位;
借鉴Self语言,使用基于原型(prototype)的继承机制。
微软公司于1995年首次推出Internet Explorer,从而引发了与Netscape的浏览器大战。
微软对Netscape Navigator解释器进行了逆向工程,创建了JScript,以与处于市场领导地位的
这个时候对于开发者来说是一场噩耗,因为需要针对不同的浏览器进行不同的适配
1996年11月,网景正式向ECMA(欧洲计算机制造商协会)提交语言标准
1997年6月,ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262;
ECMA-262是一份标准,定义了ECMAScript
JavaScript成为了ECMAScript最著名的实现之一;
除此之外,ActionScript和JScript也都是ECMAScript规范的实现语言;
所以说ECMAScript是一种规范,而Javascript是这种规范的一种实现
JavaScript的组成
ECMAScript是JavaScript的标准,描述了该语言的语法和基本对象
DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。
BOM 浏览器对象模型(Browser Object Model, BOM)被广泛应用于 Web 开发之中,主要用于客户端浏览器的管理。
JS引擎
JS引擎是用来运行JavaScript代码的
不同的浏览器有不同的内核组成
Gecko:早期被Netscape和Mozilla Firefox 浏览器使用
Trident:微软开发,被IE4-IE11浏览器使用,但是Edge浏览器已经转向Blik
Weblit:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用;
Blik:是Webkit的一个分支,Goole开发,目前应用于Goole Chrome 、Edge、Opera等
事实上,我们经常说的浏览器内核是指浏览器的排版引擎:
排版引擎(layout engine) ,也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine)或样版引擎
常见的JS引擎:
SpiderMonkey:第一款JavaScript引擎,由Brendan Eich开发(也就是JavaScript作者)
Chakra:微软开发,用于IT浏览器
JavaScriptCore:Webkit中的JavaScript引擎,Apple公司开发;
V8:Google开发的强大JavaScript引擎,也帮助Chrome从众多浏览器中脱颖而出
浏览器内核和JS引擎的关系
以Webkit为例,WebKit事实上由两部分组成的:
webCore:负责HTML解析、布局、渲染等等相关的工作;
JavaScriptCore:解析、执行JavaScript代码
JavaScript的编写方式
- HTML代码行内(不推荐)

当我们点击a标签时就会弹出
- script标签中
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ju7poYG2-1658590542397)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220723230802473.png)]](/img/66/9ad3070bea784d01d5e313186a9387.png)
- 外部的script文件
需要通过script元素的src属性来引入JavaScript文件
< noscript>元素
当浏览器不支持JavaScript代码时运行


JavaScript编写的注意事项
注意一:script元素不能写成单标签
在外链式引用js文件时,script标签中不可以写成JavaScript代码,并且script标签不能写成单标签
注意二:省略type属性
在以前的代码中,< script >标签中会使用type=‘text/JavaScript’;
现在可以不写这个type元素了,因为JavaScript是所有现代浏览器以及HTML5中默认脚本语言
注意三:加载顺序
作为HTML文档内容的一部分,JavaScript默认遵循HTML文档的加载顺序,即自上而下的加载顺序;
推荐将JavaScript代码和编写位置放在body子元素的最后一行;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 放在body最后一行 -->
<script></script>
</body>
</html>
注意四:Javascript代码严格区分大小写
HTML元素和CSS属性不区分大小写,但是在JavaScript中严格区分大小写
边栏推荐
- anaconda No module named ‘cv2‘
- MYSQL 命令大全
- R语言ggplot2可视化:可视化折线图、使用aes函数中的group参数为不同分组可视化折线图
- 【五分钟Paper】基于参数化动作空间的强化学习
- The IPO of shengtaier technology was terminated: it was planned to raise 560million yuan, and Qiming and Jifeng capital were shareholders
- Use of oscilloscope
- R语言检验相关性系数的显著性:使用cor.test函数计算相关性系数的值和置信区间及其统计显著性(如果变量来自正态分布总体使用皮尔森方法pearson)
- 【静态代码质量分析工具】上海道宁为您带来SonarSource/SonarQube下载、试用、教程
- OSPF综合实验
- 信用卡数字识别(opencv,代码分析)
猜你喜欢

FOC学习笔记-坐标变换以及仿真验证

What is the transport layer protocol tcp/udp???

什么是传输层协议TCP/UDP???

数商云:引领化工业态数字升级,看摩贝如何快速打通全场景互融互通

81. (cesium home) cesium modifies the gray background (default blue)

How do college students apply for utility model patents?

食品制造企业想要实现智能协同的供应商管理,选择SRM供应商系统就够了

教程篇(7.0) 05. 通过FortiClient EMS发放FortiClient * FortiClient EMS * Fortinet 网络安全专家 NSE 5
![[basic] the difference between dynamic link library and static link library](/img/d5/fe7880e3fa91faff10a1c31870cce0.png)
[basic] the difference between dynamic link library and static link library

【五分钟Paper】基于参数化动作空间的强化学习
随机推荐
什么是虚拟摄像头
[five minute paper] reinforcement learning based on parameterized action space
Desktop application layout
【留点代码】将transformer运用到目标检测上来,通过debug了解模型的模型运算流程
R语言wilcox.test函数比较两个非参数样本的总体的中心位置是否具有显著差异(如果两个样本数据是配对数据设置paired参数为TRUE)
使用两个栈实现一个队列
Cs224w (Figure machine learning) 2021 winter course learning notes 5
Abbkine EliKine人甲胎蛋白(AFP)ELISA定量试剂盒操作方法
What is the transport layer protocol tcp/udp???
TI C6000 TMS320C6678 DSP+ Zynq-7045的ZYNQ PS + PL异构多核案例开发手册(1)
Chuhuan technology is listed on Shenzhen Stock Exchange: Minsheng securities, with a market value of 2.7 billion, is a shareholder
Detailed explanation of nat/napt address translation (internal and external network communication) technology [Huawei ENSP]
白话详解决策树模型之使用信息熵构建决策树
Is there any need for livedata to learn—— Jetpack series (2)
Data warehouse: Data Modeling and log system in data warehouse construction
筑牢生态安全防线,广州开展突发环境事件应急演练
Glyphicons V3 字体图标查询
Double the efficiency of dual screen collaboration lingyao x dual screen Pro leads the new trend of dual screen technology
R语言ggplot2可视化:可视化折线图、使用aes函数中的group参数为不同分组可视化折线图
R语言使用lm函数构建带交互项的多元回归模型、使用step函数构建逐步回归模型筛选预测变量的最佳子集(step regression)