第12章：Javascript的函数和事件

本章目标

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

课程回顾

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

讲解内容

1. 函数概念

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

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

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

2. 声明式函数

无参函数
1. 语法：
  1
  2
  3
  function 函数名(){
  函数体;
  }
2. 函数的组成部分
  1. 声明函数关键字：function。
  2. 函数名，和变量命名规则一样。
  3. 参数列表，（）括号里面的变量，如果没有参数，括号为空，叫无参函数。
  4. 函数体：{}里面的代码块，则表示函数实现的具体功能。
3. 实例，通过函数方式实现输出hello Javascript~
  
  第一步：声明函数，实现具体功能
  1
  2
  3
  function showHello(){
  console.log("hello Javascript~");
  }
  第二步：函数调用
  1
  <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~");
    }
}

第二步：调用函数

1
2

<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;//返回结果
}

第二步：调用

1 2	var result=jia(10,20);//可获取结果，然后保存在变量中 console.log("结果："+result);

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

3. 匿名函数

语法：
1
2
3
var 变量名=function(参数1，参数2...){
函数体;
}
网上常见匿名写法
方式一：事件名=function(){…}
方式二： (function (){ JavaScript代码;}())
直接运行函数
window.onload=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.onkeydown=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 时，隐藏其他输入框和单选框。