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. SharedPreferences解析

    一.概述 SharedPreferences(简称SP)是Android中很常用的数据存储方式,SP采用key-value(键值对)形式,主要用于轻量级的数据存储,尤其适合保存应用的配置参数,但不建议 ...

  2. 单元测试mock当前时间

    在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的.如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类 namespace Common.Helper { ...

  3. Ubuntu下OpenCV版本切换

    1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...

  4. git使用方法----如何利用git管理代码？如何使用git将代码传到github中去

    ##  在文件夹中打开 git here; 1.git init ===初始化一个仓库(这个仓库会存放,git对我们代码进行备份的文件)2.配置个人信息 -- --在git中设置当前使用的用户是==( ...

  5. 项目中git版本控制及协作开发的常用操作（命令行，小乌龟，sourcetree）

    一. git命令:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 小乌龟:htt ...

  6. mongo 字段重命名

    执行语句 db.getCollection("A表").updateMany( {}, { $rename: { "A": "A1"} } ...

  7. ML - 特征选择

    1. 决策树中的特征选择 分类决策树是一种描述对实例进行分类的树型结构,决策树学习本质上就是从训练数据集中归纳出一组分类规则,而二叉决策树类似于if-else规则.决策树的构建也是非常的简单,首先依据 ...

  8. vue 关于vue.set的学习笔记

    vue新手小白,在看vue文档的时候 发现vue关于 数组,对象值改变的与 ng有那么点不同. 官方表示 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个 ...

  9. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  10. AspectJ在Spring中的使用

    在上一篇AspectJ的入门中,简单的介绍了下AspectJ的使用,主要是以AspectJ的example作为例子.介绍完后也留下了几个问题:1)我们在spring中并没有看到需要aspectj之类的 ...