JS基础随笔(菜鸟必看篇)

2023年5月18日上午1:04 • JavaScript

下面是关于“JS基础随笔(菜鸟必看篇)”的详细攻略。

简介

“JS基础随笔(菜鸟必看篇)”是一篇介绍JavaScript基础知识的文章，适合初学者阅读，主要包括变量、数据类型、运算符、函数、DOM、事件等内容。文章采用易懂的语言和多个示例帮助读者理解JavaScript的基础概念。

攻略

变量

变量是储存数据的容器，JavaScript中的变量需要通过关键字var声明。声明变量的格式如下：

var 变量名 = 变量值;

其中，变量名可以为任意合法的标识符，变量值可以是任意数据类型（后文会讲到）。

数据类型

JavaScript中常见的数据类型有：数字、字符串、布尔值、数组、对象和空值null。在JavaScript中，变量不需要预先指定数据类型，而是通过变量的值自动推断出变量的数据类型。

运算符

JavaScript中支持的运算符包括：算术运算符、赋值运算符、比较运算符、逻辑运算符等。例如：

// 算术运算符
var num1 = 3;
var num2 = 2;
var result1 = num1 + num2; // 加法运算
var result2 = num1 ** num2; // 幂运算

// 赋值运算符
var x = 5;
x += 3; // 相当于 x = x + 3;

// 比较运算符
var a = 2;
var b = "2";
console.log(a == b); // true
console.log(a === b); // false

// 逻辑运算符
var m = 5;
var n = 5;
if (m > 0 && n > 0) {
  console.log("m和n都大于0");
}

函数

函数是JavaScript中的基本模块单元，函数能够接收参数，处理逻辑并返回结果。JavaScript中的函数声明有两种方式：

// 函数声明
function add(num1, num2) {
  return num1 + num2;
}

// 函数表达式
var add = function(num1, num2) {
  return num1 + num2;
}

DOM

DOM（Document Object Model）是操作HTML和XML文档的API，使JavaScript能够动态地操作和更新网页内容。DOM树中的每个元素都是一个对象，可以通过JavaScript来操作这些对象，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>DOM操作示例</title>
  </head>
  <body>
    <h1>Hello, JavaScript!</h1>
    <script>
      var h1Elem = document.getElementsByTagName("h1")[0];
      h1Elem.style.color = "red";
    </script>
  </body>
</html>

事件

JavaScript可以通过事件监听器来响应用户的交互操作，例如鼠标点击、键盘输入等。JavaScript中常见的事件有：点击事件、鼠标事件、键盘事件等。

下面是一个鼠标点击事件的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>鼠标点击事件示例</title>
  </head>
  <body>
    <button id="btn">点击我</button>
    <script>
      var btnElem = document.getElementById("btn");
      btnElem.onclick = function() {
        alert("Hello, JavaScript!");
      };
    </script>
  </body>
</html>