Javascript 基础知识学习

news2024/12/22 19:11:59

Javascript 基础知识学习

参考自:https://www.w3cschool.cn/javascript/

javascript 简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript 知识图谱

JavaScript 数组

在这里插入图片描述

Javascript 基本操作

在这里插入图片描述

JavaScript 变量

在这里插入图片描述

JavaScript 函数基础

在这里插入图片描述

JavaScript 运算符

在这里插入图片描述

JavaScript 流程语句

在这里插入图片描述

JavaScript 数据类型

在这里插入图片描述

JavaScript 正则表达式

在这里插入图片描述

JavaScript 字符串函数

在这里插入图片描述

Window 对象

在这里插入图片描述

JavaScript 用法

HTML 中的脚本必须位于 <script></script> 标签之间。

脚本可被放置在 HTML 页面的 <body><head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

<script></script> 之间的代码行包含了 JavaScript:

<script>
    alert("我的第一个 JavaScript");
</script>
// 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

<!DOCTYPE html>
<html>
<body>
		<script>
		document.write("<h1>这是一个标题</h1>");
		document.write("<p>这是一个段落</p>");
		</script>
</body>
</html>

<head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body><head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 “src” 属性中设置该 .js 文件:

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
</body>
</html>

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下:

function myFunction() {
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; 
}
// 外部脚本不能包含 <script> 标签。

JavaScript 浏览器中执行

https://www.w3cschool.cn/javascript/javascript-5oi33l66.html

JavaScript 输出

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

严格来说,JavaScript 没有任何打印或者输出的函数,以上几种方式都只不过是一种数据展示的方法,最接近输出的方法应该是console,但这种方法只是一种调试辅助工具。

使用 window.alert()

你可以弹出警告框来显示数据:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(*id*) 方法。

请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

<!DOCTYPE html>
<html>
	<body>
		<h1>我的第一个 Web 页面</h1>
		<p id="demo">我的第一个段落</p>
		<script>
			document.getElementById("demo").innerHTML = "段落已修改。";
		</script>
	</body>
</html>

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。

innerHTML = “Paragraph changed.” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。

出于测试目的,您可以将JavaScript直接写在HTML 文档中:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 “Console” 菜单。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
alert(c)
</script>
	
</body>
</html>

console.log() 方法能够让你看到你在页面中的输出内容,让你更容易调试javascript;与alert相比,console不会打断你页面的操作,console里面的内容非常丰富,你可以在控制台输入 console。程序中调试是测试,查找及减少bug(错误)的过程。

JavaScript 语法

JavaScript 字面量

在编程语言中,一个字面量是一个常量,如 3.14。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

3.14
1001
123e5

字符串(String)字面量 可以使用单引号或双引号 :

"John Doe"
'John Doe'

表达式字面量 用于计算:

5 + 6
5 * 10

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { 
	return a * b;
}

JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length
x = 5
length = 6

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。变量是一个名称。字面量是一个

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值:

x = 5
y = 6
z = (x + y) * 10

JavaScript语言有多种类型的运算符:

Type实例描述
赋值,算术和位运算符= + - * /在 JS 运算符中描述
条件,比较及逻辑运算符== != < >在 JS 比较运算符中描述

JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。浏览器通过 JavaScript 语句明白要执行什么操作。

语句是用分号分隔:

x = 5 + 6;
y = x * 10;

JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:

var x = 5 + 6;
var y = x * 10;

JavaScript 标识符

和其他任何编程语言一样,JavaScript 保留了一些标识符为自己所用。

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

JavaScript 标识符必须以字母、下划线(_)或美元符($)开始。

后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开标识符和数字)。

以下是 JavaScript 中最重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

// 我不会执行

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                  // Number 通过数字字面量赋值
var points = x * 10;               // Number 通过表达式字面量赋值
var lastName = "Johnson";             // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];       // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值

数据类型的概念

编程语言中,数据类型是一个非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,以下实例将无法执行:

16 + "Volvo"
// 16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢?
"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。

JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
  return a * b;                // 返回 a 乘于 b 的结果
}

JavaScript 对大小写敏感

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

**提示:**在本站的编程实战中,你可以通过练习理解JavaScript变量的大小写敏感性。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

如需进一步了解,请学习我们的 完整 Unicode 参考手册。

JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。

JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “Hello Dolly” :

document.getElementById("demo").innerHTML = "你好 Dolly.";

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

例如:

a = 5;
b = 6;
c = a + b;

下面这种写法同上:

a = 5; b = 6; c = a + b;

您也可能看到不带有分号的案例。 在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落:

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始,以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落:

function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

您将在稍后的章节学到更多有关函数的知识。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句描述
break用于跳出循环。
catch语句块,在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do … while执行一个语句块,在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时,可以将代码块执行指定的次数。
for … in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function定义一个函数
if … else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出(生成)错误 。
try实现错误处理,与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时,执行语句块。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var person="Hege";
var person = "Hege";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行,是指一行代码过长不利于阅读。下面的例子会正确地显示:

document.write("你好 \ W3Cschool!");

不过,您不能像这样折行:

document.write \ ("你好W3Cschool!");

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

JavaScript 单行注释

单行注释以 // 开头。

本例用单行注释来解释代码:

// 输出标题:
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落:
document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 多行注释

多行注释以 /* 开始,以 */ 结尾。

下面的例子使用多行注释来解释代码:

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 变量

变量是用于存储信息的"容器"。

var x=5;
var y=6;
var z=x+y;

就像代数那样

x=5
y=6
z=x+y

在代数中,我们使用字母(比如 x)来保存值(比如 5)。

通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。

在 JavaScript 中,这些字母被称为变量。可以把变量看做存储数据的容器。

JavaScript 变量设置规则

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name=“Bill Gates”)。

在 JavaScript 中,类似 “Bill Gates” 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 “Volvo”,然后把它放入 id=“demo” 的 HTML 段落中:

<p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;

**提示:**你可以通过本站的JavaScript编程实战部分来练习如何声明JavaScript变量。

一条语句,多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行:

var lastname="Doe",
age=30,
job="carpenter";

Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:

var carname="Volvo";
var carname;

JavaScript 算数

您可以通过 JavaScript 变量来做算数,使用的是 = 和 + 这类运算符:

y=5;
x=y+2;

JavaScript 数据类型

JavaScript有以下几种类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x;        // x 为 undefined
var x = 5;      // 现在 x 为数字
var x = "John";   // 现在 x 为字符串

JavaScript 字符串

字符串是存储字符(比如 “Bill Gates”)的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

var x1=34.00;   // 使用小数点来写
var x2=34;     // 不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

var y=123e5;   // 12300000
var z=123e-5;   // 0.00123

JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

 var x=true;
 var y=false;

布尔常用在条件测试中。

JavaScript 数组

下面的代码创建名为 cars 的数组:

 var cars=new Array();
 cars[0]="Saab";
 cars[1]="Volvo";
 cars[2]="BMW";

或者 (condensed array):

 var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

 var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

 var person={
 firstname : "John",
 lastname  : "Doe",
 id        :  5566
 };

对象属性有两种寻址方式:

name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:

 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

**提示:**JavaScript具有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。

JavaScript 函数

在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

 function functionname() {
执行代码
 }

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

**提示:**function 中的花括号是必需的,即使函数体内只包含一条语句,仍然必须使用花括号将其括起来。

调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号 (,) 分隔:

 myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

 function myFunction(var1,var2){
代码
 }

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

上面的函数在按钮被点击时会提示 “Welcome Harry Potter, the Wizard”。

函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>

根据您点击的不同的按钮,上面的例子会提示 “Welcome Harry Potter, the Wizard” 或 “Welcome Bob, the Builder”。

带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

 function myFunction(){
var x=5;
return x;
}

上面的函数会返回值 5。

注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

 var myVar=myFunction();

myVar 变量的值是 5,也就是函数 “myFunction()” 所返回的值。

即使不把它保存为变量,您也可以使用返回值:

document.getElementById("demo").innerHTML=myFunction();

“demo” 元素的 innerHTML 将成为 5,也就是函数 “myFunction()” 所返回的值。

您可以使返回值基于传递到函数中的参数:

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

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

“demo” 元素的 innerHTML 将是:

12

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

function myFunction(a,b){
    if (a>b){
        return;
    }
    x=a+b
}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。

全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

 carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

JavaScript 作用域

作用域是可访问变量的集合。

在JavaScript中,能够定义全局作用域或者局部作用域。

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明,变量为局部作用域。

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

// 此处不能调用 carName 变量

function myFunction() {
  var carName = "Volvo";

  // 函数内可调用 carName 变量

}

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

// 此处可调用 carName 变量

function myFunction() {
  carName = "Volvo";

  // 此处可调用 carName 变量

}

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

函数参数

函数参数只在函数内起作用,是局部变量。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName

function myFunction() {
  carName = "Volvo";
}

你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。 局部变量,包括 window 对象可以覆盖全局变量和函数。

在 ES6 中,提供了 let 关键字和 const 关键字。let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。使用 const 声明的是常量,其值一旦被设定便不可被更改。

<script>
        const man="ta"
        document.write(man)
        man="nihao"
        document.write(man)
</script>

结果如下:

ta

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

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

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:

 <some-HTML-element some-event='some JavaScript'>

双引号:

 <some-HTML-element some-event="some JavaScript">

在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

以上实例中,JavaScript 代码将修改 id=“demo” 元素的内容。

在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">The time is?</button>

JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:

<button onclick="displayDate()">The time is?</button>

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 …

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 …

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30870.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算流体力学的基本方法简介(有限差分法、有限元法、有限体积法)

1、有限差分法&#xff1a; 原理&#xff0c;用差商代替微商&#xff1b; 优缺点&#xff1a; 2、有限元方法&#xff1a; 有限元剖分方法&#xff1a; 特点&#xff1a; 3、有限体积法&#xff1a; 两种方式&#xff0c;格心格式和格点格式&#xff1a; 特点&#xff1a;

基于html的美食网站——速水果介绍8页(HTML+CSS+JavaScript) 带论文

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 家精彩专栏推荐 美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计与制作 | 美食主题网站 | HTML期末大学生网页设计作业 HTML&…

SpringCloud全系列知识(1)——初识微服务和注册中心

SpringCloud(微服务)相关笔记 一 基础框架图 1.微服务技术栈 2.技术栈分类 二 认识微服务 1.单体架构 将业务功能集中在一个项目中&#xff0c;打成一个包部署。 优点&#xff1a;架构简单&#xff0c;部署成本低。 缺点&#xff1a;耦合度高 2.分布式架构 根据业务功能…

最具影响力的15颗国外开放数据气象卫星介绍

1.热带降雨测量任务(TRMM) TRMM 是 NASA 和日本宇宙航空研究开发机构 (以前称日本国家空间发展署) 的合作项目&#xff0c;是 NASA 地球科学计划中的航天任务。日本提供运载火箭和测雨雷达&#xff0c;而由 NASA 提供卫星、4台仪器和卫星运行系统。 TRMM 卫星是三轴稳定的&…

深度强化学习中利用Q-Learngin和期望Sarsa算法确定机器人最优策略实战(超详细 附源码)

需要源码和环境搭建请点赞关注收藏后评论区留下QQ~~~ 一、Q-Learning算法 Q-Learning算法中动作值函数Q的更新方向是最优动作值函数q&#xff0c;而与Agent所遵循的行为策略无关&#xff0c;在评估动作值函数Q时&#xff0c;更新目标为最优动作值函数q的直接近似&#xff0c;故…

深入理解java虚拟机:虚拟机类加载机制(2)

文章目录3.类加载器3.1 类与类加载器3.2 双亲委派模型3.3 破坏双亲委派模型3.类加载器 虚拟机设计团队把类加载阶段中的通过一个类的全限定名来获取描述此类的二进制字节流这个动作放到Java虚拟机外部去实现&#xff0c;以便让应用程序自己决定如何去获取所需要的类。实现这个…

【密码学篇】数字签名基础知识(无保密性)

【密码学篇】数字签名基础知识&#xff08;无保密性&#xff09; 数字签名主要用于确认数据的完整性、签名者身份的真实性和签名行为的不可否认性等。—【蘇小沐】 文章目录【密码学篇】数字签名基础知识&#xff08;无保密性&#xff09;1.数字签名定义2.数字签名原理3.数字签…

Apache-DBUtils实现CRUD操作

Apache-DBUtils实现CRUD操作 每博一文案 有人说&#xff0c;不要轻易去伤害任何一个人&#xff0c;因为你会因此而受伤。欠的债&#xff0c;躲不掉&#xff0c;总是要还的。 要知道&#xff0c;哪些能被你欺骗的人&#xff0c;都是无条件相信你的人&#xff0c;因为心里有你&a…

【LeetCode-中等】240. 搜索二维矩阵 II(详解)

编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/…

ROS之话题通信自定义msg

文章目录背景自定义msg例子1.定义msg文件2.编辑配置文件3.编译话题通信自定义msg调用A(C)0.vscode 配置1.发布方2.订阅方3.配置 CMakeLists.txt4.执行背景 在 ROS 通信协议中&#xff0c;数据载体是一个较为重要组成部分&#xff0c;ROS 中通过 std_msgs 封装了一些原生的数据…

【软考软件评测师】第三十三章 数据库系统应用

【软考软件评测师】第三十三章 数据库系统应用 【软考软件评测师】第三十三章 数据库系统应用【软考软件评测师】第三十三章 数据库系统应用第一部分 知识点集锦1.关系数据库候选码2.自然连接3.元祖关系1&#xff09;1对多关系2&#xff09;多对多关系3&#xff09;复合属性4&a…

Centos8界面语言怎么设置? Centos用户界面语言的设置方法

Centos8怎么给用户设置界面语言&#xff1f;想要设置界面语言&#xff0c;该怎么设置呢&#xff1f;下面我们就来看看详细的教程。 1、Gnome桌面环境下&#xff0c;在桌面空白处右键选择【设置】。 2、在【设置】中点【详细信息】。 3、之后点【用户】。 4、首先单击选中要设置…

ADS原理图到Layout,Layout更新原理图

RF Design-22 目录方法1&#xff1a;自动生成Generate/update Layout将理想元件转换为带footprint的元件统一修改元件参数生成Layout添加传输线&#xff0c;T节由Layout更新原理图Ground pouring覆铜设置地过孔方法2&#xff1a;place components from schem to Layout将原理图…

一种无需调查船上坞的调查设备安装测量方法和安装测量系统

本文来自于博主发明专利的技术交底。 大型科考船船底安装大型的精密测量设备&#xff0c;对安装的测量精度要求比较高&#xff0c;通过上坞&#xff0c;采用传统的测量方式&#xff0c;先做控制网&#xff0c;然后进行碎步测量&#xff0c;得到测量设备及其室内附属设备与船舶的…

Spring Cloud Ribbon面试题大全

Spring Cloud Ribbon面试题大全 目录 文档索引 面试题汇总 Q&#xff1a;Ribbon的总体流程&#xff1f; Q&#xff1a;Ribbon如何选择调用哪个实例&#xff1f; Q&#xff1a;服务列表的获取过程&#xff1f; Q&#xff1a;Ribbon如何避免调用失效实例&#xff1f; Q&am…

JavaScript高级复习上(59th)

1、类 constructor 构造函数 constructor() 方法是类的构造函数&#xff08;默认方法&#xff09;&#xff0c;用于传递参数&#xff0c;返回实例对象&#xff0c;通过new命令生成对象实例时&#xff0c;自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constru…

【CPP】string 类的模拟实现

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;前言&…

Angular 学习 之 Hello World !

目录 0.前言・前提&#xff08;Angular介绍&#xff09; 前言 前提&#xff08;node.js已经按照&#xff09; 1.安装・查看版本 2.创建・启动Angular工程 2.1.创建工程 2.2.启动工程 2.3.启动之后&#xff0c;浏览器访问&#xff0c;显示的效果 2.4.工程目录结构 3.各…

计算机毕业设计——基于html汽车商城网站页面设计与实现论文源码ppt(35页) HTML+CSS+JavaScript

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

Flutter高仿微信-第29篇-单聊

Flutter高仿微信系列共59篇&#xff0c;从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图&#xff1a; 实现代码&#xff1a; 单聊包含&#xff1a;文本、表情、语音、图片、小视频、…