制作网页高级特效第二讲 javascript语言基础.docx
- 文档编号:8507970
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:24
- 大小:162.52KB
制作网页高级特效第二讲 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文档,输入以下代码。
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的值
关系运算
x x>=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")
}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 制作网页高级特效第二讲 javascript语言基础 制作 网页 高级 特效 第二 javascript 语言 基础