1 / 64

第 3 章 JavaScript 语言简介

第 3 章 JavaScript 语言简介. 3. 内容提要. JavaScript 的基本语法，如何在网页中引入 JavaScript 实现 JavaScript 和 HTML 交互 JavaScript 中的变量、数组、表达式、运算符、流程控制语句 JavaScript 的函数、内置对象、浏览器对象的层次和 DOM 模型的建立和使用。. JavaScript 简介. JavaScript 是一种通用的、基于原型的、面向对象的脚本语言。 JavaScript 设计目标是在不占用很多系统和网络资源的情况下，可以在页面做完整的程序。. JavaScript 概述.

pia
Download Presentation

第 3 章 JavaScript 语言简介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第3章 JavaScript语言简介 3

  2. 内容提要 • JavaScript的基本语法，如何在网页中引入JavaScript • 实现JavaScript和HTML交互 • JavaScript中的变量、数组、表达式、运算符、流程控制语句 • JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用。

  3. JavaScript简介 • JavaScript是一种通用的、基于原型的、面向对象的脚本语言。 • JavaScript设计目标是在不占用很多系统和网络资源的情况下，可以在页面做完整的程序。

  4. 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。

  5. JavaScript与Java的区别 • 从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从下面的角度来区别。 • （1）JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。 • （2）代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。 • （3）在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件，而JavaScript可直接写入一个文本文件或HTML文件中。

  6. JavaScript的运行环境 • 最常用的两种浏览器IE和Netscape Communicator都支持JavaScript， • IE 3.0以上和Netscape Communicator 3.0以上都没有问题。

  7. 网页中引入JavaScript • 在页面中引入JavaScript，只要加上<SCRIPT>标记然后再设置一下所用的语言就可以了，如程序3-01.htm文件所示 • 案例名称：第一个JavaScript程序 • 程序名称：3-01.htm • <HTML> • <HEAD></HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • document.write("这是以JavaScript输出的!") • </SCRIPT> • </BODY> • </HTML>

  8. 变量与数组 • 变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。 • 不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。

  9. 变量 • JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“varstrUserName;”。 • 注意： • （1）JavaScript的变量是弱变量，不经过申明就可以使用，建议先利用var申明； • （2）JavaScript语句后面可以加分号，也可以不加。但是C语系下其他语言都是严格要求加分号的，所以建议加上。

  10. 使用变量 • 案例名称：使用变量 • 程序名称：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>

  11. 变量命名规则 • 变量命名需要遵守以下几个规则。 • （1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。 • （2）变量名长度在0～255字符之间。 • （3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。 • （4）不可以使用JavaScript的运算符号，例如：+，–，＊，／等。 • （5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。 • （6）在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。

  12. 数组 • 案例名称：使用数组 • 程序名称：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>

  13. 表达式与运算符 • 程序主要功能是运算，例如加、减、乘、除等基本操作。

  14. 算术运算符 • 算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，使用方法如程序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>

  15. 逻辑运算符 • 逻辑运算符包括：与运算符“&&”、或运算符“||”和取反运算符“！”。 • （1）逻辑与运算符&&：在“A&&B”中，只有当两个条件A和B都为真的时候，整个表达式值才为真。 • （2）逻辑或表达式||：在“A||B”中，只要两个条件A和B有一个成立，整个表达式值就为真。 • （3）逻辑反表达式！：在!A中，当A为真时，表达式的值为假；当A为假时，表达式的值为真。

  16. 逻辑运算符 • 案例名称：逻辑运算符 • 程序名称：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>

  17. 字符串运算符 • 字符串运算符主要是字符串运算符“+”和它的变形形式：“+=”。比如“A = A + B”可以省略一个A，写成“A += B”，在C语系中这两个表达式是一样。 • 在程序表达式中，操作符是有一定优先顺序的，叫做运算符的优先级。表3-1由上至下列出了操作符从低到高的优先级。

  18. 操作符的优先级 表3-1由上至下列出了操作符从低到高的优先级。

  19. 字符串运算符 • 案例名称：字符串运算符 • 程序名称：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>

  20. 条件表达式 • 案例名称：条件表达式 • 程序名称：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>

  21. 流控制语句 • JavaScript提供的语句可以分为以下几大类。 • （1）条件和分支语句：If…else语句，switch语句。 • （2）循环语句：for语句，do…while语句，break语句和continue语句。 • （3）对象操作语句：new，this和with。 • （4）注释语句：“//”或“/* */”。

  22. 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>

  23. 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>

  24. 循环语句 • 循环语句包括： • for语句、while语句、break语句和continue语句。

  25. 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>

  26. 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>

  27. 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>

  28. 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>

  29. JavaScript函数 • 函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。 • 为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下： • function 函数名称（参数表） • { • 语句块; • }

  30. 函数定义和调用 • 案例名称：函数定义和调用 • 程序名称：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>

  31. 函数的返回值 • 案例名称：程序名称：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>

  32. 事件的概念 • JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。 • 界面事件包括：Click（单击）、MouseOut（鼠标移出）、MouseOver（鼠标移过）和MouseDown（鼠标按下）等。

  33. 单击事件 • 案例名称：单击事件 • 程序名称：3-16.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <FORM> • <INPUT TYPE="BUTTON" VALUE="单击" ONCLICK="alert('鼠标单击')"> • </FORM> • </BODY> • </HTML>

  34. 处理下拉列表 • 案例名称：处理下拉列表 • 程序名称：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>

  35. 动态按钮 • 案例名称：动态按钮 • 程序名称：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>

  36. 对象处理语句 • 案例名称：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>

  37. 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>

  38. 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>

  39. JavaScript内置对象 • 内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。 • 访问方法的语法是：“对象名.方法名称（参数表）”。 • 所谓的方法就是一个普通的函数被封装到一个对象中。

  40. 时间对象 • 案例名称：使用时间对象 • 程序名称：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>

  41. Date对象常用的方法 • Date对象提供了两类方法：从系统中获得当前的时间和日期；设置当前时间和日期。表3-2列出了常用的方法

  42. 网页时钟 • 程序名称：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>

  43. Math对象 • 案例名称：使用Math对象 • 程序名称：time.htm • <HTML> • <HEAD> • <TITLE></TITLE> • </HEAD> • <BODY> • <SCRIPT LANGUAGE="JavaScript"> • var a = Math.sin(1); • document.write(a) • </SCRIPT> • </BODY> • </HTML>

  44. String对象 • 一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。 • （1）charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。 • （2）indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回–1。 • （3）lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回–1。 • （4）toLowerCase()：将字符串中的字符全部转化成小写。 • （5）toUpperCase()：将字符串中的字符全部转化成大写。

  45. 使用字符串处理函数 • 案例名称：使用字符串处理函数 • 程序名称：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>

  46. 字符串扫描统计 • 案例名称：使用字符串处理函数 • 程序名称：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>

  47. JavaScript的常用函数 • 介绍几个常用的函数： • eval()函数 • parseInt()函数 • parseFloat函数。

  48. 使用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>

  49. 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>

  50. 对象层次及DOM模型 • 浏览器对象有一定的层次，也就是一定的从属关系。 • 在从属关系中浏览器对象window反映的是一个完整的浏览器窗口，它是其他大部分对象的祖先。 • windows对象包括location、History和Document等。 • Document对象之下还有下一级的对象，包括：forms，links及anchors，等等，层次结构如图3-29所示。

More Related