JavaScript02

8.JavaScript函数

  • JavaScript函数介绍

    函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数快速入门</title>

    <script type="text/javascript">

        //定义一个简单的函数

        //如果不调用函数，该函数不会执行

        //在js中如果要执行函数，有两种方式：1.主动调用 2.通过一个事件去触发该函数

        function hi() {

            alert("hi~~~");

        }

        //hi();主动调用

    </script>

</head>

<body>

<!--

        这里表示给按钮button绑定了一个onclick事件，

        当用户点击了该button，就会触发hi()函数

-->

<button onclick="hi()">点击这里</button>

</body>

</html>

8.1JS函数的定义方式

方式一：function关键字来定义函数

基本语法：

function 函数名(形参列表){

	函数体

	return 表达式

}

//调用 函数名(实参列表);

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数使用方式1</title>

    <script type="text/javascript">

        //1.定义没有返回值的函数

        function f1() {

            alert("f1被调用")

        }

        f1();//f1被调用

        //2.定义有形参的函数

        //这里的形参不需要指定类型,name的数据类型是由实参决定的

        function f2(name) {

            alert("hi" + name);

        }

        f2("你好吗？");//hi你好吗？

        f2(800);//hi800

        //3.定义有形参和返回值的函数,不需要指定返回的类型，返回类型由返回的数据来决定

        function f3(n1, n2) {

            return n1 + n2;

        }

        alert("f3(\"hi\",200)="+f3("hi",200));//f3("hi",200)=hi200

    </script>

</head>

<body>

</body>

</html>

方式二：将函数赋给变量

基本语法：

var 函数名=fuction(形参列表){

    函数体

    return 表达式

}

//调用 函数名(实参列表);

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用函数的第二种方式</title>

    <script type="text/javascript">

        //可以理解成f1指向了函数

        var f1 = function () {

            alert("老师你好");

        }

        console.log(typeof f1);//f1的数据类型是 function

        f1();//调用函数-老师你好

        var f3 = f1;//将f1指向的函数赋给其他变量

        f3();//老师你好

        var f2 = function (name) {

            alert("hi" + name);

        }

        f2("小红帽");//hi小红帽

        var f4 = function (n1, n2) {

            return n1 + n2;

        }

        alert(f4(100, 50));//150

    </script>

</head>

<body>

</body>

</html>

8.2JS函数注意事项和细节

  1. JS中函数的重载会覆盖掉上一次的定义
  2. 函数的arguments隐形参数(作用域在fuction函数内)，隐形参数是一个对象数组
    • 隐形参数：在function函数中不需要定义，可以直接用来获取所有参数的变量
    • 隐形参数特别像java的可变参数一样 public void fun(int ...args)，操作类似数组
    • 如果函数有形参，在传入实参的时候，仍然按照顺序匹配，如果实参个数大于形参个数，就将匹配上的数赋给形参，忽略没有匹配上的实参。但是仍然会把所有的实参都赋给arguments
    • 如果形参个数大于实参个数，没有匹配的形参的值就是undefined

例子1：JS中函数的重载会覆盖掉上一次的定义

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数使用的注意事项</title>

    <script type="text/javascript">

        //1.1js中函数的重载会覆盖掉上一次的定义

        function f1() {

            alert("ok f1")

        }

        function f1(name) {

            alert("hi " + name);

        }

        //1.2当调用方法f1()的时候，实际上调用的是f1(name)方法

        //调用f1(name)时，如果没有传入实参，那么这个形参name就是undefined

        f1();//hi undefined

    </script>

</head>

<body>

</body>

</html>

例子2：隐形参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>函数使用的注意事项</title>

    <script type="text/javascript">

        function f2() {//隐形参数是一个对象数组

            //遍历函数的arguments隐形参数

            //arguments是一个数组

            //注意：如果希望通过console.log输出对象的数据，使用逗号,来连接，而不是加号+

            console.log("arguments=", arguments);//arguments=Arguments { 0: 10, 1: 20, 2: "50", 3: "nihao", … }

            console.log("arguments长度=", arguments.length);//arguments长度= 4

        }

        f2(10, 20, "50", "nihao");

        //如果函数有形参，在传入实参的时候，仍然按照顺序匹配

        //如果实参个数>形参个数，就就将匹配上的数赋给形参，忽略没有匹配上的实参

        //但是仍然会把所有的实参都赋给arguments

        function f3(n) {

            console.log("n=", n)//n= 100

            console.log("arguments=", arguments)//arguments=Arguments { 0: 100, 1: 300, 2: 788, … }

        }

        f3(100, 300, 788);

        //如果形参个数大于实参个数，没有匹配的形参的值就是undefined

        function f4(a, b, c, d) {

            console.log("d=", d);//d= undefined

        }

        f4(100, 200, 300);

    </script>

</head>

<body>

</body>

</html>

  • 练习
  1. 要求：编写一个函数，用于计算所有参数相加的和并返回，如过实参不是number就过滤掉
  2. 提示使用typeof来判断参数类型
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        //编写一个函数，用于计算所有参数相加的和并返回，如过实参不是number就过滤掉

        function sum() {

            var res = 0;

            for (i = 0; i < arguments.length; i++) {

                if (typeof arguments[i] == "number") {//注意arguments数组放的是对象

                    res += arguments[i];

                }

            }

            alert("参数相加的和=" + res);

        }

        sum(100, "nihao", 500, null, 200, undefined);

    </script>

</head>

<body>

</body>

</html>

9.JS自定义对象

  • 自定义对象方式1：Object形式
  1. 对象的定义
var 对象名=new Object();//对象实例（空对象）

对象名.属性名=值;//定义一个属性

对象名.函数名=function(){}//定义一个函数
  1. 对象访问
对象名.属性

对象名.函数名();

如果一个属性没有定义赋值就直接使用，该属性值就是undefined（变量提升）

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义对象</title>

    <script type="text/javascript">

        //自定义对象的方式

        //person是一个空对象，没有自定义的函数和属性

        var person = new Object();

        console.log(typeof person);//object

        //增加一个属性name

        person.name = "老虎";

        person.age = 35;

        //增加一个方法

        person.say = function () {

            //这里的this就是当前的person

            console.log("person="+this.name+" "+this.age);

        }

        //调用

        person.say();//person=老虎 35

        //如果一个属性没有定义赋值就直接使用，该属性值就是undefined

        console.log(person.email);//undefined

    </script>

</head>

<body>

</body>

</html>

  • 自定义对象方式2：{}形式
  1. 对象的定义
var 对象名={////多个属性和方法之间都要用逗号隔开

    属性名:值,//定义属性

    属性名:值,//定义属性，注意后面有逗号,

    函数名:function(){}//定义函数

};
  1. 对象访问
对象名.属性

对象名.函数名();

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义对象方式2：{}形式</title>

    <script type="text/javascript">

        //演示自定义对象方式2：{}形式

        var person = {//多个属性和方法之间都要用逗号隔开

            name: "孙悟空",

            age: 999,

            hi: function () {

                console.log("person信息=" + this.name + " " + this.age);

            },

            sum: function () {}

        };

        //使用

        console.log("外部访问 name=" + person.name);

        console.log("外部访问 age=" + person.age);

        person.hi();

    </script>

</head>

<body>

</body>

</html>

10.事件

JavaScript 事件 (w3school.com.cn)

10.1事件介绍

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

10.2事件的分类

  1. 事件的注册（绑定）

    事件注册（绑定）：当事件响应（触发）后要浏览器执行哪些操作代码，叫事件注册或事件绑定

  2. 静态注册事件

    通过html标签的事件属性直接赋于事件响应后的代码，这种方式叫做静态注册

  3. 动态注册事件

    通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}，这种方式叫做动态注册

    js编程可以将浏览器整个页面的所有组件都映射成dom对象

  • 动态注册事件步骤
  1. 获取标签对象/dom对象
  2. dom对象.事件名=function(){}

10.3常用事件

10.3.1onload加载完成事件

onload：某个页面或图像被完成加载

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onload加载完成事件</title>

    <script type="text/javascript">

        //定义函数

        // function sayOK() {

        //     alert("静态注册 onload 事件sayOK");

        // }

        //1.在js中，将页面窗口映射成window dom对象

        //2.window对象有很多的属性和函数，可以使用

        //3.window.onload表示页面被加载完毕

        //4.后面的function(){}表示页面加载完毕后，要执行的函数/代码

        window.onload = function () {

            alert("动态注册 onload 事件");

        }

    </script>

</head>

<body>

hello~~~

<input type="text" value="测试"/>

</body>

</html>

10.3.2onclick点击事件

onclick：鼠标点击某个对象

动态注册 onclick 事件

  1. 先拿到id=btn01的button对应的dom对象
  2. 通过dom对象动态绑定onclick事件
  3. 通过document的getElementById方法来获取对应的dom对象

注意：要获取某个标签的dom对象，就应该先加载完毕该标签后再获取。

一般使用window.onload让整个页面加载完毕后再动态注册

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onclick 单击事件</title>

    <script type="text/javascript">

        function sayOK() {

            alert("你点击了sayOK按钮");

        }

        //当页面加载完毕之后，我们再进行动态注册

        window.onload = function () {//因此想要成功获取button的dom对象，就应该让button加载完毕再获取。

            //动态注册 onclick 事件

            //1.先拿到id=btn01的button对应的dom对象

            //2.通过dom对象动态绑定onclick事件

            //3.通过document的getElementById方法来获取对应的dom对象

            var btn01 = document.getElementById("btn01");

            btn01.onclick = function () {

                alert("你点击了sayHi按钮");

            }

        }

    </script>

</head>

<body>

<!--静态注册-->

<button onclick="sayOK()">sayOK按钮</button>

<!--动态注册-->

<button id="btn01">sayHi按钮</button>

</body>

</html>



10.3.3onblur失去焦点事件

onblur 事件会在对象失去焦点时发生。

onblur 经常用于Javascript验证代码，一般用于表单输入框。

例子

创建两个输入框，分别使用静态注册和动态注册的方法，将输入框中的小写英文变为大写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onblur 失去焦点事件</title>

    <script type="text/javascript">

        //静态绑定

        function upperCase() {

            //1.先得到fname输入框的value值-->得到对应的dom对象

            //因为静态绑定是通过html标签的事件属性直接赋于事件响应后的代码，

            // 本身就是默认的页面加载完毕再执行的

            var fname = document.getElementById("fname");

            fname.value = fname.value.toUpperCase();

        }

        //动态绑定

        //在页面加载完毕之后再进行动态绑定

        window.onload = function () {

            //1.得到fname2对应的dom对象

            var fname2 = document.getElementById("fname2");

            fname2.onblur = function () {

                fname2.value = fname2.value.toUpperCase();

            }

        }

    </script>

</head>

<body>

静态：输入英文单词

<input type="text" id="fname" onblur="upperCase()"/><br/><br/>

动态：输入英文单词

<input type="text" id="fname2"/>

</body>

</html>



10.3.4onchange内容发生改变事件

当元素的值发生改变时，会发生 onchange 事件。

day05-JavaScript02的更多相关文章

  1. My way to Python - Day05 - 面向对象-思维导图

    My way to Python - Day05 - 面向对象   思维导图

  2. day05 Servlet 开发和 ServletConfig 与 ServletContext 对象

    day05 Servlet 开发和 ServletConfig 与 ServletContext 对象 1. Servlet 开发入门 - hello world 2. Servlet 的调用过程和生 ...

  3. python day05笔记总结

    2019.4.2 S21 day05笔记总结 一.昨日内容回顾与补充 1.extend(列表独有功能) 循环添加到一个列表中 a.有列表users = ['张三',‘李四]   people = [' ...

  4. Python基础(协程函数、内置函数、递归、模块和包)-day05

    写在前面 上课第五天,打卡: 凭着爱,再回首: 一.协程函数(生成器:yield的表达式形式) 1.yield 的语句形式: yield 1 - 这种方式在 Python基础(函数部分)-day04  ...

  5. day05(Object,tostring(),equals(),System,Date,SimpleDateFormat,拆装箱，正则表达式)

    Object类, 是所应类的父类: 拥有自己的方法:常用的    红颜色标记的为常用的方法 toString() 用法:打印对象的地址值 getClass() 获取当前类的字节码文件getName() ...

  6. 超全面的JavaWeb笔记day05<xml&dtd&jaxp>

    0.表单提交方式(*****) button提交 超链接提交 事件 1.xml简介和应用(了解) 2.xml文档声明和乱码解决(*****) 文档声明 必须放在第一行第一列 设置xml编码和保存编码一 ...

  7. Day05 xml详解

    day05总结 今日内容 XML语法 XML约束之DTD XML解析器介绍 XML解析之JAXP( DOM.SAX ) DOM4J Schema   一.XML语法 XML概述   1 什么是XML ...

  8. day05 --class --home

    # -*- coding: utf-8 -*-# @Time : 2018/12/25 14:24# @Author : Endless-cloud# @Site : # @File : day05 ...

  9. python开发学习-day05(正则深入、冒泡排序算法、自定义模块、常用标准模块)

    s12-20160130-day05 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  10. 2017-2018-1 JAVA实验站 冲刺 day05

    2017-2018-1 JAVA实验站 冲刺 day05 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 进行工作总结 100% 齐力锋 找按钮音乐 100% 张浩林 写博客 100% ...

随机推荐

  1. java-前端之css

    css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...

  2. CLIP：多模态领域革命者

    CLIP:多模态领域革命者 当前的内容是梳理<Transformer视觉系列遨游>系列过程中引申出来的.目前最近在AI作画这个领域 Transformer 火的一塌糊涂,AI画画效果从18 ...

  3. FormData 和表单元素(form)的区别

    Form 元素 <form>元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息(文件.字符).下面称之为表单元素或表单. 要向 Web 服务器提交信息,我们必须要 ...

  4. C++ 文件hash值 BT种子的hash值

    这个两个东东,是我在网上找到的.小小的修改了一下方便大家使用. 一个是 获取文件哈希值的,另外一个是获取torrent文件磁力链接的哈希值. 整理好的类下载地址: 文件hash值: http://pa ...

  5. Springboot+MybatisPlus多数据源比对数据

    欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章https://www.javaman.cn/ 基于不同的数据源进行数据比对,比较两个数据库的表之间数据的总量,以及处理后的总量,按 ...

  6. SSH免密登录的配置

    ssh登录 登录ssh一般情况有两种方法 密码登录 秘钥登录(免密) 大部分情况我们选择都是输入密码登录,平常使用暂时没有遇到什么问题.最近我编写了一些使用scp来传输文件的脚本,每一次scp都需要输 ...

  7. Node.js躬行记（22）——Node环境升级日志

    公司之前所有的 Node 项目,其环境都是 8.9.4 版本,发布于 2018 年的一个比较古老的版本. 老版本有两个比较明显的问题: Node 高版本的特性和方法都无法使用. 有些第三方新版本的包无 ...

  8. BI系统的分布式部署原理和技术实现

    1.什么是分布式 关于"分布式系统"的定义,我们先看下书中是怎么说的.<分布式系统原理和范型>一书中是这样定义分布式系统的:"分布式系统是若干独立计算机的集合 ...

  9. KingbaseES V8R6集群维护之--修改数据库服务端口案例

    ​ 案例说明: 对于KingbaseES数据库单实例环境,只需要修改kingbase.conf文件的'port'参数即可,但是对于KingbaseES V8R6集群中涉及到多个配置文件的修改,并且在应 ...

  10. OpenHarmony3.0如何轻松连接华为云IoT设备接入平台？

    摘要:本文主要介绍基于OpenHarmony 3.0版本来对接华为云IoT设备接入IoTDA,以小熊派BearPi-HM_Nano开发板为例,使用huaweicloud_iot_link SDK对接华 ...