文档介绍：JavaScript网页特效案例教程
主编:王莹
副主编:印梅齐燕
第二章实现按钮点击事件
教学导航
任务分析
本案例涉及到的知识点:
无参函数的定义
无参函数的调用
按钮点击调用函数
获得文本框的值
相关知识
知识点1:什么是函数
函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。
知识点2:函数的定义
语法:
<script language="javascript">
function functionName(parameters){
some statements;
}
</script>
functionName:函数名称。
parameters:参数名称。无参函数的参数为空。
例1完整代码如下:
<script language="javascript">
function print(){
alert(“hello”);//弹出对话框
}
</script>
知识点3:函数调用
例2完整代码如下:
<html>
<head>
<title>函数的简单应用</title>
<script language=javascript>
function print(){
alert(“hello”);
}
</script>
</head>
<body>
<script language=javascript>
print();
</script>
</body>
</html>
知识点3:按钮事件
例3:点击按钮弹出Hello!。
例3完整代码如下:
<html xmlns="9/xhtml">
<head>
<script language="javascript">
function function1()
{
alert("hello!");
}
</script>
<body>
<input type="button" name="Submit" value="请点击我" onclick="function1()"/>
</body>
</html>
知识点4:获得文本框的值
一种是不添加表单,(name)获得控件。但这种方法有兼容性问题存在。
<input name="text1" type="text" value="hello" />
<input type="button" name="Submit" value="显示文本框的值" onclick="alert(('text1').value)"/>
另一种是添加表单,在表单内添加控件,然后用DOM方法来获得控件。类似于一层层的获得控件。DOM结构将在以后的章节具体介绍。
<form name="form1" method="post" action="">
<input name="text1" type="text" value="hello" />
<input type="button" name="Submit" value="显示文本框的值" onClick="alert()"/>
</form>
练习
实现如下特效,当按“<”和“>”实现中间文本框中广告的轮换。。
任务分析
本案例涉及到的知识点:
有参函数的定义
有参函数的调用
点击单选按钮调用函数
2 相关知识
知识点1:有参函数的定义和调用
此处的加号表示字符串的相连
<html>
<head>
<title>函数的简单应用</title>
<script language=javascript>
function Print(parameter1,parameter2,parameter3){
alert(parameter1+parameter2+parameter3);
}
</script>
</head>
<body>
<script language=javascript>
Print(“JavaScript网页特效案例教程”,”学习好帮手”,”专业工具书”);
</script>
</body>
</html>
此处的加号表示字符串的相连