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. iOS影视应用+全网视频下载

    又一个新的iOS影视伪装 打开软件连续点击3次列表,然后关闭重新打开即可变身,无广告全免费高画质,还有电视直播 下载地址:https://apps.apple.com/cn/app/贴画壁纸/id16 ...

  2. 【Java】idea同时运行多个一样的类

    点击"Edit Configurations..." 在左侧选中需要重复运行的类 单击"Modify options" 选择"Allow multip ...

  3. No value specified for parameter 5异常

    No value specified for parameter 5 翻译:没有为参数5指定值 在sql语句中,有5个" ? "号,但是赋值的时候只赋了前面4个" ?&q ...

  4. Qt Q_OBJECT编译问题

    编译问题 添加Q_OBJECT后需要qmake 多重继承 添加了Q_ENUM之类的宏,就需要Q_OBJECT 添加了Q_OBJECT,就需要类继承自QObject 如果有多重继承关系,QObject一 ...

  5. 域名+端口号 访问minio服务问题

    业务上需要用到分布式文件服务,选择了minio作为文件服务的组件,搭建好服务后使用IP+端口号(http://xx.xx.xx.xx:9001)的形式访问在所有环境下都没有问题. 上线部署时出于正规和 ...

  6. 高清地图转换(xord转apollo的bin文件)

    目标 将carla中的OpenDrive地图(carla\Unreal\CarlaUE4\Content\Carla\Maps\OpenDrive)转换为Apollo中可识别的地图格式(bin与txt ...

  7. C++ "链链"不忘@必有回响之单链表

    1. 前言 数组和链表是数据结构的基石,是逻辑上可描述.物理结构真实存在的具体数据结构.其它的数据结构往往在此基础上赋予不同的数据操作语义,如栈先进后出,队列先进先出-- 数组中的所有数据存储在一片连 ...

  8. 如何用AR Engine开发一个虚拟形象表情包？

    现如今,人们在网上聊天.发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在.加上近年来元宇宙的兴起,3D虚拟形象 ...

  9. JS 模块化 - 02 Common JS 模块化规范

    1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...

  10. 分布式文件存储 CephFS的应用场景

    块存储 (适合单客户端使用) 典型设备:磁盘阵列,硬盘. 使用场景: a. docker容器.虚拟机远程挂载磁盘存储分配. b. 日志存储. 文件存储 (适合多客户端有目录结构) 典型设备:FTP.N ...