JavaScript 基础入门：语法、数据类型与 DOM 操作详解

JavaScript 基础语法与数据容器

JavaScript 是一种轻量级的解释型或即时编译型的编程语言，主要用于网页交互。理解其基本构成要素是编写代码的第一步。

第一步：理解变量声明与命名规则

变量本质上是存储信息的容器。在 JavaScript 中，变量的使用遵循特定的语法规则：

• 声明方式：通常使用 var（现代开发中也常用 let 和 const）关键字。语法格式为：var 变量名 = 值;。注意变量需先声明后赋值，且允许重复赋值。
• 命名规范：变量名必须以字母、下划线（_）或美元符号（$）开头；对大小写敏感（a 与 A 不同）；建议避免使用 $ 和 _ 开头以保持代码整洁。
• 语句终止：虽然解析器能自动识别语句结尾，但养成良好的编码习惯，每条语句应以分号 ; 结尾。

var a; // a 当前值为 undefined
var b = 6; // b 为数字类型
var c = "Hello"; // c 为字符串类型

第二步：掌握六大数据类型

JavaScript 中的信息以“值”的形式存在，主要分为以下六类：

• Number（数字）：整数或浮点数，如 68.57。
• String（字符串）：置于单引号或双引号中的文本，如 "hello world"。
• Boolean（布尔值）：仅包含 true 或 false。
• Undefined：变量已声明但未赋值时的默认值。
• Null：表示空值或未定义的对象引用，常用于清空变量。
• Object（对象）：用于存储复杂数据结构。
• Function（函数）：可执行的代码块。

函数定义与常见交互对话框

函数是一组为了实现特定功能的代码集合。在实际应用中，经常需要与用户进行简单的交互，JavaScript 提供了多种消息对话框来实现这一目的。

第三步：函数的定义与调用

使用 function 关键字定义函数，并通过函数名加括号的方式调用。例如创建一个计算加法并弹出结果的函数：

function addAndAlert() {
  var sum = 3 + 2;
  alert(sum); // 弹出结果
}
addAndAlert(); // 直接调用函数

第四步：输出内容至网页 (document.write)

document.write() 可直接将内容写入 HTML 文档流中。支持直接输出字符串、变量或通过 + 号连接多项内容，甚至可直接插入 HTML 标签（如 <br>）产生换行效果。

第五步：实现用户交互对话框

JS 提供了三种标准的模式对话框，各有不同的用途和返回值：

1. alert() 警告框
   - 作用：仅显示提示信息，包含“确定”按钮。
   - 特点：阻塞执行，点击确定前无法操作页面，常用于调试或强调重要信息。
2. confirm() 确认框
   - 作用：提供“确定”和“取消”按钮，让用户做选择。
3. prompt() 提示框
   - 作用：包含文本输入框，用于获取用户输入的特定数据。

第六步：综合应用示例

结合上述知识点，我们可以编写一个简易的成绩评价器和姓名欢迎程序：

// 成绩评价逻辑
function checkScore() {
    var score = prompt("请输入你的成绩", "90");
    if (score >= 90) {
        document.write("你很棒!");
    } else if (score >= 75) {
        document.write("不错吆!");
    } else if (score >= 60) {
        document.write("要加油!");
    } else {
        document.write("要努力了!");
    }
}

// 姓名欢迎逻辑
var myName = prompt("输入您的名字");
if (myName != null && myName != "") {
    document.write("Welcome to " + myName);
} else {
    document.write("Welcome to my friend");
}

窗口控制与 DOM 元素动态操作

除了基础数据交互，JavaScript 还能控制浏览器窗口行为以及动态修改页面内容，这是实现富媒体网页体验的关键。

第七步：打开与关闭窗口

使用 window 对象的方法可以控制浏览器的新窗口行为。

• window.open()
  - 语法：window.open([URL], [窗口名称], [参数字符串])
  - 参数：第三个参数可设置窗口尺寸（width/height）、位置（top/left）以及是否显示菜单/工具栏/滚动条等（yes/no）。常用窗口目标包括 _blank（新窗口）和 _self（当前窗口）。
• window.close()
  - 用法：window.close() 关闭当前窗口；若有窗口对象引用，如 var win = window.open(...); win.close(); 可关闭指定的新开窗口。

第八步：动态修改 HTML 内容 (innerHTML)

innerHTML 属性用于获取或替换 HTML 元素内部的所有 HTML 内容。

var title = document.getElementById("con");
// 读取原内容
document.write("原标题: " + title.innerHTML + "<br>");
// 修改内容
title.innerHTML = "Hello World";
// 验证修改
document.write("修改后的标题: " + title.innerHTML);

第九步：通过 Style 属性改变视觉样式

可以直接通过 JavaScript 修改元素的内联样式。语法为：element.style.property = newValue。

var box = document.getElementById("con");
box.style.color = "red";       // 修改文字颜色
box.style.background = "#ccc"; // 修改背景色
box.style.width = "300px";     // 修改宽度

第十步：控制元素显示与隐藏

通过修改 display 属性可实现元素的显隐切换：

• element.style.display = "none"：隐藏元素，不占据布局空间。
• element.style.display = "block"：显示元素（以块级形式）。

第十一步：操作 CSS 类名 (className)

相比逐个修改样式，更推荐的操作方式是动态添加或替换元素的 className，从而应用预设的 CSS 样式表，使代码更清晰易维护。

// 获取元素并重新指定 class
var p2 = document.getElementById("p2-id");
p2.className = "two"; // 将该元素的 class 设置为 "two"

总结

JavaScript 的基础涵盖了从数据存储（变量、类型）到逻辑处理（函数），再到与用户交互（对话框）及页面表现层操控（DOM 操作）的完整链路。熟练掌握 document.write、alert/prompt/confirm、window.open 以及 innerHTML/style/className 的使用方法，能够为后续学习 AJAX、事件驱动编程及现代前端框架打下坚实基础。

以上就是 JavaScript 基础入门的详细内容，更多关于 JavaScript 学习资料的文章请关注本站其它相关文章！