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

第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>元素中的任何内容都不会被渲染。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙内核源码分析 (内存池管理) | 如何高效切割合并内存块

动态分配 系列篇将动态分配分成上下两篇&#xff0c;本篇为下篇&#xff0c;阅读之前建议翻看上篇。 鸿蒙内核源码分析(TLFS算法) 结合图表从理论视角说清楚 TLFS 算法鸿蒙内核源码分析(内存池管理) 结合源码说清楚鸿蒙内核动态内存池实现过程&#xff0c;个人认为这部分代码…

羊大师分析,羊奶助力共筑健康中国新生活

羊大师分析&#xff0c;羊奶助力共筑健康中国新生活 在健康中国行动的大背景下&#xff0c;我们越来越注重生活方式的健康与营养。羊大师发现&#xff0c;羊奶作为一种营养丰富、易于吸收的天然食品&#xff0c;正逐渐成为我们追求健康生活的得力助手。 羊奶富含优质蛋白质、矿…

vue3自定义指令​(通过指令钩子获得dom和钩子参数)

实现文本框自动获得焦点 Index.vue: <script setup> import { ref, onMounted } from vue import ./index.cssconst vFocus {mounted: (el, binding) > {el.focus()console.log(binding)} }onMounted(() > {}) </script><template><div class&qu…

设计说明-行为型-状态模式-State

状态接口 public interface State {//状态接口void insertQuarter();//投币void ejectQuarter();//退币void turnCrank();//按下“出纸巾”按钮void dispense();//出纸巾 } 有纸巾类 public class HasQuarterState implements State {private TissueMachine tissueMachine;O…

Python中tkinter编程入门4

在Python中tkinter编程入门3-CSDN博客中创建了Button控件&#xff0c;点击该控件就会产生一个点击事件&#xff0c;在创建Button控件时指定该点击事件的处理程序后&#xff0c;按键控件就会对用户的点击事件产生响应。 1 定义事件处理器 定义事件处理器就是一个自定义的函数。…

前端连续发送同一个请求时,终止上一次请求

场景&#xff1a;几个tab页之间快速的切换&#xff08;tab页只是参数不同&#xff0c;下边的数据渲染给同一个data&#xff09;就会导致如果我在1,2,3&#xff0c;tab页按照顺序快速点击&#xff0c;发送三个请求&#xff0c;我想要展示的是3但是如果1或者2请求响应的时间比3长…

Python tensor向量维度转换,不同维度的向量转化为相同的维度,经过全连接层MLP的维度转换,代码实战

问题&#xff1a;在机器学习特征工程中&#xff0c;假如每类特征需要转化为相同的维度进行拼接&#xff0c;那该怎么办呢&#xff1f;接一个全连接层MLP就可以了。 例子&#xff1a;将&#xff08;128,64&#xff09; 维度的向量转化为&#xff08;128,32&#xff09;维。 impo…

Stm32串口搭配DMA实现自定义printf、scanf

前言:本文仅供学习参考使用&#xff0c;主要目的是让大家快速使用串口调试&#xff0c;文章所提及的GCC适用于Clion&#xff0c;Vscode等第三方编辑器的用户。作者有时间会继续更新^_^ 一、GCC环境 1、标准库 (1)、使用方法 在主函数while(1)初始化中&#xff0c;添加Seria…

柯桥法语学习-5大法语听写网站:全力助攻你的dictée!

提到法语dicte&#xff0c;绝对可是法语学生们的老大难&#xff0c;简直就是心痛得不能自已啊&#xff01;所以今天&#xff0c;法语君整理了5个听写网站助攻大家的dicte哦&#xff01; Projet Voltaire 01 一个很容易让你对dicte上瘾的APP 写邮件、实习报告或者动机信时&…

Nat Plants | 植物抽核单细胞!多组学探究大豆根瘤成熟过程

发表时间&#xff1a;2023-04 发表期刊&#xff1a;Nature Plants 影响因子&#xff1a;17.352 DOI&#xff1a;10.1038/s41477-023-01387-z 研究背景 根瘤菌是亲和互作寄主植物&#xff0c;感染宿主并在根部形成共生器官根瘤&#xff0c;具有固氮…

jmeter中HttpClient4发送失败,java方法请求成功

jmeter中HttpClient4请求失败 上传文件时&#xff1a;Httpclient4: 请求体 请求头 响应结果 ,后端服务都总是提示存在非法标签。 jmeter中使用java请求成功 修改使用java方式&#xff0c;访问正常&#xff1b; 根据分析可能因为HC4对一些特殊字符会进行转义&#xff0c;转义后…

idea配置MySQL提示

点击sql语句&#xff0c;然后再选择show context actions 然后再选择Inject language or reference 然后再选择MySQL 然后我们会发现sql语句变颜色了 如果表是红色 那么需要我们连接mysql的对于的数据库

做私域不止是积累流量,生态也很重要!

如今&#xff0c;私域流水占比已经逼近整个零售市场的30%&#xff0c;达到4万亿规模&#xff0c;百度、阿里、腾讯等头部玩家也都在加速布局&#xff0c;私域运营&#xff0c;已不再是一个单一的商业模式或者运营手段&#xff0c;而是逐渐构成一种可持续的行业生态。 一、什么…

全球量子计算已开始商业化!应用最多的行业你一定想不到

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨卉可 排版丨沛贤 深度好文&#xff1a;2600字丨5 分钟阅读 01 量子计算是一场高风险的游戏 近日&#xff0c;PsiQuantum从澳大利亚联邦政府和地方政府获得了10亿澳元资金&#xff0c;这…

大屏UI:建筑可视化应用越来越广泛,根本挡不住。

建筑可视化在可视化大屏中有许多应用场景&#xff0c;以下是其中一些常见的应用场景&#xff1a; 建筑项目展示&#xff1a;可以使用建筑可视化技术展示正在进行或已完成的建筑项目。通过可视化大屏&#xff0c;可以展示建筑的外观、内部布局、材料选择等信息&#xff0c;帮助…

鬼畜作品创作必备素材,鬼畜自学语音包合集

一、素材描述 鬼畜是什么&#xff1f;鬼畜是一种网络流行语&#xff0c;也是网络文化的一种表现形式。它指的是将原本无关的两个或多个视频、音频、图片或文字进行剪辑、混合、重组等处理后&#xff0c;形成一种新的有趣、诙谐或恶搞的作品。鬼畜的制作过程通常需要一定的技术…

图像归一化处理

归一化 归一化是一种简化计算的方式&#xff0c;即将有量纲的表达式&#xff0c;经过变换&#xff0c;化为无量纲的表达式&#xff0c;成为标量。 在多种计算中都经常用到这种方法。 简单介绍 归一化是一种无量纲处理手段&#xff0c;使物理系统数值的绝对值变成某种相对值关…

C++哈希(个人笔记)

C哈希 1.unordered_mapd1.1unordered_map的构造函数1.2unorder_map的容量1.3unordered_map的迭代器1.4unordered_map的元素访问1.5unorder_map的查找1.6unordered_map的修改操作1.7unordered_map的桶操作 2.unordered_set3.unordered_set和unordered_set的笔试题4.哈希4.1哈希概…

应急救灾北斗终端手机应用方案

在应对自然灾害和紧急救援的严峻挑战中&#xff0c;技术的力量从未如此重要。为了保障救援人员能够迅速、准确地响应灾情&#xff0c;提供及时有效的救助&#xff0c;顶坚应急救灾北斗终端手机应用应运而生。这款应用依托北斗卫星导航系统的高精度定位与通信功能&#xff0c;不…

图扑智慧农业——生态鱼塘数字孪生监控

智慧农业园作为新型农业经营模式&#xff0c;正在以其高效、环保、可持续的特点受到广泛关注。智慧鱼塘作为智慧农业中一项关键技术&#xff0c;结合物联网、人工智能、云计算等技术&#xff0c;实现对新型养殖模式的实时监控、优化与管理。 效果展示 图扑软件应用自研 HT for…