JS 基本概念详细介绍

JavaScript 是一种基于对象和事件驱动的脚本语言，主要用于 Web 网页上实现交互效果、动态效果等功能。本文将从语言基础、DOM 操作、事件处理、AJAX 等几个方面介绍 JavaScript 的基本概念。

语言基础

变量

JavaScript 中的变量可以通过关键字 var 或 let、const 声明，推荐使用 let、const 声明变量。变量在声明时可以初始化，也可以后面赋值。例如：

let x = 1;
const y = 'hello';
var z;  // 声明变量，但未初始化
z = 50; // 赋初始值

数据类型

JavaScript 支持多种数据类型，包括字符串、数值、布尔值、null、undefined、对象、Symbol 等。其中，对象是最为重要的数据类型之一，因为在 JavaScript 中，几乎所有的数据类型都可以表示为对象。例如：

let str = '123';              // 字符串
let num = 123;                // 数值
let flag = true;              // 布尔值
let nul = null;               // null
let und = undefined;          // undefined
let obj = { name: '张三' };     // 对象
let sym = Symbol('myKey');    // Symbol

运算符

JavaScript 中的运算符包括算数运算符、比较运算符、逻辑运算符、位运算符等。其中，常用的运算符有：

• 加号 +：将两个数值相加或将两个字符串相连接。
• 等号 ==：比较两个值是否相等，如果数据类型不同，也会自动类型转换。
• 严格等号 ===：比较两个值是否相等，但数据类型也需要相同。
• 小于 <、大于 >、小于等于 <=、大于等于 >=：比较两个值的大小关系。
• 逻辑与 &&、逻辑或 ||：用于连接两个布尔值，返回一个新的布尔值。
• 取反运算符 !：将布尔值取反。

控制语句

JavaScript 中的控制语句包括条件语句（if、else）、循环语句（for、while、do-while）、跳转语句（break、continue、return）等。例如：

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 == 0) {
    continue;  // 如果 arr[i] 是偶数，则跳过本次循环
  }
  console.log(arr[i]);  // 如果 arr[i] 是奇数，则输出
}

DOM 操作

DOM（Document Object Model）是 JavaScript 操作网页的基础，通过操作 DOM 可以实现动态修改 HTML 元素、样式、属性等功能。常用的 DOM 操作方法包括：

获取元素

JavaScript 可以通过 document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.querySelector()、document.querySelectorAll() 等方法来获取元素。

<div id="myDiv" class="container">
  <p>Hello, World!</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

let div = document.getElementById('myDiv');              // 获取 ID 为 myDiv 的元素
let p = div.getElementsByTagName('p')[0];            // 获取 myDiv 元素下第一个 <p> 元素
let ul = div.querySelector('ul');                      // 获取 myDiv 元素下的 <ul> 元素

let lis = ul.querySelectorAll('li');                    // 获取所有 <li> 元素
let container = document.getElementsByClassName('container')[0];   // 获取 class 为 container 的元素

console.log(p.innerHTML);  // 输出 "Hello, World!"

修改元素

JavaScript 可以通过 innerHTML、innerText、setAttribute()、style 等属性或方法来修改元素的内容、属性、样式等信息。

let div = document.getElementById('myDiv');
div.innerHTML = '<p>Goodbye, World!</p>';              // 修改 div 元素的内容
p.setAttribute('data-key', '123');                      // 修改 p 元素的自定义属性
ul.style.backgroundColor = 'red';                      // 修改 ul 元素的背景色

事件处理

JavaScript 可以通过 addEventListener() 方法来绑定事件，例如 click、mouseover、keydown 等，然后在回调函数中实现事件响应逻辑。

<button id="countButton">Click me!</button>

let btn = document.getElementById('countButton');

btn.addEventListener('click', function() {
  console.log('Button clicked!');
});

AJAX

AJAX（Asynchronous JavaScript and XML）是一种无需刷新页面的异步数据交互技术，可以通过 JavaScript 发送 HTTP 请求并接收响应数据，实现局部数据更新、局部刷新等功能。

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    let resp = JSON.parse(xhr.responseText);
    console.log(resp);
  }
};

xhr.send();

本文介绍了 JavaScript 的基本概念，包括语言基础、DOM 操作、事件处理、AJAX 等方面，同时给出了多个示例说明来帮助读者更好地理解和运用这些概念。