《javascript高级程序设计》笔记(二)

<script>元素

使用方法:

1.直接在页面嵌入

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

在解析器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。 在代码中若出现</script>,需要在前面加上转义字符"\"。

2.包含外部javascript文件

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

src属性是必须的。

如果在XHTML文档中,可以省略</script>标签,如:

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

但不能在HTML文档中使用,也得不到某些浏览器(尤其是IE)的正确解释。

注意:带src属性的<script>元素不应在其<script>和</script>标签之间再包含额外的javascript代码,这样做就只会下载并执行外部脚本文件,嵌入的代码会被忽略。

标签的位置

传统做法在文档的<head>元素中包含所有javascript文件,意味着必须等到所有javascript代码都被下载、解析和执行完成后,才能开始呈现页面的内容(浏览器在遇到<body>才开始)。

<!DOCTYPE html>
<html>
   <head>
        <title>Example HTML Page><title>
        <script type="text/javascipt" src="example1.js"></script>
        <script type="text/javascipt" src="example2.js"></script>
   </head>
   <body>
         <!-- 这里放内容-->
   </body>
</html>

现代Web应用程序一般都把全部javascript引用放在<body>元素中页面内容后

<!DOCTYPE html>
<html>
   <head>
        <title>Example HTML Page><title>
   </head>
   <body>
         <!-- 这里放内容-->
         <script type="text/javascipt" src="example1.js"></script>
         <script type="text/javascipt" src="example2.js"></script>
   </body>
</html>

延迟脚本

在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

<!DOCTYPE html>
<html>
   <head>
        <title>Example HTML Page><title>
        <script type="text/javascipt" defer="defer" src="example1.js"></script>
        <script type="text/javascipt" defer="defer" src="example2.js"></script>
   </head>
   <body>
         <!-- 这里放内容-->
   </body>
</html>

在这个例子只能搞,虽然我们把<script>元素中放在<head>中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行,第一个延迟脚本会优先于第二个延迟脚本执行,而这两个脚本会优先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMConentLoaded事件触发前执行,因此最好只包含一个延迟脚本

异步脚本

HTML5为<script>添加了async属性,它与defer属性类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的顺序执行。

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

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


嵌入代码与外部文件

外部文件的优点:

可维护性:遍及不同HTML页面的javascript会造成维护问题。但把所有javascript文件都放在一个文件夹中,维护起来就轻松多了。而且开发人员因此也能在不触及HTML标记的情况下集中精力遍及代码。

可缓存:浏览器能过根据具体的设置缓存链接的所有外部javascript文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此最终能加快页面加载速度。

适应未来:通过外部文件来包含javascript无需使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

文档模式

如果在文档开始处没有发现文档类型声明,浏览器会开启混在模式,不同浏览器在这模式下行为差异很大。

准标准模式与标准模式非常接近,它们的差异几乎可以忽略不计。不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时问题最明显)。

标准模式有以下3种

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>

准标准模式,可以通过过渡型(transitional)或框架集型(frameset)文档类型来触发。

HTML 4.01  过渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01  框架集型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0  过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0  框架集型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
时间: 2024-11-05 20:47:44

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

《OC疯狂讲义》笔记(二)

1.NSString的使用 C的字符串保存:1)字符数组      2)字符串的指针 OC中又专门的字符串处理的类(有字符串类型) NSString  不可变的字符串 NSMutableString 可变字符串 NSString 是OC字符串的类 1) NSString保存字符串 NSString *str = @"abc";    //用str保存字符串常量 创建空字符串 NSString *str = [NSString new]; str = @"xxxx";

《OC疯狂讲义》笔记(一)

1.OC简介 Objective-C    继承自C和smalltalk 最小程度增加了面向对象的部分,是一门面向对象编程语言 1986. Next 得到授权 关于 Cocoa 框架(96) Cocoachina.com code4app.com 2.OC HelloWorld OC的文件有哪几种? .h  头文件(声明类) .m  OC源文件(类的实现) #import <Foundation/Foundation.h>  //导入文件 //main函数是OC得主入口函数 int main(

《OC疯狂讲义》笔记(三)

1.类方法 1)什么是类方法 对象方法: -(返回值类型)方法名:(形参的类型) 形参名; 类方法 +(返回值类型)方法名:(形参的类型) 形参名; 2)类方法怎么去定义 +(返回值类型)方法名:(形参的类型) 形参名; 3)类方法的使用 调用: 对象方法:  [对象名    方法名:实参] 类方法:    [类名      方法名:实参] 4)使用类方法的好处 1)提高效率 2)减少内存空间占用 3)代码更加简洁 缺点:不能访问对象的成员变量 5)对象方法和类方法的对比 类方法        

《OC疯狂讲义》笔记(四)

1.两个关键字:self 和 super self 可以用在对象和类方法中 1)self用在对象方法中:指代的时调用当前对象方法的那个对象 2)self用在类方法中:指代的时当前类(实质是类对象) 总结:当self在方法中使用,谁调用这个方法,self指代的就是谁 super: 使用super的地方,一定存在继承关系 super调用父类的方法 2.面向对象的其他特性:继承 继承概念: 假设有两个类:A   B 继承是两个类之间的关系 假设声明B类的时候, 1)导入父类的头文件 2)设定继承关系

《OC疯狂讲义》笔记(五)

1.OC中的点语法 点语法: 对象名.成员变量名   (点语法不是访问成员变量,而是方法的调用) 它是一个编译器特性 点语法作用:可以替换传统的get和set方法的调用 点语法的前提: 首先得先有 get和set方法 点语法实质: 调用get和set方法 如果点语法出现在 = 的左边,表示设置值,相当于调用了set方法 p.age = 10; 替换为:[p setAge:10]; 如果点语法出现在 = 的右边,表示获取值,相当于调用了get方法 int age = p.age; 替换为:int

李刚OC语言疯狂讲义笔记

设计一个”学生“类1> 属性* 姓名* 生日用结构体作为类的实例变量(生日) #import <Foundation/Foundation.h> //定义生日的结构体 typedef struct{ int year; int month; int day; }MyDate; @interface Person : NSObject { @public NSString *_name;//定义姓名 MyDate _birthday;//定义生日 } @end @implementatio

java疯狂讲义笔记整理(第二版第一部分)

第一章    java语言概述 1.1    java语言的发展简史 1990末:    sun公司“Green计划”(James Gosling领导)        ----目的是智能家电编写一个通用嵌入式控制系统,为此创建oak 1992夏天:    "Green计划"完成新平台的部分功能 1992年11月:    "Green计划"被转为"FirstPerson有限公司"-一个sun的全资子公司,致力于创建一个高度互动的设备 1994夏天:

java8--类加载机制与反射(java疯狂讲义3复习笔记)

本章重点介绍java.lang.reflect包下的接口和类 当程序使用某个类时,如果该类还没有被加载到内存中,那么系统会通过加载,连接,初始化三个步骤来对该类进行初始化. 类的加载时指将类的class文件读入内存,并为之创建一个java.lang.class对象,也就是说,当程序中使用任何类时,系统都会为之建立一个java.lang.Class对象.(几乎所有的类都是java.lang.Class的实例); 所以JVM最先初始化的总是java.long.Object类. 在java中,一个类用

疯狂html5讲义(二):HTML5简的常用元素与属性(一):html5保留的常用元素

html5删除了少量的元素与属性:主要删除了文档样式相关的各种元素与属性,比如<font>.width等,html5规范推荐使用css样式单来控制html文档样式. 1.基本元素 <html>.<head>.<title>.<body>.<style>.<h1>到<h6>.<p>.<br>.<hr>(定义水平线).<div>.<span>~~~ <

疯狂html5讲义(二):HTML5简的常用元素与属性(二):html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性 此属性相当于一个全局的contentEditable属性 3.hidden属性 可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性 针对于input.textarea等元素,可以对用