这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性。书中详细讲了async、defer、src和type四个<script>的属性。

  下面是对第二章做的笔记

<script>元素

type:可选。表示编写代码的脚本语言的类型;属性的值一般是text/javascript。不过,这个属性不是必需的,如果没有指定这个属性,则其默认值仍为text/javascript。

 <script type="text/javascript">
function sayHi(){
alert("Hi");
}
</script>

也就是说下面的代码和上面的是等价的

<!--type属性不是必需的,如果没有指示这个属性,则其默认值仍为这个text/javascript-->
<script>
function sayHi(){
alert('Hi');
}
</script>

在使用<script>嵌入JavaScript代码时,在任何地方出现"</script>"字符串都是错误的。

   <script>
alert("</script>"); //这段代码是错误的
</script>

这个时候需要转义字符“\”来解决这个问题

 <script>
alert("<\/script>"); //用转义字符“\”来解决这个问题
</script>

2、src:可选。属性的值是一个指向外部JavaScript的链接。

<script type="text/javascript" src="example.js"></script>   

后面结束的</script>可以省略

<script type="text/javascript" src="example.js" />

标签的位置

在文档<head>元素中包含所有的JavaScript文件,意味着必须等到全部JavaScript代码都被下载解析和执行完成以后,才能开始呈现页面内容,这样会使浏览器呈现页面出现明显延迟。(浏览器遇到<bady>元素才开始呈现内容)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>《JavaScript高级程序设计》第二章</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>

3、defer(延迟):可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>《JavaScript高级程序设计》第二章</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>

4、async(异步):可选。表示当前脚本不需要等待其他脚本,也不必阻塞文档呈现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>《JavaScript高级程序设计》第二章</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>

对脚本不太理解,下面是在百度搜的脚本简介

脚本(Script):是一种批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等。

脚本简单地说就是一条条的文字命令,这些文字命令是可以看到的(如可以用记事本打开查看、编辑),脚本程序在执行时,是由系统的一个解释器,将其一条条的翻译成机器可识别的指令,并按程序顺序执行。因为脚本在执行时多了一道翻译的过程,所以它比二进制程序执行效率要稍低一些。

 

2020-04-22    21:25:41

《JavaScript高级程序设计》——第二章在HTML使用JavaScript的更多相关文章

  1. javascript高级程序设计第二章知识点提炼

    这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.

  2. javascript高级程序设计第二章

    看后总结: 1.js代码用得最多的两种加载方式: a)外部文件形式:<script type="text/javascript" src="jquery.min.j ...

  3. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  4. javascript高级程序设计---第二、三章

    在HTML中引用javaScript javascript的几个属性  type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...

  5. JavaScript 高级程序设计第二版

    20.4 部署 20.4.1 构建 构建过程始于在源控制中定义用于存储文件的逻辑结构.最好避免使用一个文件存放所有的JavaScript,遵循以下面向对象语言中的典型模式:将每个对象或自定义了类别分别 ...

  6. javascript高级程序设计第一章有感

    第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...

  7. javascript 高级程序设计1--14章重点总结

    js简介 首先介绍了js是一种专门与网页交互而设计的脚本语言.主要由ECMAScript 文档对象模型(DOM) 浏览器对象模型(BOM)三部分组成.分别用来提供核心语言,提供访问和操作网页内容的方法 ...

  8. JavaScript 高级程序设计 第二版

    function outputNumbers(count) {     (function () {         for (var i =0;i < count; i++) {        ...

  9. javascript高级程序设计第一章

    看后总结: 1.javascript的组成成分:ECMAscript+DOM+BOM

  10. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

随机推荐

  1. Java基础一篇过(六)Java8--lambda表达式

    一.简介 lambda表达式是Java8的一个重要特性,也可以称为闭包,常用于配合Java8的Stream对集合元素进行操作,使得代码更简介紧凑. 二.代码解析 虽说lambda表达式是一个新的特性, ...

  2. Sublime Text3 for Java 编译运行环境配置 入门详解 - 精简归纳

    Sublime Text3 for Java 编译运行环境配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 24 转载请注明出处!️ 目录 Sublime Text3 for ...

  3. Elasticsearch(2):索引详谈

      在上一篇博客中,介绍了ES中的一些核心概念和ES.Kibana安装方法.本节开始,我们从索引开始来学习ES的操作方法.   1 创建索引¶   创建一个索引的方法很简单,在Kibana中运行下行请 ...

  4. HTTP 的前世今生,那些不为人知的秘密

    每个时代,都不会亏待会学习的人. 大家好,我是 yes. HTTP 协议在当今的互联网可谓是随处可见,一直默默的在背后支持着网络世界的运行,对于我们程序员来说 HTTP 更是熟悉不过. 平日里我们都说 ...

  5. Java知识系统回顾整理01基础05控制流程03 while

    while和do-while循环语句 一.while:条件为true时 重复执行 只要while中的表达式成立,就会不断地循环执行 public class HelloWorld { public s ...

  6. C#怎么从List集合中随机取出其中一个值

    1.首先在该命名空间下创建一个实体,和在Main方法下List集合,为后续做准备: /// <summary> /// 实体 /// </summary> public cla ...

  7. Pock 把 Touch Bar 变成系统中的 Dock 栏

    Pock 把 Touch Bar 变成系统中的 Dock 栏 Pock 是一款 macOS App,你可以通过它把 Touch Bar 变成系统中的 Dock 栏,直接用来切换和启动 App,尽享全屏 ...

  8. Docker 开启非认证的2375端口,提供外部访问 Docker

    1.编辑 Docker 服务的配置文件 vi /usr/lib/systemd/system/docker.service 或者 vi /lib/systemd/system/docker.servi ...

  9. 工信部今日向三大运营商和中国广电发放5G商用牌照

    央视快讯:工信部向中国电信.中国移动.中国联通.中国广电发放5G商用牌照. 2016年5月5日,工信部向中国广播电视网络有限公司颁发了<基础电信业务经营许可证>,批准中国广播电视网络有限公 ...

  10. 在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足。....”

    在Windows7中打开照片,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试. ...