JS学习笔记（一）

最新推荐文章于 2026-01-07 00:05:42 发布

原创最新推荐文章于 2026-01-07 00:05:42 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

本文介绍了JavaScript的基本概念，包括其特点、引擎工作原理及浏览器中的应用。此外还讲解了如何在HTML中嵌入JS代码，变量声明方式，数据类型及类型转换等基础知识。

一、JS简介

（1）JS语言特点

它们可以被直接写在网页的 HTML 中，在页面加载的时候自动执行。
脚本被以纯文本的形式提供和执行。它们不需要特殊的准备或编译即可运行。
可以在浏览器、服务端、任意搭载了js引擎的设备中执行。

（2）引擎

浏览器嵌入js引擎（js虚拟机），v8----Chrome、Opera 和 Edge 中的 JavaScript 引擎。SpiderMonkey —— Firefox 中的 JavaScript 引擎。
引擎如何工作：1.引擎读取脚本 2.引擎将脚本转化为机器语言 3.机器代码执行

（3）浏览器中的JS可以做什么

在网页中添加新的 HTML，修改网页已有内容和网页的样式。（DOM）
响应用户的行为，响应鼠标的点击，指针的移动，按键的按动。
向远程服务器发送网络请求，下载和上传文件（AJAX 、 COMET ）。
获取或设置 cookie，向访问者提出问题或发送消息。
记住客户端的数据（“本地存储”）。

（3）浏览器中的JS不可以做什么

**网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件。**比如要是想将文件拖拽上传，需要得到访问权限，或者面试时想要开始摄像头，也要得到访问权限。
不同的标签页/窗口之间通常互不了解。（同源策略）
JS可以与当前页面所在的服务器进行通信。但是从其他网站/域的服务器中接收数据的能力被削弱了。尽管可以，但是需要来自远程服务器的明确协议（在 HTTP header 中）。这也是为了用户的信息安全。

二、JS语法

（1）将脚本添加至网页上

脚本内部标签script

<html>
<body>
  <script>
    alert('Hello, world!');
  </script>
</body>
</html>

外部脚本src

<script src="/path/to/script.js"></script>

简单的脚本才嵌入到 HTML 中，更复杂的脚本存放在单独的文件中。
原因：使用独立文件的好处是浏览器会下载它，然后将它保存到浏览器的cookie中。之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。这可以节省流量，并使得页面加载更快。
如果设置了 src 特性，script 标签内容将会被忽略。

<script src="file.js">
  alert(1); // 此内容会被忽略，因为设定了 src
</script>

解决方案：分成两个script标签

<script src="file.js"></script>
<script>
  alert(1);
</script>

（2）变/常量

let：创建一个变量，块级作用域
var：声明一个变量，函数作用域
congst：用来声明常量

（3）数据类型

在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种引用类型）。

Number：代表整数和浮点数。包括常规数字、infinity、NaN
BigInt：大于 (253-1)（即 9007199254740991）的数。
String：必须引用在双引号内。${…} 内的表达式会被计算，计算结果会成为字符串的一部分。

alert( `the result is ${1 + 2}` ); // the result is 3

Boolean：只包括true false。
null：不存在
undefined：未被定义
Object ：用于更复杂的数据结构
symbol：用于唯一的标识符。
typeof 运算符：返回参数类型

交互函数

alert：会弹出带有信息状态窗。
prompt：显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null。

result = prompt(title, [default]);//title显示给用户的文本 default指定input框的初始值

confirm：显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或按下 Esc 键返回 false。

let isBoss = confirm("Are you the boss?");
alert( isBoss ); // 如果“确定”按钮被按下，则显示 true

类型转换

1.字符串类型转换

value = String(value);

2.数字型转换

let str = "123";
alert(typeof str); // string
let num = Number(str); // 变成 number 类型 123

值	转换为
undefined	NaN
null	0
true和false	1和0
string	读取含有的数字，有非数字字符返回NaN

3.布尔类型转换
直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
其他值变成 true。

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false

运算符

加号

通常，加号 + 用于求和。
但是如果加号 + 被应用于字符串，它将合并（连接）各个字符串：
1.两个字符串：起合并作用
2.一个字符串一个运算元：合并且将另一个转换为字符串
3.多个运算元，从左到右按顺序工作