js

最新推荐文章于 2025-05-01 08:38:22 发布

过去，现在，未来，当下！

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量324

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xuwangHT/article/details/106401688

版权

这篇博客详细介绍了JavaScript的发展历程、语言特点和组成部分，包括JavaScript的脚本语言特性、基于对象的本质、动态性和安全性。同时，深入讲解了JavaScript在浏览器中的运行环境，如BOM和DOM。此外，博客还探讨了JavaScript的变量、数据类型以及数据类型检测，提供了实用的编程示例，是JavaScript初学者的宝贵资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、认识JavaScript

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。

Java 服务器端的编程语言

JavaScript 运行在客户端(浏览器)的编程语言

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CsiWZ1sy-1590638212724)(img\bulaideng.png)]

1、JavaScript的发展过程（了解）

JavaScript 诞生于1995 年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。在JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。Netscape Navigator 希望通过JavaScript 来解决这个问题。在人们普遍使用电话拔号上网的年代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，拨号上网的速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。

自此以后的发展，JavaScript 逐渐成为市面上常见浏览器必备的一项特色功能。如今，JavaScript 的用途早已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的JavaScript 已经成为一门功能全面的编程语言，能够处理复杂的计算和交互，拥有了闭包、匿名（lamda，拉姆达）函数，甚至元编程等特性。作为Web 的一个重要组成部分，JavaScript 的重要性是不言而喻的，就连手机浏览器，甚至那些专为残障人士设计的浏览器等非常规浏览器都支持它。当然，微软的例子更为典型。虽然有自己的客户端脚本语言VBScript，但微软仍然在Internet Explorer 的早期版本中加入了自己的JavaScript 实现①。计算机产业的许多大公司购买了Java许可证，包括IBM、Apple、DEC、Adobe、SiliconGraphics、HP、Oracle、TOSHIBA以及Microsoft。这说明，Java已得到了业界的普遍认可。

JavaScript 从一个简单的输入验证器发展成为一门强大的编程语言，完全出乎人们的意料。应该说，它既是一门非常简单的语言，又是一门非常复杂的语言。说它简单，是因为学会使用它只需片刻功夫；而说它复杂，是因为要真正掌握它则需要数年时间。要想全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史和局限性。

2、JavaScript是什么？

是一门脚本语言
是一门解释性语言
是一门动态类型的语言
是一门基于对象的语言（万事万物，皆是对象）

编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行（010101）
脚本语言:不需要编译,直接执行

JavaScript最初的目的:

最初的目的是为了处理表单的验证操作。

JavaScript现在的意义:

JavaScript 发展到现在几乎无所不能。
1. 网页特效
2. 服务端开发(Node.js)
3. 命令行工具(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物联网(Ruff)
7. 游戏开发(cocos2d-js)

JavaScript和HTML、CSS的区别:

1. HTML：提供网页的结构，提供网页中的内容
2. CSS: 用来美化网页
3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

3、JavaScript语言特点

1）脚本语言
2）基于对象
3）简单性
4）动态性
5）安全性
6）跨平台性

1、脚本语言：文本保存，在调用时开始解释或编译的语言称为脚本语言。

2、基于对象：这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。oop：面向对象编程（时代）

3、简单性：指语法、语句上简单紧凑。对数据类型不做严格检查，声明变量类型为弱类型。

4、动态性：事件驱动机制，对用户的鼠标点击，键盘输入等事件直接给出响应。

5、安全性：它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

6、跨平台性：JavaScript 是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。

编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行
脚本语言:不需要编译,直接执行

4、JavaScript的组成

JavaScript的运行环境是浏览器，扩展了对浏览器window对象（简称BOM）相关操作。document对象（简称DOM对象）属于window对象，但是由于JavaScript核心就是对document的操作，所以通常将其独立出来介绍。所以JavaScript可以认为由如下三部分构成:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tiIyWyCx-1590638212727)(img/js组成.png)]

5.1 ECMAScript标准 - JavaScript的核心

ECMA 欧洲计算机制造联合会

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

5.2 BOM - 浏览器对象模型

Browser Object Model

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

5.3 DOM - 文档对象模型

Document Object Model

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

二、JavaScript语言初体验

1、页面的4种输出（重点）

1) 打印到页面上
	document.write("输出内容")
2) 在控制台中输出
	console.log("输出内容")：控制台输出
3)	提示框输出
	window.alert("输出内容")：提示框输出（window可省略）
4)	输入框提示输出
    window.prompt("输出内容")：输入提示框输出（window可省略）

2、JavaScript的书写位置（重点）

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />
<a href="javascript:alert('hello js')">click me</a>

写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入
```
<script src="main.js"></script>
```
引用外部js文件的script标签中不可以写JavaScript代码

3、标识符

标识符：就是一个名称（变量、函数、属性的名字，或者函数的参数）

var 声明变量 function 声明函数

4、变量（重点）

4.1、什么是变量

什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
为什么要使用变量

使用变量可以方便的获取或者修改内存中的数据

4.2、变量在内存中的存储

var age = 18;

4.3、变量及变量的声明

var声明变量

// var :关键字 用来声明变量的  浏览器解析代码的时候，看到var 就知道后面跟的变量名
var age;

先声明，后赋值

var age; // 声明 一个变量 名称叫age
age = 18; // 给变量age赋值为18
var age, name, sex;
age = 10;
name = 'zs';

边声明，边赋值

var age = 18; // 声明的同时赋值

一次性声明多个变量并赋值

var age = 10, name = 'zs'; // 多个变量声明和

4.4、变量的命名规则和规范（标识符命名规则）

规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、while。
- 区分大小写
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

关键字和保留字（理解）

JavaScript关键字是指在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。JavaScript关键字是不能作为变量名和函数名使用的，也就是说变量的名称或者函数的名称不能跟系统的关键字重名。使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入过程中出现编译错误。

关键字：var do typeof case else new for switch while if function this default delete in
保留字：byte enum int short Boolean goto native super class float long

下面哪些变量名不合法（练习下）

a	    
1
age18
18age
name
$name
_sex
&sex
theworld  
theWorld

4.5 代码的注释

Javascript 注释的语法和 Java、C++ 或许多其他语言类似：

// 单行注释    （ctrl + /）   

/* 这是一个更长的,  (alt + shift + A)
   多行注释
*/

在代码执行过程中，注释将被自动跳过（不执行）。

案例（可以自己尝试做下题练习下）

在页面中输出2*2的一个表格？
创建变量保存学生的年龄、入学时间、年龄，使用不同的输出方式输出。
交换两个变量的值

三、数据类型

JavaScript是弱类型脚本语言，声明变量时无须指定变量的数据类型。JavaScript变量的数据类型是解释时动态决定的。JavaScript的值保存在内存中，也是有数据类型的。

两大数据类型

基本类型，由Number、String、Boolean、Null、Undefined等组成
引用类型：又称复杂类型，由Object、Array、Function等组成

1、Number数字类型

**数字类型（Number）**分为整数型和浮点型（小数）

var num1=88.00;      // 使用小数点来写(浮点型)
var num2=88;         // 不使用小数点来写（整数型）
浮点数的精度问题：
	浮点数值的最高精度是17位小数，但在进行算数计算时其精度远远不如整数
    var result = 0.1 + 0.2; //结果不是0.3而是0.30000000000000004s
	不要判断两个浮点数是否相等

进制：

十进制
	var num = 9;
	进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
	var num = 0xA;
	数字序列范围：0~9以及A~F
八进制
	var num1 = 07;  //对应十进制的7
	var num2 = 019;  //对应十进制的19
	var num3 = 08;   //对应十进制的8
	数字序列范围：0~7

数值范围：

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity    例如: 5 / 0
无穷小：-Infinity	例如：5 / -0

NaN类型：（not a number）不是数字类型。它表示本来要返回一个数字而未返回的情况。

console.log(5 * 'a'); // NaN

1、任何NaN参与的操作运算，返回值都是NaN。

2、任何值和NaN都不相等，即便是两个NaN也不相等。

isNaN: is not a number

用法：isNaN是一个方法，用来检测变量的值
检测当前的值是否不是有效数字，返回true代表不是有效数字，返回false是有效数字。
例如：
var num = 12;
console.log(isNaN(num))   // true

2、String字符串类型

使用单引号或双引号包括起来的一串文本。

var schoolName = "海涛";
typeof schoolName ;// string
var siteName = 'http://baidu.com'

思考：如何打印以下字符串：

1.我是一个"正值"的人
2.我很喜欢"全栈'工程师'"

转义符：

字面量	含义
\n	换行
\t	制表
\ \	斜杠
\ ’	单引号（’）
\ "	双引号(" ")

字符串拼接

字符串拼接使用 + 连接

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);

两边只要有一个是字符串，那么+就是字符串拼接功能
两边如果都是数字，那么就是算术功能。

3、Boolean类型

boolean字面量：true和false，区分大小写

计算机内部存储：true 为1，false 为0

var flag = true; // 声明boolean变量flag为真
console.log(typeof(flag)); // Boolean
console.log(flag); // true

4、Undefined未定义

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined

var str; // 声明一个变量 未赋值 默认值为undefined
console.log(typeof(str)); // str变量的类型是Undefined
console.log(str); // 输出的值 undefined

5、Null空对象

此类型只有一个值，就是null。

console.log(typeof(null)); // Object

null表示一个空对象，虽然它是Null类型，但是typeof返回值确是Object。

var box = null; // 声明一个变量box为null类型

尽管undefined和null都表示空，但是它们的用法确实有很大不同的。

undefined：表示声明未赋值
null：表示空对象，对象不存在

变量声明未赋值的时候，没必要显式赋值为undefined。如果一个变量准备要存储一个对象，可以赋值为null。

6、Object对象类型

创建一个Object类型的对象

对象：就是属性的集合属性又是键值对组成的（key=value）

var obj = new Object();
var obj = {};
例如：
// name就是一个key值、value的值就是“郑州积云”
var school = {
    name: "郑州积云",
    address: "龙飞北路"
}

四、数据类型的检测

1、使用typeof检测数据类型

typeof：操作符返回一个字符串，表示未经计算的操作数的类型。

在js语言中，typeof指代操作符，功能：对一个操作数（变量）的数据类型做返回。返回值的类型是“String”

2、typeof的返回值

对一个值使用typeof 操作符可能返回下列某个字符串：

 "undefined"——如果这个值未定义；

 "boolean"——如果这个值是布尔值；

 "string"——如果这个值是字符串；

 "number"——如果这个值是数值；

 "object"——如果这个值是对象或null；

 "function"——如果这个值是函数。

下面是几个使用typeof 操作符的例子：

var message = "some string";

alert(typeof message); // "string"

alert(typeof(message)); // "string"

alert(typeof 95); // "number"



### 练习

```
案例要求：创建变量保存学生的年龄、入学时间、身高数据，输出到控制台中。页面中输出一个2*3的表格。
```