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. kafka报错 日志压缩报错直接退出

    Resetting  first dirty ofset to log start  offset 2971862 since the checkpointed offset 12675089 is ...

  2. PHP实现获取本地视频进行随机播放

    创建一个文件夹,里面随便方视频文件即可 列如文件夹名字是assets代码如下 <? $handler = opendir('./assets/mp4/');//当前目录中的文件夹下的文件夹 需要 ...

  3. 【Java】学习路径30-可变参数 Variable Parameter

    定义一个add函数,要求其功能:传入任意数量的参数然后返回相加的结果. public class VariableParameter { public static void main(String[ ...

  4. KingbaseES 表空间加密-透明加密

    透明存储加密是指数据在写到磁盘上时对其进行加密,当授权用户重新读取数据时再对其进行解密.加密解密过程对用户都是透明的,无需对应用程序进行修改,授权用户甚至不会注意到数据已经在存储介质上加密.当前的透明 ...

  5. KingbaseES R3 集群主库归档失败案例

    案例说明: 本案例用于KingbaseES R3集群归档进程归档日志失败的处理,对于一线的生产环境具有 一定的参考意义. 数据库版本: TEST=# select version(); VERSION ...

  6. Spark 写 Hbase

    package com.grady import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.c ...

  7. vue简单的请求api并渲染到表格

    环境 vue3.11 组件库 https://element-plus.gitee.io/#/zh-CN 开始 初始化一个项目 App.vue <template> <div> ...

  8. LFS（Linux From Scratch）构建过程全记录（六）：交叉编译临时工具

    写在前面 本章将展示如何使用刚刚构建的跨工具链来交叉编译基本实用程序. M4安装 和前文一样,先进行解压,然后cd进入 注意:不需要构建build文件夹,直接输入以下配置文件 ./configure ...

  9. SpringBoot使用libreoffice转换PDF

    1.简介 有时候我们需要在程序中使用到office的转换和预览功能,本文就针对这个需求记录了较为简单的office转换和功能:jodconverter.当然也有aspose和其他开源第三方(kkfil ...

  10. 异步编程promise

    异步编程发展 异步编程经历了 callback.promise.async/await.generator四个阶段,其中promise和async/await使用最为频繁,而generator因为语法 ...