JavaScript网页特效案例教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<script type="text/javascript"> function aver(x,y,z) { var sum; sum = x+y+z; return sum/3; } var average; 变量 average的值为函数的值 alert("average =" + average); average = aver(10,20,30); alert("average =" + average); </script>
[案例3.3] <html> <head><title>案例</title> </head> <body> <script typHale Waihona Puke Baidu="text/javascript">
…… </script> </body> </html>
Javascript代码
案 例
<script type="text/javascript"> function aver(x,y,z) { 案 var sum; 例 sum = x+y+z; return sum/3; } var average; alert("average =" + average); average = aver(10,20,30); alert("average =" + average); </script>
<HEAD> <SCRIPT LANGUAGE="JavaScript“> <!-用function关键字 function add(a,b) 定义函数 { return(a+b); return语句返回函数值 } //--> </SCRIPT> </HEAD> 函数的调用 <BODY> <SCRIPT LANGUAGE="JavaScript" > document.write("3 + 5 = "+add(3,5)); </SCRIPT> 在程序中返回函数的调用结果 </BODY>
JavaScript脚本语法如下：
回顾
<html> <head> <title>标题内容</title> <script language="JavaScript" type="text/javascript"> <!-//在此编写Javascript代码 --〉 </script> </head> <body> //在此编写事件响应代码 </body> </html>
JavaScript脚本语法如下：
回顾
<html> <head> <title>标题内容</title> <script language="JavaScript" type="text/javascript"> <!-//在此编写Javascript代码 --〉 最近的HTML和XHTML标准中 </script> 要求使用type属性指定脚本语言的类型 </head> <body> //在此编写事件响应代码 </body> </html>
JavaScript脚本语法如下：
回顾
<html> type属性的使用格式 <head> <title>标题内容</title> <script type="text/javascript"> <!-//在此编写Javascript代码 --〉 </script> </head> <body> //在此编写事件响应代码 </body> </html>
<HEAD> <SCRIPT LANGUAGE="JavaScript“> <!-function add(a,b) 在JavaScript中，函 { 数的定义通常放在HTML return(a+b); 文档头中，这样就可以确 } 保先定义后使用。 //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" > document.write("3 + 5 = "+add(3,5)); </SCRIPT> </BODY>
书名： JavaScript网页特效案例教 程 ISBN： 978-7-111- 45596-7 作者：杨旭超 出版社：机械工业出版社 本书配有电子课件
JavaScript语法结构： 回顾 <html> <head> <script language="javascript"> <!-alert("您好，欢迎使用JavaScript ! "); --〉 <script>标签对一般放在 </script> <head>标签对内 </head> </html> JavaScript的代码必须与HTML代码结合在一起
<script type="text/javascript"> function aver(x,y,z) { var sum; sum = x+y+z; return sum/3; } 定义变量 var average; alert("average =" + average); average = aver(10,20,30); alert("average =" + average); 变量average的值为undefined </script>
JavaScript语法结构： 回顾 <html> <head> <script language="javascript"> <!-alert("您好，欢迎使用JavaScript ! "); --〉 标签< script >通知浏览器 </script> 有脚本嵌入到标签中 </head> </html> JavaScript的代码必须与HTML代码结合在一起
[案例3.4] <html> <head><title>案例</title></head> <body> <script type="text/javascript"> var x = "我是一个全局变量";定义全局变量X function show() X的作用域包括 { alert( x ); 其后定义的函数 } show(); alert( x ); X的作用域是这个变量定 </script > 义之后的所有语句 </body> </html>
JavaScript语法结构： 回顾 <html> <head> <script language="javascript"> <!-alert("您好，欢迎使用JavaScript ! "); --〉 Javascript代码放置在 </script> <script></script>标签对间 </head> </html> JavaScript的代码必须与HTML代码结合在一起
若没有return语句 则返回undefined
<HEAD> <SCRIPT LANGUAGE="JavaScript“> <!-function add(a,b) { 案 return(a+b); 例 } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" > document.write("3 + 5 = "+add(3,5)); </SCRIPT> </BODY>
<HEAD> <SCRIPT LANGUAGE="JavaScript“> <!-用function关键字 function add(a,b) 定义函数 { return(a+b); 各参数之间 } 以逗号“，”隔 //--> 开 </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" > document.write("3 + 5 = "+add(3,5)); </SCRIPT> </BODY>
主程序对函数进行调用的几种方式 average = aver(10,20,30); 调用程序需要函数 的返回结果
alert("average =" + aver(10,20,30)); 在程序中直接使 用返回的函数值 show(); 函数没有返回值或调用程 序不关心函数的返回值
3.1.6 全局变量与局部变量
JavaScript脚本语法如下：
回顾
<html> <head> <title>标题内容</title> <script language="JavaScript" type="text/javascript"> <!-//在此编写Javascript代码 指定脚本语言的类型 --〉 </script> </head> <body> //在此编写事件响应代码 </body> </html>
3.1.4 JavaScript函数
用function关键字 定义一个函数的格式如下：
定义函数
function 函数名(参数列表) { 且不需要说明 程序代码 函数的类型 return表达式； }
3.1.4 JavaScript函数
定义一个函数的格式如下：
function 函数名(参数列表) { 程序代码 return返回表达式 return表达式； 的运算结果 }
<script type="text/javascript"> function aver(x,y,z) { var sum; sum = x+y+z; return sum/3; 若调用程序需要函数的返回结果 } 则要用这样的格式调用函数 var average; alert("average =" + average); average = aver(10,20,30); 函数的调用 alert("average =" + average); </script>
1. 全局变量：在所有函数之外的脚本中定义的变量
作用域： 是这个变量定义之后的所有语句，包括 其后定义的函数中的程序代码和它后面的其 他<script></script>标签对中的程序代码。
[案例3.4] <html> <head><title>案例</title></head> <body> <script type="text/javascript"> var x = "我是一个全局变量"; function show() { alert( x ); } 函数没有返回值或调用程 show(); 序不关心函数的返回值 alert( x ); </script > </body> </html>
<script type="text/javascript"> function aver(x,y,z) { 定义函数 var sum; sum = x+y+z; return sum/3; } var average; alert("average =" + average); average = aver(10,20,30); alert("average =" + average); </script>
<script type="text/javascript"> function aver(x,y,z) { var sum; sum = x+y+z; return sum/3; } 定义变量 var average; alert("average =" + average); average = aver(10,20,30); alert("average =" + average); </script>
3.1.4 JavaScript函数
当函数无参数时 定义一个函数的格式如下： 不能省略小括号
function 函数名( ) { 程序代码 return表达式； }
若省略了return语 句后的表达式 则返回undefined
3.1.4 JavaScript函数
定义一个函数的格式如下：
function 函数名( ) { 程序代码 return表达式； }
<script type="text/javascript"> function aver(x,y,z) { var sum; sum = x+y+z; return sum/3; } var average; alert("average =" + average); average = aver(10,20,30); 等价的操作: alert("average =" + aver(10,20,30)); alert("average =" + average); </script> 在程序中直接使用函数返回的结果