1 / 115

第七章 JavaScript 概述

第七章 JavaScript 概述. 本章内容. JavaScript 简介. 一. 插入 JavaScript 的方法. 二. JavaScript 程序基础. 三. BOM 和 DOM. 四. 行为层. 内容如何对事件做出响应. 表现层. 内容如何显示. 结构层. 内容的语义. 内容层. 内 容. 回顾 Web 标准. 网页是由四层信息构成的一个共同体：. 回顾： Web 标准的描述语言. 描述网页结构的标准语言 XML 　　可扩展标记语言

dominic-kelley
Download Presentation

第七章 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. 第七章 JavaScript概述

  2. 本章内容 JavaScript简介 一 插入JavaScript的方法 二 JavaScript程序基础 三 BOM和DOM 四

  3. 行为层 内容如何对事件做出响应 表现层 内容如何显示 结构层 内容的语义 内容层 内 容 回顾 Web 标准 网页是由四层信息构成的一个共同体：

  4. 回顾： Web 标准的描述语言 • 描述网页结构的标准语言 • XML 　　可扩展标记语言 • XHTML 　　可扩展超文本标记语言 • 描述网页表现的标准语言 • CSS 层叠样式表 • 描述网页行为的标准语言 • DOM　　　　　　文档对象模型 • ECMAScript ECMA制定的标准脚本语言

  5. XHTML CSS JavaScript 结 构 表 现 行 为 描述web标准的语言 • 在Web标准中，结构标准语言是XML和XHTML，表现标准语言是指CSS，行为标准语言一般指JavaScript。但是实际上HTML语言也有很弱的描述表现的能力，而CSS也有一定的响应行为的能力（如hover伪类）

  6. What is JavaScript? • JavaScript is a scripting language • JavaScript was designed to add interactivity to HTML pages • A JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license • Are Java and JavaScript the Same?

  7. JavaScript的组成 • ECMAScript是一种标准化的脚本程序语言规范，它定义了脚本语言的基本语法，但并不与任何浏览器绑定，因此，Flash中的ActionScript及Javascript都是ECMAScript的具体实现 JavaScript ECMAScript BOM DOM

  8. What can a JavaScript Do? • JavaScript is used in millions of Web pages to improve the design, put dynamic text into an HTML page, read and write HTML elements, react to events, validate forms, detect browsers, create cookies, and much more. • JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Safari, and Opera.

  9. How to put a JavaScript Into an HTML page? • <body> • <script type="text/javascript"> • document.write ("Hello World!") • </script> • </body> • The code above will produce this output on an HTML page: • Hello World! Example Explained To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language). So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

  10. The word document.write is a standard JavaScript command for writing output to a page. • By entering the document.write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:

  11. JavaScript Where To ... • JavaScripts in the body section will be executed WHILE the page loads. • JavaScripts in the head section will be executed when CALLED or when an event is triggered, go in the head section. • When you place a script in the body section, you will ensure that the script is loaded before anyone uses it.

  12. 网页中插入JavaScript脚本的方法 • JavaScript的最大特点便是和HTML结合，JavaScript需要被嵌入到HTML中才能对网页产生作用。就像网页中嵌入CSS一样，必须通过适当的方法将JavaScript引入到HTML中才能使JavaScript脚本正常的工作。在HTML语言中插入JavaScript脚本的方法有三种，即： • 使用script标记对将脚本嵌入到网页中（嵌入式） • 直接将脚本嵌入到HTML标记的事件中（行内式） • 通过script标记的src属性链接外部脚本文件（链接式）

  13. 1. 使用<script>标记对将脚本嵌入到网页中（嵌入式） <html> <head><title>第一个JavaScript程序</title> <script language="javascript" type="text/javascript"> function msg () //JavaScript注释：建立函数 { alert ("Hello, the WEB world!") } </script> </head> <body> <p onClick="msg()">Click Here</p> </body> </html>

  14. 2. 直接将脚本嵌入到HTML标记的事件中（行内式） • 可以直接在HTML某些标记内添加事件，然后将JavaScript脚本写在该事件的值内，以响应输入元素的事件 <html> <head> <title>行内式引入JavaScript脚本</title> </head> <body> <p onClick="JavaScript:alert('Hello,the WEB world!');">Click Here</p> </body> </html>

  15. 3. 通过script标记的src属性链接外部脚本文件（链接式） • 如果需要同一段脚本供多个网页文件使用，可以把这一段脚本保存成一个单独的文件，JavaScript的外部脚本文件扩展名为“js” • <html> • <head> • <title>链接式插入Js脚本文件</title> • <script language="javascript" type="text/javascript" src="7-3.js "></script> • </head> • <body> • <p onClick="msg()">Click Here</p> • </body> • </html> 7-3.js的代码 function msg () //建立函数 {alert ("Hello,the WEB world!")}

  16. JavaScript语言基础

  17. JavaScript变量 • JavaScript的变量是一种弱类型变量，所谓弱类型变量是指它的变量无特定类型，定义任何变量都是用“var”关键字，并可以将其初始化为任何值，而且可以随意改变变量中所存储的数据类型，当然为了程序规范应该避免这样操作 • var name ="Six Hang"; • var age＝28; • var school="CSU"; • var male=true; • 变量命名规范：第一个单词所有字母都小写，以后每个单词第一个字母大写，例如：sMyString

  18. 变量的命名原则 • 首字符必须是字母、下划线（_）或美元符号（$）； • 余下的字母可以是下划线。美元符号、任意字母或者数字； • 变量名不能是关键字或保留字 • 变量名对大小写敏感 • 变量名中不能有空格、回车符或其他标点字符 • 例如下面的变量名是非法的： var 5zhao; //数字开头，非法 var tang's; //对于变量名，单引号是非法字符 var this; //不能使用关键字作为变量名

  19. 运算符 • 运算符是指完成操作的一系列符号，也称为操作符。运算符用于将一个或多个值运算成结果值，使用运算符的值称为算子或操作数 • 算术运算符 • Operator Description Example Result • + Addition x=2 y=2 x+y 4 • - Subtraction x=5 y=2 x-y 3 • * Multiplication x=5 y=4 x*y 20 • / Division 15/5 5/2 3 2.5 • % Modulus 5%2 10%8 10%2 1 2 0 • ++ Increment x=5 x++ x=6 • -- Decrement x=5 x-- x=4

  20. 赋值运算符 • Operator Example Is The Same As • = x=y x=y • += x+=y x=x+y • -= x-=y x=x-y • *= x*=y x=x*y • /= x/=y x=x/y • %= x%=y x=x%y

  21. 比较运算符 • Operator Description Example • == is equal to 5==8 returns false • === is equal to (checks for both value and type) x=5 y="5" x==y returns true x===y returns false • != is not equal 5!=8 returns true • > is greater than 5>8 returns false • < is less than 5<8 returns true • >= is greater than or equal to 5>=8 returns false • <= is less than or equal to 5<=8 returns true

  22. 逻辑运算符 • Operator Description Example • && and x=6 y=3 (x < 10 && y > 1) returns true • || or x=6 y=3 (x==5 || y==5) returns false • ! not x=6 y=3 !(x==y) returns true

  23. 字符串连接运算符 • A string is most often text, for example "Hello World!". To stick two or more string variables together, use the + operator. • txt1="What a very" • txt2="nice day!" • txt3=txt1+txt2 • The variable txt3 now contains "What a verynice day!"

  24. 条件运算符 • variablename=(condition)?value1:value2 • greeting=(visitor=="PRES")?"Dear President ":"Dear " • If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.

  25. 字符串（String） • 字符串由零个或多个字符构成，字符可以是字母、数字、标点符号或空格。字符串必须放在单引号或双引号中。例如： • var course="data structure“ • var case='the birthday"19801106"' • 还可以使用转义字符（escaping）“\”实现特殊字符按原样输出： • var score = " run time 3\' 15\""

  26. JavaScript中的转义字符 • Code Outputs • \' single quote • \" double quote • \& ampersand • \\ backslash • \n new line • \r carriage return • \t tab • \b backspace • \f form feed

  27. 字符串（String）对象常见属性 下面我们先定义一个示例字符串： • var myString = "This is a sample"; （1）length属性：它返回字符串中字符的个数，例如： var name="Six tang"; alert (name.length); //返回8 （2）charAt属性：它返回字符串对象在指定位置处的字符，第一个字符位置是0。例如： myString.charAt(2)；//返回i （3）charCodeAt：返回字符串对象在指定位置处字符的10进制的ASCII码 myString.charCodeAt(2)；//返回105 （4）indexOf：要查找的子串在字符串对象中的位置 myString.indexOf(“is”)；//返回2

  28. 字符串（String）对象常见方法 （5）substr方法：截取字串 myString.substr(10,3)；//返回sam，其中10表示位置，3表示长度 （6）substring方法：截取字串 myString.substring(5,9)；//返回is a,其中5表示开始位置，9表示结束位置 （7）split方法：分隔字串到一个数组中 var a = myString.split(" "); //a[0] = “This” a[1]=“is” a[2]=“a” a[3]=“sample” （8）replace方法 myString.replace(“sample”,”apple”); //结果”This is a apple” （9）toLowerCase方法：变成小写字母 myString.toLowerCase()；// this is a sample

  29. 数值型（number） • 在Javascript中，数值型数据不区分整型和浮点型，数值型数据和字符型数据的区别是数值型数据不要用引号括起来。例如下面都是正确的数值表示法， • var num1=23.45 • var num2=76 • var num3=-9e5 //科学计数法，即-900000 • alert(num1+ " "+ num2+" "+ num3);

  30. 布尔型（boolean） • 布尔型数据的取值只有两个：true和false。布尔型数据不能用引号引起来，否则就变成字符串了。用方法typeof()可以很清楚地看到这点，typeof()返回一个字符串，这个字符串的内容是变量的数据类型名称。 var married = true; document.write(typeof(married) +"<br />");// 输出boolean married = "true"; document.write(typeof(married)); // 输出string

  31. 数组（array） • 数组使用关键字Array来声明，同时还可以指定这个数组元素的个数，也就是数组的长度（length），例如： • var rank =new Array(12); //论坛的用户共分12级 • var Map =["China", "USA", "Britain"]; • var myColor= new Array(); • myColor[0]= "blue"; • myColor[1]= "yellow"; • myColor[2]= "purple"; • myColor[3]= "red";

  32. 数组的常用属性和方法： • （1）length属性：用来获取数组的长度，而数组的位置同样也是从0开始的。例如： • var Map =new Array("China", "USA", "Britain"); • alert(Map.length+" "+ Map[2]); //返回3 Britain • （2）toString方法：将数组转化为字符串 • var Map =new Array("China", "USA", "Britain"); • alert(Map.toString()+" "+ typeof(Map.toString()));

  33. JavaScript中的语句 • 1. 条件语句 • 条件语句可以使用程序按照预先指定的条件进行判断，从而选择需要执行的任务。在JavaScript中提供了if语句、if else语句和switch语句等三种条件判断语句。

  34. 通过条件语句判断时间 var d=new Date(); var time=d.getHours(); if (time<10){ document.write("<b>Good morning</b>") } else if (time>10 && time<16){ document.write("<b>Good day</b>") } else{ document.write("<b>Hello World!</b>") }

  35. Switch语句 <script language="javascript"> evalue = parseInt(prompt("请输入1－4对我们的服务做出评价","")); switch(evalue){ case 1: document.write("非常满意"); break;//如果不使用break，则在执行完此case的语句后会接着执行下面所有的case中的语句 case 2: document.write("满意"); break; case 3: document.write("一般"); break; case 4: document.write("不满意"); break; default: document.write("您的输入有误！"); } </script>

  36. 循环语句 var i=0; while (i<100) {document.write (i+"<br>"); i++;}

  37. 九九乘法表 <table cellpadding="6" cellspacing="0" style="border-collapse:collapse; border:none;"> <script language="javascript"> for(var i=1;i<10;i++){ //乘法表一共九行 document.write("<tr>"); //每行是table的一行 for(j=1;j<10;j++) //每行都有9个单元格 if(j<=i) //有内容的单元格 document.write("<td style='border:2px solid #004B8A; background: white;'>"+i+"*"+j+"="+(i*j)+"</td>"); else //没有内容的单元格 document.write("<td style='border:none;'></td>"); document.write("</tr>"); }</script> </table>

  38. for…in语句 • 在有些情况下，开发者根本没有办法预知对象的任何信息，更谈不上控制循环的次数。这个时候用for…in语句可以很好的解决这个问题。 • <script type="text/javascript"> • var x • var mycars = new Array() • mycars[0] = "Saab" • mycars[1] = "Volvo" • mycars[2] = "BMW" • for (x in mycars) • { • document.write(mycars[x] + "<br />") • }</script>

  39. 函 数 • 函数是一个可重用的代码块，可用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复输入大量的相同内容。不过，函数的真正威力体现在，我们可以把不同的数据传递给它们，而它们将使用实际传递给它们的数据去完成预定的操作。在把数据传递给函数时，我们把那些数据称为参数（argument）。 function functionname(arg1,arg2,...,argX) { statements [return[expression]] }

  40. 调用函数 function myName(sName){ alert("Hello"+sName); } 该函数接受一个输入参数sName，不返回值。调用它的代码如下： myName("six-tang");

  41. 与其他编程语言一样，函数在执行过程中只要执行完return语句就会停止继续执行函数体中的代码，因此return语句后的代码都不会执行。下例中函数中的alert()语句就永远都不会执行。与其他编程语言一样，函数在执行过程中只要执行完return语句就会停止继续执行函数体中的代码，因此return语句后的代码都不会执行。下例中函数中的alert()语句就永远都不会执行。 function fnSum(iNum1, iNum2){ return iNum1+iNum2; alert (iNum1+iNum2); //永远不会被执行 }

  42. 一个函数中有时可以包含多个return语句，但每次只有一个会被执行，例如：一个函数中有时可以包含多个return语句，但每次只有一个会被执行，例如： • function substr(iNum1, iNum2){ if (iNum1>=iNmu2) return iNum1-iNum2; else return iNum2-iNum1; }

  43. 如果函数本身没有返回值，但又希望在某些时候退出函数体，则可以调用无参数的return语句来随时返回函数体，例如：如果函数本身没有返回值，但又希望在某些时候退出函数体，则可以调用无参数的return语句来随时返回函数体，例如： • function myName(sName){ if (myName =="bye") return; alert("Hello"+sName); }

  44. 对 象 • 在客观世界中，对象指一个特定的实体。一个人就是一个典型的对象，他包含身高、体重、年龄等特性，又包含吃饭、走路、睡觉等动作。同样，一辆汽车也是一个对象，它包含型号，颜色，种类等特性，还包含加速、拐弯等动作。 • 在JavaScript语言中，也具有并能自定义各种各样的对象。例如，一个浏览器窗口可看成是一个对象，它包含窗口大小、窗口位置等属性，又具有打开新窗口、关闭窗口等方法。网页上的一个表单也可以看成一个对象，它包含表单内控件的个数、表单名称等特性，以及表单提交和表单重设等方法。

  45. 对象的特点 • 从上面的例子可以看出，对象包含两个要素： • ①用来描述对象特性的一组数据，也就是若干变量，通常称为属性； • ②用来操作对象特性的若干动作，也就是若干函数，通常称为方法。

  46. 对象的创建 • 使用new运算符和内部构造函数object()来创建一个空对象 • var Car= new object(); • 在JavaScript中给对象创建新的实例采用new关键字，如下所示： • var myCar = new Car(); • 这样就创建了一个Car对象的新实例myCar，通过这个实例就可以利用Car的属性、方法来设置关于myCar的属性或方法了，代码如下： • myCar.brand=Fiat; • myCar. accelerate(3);

  47. this关键字 • 在JavaScript的对象系统中，this关键字常用于两种地方： （1）在构造器函数中，指代新创建的对象实例； （2）在对象的方法被调用时，指代调用该方法的对象实例。 for (… in …)语句可以遍历对象的所有属性和方法，例3-5所示的代码就遍历了Car对象的属性和方法，如果是属性则输出属性值，如果是方法则执行方法。

  48. 时间日期：Date对象 • <script language="javascript"> var myDate1 = new Date(); //运行代码前的时间 for(var i=0;i<3000000;i++); var myDate2 = new Date(); //运行代码后的时间 alert(myDate2-myDate1); • </script>

  49. 数学计算：Math对象 • Math对象也是JavaScript的一个内置对象，不需要由函数创建， random方法：该方法可以用来生成随机数，它返回一个0~1之间的随机数，不包括0和1。 • var iNum=Math.floor(Math.random()*100+1); • 这样iNum将随机产出一个1～100之间的整数（包括1和100）。

  50. 浏览器对象模型BOM

More Related