制作网页高级特效第二讲 javascript语言基础.docx
《制作网页高级特效第二讲 javascript语言基础.docx》由会员分享，可在线阅读，更多相关《制作网页高级特效第二讲 javascript语言基础.docx（24页珍藏版）》请在冰豆网上搜索。
制作网页高级特效第二讲javascript语言基础
授课班级
授课日期
授课题目：
第二讲javascript语言基础
目的要求：
1.了解Javascript的概念,能编写简单的Javascript程序。
2.了解常量、变量、函数、运算符和优先级等概念,能正确运用常量、变量、函数和运算符,能按照优先级正确书写表达式。
3.了解常用内部函数的用法,能根据需要自定义函数。
4.了解数组的概念,能正确定义和引用数组。
5.掌握分支语句和循环语句的使用方法,能进行顺序结构、分支结构和循环结构程序的设计。
重点难点：
Emmet的基本语法；内嵌框架的用法；掌握canvas标签的用法
组织教学：
点名考勤
导入新课：
JavaScript是一种基于对象和事件驱动的客户端脚本语言，是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。
JavaScript脚本语言由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面等方面获得广泛的应用。
教学方式、手段、媒介：
教学手段：
讲授、多媒体；媒介：
教材
授课内容：
第一部分JavaScript基础
第一节JavaScript语言基础
一、JavaScript的概念
JavaScript是一种基于对象和事件驱动的客户端脚本语言，是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。
JavaScript是基于对象的脚本编程语言，能通过DOM（文档结构模型）及自身提供的对象及操作方法来实现所需的功能。
在JavaScript中提供简单高效的语言流程，灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。
JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。
JavaScript事件处理是实时的，无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。
JavaScript脚本语言由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面等方面获得广泛的应用。
二、第一个JavaScript程序
编写JavaScript脚本代码可选择普通的文本编辑器或集成开发环境。
DreamweaverCS3中集成了JavaScript开发环境，提供了强大的Javascript支持。
为了提高编程效率，在DreamweaverCS3中依次单击“编辑菜单→首选参数→代码提示”，将结束标签从默认设置的“键入后”，如图1-1所示。
更改设置后，当输入，不仅提高了输入的效率，也有效避免了由于编程人员疏忽，忘记输入<造成“标签不配对”的错误。
图1-1首选参数设置
新建一个html文档，输入以下代码。
FirstJavaScript
document.write（"HelloJavaScript!
"）;//输出到浏览器窗口
alert（"HelloWorld!
"）;//输出到对话框
/*
上面使用的单行注释，
这里使用的是多行注释。
*/
程序运行结果如图1-2所示（注：
若没出现对话框，按F5刷新页面）。
图1-2第一个JavaScript程序
程序说明：
1.JavaScript需要嵌入到HTML中，即JavaScript的存在依赖于HTML文件。
在HTML中，使用结束JavaScript，之间是JavaScript脚本。
可以放在
和之间，也可以放在和之间。
二者的区别是：
位于head部分的脚本：
当脚本被调用时，或者当事件被触发时，脚本就会被执行。
当把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。
位于body部分的脚本：
在页面载入时脚本就会被执行。
当把脚本放置于body部分后，它就会生成页面的内容
运行结果如图1-3所示。
图1-6两种字符串定界符
四、变量
变量是程序执行过程中可以被改变的量。
使用var（variable，变量）进行显式声明，不能使用Var和VAR进行变量声明。
声明变量的语法是：
var变量[=值];
变量声明后，可以在任何时候对其赋值。
赋值的语法是：
变量=表达式
变量的有效范围叫变量的作用域。
全局变量定义在所有函数体之外，其值的有效范围是包含该变量的整个文件；局部变量定义在函数体之内，只对该函数有效，对其他函数无效，定义变量时应注意变量的适用范围。
五、运算符和优先级
表达式是用运算符把常数、变量和函数连接起来的式子。
一个表达式可以只包含一个常数或一个变量。
运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。
运算符优先级按从高到低的顺序排列，如表2-1-3所示。
表2-1-3运算符及优先级
括号
（x）[x]
中括号只用于指明数组的下标
求反
自加
自减
-x
返回x的相反数
!
x
返回与x（布尔值）相反的布尔值
x++
x值加1，但仍返回原来的x值
++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的值
关系运算
xx>=y、x>y
当符合条件时返回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
当条件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.加粗:
倾斜:
第二节函数与数组
一、函数
函数是指实现某一特定功能的小程序段，JavaScript除了提供大量实用的内部函数外，还允许用户自定义函数，常用内部函数如表2-1所示。
1、内部函数
表2-1内部函数
类型
函数及功能
举例
数学
函数
abs：
求绝对值
Math.abs
（1）=1,Math.abs（-1）=1
sin：
求正弦值
Math.sin（30*3.14156/180）=0.49999528
cos：
求余弦值
Math.cos（30*3.14156/180）=0.86602812
round：
取整，返回与函数参数最接近的整数
Math.round（0.50）=1
Math.round（0.49）=0
Math.round（-4.40）=-4
Math.round（-4.60）=-5
floor：
向下取整，返回小于或等于函数参数，并且与之最接近的整数
Math.floor（0.50）=0
Math.floor（0.49）=0
Math.floor（-4.40）=-5
Math.floor（-4.60）=-5
ceil：
向上取整，返回大于或等于函数参数，并且与之最接近的整数
Math.ceil（0.50）=1
Math.ceil（0.49）=1
Math.ceil（-4.40）=-4
Math.ceil（-4.60）=-4
random：
随机产生（0，1）之间的随机数
Math.random（）=0.26523621702899214
随机产生，每次结果均不相同。
日期
时间
函数
Date：
返回当天的日期和时间
假设现在是2014-2-613:
43:
34
Date（）=ThuFeb0613:
43:
342014
getFullYear:
返回一个表示年份的4位数字
getFullYear（）=2014
getMonth：
返回表示月份的数字0（一月）到11（十二月）
getMonth（）+1=2
getDate:
返回月份的某一天（1~31）
getDate（）=6
getDay：
返回一周中的某一天（0－6）
getDay（）＝4
getHours（）：
返回小时数（0~23）
getHours（）=13
getMinutes（）：
返回分钟数（0~59）
getMinutes（）=43
getSeconds（）：
返回秒数（0~59）
getSeconds（）=34
getMilliseconds（）：
返回毫秒数（0~999）
getMilliseconds（）=43（可变化）
getTime（）：
返回1970年1月1日午夜至今的毫秒数
getTime（）=139********60（可变化）
字符串函数
charAt：
返回指定位置的字符
注：
字符串中第一个字符的下标是0
varstr="JavaScript"
str.charAt（0）=J，str.charAt（4）=S
indexOf：
返回某个指定的字符串值在字符串中首次出现的位置（对大小写敏感）
varstr="JavaScriptorjavascript"
str.indexOf（"javascript"）＝14
substring：
返回字符串中介于两个指定下标之间的字符（第一个字符的下标是0）
varstr="JavaScript"，str.substring（4,6）=Sc
str.substring（4）=Script
转换
函数
Number：
将参数转换成数值
注意：
首字符必须大写
Number（"1"+"2.3"）+3.4=15.7
Number（"1.2"）+Number（"2.3"）+3.4=6.9
parseInt：
将参数转换成整数
parseInt（"1.2"）+parseInt（"2.9"）=3
parseFloat：
将参数转换成浮点数
parseFloat（"1.2"）+parseFloat（"2.9"）=4.1
toLowerCase：
将字符串转换为小写
varstr="HelloWorld!
"
str.toLowerCase（）=helloworld!
toUpperCase：
将字符串转换为大写
varstr="HelloWorld!
"
str.toLowerCase（）=HELLOWORLD!
判断
函数
isNaN：
用于检查其参数是否是非数字值，非数字返回true，数字返回false。
注：
NaN代表NotaNumber。
isNaN（"abc"）=true
isNaN（123）=false，isNaN（"123"）=false
数组
函数
Array:
创建一个数组变量（array错误）
注意：
数组下标从0开始计数，下标放在[]中，不能放在（）中。
varmyArray=newArray（1,2,3,4,5）
myArray[0]=1，myArray[4]=5
length：
返回数组的长度
arr=newArray（0,1,2,3,4）
arr.length=5
sort：
对数组的元素进行排序
arr=newArray（3,1,0,2,4）
arr.sort（）=0,1,2,3,4
reverse：
颠倒数组中元素的顺序
arr=newArray（3,1,0,2,4）
arr.sort（）.reverse（）=4,3,2,1,0
join：
把数组中的每个元素转换为字符串，然后用join指定的分隔符将这些字符串连接起来，生成一个字符串
arr=newArray（1,2,3,4,5）;
arr.join（","）=1,2,3,4,5
2、自定义函数
例：
有参函数示例。
有参函数
functionadd（x,y）{
add=x+y;
alert（x+"+"+y+"="+add）;
}
单击该按钮求和。
程序运行结果如图1-7所示。
图1-7使用有参函数求和
程序说明：
1.使用自定义函数分为二个步骤：
函数定义和函数调用。
一般情况下在
...中定义函数，在...调用函数。
2.使用function{}定义函数，function后是用户自定义的函数名add，函数名add后是形式参数（x,y）。
{}中的内容是函数体，在函数体中使用函数名add返回函数值。
3.使用单击事件onclick来调用函数，add（1,2）中的1,2叫实在参数。
单击求和按钮后，实在参数会按次序传递给形式参数，传递参数后x=1，y=2。
二、数组
在程序设计中，为了处理方便，把具有相同类型的若干变量按有序的形式组织起来。
这些按序排列的同类数据元素的集合称为数组。
1.定义数组
在JavaScript中使用数组必须先进行定义。
语法格式：
var变量=newArray（元素1,元素2,...,元素n）;
2.引用数组
引用数组的语法格式：
数组名[下标]
注意：
数组中第一个元素的下标为0。
例：
varmycourse=newArray（"PhotoShop","Dreamweaver","JavaScript"）;
document.write（mycourse[2]）;
运行结果：
JavaScript
3.使用循环语句访问数组元素
使用数组的最基本操作是对它的元素进行访问，即取值。
对于已经知道元素个数的数组可直接访问。
对于未知元素个数的数组，可用for...in语句访问数组元素或用“数组名.length”获取元素最大下标，用for循环访问数组元素。
第三节语句和鼠标事件
一、输入与输出语句
1.输入：
使用prompt显示一个输入框，输入参数。
语法格式：
var变量=prompt（str1,str2）或var变量=Number（prompt（str1,str2））
str1是要显示在消息对话框中的文本，不可修改，str2是在文本框中的内容，可以修改。
str1和str2参数可以省略，写成prompt（str1）或prompt（）。
2.输出：
使用document.write在浏览器窗口输出，使用alert方法在对话框中输出。
例：
输入与输出示例
输入与输出
vara=Number（prompt（"请输入第一个数：
","此处输入数字"））;
varb=Number（prompt（"请输入第二个数：
","此处输入数字"））;
varc=a+b;
document.write（c）;
alert（c）;
程序运行后，显示第一个消息对话框，如图1-8所示。
图1-8输入对话框
假如输入1，单击确定按钮后显示第二个消息对话框，假如输入2，运行结果为3。
思考：
上述程序中若无Number，结果如何？
为什么？
二、分支语句
分支结构可以根据表达式的值有条件地执行一组语句。
在JavaScript中分支结构可使用If…Then…Else…和SelectCase…EndSelect两种。
1、单分支结构
语法结构：
If（条件）{……}
功能：
当条件成立，执行，否则执行后续语句。
例：
单分支结构
单分支
x=1;
if（x!
=0）{
document.write（"x<>0"）
}
运行结果：
x<>0
2、双分支结构
语法结构：
if（条件）{if子句}else{else子句}
功能：
当条件成立，执行，否则执行。
例：
双分支示例
双分支
varx=Number（prompt（"请输入一个数字：
","此处输入一个数字"））;
if（x==0）{
document.write（"x=0"）
}else{
document.write（"x<>0"）
}
升级会员 