【JS红宝书学习笔记】第1、2章

第1章 什么是JavaScript

JavaScript 是一门用来与网页交互的脚本语言,包含以下三个组成部分。

  • ECMAScript:由 ECMA-262 定义并提供核心功能。
  • 文档对象模型(DOM):提供与网页内容交互的方法和接口。
  • 浏览器对象模型(BOM):提供与浏览器交互的方法和接口。

在这里插入图片描述

1. ES5 & ES6(貌似面试经常会问到ES5、ES6)

  • ECMAScript 3.1 变成了 ECMA-262 的第 5 版,于 2009 年 12 月 3 日正式发布。第 5 版致力于厘清第 3 版存在的歧义,也增加了新功能。新功能包括原生的解析和序列化 JSON 数据的 JSON对象、方便继承和高级属性定义的方法,以及新的增强 ECMAScript 引擎解释和执行代码能力的严格模式。第 5 版在 2011 年 6月发布了一个维护性修订版,这个修订版只更正了规范中的错误,并未增加任何新的语言或库特性。
  • ECMA-262 第 6 版,俗称 ES6、ES2015 或 ES Harmony(和谐版),于 2015 年 6 月发布。这一版包含了大概这个规范有史以来最重要的一批增强特性。ES6 正式支持了类、模块、迭代器、生成器、箭头函数、期约、反射、代理和众多新的数据类型。

2. DOM

文档对象模型(DOM,Document Object Model)是一个应用编程接口(API),用于在 HTML 中使用扩展的 XML。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点,包含不同的数据。(一种树结构)
DOM 通过创建表示文档的树,让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API,可以轻松地删除、添加、替换、修改节点。
在这里插入图片描述

万维网联盟(W3C,World Wide Web Consortium)

3. BOM

浏览器对象模型(BOM) API,用于支持访问和操作浏览器的窗口。使用 BOM,开发者可以操控浏览器显示页面之外的部分。而 BOM 真正独一无二的地方,当然也是问题最多的地方,就是它是唯一一个没有相关标准的 JavaScript 实现。

第2章 HTML中的JavaScript

1. <script> 属性

  • async:可选。表示应该立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或等待其他脚本加载。只对外部脚本文件有效。与 defer 不同的是,标记为 async 的脚本并不保证能按照它们出现的次序执行。(异步执行脚本)(这里讲的比较乱,还要看本书后面相关的知识点)
    在这里插入图片描述

  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在 IE7及更早的版本中,对行内脚本也可以指定这个属性。(立即下载,延迟执行,即推迟执行脚本
    在这里插入图片描述

  • integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource Integrity)。如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以用于确保内容分发网络(CDN,Content Delivery Network)不会提供恶意内容。

2. 行内脚本与外部脚本

(1)行内嵌入

<script>
        function sayHi() {
            console.log("Hi!");
        }
</script>

(2)外部导入

<script src="example.js"></script>
<script src="http://www.somewhere.com/afile.js"></script>

使用了 src 属性的<script>元素不应该再在<script></script>标签中再包含其他JavaScript 代码。如果两者都提供的话,则浏览器只会下载并执行脚本文件,从而忽略行内代码。 也就是一个<script> 两种方式只能选择其一,优先选择外部导入。

(3)行内代码与外部文件更推荐使用外部文件的原因:

  • 可维护性。 JavaScript 代码如果分散到很多 HTML 页面,会导致维护困难。而用一个目录保存所有 JavaScript文件,则更容易维护,这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
  • 缓存。 浏览器会根据特定的设置缓存所有外部链接的JavaScript 文件,这意味着如果两个页面都用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。
  • 适应未来。 通过把JavaScript 放到外部文件中,就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在HTML 和 XHTML 中是一样的。

3. 标签位置

所有<script>元素都被放在页面的<head>标签内,这种做法的主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。不过,把所有 JavaScript文件都放在<head>里,也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后,才能开始渲染页面(页面在浏览器解析到<body>的起始标签时开始渲染)。对于需要很多 JavaScript 的页面,这会导致页面渲染的明显延迟,在此期间浏览器窗口完全空白。为解决这个问题,现代 Web 应用程序通常将所有 JavaScript 引用放在<body>元素中的页面内容后面。这样一来,页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了,因为浏览器显示空白页面的时间短了。
以前:
在这里插入图片描述
现在:
在这里插入图片描述

4. 动态加载脚本

默认异步加载

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

5. <noscript>元素

通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则<noscript>元素中的任何内容都不会被渲染。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/613626.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件)

前言 Adobe Premiere Pro&#xff08;简称PR&#xff09;是一款知名的专业视频编辑软件&#xff0c;数字视频剪辑软件。主要用来编辑视频和音频&#xff0c;可以在RGB和YUV色彩空间中以高达32位色彩的视频分辨率对4K和更高质量的视频文件进行编辑&#xff0c;支持VST音频插件和…

el-select选项框内容过长

利用popper-class实现选项框内容过长&#xff0c;截取显示功能&#xff1a; <el-select popper-class"popper-class" :popper-append-to-body"false" v-model"value" placeholder"请选择"><el-optionv-for"item in opt…

你不知道的ConstraintLayout高级用法

文章目录 1. ConstraintLayout介绍2. 高级用法2.1 Gone Margin2.2 偏移2.3 居中2.4 尺寸约束2.5 链2.6 角度定位&#xff08;圆形定位&#xff09; 3. 工具类3.1 Guideline&#xff08;参考线&#xff09;3.2 Barrier&#xff08;栅栏&#xff09;3.3 Group&#xff08;组&…

2023年建筑特种作业人员安全生产知识试题

100分题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 判断题&#xff08;1-20&#xff09; 1.《建筑工程安全生产管理条例》是我国第一部关于…

docker搭建redis6.0(docker rundocker compose演示)

文章讲了&#xff1a;docker下搭建redis6.0.20遇到一些问题&#xff0c;以及解决后的最佳实践方案 文章实现了&#xff1a; docker run搭建redisdocker compose搭建redis 搭建一个redis’的过程中遇到很多问题&#xff0c;先简单说一下搭建的顺序 找一个redis.conf文件&…

PMP证书好考吗?

PMP新考纲还颠覆了自己旧有的五大知识领域&#xff0c;将原来的五大过程组整合成新领域中过程的一部分&#xff0c;提出了新的商业环境、过程、人员三大知识领域。 最关键的是&#xff0c;在新考纲中明确写到&#xff1a; 重要注意事项。通过工作任务分析开展的研究证实&…

WebSocket基础知识

WebSocket是什么&#xff1f; WebSocket 是一种网络通信协议&#xff0c;它提供了全双工通信机制&#xff0c;允许服务器主动向客户端发送消息&#xff0c;而不仅限于响应客户端的请求。它使用类似于 HTTP 的握手来建立连接&#xff0c;然后使用单独的持久连接来进行通信。这种…

上海计算机学会2023年9月月赛C++丙组T2Z形填充

题目描述 给定一个整数 n&#xff0c;再给定 n2 个字符&#xff0c;请将这些字符以 z 形排成一个 nn 的矩阵。 z 形的定义是&#xff0c;第一个字符在左上角&#xff0c;然后沿对角线以 z 形放置字符。对于 n4 &#xff0c;z 形排列的先后顺序标记如下&#xff1a; 输入格式 …

用友GRPA++Cloud任意文件读取

文章目录 免责声明漏洞描述漏洞原理影响版本漏洞复现修复建议 免责声明 文章只供交流与学习&#xff0c;切莫做违法犯罪的事情 漏洞描述 用友 GRP-ACloud 政府财务云产品是以政府会计准则和预算管理一体化规范为基准&#xff0c;服务于政府行政事业单位&#xff0c;落实国家…

高标准农田建设项目天空地一体化智慧监管平台

一、建设背景 党中央、国务院高度重视高标准农田建设。国务院办公厅印发的《关于切实加强高标准农田建设提升国家粮食安全保障能力的意见》 明确提出&#xff0c;大力推进高标准农田建设&#xff0c;到2022年&#xff0c;建成10亿亩高标准农田&#xff0c;以此稳定保障1万亿斤以…

科技查新中化工领域查新点如何确立与提炼?案例讲解!

我国化工科技查新工作始于1985年&#xff0c;至今经历了30多年的发展。化工类课题包含化工、炼油、 冶金、能源、轻工、石化、环境、医药、环保和军工等&#xff0c; 具有物质种类繁多、制备工艺复杂等特点。因此&#xff0c;本文结合化工查新项目实例&#xff0c;总结提高化工…

同步时序电路的设计方法

同步时序电路的设计方法 基本步骤 分析举例 【例1】 设计一个按自然态序变化的 同步七进制加法计数器&#xff0c;计数规则为逢七进一&#xff0c;产生一个进位输出 【解】 Step1&#xff1a;建立原始状态转换图 Step2&#xff1a;状态化简 没有能够合并的等效状态&#…

成为一名算法工程师需要掌握哪些技术栈

成为算法工程师需要学习的编程技能主要包括以下几个方面&#xff1a; Python&#xff1a;Python是算法工程师最常使用的编程语言之一。它拥有简洁易读的语法和丰富的库&#xff0c;如NumPy、Pandas、SciPy、Matplotlib等&#xff0c;这些库为数据处理、科学计算和可视化提供了…

红帽为 Red Hat OpenShift AI 扩大与 Elasticsearch 向量数据库的合作

作者&#xff1a;来自 Elastic Aditya Tripathi 红帽和 Elastic 今天宣布开展合作&#xff0c;以便在 Red Hat OpenShift AI 上集成 Elasticsearch 向量数据库。 Red Hat OpenShift 用户现在可以通过红帽生态系统目录实施 Elasticsearch 以进行向量搜索和检索增强生成 (RAG) 应…

iOS--runloop的初步认识

runloop的初步认识 简单认识runloopEvent looprunloop其实就是个对象NSRunloop和CFRunLoopRef的依赖关系runloop与线程runloop moderunloop sourceCFRunLoopSourceCFRunLoopObserverCFRunLoopTimer runloop的实现runloop的获取添加ModeCFRunLoopAddCommonMode 添加Run Loop Sou…

万能门店小程序开发平台功能源码系统 带完整的安装代码包以及安装搭建教程

互联网技术的迅猛发展和用户对于便捷性需求的不断提高&#xff0c;小程序以其轻量、快捷、无需安装的特点&#xff0c;成为了众多商家和开发者关注的焦点。为满足广大商家对于门店线上化、智能化管理的需求&#xff0c;小编给大家分享一款“万能门店小程序开发平台功能源码系统…

14.跳跃游戏Ⅱ

文章目录 题目简介题目解答解法一&#xff1a;贪心算法动态规划代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 跳跃游戏Ⅱ 相关的讲解&#xff01;&#x1f600; 题目简介 题目解答 解法一&#xff1a;贪心算法动态规划…

el-select下拉框 添加 el-checkbox 多选框,支持全选、取消全选

el-select下拉框 添加 el-checkbox 多选框&#xff0c;支持全选、取消全选 前言一、实现思路二、实现代码1.模板代码2. css 样式3.js 代码 DEMO 演示总结 前言 实现效果预览 提示&#xff1a;本内容基于element-ui 组件实现&#xff0c;如果使用其他组件库、可参考下面实现方…

QML 本地存储(Setting,sqlite)

Qt hello - 专注于Qt的技术分享平台 QML 原生的储存方有两种&#xff1a; 1&#xff0c;Settings 跟QWidget 中的QSettings 一样&#xff0c;可以简单的存储一些配置。 2&#xff0c;Sqlite sqlite数据库。可以存储一些复杂的数据。 一&#xff0c;Settings 我们以一个按钮的位…

ROS2 conda 环境下报 No module named ‘catkin_pkg‘

这里使用的环境是&#xff1a;Ubuntu 22.04, ROS2, Conda python 虚拟环境是3.10 ~/.bashrc 里注释掉 conda&#xff0c;并添加 export PYTHONPATH$PYTHONPATH:/usr/lib/python3/dist-packages sudo gedit ~/.bashrc source ~/.bashrc