JS-JavaScript初识
0. JavaScript简介
概念：JavaScript是一种运行在客户端（浏览器）的编程语言。
作用：
- 网页特效（监听用户的一些行为让网页做出相应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台的数据，渲染到前端）
- 服务端编程（node.js）
组成：
1.ECMAscript
2.DOM
3.BOM
（DOM和BOM属于WebAPIs）
1. 引入方式
JavaScript 程序不能独自运行，它需要被嵌入到 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种引入方式：
1.1 内部引入
通过 script 标签包裹 JavaScript 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --> <script> alert('嗨，你好！') </script> </body> </html>
1.2 外部引入
一般将 JavaScript 代码写在独立的以 .js 为结尾的文件中，然后通过 script 标签的 src 属性引入
// demo.js 中 document.write('嗨，你好')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --> <script src="demo.js"> //此处代码会自动忽略 </script> </body> </html>
注意：如果用了外部引入，则 script 标签中的代码会自动忽略
2. 注释和结束符
通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：
2.1 单行注释
使用 // 注释单行代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 注释</title> </head> <body> <script> // 这种是单行注释的语法 // 一次只能注释一行 // 可以重复注释 document.write('嗨，欢迎！'); </script> </body> </html>
2.2 多行注释
使用 /* */ 注释多行代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 注释</title> </head> <body> <script> /* 这种的是多行注释的语法 */ /* 更常见的多行注释是这种写法 在些可以任意换行 多少行都可以 */ document.write('嗨，欢迎！') </script> </body> </html>
注：编辑器中注释的快捷键为 ctrl + /
3. 结束符
在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 结束符</title> </head> <body> <script> alert(1); alert(2); alert(1) alert(2) </script> </body> </html>
实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;
4. 输入和输出
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
4.1 输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出，有三种形式：
- 弹出警示框：
alert('哈哈哈') - 页面文字输出：
document.write('吼吼吼') - 控制台输出（多用于程序员调试）：
console.log('嘻嘻嘻')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> alert('你好 JS~') document.write('JavaScript我来了') console.log('它~会魔法吧~') </script> </body> </html>
4.2 输入
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
该语法会返回输入框中的输入内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 输入输出</title> </head> <body> <script> // 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号 prompt('请输入您的姓名:') </script> </body> </html>
注意：一般来说，对代码的执行顺序是按照从上到下的顺序来执行的，但是此处alert()和prompt()作为弹窗会优先执行。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南