JavaScript：网页脚本编程语言

陈一男学习网站[ ChenYinan.com ] - CCF - NOI - 菜鸟教程 - 编程题库 - C++语言 - API

一、JavaScript 简介

JavaScript 是一种广泛用于网页开发的编程语言，它可以为网页添加交互性和动态效果。JavaScript 可以在浏览器中直接运行，也可以在服务器端使用 Node.js 运行。

二、JavaScript 基础语法

1. 变量声明：使用var、let或const关键字声明变量。

// 使用 var 声明变量

var name = "John";

// 使用 let 声明变量

let age = 30;

// 使用 const 声明常量

const PI = 3.14;

2. 数据类型：JavaScript 有七种基本数据类型：number（数字）、string（字符串）、boolean（布尔值）、null、undefined、symbol（符号）和bigint（大整数）。此外，还有对象（object）类型，包括数组、函数等。

// 数字类型

let num = 10;

// 字符串类型

let str = "Hello, World!";

// 布尔类型

let isTrue = true;

// 数组类型

let arr = [1, 2, 3];

// 对象类型

let obj = { name: "John", age: 30 };

3. 运算符：JavaScript 支持各种运算符，如算术运算符（+、-、*、/等）、比较运算符（==、===、>、<等）、逻辑运算符（&&、||、!等）等。

let a = 10;

let b = 5;

// 算术运算

let sum = a + b;

let difference = a - b;

let product = a * b;

let quotient = a / b;

// 比较运算

let isEqual = a === b;

let isGreater = a > b;

// 逻辑运算

let isTrueAndFalse = true && false;

let isTrueOrFalse = true || false;

let isNotTrue =!true;

4. 控制流语句：包括条件语句（if、else if、else）、循环语句（for、while、do-while）等。

let num = 10;
// 条件语句
if (num > 5) {
    console.log("Number is greater than 5.");
} else if (num === 5) {
    console.log("Number is equal to 5.");
} else {
    console.log("Number is less than 5.");
}
// 循环语句
for (let i = 0; i < 5; i++) {
    console.log(i);
}
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

三、函数

1. 函数声明：使用function关键字声明函数。

function add(a, b) {

return a + b;

}

2. 函数表达式：将函数赋值给一个变量。

let subtract = function (a, b) {

return a - b;

};

3. 箭头函数：一种简洁的函数表达式形式。

let multiply = (a, b) => a * b;

4. 参数和返回值：函数可以接受参数，并返回一个值。

function divide(a, b) {
    if (b === 0) {
        return "Cannot divide by zero.";
    } else {
        return a / b;
    }
}

四、对象和数组

1. 对象：JavaScript 中的对象是一组键值对的集合。

let person = {

name: "John",

age: 30,

hobbies: ["reading", "playing games"],

};

console.log(person.name);

console.log(person.hobbies[0]);

2. 数组：数组是一组有序的值的集合。

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.length);

console.log(numbers[2]);

numbers.push(6);

console.log(numbers);

五、事件处理

JavaScript 可以响应网页上的事件，如点击按钮、鼠标移动等。

<!DOCTYPE html>
<html>
    <body>
        <button onclick="alert('Button clicked!')">Click me</button>
    </body>
</html>

或者使用 JavaScript 代码添加事件监听器：

let button = document.getElementById("myButton");
button.addEventListener("click", function () {
    alert("Button clicked!");
});

六、DOM 操作

JavaScript 可以通过文档对象模型（DOM）操作网页的内容和结构。

// 获取元素

let element = document.getElementById("myElement");

// 修改元素内容

element.innerHTML = "New content";

// 修改元素样式

element.style.color = "red";

element.style.backgroundColor = "yellow";

// 创建新元素

let newElement = document.createElement("div");

newElement.innerHTML = "New element";

document.body.appendChild(newElement);

七、总结

JavaScript 是一种强大的编程语言，可以为网页添加丰富的交互性和动态效果。通过学习 JavaScript 的基础语法、函数、对象、数组、事件处理和 DOM 操作等知识，你可以开发出更加复杂和有趣的网页应用。不断练习和实践，探索更多的 JavaScript 特性和技巧，将有助于你提升网页开发的能力。