JavaScript 学习笔记

1. 基础语法

JavaScript 是一种动态、弱类型的解释性编程语言，主要用于网页前端的交互和动态效果实现。以下是一些基础语法：

变量声明

javascriptCopy Code
var x = 1;
let y = 2;
const z = 3;

var 声明的变量可以被重复赋值。
let 声明的变量只能被赋值一次。
const 声明的变量是常量，不可被修改赋值。

数据类型

JavaScript 支持多种数据类型，包括：数字、字符串、布尔、数组、对象等。

javascriptCopy Code
let num = 123;
let str = 'hello world';
let bool = true;
let arr = [1, 2, 3];
let obj = {name: 'Tom', age: 18};

条件语句

javascriptCopy Code
if (num > 0) {
  console.log('num is positive');
} else if (num < 0) {
  console.log('num is negative');
} else {
  console.log('num is zero');
}

循环语句

javascriptCopy Code
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

let j = 0;
while (j < arr.length) {
  console.log(arr[j]);
  j++;
}

2. DOM 操作

JavaScript 可以通过 DOM（文档对象模型）操作网页上的元素，例如改变元素的内容、样式、属性等。

获取元素

javascriptCopy Code
let ele = document.getElementById('myId');
let eles = document.getElementsByClassName('myClass');
let ele2 = document.querySelector('#myId');
let eles2 = document.querySelectorAll('.myClass');

改变元素

javascriptCopy Code
ele.innerHTML = 'new content';
ele.style.color = 'red';
ele.setAttribute('myAttr', 'value');

3. 事件处理

JavaScript 可以通过监听事件来响应用户操作，例如点击、鼠标移动等。

javascriptCopy Code
ele.onclick = function() {
  console.log('clicked');
};
ele.addEventListener('mouseover', function() {
  console.log('mouse over');
});

示例

以下是一个简单的示例代码，实现了一个按钮点击后改变文本颜色的效果：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
</head>
<body>
  <p id="myText">Hello, world!</p>
  <button id="myBtn">Click me</button>

  <script>
    let btn = document.getElementById('myBtn');
    let txt = document.getElementById('myText');

    btn.onclick = function() {
      txt.style.color = 'red';
    };
  </script>
</body>
</html>

以上就是 JavaScript 的一些基础语法和用法，希望对您有所帮助。