JavaScript 基础 - 技术栈

[一、JavaScript 简介](#一、JavaScript 简介)

[1. JavaScript 基本概念](#1. JavaScript 基本概念)

[2. 第一个 JavaScript 程序](#2. 第一个 JavaScript 程序)

[二、JavaScript 基本语法](#二、JavaScript 基本语法)

[1. 常量](#1. 常量)

[2. 变量](#2. 变量)

[3. 表达式](#3. 表达式)

[4. 运算符](#4. 运算符)

[5. 条件语句](#5. 条件语句)

[6. 循环语句](#6. 循环语句)

[7. break语句](#7. break语句)

[8. continue语句](#8. continue语句)

[9. 函数](#9. 函数)

[三、JavaScript 的事件](#三、JavaScript 的事件)

四、浏览器的内部对象

[1. windows 对象](#1. windows 对象)

[2. document 对象](#2. document 对象)

[3. navigator 对象](#3. navigator 对象)

[4. location 对象](#4. location 对象)

[5. history 对象](#5. history 对象)

一、JavaScript 简介

1. JavaScript 基本概念

JavaScript是一种轻量级、解释型的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。作为Web开发的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。

JavaScript的跨平台和高适应性的特点，使得JavaScript成为全球最受欢迎和广泛使用的脚本语言之一。

2. 第一个 JavaScript 程序
javascript 复制代码
<body>
	<script language="javascript">
		document.write("<h1>Hello,JavaScript!</h1>");
	</script>
</body>

二、JavaScript 基本语法

1. 常量

(1) 定义：

常量是使用const关键字声明的标识符，其值在声明后不可重新赋值，即：常量的值是不能改变的。

(2) 常量的类型：

整型：整型常量可以使用十六进制、八进制和十进制表示其值。

实型：实型常量是由整数部分加小数部分表示。

布尔值：布尔常量只有两种状态：true或false。

字符型：使用单引号(')或双引号(")括起来的一个或几个字符。

空值：空值null，表示什么也没有。

特殊字符：以反斜杠(/)开头的不可显示的特殊字符。

(3) 声明方式‌：

通过const关键字定义常量，且常量必须在声明时赋值，否则会报错。‌

例：
javascript 复制代码
const PI = 3.14;
(4) 命名规范：

常量通常采用全大写字母，多个单词间用下划线"_"分隔。

例如：QUARTER_01（第一季度），以增强代码的可读性。‌

2. 变量

(1) 定义：

变量是JavaScript编程语言中用于存储数据值的容器，可保存数值、文本或表达式，通过命名标识实现数据引用。

变量采用动态类型机制，运行时允许灵活操作数据，支持数值、字符串、布尔值等多种数据类型。其生命周期受作用域约束，现代代码推荐使用let声明以避免变量提升问题。

JavaScript变量机制随ECMAScript标准发展逐步演进。早期版本仅支持var声明方式，后续标准引入let以优化作用域管理，提升代码可维护性。

(2) 声明方式：

先声明再赋值：
javascript 复制代码
var name1;
name1 = 100;
声明并赋值：
javascript 复制代码
var name1 = 100;
var name2 = "北京";
var name3 = true;
var name4 = null;
(3) 变量名命名规范：

变量名称需遵循大小写敏感规则，首字符须为字母或下划线，支持使用 var 或 let 关键字声明。

变量名不能使用 JavaScript 中的关键字。

(4) 变量的作用范围：

全局变量：

全局变量义在所有函数体之外，其作用范围是整个函数。

局部变量：

局部变量定义在函数体之内，只对该函数是可见的，而对其他函数则是不可见的。

3. 表达式

(1) 定义：

表达式是由值、变量、运算符等组成的代码片段，它会计算出一个结果。表达式是JavaScript 程序的基本构建块，可以出现在任何需要值的地方。

(2) 表达式可以分为：

算术表达式：

算术表达式用于数学计算，支持加（+）、减（-）、乘（*）、除（/）和

取余（%）等运算。

关系表达式：

关系表达式用于比较值，返回布尔结果。比较运算符包括相等（）、全等（=）、

不相等（!=）、不全等（!）、大于（>）、小于（<）等。

对象运算符：

对象运算符用于操作对象和数组，包括in（检查属性是否存在）、instanceof（判

断对象类型）、new（创建新对象）、delete（删除属性）、点号（.）和方括号（[]）

（访问属性）、圆括号（()）（函数调用）等。

逻辑表达式：

逻辑表达式用于组合条件判断，支持非（!）、与（&&）、或（||）运算。

赋值表达式：

赋值表达式通过赋值运算符（=）将值赋给变量。

其他表达式：

JavaScript 还支持三目运算符（条件 ? 表达式1 : 表达式2），用于简洁的条件

赋值。

4. 运算符

(1) 定义：

运算符是用于完成操作的一系列符号。

(2) 运算法类型：

算术运算符

算术运算符描述

+ 加

- 减

* 乘

/ 除

% 取模

++ 递加1

-- 递减1

比较运算符

比较运算符描述

< 小于

> 大于

<= 小于等于

>= 大于等于

== 松散相等

=== 严格相等

!= 不等于

逻辑运算符

逻辑运算符描述

&& 与

|| 或

! 非

赋值运算符

赋值运算符描述

= 赋值运算符

+= 等价于 x = x + y

-= 等价于 x = x - y

*= 等价于 x = x * y

/= 等价于 x = x / y

其他运算符

① 位运算符

位运算符描述

& 按位与

| 按位或

② 三目运算符

三目运算符描述

条件 ? 表达式1 : 表达式2 条件为true，结果为表达式1；条件为false，结果为表达式2

5. 条件语句

(1) if...else 语句：

语法：
javascript 复制代码
if(条件1){
	语句 1
}else if(条件2){
	语句 2
}else{
	语句 3
}
说明：当条件1的值为 true，执行语句1；当条件2的值为 true，执行语句2；否则执行语句3。

(2) switch语句：

程序执行时，由第分支开始查找，如果相匹配，执行其后的块，接着执行第2分支、第3分支......如果不匹配，则查找下一个分支是否匹配。

语法：
javascript 复制代码
switch(变量){
case 条件1
	语句1;
	break;
case 条件2
	语句2;
	break;
default
	语句N;
}
说明：如果没有 break，一旦一个 case 被匹配并且执行了相应的代码，接下来的所有 case 都会继续执行，直到遇到一个 break 或 switch 语句结束。

(3) 三目运算符：

语法：
javascript 复制代码
条件 ? 表达式1 : 表达式2
说明：三目运算符减少了代码行数，提高代码精简度。三目运算就是简洁版的 if...else语句。

6. 循环语句

(1) while 循环：

语法：
javascript 复制代码
while(条件){
	语句;
}
(2) do...while 循环：

语法：
javascript 复制代码
do {
    语句;
} while (条件);
(3) for 循环：

语法：
javascript 复制代码
for(初始化;条件;增量){
	语句;
}
(4) for...in 循环：

语法：
javascript 复制代码
for (键 in 对象) {
    // 循环体
}
说明：for...in 循环可以遍历对象的属性，可以遍历可枚举属性，适合用于对象操作。

(5) for of 循环：

语法：
javascript 复制代码
for (值 of 可迭代对象) {
    // 循环体
}
说明：for...of 循环可以遍历可迭代属性，遍历值而非索引，通常适用于数组、字符串、Map、Set。

7. break语句

(1) break 语句用于终止当前循环，或跳出 switch 语句。

(2) 语法：
javascript 复制代码
break;
8. continue语句

(1) continue 语句用于跳过当前迭代继续下一次循环。

(2) 语法：
javascript 复制代码
continue;
9. 函数

(1) JavaScript 函数是 JavaScript 中通过 function 关键字定义的可重复执行代码块，支持通过事件触发或显式调用执行，能够避免页面载入时立即运行代码。

(2) 函数定义形式：

函数声明

语法：
javascript 复制代码
function 函数名称(参数){
	函数体;
}
函数表达式

语法：
javascript 复制代码
var x = function(参数){
	函数体;
}
箭头函数

语法：
javascript 复制代码
(参数)=>{函数体;}

算术运算符	描述
+	加
-	减
*	乘
/	除
%	取模
++	递加1
--	递减1

比较运算符	描述
<	小于
>	大于
<=	小于等于
>=	大于等于
==	松散相等
===	严格相等
!=	不等于

逻辑运算符	描述
&&	与
\|\|	或
!	非

赋值运算符	描述
=	赋值运算符
+=	等价于 x = x + y
-=	等价于 x = x - y
*=	等价于 x = x * y
/=	等价于 x = x / y

位运算符	描述
&	按位与
\|	按位或

三目运算符	描述
条件 ? 表达式1 : 表达式2	条件为true，结果为表达式1；条件为false，结果为表达式2

三、JavaScript 的事件

通常鼠标或键盘的动作称之为事件，由鼠标或键盘引发的一连串程序的动作，称之为事件驱动。而对事件进行处理的程序或函数，则称之为事件处理程序。

1. onClick 事件

鼠标单击事件是最常用的事件之一，当用户单击鼠标时，产生 onClick 事件，同时onClick 指定的事件处理程序或代码将被调用执行。

2. onchange 事件

它是一个与表单相关的事件，当利用 text 或 textarea 元素输入的字符值改变时发生该事件缚，同时当在 select 表格中的一个选项状态改变后也会引发该事件。

3. onSelect 事件

onSelect 事件是当文本框中的内容被选中时所发生的事件。

4. onFocus 事件

当单击表单对象时，即将光标放在文本框或选择框上时产生 onFocus 事件。

5. onLoad 事件

当加载网页文档时，会产生该事件。onLoad 事件的作用是在首次载入一个页面文件时检测 cookie 的值，并用一个变量为其赋值，使其可以被源代码使用。

6. onUnload 事件

当退出网页时引发 onUnload 事件，并可更新cookie 的状态。

7. onBlur 事件

失去焦点事件正好与获得焦点事件相对，当 text 对象、textarea 对象或 select 对象不再拥有焦点而退到后台时，引发该事件。

8. onMouseOver 事件

onMouseOver 是当鼠标指针移动到某对象范围的上方时触发的事件。

9. onMouseOut 事件

onMouseOut 是当鼠标指针离开某对象范围时触发的事件。

10. onDblClick 事件

onDblClick 是鼠标双击时触发的事件。

四、浏览器的内部对象

在 JavaScript 中，浏览器对象模型（BOM）提供了与浏览器窗口进行交互的功能。这些对象允许开发者控制浏览器窗口，例如打开新窗口、移动窗口、调整大小、甚至是关闭窗口。

浏览器的内部对象主要包括：windows 对象、document 对象、navigator 对象、location 对象、history 对象。

1. windows 对象

这是最主要的对象，它代表了浏览器窗口本身。通过 window 对象，你可以访问和操作浏览器的窗口。

(1) windows 对象常用的属性：

属性描述

document 代表整个HTML文档。

location 包含当前页面的URL信息。

navigator 提供用户浏览器的信息。

history 包含用户（在浏览器窗口中）访问过的URL。

screen 提供关于用户屏幕的信息。

localStorage 用于长期存储数据，即使窗口或浏览器关闭了也是如此。

sessionStorage 用于临时存储数据，它在页面会话中有效。

(2) windows 对象常用的方法：

方法描述

alert(message) 显示带有一段消息和一个确认按钮的警告框。

confirm(question) 显示带有一段消息以及确认和取消按钮的对话框。

prompt(text, defaultText) 显示可提示用户输入的对话框。

setTimeout(function, milliseconds) 在指定的毫秒数后执行函数。

setInterval(function, milliseconds) 按照指定的周期（以毫秒计）来调用函数。

open(url,windowName,parameterlist) 创建一个新窗口，3个参数分别用于设置URL地址、窗口名称和窗口打开属性（一般可以包括宽度、高度、定位、工具栏等）

close() 关闭一个窗口

moveBy(水平位移，垂直位移) 将窗口移至指定的位移

moveTo(x,y) 将窗口移动到指定的坐标

resizeBy(水平位移，垂直位移) 按给定的位移量重新设置窗口大小

resizeTo(x,y) 将窗口设定为指定大小

back() 页面后退

forward() 页面前进

home() 返回主页

stop() 停止装载网页

print() 打印网页

status 状态栏信息

location 当前窗口 URL 信息

2. document 对象

document 对象代表了整个 HTML 文档。通过这个对象，你可以访问和操作页面上的HTML 元素。

(1) document 对象的3个最重要的对象为：
1) anchor 锚对象：

是指<a name=...></a>标记在 HTML 源代码中存在时产生的对象,它包含着文

档中所有的 anchor 信息。

2) links 链接对象：

是指用<a href=...></a>标记链接一个超文本或超媒体的元素作为一个特定

的 URL。

3) form 窗体对象：

是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在

JavaScript 脚本中编写程序，并可以用来动态改变文档的行为。

(2) document 对象的主要属性：

属性描述

documentElement 返回文档的根元素（通常是<html>）。

body 返回文档的<body>元素。

head 返回文档的<head>元素。

(3) document 对象的主要方法：

方法描述

getElementById(id) 通过元素的ID获取元素。

getElementsByTagName(name) 通过标签名获取元素集合。

createElement(tagName) 创建一个新的元素（标签）。

querySelector(selector) 返回文档中匹配指定CSS选择器的第一个元素。

querySelectorAll(selector) 返回文档中匹配指定CSS选择器的所有元素的一个NodeList对象。

3. navigator 对象

navigator 对象包含了有关浏览器的信息。

(1) navigator 对象的常用属性：

属性说明

userAgent 返回由客户端浏览器发送的服务器的用户代理头的字符串。

appName 浏览器的名称

appVersion 浏览器的版本号

platform 浏览器系统所使用的操作系统平台

language 返回浏览器界面语言的首选语言代码。

languages 返回一个包含用户首选语言（从高到低排序）的数组。

onLine‌ 返回一个布尔值，表示浏览器当前是否处于在线状态。

cookieEnabled‌ 返回一个布尔值，表示浏览器是否启用了cookie。

appCodeName 浏览器的代码名称

browserLanguage 浏览器所使用的语言

plugins 可以使用的插件信息

4. location 对象

location 对象包含了当前页面的URL信息，并且可以用来重新加载页面、改变URL等。location 对象是一个静态的对象。

(1) location 对象常用的属性：

属性描述

href 完整的URL。

hostname URL的主机名部分，例如"http://www.microsoft.com/china"地址的主机名为 www.microsoft.com

pathname URL的路径部分，如"http://www.abc.com/def/index.html"的路径为 def/index.html

search URL的查询字符串部分，返回"?"以及其后的内容。如果地址里没有"?"，则返回空字符串

hash URL的锚部分，返回"#"之后的部分。如地址为 c.html#capter4，则返回#chapter4;如果地址更没有"#"，则返回空字符串

protocol 返回地址的协议，取值为http:、https:、file:等

port 返回地址的端口号，一般http的端口号是80

host 返回主机名和端口号，如www.abc.com:8080

(2) location 对象常用的方法：

方法描述

assign(url) 加载新的文档。

reload() 重新加载当前文档。

replace(url) 用新的文档替换当前文档。

5. history 对象

history 对象包含了浏览器的历史记录信息。

(1) histony 对象常用的方法：

方法方法说明

back() 后退，加载历史列表中的前一个URL。

forward() 前进，加载历史列表中的下一个URL。

go(n) 加载历史列表中的某个具体页面，其中n是相对于当前加载页面的位置，比如go(-1)是后退一页，go(1)是前进一页。

属性	描述
document	代表整个HTML文档。
location	包含当前页面的URL信息。
navigator	提供用户浏览器的信息。
history	包含用户（在浏览器窗口中）访问过的URL。
screen	提供关于用户屏幕的信息。
localStorage	用于长期存储数据，即使窗口或浏览器关闭了也是如此。
sessionStorage	用于临时存储数据，它在页面会话中有效。

方法	描述
alert(message)	显示带有一段消息和一个确认按钮的警告框。
confirm(question)	显示带有一段消息以及确认和取消按钮的对话框。
prompt(text, defaultText)	显示可提示用户输入的对话框。
setTimeout(function, milliseconds)	在指定的毫秒数后执行函数。
setInterval(function, milliseconds)	按照指定的周期（以毫秒计）来调用函数。
open(url,windowName,parameterlist)	创建一个新窗口，3个参数分别用于设置URL地址、窗口名称和窗口打开属性（一般可以包括宽度、高度、定位、工具栏等）
close()	关闭一个窗口
moveBy(水平位移，垂直位移)	将窗口移至指定的位移
moveTo(x,y)	将窗口移动到指定的坐标
resizeBy(水平位移，垂直位移)	按给定的位移量重新设置窗口大小
resizeTo(x,y)	将窗口设定为指定大小
back()	页面后退
forward()	页面前进
home()	返回主页
stop()	停止装载网页
print()	打印网页
status	状态栏信息
location	当前窗口 URL 信息

属性	描述
documentElement	返回文档的根元素（通常是<html>）。
body	返回文档的<body>元素。
head	返回文档的<head>元素。

方法	描述
getElementById(id)	通过元素的ID获取元素。
getElementsByTagName(name)	通过标签名获取元素集合。
createElement(tagName)	创建一个新的元素（标签）。
querySelector(selector)	返回文档中匹配指定CSS选择器的第一个元素。
querySelectorAll(selector)	返回文档中匹配指定CSS选择器的所有元素的一个NodeList对象。

属性	说明
userAgent	返回由客户端浏览器发送的服务器的用户代理头的字符串。
appName	浏览器的名称
appVersion	浏览器的版本号
platform	浏览器系统所使用的操作系统平台
language	返回浏览器界面语言的首选语言代码。
languages	返回一个包含用户首选语言（从高到低排序）的数组。
onLine‌	返回一个布尔值，表示浏览器当前是否处于在线状态。
cookieEnabled‌	返回一个布尔值，表示浏览器是否启用了cookie。
appCodeName	浏览器的代码名称
browserLanguage	浏览器所使用的语言
plugins	可以使用的插件信息

属性	描述
href	完整的URL。
hostname	URL的主机名部分，例如"http://www.microsoft.com/china"地址的主机名为 www.microsoft.com
pathname	URL的路径部分，如"http://www.abc.com/def/index.html"的路径为 def/index.html
search	URL的查询字符串部分，返回"?"以及其后的内容。如果地址里没有"?"，则返回空字符串
hash	URL的锚部分，返回"#"之后的部分。如地址为 c.html#capter4，则返回#chapter4;如果地址更没有"#"，则返回空字符串
protocol	返回地址的协议，取值为http:、https:、file:等
port	返回地址的端口号，一般http的端口号是80
host	返回主机名和端口号，如www.abc.com:8080

方法	描述
assign(url)	加载新的文档。
reload()	重新加载当前文档。
replace(url)	用新的文档替换当前文档。

方法	方法说明
back()	后退，加载历史列表中的前一个URL。
forward()	前进，加载历史列表中的下一个URL。
go(n)	加载历史列表中的某个具体页面，其中n是相对于当前加载页面的位置，比如go(-1)是后退一页，go(1)是前进一页。