JavaScript 基础入门：函数、变量与 DOM 加载顺序详解

JavaScript 定位与开发环境准备

JavaScript（简称 JS）是一种解释性语言，主要用于在 HTML 页面对 Document 对象模型（DOM）进行增删改查，并构建与服务器的通信。它虽名称中带有 "Java"，但与用于后端开发的 Java 语言并无血缘关系，两者应用场景差异巨大。

对于熟悉 HTML 的开发者，JS 的学习重点在于语法结构与 DOM 交互。建议安装 Google Chrome 浏览器并使用其内置的开发者工具进行代码调试。

第一步骤：理解 script 标签的加载位置

在 HTML 结构中，script 标签的放置位置直接影响代码执行的安全性与有效性。

1. 页面渲染顺序原理

浏览器从上至下解析 HTML，当遇到 <script> 标签时会暂停渲染并立即执行脚本。若此时脚本试图操作尚未加载到内存中的 DOM 节点（如位于脚本上方的 div），将导致对象为空或报错。

2. 最佳实践：置于 body 末尾

为确保所有 DOM 元素加载完毕后再执行 JS，应将 script 标签放置在 </body> 之前。参考标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础示例</title>
</head>
<body>
  <h1>JavaScript 学习记录</h1>
  <div id="content">Hello World</div>
  
  <!-- 推荐位置：在此处编写 JS 代码 -->
  <script type="text/javascript">
    // 此处可安全操作 document 节点
  </script>
</body>
</html>

第二步骤：掌握函数 (Function) 的定义与调用

函数是 JS 的核心逻辑单元，使用 function 关键字声明。我们先从最简单的无参函数开始。

1. 无参函数声明与执行

以下代码演示了如何声明一个名为 WriteMyName 的函数，并在控制台中输出固定文本：

function WriteMyName(){
      console.log("My name is MrDream");
    }
    
// 调用函数
WriteMyName();

执行上述代码后，在 Chrome 控制台 (F12) 中将看到输出结果。

2. 带参数函数的灵活性

若希望在函数内部处理动态数据，需定义形参。调用时传入实参即可实现不同数据的打印：

function WriteMyName(_your_name){
      console.log(_your_name);
    }

// 传入字符串参数
WriteMyName("My name is MrDream");

// 传入其他自定义名称
WriteMyName("马大哈");

注意：字符串类型的参数必须包含在引号内（单引号或双引号），否则 JS 引擎会将其视为未定义的变量名。

第三步骤：理解变量声明与数值计算

变量用于存储数据，在早期 JavaScript 中使用 var 关键字声明。虽然现代开发推荐使用 let 和 const，但了解 var 有助于阅读遗留代码。

1. 基本变量赋值

声明两个数值变量并进行相加操作：

var five = 5;
var six = 6;
    
function add(){
  console.log(five + six); // 输出 11
}
add();

直接访问外部变量虽然可行，但增加了模块间的耦合度。更好的做法是通过参数传递数据。

2. 参数传递与动态计算

将变量或字面量值通过参数传递给函数，实现通用的加法逻辑：

var five = 5;
var six = 6;
    
function add(num1, num2){
  console.log(num1 + num2);
}

// 传入变量
add(five, six);

// 直接传入数字
add(10, 20);

这种方式允许函数接收任意数值（正数、负数均可），显著提升了代码复用率。

总结与回顾

通过本次学习，我们掌握了 JavaScript 入门的四个关键点：

1. 语言定位：JS 是用于操作 DOM 和服务端交互的前端脚本语言。
2. 加载位置：script 标签应置于 body 底部，确保 DOM 就绪。
3. 变量声明：使用 var 关键字定义变量以存储数据。
4. 函数应用：使用 function 定义逻辑块，并通过参数传递动态数据。