640 likes | 964 Views
第 3 章 JavaScript 语言简介. 3. 内容提要. JavaScript 的基本语法,如何在网页中引入 JavaScript 实现 JavaScript 和 HTML 交互 JavaScript 中的变量、数组、表达式、运算符、流程控制语句 JavaScript 的函数、内置对象、浏览器对象的层次和 DOM 模型的建立和使用。. JavaScript 简介. JavaScript 是一种通用的、基于原型的、面向对象的脚本语言。 JavaScript 设计目标是在不占用很多系统和网络资源的情况下,可以在页面做完整的程序。. JavaScript 概述.
E N D
内容提要 • JavaScript的基本语法,如何在网页中引入JavaScript • 实现JavaScript和HTML交互 • JavaScript中的变量、数组、表达式、运算符、流程控制语句 • JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用。
JavaScript简介 • JavaScript是一种通用的、基于原型的、面向对象的脚本语言。 • JavaScript设计目标是在不占用很多系统和网络资源的情况下,可以在页面做完整的程序。
JavaScript概述 • JavaScript是一种Script脚本语言,所谓的脚本语言就是可以和HTML语言混合使用的语言。 • VBScript也是Script语言中的一种,但是VBScript只有微软的浏览器Internet Explore(IE)才能完全支持。而JavaScript则不管是什么浏览器都可以运行,这也是JavaScript的一个优点。 • JavaScript是一种高级的脚本描述性语言,并不需要依赖于特定的机器和操作系统,所以说它是独立于操作平台的。JavaScript 1.0最初是在Netscape Navigator 2.0及Netscape LiveWire 1.0上实现的,目前JavaScript的版本是JavaScript 1.2。
JavaScript与Java的区别 • 从本质上说JavaScript和Java没有什么联系,但是同时作为语言,可以从下面的角度来区别。 • (1)JavaScript是解释型的语言,当程序执行的时候,浏览器一边解释一边执行。而Java是编译型的语言,必须经过编译才能执行。 • (2)代码格式不一样,Java代码经过编译后成为二进制文件,而JavaScript是纯文本的文件。 • (3)在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件,而JavaScript可直接写入一个文本文件或HTML文件中。
JavaScript的运行环境 • 最常用的两种浏览器IE和Netscape Communicator都支持JavaScript, • IE 3.0以上和Netscape Communicator 3.0以上都没有问题。
网页中引入JavaScript • 在页面中引入JavaScript,只要加上<SCRIPT>标记然后再设置一下所用的语言就可以了,如程序3-01.htm文件所示 • 案例名称:第一个JavaScript程序 • 程序名称:3-01.htm • <HTML> • <HEAD></HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • document.write("这是以JavaScript输出的!") • </SCRIPT> • </BODY> • </HTML>
变量与数组 • 变量和数组是JavaScript的基础,JavaScript和C语言属于同一语系,许多基本语法一样。 • 不管是在JavaScript中还是在其他程序语言中,最基本的概念是变量。
变量 • JavaScript定义变量只有一个关键字“var”,在JavaScript中定义一个用户名变量的语法为:“varstrUserName;”。 • 注意: • (1)JavaScript的变量是弱变量,不经过申明就可以使用,建议先利用var申明; • (2)JavaScript语句后面可以加分号,也可以不加。但是C语系下其他语言都是严格要求加分号的,所以建议加上。
使用变量 • 案例名称:使用变量 • 程序名称:3-02.htm • <HTML> • <HEAD> • <TITLE></TITLE> • <SCRIPT LANGUAGE="JavaScript"> • var strWelcome = "欢迎您!<BR>"; • var iCounter = 10; • iCounter = iCounter + 1; • </SCRIPT> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • document.write(strWelcome); • document.write(iCounter); • </SCRIPT> • </BODY> • </HTML>
变量命名规则 • 变量命名需要遵守以下几个规则。 • (1)变量命名必须以一个英文字母或是下划线为开头,也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。 • (2)变量名长度在0~255字符之间。 • (3)除了首字符,其他字符可以使用任何字符、数字及下划线,但是不可以使用空格。 • (4)不可以使用JavaScript的运算符号,例如:+,–,*,/等。 • (5)不可以使用JavaScript用到的保留字,例如:sqrt(开方),parseInt(转换成整型)等。 • (6)在JavaScript中,变量名大小写是有所区别的,例如:变量s12和S12是不同的两个变量。
数组 • 案例名称:使用数组 • 程序名称:3-03.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var arrUserName = new Array(2); • arrUserName[0] = "Bill"; • arrUserName[1] = "Bob"; • document.write(arrUserName[0]); • document.write("<br>"); • document.write(arrUserName[1]); • document.write("<br>"); • </SCRIPT> • </BODY> • </HTML>
表达式与运算符 • 程序主要功能是运算,例如加、减、乘、除等基本操作。
算术运算符 • 算术运算符主要提供加、减、乘、除等操作,计算机中没有通常的乘号,用“*”代替。取余操作用“%”,使用方法如程序3-04.htm所示。 • 案例名称:算术运算符 • 程序名称:3-04.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • document.write(3+2); • document.write("<br>"); • document.write(3*2); • document.write("<br>"); • document.write(3/2); • document.write("<br>"); • document.write(3-2); • document.write("<br>"); • document.write(3%2);//取余数 • </SCRIPT> • </BODY> • </HTML>
逻辑运算符 • 逻辑运算符包括:与运算符“&&”、或运算符“||”和取反运算符“!”。 • (1)逻辑与运算符&&:在“A&&B”中,只有当两个条件A和B都为真的时候,整个表达式值才为真。 • (2)逻辑或表达式||:在“A||B”中,只要两个条件A和B有一个成立,整个表达式值就为真。 • (3)逻辑反表达式!:在!A中,当A为真时,表达式的值为假;当A为假时,表达式的值为真。
逻辑运算符 • 案例名称:逻辑运算符 • 程序名称:3-05.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • document.write(true&&false); • document.write("<br>"); • document.write(false&&false); • document.write("<br>"); • document.write(true||false); • document.write("<br>"); • document.write(!false); • </SCRIPT> • </BODY> • </HTML>
字符串运算符 • 字符串运算符主要是字符串运算符“+”和它的变形形式:“+=”。比如“A = A + B”可以省略一个A,写成“A += B”,在C语系中这两个表达式是一样。 • 在程序表达式中,操作符是有一定优先顺序的,叫做运算符的优先级。表3-1由上至下列出了操作符从低到高的优先级。
操作符的优先级 表3-1由上至下列出了操作符从低到高的优先级。
字符串运算符 • 案例名称:字符串运算符 • 程序名称:3-06.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var strHello = "网页编程"; • var strResult = "你好,"; • strResult += strHello; • //等价于:strResult = strResult + strHello; • document.write(strResult); • </SCRIPT> • </BODY> • </HTML>
条件表达式 • 案例名称:条件表达式 • 程序名称:3-07.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • a = (4>3) ? 5 : 7; • b = (4<3) ? 5 : 7; • document.write(a); • document.write("<br>"); • document.write(b); • </SCRIPT> • </BODY> • </HTML>
流控制语句 • JavaScript提供的语句可以分为以下几大类。 • (1)条件和分支语句:If…else语句,switch语句。 • (2)循环语句:for语句,do…while语句,break语句和continue语句。 • (3)对象操作语句:new,this和with。 • (4)注释语句:“//”或“/* */”。
if语句 • 案例名称:if语句 • 程序名称:3-08.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var iHour = 13; • if (iHour < 12) • { • document.write("早上好!"); • } • else • { • document.write("下午好!"); • } • </SCRIPT> • </BODY> • </HTML>
switch 语句 • 程序名称:3-09.htm • <SCRIPT LANGUAGE="JavaScript"> • var val = ""; • var i = 5; • switch(i) • { • case 1: • val = "一"; break; • case 2: • val = "二"; break; • case 3: • val = "三"; break; • case 4: • val = "四"; break; • case 5: • val = "五"; break; • default: • val = "不知道"; • } • document.write(val); • </SCRIPT>
循环语句 • 循环语句包括: • for语句、while语句、break语句和continue语句。
for 语句 • 案例名称:for 语句 • 程序名称:3-10.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var iSum = 0; • for(var i = 0; i <= 100; i++) • { • iSum += i; • } • document.write(iSum); • </SCRIPT> • </BODY> • </HTML>
while语句 • 案例名称:while 语句 • 程序名称:3-11.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var iSum = 0; • var i = 0; • while( i<=100 ) • { • iSum += i; • i++; • } • document.write(iSum); • </SCRIPT> • </BODY> • </HTML>
break与continue语句 • 案例名称:break语句 • 程序名称:3-12.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • for(i = 1; i < 20; i++) • { • if(i%5 == 0) • { • break; • } • document.write(i + "<br>"); • } • </SCRIPT> • </BODY> • </HTML>
continue语句 • 案例名称:continue语句 • 程序名称:3-13.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • for(i = 1; i < 20; i++) • { • if(i%5 == 0) • { • continue; • } • document.write(i + "<br>"); • } • </SCRIPT> • </BODY> • </HTML>
JavaScript函数 • 函数在定义时并没有被执行,只有函数被调用时,其中的代码才真正被执行。 • 为了实现函数的定义和调用,JavaScript语句提供了两个关键字:function和return。JavaScript函数的基本语法如下: • function 函数名称(参数表) • { • 语句块; • }
函数定义和调用 • 案例名称:函数定义和调用 • 程序名称:3-14.htm • <HTML> • <HEAD> • <TITLE></TITLE> • <SCRIPT LANGUAGE="JavaScript"> • function getSqrt(iNum) • { • var iTemp = iNum * iNum; • document.write(iTemp); • } • </SCRIPT> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • getSqrt(8); • </SCRIPT> • </BODY> • </HTML>
函数的返回值 • 案例名称:程序名称:3-15.htm • <HTML> • <HEAD> • <TITLE></TITLE> • <SCRIPT LANGUAGE="JavaScript"> • function f(y) • { • var x = y * y; • return x; • } • </SCRIPT> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • for(x = 0; x < 10; x++) • { • y = f(x); • document.write(y); • document.write("<br>"); • } • </SCRIPT> • </BODY> • </HTML>
事件的概念 • JavaScript事件主要包括三大类的事件:超级连接事件,浏览器事件和界面事件。 • 界面事件包括:Click(单击)、MouseOut(鼠标移出)、MouseOver(鼠标移过)和MouseDown(鼠标按下)等。
单击事件 • 案例名称:单击事件 • 程序名称:3-16.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <FORM> • <INPUT TYPE="BUTTON" VALUE="单击" ONCLICK="alert('鼠标单击')"> • </FORM> • </BODY> • </HTML>
处理下拉列表 • 案例名称:处理下拉列表 • 程序名称:3-17.htm • <HTML> • <BODY> • <SELECT NAME="selAddr" SIZE="1" ONCHANGE="func()"> • <OPTION SELECTED VALUE="北京">北京</OPTION> • <OPTION VALUE="上海">上海</OPTION> • <OPTION VALUE="广州">广州</OPTION> • </SELECT> • <SCRIPT LANGUAGE="JavaScript"> • function func() • { • alert("你选择了" + selAddr.value); • } • </SCRIPT> • </BODY> • </HTML>
动态按钮 • 案例名称:动态按钮 • 程序名称:hoverbutton.htm • <SCRIPT LANGUAGE="JavaScript"> • function DoOver(oimg) • { • var imgSRC; • imgSRC = 'Edit_' + oimg.name + '_Over.gif'; • oimg.src = 'images/' + imgSRC; • } • function DoOut(oimg) • { • var imgSRC; • imgSRC = 'Edit_' + oimg.name + '.gif'; • oimg.src = 'images/' + imgSRC; • } • </SCRIPT> • <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> • <tr> • <td><img name="New" SRC="images/Edit_New.gif" • onmouseover="DoOver(this)" onmouseout="DoOut(this)" • alt="新建" onclick="alert('新建')" style="CURSOR: hand"></td>
对象处理语句 • 案例名称:this语句 • 程序名称:3-16.htm • <HTML> • <HEAD> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • function imgclick(oimg) • { • alert("图片名称是:" + oimg.name+"\r\n图片地址是:" + oimg.src ); • } • </SCRIPT> • <IMG src="Edit_Commit.gif" NAME="img1" ONCLICK="imgclick(this)"> • </BODY> • </HTML>
for…in语句 • 如果不知道一个对象中包含多少元素,可以for…in语句实现循环。in后面跟一个对象,循环的次数是该对象中的所有元素的总和,以数组对象为例,如程序3-17.htm所示。 • 案例名称:for…in语句 • 程序名称:3-17.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var arr = new Array(3); • arr[0] = "Jack"; • arr[1] = "Mike"; • arr[2] = "Rose"; • for(i in arr) • { • document.write("<br>第" + i + "个为:" + arr[i]); • } • </SCRIPT> • </BODY> • </HTML>
with语句 • with语句的作用范围内,如果没有指出所选择的对象,而是使用默认的对象,默认的对象使用with语句给出。程序3-18.htm利用with语句省略了一些document对象。 • 案例名称:with语句 • 程序名称:3-18.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE = "JavaScript"> • with(document) • { • write("你好世界<br>"); • write("你好中国<br>"); • write("再见"); • } • </SCRIPT> • </BODY> • </HTML>
JavaScript内置对象 • 内置对象都有自己的方法和属性,访问属性的语法是:“对象名.属性名称”。 • 访问方法的语法是:“对象名.方法名称(参数表)”。 • 所谓的方法就是一个普通的函数被封装到一个对象中。
时间对象 • 案例名称:使用时间对象 • 程序名称:3-19.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var curr=new Date(); • document.write("今天是"); • switch(curr.getDay()){ • case 0:document.write("周日,休息了!");break; • case 1:document.write("周一,需要工作!");break; • case 2:document.write("周二,需要工作!");break; • case 3:document.write("周三,需要工作!");break; • case 4:document.write("周四,需要工作!");break; • case 5:document.write("周五,需要工作!");break; • case 6:document.write("周六,休息了!");break; • } • </SCRIPT> • </BODY> • </HTML>
Date对象常用的方法 • Date对象提供了两类方法:从系统中获得当前的时间和日期;设置当前时间和日期。表3-2列出了常用的方法
网页时钟 • 程序名称:time.htm • <SCRIPT LANGUAGE="JavaScript"> • var strTime, strDate; • function webClock() • { • var dNow = new Date(); • var dHours = dNow.getHours(); • var dMinutes = dNow.getMinutes(); • var dSeconds = dNow.getSeconds(); • strTime = dHours; • strTime += ((dMinutes<10) ? ":0" : ":") + dMinutes; • strTime += ((dSeconds<10) ? ":0" : ":") + dSeconds; • clock.time.value = strTime; • var dDate = dNow.getDate(); • var dMonth = dNow.getMonth() + 1; • var dYear = dNow.getYear(); • strDate = dMonth; • strDate += ((dDate<10) ? "/0" : "/") + dDate; • strDate += "/" + dYear; • clock.date.value = strDate; • setTimeout("webClock()",1000); • } • </SCRIPT> • <TITLE></TITLE> • </HEAD> • <BODY ONLOAD="webClock()"> • <FORM NAME="clock"> • 时间:<INPUT TYPE="TEXT" NAME="time" SIZE="10"><BR> • 日期:<INPUT TYPE="TEXT" NAME="date" SIZE="10"><BR> • </FORM>
Math对象 • 案例名称:使用Math对象 • 程序名称:time.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var a = Math.sin(1); • document.write(a) • </SCRIPT> • </BODY> • </HTML>
String对象 • 一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。 • (1)charAt(idx):第一个字符位置是“0”,返回指定位置处的字符。 • (2)indexOf(Chr):返回指定子字符串的位置,从左到右,找不到返回–1。 • (3)lastIndexOf(chr):返回指定子字符串的位置,从右到左。找不到返回–1。 • (4)toLowerCase():将字符串中的字符全部转化成小写。 • (5)toUpperCase():将字符串中的字符全部转化成大写。
使用字符串处理函数 • 案例名称:使用字符串处理函数 • 程序名称:3-21.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <script language="JavaScript"> • var str = "I am a boy, I like programming!"; • a = str.charAt(7); • b = str.indexOf("a"); • c = str.lastIndexOf("a"); • d = str.toUpperCase(); • document.write(a + "<br>"); • document.write(b + "<br>") • document.write(c + "<br>") • document.write(d + "<br>") • </script> • </BODY> • </HTML>
字符串扫描统计 • 案例名称:使用字符串处理函数 • 程序名称:string.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var str = "I am a girl, I like cat" • var iCount = 0; • for( i = 0; i < str.length; i++) • { • if(str.charAt(i) == "a") • { • iCount++; • } • } • document.write(iCount); • </SCRIPT> • </BODY> • </HTML>
JavaScript的常用函数 • 介绍几个常用的函数: • eval()函数 • parseInt()函数 • parseFloat函数。
使用eval()函数 • 案例名称:使用eval()函数 • 程序名称:3-22.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var str = "1+2+3"; • document.write(eval(str)); • </SCRIPT> • </BODY> • </HTML>
parseInt()函数和parseFloat()函数 • 案例名称:使用parseInt函数和parseFloat函数 • 程序名称:3-23.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var a = parseInt("123China"); • var b = parseFloat("123.12China"); • document.write (a + "<br>"); • document.write (b); • </SCRIPT> • </BODY> • </HTML>
对象层次及DOM模型 • 浏览器对象有一定的层次,也就是一定的从属关系。 • 在从属关系中浏览器对象window反映的是一个完整的浏览器窗口,它是其他大部分对象的祖先。 • windows对象包括location、History和Document等。 • Document对象之下还有下一级的对象,包括:forms,links及anchors,等等,层次结构如图3-29所示。