《JavaScript高级程序设计》笔记:在HTML中使用Javascript(二)
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(二)的更多相关文章
- JavaScript高级程序设计笔记(一)
---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...
- JavaScript高级程序设计笔记之面向对象
说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...
- javascript高级程序设计--笔记01
概述 JavaScript的实现包含三个部分: 1 核心(ECMAScript) 提供核心语言功能 2 文档对象模型(DOM) 一套提供了访问以及操作网页内容的API 3 浏览器对象模型( ...
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...
- <javascript高级程序设计>笔记
1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...
- Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)
var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...
- javaScript高级程序设计笔记 2
Undefinde Null Boolean Number String 基本类型 Object 引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...
- javaScript高级程序设计笔记 1
核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM 延迟脚本 defer typeof操作符 判断字符类型 返回 undefined boolean s ...
- Javascript高级程序设计笔记 <第五章> 引用类型
一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...
随机推荐
- 封装一个简易版的ajax操作对象
/** * 发送ajax请求 * @type {Object} * 使用方法如下: * $ajax.request( * method: "post", //请求方式 * url: ...
- 微信小程序快捷键(Mac和windows)
最近因为有点闲暇时间,所以抽空简单了解了小程序,因为小程序是使用微信开发者工具编码,不能使用其它编辑器,比如,Sublime,Hubilder等. 所以就百度了一下小程序快捷键,但总觉得不全,所以就去 ...
- 【详记MySql问题大全集】一、安装MySql
最近公司要从SqlServer转到MySql,期间在安装环境和数据迁移的过程中,遇到了一些不大不小问题,比如怎么重置密码.怎么设置大小写敏感等等. 这些问题都比较细比较杂,这边解决完可能过几天就忘了, ...
- webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
当我们出现以下报错! 解决方案: // webpack配置文件 const path = require('path'); const htmlWebpackPlugin = require('htm ...
- 运行 Spring Boot 应用的 3 种方式
今天介绍 3 种运行 Spring Boot 应用的方式,看大家用过几种? 你所需具备的基础 什么是 Spring Boot? Spring Boot 核心配置文件详解 Spring Boot 开启的 ...
- 解决方案:ppt打不开,显示发现文件中的内容有问题。可尝试修复此演示文稿
ppt打不开,显示发现文件中的内容有问题.可尝试修复此演示文稿 故障截图如下: 解决方法: 主要是因为文件是网络下载的,office自动锁定了文件(默认不可编辑).在文件上右键-属性-解除锁定(最下面 ...
- 关于git 指令
命令行操作(由于是Linux命令行下的普通用户,都是在$级别下操作): 一. 本机配置 添加用户 git config –global user.name “XX” git config –gloab ...
- mysql 开发进阶篇系列 22 磁盘I/O问题(从linux操作系统上优化)
1. 使用Symbolic Links分布I/O mysql的数据库名和表名是与文件系统的目录名和文件名对应的,默认情况下,创建的数据库和表都存放在参数datadir定义的目录下.如果不使用RAID或 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 编码(2)从字节理解Unicode(UTF8/UTF16)
https://www.cnblogs.com/zizifn/p/4716712.html 从字节理解Unicode(UTF8/UTF16) 如果你不知道或者不了解什么是Unicode/UTF8/UT ...