在前端开发的世界里，JavaScript 是当之无愧的 “灵魂”。它与 HTML、CSS 并称网页三要素，负责赋予页面动态交互的生命力。如果你是编程新手，想入门前端开发，这篇文章将带你快速掌握 JavaScript 的核心基础知识，从历史渊源到语法规则，一网打尽。

一、JavaScript 是什么？—— 从历史到定位

JavaScript 诞生于 1995 年，由 Netscape 公司开发，最初名为 LiveScript，后因市场营销策略更名为 JavaScript（与 Java 无任何关系，仅名字相似）。它是一种运行在浏览器中的脚本语言，核心作用是：

  • 实现页面动态效果（如按钮点击、表单验证、数据交互）；
  • 连接 HTML（页面骨架）和 CSS（页面样式），让静态页面 “动” 起来。

与 HTML、CSS 的关系：

  • HTML 搭建页面结构（如标题、段落、按钮）；
  • CSS 美化页面样式（如颜色、字体、布局）；
  • JavaScript 控制页面行为（如点击按钮弹出提示、滚动时加载内容）。
二、JavaScript 的核心特点

作为前端开发的基石，JavaScript 有几个显著特点：

  1. 基于对象：可以直接操作页面中的元素（如按钮、输入框）；
  2. 弱类型语言：变量类型由赋值决定，无需提前声明（例如 var x = 10 是数字，x = "hello" 又变成字符串）；
  3. 解释执行：无需编译，浏览器直接逐行执行代码；
  4. 跨平台：在任何支持 JavaScript 的浏览器中都能运行（如 Chrome、Firefox）；
  5. 动态性：可以实时修改页面内容和样式，响应用户操作。
三、如何在页面中添加 JavaScript？

JavaScript 可以通过三种方式嵌入网页，各有适用场景：

  1. 行内式：直接写在 HTML 标签的事件属性中（如 onclick），适合简单交互。
    示例：

    <button onclick="alert('你点击了按钮！')">点击我</button>
     

    （alert() 是弹出警告对话框的函数）

  2. 内部式：写在 <script> 标签内，通常放在 <body> 底部（确保先加载页面元素）。
    示例：

    <script>
  // 弹出欢迎消息
  alert('欢迎访问我的网页！');
</script>

  3. 外部式：将代码写在 .js 外部文件中，通过 <script src="路径"> 引入，适合复杂项目（便于代码复用和维护）。
    示例：

    <!-- 引入外部 JS 文件 -->
<script src="myScript.js"></script>
     

    （注意：带 src 属性的 <script> 标签内不能再写代码）

四、基础语法：变量、数据类型与函数

  1. 注释与标识符

    • 注释：单行用 //，多行用 /* */（与 Java 相同），用于解释代码。
    • 标识符：变量 / 函数的名称，由字母、数字、_、$ 组成，不能以数字开头，不能用关键字（如 var、function）。

  2. 变量
    用 var 关键字定义（弱类型特性）：

    var age = 20;       // 数字类型
age = "二十岁";     // 自动转为字符串类型
var isStudent = true; // 布尔类型

  3. 数据类型
    常见类型包括：

    • 基本类型：数字（number）、字符串（string）、布尔（boolean）、undefined（未赋值）、null（空值）；
    • 引用类型：对象（object）、数组（array）等。
      可用 typeof 运算符查看变量类型：
    console.log(typeof "hello"); // 输出：string

  4. 函数
    封装可重复使用的代码块，语法：

    // 定义函数：计算两数之和
function add(a, b) {
  return a + b;
}
// 调用函数
var result = add(3, 5);
console.log(result); // 输出：8
五、流程控制：让代码 “有条理” 地执行

和其他编程语言一样，JavaScript 通过流程控制语句实现逻辑判断和循环：

  1. 选择结构

    • 单分支 if：满足条件才执行代码；
    • 双分支 if-else：二选一执行；
    • 多分支 if-else if：判断区间（如分数等级）；
    • switch：判断离散值（如星期几）。

    示例（判断成绩等级）：

    var score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

  2. 循环结构

    • while：先判断条件再循环；
    • do-while：先执行一次再判断；
    • for：适合固定次数的循环。

    示例（打印 1-5）：

    for (var i = 1; i <= 5; i++) {
  console.log(i);
}

小结

JavaScript 是前端开发的核心工具，掌握其基础语法是入门的第一步。从变量定义到函数封装，从条件判断到循环执行，这些知识将帮助你实现简单的页面交互。下一篇，我们将深入探讨 JavaScript 的 DOM 操作，教你如何用代码 “操控” 网页元素。

# javascript # 开发语言 # ecmascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区