《JavaScript高级程序设计》笔记(2)

1. <script>元素


在HTML中使用JavaScript脚本时需要使用<script>元素。

<script>主要有6个属性:

1. async:可选,表示应该立即下载脚本,但不应该妨碍页面中的其他操作。只对外部脚本文件有效。

2. charset: 可选,比较少用。

3. defer: 可选,表示脚本可以延迟到文档完全被解析或显示后才执行。只对外部脚本文件有效。

4. language: 已废弃。

5. src: 可选,表示包含要执行代码的外部文件。

6. type: 可选,表示编写代码使用的脚本语言的内容类型(MIME类型)。

使用<script>元素的方式有两种:

1. 直接在页面中插入JavaScript代码,例如:

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

2. 外部链接JavaScript文件,例如:

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

需要注意的是,带有src属性的<script>元素不应该在<script>和</script>间包含额外的JavaScript代码,否则在加载时会被忽略。

另外,src指定的URL地址不仅可以指向HTML页面所在域,也可以是其他域的完整URL,例如:

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

<script>元素的位置

<script>元素如果放在<head>元素中,对于需要很多JavaScript代码的页面而言,会导致浏览器在呈现页面内容时有明显的延迟,而延迟期间的浏览器窗口将是一片空白。所以采用将<script>元素放在</body>标签前,这样浏览器会先呈现页面内容,然后再解析和执行JavaScript代码。

2. 嵌入代码与外部文件

外部文件链接较嵌入代码主要有以下优点:

1.
可维护性:JavaScript代码(行为层)与HTML(结构层)分离,可以使开发人员集中处理JavaScript代码,而不用触及HTML文件。

2.
可缓存性:当两个及以上HTML文件共用相同的JavaScript文件时,当打开第一个HTML文件时,浏览器可以缓存所有的JavaScript文件,当打开其他HTML文件时可以快速加载,节约了流量。

3. 文档模式

在HTML文件的<head>元素中要声明文档类型(DOCTYPE)。因为文档模式有混杂模式和标准模式之分,在未声明文档类型时,浏览器会默认开启混杂模式,在这种情况下,各个浏览器会产生很大的行为差异。

对于标准模式,可以通过以下任意一种文档类型来开启:


<!-- HTML 4.01 严格型 –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 –>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 –>
<!DOCTYPE html>

显而易见,HTML5标准下的文档模式更简单,其他两种声明较复杂。

4. <noscript>元素

使用JavaScript要秉持两个基本原则:渐进增强和平稳退化。对于不支持JavaScript或禁用JavaScript的浏览器可以使用<noscript>元素做到平稳退化,例如:


<html>
<head>
<title>Example</title>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。</p>
</noscript>
</body>
</html>

这个页面在不支持JavaScript或禁用JavaScript脚本的情况下,会显示一条提示。如果启用脚本,就不会看到<noscript>里的内容。

时间: 2024-10-13 09:40:09

《JavaScript高级程序设计》笔记(2)的相关文章

javascript高级程序设计——笔记

javascript高级程序设计--笔记 基本概念 基本数据类型包括Undefined/Null/Boolean/Number和String 无须指定函数的返回值,实际上,未指定返回值的函数返回的是一个特殊的undefined值 变量.作用域和内存问题 基本类型值在内存中占据固定大小的空间,因此保存在栈内存中 引用类型的值是对象,保存在堆内存中 确定一个值是哪种基本类型用typeof,确定一个值是哪种引用用instanceof 所有变量都存在于一个执行环境当中,这个执行环境决定了变量的生命周期,

javascript高级程序设计笔记1

最近在看javascript高级程序设计,看之前觉得自己的js学得还不错,然后,看了没几页就觉得自己好像没有学过一样,这主要写写我以前不完全了解的一些知识. 首先是关于基本数据类型的,从Number开始,以前经常用parseInt来转换数值,看过书才知道,这个函数的本意是专门用于把字符串转换成数值,而且以前也不知道它具体是怎么一个转换规则.先来看看Number()函数的转换规则: 1.如果是Boolean 值,true 和false 将分别被转换为1 和0.2.如果是数字值,只是简单的传入和返回

javascript高级程序设计笔记(第5章 引用类型)

1.Object类型 两种方式定义:对象字面量.new 两种方式访问:括号.点 2.Array类型 2.1  定义方式:new Array.数组字面量 2.2  lenght属性:可以利用它方便的想数组末尾添加元素 2.3  检测数组 instanceof isArray()方法  2.4  toString().soLocaleString().valueOf().join()方法 2.5.栈方法   push()方法:逐个添加到数组末尾,并返回修改后的数组长度 pop()方法:返回数组的最后

【javascript高级程序设计笔记】第六章OOP

忙了一段时间,加了将近一个月的班. 书也落下没看,上次看到第七章(这部分笔记大概还是9月份的吧),偶尔看到很吃力.看的速度慢下来. 学习就是一个慢慢积累慢慢沉淀的过程.看书时没有明显觉得提升.但在看完书后近段时间工作中写代码,明显感觉效率还是有提升,基础知识牢固了. 这本书是第二次看,这次很认真的遍读和做笔记,笔记的文字均是自己边看边敲的,这样才更好的真正的吸收到一部分吧! 这些天在看web响应式设计:HTML5和CSS3实战 第6章 面向对像的程序设计 6.1.1属性类型 ECMAScript

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

说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,JavaScript中如何面向对象? JavaScript中将对象定义为:一组无序的 键值对的集合,属性以及方法的名称就是键,键的值可以是任何类型(字符串,数字,函数--) 在JavaScript中,所有对象继承自Object,所有对象继承自Object,所有对象继承自Object! 创建 1  简单创建

javascript高级程序设计笔记(第7章 函数表达式)

7.5 小结 在JavaScript 编程中,函数表达式是一种非常有用的技术.使用函数表达式可以无须对函数命名,从而实现动态编程.匿名函数,也称为拉姆达函数,是一种使用JavaScript 函数的强大方式.以下总结了函数表达式的特点.? 函数表达式不同于函数声明.函数声明要求有名字,但函数表达式不需要.没有名字的函数表达式也叫做匿名函数.? 在无法确定如何引用函数的情况下,递归函数就会变得比较复杂:? 递归函数应该始终使用arguments.callee 来递归地调用自身,不要使用函数名——函数

【javascript高级程序设计笔记】第一章与第三章

第1章 javascript简介 1.2Javascript实现 一个完整的javascript实现由下列三个不同的部分组成 核心(ECMAScript) 提供核心语言功能 文档对象模型(DOM) 提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM)提供与浏览器交互的方法和接口 ECMAScript 它规定了这门语言的下列组成部分: 语法  类型  语句  关键字 保留字 操作符 对象 ECMA-262第5版,发布于2009年. 文档对象模型(DOM) Document Object M

JavaScript高级程序设计笔记

1.1 JavaScript简史 <script> async/defer可以控制js加载顺序 把js文件放在页面底部,加快页面打开速度 3 基本概念 语法 数据类型 流控制语句 理解函数 3.4 数据类型 ECMAScript中定义了六种数据类型:Underfined.Null.Boolean.Number.String.Object 使用typeof关键字来检测类型 //Boolean()转换 var bool1 = Boolean(true); var bool2 = Boolean(&

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

概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型(BOM)  一套提供了与浏览器交互的API ECMAScript仅仅定义了这门语言的基础,如定义了:语法.类型.语句.关键字等,实际上这门语言本身不包含输入输出定义. 而现实中,ECMAScript大多借用了某些宿主环境(如web浏览器,Node,Adobe Flash)来实现丰富的功能,这些宿主环

javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记

1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件. 4.DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段.(实际的目标元素在捕获阶段接不会收到事件) IE不支持DOM事件流,Opera.safari.chrome.firefox支持