Js培训

7,886 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,886
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 脚本语言是介于 HTML 和 Java 、 C++ 和 Visual Basic 之类的编程语言之间的语言。 HTML 通常用于格式化文本和链接网页。编程语言通常用于向计算机发送一系列复杂指令。脚本语言也可用来向计算机发送指令,但它们的语法和规则没有可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。
  • 静态联编   静态联编是指联编工作出现在编译连接阶段,这种联编又称早期联编,因为这种联编过程是在程序开始运行之前完成的。 动态联编   编译程序在编译阶段并不能确切知道将要调用的函数,只有在程序执行时才能确定将要调用的函数,为此要确切知道该调用的函数,要求联编工作要在程序运行时进行,这种在程序运行时进行联编工作被称为动态联编,或称动态束定,又叫晚期联编。
  • 包括两部分: (1)<Script> 标识,它用来通知解释器,有脚本嵌入在此标识之中; (2)Language 属性,它用来说明在标识之中是脚本语言。 通过使用语句 document.write() ,可以显示用户信息,它是 JavaScript 基本的输出。
  • 包括两部分: (1)<Script> 标识,它用来通知解释器,有脚本嵌入在此标识之中; (2)Language 属性,它用来说明在标识之中是脚本语言。 通过使用语句 document.write() ,可以显示用户信息,它是 JavaScript 基本的输出。
  • Js培训

    1. 1. Beyond Technology JavaScript( Ver1.0 ) 演讲人:丁海波
    2. 2. 目的与目标 <ul><li>能够熟练的使用 JavaScript 语言对页面中的元素进行动态操作,对 Form 中的控件可以进行合法性,有效性校验等等。 </li></ul>
    3. 3. 课程概述 <ul><li>本课程主要是介绍 JavaScript 语言的语法,如何使用 JavaScript 对页面中的元素进行动态操作和对页面中可输入,可选择的控件进行校验等。 </li></ul>
    4. 4. <ul><li>第一章 : JavaScript 简介 </li></ul><ul><li>第二章 : JavaScript 基本语法 </li></ul><ul><li>第三掌 JavaScript 对象 </li></ul><ul><li>第四章 在浏览器中使用 </li></ul>
    5. 5. <ul><li>第一章 : JavaScript 简介 </li></ul>
    6. 6. JavaScript 历史 <ul><li>JavaScript 是由 Netscape 公司开发的一种脚本语言,结构简单,使用方便,对用户自身知识水平的要求并不高,易学易懂。 </li></ul><ul><li>Netscape 将这种脚本语言命名为 LiveScript ,它的整个语法以 Java 为基础,但比 Java 要简单,同时,由于它是一种脚本语言,所以无需编译,可由浏览器直接解释运行,而不象 Java 那样需要经过编译。 </li></ul><ul><li>Netscape 见 LiveScript 大有发展前途,而 SUN 也觉得可以利用 Livescript 为 Java 的普及做铺垫,于是两家签订协议,将 LiveScript 改为 JavaScript ,造就了这个强力的 WEB 页开发工具。 </li></ul>
    7. 7. JavaScript 的特点 <ul><li>1.JavaScript 是一种脚本语言 </li></ul><ul><ul><li>语法和规则没有可编译的编程语言那样严格和复杂,主要用于格式化文本和使用以编程语言编写的已编译好的组件。 </li></ul></ul><ul><li>2.JavaScript 是基于对象的语言 </li></ul><ul><ul><li>面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分 ( 即对象 ) 的组合体。基于对象的语言本身已具有创建完成的对象。例如,“日期”对象。 </li></ul></ul><ul><li>3.JavaScript 是事件驱动的语言 </li></ul><ul><ul><li>当你在 Web 主页中进行某种操作时,就产生了一个“事件”。事件几乎可以是任何事情 : 敲击一个按钮、拖动鼠标等均可视为事件。 JavaScript 是事件驱动的,当事件发生时,它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。 </li></ul></ul>
    8. 8. JavaScript 的特点 <ul><li>4.JavaScript 是安全的语言 </li></ul><ul><ul><li>JavaScript 被设计为通过浏览器来处理并显示信息,但它不能修改其它文件中的内容。也就是说,它不能将数据存储在 Web 服务器或用户的计算机上,更不能对用户文件进行修改或删除操作。 </li></ul></ul><ul><li>5.JavaScript 是平台无关的语言 </li></ul><ul><ul><li>对于一般的计算机程序,它们的运行与平台有关。例如,除非你使用一个仿真器来模拟 Windows 环境,否则不可能在 Macintosh 上运行一个 Windows 应用程序。 JavaScript 则并不依赖于具体的计算机平台(虽然有一些限制),它只与解释它的浏览器有关。不论你使用 Macintosh 还是 Windows ,或是 UNIX 版本的 NetscapeNavigator , JavaScript 都可正常运行。 </li></ul></ul>
    9. 9. JavaScript 的功能 <ul><li>JavaScript 的功能总体可以归结为两类: </li></ul><ul><li>  1 、交互性   使用 JavaScript 可以大大加强 WEB 页的交互性,如轻松的在你的 WEB 页中加入按钮,显示带有控制的文本,建立交互式表格等。 </li></ul><ul><li>  2 、动态性    JavaScript 可以使 WEB 页上显示的文本信息动起来或是加入一些动画,从而使你的 WEB 页看上去活泼诱人。 </li></ul>
    10. 10. JavaScript 与 Java 语言的比较 <ul><li>JavaScript 不是 Java </li></ul><ul><li>   Java 是由 Sun 公司开发 , 与平台无关的、面向对象的程序设计语言,它与 JavaScript 基于对象的结构相反。 Java 可以用来设计独立的应用程序,也可以用来创建一种称为 Applets 的小应用程序。经过编译后, Applets 成为一种平台无关的字节代码,这种 Applets 可以运行在任何平台上,只要该平台具备能够操作 Applets 的 Java 虚拟机即可。 </li></ul>
    11. 11. JavaScript 与 Java 语言的比较 <ul><li>JavaScript 与 Java 之间其它的一些主要区别 </li></ul><ul><li> 1、 Java 程序被编译成为字节代码文件; JavaScript 则是将字符正文传递给客户方并由客户方解释执行。 </li></ul><ul><li> 2、 JavaScript 是基于对象的,它自身具有已创建完毕的对象;而 Java 则是面向对象的,对象必须从类中创建。 </li></ul><ul><li> 3、 JavaScript 的代码以字符的形式嵌入在 HTML 文档中; Javaapplets 则是由文档引用,其代码以字节代码的形式保存在另一个独立的文件中。 </li></ul>
    12. 12. JavaScript 与 Java 语言的比较 <ul><li>JavaScript 与 Java 之间其它的一些主要区别 </li></ul><ul><li> 4、在 HTML 文档中,用标识 <SCRIPT> 标明 JavaScript 脚本;而 Javaapplets 则用标识 <APPLET> 来标明。 </li></ul><ul><li> 5、 JavaScript 采用弱类型;而 Java 则采用强类型。 </li></ul><ul><li> 6、 JavaScript 采用动态联编 ; 而 Java ,则采用静态联编。 </li></ul>
    13. 13. JavaScript 的局限性 <ul><li>   JavaScript 为 Web 内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”,能够将一个 Web 节点中的不同组成部分捆绑在一起,成为一个紧密结合的信息源。然而,像任何事物一样, JavaScript 也有它的局限性。 </li></ul><ul><li>浏览器相关的局限性: IE,Nectscape </li></ul><ul><li>平台相关的局限性 :Windows,Unix </li></ul>
    14. 14. JavaScript 的局限性 <ul><li>安全性有关的局限性 </li></ul><ul><li>   JavaScript 的设计目标在于“ Web 安全性”,它比以前任何一种方法都更能保证 Web 的安全 ( 例如: perl 和 CGI) ,这自然是牺牲 JavaScript 的一些功能换来的。 </li></ul><ul><li>   (1) JavaScript 不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个 Web 主页中的信息。 </li></ul><ul><li>   (2) JavaScript 不能打开、读、写、保存 Web 服务器上的文件。尽管你可以使用它来提交 HTML 命令,但 HTML 命令也不能打开那些文件。   </li></ul>
    15. 15. JavaScript 与 HTML <ul><li>在 HTML 文档里面, <html> 标签对内包容了 <head> 和 <body> 标签对。 <head> 标签对内包容了 <title> 标签对 , <title> 标签对内的文字串是显示窗口的标题。 <body> 标签对内包容了显示页面的内容。 JavaScript 的基本成分—变量、函数和事件处理方法—和 HTML 代码编织在一起,变量和函数被包容在新标签对 <script> 内,而 <script> 标签对则一般放在 <head> 标签对内;事件处理方法可以被包容在任何 <body> 中的标签对内,用于响应某事件,激发某 JavaScrip 函数。 </li></ul>
    16. 16. JavaScript 与 HTML <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>js example</title> </li></ul><ul><li><Script Language= “ JavaScript”> document.write(“hello world!”) </li></ul><ul><li></Script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>// 可以包含事件响应代码等 </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    17. 17. JavaScript 包含文件 <ul><li>你可以将 JavaScript 文件在 HTML 文件外面存放!把你的零碎们放到一起,起个名字,再给它个 js 的文件尾。 </li></ul><ul><ul><li>非常重要: js 文件里不能有 <script></script> 或其它注释。 </li></ul></ul><ul><li>例如:把 pku.js 文件链接到 HTML 文件中的句型如下: </li></ul><ul><ul><li><script src= “ pku.js” language=&quot;JavaScript“></script> </li></ul></ul>
    18. 18. <ul><li>第二章 : JavaScript 基本语法 </li></ul>
    19. 19. JavaScript 的语法结构 <ul><li>JavaScript 的语言结构既宽松又简单; </li></ul><ul><li>JavaScript 的基本概念: </li></ul><ul><li>语句 :一条由计算机完成的、帮助你达到某种目的的指令, JavaScript 中的每一行都可认为是一条语句。 </li></ul><ul><li>变量 :一个代表某个值的名字就是变量。 </li></ul><ul><li>表达式 : A=1+B ;就是表达式。 </li></ul><ul><li>函数 :具有一定功能的程序段; 1 、 parseInt 可以将字符串转化为整型数。 2 、 paseFloat 将字符串转化为附点数。 </li></ul>
    20. 20. JavaScript 的数据类型 <ul><li>JavaScript 支持的数据类型共有四种 </li></ul><ul><ul><li>1 、数值型:其中包括整型数和浮点型数。 </li></ul></ul><ul><ul><li>2 、布尔型:即逻辑值, true 或 flase 。 </li></ul></ul><ul><ul><li>3 、字符串型:由单个或多个文本字符组成。 </li></ul></ul><ul><ul><li>4 、空值:由关键字 null 代表。 </li></ul></ul><ul><li>JavaScript 的命名规则 </li></ul><ul><ul><li>1 、变量名中可以包含数字 0-9 、大写或小写的拉丁字母和下划线。 </li></ul></ul><ul><ul><li>2 、变量名的首字符必须为字母或下划线。 </li></ul></ul><ul><ul><li>3 、变量名对字母的大小写敏感。 </li></ul></ul><ul><ul><li>4 、变量名的长度必须在一行内。 </li></ul></ul><ul><ul><li>5 、变量名中不能有空格与其它标点符号。 </li></ul></ul>
    21. 21. 变量与表达式 <ul><li>创建变量 </li></ul><ul><ul><li>var anumber = 137;// 变量的值是一个数 </li></ul></ul><ul><ul><li>var anumber1=2; </li></ul></ul><ul><ul><li>var astring = “1”; // 变量的值也可以是一个字符串 </li></ul></ul><ul><ul><li>var astring1=“hello”; </li></ul></ul><ul><li>表达式 </li></ul><ul><ul><li>xx=astring1+astring // 结果是 x=“hello1” </li></ul></ul><ul><ul><li>xx=anumber+anumber1// 结果是 xx=139 </li></ul></ul><ul><ul><li>xx=anumber+astring // 结果是 xx=“1371” </li></ul></ul>
    22. 22. 表达式与操作符 <ul><li>赋值操作符: </li></ul><ul><ul><li>= 、 += 、 -= 、 *= 、 /= 、 %= 、 <<= 、 >>= 、 >>>= 、 &= 、 ^= 、 |= ; </li></ul></ul><ul><li>条件表达式: </li></ul><ul><ul><li>status = (age >= 18) ? &quot;adult&quot; : &quot;minor&quot; ; </li></ul></ul><ul><li>算数操作符: </li></ul><ul><ul><li>+ 、 - 、 * 、 / 、 % 、 ++ 和 -- , y = ++x ; </li></ul></ul><ul><li>位逻辑运算符: </li></ul><ul><ul><li>& 、 | 、 ^; << 、 >> 、 >>> </li></ul></ul><ul><li>布尔操作符: </li></ul><ul><ul><li>&& 、 || 、 ! </li></ul></ul><ul><li>比较操作符: </li></ul><ul><ul><li>有 == 、 > 、 >= 、 < 、 <= 、 != ; </li></ul></ul><ul><li>连接操作符 + 用于连接两个字符串: </li></ul><ul><ul><li>x= &quot;Hello &quot;; y= &quot;World!&quot;; x + y 为 &quot;Hello World!&quot; </li></ul></ul><ul><li>其他操作符 </li></ul><ul><ul><li>in, typeof instanceof 等 </li></ul></ul>
    23. 23. JavaScript 流程控制语句 <ul><li>if 和 else: </li></ul><ul><ul><li>if( condition ) {...} else {... } ; </li></ul></ul><ul><li>for 和 while : </li></ul><ul><ul><li>for( 初始化表达式 ; 条件 ; 增值表达式 ) { 执行语句 ; } ; </li></ul></ul><ul><ul><li>while( 条件 ) { 条件为真执行 ; } ; </li></ul></ul><ul><ul><li>break 可以用在 for 或 while 循环中,使循环中断,跳到 for 或 while 循环结束的位置; </li></ul></ul><ul><ul><li>continue 用在 for 或 while 循环可以跳过循环体中剩余的语句,直接进行循环的下一次迭代 . ; </li></ul></ul>
    24. 24. <ul><li>第三章 JavaScript 对象 </li></ul>
    25. 25. JavaScript 对象模型 <ul><li>JavaScript 被称为是“基于对象的” ( 而不是面向对象的 ) ,有对象的概念:数据和操作的封装 , 但没有继承的概念。从定义的角度看 , JavaScript 程序中有两种对象: JavaScript 提供的内置对象( built-in object )和程序中定义的对象。 </li></ul><ul><li>一个对象是一个由变量、其他对象或方法组成的一个集合: </li></ul><ul><ul><li>在一个对象中包含的其他对象和变量被称为特性 (property) ; </li></ul></ul><ul><ul><li>在一个对象内的函数 (function) 称为这个对象的方法 ( method) ; </li></ul></ul><ul><ul><li>在一个特定的对象中的一些特性的序列称为数组 , 例如 document 对象中的 image[] ; </li></ul></ul><ul><ul><li>多维数组是由含有数组特性的对象数组构造的 </li></ul></ul>
    26. 26. <ul><li>当一个文档加载到浏览器后,它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让 Script 指出它要的是哪一个对象,这就是对象引用。 JavaScript 用严格的层次结构引导 Script 至文档的任何区域,对每个对象的引用必须包括从顶部到对象的所有层次,直至对象名,路径中各个相连的对象之间用句点分开。 </li></ul><ul><li>变量可以写成下面的形式: </li></ul><ul><ul><li>父对象 . 特性 1[ 索引 1]. 特性 2.. 最后特性 [ 索引 N] </li></ul></ul><ul><li>对象的方法 (method) 可以如此引用: </li></ul><ul><ul><li>对象 . 方法 ( 参数组 ) ; </li></ul></ul><ul><li>一个含有典型特性和方法的对象的例子: </li></ul><ul><ul><li>document 是对应一个 .html 文档的对象,浏览器读进文档后生成; </li></ul></ul><ul><ul><li>document.writeln(“hello”) 是这个对象的一个方法,输出带换行的字符串; </li></ul></ul><ul><ul><li>document.location 是该对象的一个特性,含有它的 URL 。 </li></ul></ul>
    27. 27. 用户对象的定义 <ul><li>JavaScript 定义“类”、“函数”的语法是一样的,而且这样的函数就成了该类的构造函数 ! </li></ul><ul><ul><li>用户用函数定义来定义类,然后用 new 语句创建该类的一个实例。以下是“类”的例子。( 实际效果 ) </li></ul></ul><ul><li><HEAD><script language=“javascript”> </li></ul><ul><li>function add() { this.result = this.left + this.right; } </li></ul><ul><li>function MyClass(n) { </li></ul><ul><li>this.left = n; </li></ul><ul><li>this.right = 6; </li></ul><ul><li>this.result = 0; </li></ul><ul><li>this.sum = add;} </li></ul><ul><li></script></HEAD> </li></ul><ul><li><BODY><script language=“javascript” > </li></ul><ul><li>x = new MyClass(4); x.sum(); document.write(x.result); </li></ul><ul><li></script></BODY> </li></ul>
    28. 28. <ul><li>prototype 属性 </li></ul><ul><li>返回对象类型原型的引用。 </li></ul><ul><li>引用方式: </li></ul><ul><li>objectName .prototype </li></ul><ul><li>objectName 参数是对象的名称。 </li></ul>
    29. 29. JavaScript 的对象 : Array <ul><li>属性: length ,它指明了数组的长度。 </li></ul><ul><li>方法: </li></ul><ul><li>join() 将数组值连接变为一个字符串; </li></ul><ul><li>reverse() 将数组值倒序; </li></ul><ul><li>sort() 将对数组值进行排序 ; </li></ul><ul><li>AAA=new Array(3); </li></ul><ul><li>AAA[0]=&quot;B&quot;; </li></ul><ul><li>AAA[1]=&quot;A&quot;; </li></ul><ul><li>AAA[2]=&quot;C&quot;; </li></ul><ul><li>document.write(AAA.length+&quot;<br>&quot;); </li></ul><ul><li>document.write(AAA.join()+&quot;<br>&quot;); </li></ul><ul><li>document.write(AAA.reverse().join()+&quot;<br>&quot;); </li></ul><ul><li>document.write(AAA.sort().join())+&quot;<br>&quot;; </li></ul>
    30. 30. JavaScript 的对象 :String <ul><li>属性: length 属性表明字符串长度。 </li></ul><ul><li>方法 </li></ul><ul><li>字符串的转换; </li></ul><ul><li>toUpperCase() 将字符串所有字符转为大写; </li></ul><ul><li>toLowerCase() 将字符串所有字符转为小写; </li></ul><ul><li>toString() 将非字符串对象显示转化为字符串。 </li></ul><ul><li>字符串的处理; </li></ul><ul><li>substring() 将括号中参数所指的字符串片段返回; </li></ul><ul><li>charAt() 返回括号中指定位置字符串的内容; </li></ul><ul><li>split() 根据指定的分隔符把一个字符串划分为一个字符串数组。 </li></ul><ul><ul><li>如 :newstring = astring.substring(index1,index2); // 返回一个位置在 index1 和 index2-1 之间的字符串,特别是如果 index2 < index1 ,子串返回 index2 和 index1-1 之间的部分 ! </li></ul></ul>
    31. 31. JavaScript 的对象 :Date <ul><li>属性:无 </li></ul><ul><li>方法: </li></ul><ul><li>a 、设定日期 setDate(),setMonth(),setYear() ; setTime() 设定时间 1970.1.1 开始用毫秒数来计时; </li></ul><ul><li>b 、日期格式转换 .Date.UTC() 返回一个通用时间,距 1970 年 1 月 1 日午夜的毫秒。 </li></ul><ul><li>c 、获取日期 </li></ul><ul><li>.Date.getDate(), .Date.getMonth(), .Date.getYear(), .Date.parse(), Date.getDay(); </li></ul><ul><li>d 、处理时区 .toGMTString() 将日期时间值转换为的字符串 (GMT 时间 ) ; .tolocaleString() 将日期时间值转换为的字符串 ( 当地时间 ) 。 </li></ul>
    32. 32. JavaScript 的对象 :Math <ul><li>属性: </li></ul><ul><li>.E :为自然对数的底 ( 约为 2.718) ; .PI :为圆周率 ( 约为 3.14159) ; …… </li></ul><ul><li>方法: .abs() 绝对值计算; .pow() 数的幂; .sqrt() 计算平方根; </li></ul><ul><li>.cos() 、 .sin() 、 .tan() 、 .acos 、 .asin() 、 .atan(); </li></ul><ul><li> …… </li></ul>
    33. 33. JavaScript 的屏幕对象 <ul><li>  显示器- screen 。各种相关特征涵义参数举例说明 </li></ul><ul><li>screen.height 屏幕高度 </li></ul><ul><li>screen.width 屏幕宽度 </li></ul><ul><li>screen.availHeight 屏幕可见高度 </li></ul><ul><li>screen.availWidth 屏幕可见宽度 </li></ul><ul><li>screen.colorDepth 色深 8 , 16 , 32 位颜色 </li></ul>
    34. 34. JavaScript 事件模型 <ul><li>事件:用户对网页的一些特定“操作” ( 这些操作通常直接对应鼠标的动作 ) 和系统行为。例如加载一张网页,点击一个超链等。 </li></ul><ul><li>事件处理程序的引入(如何使一段 JavaScript 程序和事件的发生联系起来?)。 </li></ul><ul><li>“ on 事件名”是 JavaScript 规定的对应事件处理程序柄( event handler )的名字。例如 onClick 、 onfocus 、 onSubmit 等等。 </li></ul>
    35. 35. JavaScript 事件模型 ( 续 ) <ul><li>第一种引入方式:事件处理程序柄名以属性名的形式在 HTML 文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的 JavaScript 程序段(或事件处理函数名) </li></ul><ul><ul><li><input type=“text” name=“age” onChange=“isNumber(this)”> ; </li></ul></ul><ul><li>第二种引入方式:将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性( property ) </li></ul><ul><ul><li>document.forms[0].age.onchange=isNumber ; </li></ul></ul><ul><li>例:让事件处理程序作为“属性值” </li></ul><ul><ul><li><BODY onLoad = &quot;window.defaultStatus = 'This is my page'; return true&quot;> </li></ul></ul><ul><ul><li>这里,事件处理程序柄的名字是大小写不敏感的。这与 HTML 文本中对标记的属性名的松散要求是一致的。 </li></ul></ul><ul><ul><li>OnLoad 在网页完全加载完后执行 ( 即包括图像 ,applet 等 ) ; </li></ul></ul><ul><ul><li>OnUnLoad 在网页退出之前执行。 </li></ul></ul>
    36. 36. JavaScript 程序的注意事项 <ul><li> 最好把源码写进 HTML 文件头里, <title> 及 </head> 之间是合适的地方。 </li></ul><ul><li>  JavaScript 程序要用 <script> , language 这个限定参数也是必要的。再用 </script> 把程序关闭。 </li></ul><ul><li> 提示开始标记 <!-- 。最后得用结束标记 //--> 来关闭提示。 </li></ul><ul><li> 对所编程序加必要的注释。单行或多行注释加在 /**/ 号中间来标示;单行注释则加在 // 号后面。 </li></ul>
    37. 37. 第四章 在浏览器中使用
    38. 38. 1. 代表 浏览器 器所 打开的窗口 。 2. 通常代表目前正在使用 (focus) 的 窗口 。 3. 如果 打开多个浏览器窗口时 ,可以利用 别 名 (alias) 来区别它们 , 如: ex. opener, parent, self, window, top 窗口对象 (Window object)
    39. 39. 窗口对象 使用语法 window. 特性 window. 方法 ( 参数 群 ) self. 特性 //self 代 表 目前 window 或 frame 名称 self. 方法 ( 参数 群 ) top. 特性 //top 代表最 顶层的窗口 top. 方法 ( 参数群 ) parent. 特性 //parent 代表目前框架的 父 框架 parent. 方法 ( 参数 群 ) 窗口名称 . 特性 窗口名称 . 方法 ( 参数 ) 特性 方法 ( 参数 )
    40. 40. <ul><li>closed -> 说明窗口是否已经关闭 </li></ul><ul><li>defaultStatus -> 浏览器底部预设的状态列讯息 </li></ul><ul><li>length -> 窗口重的框架个数 </li></ul><ul><li>Frame -> 窗口 中的 frame </li></ul><ul><li>frames -> 窗口 中的 frame 数组 </li></ul><ul><li>name -> 窗口的名称 </li></ul><ul><li>opener -> 打开该窗口的窗口名称 </li></ul><ul><li>status -> 浏览器底部自行设定的状态信 </li></ul><ul><li>document -> 窗口 中的 document 对象 </li></ul><ul><li>history -> 窗口 history 对象 </li></ul><ul><li>location -> 窗口对象的 对象中的 location 对象 </li></ul>窗口 对象 的 属 性
    41. 41. <ul><li>alert() -> 显示警告讯息 </li></ul><ul><li>confirm() -> 显示确认讯息 </li></ul><ul><li>prompt() -> 显示提示讯息 </li></ul><ul><li>focus() -> 成为焦点 </li></ul><ul><li>blur() -> 移开焦点 ( 成为背景处理 ) </li></ul><ul><li>open() -> 打开新浏览窗口 </li></ul><ul><li>close() -> 开关已打开的浏览窗口 </li></ul><ul><li>eval() -> 执行引数运算式计算 </li></ul>窗口 对象的 方法
    42. 42. <ul><li>resizeBy(x, y) -> 将窗口尺寸向 X 轴及 Y 轴调整 </li></ul><ul><li>moveBy(x, y) -> 将窗口向 X 轴及 Y 轴移动 </li></ul><ul><li>scroll(x,y) -> 卷动至指定的座標 </li></ul><ul><li>print() -> 列印指定之窗口內容 </li></ul><ul><li>setTimeout() -> 设定一定时程序 ( 计时器 ) </li></ul><ul><li>clearTimeout() -> 撤销一定时程序 ( 计时器 ) </li></ul><ul><li>toString() -> 传回字串表示值 </li></ul><ul><li>valueOf() --> 传回数值表示值 </li></ul>窗口 对象的 方法
    43. 43. <Script> function grow(){ window.resizeBy( 50, 50) } function shrink(){ window.resizeBy( -50, -50) } </script> <body onMouseOver=grow() onMouseOut=shrink()> <H1> 将窗口放大与缩小 </H1> </body> 范例 – 自动放大窗口
    44. 44. <Script> function scrollIt() { for (y=1; y<=1000; y++){ scroll(1,y) } } </Script> <body onDblClick=scrollIt() > 按鼠标左键兩下,画面自动卷动 .... <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> ... The End .... <body> 范例 一 – 自动卷动窗口
    45. 45. 打开新窗口对象的 语法 [ 窗口对象名称 =] [Window.] open (‘[URL]‘ , ‘[ 新窗口名称 ] ‘ , [‘ 窗口的规格‘ ] ) <ul><li>窗口对象名称 :用以使用窗口对象的特性与方法。 </li></ul><ul><li>ex. 窗口对象名称 .close </li></ul><ul><li>窗口名称 :用以识別该窗口。 </li></ul><ul><li>ex. <a href=“http://www.seed.net.tw” target=“ 窗口名称” > </li></ul>
    46. 46. <form> <input type=button value=&quot; 打开窗口一 (newWin)&quot; onClick=&quot; newWin =window.open('test.htm','')&quot;><P> <input type=button value=&quot;height 为 150 点 ,width 为 200 点 &quot; onClick=&quot;open('test.htm','',' height=150,width=200 ')&quot;><P> <input type=button value=&quot; 只有工具列的窗口 &quot; onClick=&quot;open('test.htm','',' toolbar=yes ')&quot;><P> <input type=button value=&quot; 开关窗口一 (newWin)&quot; onClick= newWin .close()><P> <input type=button value=&quot; 开关目前窗口 &quot; onClick= window .close()><P> </form> 窗口对象范例 - 打开与开关窗口
    47. 47. <Script> function grow(){ window .resizeBy( 0, 150) } function shrink(){ window .resizeBy( 0, -150) } </script> <body onMouseOver=grow() onMouseOut=shrink()> 广告页 here </body> 窗口对象范例 - 动态调整广告页大小
    48. 48. 使用 Timer 的 语法 1.Timer 又称为计时器或延 迟 器,常用来指定于 特定时间后执行某程式。 2. 时间单位为毫秒 ( 千分之一秒 ) ex. 3000 milliseconds = 3 seconds [window.]setTimeout( “ 欲执行的程式码或函数” , 设定的时间 )
    49. 49. 使用 Timer 的 语法 ( 二 ) 如果利用 循环 将计时器设计成重复执行,欲终止计时器执行,请使用此一格式。  因为要终止计时器的执行,必须指定欲终止 的计时器名称。 计时器对象名称 = [window.]setTimeout(“ 欲执行的 代码 或函数” , 设定的时间 )
    50. 50. 终止 循环 內 Timer 的 语法 终止计时器的执行,必须指定欲终止的计时器名称。 [window.]clearTimeout( 计时器对象名称 )
    51. 51. <script> function timer() { setTimeout(&quot;alert('3 秒到了 !')&quot;,3000) } </script> <body><form> <input type=button value=&quot; 计时开始 &quot; onClick=timer()> </form></body> 窗口对象范例 - timer(1)
    52. 52. <script> var counter=0 setTimeout(&quot; upDate() &quot;,3000) // 三秒钟后呼叫 upDate() function upDate() { counter ++ status = &quot; 第 &quot; + counter + &quot; 次载入 &quot; timer1 = setTimeout(&quot;upDate()&quot;,3000) } </script> <body><form> <input type=button value=&quot; 计时结束 &quot; onClick=clearTimeout(timer1)> </form></body> 窗口对象范例 - timer(2)
    53. 53. 历史对象 (history object) <ul><li>history 对象是用来 存储 客戶端 访问过 的 URL 资料。 </li></ul><ul><li>这些历史 记录是 以串列 (list) 的方式 存储 。 </li></ul><ul><li>各大浏览器均提供检视 history 工具 </li></ul><ul><li>ex. IE -> 检视 / 移至 </li></ul><ul><li> NC -> 前往 (go) </li></ul>
    54. 54. <ul><li>历史对象的使用语法如下。 </li></ul><ul><li>history. 特性 </li></ul><ul><li>history. 方法 ( 参数群 ) </li></ul><ul><li>length ->history 对象中 URL 个数 </li></ul><ul><li>back() -> 载入历史对象中上一个 URL </li></ul><ul><li>forward() -> 载入历史对象中下一个 URL </li></ul><ul><li>go() -> 载入指定的 URL </li></ul>历史对象的使用语法
    55. 55. <body> <form> <input type=button value=&quot; 上一页 &quot; onClick= history.back() > <input type=button value=&quot; 下一页 &quot; onClick= history.forward() > </form> </body> 窗口对象范例 - history
    56. 56. <Script> with (document) { write(&quot;<a href= javascript: location.reload() > 重新载入此页 </a><p>&quot;) write(&quot;<a href = javascript: location.replace ('http://www.seed.net.tw')> 前往 SeedNet 方法一 </a><p>&quot;) write(&quot; 前往 SeedNet 方法二 <p>&quot;.link('http://www.seed.net.tw')) write(&quot;<a href='http://www.seed.net.tw'> 前往 SeedNet 方法三 </a><p>&quot;) } </Script> <body> <a href=&quot;http://www.seed.net.tw&quot;> 前往 SeedNet 方法四 </a> </body> 窗口对象范例 - location(1)
    57. 57. <body> <a href=' # ' onMouseOver=location.replace('http://www.seed.net.tw')> 前往 SeedNet 方法五 </a><p> <a href=' # ' onMouseOver=location .href ='http://www.seed.net.tw'> 前往 SeedNet 方法六 </a><p> <a href=' # ' onMouseOver= window. location='http://www.seed.net.tw'> 前往 SeedNet 方法七 </a> </body> 窗口对象范例 - location(2)
    58. 58. Document 对象
    59. 59. 1. 代表目前的文件信息。 2. 直接对应至 HTML 的 Body 标签 。 文档 对象 (Document object)
    60. 60. <ul><li>document. 特性 </li></ul><ul><li>d ocument. 方法 ( 参数群 ) </li></ul><ul><li>bgColor -> 相当于 HTML 的 BGCOLOR </li></ul><ul><li>alinkColor -> 相当于 HTML 的 ALINK </li></ul><ul><li>linkColor -> 相当于 HTML 的 LINK </li></ul><ul><li>vlinkColor -> 相当于 HTML 的 VLINK </li></ul><ul><li>fgColor -> 相当于 HTML 的 TEXT </li></ul><ul><li>title -> 相当于 HTML 的 <title> </li></ul><ul><li>lastModified -> 最近更新日期 </li></ul><ul><li>URL -> 文件的 URL </li></ul>文档 对象 的使用语法
    61. 61. Document Anchor Applet Area Image Form Link 文 档 对象的对象 阶层图
    62. 62. <Script> document.write(&quot;◎ 本页最后更新日期: &quot;) document.write(document. lastModified ) </Script> 文档 对象范例 – 最近更新时间
    63. 63. Form 对象
    64. 64. 1. 用于定义表单,提供使用者输入资料。 2. 包含许多控制类型。 3. 直接对应至 HTML 的表单元件。 表单对象 (Form object)
    65. 65. Form Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarea 表单对象的对象 阶层 图
    66. 66. <ul><li>表单名称 . 特性 </li></ul><ul><li>表单名称 . 方法 ( 参数群 ) </li></ul><ul><li>forms[ 索引值 ]. 特性 </li></ul><ul><li>forms[ 索引值 ]. 方法 ( 参数群 ) </li></ul>表单对象 的使用语法
    67. 67. <ul><li>action ->ACTION 属性设定值 </li></ul><ul><li>elements -> 以陣列代表表单內所有元件 </li></ul><ul><li>encoding -> 使用 POST 传送时之编码方式 </li></ul><ul><li>length -> 表单內元件个数 </li></ul><ul><li>method -> 指定传送方式 (POST/GET) </li></ul><ul><li>target -> 将执行结果于特定窗口內执行 </li></ul>表单对象的 特性
    68. 68. <ul><li>表单对象可使用的方法如下。 </li></ul><ul><li>reset() -> 模拟按下 reset 按钮的动作 </li></ul><ul><li>submit() -> 模拟按下 submit 按钮的动作 </li></ul><ul><li>toString() -> 传回字串表示值 </li></ul>表单对象的 方法
    69. 69. <ul><li>显示一个可供输入 的域 。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onChange, onFocus </li></ul><ul><li>onKeyDown, onKeyUp </li></ul><ul><li>onMouseDown, onMouseUp </li></ul>本文对象 (Text object)
    70. 70. <ul><li>type = text // 类型为本文 </li></ul><ul><li>name = tel // Text 名称 </li></ul><ul><li>value = 03-4257387 // 初始值 </li></ul><ul><li>size = 20 // Text 大小 </li></ul><ul><li>title = 提示值 // 提示值 </li></ul><ul><li>AccessKey = L // 快捷键值 </li></ul><ul><li>maxlength = 10 // 可输入资料长度 </li></ul><ul><li>readonly // 指定成为 只读 属性 </li></ul>本文对象相关参数
    71. 71. 文 本 对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值
    72. 72. 1. 显示一个可供选择 ( 单选 ) 的 按钮 。 2. ON 表示确认﹔ OFF 表示不确认。 可使用的事件处理程序: onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 圆钮对象 (Radio object)
    73. 73. <ul><li>type = radio // 类型为圆钮 </li></ul><ul><li>name = sex // 名称为 sex </li></ul><ul><li>value = boy // 传送值为 boy </li></ul><ul><li>checked // 设定为预设选项 </li></ul>圆钮对象相关参数 Input type=radio name=sex value=boy checked
    74. 74. 圆钮对象的对象特性 checked -> 判断是否已經核取 defaultChecked -> 该元件预设为核取与否 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值
    75. 75. <form name=form1> 性 別: <input type=radio name=sex> 男生 <BR> <input type=radio name=sex checked > 女生 <BR> <input type=button value=&quot; 判断使用者输入 &quot; onclick= SEX() > </form> <script> function SEX() { if (document.form1.elements[0]. checked ) sex=&quot; 男生 &quot; else sex=&quot; 女生 &quot; alert(' 性別是: '+sex) } </script> 表单对象范例 - radio
    76. 76. 1. 显示一个可供选择的 复选框 。 2. ON 表示确认﹔ OFF 表示不确认。 可使用的事件处理程序: onBlur, onClick, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 确认方块对象 (Checkbox object)
    77. 77. <ul><li>type = checkbox // 类型为确认方块 </li></ul><ul><li>name = hobby // 名称 </li></ul><ul><li>value = music // 传送值 </li></ul><ul><li>checked // 设定为预设选项 </li></ul>确认方块对象相关参数 Input type=checked name=hobby value=music
    78. 78. 1. 显示一个可供输入密码的 输入框 。 2. 利用 * 隐藏所输入的资料。 可使用的事件处理程序: onBlur, onChange, onFocus onKeyDown, onKeyUp onMouseDown, onMouseUp 密码对象 (password object)
    79. 79. <ul><li>type = password // 类型为密码 </li></ul><ul><li>name = password // 名称 </li></ul><ul><li>value = 1234 // 初始值 </li></ul><ul><li>size = 20 // 大小 </li></ul><ul><li>maxlength = 10 // 可输入资料长度 </li></ul>密码对象相关参数 Input type=password name=pw
    80. 80. <form name=form1> 输入密码: <input type=password name=pw1><BR> 重新输入: <input type=password name=pw2><BR> <input type=button value= 开始检查 onClick=checkPw()> </form> <Script> function checkPw(){ if (document.form1 .pw1.value != document.form1 .pw2.value ) alert (&quot; 兩組密码不符,请重新输入 &quot;) else alert (&quot;OK!&quot;) } </Script> 表单对象范例 - password(1)
    81. 81. 密码对象的对象特性 defaultValue -> 该元件预设值 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值
    82. 82. <Script> function checkPwLgh(index,str){ if (str.length != 9){ alert(' 你只输入 '+str.length+' 位数 请输入 9 位数密码 ') document.form1.elements[index]. value = '' document.form1.elements[index]. focus() }} function checkRetype(){ if (document.form1.pw.value != document.form1.retypePw.value){ alert (&quot; 兩組密码不符,请重新输入 &quot;) document.form1.retypePw. value = '' document.form1.retypePw. focus() } else alert (&quot; 密码检查作業完成 !&quot;)} </Script> … < 下页续 > 表单对象范例 - password(2)
    83. 83. …… < 接上页 > <form name=form1> 输入密码: <input type=password name=pw size=9 maxlength=9 onChange=checkPwLgh(0,this.value) ><BR> 重新输入: <input type=password name=retypePw size=9 maxlength=9 onChange=checkPwLgh(1,this.value) ><BR> <input type=button value= 密码检查 onClick=checkRetype()> </form> 表单对象范例 - password(2)
    84. 84. <ul><li>提供一个 隐藏域 ,用以储存 </li></ul><ul><li>特殊资料值,以供运算或参考。 </li></ul>隐藏对象 (hidden object)
    85. 85. <ul><li>type = hidden // 类型为隐藏 </li></ul><ul><li>name = dummy // 对象名称 </li></ul><ul><li>value = 1234 // 元件初始值 </li></ul>隐藏对象相关参数 Input type=hidden name=dummy value=1234
    86. 86. <ul><li>提供一組选单,供使用者选择。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onChange, onFocus </li></ul><ul><li>onClick, onDblClick </li></ul>选择对象 (select object)
    87. 87. <ul><li>name = week // 名称 </li></ul><ul><li>size = 3 // 下拉框 大小 </li></ul><ul><li>multiple // 设定为可多选 </li></ul><ul><li>option // 定义 选择的 內容 </li></ul><ul><li>selected // 预选项目 </li></ul><ul><li>value // 定义传送值 </li></ul>选择对象相关参数
    88. 88. <form> <select size=2 > <option value=0>Sunday <option value=1>Monday <option value=2>Tuesday <option value=3>Wednesday <option value=4>Thursday <option value=5>Friday <option value=6 Selected >Saturday </select> </form> 表单对象范例 - select(1)
    89. 89. 选择对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件目前输入值 selectedIndex -> 选项的索引值 length -> 选项个数 options -> 选项 数组
    90. 90. <Script> url = new Array(2) url[0] = &quot;http://www.seed.net.tw&quot; url[1] = &quot;http://www.hinet.net&quot; function jumpPage(form) { i = form.menu. selectedIndex ; if (i>0) window.location.href = url[i-1] } </Script> <Form><Select name=menu onChange=&quot;jumpPage(this.form)&quot;> <option>-- 选择 ISP--<option>Seednet<option>Hinet </Select></Form> 表单对象范例 - select(2)
    91. 91. <Html><Script> function createOptions(){ var option = new Option(document.form1.select1.value) document.form1.select2.options[2] = option } </script> <form name=form1> <select name=select1 size=10> <option> 可选择项目 <option>--------------- <option value= 香蕉 > 香蕉 <option value= 芭樂 > 芭樂 <option value= 蘋果 > 蘋果 <option value= 梨子 > 梨子 </select> … 下页续 … 表单对象范例 – 动态选单
    92. 92. … 接上页… <input type=button value=&quot;-->&quot; onClick=createOptions()> <select name=select2 size=10> <option> 选择项目 <option>--------------- </select></form> </Body> </Html> 表单对象范例 – 动态选单
    93. 93. 练习 <ul><li>设计一交 换 式选单: </li></ul><ul><li>所选取的项目应可 列在 右方。 ( 按按钮或鼠标点清单项 目两下 ) </li></ul><ul><li>加入右方选单后将左方选项清除。 </li></ul><ul><li>设计一个刪除钮可将选项刪除。 </li></ul>
    94. 94. <ul><li>提供一个按钮,供触发事件之用。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onClick, onFocus </li></ul>按钮对象 (button object)
    95. 95. <ul><li>type = button // 类型为按钮 </li></ul><ul><li>name = button1 // 按钮名称 </li></ul><ul><li>value = 请按我 // 按钮面显示值 </li></ul><ul><li>title = 送至 服务 器 // 提示值 </li></ul><ul><li>tabindex = 0 // 定位 顺 序 </li></ul><ul><li>disabled // 使失效 </li></ul>按钮对象相关属性
    96. 96. 按钮对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值 disabled -> 该元件生效否
    97. 97. <form name=form1> 动态设定按钮的显示字樣: <BR> 请输入: <input type=text onChange=&quot;document.form1.button1.value=this.value&quot;> <BR> <input type=button name=button1 value=' '> </form> 表单对象范例 - button
    98. 98. <FORM onReset= &quot;this.button1.disabled=true&quot; > <INPUT TYPE=text onClick= &quot;this.form.button1.disabled=false&quot; > <INPUT TYPE=button name=button1 disabled value=&quot; 传 送 &quot;> <INPUT TYPE=reset value=&quot; 重 来 &quot;> </FORM> 表单对象范例 - button
    99. 99. <ul><li>用以将表格內资料送至 服务 器之用。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onClick, onFocus </li></ul><ul><li>另外可在 Form 标签內搭配使用 </li></ul><ul><li>onSubmit </li></ul>提交 对象 (submit object)
    100. 100. <ul><li>type = submit // 类型为呈送钮 </li></ul><ul><li>name = submit1 // 按钮名称 </li></ul><ul><li>value = 提交 // 提交 钮表面显示值 </li></ul>提交 对象相关参数 Input type=submit name=submit1 value= 送出
    101. 101. 提交 对象的对象特性 type -> 该元件类型 Name -> 该元件识別名称 value -> 该按钮面显示值
    102. 102. <Script> function isReady() { if (document.form1.text1.value.length == 9) return true else alert(&quot; 请输入 9 位数密码 &quot;); return false } </Script> <Form name=form1 onSubmit= &quot;return isReady()&quot; > <input type=text name=text1> <input type=submit> </form> 表单对象范例 - submit 1. 双 引 号 不能省略 2. 当 onSubmit = true 时才 提交到 器
    103. 103. <Script> function isReady( form ) { if ( form .text1.value.length == 9) return true else alert(&quot; 请输入 9 位数密码 &quot;) form.text1.focus() // 将焦点移回 text return false } </Script> <Form name=form1 onSubmit=&quot;return isReady( this )&quot;> <input type=text name=text1> <input type=submit> </form> 表单对象范例 - submit
    104. 104. <ul><li>用以将表格內资料 还 原为预设值, </li></ul><ul><li>即重新输入之意。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onClick, onFocus </li></ul><ul><li>另外可在 Form 标签內搭配使用 </li></ul><ul><li>onReset </li></ul>重置对象 (reset object)
    105. 105. <ul><li>type = reset // 类型为重置钮 </li></ul><ul><li>name = reset1 // 按钮名称 </li></ul><ul><li>value = 重新输入 // 重置钮表面显示值 </li></ul>重置对象相关参数 Input type=reset name=reset1 value= 重新输入
    106. 106. 重置对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该按钮面显示值
    107. 107. <Form name=form1 onReset =alert(&quot; 重新来吧! &quot;)> <input type=text name=text1> <input type=reset> </form> 表单对象范例 - reset
    108. 108. <ul><li>提供一个多列的本文域。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onChange, onFocus </li></ul>本文 区 域对象 (textarea object)
    109. 109. <ul><li>name = textarea1 // 按钮名称 </li></ul><ul><li>rows = 8 // 列数 </li></ul><ul><li>cols = 30 // 行数 ( 字元数 ) </li></ul><ul><li>readonly // 定义为 只读 属性 </li></ul>本文 区 域对象相关参数 Input type=reset name=reset1 value= 重新输入
    110. 110. 本文 区 域对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 本文 区 域的內容 defaultValue -> 本文 区 域的预设內容
    111. 111. <form name=form1> 意 见 留 言 版 ......<BR> <textarea name=textarea1 rows =8 cols =30> </textarea> <input type=button value= 显示留言內容 onClick= alert(' 您的留言是: --------- '+document.form1.textarea1 .value )> </form> 表单对象范例 - textarea
    112. 112. <ul><li>提供一个本文 域 与档案浏览按钮。 </li></ul><ul><li>可使用的事件处理程序: </li></ul><ul><li>onBlur, onChange, onFocus </li></ul>档案对象 (file/fileUpload object)
    113. 113. <ul><li>type = file // 型态为档案对象 </li></ul><ul><li>name = file1 // 对象名称 </li></ul>档案对象相关参数 Input type=file name=file1
    114. 114. 档案对象的对象特性 type -> 该元件类型 name -> 该元件识別名称 value -> 该元件內容值
    115. 115. <form> <input type=file name=file1> <input type=button onClick=alert(document.forms[0].file1. value )> </form> 表单对象范例 - file

    ×