战胜JavaScript基础——what is JavaScript

Adoretheall690

261人浏览 · 2026-06-06 14:42:28

Adoretheall690 · 2026-06-06 14:42:28 发布

What is JavaScript?

1.1 JavaScript是什么

JavaScript（简称 JS）是一种轻量级、解释型、动态类型的脚本语言，主要运行在浏览器中，用于为网页添加交互行为。同时，Node.js 的出现使其也能在服务器端运行。

1.2 作用

1.2.1 浏览器端：让网页能动起来

（1）操作网页内容（DOM 操作）

JS 可以找到网页上的任何一个元素，然后修改它。比如把一段文字从“你好”变成“再见”，或者把一张图片换成另一张。这就是增删改查网页元素的能力。

（2）监听用户动作（事件处理）

JS 可以“听到”用户在网页上做的各种事情——点击、滑动、输入文字、鼠标移过去等等。听到之后就能做出反应，比如“用户点了这个按钮，就弹出一个提示框”。

（3）动态改变样式

JS 可以随时修改网页的外观。比如让一段文字变红，让一个盒子隐藏起来，或者让一张图片慢慢变大。

（4）发送网络请求（AJAX / Fetch）

这是现代网页最核心的能力之一。JS 可以在不刷新整个页面的情况下，去服务器要数据，然后把数据填到当前页面上。你刷微博时往下滑看到新内容，就是这个原理。

（5）在浏览器里存数据

JS 可以在你的电脑里存一点小东西。比如你登录网站后，网站把你是否登录的状态存下来，下次你打开就不用重新登录了。

（6）做动画

JS 可以让元素移动、淡入淡出、缩放旋转。虽然现在很多动画用 CSS 也能做，但复杂的动画序列还是靠 JS。

（7）表单验证

你注册账号时，JS 可以在你点击“提交”之前，当场检查你填的手机号格式对不对、密码够不够长。这样就省去了发送到服务器再等反馈的时间。

1.2.2 服务端（Node.js）：让 JS 跑到服务器上

（1）处理 HTTP 请求——写后端 API，和 Python 的 Flask、Django 做的事情一样。

（2）操作数据库——连接 MySQL、MongoDB，读写数据。

（3）读写文件——在服务器上创建、删除、修改文件。

（4）做实时通信——写聊天室、在线游戏、协同编辑文档这类需要实时推送的功能。

（5）写工具脚本——爬虫、自动化脚本、命令行工具。

1.2.3 补充：

Node.js是什么

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，让 JavaScript 可以脱离浏览器运行在服务器端或本地命令行。

Node.js 适用于超出浏览器沙箱限制的场景：服务端 HTTP API、文件系统操作、数据库访问、WebSocket 服务、CLI 工具、桌面应用，以及前端构建工具链。

1.3 JavaScript的组成

大抵可分为两大类

（1）ECMAScript（JavaScript语言基础）

规定了js基础语法核心知识，比如：变量、分支语句、循环语句、对象等

（2）Web APIs

定义：Web APIs 是浏览器提供的所有 JavaScript API 的统称，包括 DOM、BOM 以及其他功能 API。

定义：DOM 是 HTML/XML 文档的编程接口，将网页文档表示为树形结构，允许 JS 动态访问和修改文档内容、结构和样式。

定义：BOM 是浏览器对象模型，提供与浏览器窗口交互的 API（不涉及网页内容），允许 JS 操作浏览器窗口、历史记录、导航、屏幕信息等。

1.4 可用学习网站

https://developer.mozilla.org/zh-CN

或直接搜索mdn

1.5 JavaScript 书写位置

1.5.1 内部JavaScript

写在html文件中，用script标签包裹（script标签写在文档末尾上面）
- why？

拓展：alert(‘你好，js’) 页面弹出警告对话框

1.5.2 外部的JavaScript

写在以.js结尾的文件里，通过script标签，引入到html页面中。

<!-- 引入js文件夹里的my.js文件 -->
<body>
  <script src="./js/my.js>
    //中间不要写代码，会被忽略
  <script>
</body>

1.5.3 内联JavaScript

代码写在标签内部

<body>
  <button onclick="alert('joke')">sad</button>
</body>

2 JavaScript 怎么写

2.1 注释

单行注释：
- 符号：//
- 快捷键：ctr+/

<script>
  //这种是单行注释
</script>

块注释
- 符号：/* */
- 快捷键：ctr++shift+/

<script>
  /*
  多行
  注释
  */
</script>

2.2 结束符“；”

2.3 输入输出

2.3.1 输出语法

（1）document.write()

document.write('要输出的内容')
// document 文档

作用：向body内输出内容（内容为标签，也会被解析成网页元素）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <script>
      //1.文档输出内容
      document.writeln("输出div")
      document.writeln("<h1>标题</h1>")
    </script>
  </body>
</html>

（2）alert()

alert('内容')

作用：页面弹出警告对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("内容")
</script>
</body>
</html>

（3）console.log()

console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    console.log('控制台打印')
</script>
</body>
</html>