CH12_函数和事件

第12章：Javascript的函数和事件

本章目标

函数的概念
掌握常用的系统函数
掌握类型转换
掌握Javascript的常用事件

课程回顾

Javascript中的循环有那些？
Javascript中的各个循环特点是什么？
Javascript中的各个循环语法分别是什么？

讲解内容

1. 函数概念

为什么要使用函数
1. 思考：我们写了一段代码，实现了一个功能，如果其他地方还是要实现这个功能，我们怎么办？
2. 以前的思路：
  1. 重新写一段重复的代码，实现同一个功能，代码冗余。
  2. 重复代码太多，可阅读性太差。
  3. 如果功能要修改，每段重复代码都要修改，维护性差。
3. 用函数实现，可以解决以上问题
函数概念：

函数就是完成特定任务的代码语句块。

对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。
函数的分类
1. 自定义函数
2. 系统函数

2. 声明式函数

无参函数
1. 语法：
```
function 函数名(){函数体;
}
```
2. 函数的组成部分
  1. 声明函数关键字：function。
  2. 函数名，和变量命名规则一样。
  3. 参数列表，（）括号里面的变量，如果没有参数，括号为空，叫无参函数。
  4. 函数体：{}里面的代码块，则表示函数实现的具体功能。
3. 实例，通过函数方式实现输出hello Javascript~
  
  第一步：声明函数，实现具体功能
```
function showHello(){console.log("hello Javascript~");
}
```
  第二步：函数调用
```
<input type="button" value="调用函数" onclick="showHello()"/>
```
  代码说明：onclick为点击事件，当点击按钮时则会调用showHello()函数。
  
  注意：
  
  函数必须要调用才能被执行，通常情况是在事件中调用。
  
  函数中的代码将在其他代码调用该函数时执行：
  - 当事件发生时（当用户点击按钮时）
  - 当 JavaScript 代码调用时
  - 自动的（自调用）

有参数的函数

语法：

//函数声明
function 函数名(参数1,参数2，… ){ JavaScript代码; 
}
//函数调用
函数名(参数1值,参数2值,....);

参数说明：
1. 形参：声明函数时的参数为形参，类似于变量名，没有具体的值，只是一个参数变量，此变量只能在函数中使用。
  
  function 函数名(参数1,参数2，… )
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);

函数特点：
- 函数就是对一段代码的封装，在我们想调用的时候调用
- 函数的几个优点
1. 封装代码，使代码更加简洁
2. 复用，在重复功能的时候直接调用就好
3. 代码执行时机，随时可以在我们想要执行的时候执行
**现场作业：**用函数方式实现以下功能，简单计算器，实现加减乘除功能。

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. 系统函数

什么是系统函数
1. 则为系统已经定义好完成一个具体功能的函数，用户直接调用则可
常用的系统函数

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"; //显示elsetarget.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 时，隐藏其他输入框和单选框。