JavaScript与动态交互网页的制作

JavaScript与动态交互网页的制作
第7章 JavaScript与动态交互网页的制作

本章内容第1节 JavaScript概述第2节 JavaScript基础第3节 JavaScript实例制作

第1节 JavaScript概述 1.1 JavaScript历史 1.2 JavaScript的特点
1.3 JavaScript与HTML

第1节 JavaScript概述一、JavaScript历史
JavaScript作为一种简单的脚本语言，其前身是LiveScript，是NetScape公司开发的一种语言。随着Sun公司开发出具有跨平台等许多优越特性的Java语言，NetScape公司将Java语言的部分特性融合进来，将LiveScript发展成现在的JavaScript。所以JavaScript和Java是两家不同的公司提出的不同的编程语言，只是在某些特性上有共同之处。

第1节　JavaScript概述二、JavaScript的特点是一种脚本编写语言基于对象的语言简单性安全性动态性跨平台性

第1节 JavaScript概述三、 JavaScript与HTML
1、在HTML中加入JavaScript <script language="JavaScript"> <!— ……JavaScript 脚本 //—> </script> 注意：用户编写的JavaScript脚本加在中间，<!— ……—>是为了把脚本对那些不支持元素SCRIPT的浏览器屏蔽掉，否则会把脚本当作文档的一部分显示在浏览器上。另外JavaScript也可以以一个外部文件的形式出现，这个文件的扩展名为“.js”。在使用时，需要通过设定SCRIPT元素的src属性来进行引用。 <script src=“script.js” language=“JavaScript”></script>

第1节 JavaScript概述 2、JavaScript的注释 JavaScript的注释是C++风格的，即有两种注释方法。
一种是单行注释，即在注释文字前加上“//”，这一行中在“//”后的文字都算作注释，浏览器将忽略，不对其进行解释。另一种注释是成段注释，方法为：在注释文字的前后两端分别加上“/*”和“*/”，在这中间的文字将被浏览器忽略，不进行解释执行。 3、JavaScript脚本的语句语句：就是在脚本中完整地完成一个动作的指令，可以是一个表达式、变量声明、赋值表达式、控制语句等。注意： JavaScript的一个语句可以用“；”标志结束，也可以没有任何标记，但必须自成一行。当把多句语句安排在一行时，这多个语句之间必须用“；”隔开，否则会出现语法错误。 4、 JavaScript的排错 JavaScript没有专门的排错工具，只能依靠浏览器，如果发现错误，就会弹出相应的对话框提示它认为的错误原因。

第2节 JavaScript基础 2.1 JavaScript的变量 2.2 JavaScript的常量 2.3 JavaScript的运算
2.5 函数 2.6 对象与属性方法

第2节 JavaScript基础一、JavaScript的变量 1、变量名
所谓变量(variable)就是在程序运行期间其值可以改变的量，在JavaScript中一个变量由一个该文档中独一无二的字符串或字符来代表。变量的命名规则为：变量名只能由字母、数字和下划线3种字符组成，且第一个字符必须是英文字母或下划线。变量名中不能出现空格。变量名不能和JavaScript的“保留”字重名。如class、new、throw等。在引用变量名时要区分大小写。例如：NUM、Num、num是三个不同的变量。

第2节　JavaScript基础 2、变量赋值将一个数据存放在一个变量中，这个过程称为“赋值”，在JavaScript中赋值用等号“=”来实现。例如：number=100，str=”you clicked button”等 3、变量声明在JavaScript中主要使用保留字var来声明变量，通常的声明方法为： var 变量名; 也可以在声明变量时给变量赋初值，如： var number=100 var string=” you clicked button”

第2节 JavaScript基础 4、变量类型（1）字符型
用单撇号栝起来的一个字符称为字符型常量。如’a’、’B’、’8’、’#’等都是合法的字符常量，在内存中占一个字节。另外一些特殊字符要特殊表示。如反斜杠“\”表示为“\\”；单引号“’”表示为“\’”；双引号“””表示为“\””；换行表示为“\n”等。将一个字符常量赋予一个变量中，实际上是将该字符的ASCII码值存储到内存单元中。例如ch=’A’ ，s=’c’等。（2）整型整型常量就是整型数据，例如200、-125等。在赋值时直接引用即可，例如a=251、num=-121等。

第2节　JavaScript基础（3）浮点型浮点型就是实数型，例如22.15、等。另外也可以用科学计数法表示，例如5.25e5或5.25E5表示5.25×105。（4）布尔型布尔型就是逻辑值型，它只有两个取值：true和false(表示真和假)。例如isChange=false表示isChange的逻辑值为假。（5）字符串型例如：“My computer”、“欢迎使用”等，把一个字符串赋予一个变量时要用双引号把字符串括起来。例如：var str=”welcome”。 JavaScript专门有一个对象String来处理字符串的运算。

第2节 JavaScript基础二、JavaScript的常量 JavaScript中预定了一些常数或文字，用于特殊用途： 1、NaN
该值用于函数返回特殊值，表示表达式不是数字(Not a Number)。例如下面的语句就在页面上显示一个“NaN”。 var str=”abc” document.write(parseInt(str)); 其中，方法parseInt(str)功能为把一个用字符串形式表示的数字转化为数字，变量str为”abc”不是数字，因此返回一个“NaN”。 2、null null代表一个变量中没有有效的数据。可以对一个变量显式地复制为null。

第2节 JavaScript基础 3、true，false
4、Infinity 该常量用来代表无穷大，例如：document.write(62/0) 在网页上显示Infinity。 5、undefined 该变量是在一个变量被创建之后和被赋值之前分配给该变量的一个特殊值。例如： var num document.write(num) 在网页上将显示undefined。

第2节 JavaScript基础 6. MAX_VALUE 代表JavaScript所能表达的最大值。约等于1.79E+308。
7. MIN_VALUE 代表JavaScript所能表达的最接近零的数。约等于2.22E-308。 8. NEGATIVE_INFINITY 代表比在JavaScript中能够表示的最小的负数更小的值(即负无穷小)。 9. POSITIVE_INFINITY 代表比在JavaScript中能够表示的最大正数更大的值(即正无穷大)。

第2节 JavaScript基础三、JavaScript的运算 JavaScript中的运算符很丰富，可分为以下几类：
算术运算符：+(加法)、- (减法/取负)、* (乘法)、/ (除法)、% (求余数)、++ (递增)、-- (递减)；逻辑运算符：== (相等)、!= (不相等)、<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、&&(逻辑与)、||(逻辑或)、！(逻辑非)；位运算符：&(位与)、|(位或)、~(位非)、^(异或)、<<(位左移)、>>(位右移)、>>>(无符号右移)；条件运算符：?: (三目运算)；逗号运算符：，(逗号运算)；特殊运算符：delete、typeof、void；

第2节 JavaScript基础四、JavaScript的控制语句 JavaScript中也有两种控制语句：条件控制语句和循环控制语句。
1、条件控制 If语句的基本格式： if (condition) then statement1 [ else statement2 ]

第2节 JavaScript基础例如：一个根据不同时间显示不同问候语的程序。显示结果： <html>
<body> <script language="JavaScript" >  </script> </body> </html> 显示结果：

第2节 JavaScript基础 2、循环控制循环控制有四种形式，分别为：for循环、for…in、while和do…while。
for循环的形式为： for(initialization ; test ; increment) statement 例如：for循环，求0到10的和。 <html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节 JavaScript基础（2）for…in循环
这种循环对应于一个对象的每个属性，或一个数组的每个元素，执行一个或多个语句。格式为： for(variable in [object | array]) statement 其中variable是一个变量，它可以是object的任一属性或array的任一元素；object、array为要在其上遍历的对象或数组；statement是相对于object的每个属性或array的每个元素，都要被执行的语句，可以是复合语句。

第2节 JavaScript基础（3）while循环
这种循环先判定指定的条件是否为true，如果expression的Boolean值为true，则执行一个语句，直到expression的Boolean值为false时结束。格式为： while(expression) statement 例如：while循环 var i=0 while(i<3) { document.write(“This is ” + i + “line.<br>”) i++ } 这段代码在浏览器窗口中执行的结果为： This is 1 line. This is 2 line. This is 3 line.

第2节 JavaScript基础（4）do…while循环
这种循环和while循环基本一样，但是它先执行一次statement语句，然后才判定指定的条件是否为true，如果expression的Boolean值为true，则继续执行下一个循环语句，直到expression的Boolean值为false时结束。格式为： do{ statement } while(expression) 例如：这个例子和前一个相比稍有变化。 var i=0 do { document.write(“This is ” + i + “line.<br>”) i++ } while(i<3) 其执行结果与上例一样。

第2节 JavaScript基础例如：break语句 3、break语句与continue语句
<html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节　JavaScript基础这段代码实现了在小于100的整数中找出所有的质数，并在浏览器窗口中显示出来，显示结果：

第2节 JavaScript基础例如：continue语句 var s= " ",i=0; while(i<10) { i++;
if(i==5) continue; } s+=i; document.write(s) 这段代码中当i=5时跳过下面的语句，重复执行下一轮循环。因此，结果s应为40而不是45。

第2节 JavaScript基础五、函数 1、函数声明 JavaScript中的函数使用关键字function来声明一个函数，其格式为：
function functionname([argument1 [,argument2 [,…argumentn]]]) { statements } 其中，functionname为函数名，在文档中是独一无二的，且取函数名时必须符合变量命名规则；argument1…argumentn是可选的、函数的参数列表，各个参数之间用逗号分开；statements为一个或多个JavaScript语句组成的函数体，通过它们来实现函数的功能。注意：使用function语句声明的函数，必须被调用才能执行。

第2节 JavaScript基础例如：function </html> <html> <head>
<script language="JavaScript" >  </script> </head> <body> <input name="button" type="button" value="单击这个按钮" onclick="f1()"> </body> </html>

第2节　JavaScript基础这段代码中，定义了一个函数f1()。用鼠标单击“单击这个按钮”，就会调用f1()函数，弹出一个对话框。

第2节 JavaScript基础 2、全局变量和局部变量
所谓全局变量是在文档中所有函数为声明的变量，他的有效范围为整个文档；而局部变量是在某个函数内部声明定义的变量，他的有效范围只在函数内部。在一个文档中，如果出现同名的全局变量和局部变量时，在该函数内，局部变量的优先权大于全局变量。例如：全局变量和局部变量 <script> <!— var variable=”这是一个全局变量” function func1() { alert(variable) } function func2() var variable=” 这是一个局部变量” func1() func2() //--> </script> 在这个例子中，函数func1()显示的是全局变量variable的值。函数func2()显示的是局部变量variable的值。

第2节 JavaScript基础 3、函数的参数
函数的参数是函数间互传数据的主要渠道，通过函数的参数，使实现在不同的情况下执行统一功能的模块成为可能。例如：函数参数的传递 <html> <head> <script language="JavaScript" > <!-- function f1() { var name=window.prompt("请输入你的姓名：","") f2(name) } function f2(str) var username=“”

第2节 JavaScript基础 username=str alert("你的姓名是：" + username) } // -->
</head> <body> <input name="button" type="button" value="单击这个按钮" onclick="f1()"> </body> </html> 在这段代码中定义了两个函数f1()和f2()，在IE浏览器中单击“单击这个按钮”按钮将弹出输入框，输入姓名后，单击“确定”按钮，将弹出一个对话框。在这个例子中，在f1()中调用了一个带参数的函数f2()。

第2节　JavaScript基础

第2节 JavaScript基础 4、函数的返回值
JavaScript中的函数可以返回一个布尔值、整型、实型、字符串等类型的数值，还可以是对象。函数返回数值需要一个关键字return，例如：根据不同时间显示不同问候语的程序也可以这样写。 <html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节 JavaScript基础 5、函数的调用函数的调用就是在函数声明定义后使用函数名称和参数进行调用。通常函数调用有两种方式：
一种函数的调用是在脚本内部的函数之外，JavaScript没有主函数的概念，它的执行入口点就是元素SCRIPT，浏览器遇到这个元素，就把其中的脚本逐行解释执行，如果遇到函数调用的语句就到该文档中所有SCRIPT标记中寻找匹配的函数，找到后就转入函数内部执行。还有一种函数调用的方式是“事件驱动”的调用方式。所谓事件就是发生在文档中某个元素上的动作，诸如按钮被按下、鼠标掠过、图像被加载等等，当这些事件中的某一件发生时就调用某一个函数执行相应的动作，这个过程就称为事件驱动的函数调用。这两种函数调用的方法，在前面的例子中都已经使用过。

第2节 JavaScript基础六、对象与属性方法 1、 JavaScript中的对象（1）对象
JavaScript本身提供的内置对象，包括字符串对象String、数学对象Math、日期时间对象Date、数组对象Array等，这些对象在使用前需要用“New”关键字进行申明；浏览器相关的对象，包括文档对象Document、窗口对象Window、历史对象History、定为对象Location以及浏览器对象Navigator，这类对象非常特殊，它们在网页加载时会自动创建，所以在使用时无需申明，可以直接使用；自定义对象，在JavaScript中还可以自行定义一个新的对象。

第2节 JavaScript基础（2）几个关键字 a. this this实际上是一个“虚拟”对象，它代表了当前的对象。 b. new
该关键字用于创建一个新对象。用法为：new constructor[(arguments)] c. with 该关键字为语句设定默认对象，用法为： with(object) statement

第2节 JavaScript基础（3）JavaScript的内置对象
所谓的“内置对象”一是指它们不是由用户创建的，而是指它们不依赖于某一特定的文档或窗口。 a. array对象该对象是JavaScript提供的数组对象，提供对创建任何数据类型的数组的支持，构造方法为 new array() new array(size) new array(element0,element1,……elementn) b. image对象该对象是JavaScript提供的图像对象，提供对图像的操作，其构造方法为：new image()

第2节 JavaScript基础 c. date对象该对象启用基本存储器并取得日期和时间，其构造方法为： d. math对象
var newDateObj=new Date() var newDateObj=new Date(dateVal) var newDateObj=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]) var newDateObj=new Date(“month,date,year,hours:minutes:seconds”) d. math对象该对象提供基本数学函数和常数，在脚本中按如下形式直接调用其方法和属性。用法：Math[.{property | method}] Math 对象不能用new运算符创建，该对象在装载脚本引擎时由该引擎创建。其所有方法和属性在脚本中总是可用。

第2节 JavaScript基础 e. String对象
该对象是字符串的抽象，通过它的属性和方法可以方便的进行处理或格式化文本字符串以及确定和定位字符串中的子字符串。使用格式为："String literal"[.method] String对象可用字符串文字显式创建。用这种方法创建的String对象与用new运算符创建的String对象处理上不同。所有字符串文字共享公用的全局字符串对象。所以，如果为字符串文字添加属性，则它对所有标准字符串对象都是可用的。 f. Navigator对象这个对象用来获得浏览器信息

第3节　JavaScript实例制作 3.1　使用Window对象 3.2　使用document对象 3.3 计时器的制作

第3节 JavaScript实例制作一、使用window对象
window对象是JavaScript中HTML元素对象的最顶层，也是文档脚本中的默认当前对象，它提供了获取浏览器窗口信息的属性和操纵浏览器窗口的方法。 1、window对象的属性和方法 window对象的属性参见教材 window对象的方法（1） alert()，confirm()，prompt() 这三个方法都用来打开对话框，只是用途各不相同。 alert用来弹出一个消息提示对话框。例如： alert(“信息提示窗口”)

第3节　JavaScript实例制作 confirm()方法用于弹出一个确认对话框，该对话框有“确定”(OK)和“取消”(CANCEL)两个按钮，如果用户选择前者，返回true，否则返回false。该方法接受字符串参数，用做对话框的提示文字。例如： if(confirm("你继续操作吗？")) { …… //确定后执行的代码 } else …… //取消后执行的代码

第3节　JavaScript实例制作 prompt()方法用于弹出一个信息输入对话框。该方法接受两个字符串参数，前一个用作对话框的提示文字，后一个用作输入文本框的预置文字。返回值为接收到的字符串。例如： var name=window.prompt("请输入你的姓名:","") 在浏览器中执行的结果

第3节 JavaScript实例制作（2）open()和close() 这两个方法用于窗口的打开和关闭。
[windowVar=][window.]open(“URL”,”windowName”[,”windowFeature”]) close()方法用来关闭当前浏览器窗口，该方法执行后，浏览器窗口关闭。（3）setTimeout()和clearTimeout() 这两个方法提供了时间控制功能。 SetTimeout()功能为在一定的时间之后执行某一函数，其用法为： [handle=][window.]setTimeout(“function”,time)

第3节 JavaScript实例制作 2、根据浏览器改变显示文档
利用navigator对象获得浏览器的名称，然后根据浏览器名称，利用window对象的属性location更换文档。例如：根据浏览器更换文档 function Init() { if(navigator.appName==”Netscape”) window.location=”index_for_netscape.htm” } …… <Body onload=”Init()”>

第3节 JavaScript实例制作 3、打开定制窗口
使用对象window的方法open()可以打开一个定制窗口，并且根据需要，通过以下几个属性来控制菜单、工具栏、url定位栏及状态栏等在窗口中是否显示。 toolbar——浏览器窗口的工具栏 location——浏览器窗口的url定位栏 status——浏览器窗口的状态栏 menubar——浏览器窗口的菜单 scrollbars——浏览器窗口的滚动条 resizeable——浏览器窗口是否可改变大小 width——浏览器窗口的宽度 heigh——浏览器窗口的高度

第3节 JavaScript实例制作二、使用document对象 1、 document对象的属性和方法参见教材
2、显示文档最后修改日期在页面中添加网页的最后修改日期的方法为调用document对象的属性lastModified，然后用write方法写到网页上，通常代码如下： <script>  </script>

第3节 JavaScript实例制作 3、控制页面背景
通过document的bgColor属性可以控制页面的背景色，可以用它来实现根据用户选择设置背景色，或利用随机数随机设置页面的背景色。如果和setTimeout方法一起使用，则可以做出页面颜色动态渐变的效果。例如：背景色渐变 <html> <head> <script language="JavaScript"> <!-- function tohex(num) //十进制到十六进制字符串转换 { var hex=num.toString(16) //把十进制数转变为十六进制字符串 if(num<16) hex="0"+hex //如果只有一位，添“0”凑足两位 return(hex) }

第3节　JavaScript实例制作 var color= //全局变量设置颜色值 function change() { color+= //色值增加 document.bgColor="#"+tohex(color)+tohex(color)+tohex(color) //设置背景色 if(color<255) setTimeout("change()",100) //如果颜色没变到白色，循环递归调用 } //--> </script> </head> <body bgcolor="#000000" onload="change()"> </body> </html> 这个例子把背景色动态地从黑色(#000000)渐变为白色(#ffffff)。其中tohex()调用的方法toString(16)为JavaScript内置方法，参数16表示把数字按十六进制转换为字符串(String)。如果没有参数，则缺省按十进制转换为字符串。在该段代码的基础上，只需稍作变化就可以改为七彩颜色变化的背景。

第3节 JavaScript实例制作三、计时器的制作
计时器实现的原理是利用方法setTimeout()的计时功能。脚本的具体工作流程是：当网页加载时，变量time置初始值0，然后调用方法setTimeout()，每隔一秒钟就使变量time增加1，然后把time的值转化为HH: MM: SS的时间指示字符串，把它显示在单行文本输入框中。代码如下： <html> <head> <script language="JavaScript" > <!-- var time=0 function parseTime(time) //将秒数转化为HH: MM: SS格式 { var strhr var strmt var strsd var hours=Math.floor(time/3600) var minutes=Math.floor(time/60)-hours*60 var seconds=time-hours*3600-minutes*6

第3节 JavaScript实例制作 if(hours<10)strhr="0"+hours else strhr=hours
if(minutes<10)strmt="0"+minutes else strmt=minutes if(seconds<10)strsd="0"+seconds else strsd=seconds return(strhr+":"+strmt+":"+strsd); } function staytimer() { document.f1.elements[0].value=parseTime(time) //设置表单文本输入框的值 time++ circle() //循环调用

第3节 JavaScript实例制作 function circle() {
idTime=setTimeout("staytimer()",1000); //每隔一秒调用一次staytimer() } //--> </script> </head> <body onload="staytimer()"> <form name="f1"> <p><input type="text" name="T1" size="20" readonly></p> </form> </body> </html> 通过在BODY元素中的onload事件属性中添加staytimer()，以调用该函数，使其运行。在IE浏览器中的显示结果

第3节　JavaScript实例制作

责任编辑：…… 撰稿教师：……（以姓氏为序）电子编辑：…… 主编：…… 制作：…… 谢谢观看，再见！

JavaScript与动态交互网页的制作

Similar presentations

Presentation on theme: "JavaScript与动态交互网页的制作"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

JavaScript与动态交互网页的制作

Similar presentations

Presentation on theme: "JavaScript与动态交互网页的制作"— Presentation transcript:

Similar presentations

About project

反馈