网站页面类型网页设计建立站点实验报告

目录

一、JavaScript 概述

1.1 JavaScript 是什么

1.2 JavaScript 组成

二、变量与常量

2.1 变量本质

2.2 变量声明

2.3 变量赋值与更新

2.4 命名规范

2.5 常量声明

2.6 声明方式对比

三、数组基础

3.1 数组声明

3.2 数组取值

四、数据类型详解

4.1 数据类型分类

4.2 数字类型（Number）

4.3 字符串类型（String）

4.4 模板字符串

4.5 布尔类型（Boolean）

4.6 Undefined 类型

4.7 Null 类型

4.8 数据类型检测（typeof）

---

这篇文章主要是JavaScript是一种客户端编程语言，主要用于网页特效、表单验证、数据交互和服务端编程（Node.js）。它由ECMAScript（核心语法）和Web APIs（DOM/BOM）组成。变量本质是存储数据的容器，使用let声明，可重新赋值；常量用const声明，不可更改。数组是顺序存储的数据集合，下标从0开始。数据类型包括数字、字符串、布尔值、undefined和null等，其中模板字符串简化了变量拼接。undefined表示未赋值，null表示主动赋空值。JavaScript的弱类型特性使其灵活易用。

一、JavaScript 概述

1.1 JavaScript 是什么

定义：客户端编程语言

作用：

1.网页特效

2.表单验证

3.数据交互

4.服务端编程（Node.js）

运行环境：

1.浏览器环境（DOM/BOM/XHR）

2.Node.js 环境（fs/path/API）

1.2 JavaScript 组成

ECMAScript（核心语法）：

1.变量

2.分支语句

3.循环语句

3.对象等

Web APIs：

1.DOM（文档操作）

2.BOM（浏览器操作）

权威参考：

MDN JavaScript文档

---

二、变量与常量

2.1 变量本质

变量的本质：计算机存储数据的"容器"

重要理解：

变量不是数据本身，而是存储数据的容器（类似纸箱）,本质是内存中申请的小空间.

2.2 变量声明

基本语法：let 变量名

关键特性：

let 是声明关键字（允许/许可的含义）

注意事项：

禁止重复声明同一变量

let age = 18;
let age = 19; // 报错！禁止重复声明

2.3 变量赋值与更新

赋值语法：变量名 = 值

示例：

let age = 18;age = 19;  // 变量更新document.write(age); // 输出19

重要规则：

1.使用let声明后可直接更新值

2.未声明的变量禁止直接赋值

2.4 命名规范

强制规则：

1.禁用关键字（let, var, if, for等）

2.仅允许：字母/数字/_/$，禁止数字开头

3.严格区分大小写（Age ≠ age）

推荐规范：

1.语义化命名（如userName代替a）

2.小驼峰命名法（如：firstName）

2.5 常量声明

语法：const 常量名 = 值

核心特性：

1.声明时必须初始化（赋值）

2.禁止重新赋值

const G = 9.8;G = 10; // 报错！常量不可更改

使用场景：

1.永远不会改变的值（如数学常数、配置项）

2.最佳实践：不需要重新赋值的数据都用const

2.6 声明方式对比

方式	特点	使用场景
let	可重新赋值	需要变更的变量
const	赋值后不可更改	固定不变的常量
var	旧方式（存在变量提升）	不推荐使用

---

三、数组基础

3.1 数组声明

语法：let 数组名 = [数据1, 数据2, ..., 数据n]

示例：

let names = ['小明', '小刚', '小红'];

本质理解：

1.按顺序存储数据的集合

2.每个数据有自动编号（下标）

3.2 数组取值

语法：数组名[下标]

关键特性：

下标从0开始计数

返回原始数据类型（字符串/数字等）

示例：

let names = ['小明', '小刚', '小红'];console.log(names[0]); // 输出"小明"console.log(names[1]); // 输出"小刚"

注意事项：

1.访问不存在的下标返回undefined

2.下标必须是整数

四、数据类型详解

4.1 数据类型分类

基本数据类型：

number（数字型）

string（字符串型）

boolean（布尔型）

undefined（未定义型）

null（空类型）

引用数据类型：

object（对象）

4.2 数字类型（Number）

定义：

包含整数、小数、正负数

let age = 18;      // 整数let price = 88.99; // 小数

关键特性：

1.JavaScript是弱数据类型（类型由赋值决定）

2.对比：Java是强数据类型（如 int a = 3）

算术运算符：

运算符	功能	示例	开发应用场景
+	加法	5 + 2 = 7	数值计算
-	减法	9 - 3 = 6	数值计算
*	乘法	3 * 4 = 12	数值计算
/	除法	10 / 2 = 5	数值计算
%	取模（取余）	10 % 3 = 1	判断数字是否被整除

4.3 字符串类型（String）

定义：引号包裹的文本

单引号：'小明'

双引号："男"

反引号：`商品`

重要注意事项：

引号必须成对使用

错误示例：let str = '文本;（缺少结束引号）

嵌套规则：

1.允许：外双内单 "It's OK" 或 外单内双 'He said "Yes"'

2.禁止：外单内单 'Don't do this'（需转义：'Don\'t do this')

转义符使用：

console.log('I\'m learning'); // 输出：I'm learning

特殊形式：

1.空字符串：let str = ''

2.数字字符串：let tel = '13681113456'（引号包裹的数字是字符串）

4.4 模板字符串

解决痛点：传统拼接繁琐

// 传统方式'我叫' + name + '，今年' + age + '岁'

语法：

`大家好，我叫${name}，今年${age}岁`

核心特性：

1.必须使用反引号（Tab键上方）

2.变量嵌入：${变量名}

3.支持换行（普通字符串不支持）

4.5 布尔类型（Boolean）

值：true（真/肯定）、false（假/否定）

应用场景：

let isAvailable = true;  // 商品是否可用let hasPermission = false; // 用户是否有权限

4.6 Undefined 类型

唯一值：undefined

产生条件：

let age; // 声明但未赋值console.log(age); // undefined

开发场景：

检测数据是否传递

if (userData === undefined) {alert('数据未接收到！');}

4.7 Null 类型

本质：表示"无"、"空"或"值未知"的特殊值

let obj = null; // 初始化为空

与 Undefined 的区别：

特性	undefined	null
含义	未赋值（默认状态）	已赋值，但值为空
场景	系统自动分配	开发者主动设置
示例	let a;（自动undefined）	let b = null;（手动置空）

核心开发场景：

"将来有个变量存放对象，但对象还没创建好，先给null"

// 等待从服务器获取的用户数据let userData = null;// 数据返回后更新userData = { name: '小明', age: 20 };

4.8 数据类型检测（typeof）

核心作用：运行时确定变量类型

两种等效语法：

typeof x       // 运算符形式（推荐）typeof(x)      // 函数形式

返回值映射表：

值/表达式	typeof 返回值	说明
18	"number"	数字类型
'hello'	"string"	字符串类型
true	"boolean"	布尔类型
undefined	"undefined"	未定义类型
null	"object"	历史遗留问题（需注意）
[1,2,3]	"object"	数组本质是特殊对象
{name:'Tom'}	"object"	普通对象
function(){}	"function"	函数类型

特殊注意：

1.null 返回 "object" 是JavaScript设计初期的错误（但已无法修正）

2.数组和普通对象无法通过typeof区分（需用Array.isArray()）