以下是关于 JavaScript(JS)基础的介绍:
一、JavaScript 简介
JavaScript 是一种广泛用于网页开发的编程语言,它可以为网页添加交互性和动态效果。它运行在浏览器环境中,也可以在服务器端(如 Node.js)使用。
二、语法基础
- 变量声明
- 使用
var
、let
和const
来声明变量。let
和const
是在 ES6 中引入的,它们具有块级作用域,相比var
更加安全和灵活。 - 例如:
- 使用
let name = 'John';
const age = 30;
- 数据类型
- JavaScript 有七种基本数据类型:
number
(数字)、string
(字符串)、boolean
(布尔值)、null
、undefined
、symbol
(符号)和bigint
(大整数)。还有一种复杂数据类型object
(对象)。 - 例如:
- JavaScript 有七种基本数据类型:
let num = 10; // number
let str = 'Hello'; // string
let isTrue = true; // boolean
let nothing = null;
let undef; // undefined
let sym = Symbol('description'); // symbol
let bigIntValue = 10n; // bigint
let obj = { name: 'John', age: 30 }; // object
- 运算符
- 算术运算符:如
+
、-
、*
、/
、%
等。 - 比较运算符:如
==
、===
、>
、<
、>=
、<=
等。 - 逻辑运算符:如
&&
(与)、||
(或)、!
(非)。 - 例如:
- 算术运算符:如
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true
console.log(a === b); // false
console.log(a > 0 && b > 0); // true
- 控制流语句
if...else
语句用于条件判断。for
、while
和do...while
循环用于重复执行代码块。switch
语句用于多分支选择。- 例如:
let num = 10;
if (num > 5) {
console.log('Number is greater than 5');
} else {
console.log('Number is less than or equal to 5');
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
let choice = 2;
switch (choice) {
case 1:
console.log('Option 1');
break;
case 2:
console.log('Option 2');
break;
default:
console.log('Other option');
}
三、函数
- 函数定义
- 使用
function
关键字定义函数。可以接受参数,并可以返回值。 - 例如:
- 使用
function add(a, b) {
return a + b;
}
let result = add(10, 5);
console.log(result); // 15
- 匿名函数和箭头函数
- 匿名函数是没有名称的函数,可以作为参数传递给其他函数或立即执行。
- 箭头函数是一种简洁的函数表达式,在 ES6 中引入。
- 例如:
// 匿名函数
let multiply = function (a, b) {
return a * b;
};
console.log(multiply(3, 4)); // 12
// 箭头函数
let square = (num) => num * num;
console.log(square(5)); // 25
四、对象
- 对象创建
- 使用对象字面量或构造函数创建对象。
- 例如:
// 对象字面量
let person = {
name: 'John',
age: 30,
sayHello: function () {
console.log('Hello!');
},
};
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function () {
console.log('Hello! I am ' + this.name);
};
}
let person2 = new Person('Jane', 25);
- 属性和方法访问
- 使用点表示法或方括号表示法访问对象的属性和方法。
- 例如:
console.log(person.name); // John
person.sayHello(); // Hello!
console.log(person['age']); // 30
五、数组
- 数组创建
- 使用数组字面量或构造函数创建数组。
- 例如:
let numbers = [1, 2, 3, 4, 5];
let fruits = new Array('apple', 'banana', 'orange');
- 数组操作
- 可以通过索引访问数组元素,修改、添加或删除元素。
- 例如:
console.log(numbers[0]); // 1
numbers[1] = 10;
numbers.push(6);
numbers.pop();
- 数组遍历
- 使用
for
循环、forEach
方法等遍历数组。 - 例如:
- 使用
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
numbers.forEach((num) => console.log(num));
六、事件处理
在网页开发中,JavaScript 可以处理用户交互事件,如点击、鼠标移动、键盘输入等。
- 事件绑定
- 使用
addEventListener
方法或在 HTML 元素的属性中直接指定事件处理函数。 - 例如:
- 使用
<button id="myButton">Click me</button>
<script>
let button = document.getElementById('myButton');
button.addEventListener('click', function () {
console.log('Button clicked');
});
</script>
七、DOM 操作
JavaScript 可以操作网页的文档对象模型(DOM),改变页面的内容和结构。
- 查找元素
- 使用
document.getElementById
、document.getElementsByTagName
、document.getElementsByClassName
等方法查找 HTML 元素。 - 例如:
- 使用
let element = document.getElementById('myElement');
let elements = document.getElementsByTagName('div');
let elementsByClass = document.getElementsByClassName('myClass');
- 修改元素内容和属性
- 可以修改元素的文本内容、HTML 内容、属性值等。
- 例如:
let element = document.getElementById('myElement');
element.textContent = 'New text';
element.innerHTML = '<strong>New HTML</strong>';
element.setAttribute('class', 'newClass');