回顾
数组的使用
本章目标
函数,事件,js对象,js操作页面元素
1.函数/方法
1.1 什么是函数
函数是指一段可以直接被另一段程序或代码引用的程序或代码。也叫做子程序、(OOP中)方法。一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能。
由主函数调用其他函数,其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。在程序设计中,常将一些常用的功能模块编写成函数,放在函数库中供公共选用。要善于利用函数,以减少重复编写程序段的工作量。
函数:一段具有特定的功能的代码块。需要时调用,调用时执行!(自己不会主动执行!)
if(){} : 控制代码是否执行。
for(){}: 控制代码执行多少次。
function(){}: 控制代码何时执行。调用时执行。
1.2 函数分类
- 库函数(系统函数)
js给我们提供的具有特定功能的代码块。
- alert() prompt() document.write() Number() parseInt() 。。。
- 自定义函数( 重点 )
- 自己定义函数,根据自己的需求来定义功能。
1.3 函数的定义和使用
语法:
// 定义 function 函数名(参数1,参数2,参数3,...) { 函数功能代码; return 函数返回值; } //调用 函数名(数据1,数据2,数据3...);
说明:
function
:用于定义函数的关键字,不能写错。
函数名
:使用者自己定义,命名规则:字母,数字,下划线,$,数字不能开头。小驼峰的命名方式,例如: getNum()
参数列表
:在函数名后面的小括号中定义参数列表,参数可多可少,也可以没有。其实参数就是变量,可以接受数据。
函数功能代码
:当前函数要实现的特定功能,是函数的核心内容。
return 返回值
:在函数执行完成之后,可以通过return关键字,返回函数处理的结果。可以省略。
函数的使用:如果一个功能代码,需要被反复使用,此时建议将该代码定义为函数。另外一种情况,如果在一个处理过程中,部分代码太多,此时可以将此部分代码封装成函数,优化代码结构。
示例:洗衣服
//1.重复要做的事情
//2.后期可能有变化的事情
//定义函数:完成洗衣服的功能
// 洗衣机来洗衣服
function xyj(){
document.write("拿出要洗的衣服<br/>");
document.write("放到洗衣机中<br/>");
document.write("加水<br/>");
document.write("加洗衣液<br/>");
document.write("启动洗衣机<br/>");
document.write("自动甩干<br/>");
}
//周一洗衣服:
// 调用函数: 函数名();
xyj();
//周三洗衣服:
xyj();
//周六洗衣服:
xyj();
1.3.1无参无返回值的函数
实例:打招呼
//定义函数
//打招呼
//无参,无返回值
/*
function 函数名(){
函数体
}
*/
function sayHello(){
//这只是个输出,不是返回值
document.write("你好");
}
//调用函数
sayHello();
1.3.2无参有返回值的函数
实例:抽奖
<script type="text/javascript">
//随机数:1.范围[0,1) 0-0.999999999
// 2.小数数据随机
//var r = Math.random();
//document.write(r+"<br/>");
// 问:如何生成一个1-60的随机数
// [0,1) * 60 => 0,59.999999 + 1 => 1,60.9999999 => parseInt(数据)
//r= parseInt(Math.random()*60+1);
//document.write(r);
//定义函数用于返回0-60的
// 随机获取某人
function getMR(){
//学生数组
var stus = [
"张三", //0
"李四", //1
"王五", //2
"赵六", //3
"孙琪" //4
];
//随机获取下标
//获取 0-4
var r = parseInt(Math.random()*5);
//获取数组中的某个元素
//return后面跟的数据就是函数的返回值
return stus[r];
}
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
//调用函数,定义变量,接受函数的返回值
var xxx = getMR();
document.write("函数的返回值是:"+xxx+"<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
document.write("111111111<br/>");
</script>
注意:如果函数的最后没有使用return返回结果,此时如果使用变量接受函数,则接受的数据为undefined。
/* //定义函数 function say(){ document.write("你好"); } // 调用函数,并接收返回值 //问题是:人家函数有给你返回值么???? var v = say(); //接的是个啥: undefined document.write(v); */ //定义函数 function say(){ document.write("你好"); //通过return才能定义函数的返回值 return 100; } // 调用函数,并接收返回值 var v = say(); //接的是个啥: 100 document.write(v);
1.3.3有参数无返回值的函数
实例:给某人打招呼,某人学习课程
<script type="text/javascript">
//有参,无返回值
//给某人打招呼
function hello(name){
//函数的参数:就是一个变量,可以接收调用者传入的值
alert("你好,"+name);
}
//调用函数
//hello("张三");
//hello("李四");
//hello("王五");
//有参(括号中有定义变量),无返回值(函数没有return)
function study(name,course,hours){
document.write(name+"学习"+course+"学习"+hours+"小时<br/>");
}
//调用函数
study("张三","js",10);
document.write("111111111111111111111<br/>");
document.write("111111111111111111111<br/>");
document.write("111111111111111111111<br/>");
document.write("111111111111111111111<br/>");
document.write("111111111111111111111<br/>");
study("李四","html",3);
hello("张三");
document.write("111111111111111111111<br/>");
document.write("111111111111111111111<br/>");
hello("李四");
</script>
1.3.4有参数有返回值的函数
实例:求任意两个区间的和
<script type="text/javascript">
//求任意区间的数字和: 1-100,50-200,30-80
//有参(括号中有变量),有返回值(方法有return返回值)
function qh(start,end){
var sum = 0;
for(var i=start;i<=end;i++){
sum+=i;
}
return sum;
}
//调用函数:1-100,50-200,30-80
var res = qh(1,100)
document.write("1-100:"+res+"<br/>");
res = qh(50,200)
document.write("50-200:"+res+"<br/>");
res = qh(30,80)
document.write("30-80:"+res+"<br/>");
</script>
1.3.5匿名函数
语法
// 定义匿名函数 function(参数1,参数2...){ //代码块 return 结果; }
// 定义匿名函数,并存储到变量中 var x = function (){ document.write("我是匿名函数"); } // 调用匿名函数 x(); // 事件和函数绑定 // window.onload:浏览器窗口中的页面加载完成事件 window.οnlοad=function(){ alert(123); }
2.网页元素的事件和函数
2.1 事件
事件:就是发生了一件事,通常我们会将html元素事件和特定的方法绑定到一起,当事件触发的时候,程序自动执行绑定的方法,以此完成特定的程序处理。这就是程序的事件驱动机制。
实例1:按钮触发函数调用
实例2:通过事件触发修改元素背景颜色
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
//对象:具有一系列属性和行为的事物称为对象
// 人: 姓名,性别,年龄,身高.... 吃,喝....
// 按钮: 标签名,id,class,value.... 点击,双击,.....
// h1:
// p:
// 自定义函数
function test1(){
alert("你点我了");
}
//让p元素的背景变化
function test2(){
//通过js的方式,改变元素样式
//1.获取元素对象
// document.getElementById(id名字):根据id获取元素对象
//获取文档中id名位myp的元素对象
var pys = document.getElementById("myp");
//2.用js的方式修改对象的样式属性
// css样式:background-color js的写法: backgroundColor
// font-size fontSize
// color color
pys.style.backgroundColor="red";
}
//让span的字体变化:字体颜色变为绿色,大小变为50px
function test3(){
//通过js的方式,改变元素样式
}
</script>
</head>
<body>
<!--单击元素时(特定事件),进行特定处理(调用函数)-->
<h1 onclick="test1()">这是一个标题</h1>
<div onclick="test1()">这是一个div</div>
<!--onmouseover鼠标移入到元素上时,进行特定处理-->
<p onmouseover="test2()" id="myp">这是一个p</p>
<span onmouseout="test3()">这是一个span</span>
</body>
</html>
2.2 什么是对象
在软件系统中,对象具有唯一的标识符,对象包括属性(Properties)和(行为)方法(Methods),属性就是需要记忆的信息,方法就是对象能够提供的服务。
2.3 js 对象
js对象
:包含了html元素对象,以及其它js内置或自定义的对象。
//根据id获取到html元素, 获取的就是一个html元素对象 var v = document.getElementById("id"); alert(v);
2.4 使用js访问html元素对象
a. 设置/获取表单元素(文本框,单选,复选,下拉框...)的内容
b. 设置/获取非表单元素(h1-h6,p,div,span,a....)的内容
//通过HTML元素,触发js函数的执行 <元素 事件名="函数名()"/>
//通过js访问HTML元素
1.表单元素
获取表单元素数据:
var bl = document.getElementById("表单元素id").value;
设置表单元素数据
document.getElementById("表单元素id").value="数据"
2.非表单元素
获取非表单元素的内容
var nr = document.getElementById("非表单元素id").innerHTML;
设置非表单元素的内容
document.getElementById("非表单元素id").innerHTML="数据";
3.通过js设置元素样式
设置元素的行内样式
document.getElementById("元素id").style.color="字体颜色";
设置元素的类样式
document.getElementById("元素id").className="类样式名";
innerText
表示 获取标签中的文本(内容 ) 不包含标签
innerHTML
表示 获取标签中的所有内容 (包含标签+文本)
outerHTML
表示 获取当前标签中的所有内容 包含标签本身
绑定元素的事件函数三步走(事件驱动机制):
3w,针对哪个元素,在什么时候,做什么处理
who 触发事件的事件源 :给谁绑定函数 (哪个标签)。针对哪个元素
When 什么时机 点击时触发 事件操作 。在什么时候
what 干什么 函数的主体代码。做什么事情
案例1:改变页面颜色
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<style type="text/css">
</style>
<script type="text/javascript">
// 调试问题:
// 1.页面控制台是否出错。观察法
// 2.函数代码全都注释,只留一个弹窗。排除法。
function changeColor(){
//alert(123);
// 实现点击按钮切换页面背景
// 切换页面背景: document.body.style.backgroundColor=""
//document.body.style.backgroundColor="red";
if(document.body.style.backgroundColor=="red"){
document.body.style.backgroundColor="green";
}else if(document.body.style.backgroundColor=="green"){
document.body.style.backgroundColor="blue";
}else{
document.body.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" value="改变页面背景" onclick="changeColor()"/>
</body>
</html>
案例2:计算器
1.写界面(标题,三个文本框,四个按钮)
2.实现加减乘除的函数,与按钮的单击事件绑定
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
//var x; "xxx",'sdfsd',20,234.234
//定义计算器
//ysf:接受方法调用时,传入的运算符参数
function jisuan(ysf){
//显示运算符
//alert(ysf);
//1.获取文本框的值
var txt1 = document.getElementById("num1");
var v1 = Number(txt1.value);
var txt2 = document.getElementById("num2");
var v2 = Number(txt2.value);
//2.根据传入的运算符做运算
var jg ;
switch(ysf){
case "+":
jg = v1+v2;
break;
case "-":
jg = v1-v2;
break;
case "*":
jg = v1*v2;
break;
case "/":
jg = v1/v2;
break;
}
//3.将运算结果设置到结果文本框中
var txtRes =document.getElementById("res");
txtRes.value = jg;
}
</script>
</head>
<body>
<table border="1" align="center">
<caption>计算器</caption>
<tr>
<td>数据1</td>
<td>
<input type="text" name="num1" id="num1" />
</td>
</tr>
<tr>
<td>数据2</td>
<td>
<input type="text" name="num2" id="num2"/>
</td>
</tr>
<tr>
<td>运算</td>
<td>
<input type="button" value="+" onclick="jisuan('+')"/>
<input type="button" value="-" onclick="jisuan('-')"/>
<input type="button" value="*" onclick="jisuan('*')"/>
<input type="button" value="/" onclick="jisuan('/')"/>
</td>
</tr>
<tr>
<td>结果</td>
<td>
<input type="text" name="res" id="res"/>
</td>
</tr>
</table>
</body>
</html>
案例3:猜数字
a.生成一个随机数1-100并不显示出来
b.让用户在文本框中输入他猜的数字
c.点击猜一猜按钮的时候,比较用户输入的值和随机数,是大是小,进行提示
// 扩展:只能猜5次
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
//生成一个1-100的随机数
// var r = Math.random()
var r = 79;
//定义函数实现输入数据和随机数的比较
function bijiao(){
// 获取文本框中的数据
var txt = document.getElementById("num");
var v = Number(txt.value);
//做比较
if(v>r){
//alert("猜大了")
var mydiv = document.getElementById("tip");
// innerHTML:设置成对标签的内部内容
mydiv.innerHTML = "猜大了";
}else if(v<r){
alert("猜小了")
}else{
alert("猜对了");
}
}
</script>
</head>
<body>
输入一个数据:
<input type="text" id="num"/>
<input type="button" value="猜一猜" onclick="bijiao()"/>
<hr/>
<div id="tip">
这里显示提示信息
</div>
</body>
</html>
3.代码的调试
1 观察法调试:根据异常提示,找到错误位置,通过观察找到出错代码
2 逐步输出信息调试法:如果代码没有出错,但是结果不符合预期,可以按照代码流程逐步打印输出信息跟踪代码执行过程
3 断点调试法:使用浏览器自带的调试工具进行调试
4.网页中的常用事件
4.1 事件
事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。
发生的某件事情。通过html元素触发的事情。
4.2 常用事件
1.鼠标事件
事件 | |
* onclick | 点击事件 |
ondblclick | 双击事件 |
onmousedown | 鼠标按下 |
onmouseup | 鼠标松开 |
onmouseover | 鼠标移入 |
onmouseout | 鼠标移出 |
2.键盘事件
onkeydown | 按下 |
onkeyup | 松开 |
onkeypress | 按下并松开 |
3.浏览器事件
*onload | 页面加载完成时触发 |
*onunload | 页面退出时触发 |
4.表单事件
* onblur | 元素失去焦点时触发 | 2 |
* onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
* onfocus | 元素获取焦点时触发 | 2 |
元素获取用户输入时触发 | 3 | |
表单重置时触发 | 2 | |
用户向搜索域输入文本时触发 ( <input="search">) | ||
用户选取文本时触发 ( <input> 和 <textarea>) | 2 | |
* onsubmit | 表单提交时触发 |
自学案例:
图片切换:点击上一张,下一张,让图片切换
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var i = 0;
// 下一张图片
function nextImg(){
i++;
var str = "js"+i+".gif";
//alert(str);
var jiangshi = document.getElementById("jsImg");
jiangshi.src = "img/"+str;
//扩展:要求轮回显示,上一张,下一张显示完整
}
</script>
</head>
<body>
<input type="button" value="下一张" onclick="nextImg()"/>
<input type="button" value="上一张"/>
<hr/>
<img src = "img/js0.gif" id="jsImg"/>
</body>
</html>
总结
函数,事件,对象
总结:函数 学会函数的定义和调用
调用:直接,跟标签事件绑定
获取对象:document.getElementById();