JavaScript 基础语法核心指南：变量、函数与 DOM 操作

变量声明与管理

变量是存储信息值的容器。在 JavaScript 中，正确的变量使用遵循特定的生命周期与规范。

第1步：声明并赋值变量

目的：在内存中开辟空间存储数据。
动作：先声明变量名，再赋予具体数值。变量可重复赋值。

// 语法示例
var 变量名 = 值;

第2步：遵守命名规则

参数与约束：

• 首字符：必须为字母，不建议以 $ 或 _ 开头（虽被允许但不符合最佳实践）。
• 大小写敏感：a 与 A 被视为两个不同的变量。
• 类型说明：变量名本身不体现类型，类型由赋值的 value 决定。

完成状态：通过变量名能准确读取或修改变量内部的值。

数据类型识别

JavaScript 中的信息即值，主要分为以下几类。区分类型有助于后续进行准确的逻辑运算。

第3步：识别基础与引用类型

入口：观察代码中的字面量写法。
动作：根据值的形式判断类型。

• 数字 (Number)：包括整数和小数，如 68.57。
• 字符串 (String)：引号包裹的文本，如 'hello' 或 "world"。
• 布尔值 (Boolean)：仅包含 true 或 false。
• 未定义 (Undefined)：已声明但未赋值的变量，默认值为 undefined。
• 空值 (Null)：表示对象不存在，可通过 null 清空变量。

 1 var a; // undefined
 2 var a = 6; // Number
 3 var a = "Jason"; // String

函数结构与调用

函数是将一组执行特定任务的语句打包的机制，通过复用提升代码效率。

第4步：定义与执行函数

入口：使用 function 关键字。
动作：编写函数体并通过名称调用。
重要参数：函数名唯一标识该段逻辑。

// 定义函数
function add2(){
  var sun = 3 + 2;
  alert(sun);
}

 // 调用函数（执行代码）
add2();

在 HTML 元素中，可通过事件绑定触发函数，例如按钮点击：

<input type="button" value="点击我" onclick="add2()" />

内容输出与用户交互

脚本需要向用户展示信息或获取输入，主要通过文档写入和对话框组件实现。

第5步：页面内容输出 (document.write)

目的：直接在当前网页位置渲染文字或 HTML 标签。
动作：调用方法并传入字符串、变量或拼接表达式。

• 直接输出：document.write("Hello");
• 变量输出：需确保变量名拼写一致（注意原文草稿中 mysrt 为拼写错误，实际应使用变量原名）。
• 拼接输出：使用 + 连接多个变量与字符串。
• HTML 混输：输出包含 <br> 等标签的内容将生效为格式而非纯文本。

第6步：处理消息对话框 (Alert)

参数：alert(message)，支持字符串或变量。
结果：弹出一个阻塞式提示框，必须点击“确定”才能继续操作网页。常用于调试或重要通知。

第7步：获取用户选择 (Confirm)

动作：调用 confirm(str) 弹出含“确定”和“取消”的对话框。
返回值：点击确定返回 true，点击取消返回 false。可通过 if 判断分支执行不同逻辑。

第8步：收集用户输入 (Prompt)

动作：调用 prompt(str1, str2)，显示文本框供用户输入。
参数：str1 为提示语，str2 为输入框默认值。
返回值：点击确定返回输入内容，点击取消返回 null。

窗口控制与 DOM 元素操作

高级交互涉及对浏览器窗口对象的控制和页面上 HTML 元素的动态修改。

第9步：打开新窗口 (window.open)

入口：window.open()。
参数：(URL, 窗口名称, 参数字符串)。常用配置包括：_blank（新标签）、尺寸限制及是否显示工具栏/滚动条。相同名称只能创建一个窗口实例。

第10步：获取并替换元素内容 (innerHTML)

目的：动态更新网页上的文本或 HTML 结构。
动作：通过 document.getElementById 获取目标元素对象，赋值给其 innerHTML 属性。

var mychar = document.getElementById("con");
mychar.innerHTML = "new content";

第11步：动态调整样式 (style)

入口：元素的 style 属性。
动作：直接修改 CSS 属性，如 color, background, width。
控制显隐：设置 display 为 "block"（显示）或 "none"（隐藏）。

第12步：通过类名管理外观 (className)

目的：切换预设的 CSS 样式表，避免内联样式的冗余。
动作：修改元素的 className 属性以应用对应的 CSS 类定义。

以上就是 JavaScript 基础语法核心指南的详细内容，更多关于 JavaScript 入门教程的资料请关注本站其它相关文章！