JS学习(2)(浏览器执行JS过程、JS的ECMAScript、DOM、BOM)

目录

一、浏览器如何执行JS?

(1)浏览器主要的组成部分。

1、渲染引擎。

2、JS引擎。

(2)演示。

二、JS的组成。

(1)JS主要由三部分组成。

1、JS基础。

2、JS-API。

(2)ECMAScript。

(3)DOM。

(4)BOM。


一、浏览器如何执行JS?

(1)浏览器主要的组成部分。
  • 用户界面包括地址栏、前进/后退按钮、书签菜单等,是用户与浏览器交互的界面。

  • 浏览器是互联网用户访问网页和使用网络服务的主要工具。


  • 浏览器主要分成两个部分:渲染引擎与JS引擎。
1、渲染引擎。
  • 渲染引擎(Rendering Engine):渲染引擎负责解析HTML和CSS,俗称内核。
  • 并在屏幕上显示内容。不同的浏览器可能使用不同的渲染引擎,WebKit(Safari、旧版Chrome)、Blink(Chrome、新版Edge)、Gecko(Firefox)等。Chrome:谷歌浏览器。

2、JS引擎。
  • 也称为 JS 解释器。
  • 用来读取网页中的JavaScript代码,对其进行相应处理后计算机再运行代码。
  • 不同的浏览器可能使用不同的JavaScript引擎,例如V8(号称"最快js引擎")(Chrome)、SpiderMonkey(Firefox)等。
(2)演示。
  • JavaScript是一种高级的、解释型的编程语言。
  • 因为计算机能明白,就需要翻译成机器语言。(如:二进制:0101...)

  • 当浏览器读到一行高级语言的代码时,发现这是一段高级语言。这时我们的JS引擎将这部分代码转换成二进制的机器语言。这样就能识别并执行这段语言。
  • 也就是翻译一句,计算机执行一句。就是这样的一个过程。(逐行解释!)
  • 如下简单且"好笑"的例子。

二、JS的组成。

(1)JS主要由三部分组成。
1、JS基础。
  • ECMAScript。JS基础------JavaScript的基本语法。

2、JS-API。
  • DOM。
  • BOM。

(2)ECMAScript。
  • ECMAScript 是一种由 ECMA International(一个国际标准化组织)通过其技术委员会 TC39 制定的脚本语言规范。
  • 这个规范定义了JavaScript语言的核心语法、类型、语句、关键字、保留字、操作符、全局对象等。简而言之,ECMAScript 是 JavaScript 的基础和标准。
  • 其实就是规定了JS的一些基础的语法标准和使用场景。

  • ECMAScript 规范是JavaScript语言发展的基础,它确保了JavaScript作为一种编程语言的标准化和向前兼容性。

(3)DOM。
  • DOM,全称为文档对象模型(Document Object Model)。
  • 是一种编程接口,用于表示和操作网页上的内容和结构。
  • DOM 是一种树状结构,将网页上的每个元素(如标签、文本节点等)表示为一个节点(Node),并通过这些节点之间的关系(父子、兄弟等)来表示整个文档的结构。

  • 通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
  • 如点击某个按钮,其下拉框展示出来其下的所有子元素。像事件处理。

  • DOM 是现代Web开发中不可或缺的一部分,它为开发者提供了一种强大的方式来操作和控制网页的内容和结构。通过DOM,开发者可以实现丰富的交互效果 和动态内容。

(4)BOM。
  • 全称为浏览器对象模型(BOM,Browser Object Model)。
  • 是JavaScript中用于表示和操作浏览器窗口及其相关组件的对象模型。BOM提供了一组API,允许开发者通过JavaScript与浏览器进行交互。以下是BOM的一些核心组成部分和功能。
  • 它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
相关推荐
Bug收容所4 分钟前
学习LangChain day1
学习·langchain·llm·agent
传奇开心果编程5 分钟前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
Eric.4617 分钟前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
liangshanbo121526 分钟前
JavaScript 异步核心主线
javascript·事件循环·异步操作
传人once2 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
我命由我123452 小时前
Photoshop - Photoshop 矢量蒙版
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·photoshop
库拉镜像AI牛牛2 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔2 小时前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师2 小时前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端
律宏阔2 小时前
Dart 3 Record:解决 Future.wait 异构返回值的类型问题
前端·flutter