JavaScript 基础入门与语法

JavaScript 基础入门与语法

1. JavaScript 介绍

• 是什么:
  JavaScript 是一种运行在客户端（浏览器）的编程语言，主要用于实现网页的人机交互功能。通过 JavaScript，开发者可以创建动态网页，使页面更加生动和有趣。

• JavaScript 的作用:

  • 网页特效: 通过监听用户的行为（如点击、悬停等），动态改变网页的显示效果，提升用户体验。
  • 表单验证: 在用户提交表单前，对数据的合法性进行校验，减少服务器的负担。
  • 数据交互: 通过 AJAX 获取服务器数据并动态渲染到前端。
  • 服务端编程: 例如使用 Node.js，可以编写服务器端的 JavaScript 代码。

• 组成:

  • ECMAScript: JavaScript 的核心规范，定义了基本的语法和数据类型，例如变量、分支语句、循环语句、对象等。
  • Web APIs:
    • DOM (Document Object Model): 提供操作 HTML 页面元素的接口，例如移动元素、修改大小、添加或删除元素。
    • BOM (Browser Object Model): 提供操作浏览器相关功能的接口，例如控制弹窗、检测浏览器窗口宽度、在浏览器中存储数据等。

2. JavaScript 书写位置

• 行内 JavaScript:

  • 直接在 HTML 元素的 onclick 或 onmouseover 等事件属性中编写 JavaScript 代码。
  • 示例:

    <button onclick="alert('Hello, JavaScript!')">点击我</button>
    

• 内部 JavaScript:

  • 通过 <script> 标签在 HTML 文件中编写 JavaScript 代码，建议将 <script> 标签放置在 </body> 标签上方，以确保页面内容加载完成后再执行 JavaScript 代码。
  • 示例:

    <script>
      console.log('这是内部 JavaScript 代码');
    </script>
    

• 外部 JavaScript:

  • 将 JavaScript 代码写在一个独立的 .js 文件中，通过 <script src="script.js"></script> 标签引入外部 JavaScript 文件。外部 JavaScript 文件使代码更清晰、易于复用，并且减少了 HTML 文件的混乱。
  • 示例:

    <script src="script.js"></script>
    

3. 注释与结束符

• 单行注释:

  • 使用 // 开头，后面的代码将被忽略。用于简单说明代码的作用。
  • 示例:

    // 这是一个单行注释
    let x = 10; // 声明变量 x 并赋值为 10
    

• 块注释:

  • 使用 /* */ 包裹的内容。用于注释较长的说明或禁用多行代码。
  • 示例:

    /* 这是块注释
       可以注释多行代码 */
    let y = 20;
    

• 结束符:

  • JavaScript 中语句的结束符是英文分号 ;。
  • 在 JavaScript 中，结束符是可选的，浏览器的 JavaScript 引擎会自动推断语句的结束位置，为了代码风格统一，建议在每行语句后加上分号或不加上分号。
  • 示例:

    let a = 5;
    let b = 10;
    

    let a = 5
    let b = 10
    

4. 输入和输出语法

• 输出语法:

  • document.write():
    • 直接在网页的 body 中输出内容。
    • 示例:

      document.write("Hello, World!");
      

  • alert():
    • 弹出一个带有消息的警告框，常用于调试或提示信息。
    • 示例:

      alert("操作成功！");
      

  • console.log():
    • 向浏览器的控制台输出信息，常用于开发时查看变量的值或调试程序。
    • 示例:

      console.log("调试信息：变量值为", x);
      

• 输入语法:

  • prompt():
    • 显示一个输入对话框，用户可以在对话框中输入文本。该函数返回用户输入的字符串。
    • 示例:

      let name = prompt("请输入您的姓名：");
      document.write("欢迎，" + name + "!");
      

5. 字面量

• 定义: 在计算机科学中，字面量（literal）是用于直接描述计算机中数据的固定值。

• 示例:

  • 数字字面量: 例如，我们的工资是 1000，此时 1000 就是一个数字字面量。
  • 字符串字面量: 例如，'你好JavaScript' 是一个字符串字面量。
  • 数组字面量: 使用方括号 []，例如 [1, 2, 3]。
  • 对象字面量: 使用花括号 {}，例如 {name: "John", age: 30}。