复习Javascript第二章(一)

简介: 复习Javascript第二章(一)

JavaScript 函数

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

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

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。

圆括号可包括由逗号分隔的参数:

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中:{}

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

函数参数(Function parameters)是在函数定义中所列的名称。

函数参数(Function arguments)是当调用函数时由函数接收的真实的值。

在函数中,参数是局部变量。

在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。

函数调用

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

  • 当事件发生时(当用户点击按钮时)
  • 当 JavaScript 代码调用时
  • 自动的(自调用)

函数返回

当 JavaScript 到达 return 语句,函数将停止执行。

如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者:

实例

计算两个数的乘积,并返回结果:

var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

为何使用函数?

您能够对代码进行复用:只要定义一次代码,就可以多次使用它。

您能够多次向同一函数传递不同的参数,以产生不同的结果。

实例

把华氏度转换为摄氏度:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

() 运算符调用函数

使用上面的例子,toCelsius 引用的是函数对象,而 toCelsius() 引用的是函数结果。

实例

访问没有 () 的函数将返回函数定义:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

用作变量值的函数

函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。

实例

使用变量来存储函数的值:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

您能够把函数当做变量值直接使用:

var text = "The temperature is " + toCelsius(77) + " Celsius";

局部变量

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

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

实例

// 此处的代码不能使用 carName
function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}
// 此处的代码不能使用 carName

由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建,在函数完成时被删除。

 

JavaScript 对象

真实生活中的对象、属性和方法

在真实生活中,汽车是一个对象

汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法

8530dac5fc5842d29678d8588535d0a5.png

所有汽车都拥有同样的属性,但属性值因车而异。

所有汽车都拥有相同的方法,但是方法会在不同时间被执行。

JavaScript 对象

您之前已经学到,JavaScript 变量是数据值的容器。

这段代码把一个单一值(porsche)赋给名为 car 的变量

var car = "porsche";

对象也是变量。但是对象包含很多值。

这段代码把多个值(porsche, 911, white)赋给名为 car 的变量

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

值以名称:值对的方式来书写(名称和值由冒号分隔)。

JavaScript 对象是被命名值的容器。

对象属性

(JavaScript 对象中的)名称:值对被称为属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

bd65d8bbefee4630b562cae6a2a2e9ae.png

对象方法

对象也可以有方法

方法是在对象上执行的动作

方法以函数定义被存储在属性中。


4e4bc84dbc6c4d149594228dfe3e1de0.png

方法是作为属性来存储的函数。

实例

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

this 关键词

在函数定义中,this 引用该函数的“拥有者”。

在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象

换言之,this.firstName 的意思是 this 对象

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

firstName 属性。

请在 JS this 关键词这一章学习更多有关 this 关键词的知识。

对象定义

我们定义(创建)了一个 JavaScript 对象:

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

空格和折行都是允许的。对象定义可横跨多行:

实例

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

JavaScript 事件

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

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

HTML 事件

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

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

HTML 网页完成加载

HTML 输入字段被修改

HTML 按钮被点击

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

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

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

使用单引号:

<element event='一些 JavaScript'>

使用双引号:

<element event="一些 JavaScript">

在下面的例子中,onclick 属性(以及代码)被添加到 <button> 元素:

实例

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>

在上面的例子中,JavaScript 代码改变了 id="demo" 的元素的内容。

在接下来的例子中,代码(使用 this.innerHTML)改变了其自身元素的内容:

实例

<button onclick="this.innerHTML=Date()">现在的时间是?</button>


相关文章
|
8月前
|
人工智能 智能设计 监控
2024《云计算&AI设计标准研讨会》全记录
2024《云计算&AI设计标准研讨会》全记录
|
人工智能 Kubernetes Cloud Native
阿里云微服务引擎负责人李艳林:云原生网关当道,会带来哪些改变
阿里云微服务引擎负责人李艳林:云原生网关当道,会带来哪些改变
7161 2
阿里云微服务引擎负责人李艳林:云原生网关当道,会带来哪些改变
|
容器
实时数仓Hologres构建环境问题之Dockerfile描述如何解决
在制品构建时明确依赖版本可避免因版本变动引起的构建差异,确保一致性与可预测性。通过Dockerfile指定确切版本的依赖与环境,能够跨平台重现相同的构建环境。为保证构建脚本一致性,应采用与业务代码解耦的构建脚本,并严格控制环境变量。构建准确性和速度都很重要,但通常准确性优先,确保制品质量稳定可靠。
145 0
|
安全 搜索推荐 物联网
物联网设备的OTA基本原理
物联网设备的OTA基本原理
683 1
|
jenkins Java 持续交付
Docker搭建持续集成平台Jenkins最简教程
Jenkins 是一个广泛使用的开源持续集成工具,它能够自动化构建、测试和部署软件项目。在本文中,我们将使用 Docker 搭建一个基于 Jenkins 的持续集成平台。
|
缓存 前端开发 JavaScript
探索现代化前端开发趋势
本文将深入探讨当下前端开发领域的最新趋势和技术,包括前端框架、CSS预处理器、性能优化等方面。通过了解这些趋势,开发者可以更好地适应行业变化,提升自己的技术水平。
|
容器
华为机试HJ10:字符个数统计
华为机试HJ10:字符个数统计
161 0
|
安全 网络安全 双11
【漏洞复现-jupyter_notebook-命令执行】vulfocus/jupyter_notebook-cve_2019_9644
【漏洞复现-jupyter_notebook-命令执行】vulfocus/jupyter_notebook-cve_2019_9644
604 0
【漏洞复现-jupyter_notebook-命令执行】vulfocus/jupyter_notebook-cve_2019_9644
Python中的异常——概述和基本语法
Python中的异常——概述和基本语法
|
搜索推荐 数据挖掘
数据分析场景
数据分析场景