JavaScript基础
# 一. JavaScript
JavaScript 是一种具有 函数优先的轻量级，解释性 或 **即时编译型 ** 的 编程语言
维基百科：
JavaScript 是一种 高级的、解释型 的编程语言
JavaScript 是一门基于原型、头部函数的语言，是一门多范式的语言，支持面向对象程序设计，指令式编程，以及函数式编程
ECMAScript 是一种规范，JavaScript 是这种规范的一种实现
[TOC]
# Ⅰ. JavaScript 组成
| ECMAScript | DOM | BOM |
|---|---|---|
| 定义语言规范 | 操作文档的API | 操作浏览器的API |
# Ⅱ. JavaScript 引擎
浏览器中的 js 引擎将 JavaScript 代码翻译成 CPU指令来执行
常见的 JavaScript 引擎
| SpiderMonkey | Chakra | JavaScriptCore | V8 |
|---|---|---|---|
| 第一款 js 引擎 | 微软产品，用在IE浏览器 | WebKit中的 js引擎 | Google开发，强大的 js引擎，帮助谷歌浏览器脱颖而出 |
# Ⅲ. 浏览器内核和JS引擎
如： WebKit内核
graph LR
A[WebKit] -->B(WebCore)
A --> C(JavaScriptCore)
B -->|作用| D(解析HTML 布局 渲染等工作)
C -->|作用| E(解析 执行 JS 代码)
1
2
3
4
5
6
2
3
4
5
6
# Ⅳ. JS 应用
任何可以使用 JavaScript 来实现的应用最终都会使用 JavaScript 实现
graph LR
A[JavaScript] --> B(Web开发)
B --> B-1(原生JS React Vue Angular)
A --> C(移动端开发)
C --> C-1(ReactNative Weex)
A --> D(小程序开发)
D --> D-1(微信小程序 Uniapp Taro)
A --> E(桌面应用开发)
E --> E-1(Electron 如VScode)
A --> F(后端开发)
F --> F-1(Node express egg.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Ⅴ. JavaScript 基本语法
# 1. JS 编写方式
HTML 代码行内
<a href="javascript:alert('点击')" onclick="alert('点击一下')">点击一下</a>1script 标签中
<a class="test" href="#">百度一下</a> <script> const test = document.querySelector(".test") test.onclic = function(){ alert("百度一下") } </script>1
2
3
4
5
6
7外部 script 文件
// test.html 中引入 test.js 文件 <script src="./test.js"></script> // test.js const test = document.querySelector(".test") test.onclic = function(){ alert("百度一下") }1
2
3
4
5
6
7
8
# 2. <noscript> 元素
当浏览器不支持脚本、对脚本的支持关闭时，浏览器页面上会显示包含在 <noscript> 中的内容
<body>
<noscript>
<p>你的浏览器不支持或不允许网站使用 JavaScript </p>
</noscript>
<body>
1
2
3
4
5
2
3
4
5
# 3. JS 编写注意事项
script 不能写成单标签
可以不写 type 属性
<script type="text/javascript"></script> // 现在可以不写 type 属性，因为 JavaScript 是所有现在浏览器以及 HTML5 中的默认脚本语言1
2
3加载顺序
- 默认遵 HTML 文档加载顺序， 自上而下的加载顺序
- 建议将 JavaScript 代码放在 body 子元素的最后一行
JavaScript 代码严格区分大小写
- HTML 和 CSS属性不区分大小写，但 JavaScript 严格区分大小写
# 4. JS 交互方式
| 方法 | 说明 | 效果 |
|---|---|---|
| alert() | 1个参数 | 浏览器弹窗 |
| console.log() 常用 | 多个参数 | 浏览器控制台中查看 |
| document.write() | 多个字符串 | 浏览器页面中查看 |
| prompt() | 1个参数 | 浏览器接收用户输入数据 |
# 5. chrome调试工具
# 6. JS注释写法
# 7. 插件和配置
# Ⅵ. 变量和数据类型
# 1. 变量的理解
- 程序中数据不断变量
- 盒子，存储某个东西
# 2. 变量的定义
- 分成两个步骤：
- 变量声明
- 变量赋值
- 其他的定义方法
- 先声明，在赋值
- 同时声明多个变量
- 变量的命名规则
- 字母、——、%
- 字母/数字/_/$
- 不能使用关键字/保留字命名
- 严格区分大小写
- 变量的命名规范
- 使用驼峰标识（小驼峰）
- = 左右两边加空格
- 分号 ;
- 见名知意
# 3. 变量的练习
# 4. 变量的注意
- 如果一个变量未声明就使用的话，那么会报错
- 如果一个变量有声明，但是没有赋值，那么值 undefined
- 不使用var 也可以声明变量（不推荐）
# 5. 认识数据类型 - 动态类型-常见的数据
``
编辑 (opens new window)
上次更新: 2026/11/02, 16:25:37