制作网页高级特效第二讲 javascript语言基础.docx

1、制作网页高级特效第二讲 javascript语言基础授课班级授课日期授课题目：第二讲 javascript语言基础目的要求： 1.了解 Javascript的概念,能编写简单的 Javascript程序。 2.了解常量、变量、函数、运算符和优先级等概念,能正确运用常量、变量、函数和运算符,能按照优先级正确书写表达式。 3.了解常用内部函数的用法,能根据需要自定义函数。 4.了解数组的概念,能正确定义和引用数组。 5.掌握分支语句和循环语句的使用方法,能进行顺序结构、分支结构和循环结构程序的设计。重点难点：Emmet的基本语法；内嵌框架的用法；掌握 canvas标签的用法组织教学：点名考勤导入新

2、课：JavaScript是一种基于对象和事件驱动的客户端脚本语言，是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。JavaScript脚本语言由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面等方面获得广泛的应用。教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第一部分 JavaScript基础第一节 JavaScript语言基础一、JavaScript的概念JavaScript是一种基于对象和事件驱动的客户端脚本语言，是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。JavaScript是基于对象的脚本编程语言，能通过D

3、OM（文档结构模型）及自身提供的对象及操作方法来实现所需的功能。在JavaScript中提供简单高效的语言流程，灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。JavaScript事件处理是实时的，无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。JavaScript脚本语言由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面等方面获得广泛的应用。二、第一个JavaScript程序编写 JavaScript

4、 脚本代码可选择普通的文本编辑器或集成开发环境。Dreamweaver CS3中集成了JavaScript 开发环境，提供了强大的Javascript支持。为了提高编程效率，在Dreamweaver CS3中依次单击“编辑菜单首选参数代码提示”，将结束标签从默认设置的“键入 后”，如图1-1所示。更改设置后，当输入后，不需要再输入，自动产生，不仅提高了输入的效率，也有效避免了由于编程人员疏忽，忘记输入造成“标签不配对”的错误。图1-1 首选参数设置新建一个html文档，输入以下代码。First JavaScript document.write(Hello JavaScript !); / 输

5、出到浏览器窗口alert(Hello World!); / 输出到对话框 /* 上面使用的单行注释， 这里使用的是多行注释。 */ 程序运行结果如图1-2所示（注：若没出现对话框，按F5刷新页面）。图1-2 第一个JavaScript程序程序说明：1. JavaScript需要嵌入到HTML中，即JavaScript的存在依赖于HTML文件。在HTML中，使用标记引入JavaScript，使用结束JavaScript，和之间是JavaScript脚本。和可以放在和之间，也可以放在和之间。 二者的区别是：位于head部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当把脚本放置到h

6、ead部分后，就可以确保在需要使用脚本之前，它已经被载入了。 位于body部分的脚本：在页面载入时脚本就会被执行。当把脚本放置于body部分后，它就会生成页面的内容标记有一个属性language，用于指明使用的语言，其值可以为“JavaScript”、“VBScript”或者“Jscript”。VBScript是微软以VB(Visual Basic)为蓝本开发的一种脚本语言，目前主要用在服务器端，作为ASP的脚本语言。JScript是微软在JavaScript基础上作了一些扩充后的一种脚本语言，它只可以在IE中使用。标记另一个属性type，用于指明文本类型，其值为“text/javascrip

7、t”。2. 使用JavaScript的内置对象document的write方法，向浏览器输出信息。3. 使用JavaScript的alert( ) 方法显示带有一条指定消息的对话框。4. 和VBScript不区分大小写不同，在JavaScript中“严格区分大小写”。例如，上面的document就必须全部小写，而不能写成Document。alert也不能写成Alert，若首字符写成大写字母，上例中不会有任何输出。在JavaScript中，所有的“内置对象名称和内置函数名称”都是“小写”，初学者务必注意。5. 在编写脚本语句时，用“分号”作为当前语句的结束符。语句分行后，作为语句结束符的分号可省

8、略。也可将多个语句写在同一行中，如将多个语句写在同一行中，则语句之间的分号不能省略。6. 注释在JavaScript中采用和Java中类似的方式：单行注释用/，多行注释用/*和*/括起来。7. JavaScript程序的调试 假如上述程序中document写成了Document，在Dreamweaver CS3中按F12后，打开IE后first.html显示为一空白页面，页面中无任务内容，如图1-3所示。图1-3 程序错误，无任何输出 在空白页面中，再次按下F12，打开IE8的调试窗口，单击“脚本”，显示出脚本代码。再单击“启动调试”按钮，如图1-4所示。图1-4 启动调试 启动调试后，会自动

9、定位在出错误的语句行（第7行），并且显示出错误信息“Document未定义”，如图1-5。根据错误信息，逐一修正程序中的错误，最后单击“停止调试”按钮结束程序调试。图1-5 调试程序8. 计算机程序是指一组指示计算机每一步动作的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成计算机理解的格式后运行。还有一种未经编译就可运行的程序，我们通常称之为“脚本程序”。JavaScript属于客户端脚本语言，VBScript（主要用于ASP）属于服务器端脚本语言，二者的比较如表2-1-1所示。表2-1-1 客户端脚本和服务器端脚本比较脚本类型运行环境优缺点主要语言客户端脚本客户端浏览器当用

10、户通过客户端浏览器发送HTTP请求时，Web服务器将HTML文档部分和脚本部分返回客户端浏览器，在客户端浏览器中解释执行并及时更新页面，脚本处理工作全部在客户端浏览器完成，减轻服务器负荷，同时增加页面的反应速度，但浏览器差异性导致的页面差异问题不容忽视。JavaScript、JScript等服务器端脚本Web服务器当用户通过客户端浏览器发送HTTP请求时，Web服务器运行脚本，并将运行结果与Web页面的HTML部分结合返回至客户端浏览器，脚本处理工作全部在服务器端完成，增加了服务器的负荷，同时客户端反应速度慢，但减少了由于浏览器差异带来的运行结果差异，提高页面的稳定性。ASP、JSP、PHP等

11、三、常量 常量是程序运行过程中其值保值不变的量，有数值常量和字符串常量两种。在VBScript中，字符串常量只能使用双引号作为定界符。与VBScript不同，在JavaScript中不仅允许使用双引号和“单引号”作为定界符，而且允许双引号和单引号相互嵌套。例： document.write(a+,+b+) document.write() 运行结果如图1-3所示。 图1-6 两种字符串定界符四、变量变量是程序执行过程中可以被改变的量。使用var（variable，变量）进行显式声明，不能使用Var和VAR进行变量声明。声明变量的语法是：var 变量 =值;变量声明后，可以在任何时候对其赋值。赋

12、值的语法是：变量=表达式变量的有效范围叫变量的作用域。全局变量定义在所有函数体之外，其值的有效范围是包含该变量的整个文件；局部变量定义在函数体之内，只对该函数有效，对其他函数无效，定义变量时应注意变量的适用范围。五、运算符和优先级表达式是用运算符把常数、变量和函数连接起来的式子。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。运算符优先级按从高到低的顺序排列，如表2-1-3所示。表2-1-3 运算符及优先级括号(x) x中括号只用于指明数组的下标求反自加自减-x 返回x的相反数!x返回与x(布尔值)相反的布尔值x+x值加1，但仍返回原来的x

13、值+x x值加1，返回后来的x值x- x值减1，但仍返回原来的x值-x x值减1，返回后来的x值乘、除x*y 返回x乘以y的值x/y 返回x除以y的值x%y 返回x除以y的余数加、减x+y返回x加y的值x-y 返回x减y的值关系运算xy、x=y、xy当符合条件时返回true值，否则返回false值等于、不等于x=y x!=y当x等于y时返回true值，否则返回false值当x不等于y时返回true值，否则返回false值逻辑与x&y当x和y同时为true时返回true，否则返回false逻辑或x|y当x和y任意一个为true时返回true，当两者同时为false时返回false条件c?x:y当

14、条件c为true时返回x的值（执行x语句），否则返回y的值（执行y语句）赋值、复合运算x=y x+=y、x-=y、x*=y、x/=y、x%=y把y的值赋给x，返回所赋的值x与y相加/减/乘/除/求余，所得结果赋给x，并返回x赋值后的值例如：document.write(1+2*3)的结果是7，而不是9，因为乘（*）的优先级高于加（+）。在计算表达式的值时，优先级的级别不同，从高到低进行计算，级别相同，从左到右进行计算。使用（）可以改变计算的顺序。如document.write(1+2)*3)的结果是9，而不是7。5. 加粗: 倾斜:第二节 函数与数组一、函数函数是指实现某一特定功能的小程序段，

15、JavaScript除了提供大量实用的内部函数外，还允许用户自定义函数，常用内部函数如表2-1所示。1、内部函数表2-1 内部函数类型函数及功能举例数学函数abs：求绝对值Math.abs(1)=1, Math.abs(-1)=1sin：求正弦值Math.sin(30*3.14156/180)= 0.49999528cos：求余弦值Math.cos(30*3.14156/180)= 0.86602812round：取整，返回与函数参数最接近的整数Math.round(0.50)=1Math.round(0.49)=0Math.round(-4.40)=-4Math.round(-4.60)=-

16、5floor：向下取整，返回小于或等于函数参数，并且与之最接近的整数Math.floor(0.50)=0Math.floor(0.49)=0Math.floor(-4.40)=-5Math.floor(-4.60)=-5ceil：向上取整，返回大于或等于函数参数，并且与之最接近的整数Math.ceil(0.50)=1Math.ceil(0.49)=1Math.ceil(-4.40)=-4Math.ceil(-4.60)=-4random：随机产生（0，1）之间的随机数Math.random()=0.26523621702899214随机产生，每次结果均不相同。日期时间函数Date：返回当天的日

17、期和时间假设现在是2014-2-6 13:43:34Date()=Thu Feb 06 13:43:34 2014getFullYear: 返回一个表示年份的4位数字getFullYear()=2014getMonth：返回表示月份的数字0（一月）到11（十二月）getMonth()+1=2getDate:返回月份的某一天（1 31）getDate()=6getDay：返回一周中的某一天（06）getDay()4getHours()：返回小时数(023)getHours()=13getMinutes()：返回分钟数(059)getMinutes()=43getSeconds()：返回秒数(05

18、9)getSeconds()=34getMilliseconds()：返回毫秒数(0999)getMilliseconds()=43（可变化）getTime()：返回1970年1月1日午夜至今的毫秒数getTime()=139*60（可变化）字符串函数charAt：返回指定位置的字符注：字符串中第一个字符的下标是0var str=JavaScriptstr.charAt(0)=J，str.charAt(4)=SindexOf：返回某个指定的字符串值在字符串中首次出现的位置（对大小写敏感）var str=JavaScript or javascriptstr.indexOf(javascript

19、)14substring：返回字符串中介于两个指定下标之间的字符（第一个字符的下标是0）var str=JavaScript，str.substring(4,6)=Scstr.substring(4)=Script转换函数Number：将参数转换成数值注意：首字符必须大写Number(1+2.3)+3.4 =15.7Number(1.2)+Number(2.3)+3.4=6.9parseInt：将参数转换成整数parseInt(1.2)+parseInt(2.9)=3parseFloat：将参数转换成浮点数parseFloat(1.2)+parseFloat(2.9) =4.1toLowerC

20、ase：将字符串转换为小写var str=Hello World!str.toLowerCase()=hello world!toUpperCase：将字符串转换为大写var str=Hello World!str.toLowerCase()=HELLO WORLD!判断函数isNaN：用于检查其参数是否是非数字值，非数字返回true，数字返回false。注：NaN代表Not a Number。isNaN(abc)=trueisNaN(123)=false，isNaN(123)=false数组函数Array: 创建一个数组变量（array错误）注意：数组下标从0开始计数，下标放在 中，不能放在

21、（）中。var myArray=new Array(1,2,3,4,5)myArray0=1，myArray4=5length：返回数组的长度arr=new Array(0,1,2,3,4)arr.length=5sort：对数组的元素进行排序arr=new Array(3,1,0,2,4)arr.sort()=0,1,2,3,4reverse：颠倒数组中元素的顺序arr=new Array(3,1,0,2,4)arr.sort().reverse()=4,3,2,1,0join：把数组中的每个元素转换为字符串，然后用join指定的分隔符将这些字符串连接起来，生成一个字符串arr=new Ar

22、ray(1,2,3,4,5);arr.join(,)=1,2,3,4,52、自定义函数例：有参函数示例。有参函数 function add(x,y) add=x+y; alert(x+y+=+add); 单击该按钮求和。程序运行结果如图1-7所示。图1-7 使用有参函数求和程序说明：1. 使用自定义函数分为二个步骤：函数定义和函数调用。一般情况下在.中定义函数，在.调用函数。2. 使用function定义函数，function后是用户自定义的函数名add，函数名add后是形式参数（x,y）。中的内容是函数体，在函数体中使用函数名add返回函数值。3. 使用单击事件onclick来调用函数，ad

23、d(1,2)中的1,2叫实在参数。单击求和按钮后，实在参数会按次序传递给形式参数，传递参数后x=1，y=2。二、数组在程序设计中，为了处理方便，把具有相同类型的若干变量按有序的形式组织起来。这些按序排列的同类数据元素的集合称为数组。1. 定义数组 在JavaScript中使用数组必须先进行定义。语法格式：var 变量=new Array(元素1,元素2, ., 元素n);2. 引用数组引用数组的语法格式：数组名下标注意：数组中第一个元素的下标为0。例：var mycourse = new Array(PhotoShop,Dreamweaver,JavaScript); document.wri

24、te(mycourse2);运行结果：JavaScript3. 使用循环语句访问数组元素使用数组的最基本操作是对它的元素进行访问，即取值。对于已经知道元素个数的数组可直接访问。对于未知元素个数的数组，可用for.in语句访问数组元素或用“数组名.length”获取元素最大下标，用for循环访问数组元素。第三节 语句和鼠标事件一、输入与输出语句1. 输入：使用prompt显示一个输入框，输入参数。语法格式：var 变量=prompt(str1,str2)或var 变量=Number(prompt(str1,str2)str1是要显示在消息对话框中的文本，不可修改，str2 是在文本框中的内容，可

25、以修改。str1和str2参数可以省略，写成prompt(str1)或prompt()。2. 输出：使用document.write在浏览器窗口输出，使用alert方法在对话框中输出。例：输入与输出示例输入与输出 var a=Number(prompt(请输入第一个数：,此处输入数字); var b=Number(prompt(请输入第二个数：,此处输入数字); var c=a+b; document.write(c); alert(c); 程序运行后，显示第一个消息对话框，如图1-8所示。图1-8 输入对话框假如输入1，单击确定按钮后显示第二个消息对话框，假如输入2，运行结果为3。思考：上述

26、程序中若无Number，结果如何？为什么？二、分支语句分支结构可以根据表达式的值有条件地执行一组语句。在JavaScript中分支结构可使用IfThenElse和Select CaseEnd Select两种。1、单分支结构语法结构：If（条件） 功能：当条件成立，执行，否则执行后续语句。例：单分支结构单分支 x=1; if(x!=0) document.write(x0) 运行结果：x02、双分支结构语法结构：if（条件）if子句 else else子句功能：当条件成立，执行，否则执行。例：双分支示例双分支 var x=Number(prompt(请输入一个数字：,此处输入一个数字); if(x=0) document.write(x=0) else document.write(x0)