「轻松科普」浏览器中的 JavaScript

追梦玩家
282 阅读9分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

前言

学习编程知识，能不能生动有趣，容易理解呢？我还在探索尝试的过程中，这篇文章，将从不一样的角度切入，让大家对浏览器中的 JavaScript 有了一些了解，当然不局限于程序员，希望对没有接触过编程语言的小白，也有一定的收获。

网站不允许使用 JavaScript，会怎样？

不知道你有没有想过或好奇过，为什么网站能实现这么多功能，比如，你可以在网上购物，前提是你登录了；你也可以在网上，看视频，追电视剧，数不胜数。

接下来，我们就来揭开这个秘密：

相信大家平时都有逛 b 站，下面就以 b 站举例，我使用的是 Chrome 浏览器

我们打开 b 站，搜索下"前端早早聊"，点击某个视频，看视频，打开一个视频观看页

image.png

正在愉快的看视频，学习。

image.png

那如果自己在电脑上的浏览器，设置不允许 JavaScript，会是一个什么样子呢？

image.png

我们可以对比上面两张图片，发现，在浏览器的设置中，不允许网站使用 JavaScript 的话，你就连视频都看不了，图片都没有显示出来，都不能愉快的学习了。

这说明了什么吗？

浏览器离不开 JavaScript，当浏览器不支持或者不允许 JavaScript，这将意味网站的功能，都不能使用的。 那还怎么愉快的追电视剧，或者干更多的事情呢？

具体怎么禁用 JavaScipt，大家如果感兴趣的话，可以看下 如何在您的浏览器中启用JavaScript

有文字教程和图片教程：

image.png

DOM 是啥？

举个场景：

假如你在 b 站，你想下载一个视频对应封面图，你发现常规的方法，好像没有用，比如右键 =>“图片另存为”，还有什么办法下载到图片呢？

image.png

分三步走：

第一步：按快捷键 F12 或者右键 => “检查”，打开浏览器的控制台

image.png

第二步：开启模式，选中对应的元素

image.png image.png

第三步：捉迷藏，找到对应的图片

找到了，如果你英文好的话，你应该 img 其实是图片的意思。 image.png 上面不是看到一个网址，你打开那个网址，就可以下载到你想要的图片啦。

其实上面这个操作的过程，就是在找元素的过程，元素，可以理解成页面上的标签，在 JS 中，可以理解成 DOM 元素。

BOM 又是啥？

我们再来举个场景：

假如你打开一个网页，这个页面有太多的广告了或者其他原因。你想要关闭掉这个页面，平常人的做法，就是

  • 点击关闭按钮
  • 使用快捷键 Ctrl + W

那还有别的办法呢？大家可以想想，当然是有的，不然也不会问这个问题啦。

同样的，我们要打开浏览器控制台，还记得怎么打开吗？

回顾一下，按快捷键 F12 或者右键 => “检查”，打开浏览器的控制台

image.png

在控制台，输入命令 window.close();，然后回车，你就会发现你关闭了这个页面。

image.png

window.close(); 这个命令，其实就是浏览器提供，浏览器很多东西，都可以通过 JavaScript 去控制，刚才说的“关闭网页”，只是其中一个而已。例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是 BOM。

回归正题

相信大家看完上面的内容，应该对 JavaScript、DOM、BOM 有了初步的认识，也不至于劝退小白。

下面我们就回归到我们的主题：浏览器中的 JavaScript，到底是什么？

JavaScript 是有三部分组成：

  • ECMAScript（ES）：JS 的核心语法，描述了该语言的语法和基本对象
  • DOM：document object model 文档对象模型，提供各种 API（属性和方法），让 JS 可以获取或者操作页面中的 HTML 元素（DOM 元素）「作用很重要，概念不重要」，描述处理网页内容的方法的接口。到底是做什么的？作用很重要，概念不重要
  • BOM：browser object model 浏览器对象模型，提供各种 API，让 JS 可以操作浏览器，描述与浏览器进行交互的方法和接口。

ECMAScript

我们来看张图片。

image.png 注：这张图来自网络

上图按照时间顺序说明了 JavaScript、JScript 和 ECMAScript 的发展。

从上图，我们可以看到“标准化”出现了两次。

网景公司推出了 JavaScript，而微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在 IE 3.0 版本附带推出 JScript。为什么叫 JScript？因为 JavaScript 已被网景公司注册，微软作为一个商业公司必须用一个新的名字。

虽然两个浏览器都支持脚本，但是两种脚本语法和功能都有区别。

一直致力于指定消费电子标准的 ECMA 组织，审时度势，觉得有必要把网页脚本的语法和功能统一一下，于是发布 ECMAScript 标准（第一版）。之后对该标准进行了一些修改，更新到 ECMAScript 3（一下简称 ES 3）。

所以说 ECMAScript 是这种网页脚本的标准，而 JavaScript 和 JScript 则是 ECMAScript 的两种实现。

DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

简单来说，就是 DOM 就是提供各种 API（属性和方法），让 JS 可以获取或者操作页面中的 HTML 元素（DOM 元素）。

常用的 API

  • document.getElementById：通过元素的 ID 获取指定的元素对象，使用的时候都是 document.getElementById('#id')。此处的 document是限定了获取元素的范围，我们把它称之为“上下文（context）”
  • [context].getElementsByTagName：在指定的上下文中，根据标签名获取到一组元素集合（HTMLCollection）
  • [context].getElementsByClassName：在指定的上下文中，基于元素的样式类名（class="xxx"）获取到一组元素集合。在指定的上下文中，基于元素的样式类名（class="xxx"）获取到一组元素集合
  • document.getElementsByName：它的上下文也只能是 document，在整个文档中，基于元素的 name 属性值获取一组节点集合
  • [context].querySelector：在指定的上下文中基于选择器（类似于 CSS 选择器）获取到指定的元素对象（获取的是一个元素，那怕选择器匹配了多个，我们只获取第一个）
  • [context]querySelectorAll：在 querySelector 的基础上，我们获取到选择器匹配到的所有元素，结果是一个节点集合(NodeList)
  • document.head：获取 head 元素对象
  • document.body：获取 body 元素对象
  • document.documentElement：获取 HTML 元素对象

BOM

JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

简单来说，就是浏览器提供各种 API，让 JS 可以操作浏览器，比如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是 BOM。

常用的 API

输出
  • alert：在浏览器中通过弹框的方式输出（浏览器提示框）
  • confirm：和 alert 的用法一致，所以输出的结果也是字符串，只不过提示的框中有确定和取消两个按钮，所以它是确认提示框。
  • prompt：在confirm的基础上增加输入框，一般不用
  • console.log：在浏览器控制台输出日志（按F12（FN+F12）打开浏览器的控制台）「常用调试输出」
窗口属性

window 代表浏览器当前窗口

  • innerWidth 和 innerHeight 属性来获取 显示 HTML 页面 部分的宽高
  • open() 和 close() 打开和关闭浏览器窗口或 tab 选项卡
location 属性

window 对象中有一个 Location 属性，用于 URL 相关的操作。它有这样几个常用的属性：

  • href：获取当前页面的 url，或者跳转到新的 url。
  • hostname：获取 url 中的主机部分。
  • pathname: 获取 url 中的路径部分。
  • reload()：刷新当前页面
history 属性

历史相关的操作在 window 的 history 属性中，可以使用 back()、forward() 、go() 方法来实现浏览器的后退和前进功能，也可以使用 pushState()和 replaceState() 手动添加、替换历史记录，并保存状态。

Navigator 属性

Navigator 包含了用户浏览器相关的信息，可以获取 userAgent、设备地理位置（geolocation）、是否启用了 cookie (isCookieEnabled)等。

Screen 属性

Screen 属性包含了用户屏幕相关信息，例如宽度（width）、高度（height）、朝向（Orientation）等。

参考

写到最后

浏览器中的 JavaScript 是有三部分组成：

  • ECMAScript（ES）：JS 的核心语法，描述了该语言的语法和基本对象
  • DOM：document object model 文档对象模型，提供各种 API（属性和方法），让 JS 可以获取或者操作页面中的 HTML 元素（DOM 元素）「作用很重要，概念不重要」，描述处理网页内容的方法的接口。到底是做什么的？作用很重要，概念不重要
  • BOM：browser object model 浏览器对象模型，提供各种 API，让 JS 可以操作浏览器，描述与浏览器进行交互的方法和接口。

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你或者喜欢，欢迎点赞和关注。

avatar
文章
阅读
粉丝