JavaScript笔记(二)——HTML中的JavaScript
JavaScript笔记(二)
- 读书笔记
- HTML中的JavaScript
- 内容概要
- 2.1 <\script\>元素
- 2.1.1 标签位置
- 2.1.2 推迟执行脚本
- 2.1.3 异步执行脚本
- 2.1.4 动态加载脚本
- 2.2 行内代码与外部文件
- 2.3 文档模式
- 2.4 <\noscript\>元素
读书笔记
《JavaScript高级程序设计(第4版)》
HTML中的JavaScript
JavaScript是通过<script>元素插入到HTML页面中的。
- 要包含外部JavaScript文件,必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。
- 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下,包含在<script>元素中的代码必须严格按次序解释。
- 对不推迟执行的脚本,浏览器必须解释完位于<script>元素的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把<script>元素放到页面末尾,介于主内容之后及</body>标签之前。
- 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
- 可以使用async属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
- 通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则<noscript>元素中的任何内容都不会被渲染。
内容概要
2.1 <\script>元素
将JavaScript插入HTML的主要方法是使用<script>元素。
<script>元素有8个属性。
async:可选。表示应该立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
charset:可选。使用src属性指定的代码字符集。
crossorigin:可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。
//配置文件请求不必设置凭据标志 crossorigin="anonymous"//设置凭据标志,意味着出站请求会包含凭据 crossorigin="use-credentials"
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
integrity:可选。允许接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource Integrity)。
language:废弃。最初用于表示代码块中的脚本语言(如"JavaScript"、“JavaScript 1.2” 或 “VBScript”)。
src:可选。表示包含要执行的代码的外部文件。
type:可选。代替language,表示代码块中脚本语言的内容类型(也称MIME类型)。
使用<script>的方法:
直接在网页中嵌入JavaScript代码。
包含在<script>内的代码会被从上到下解释。在<script>元素中的代码被计算完成之前,页面的其余内容不会被加载,也不会被显示。//嵌入行内JavaScript代码 <script>function sayHi() {console.log("Hi!");} </script>
在使用行内JavaScript代码时,要注意代码中不能出现字符串</script>,否则会导致浏览器报错。
//使用转义字符" \" <script>function sayHi() {console.log("<\/script>");} </script>
在网页中包含外部JavaScript文件。
使用src属性。这个属性的值是一个URL,指向包含JavaScript代码的文件。比如:<script src="example.js"></script>
与解释行内JavaScript一样,在解释外部JavaScript文件时,页面也会阻塞。(阻塞时间也包含下载文件的时间。)
在XHTML文档中,可以忽略结束标签。
2.1.1 标签位置
过去,所有<script>元素都被放在页面的<head>标签内。如下例:
<!DOCTYPE html>
<html><head><title></title><script src="example1.js"></script><script src="example2.js"></script></head><body><!--页面内容--></body>
</html>
主要目的:把外部所有的CSS和JavaScript文件都集中放到一起。
实际情况:必须把所有JavaScript代码都下载、解析和解释完成后,才能开始渲染页面(页面在浏览器解析到<body>的起始标签时开始渲染)
问题:对于需要很多JavaScript的页面,这会导致页面渲染的明显延迟,在此期间浏览器窗口完全空白。
为解决这个问题,现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面。如下例:
<!DOCTYPE html>
<html><head><title></title></head><body><!--页面内容--><script src="example1.js"></script><script src="example2.js"></script></body>
</html>
这样页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快,因为浏览器显示空白页面的时间短了。
2.1.2 推迟执行脚本
HTML4.01为<script>元素定义了defer的属性。脚本会被延迟到整个页面都解析完毕之后再运行,相当于告诉浏览器立即下载,但延迟执行。
<!DOCTYPE html>
<html><head><title></title><script defer src="example1.js"></script><script defer src="example2.js"></script></head><body><!--页面内容--></body>
</html>
这个例子中的<script>元素包含在页面的<head>中,但它们会在浏览器解析到结束的</html>标签后才会执行。
第一个推迟的脚本会在第二个推迟的脚本之前执行。
把要推迟执行的脚本放在页面底部比较好。
注意:对于XHTML文档,指定defer属性时应该写成defer="defer"。
2.1.3 异步执行脚本
HTML5为<script>元素定义了async属性。
- 从改变脚本处理方式上看,async属性与defer类似。
- 都适用于外部脚本,都会告诉浏览器立即开始下载。
- 与defer不同的是,标记为async的脚本并不能保证能按照它们出现的次序执行。
<!DOCTYPE html>
<html><head><title></title><script async src="example1.js"></script><script async src="example2.js"></script></head><body><!--页面内容--></body>
</html>
在这个例子中,第二个脚本可能先于第一个脚本执行。
重点在于它们之间没有依赖关系,给脚本添加async属性的目的是告诉浏览器,不必等脚本下载和执行完后再加载页面,同样也不必等到该异步脚本下载和执行后再加载其他脚本。
注意:对于XHTML文档,指定async属性时应该写成async="async"。
2.1.4 动态加载脚本
//创建一个script元素并将其添加到DOM
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false; //同步加载
document.head.appendChild(script);
<!--让加载器知道动态请求文件的存在,在文档头部显式声明它们-->
<link rel="preload" href="gibberish.js">
2.2 行内代码与外部文件
推荐使用外部文件的理由:
- 可维护性。JavaScript代码如果分散到很多HTML页面,会导致维护困难。而用一个目录保存所有JavaScript文件,则更容易维护,这样开发者就可以独立于使用它们的HTML页面来编辑代码。
- 缓存。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件,如果两个页面都用到同一个文件,则该文件只需下载一次。
- 适应未来。包含外部JavaScript文件的语法在HTML和XHTML中是一样的。
2.3 文档模式
可以使用doctype切换文档模式。
2.4 <\noscript>元素
用于给不支持JavaScript的浏览器提供替代内容。
在下列两种情况下,浏览器将显示包含在<noscript>中的内容:
- 浏览器不支持脚本;
- 浏览器对脚本的支持被关闭。
<!DOCTYPE html>
<html><head><title></title><script defer="defer" src="example1.js"></script><script defer="defer" src="example2.js"></script></head><body><noscript><p>This page requires a JavaScript-enabled browser.</p></noscript></body>
</html>
这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本,则用户永远不会看到它。
JavaScript笔记(二)——HTML中的JavaScript相关推荐
- 读《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
- 【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时,其上下元素也受到影响
JavaScript修改二维数组的某个元素时,其上下元素也受到影响 发布:2021年8月15日18:54:56 前言 在研究背包问题时,一开始往往会用二维数组的形式来描述,这样会便于理解.但是,我在操 ...
- android 使用javascript,可以在Android中使用JavaScript吗?
可以在Android中使用JavaScript吗?如果是这样,怎么办?请提供一些示例. 谢谢. 最佳答案 我在这里参加聚会很晚,但是我确实有这个需要. iOS 7现在包含JavaScriptCore ...
- JavaScript概述和HTML中嵌入JavaScript的三种方式
"成功没有捷径,脚踏实地一步一个脚印,该来的总会来,不好高骛远,不急功近利,付出总会有回报,不管处于哪个阶段,都要一步一个脚印,踏实的走好每一步!" 目录 01.JavaScrip ...
- php中如何调用javascript,如何在php中调用javascript代码?
JavaScript是客户端脚本语言,PHP是用于与数据库交互的服务器端脚本语言.那么如何在php中调用javascript代码?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下 ...
- JavaScript函数调用方式:简单调用+在超链接中调用JavaScript函数+在事件中调用JavaScript函数
简单的调用 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- jQuery读书笔记二 jQuery中的事件与应用
1.实践中的冒泡现象: <style type="text/css">body{font-size:13px} .clsShow{border:#ccc 1px sol ...
- android webview javascript不执行,WebView中的JavaScript为什么不执行?
浏览器未开启javascript 使用的js代码有问题,webview不兼容该代码. 1) 第一个坎:WebSettings WebSettings webSettings = mWebView.ge ...
- 【theano-windows】学习笔记二——theano中的函数和共享参数
前言 上一篇博客中学到了theano中的变量类型,也就是dscalar.dvector之类的, 然后还有一个theano.function和eval函数, 将我们所定义的操作转换成theano可执行的 ...
最新文章
- 在C#程序设计中使用Win32 API
- 会飞的汽车来了!旋翼式陆空两栖智能飞车研发成功
- 洛谷P5664:Emiya 家今天的饭(容斥、dp)
- 安卓逆向_15( 三 ) --- Android NDK 开发【 jni 静态注册、JNI_OnLoad 动态注册】
- 动态规划 —— 背包问题 P08 —— 泛化物品背包
- MySQL 存储过程 if语句
- MATLAB中特殊图形的绘制
- 邮件误删不用怕,试试这个方法帮你找回来
- SDUT 2482 二叉排序树
- 拓端tecdat|中国消费者共享汽车使用情况调查
- GridView中设置DataFormatString无效的解决方法.
- ssci源刊里有开源期刊吗_SSCI和SCI期刊投稿指南-以经济学和管理学为例
- 1.7 COMS边沿触发器
- HDU 4939 DP
- iconst、bipush、sipush、ldc指令的区别
- DEEPIN 设置U盘启动
- ma-云计算 大数据 mapreduce概念和关系
- 如何启用计算机上的摄像头,电脑如何打开摄像头
- 教师资格证计算机科目有哪些内容,初中教师资格证考试科目及内容有哪些?
- 哥哥教你学嵌入式 之 智芯科技 开发板 Z20K11x系列 教程(一)
热门文章
- 趣链--ret解析,应用javajdk
- 【云周刊】第134期:阿里云发布ECS企业级产品家族 19款实例族涵盖173个应用场景...
- 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢?实现 int sqrt(int x) 函数。
- Crack密码验证小实验
- 智能机器人开发前景怎么样?有哪些应用领域?
- 小汪的vue学习笔记
- confluence 编辑器这次没有加载_一个在线 lrc 歌词生成/编辑器
- QGIS还可以很魔兽...
- 使用jeecg-boot心得
- Cisco基础 交换机的各种配置模式和基本配置