script元素

向html页面中插入js的主要方法就是使用<script>元素。
使用<script>元素的方式有两种：直接在页面中嵌入js代码和包含外部js文件。
直接在页面中嵌入js代码如下：

<script type="text/javascript">

    function sayHi(){

        alert("Hi!");

    }

</script>

外部js文件引入方式：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

延迟脚本 defer

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Example HTML Page</title>

<meta name="description" content=""/>

<meta name="keywords" content=""/>

<link type="text/css" rel="stylesheet" href="css/reset.css"/>

<link type="text/css" rel="stylesheet" href="css/main.css"/>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

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

</head>

<body>

<!--这里是内容-->

</body>

</html>

<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。

异步加载 async

指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，为此，建议异步脚本不要在加载期间修改DOM。

异步脚本一定会再页面load事件前执行，但可能会再DOMContentLoaded事件触发之前或之后执行。

就是在head标签之间加上代码：

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

文档模式

最初的俩种文档模式是：混杂模式(quirks mode)和标准模式(standards mode)。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。

如果在文档开始初没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。

noscript元素

包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

  • 浏览器不支持脚本

  • 浏览器支持脚本，但脚本被禁用

<body>

<noscript>

    <p>本页面需要浏览器支持（启动）JavaScript</p>

</noscript>

</body>

《JavaScript高级程序设计》笔记：在HTML中使用Javascript（二）的更多相关文章

  1. JavaScript高级程序设计笔记（一）

    ---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...

  2. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  3. javascript高级程序设计--笔记01

    概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型( ...

  4. javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记

    1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...

  5. JavaScript高级程序设计笔记 事件冒泡和事件捕获

    1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...

  6. <javascript高级程序设计>笔记

    1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...

  7. Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

    var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...

  8. javaScript高级程序设计笔记 2

    Undefinde Null Boolean Number String    基本类型 Object    引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...

  9. javaScript高级程序设计笔记 1

    核心  ECMAScript 文档对象模型  DOM 浏览器对象模型 BOM 延迟脚本  defer typeof操作符      判断字符类型  返回   undefined  boolean  s ...

  10. Javascript高级程序设计笔记 <第五章> 引用类型

    一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...

随机推荐

  1. npm安装webpack失败（mac和window都可能会遇到这样的情况，以下问题主要以mac为例）

     问题描述:我想查看一下webpack的版本,于是输入了命令webpack -v, 结果如下图所示: 注:这里提示我们要安装webpack-cli,是因为到了webpack4, webpack 已经将 ...

  2. Kali学习笔记25：Arachni使用（实现分布式扫描）

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Arachni不同于上次介绍的nikto和skipfi ...

  3. vs2017使用GitHub插件发布项目到github

    几乎每天都从博客园获取新知识,今天才发现我竟然没有博客园的账号,你说气人不.2008年10月就开始在CSDN上写记录,因为CSDN做记录还可以,但记录整个项目就有些捉襟见肘,后来就写Demo做备份到云 ...

  4. 使用GOOGLE COLAB训练深度学习模型

    使用 谷歌提供了免费的K80的GPU用于训练深度学习的模型.而且最赞的是以notebook的形式提供,完全可以做到开箱即用.你可以从Google driver处打开.或者这里 默认创建的是没有GPU的 ...

  5. SpringCloud入门之Spring Boot多环境配置切换指南

    在 spring boot 中,有两种配置文件,一种是application.properties,另一种是application.yml,两种都可以配置spring boot 项目中的一些变量的定义 ...

  6. Docker 快速入门之 Dockerfile

    在 Docker 中我们可以从名为 Dockerfile 的文件中读取指令并且自动构建镜像.在本文中,将介绍 Dockerfile 的基本语法以及基本知识. Dockerfile 是什么 Docker ...

  7. FastDFS 分布式文件存储目录

    1.fastdfs安装和配置 https://blog.csdn.net/hy245120020/article/details/78658081 2.使用nginx代理fastdfs以及图片裁剪(f ...

  8. 【Go】优雅的读取http请求或响应的数据-续

    原文链接:https://blog.thinkeridea.com/201902/go/you_ya_de_du_qu_http_qing_qiu_huo_xiang_ying_de_shu_ju_2 ...

  9. 深入浅出zookeeper之一：功能及本质

    zookeeper(下文简写为zk)大家都不陌生.但是,看到很多同学对zookeeper的理解过于程式化,有些地方甚至需要背,是大可不必的.把本质理解了,概念性和功能介绍都可以推出来的,而且架构要活学 ...

  10. (void) (&_x == &_y)的作用

    如果有下面这段代码: #define min(x, y) ({ \ const typeof(x) _x = (x); \ const typeof(y) _y = (y); \ (void) (&a ...