JavaScript学习手册（五）

最新推荐文章于 2024-10-11 17:39:47 发布

XDINJN

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量319

点赞数

分类专栏：前端 JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_44934847/article/details/129398646

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的基本概念，如函数的定义、调用及返回值，强调了函数的复用性和参数的作用。此外，还讨论了JavaScript对象，包括属性、方法和this关键字的用法。最后，文章提到了HTML事件和JavaScript如何响应这些事件，以及如何添加事件处理程序。

摘要由CSDN通过智能技术生成

JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：（参数1，参数2，…）
由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

**函数参数（Function parameters）**是在函数定义中所列的名称。
函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

函数调用

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

函数返回

当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

函数的优点

复用：只要定义一次代码，就可以多次使用它。
分用：多次向同一函数传递不同的参数，以产生不同的结果。

() 运算符调用函数

toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

function toCelsius(f) {
    return (5/9) * (f-32);
}
//获取函数值
toCelsius(55);//12.777777777777779
//或者函数
toCelsius;//function toCelsius(f) { return (5/9) * (f-32); }

局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

JavaScript 对象

对象的概念

对象也是变量。但是对象包含很多值。
值以名称:值对的方式来书写（名称和值由冒号分隔）。
JavaScript 对象是被命名值的容器。

把多个值（porsche, 911, white）赋给名为 car 的变量：

var car = {type:"porsche", model:"911", color:"white"};

对象的属性

成员变量即为属性
成员变量的值称为属性值

对象方法（函数）

对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法也是对象的属性

样例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

this 关键词

在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。

访问对象属性

两种方式访问

.（对象名.属性）
[]（对象名[属性]）

访问对象方法

对象名.方法名
如果您不使用 () 访问 fullName 方法，则将返回函数定义：
方法实际上是以属性值的形式存储的函数定义。

set和get

在不使用set和get时访问对象的方法 fullName：person.fullName()
在使用set和get后即可用属性的方式：fullName：person.fullName。

使用set和get的优点

它提供了更简洁的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
有利于后台工作

构造器

对象默认有一个构造器（空构造器）
如果设置了构造器，就可以选择是否使用构造器
输入构造器中参数，默认顺序排列，没有参数就undefined

事件

概述

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

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

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

实例

//点击事件
<button onclick="displayDate()">试一试</button>
//页面加载事件
<body onload="checkCookies()">
//内容改变且失去焦点事件（回车或失去焦点）
<input type="text" id="fname" onchange="upperCase()">
//鼠标按下或鼠标弹起
<div onmousedown="mDown(this)" onmouseup="mUp(this)">