JavaScript前端开发案例教程第4章_函数_教学
JavaScript前端开发实用技术教程第4章
4.2 JavaScript内置对象
4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 JavaScript的内置对象框架 基类Object Date类 String类 Array类 Math对象
4.2.1 JavaScript的内置对象框架
JavaScript内置类的基本功能
本章知识点
4.1 面向对象程序设计思想简介 4.2 JavaScript内置对象 4.3 DOM编程 4.4 BOM编程
4.1 面向对象程序设计思想简介
面向对象程序设计的一些基本概念
（1）对象（Object）：面向对象程序设计思想可以将一组数据和与这组 数据有关操作组装在一起，形成一个实体，这个实体就是对象。 （2）类（class）：具有相同或相似性质的对象的抽象就是类。因此， 对象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则 一个具体的人就是一个对象。 （3）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。 （4）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其 他类定义的结构和行为。继承描述了类之间的关系。子类可以对基类的 行为进行扩展、覆盖、重定义。如果人类是一个类，则可以定义一个子 类“男人”。“男人”可以继承人类的属性（例如姓名、身高、年龄等 ）和方法（即动作。例如，吃饭和走路），在子类中就无需重复定义了 。从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同 子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性 ，而子女也具有自己的特性。 （5）方法：也称为成员函数，是指对象上的操作，作为类声明的一部分 来定义。方法定义了可以对一个对象可以执行的操作。
Date类的常用方法
方法 getDate getDay 具体描述 返回 Date 对象中用本地时间表示的一个月中的日期值(1 ~ 31) 返回 Date 对象中用本地时间表示的一周中的日期值(0 ~ 6)。0表示星期天， 1表示星期一，2表示星期二，3表示星期三，4表示星期四，5表示星期五，6 表示星期六 getFullYear 返回 Date 对象中用本地时间表示的4位数字年份值 getHour 返回 Date 对象中用本地时间表示的小时值(0 ~ 23) getMilliseco 返回 Date 对象中用本地时间表示的毫秒值(0 ~ 999) nds getMinutes 返回 Date 对象中用本地时间表示的分钟值(0 ~ 59) getMonth 返回 Date 对象中用本地时间表示的月份值(0 ~ 11) getSeconds 返回 Date 对象中用本地时间表示的秒钟值(0 ~ 59) getTime 返回 1970年1月1日至今的毫秒数 setDate 设置 Date 对象中月的某一天(1 ~ 31) setFullYear 设置 Date 对象中用本地时间表示的年份值 setHour 设置 Date 对象中用本地时间表示的小时值 setMilliseco 设置 Date 对象中用本地时间表示的毫秒值 nds setMinutes 设置 Date 对象中用本地时间表示的分钟值 setMonth 设置 Date 对象中用本地时间表示的月份值 setSeconds 设置 Date 对象中用本地时间表示的秒钟值 setTime 以毫秒（据GMT 时间1970 年1月1日午夜之间的毫秒数）设置 Date 对象 setYear 设置 Date 对象中的年份值 toString 返回对象的字符串表示
JavaScript+jQuery前端开发基础教程(第2版)(微课版)第4章
2．设置JavaScript对象属性注册事件处理程序
将函数设置为事件目标对象的事件属性值，也可完成事件处理程序的 注册。
3．使用addEventListener()方法注册事件处理程序
不管是通过设置属性，还是通过调用addEventListener()方法注册的事 件处理程序，在处理程序中调用preventDefault()方法均可阻止事件默认 动作。
在事件处理程序中，也可通过将event.returnValue属性设置为false来阻 止事件默认动作。
4.2.4 阻止事件传播
beforeunload和unload事件处理过程会屏蔽所有用户交互，window.open、alert、 confirm等都无效，不能阻止unload事件。一般在unload事件处理程序中执行一些必要 的清理操作，事实上只有极少的这种需求。
4.2.6 鼠标事件
鼠标事件对象除了拥有事件对象的主要属性外，还有下列常用属性。
stopPropagation()方法：调用该方法可阻止事件传播过程，事件传播路径中的后继节点不 会再接收到该事件。
3．事件处理程序的返回值
事件处理程序的返回值具有特殊意义。 通常，事件处理程序返回false时，会阻止浏览器执行这个 事件的默认动作。 例如，表单的submit事件处理程序返回false时，会阻止提 交表单；单击链接<a>时，会跳转到链接的URL，若在其 click事件处理程序中返回false，则会阻止跳转。
cancelable属性：逻辑值，表示是否能用preventDefault()方法取消对象的默认动作。
javascript函数的定义和调用
javascript函数的定义和调用JavaScript函数是JavaScript中最重要的概念之一，它是用于创建可重复使用的代码模块的一种形式。
它允许开发人员处理更复杂的算法，同时可以创建更简单、更容易维护的代码。
每个JavaScript 函数都有它自己的定义和调用程序。
定义函数在JavaScript中，函数都是通过关键字“function”定义的。
函数定义可以包括参数、返回值类型和函数体，就像下面这个示例一样：function functionName(parameter1, parameter2) {// Function Body}在上面的代码中，“functionName”是函数的名称，“parameter1”和“parameter2”是函数的参数，而“Function Body”是函数的体，它是函数的主体部分。
函数的参数可以是任何类型的值，可以是字符串、数字、对象等等。
另外，函数的返回值类型可以是任何类型的值，也可以是任何类型的对象。
调用函数在JavaScript中，函数可以通过函数名称和参数列表来调用。
函数调用的语法如下：functionName(parameter1, parameter2,…);上面的代码显示，函数调用使用函数名称和参数列表来调用函数。
在函数调用中，参数列表中的参数值将替换函数定义中的参数，函数将返回定义时指定的返回值。
例如，下面这个示例函数用于计算两个数字之和：function add(num1, num2) {return num1 + num2;}以上函数的调用可以像下面这样：let sum = add(2, 3);在上面的代码中，“add”函数使用“2”和“3”作为参数调用，它将返回5，并将结果保存在“sum”变量中。
JavaScript函数也可以用于定义和调用回调函数，这些回调函数可以在完成异步操作后执行某些操作。
例如，以下示例函数可以定义并调用一个异步函数，该函数将在完成操作后调用回调函数：function doAsyncOperation(callback) {// Perform the asynchronous operation.// Once the operation is complete, call the callback function.callback();}// Define a callback function.function myCallbackFunction() {console.log(The asynchronous operation has completed.);}// Invoke the doAsyncOperation function, passing it the callback function.doAsyncOperation(myCallbackFunction);在上面的代码中，“doAsyncOperation”函数定义了一个异步操作，并将一个回调函数作为参数传入。
JavaScript+jQuery前端开发基础教程教案
JavaScript+jQuery前端开发基础教程教案第一章：JavaScript概述1.1 课程介绍本章节将介绍JavaScript的发展历程、特点以及应用场景。
使学生了解JavaScript的历史背景和基本概念，为后续学习打下基础。
1.2 教学目标了解JavaScript的历史和发展掌握JavaScript的基本特点掌握JavaScript的应用场景1.3 教学内容1.3.1 JavaScript的历史和发展1.3.2 JavaScript的基本特点1.3.3 JavaScript的应用场景1.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
1.5 课后作业简述JavaScript的历史和发展。
列举出JavaScript的三个基本特点。
说出JavaScript的应用场景。
第二章：HTML与CSS基础2.1 课程介绍本章节将介绍HTML和CSS的基本概念，以及如何使用它们来创建网页。
学生将学会如何编写HTML代码和应用CSS样式。
2.2 教学目标掌握HTML的基本结构了解CSS的作用和基本语法学会使用CSS样式化网页2.3 教学内容2.3.1 HTML基本结构2.3.2 CSS的基本语法和作用2.3.3 使用CSS样式化网页2.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
2.5 课后作业编写一个简单的HTML页面，包括、段落和图片。
尝试使用CSS样式化你的HTML页面，使其看起来更美观。
第三章：JavaScript基本语法和操作3.1 课程介绍本章节将介绍JavaScript的基本语法和基本操作，如变量、数据类型、运算符、控制语句等。
学生将学会如何编写简单的JavaScript代码。
3.2 教学目标掌握JavaScript的基本语法学会使用JavaScript进行基本操作3.3 教学内容3.3.1 JavaScript的基本语法3.3.2 变量和数据类型3.3.3 运算符和控制语句3.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
JavaScript前端开发案例教程第4章_函数_教学
})(2, 3);
① 函数表达式中省略函数名
var fn = function (num1, num2) { return num1 + num2;
}; fn(1, 2);
③ 处理事件
document.body.onclick = function () { alert('Hi, everybody!');
✎ 4.2 变量的作用域
多 学 一 招 垃圾回收机制
在开发中若要保留局部变量的值，可以通过以下两种方式实现：
// 第1种方式：利用return返回 function test(num) {
num = num + 1; return num; } var num = test(24); console.log(num);//输出结果：25
函数体…… }
✎ 4.1 函数的定义与调用
1. 初识函数
➢ function：定义函数的关键字。 ➢ 函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能
以数字开头，且不能是JavaScript中的关键字。 ➢ 参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。 ➢ 函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。 ➢ 返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回。
// 第2种方式：利用全局变量保存 var memory; function test(num) {
memory = num + 1; } test(24); console.log(memory);// 输出结果：25
JavaScript前端开发案例教程函数教学
✎ 4.1 函数的定义与调用
4. 【案例】字符串大小写转换
代码实现思路： ① 编写HTML表单，设置两个文本框和两个按钮，
文本框显示转换前后数据，按钮用于转换。 ② 为按钮添加点击事件，并利用函数deal()处理。 ③ 编写deal()函数，根据传递的不同参数执行不同
的转换操作。 ④ 将转换后的数据显示到对应位置。
function greet(name, say = 'Hi, I\'m ') {
默
console.log(say + name);
认
值
}
函数的形参在设置时，还可以为其指定默认值。当调用者未传递该参数时，函数 将使用默认值进行操作。
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
示 例
return a >= b ? a : b;
}
✎ 4.1 函数的定义与调用
2. 参数设置
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。 实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。 其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
}
无确定的形参
✎ 4.1 函数的定义与调用
3. 函数的调用
当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。 函数的调用非常简单，只需引用函数名，并传入相应的参数即可。 函数声明与调用的编写顺序不分前后。
函数名称([参数1, 参数2, ……])
JavaScript前端开发基础教程课件第4章
浏览器对象模型（BOM）
navigator对象 navigator对象代表了用户的浏览器，其中包含了浏览器的名称、版本、用户、 插件等信息。对于navigator对象的使用一般只是用其属性，因为navigator没 有常用的方法。
浏览器对象模型（BOM）
网页弹窗 我们平时浏览网页中，经常会遇到网页中的弹窗，其中有些时警告，有些时 询问是否确认某项提交功能，有些则还包含了输入框。这些网页的弹窗都是由 window对象的方法产生的，网页的弹窗对象一共包括三种： 警告弹窗：使用window.alert("警告内容")调用，一般用于警告用户的某些操 作，弹窗中只有一个确认按钮，单击后弹窗消失 确认弹窗：使用window.confirm("确认内容")调用，一般用于在用户提交某 项操作时提醒其是否确认提交 提示弹窗：使用window.prompt("提示内容"[, "输入框占位值"])调用，一般 在需要用户输入内容时使用，输入框占位符参数可以省略
表单
表单样例 样例介绍
媒体
HTML音频 声音在HTML中可以以不同的方式播放。 1. 使用 <embed> 元素 2. 使用 <object> 元素 3. 使用 HTML5 <audio> 元素
媒体
HTML视频 1. 使用 <embed> 标签 2. 使用 <object> 标签 3. 使用 HTML5 <video> 元素 4. 最好的 HTML 视频解决方法 5. 视频网站解决方案 6. 使用超链接
浏览器对象模型（BOM）
BOM的全称是Browser Object Model（浏览器对象模型），既然叫做浏览器 对象模型，那顾名思义是一种能够对浏览器内容进行访问和操作的工具。不同 于DOM的是，BOM至今还没有一个正式的标准。使用BOM接口可以使HTML 页面实现与浏览器之间的交互，同样地用户也可以通过HTML页面实现与浏览 器之间的交互。
Javascript-4-函数-上
1：函数的概念和作用定义：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
作用：可以使一段代码块重复的使用。
2：函数的编写function funcName(){}3：函数调用调用方式：1：手动调用。
即：函数名称()。
2：事件驱动。
4：事件的概念种类及作用1：什么是事件？通过鼠标或者键盘在浏览器窗口或者网页元素(按钮、文本框)上执行的操作，我们称之为事件(Event)。
2：什么是事件驱动？由事件引发的一连串程序的动作，称为事件驱动(Event-Driver)。
举个例子：人被挨打后或者听到葡萄后做出的反应。
事件类型：鼠标事件，键盘事件，网络事件等。
常用事件：onclick，ondblclick，onmouseover，onmouseout，onkeydown，okeyup。
5：事件和循环结合打印九九乘法表。
6：函数的好处7：参数的声明定义：在调用函数的时候，我们可以向其传递值，这些值被称为参数。
多个参数用逗号(,)分割。
8：参数的传递应用：1：编写一个函数，计算两个数字的和、差、积、商。
要求：使用传参的形式。
2：编写一个函数，计算三个数字的大小，按从小到大顺序输出。
1：函数创建方式1：函数声明式。
2：函数表达式（函数字面量）。
3：函数构造法。
注：函数表达式也可以指定函数名称，而函数声明是不可以省略函数名称。
直接用函数表达式指定的函数名称调用函数会报错。
2：声明式和表达式的区别1：JS解析器如何区分是函数声明还是函数表达式？如果一条语句是以function关键字开始，那么这段会被判定为函数声明。
而函数声明是不能被立即执行的，这无疑会导致语法的错误(SyntaxError)，因此就必须有一个办法，使解析器可以将之识别为函数表达式。
既然解析器识别函数定义的条件是以function关键字开始，那么只需要在function关键字前面有任何其他的运算符，就会从函数的定义转变为函数表达式。
2：如何将函数声明式转换成函数表达式？~function(){}();+function(){}();-function(){}();void function(){}();(function(){})();前几个转换方式开起来比较丑，通常都用最后一种来转换。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
函数定义时，还可用“…变量名”的方式动态接收用户传递的不确定数量的实参。
function transferParam(num1, ...theNums) {
theNums.unshift(num1); console.log(theNums);
一个确定形参
}
function transferParam(...theNums) { console.log(theNums);
✎ 4.1 函数的定义与调用
4. 【案例】字符串大小写转换
代码实现思路： ① 编写HTML表单，设置两个文本框和两个按钮，
文本框显示转换前后数据，按钮用于转换。 ② 为按钮添加点击事件，并利用函数deal()处理。 ③ 编写deal()函数，根据传递的不同参数执行不同
的转换操作。 ④ 将转换后的数据显示到对应位置。
✎ 4.1 函数的定义与调用
1. 初识函数
函数：用于封装一段完成特定功能的代码。 相当于将一条或多条语句组成的代码块包裹起来，用户在使用时只需关心参数和 返回值，就能完成特定的功能，而不用了解具体的实现。
✎ 4.1 函数的定义与调用
1. 初识函数
console.log(parseFloat('7.26e-2')); console.log(isNaN(' ')); console.log(parseInt('15.99'));
function transferParam() {
console.log(arguments.length);
示 例
console.log(arguments);
}
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
函数参数的设置，在ES6中提供了更灵活的使用方式，如设置形参的默认值等。
✎ 4.1 函数的定义与调用
1. 初识函数
除了使用内置函数外，JavaScript中还可以根据具体情况自定义函数，提高代码的 复用性、降低程序维护的难度。
函数的定义由以下4部分组成： ➢ 关键字function。 ➢ 函数名。 ➢ 参数。 ➢ 函数体。
function 函数名([参数1, 参数2, ……]) {
function greet(name, say = 'Hi, I\'m ') {
默
console.log(say + name);
认
值ห้องสมุดไป่ตู้
}
函数的形参在设置时，还可以为其指定默认值。当调用者未传递该参数时，函数 将使用默认值进行操作。
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
第4章 函数
• 函数的使用
JS
• 匿名函数
• 变量的作用域 • 闭包函数
✎
学习目标
1 掌握函数的使用方法
2
掌握变量的作用域
掌握匿名函数与闭
包函数 3
✎
目录
函数的定义与调用
☞点击查看本小节知识架构
变量的作用域
匿名函数
☞点击查看本小节知识架构
嵌套与递归
☞点击查看本小节知识架构
✎
目录
闭包函数
☞点击查看本小节知识架构
观察“内置函数”的使用
// 返回解析后的浮点数：0.0726 // 判断是否是NaN：false // 返回解析后的整数值：15
➢ parseFloat()用于返回解析字符串后的浮点数。 ➢ isNaN()判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。 ➢ parseInt()用于返回解析字符串后的整数值。
}
无确定的形参
✎ 4.1 函数的定义与调用
3. 函数的调用
当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。 函数的调用非常简单，只需引用函数名，并传入相应的参数即可。 函数声明与调用的编写顺序不分前后。
函数名称([参数1, 参数2, ……])
[参数1，参数2…]是可选的，用于表示形参列表，其值可以是零个、一个或多个。
✎ 4.2 变量的作用域
思考：声明变量后就可以在任意位置使用该变量嘛？
回答：不是。
举例：函数内var关键字声明的变量，不能在函数外访问。
function info() {
示例
var age = 18;
}
// 输出结果：Uncaught ReferenceError: age is not defined
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
示 例
return a >= b ? a : b;
}
✎ 4.1 函数的定义与调用
2. 参数设置
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。 实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。 其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
函数体…… }
✎ 4.1 函数的定义与调用
1. 初识函数
➢ function：定义函数的关键字。 ➢ 函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能
以数字开头，且不能是JavaScript中的关键字。 ➢ 参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。 ➢ 函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。 ➢ 返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回。
在自定义函数时，即使函数的 功能实现不需要设置参数，小 括号“()”也不能够省略。
function greet() { console.log('Hello everybody!');
}
✎ 4.1 函数的定义与调用
2. 参数设置
有参函数：适用于开发时函数体内的操作需要用户传递数据的情况。 形参：指的就是形式参数，具有特定的含义，在定义有参函数时设置的参数。 实参：指的是实际参数，也就是具体的值，在函数调用时传递的参数。
✎ 4.1 函数的定义与调用
1. 初识函数
注意
函数的名称最好不要使用JavaScript中的保留字，避免在将来被用作关键字 导致出错。
✎ 4.1 函数的定义与调用
2. 参数设置
函数可以根据参数的设置分为以下两种：
无参函数
有参函数
✎ 4.1 函数的定义与调用
2. 参数设置
无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。