第12章：Javascript的函数和事件
本章目标
- 函数的概念
- 掌握常用的系统函数
- 掌握类型转换
- 掌握Javascript的常用事件
课程回顾
- Javascript中的循环有那些？
- Javascript中的各个循环特点是什么？
- Javascript中的各个循环语法分别是什么？
讲解内容
1. 函数概念
-
为什么要使用函数
- 思考：我们写了一段代码，实现了一个功能，如果其他地方还是要实现这个功能，我们怎么办？
- 以前的思路：
- 重新写一段重复的代码，实现同一个功能，代码冗余。
- 重复代码太多，可阅读性太差。
- 如果功能要修改，每段重复代码都要修改，维护性差。
- 用函数实现，可以解决以上问题
函数概念：
函数就是完成特定任务的代码语句块。
对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。
-
函数的分类
- 自定义函数
- 系统函数
2. 声明式函数
-
无参函数
-
语法：
function 函数名(){ 函数体; } -
函数的组成部分
- 声明函数关键字：function。
- 函数名，和变量命名规则一样。
- 参数列表，（）括号里面的变量，如果没有参数，括号为空，叫无参函数。
- 函数体：{}里面的代码块，则表示函数实现的具体功能。
-
实例，通过函数方式实现输出hello Javascript~
第一步：声明函数，实现具体功能
function showHello(){ console.log("hello Javascript~"); }第二步：函数调用
<input type="button" value="调用函数" onclick="showHello()"/>代码说明：onclick为点击事件，当点击按钮时则会调用showHello()函数。
注意：
函数必须要调用才能被执行，通常情况是在事件中调用。
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
-
-
有参数的函数
-
语法：
//函数声明 function 函数名(参数1,参数2，… ) { JavaScript代码; } //函数调用 函数名(参数1值,参数2值,....); -
参数说明：
-
形参：声明函数时的参数为形参，类似于变量名，没有具体的值，只是一个参数变量，此变量只能在函数中使用。
function 函数名(参数1,参数2，… ) -
实参：调用函数时传入的值为实参，则为要传入到声明函数的具体值，按顺序赋值，必须注意顺序。
函数名(参数1值,参数2值,....);
-
-
案例：通过函数方式实现输出N次“hello javascript~”
第一步：编写函数
function showHello(count){ //count为形参 for(var i=0;i<count;i++){ console.log("hello javascript~"); } }第二步：调用函数
<input type="button" value="调用函数" onclick="showHello(5)"/> //5为传入的具体值，则为实参 <input type="button" value="调用函数2" onclick="showHello(prompt('请输入显示HelloWorld的次数：',''))"/> -
案例2，带多个参数，通过函数传入输入内容和次数，实现打印功能
第一步：编写函数
/* context:要输出的内容 count:要输出的次数 */ function showText(context,count){ for(var i =0; i<count; i++){//根据count来决定输出次数 console.log(context);//传入的内容是什么则输出什么 } }第二步：调用函数
//直接调用 showText("你好，张三！",10);//将会输出10次“你好，张三！” //事件调用 <input type="button" value="调用参数函数" onclick="showText('你好，张三~',10)" /> //注意事件用双引号，调用函数时的字符串必须用单引号
-
-
带返回值的函数
-
语法
//函数声明 function 函数名(参数1,参数2，… ) { JavaScript代码; return 返回值;//将函数里面的值返回 } //函数调用 var 变量=函数名(参数1值,参数2值,....);//可以接收函数返回的值关键字：return
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者：
-
案例：传入二个数字实现加法运算，将结果返回
第一步：定义带返回类型的函数
function jia(num1,num2){//定义带二个参数的函数 var result=num1+num2;//实现加法运算，将结果保存在变量中 return result;//返回结果 }第二步：调用
var result=jia(10,20);//可获取结果，然后保存在变量中 console.log("结果："+result);
-
-
函数特点：
- 函数就是对一段代码的封装，在我们想调用的时候调用
- 函数的几个优点
- 封装代码，使代码更加简洁
- 复用，在重复功能的时候直接调用就好
- 代码执行时机，随时可以在我们想要执行的时候执行
**现场作业：**用函数方式实现以下功能，简单计算器，实现加减乘除功能。
3. 匿名函数
-
语法：
var 变量名=function(参数1，参数2...){ 函数体; }网上常见匿名写法
方式一：事件名=function(){…}
方式二： (function (){ JavaScript代码;}())
直接运行函数
window.οnlοad=function(){…} -
案例：通过匿名方法实现加法功能
var jia=function(num1,num2){ return num1+num2; } //调用 ： var result=jia(10,20); 或 <input type="button" value="调用匿名方法" onclick="jia(10,20)"/> -
声明式函数和匿名函数的区别：
-
声明式函数： 调用可以在 定义之前或者定义之后
// 可以调用 fn() // 声明式函数 function fn() { console.log('我是 fn 函数') } // 可以调用 fn函数 fn() -
赋值式函数：只能在定义之后
// 会报错 fn() // 赋值式函数 var fn = function() { console.log('我是 fn 函数') } // 可以调用 fn()
-
4. 系统函数
-
什么是系统函数
- 则为系统已经定义好完成一个具体功能的函数，用户直接调用则可
-
常用的系统函数
parseInt (“字符串”)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86”转换为整型值86
parseFloat(“字符串”)
将字符串转换为浮点型数字
如: parseFloat(“34.45”)将字符串“34.45”转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1(){
alert("这是提示信息");
}
function fun2(){
var name=prompt("请输入姓名：");
alert("姓名："+name);
}
function fun3(){
var r=confirm("你确定要删除吗?");
if(r)alert("删除成功");
}
function fun4(){
open("http://www.baidu.com");
}
function fun5(){
close();
}
function fun6(){
var num=prompt("请输入一个数字：");
if(isNaN(num)){
alert("你输入的不是数字！");
}else{
alert("你输入的是数字！");
}
}
function fun7(){
var num1=parseInt(prompt("请输入一个数字："));
var num2=parseInt(prompt("请输入二个数字："));
var result=num1+num2;
alert("两数之和为:"+result);
}
</script>
</head>
<body>
<button onclick="fun1()">警告框</button>
<button onclick="fun2()">输入框</button>
<button onclick="fun3()">确认框</button>
<button onclick="fun4()">打开百度</button>
<button onclick="fun5()">关闭当前</button>
<button onclick="fun6()">验证数字</button>
<button onclick="fun7()">类型转换</button>
</body>
</html>
5. Javascript事件
-
Javascript中的事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
-
HTML中的事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
-
HTML中事件语法
<body onload="加载事件()"> <input type="button" value="点击我吧" onclick="函数()" /> </body> -
常用的事件
-
Javascript事件可以做什么呢？
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 …
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 …
6. 常用事件
鼠标事件
课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">单击事件</button>
<textarea id="txt1" rows="10" cols="50">test</textarea>
<input type="text" id="txt2" />
<script>
//单击事件
document.getElementById("btn1").onclick=function(){
alert("被单击了");
}
//快捷 菜单事件(鼠标右键)
document.oncontextmenu=function(){
alert("在文档中按了鼠标右键");
}
//双击事件
txt1.ondblclick=function(){
alert("双击了文本框");
}
//鼠标移入事件
txt1.onmouseover=function(){
txt1.value+="鼠标移入";
}
//鼠标移出事件
txt1.onmouseout=function(){
txt1.value+="鼠标移出";
}
txt2.onmousedown=function(){
txt2.value+="鼠标按下";
}
txt2.onmouseup=function(){
txt2.value+="鼠标释放";
}
</script>
</body>
</html>
键盘事件
事件参数：
| 属性 | 描述 |
|---|---|
| key | 按键值 |
| keyCode | 按键哈希值 |
| ctrlKey | 是否是ctrl键 |
| altKey | 是否是alt键 |
| shiftKey | 是否是shift键 |
课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
position: absolute;
}
</style>
</head>
<body>
<textarea id="txt1" rows="10" cols="50" ></textarea>
<script>
// txt1.οnkeydοwn=function(e){
// txt1.value+=e.keyCode;
// }
var x=0;
var y=0;
document.onkeydown=function(e){
var txt=document.getElementById("txt1");
//初始化
x=txt.offsetLeft;
y=txt.offsetTop;
if(e.ctrlKey){
alert("按了ctrl键");
}else if(e.altKey){
alert("按了alt键");
}else if(e.shiftKey){
alert("按了shift键");
}else if(e.keyCode==37){
x-=50;
}else if(e.keyCode==38){
y-=50;
}else if(e.keyCode==39){
x+=50;
}else if(e.keyCode==40){
y+=50;
}
txt.style.left=x+"px";
txt.style.top=y+"px";
}
//产生内容时
document.onkeypress=function(e){
//按键哈希码
//txt1.value+=e.keyCode;
//按键值
txt1.value+=e.key;
}
</script>
</body>
</html>
对象事件
课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面、窗口事件</title>
<script>
function fun1(){
console.log("页面加载完成");
}
function fun2(){
console.log("页面卸载完成");
}
function fun3(){
console.log("用户访问页面");
}
function fun4(){
console.log("用户离开页面");
}
function fun5(){
console.log("调整了窗口的大小");
}
function fun6(){
console.log("用户滚动了页面");
}
</script>
</head>
<body onload="fun1()" onunload="fun2()" onpageshow="fun3()" onpagehide="fun4()" onresize="fun5()" onscroll="fun6()">
<h1>今天有方式电风扇暴雨</h1>
<hr/>
<div style="height: 900px;"></div>
</body>
</html>
表单事件
课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单事件</title>
<style>
#ms1{
display: none;
}
</style>
<script>
function fun1(isView){
//获取到目标元素
var target=document.getElementById("ms1");
//判断
if(isView)
target.style.display="inline"; //显示
else
target.style.display="none"; //隐藏
}
function fun2(obj){
//alert(obj.value);
document.getElementById("msg").innerText=obj.value;
}
function fun3(obj){
var index=obj.selectedIndex;
var opt=obj.options[index];
//document.getElementById("msg").innerText=opt.text;
document.getElementById("msg").innerText=opt.value;
}
function fun4(obj){
document.getElementById("msg").innerText=obj.value;
}
function fun5(){
console.log("用户重置了表单");
}
function fun6(){
console.log("用户提交了表单");
}
function fun7(){
var content=window.getSelection();
alert("选中了文本："+content);
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get" onreset="fun5()" onsubmit="fun6()">
<p>用户名：<input type="text" onchange="fun2(this)" onselect="fun7()" /></p>
<p>密码：<input type="password" onfocus="fun1(true)" onblur="fun1(false)" />
<span id="ms1">密码有6-10位数字、字母组成</span>
</p>
<p>年龄：<input type="text" oninput="fun4(this)" /></p>
<p>城市：
<select onchange="fun3(this)">
<option value="sz">深圳</option>
<option value="dg">东莞</option>
<option value="gz">广州</option>
</select>
</p>
<p>
<input type="submit"/>
<input type="reset" />
</p>
</form>
<hr>
<div id="msg"></div>
</body>
</html>
课后作业
作业1：定义一个盒子（div）通过wasd键让他左右上下移动；（用css定位来控制它的移动效果）
给div加上一个css样式“position: absolute;”
作业2：当我们按下a键，文本框里面就显示手机；当释放该键，则文本框清空。
作业3：下拉菜单，鼠标经过的时候显示，鼠标离开就隐藏。
作业4：在目标元素上按下鼠标按键则背景颜色变红，当释放则变黄。
作业5：鼠标移出文本框时文本框显示123456，最后双击按钮显示两个输入框，随便输入两个数值最后相加起来和是多。
作业6：实现从第一个框复制，到第二个框粘贴，Ctrl+A:复制，Ctrl+B粘贴。
作业7.有一个文本框，需要输入年龄，在失去焦点时判断气质是否符合要求，如果不符合要求则给出相应提示，如果符合要求则提示提交成功。（条件为：必须是数字，且为1-100）
作业8.有一个文本框，需要输入姓名，要求在其获得焦点时设置其样式:
A.虚线边框
B.红色背景颜色
作业9.有一个登录表单页面，要求实现登录判断：
如果用户名为admin,且密码为gckj123456,则提示登录成功，且跳转到目标页面
如果错误，则给出相应提示。
作业10.有一个文本框，要求编程实现复制、粘贴所选中的内容。(Ctrl+A:复制,Ctrl+B:粘贴)；
作业11.获得焦点，如果是默认文字，就清空表单内容 并且字体为黑色 并且把类型换为文本框 this.type = ‘text’
失去焦点，如果为空，则表单改为默认字 ，并且字体为灰色 并且把类型换为密码框 this.type = ‘password’
作业12.登录系统，由一个文本框，两个密码框和登录按钮组成，用户输入，账号，密码，确认密码，两个密码必须相同，才可以登录，否则登录按钮处于禁用状态。
作业13.创建一个页面包含一个文本框、跟一个按钮，和一个显示结果的div.
默认情况下，在文本框输入内容时，字体颜色为黑色
当单击以一下旁边的按钮后，则在文本框输入内容时，字体颜色为红色
当双击一下旁边的按钮后，则在文本框输入内容时，字体为黄色.
无论是单击还是双击，如果文本框中有内容，则将其写入到下方的div中。
作业14.有一个表单，包含一个输入框和一个按钮。用户输入一个数字，点击按钮后，如果该数字是偶数，则在页面上显示“偶数”，否则显示“奇数”。
作业15.实现一个选择菜单，包含三个选项 A、B 和 C。
当用户选择选项 A 时，显示一个输入框。
当用户选择选项 B 时，显示一个单选框，
当用户选择选项 C 时，隐藏其他输入框和单选框。
