什么是JavaScript？

一般来说，众所周知，HTML用于网页的结构，而CSS用于网页的样式。当它进入JavaScript时，将为网页创建功能。

• HTML提供了网站的基本结构，该结构由CSS和JavaScript等其他技术增强和修改。
• CSS用于控制演示文稿、格式和布局。
• JavaScript用于控制不同元素的行为。

因此，JavaScript是一种用于为网站带来活力的编程语言。它通过添加功能使网页具有交互性。在简单中，基本理解——使用JavaScript，您可以在单击按钮时让按钮执行操作，在不刷新的情况下更新页面内容，等等。

如何开始？

从JavaScript开始，你只需要两件事：编写代码的工具和编译方法。像Visual Studio Code这样的东西，然后在Google Chrome等网络浏览器中测试它，看看它如何影响网页。

JavaScript基础知识

变量类似于携带信息的容器。它们可以保存数字、文本和其他数据。

var age = 25 // 存储一个数字
var name = "Alice" // 存储字符串（文本）
var isActive = true // 存储布尔值（true/false）j

运算符与数学工具相似。它们允许您添加、减法、比较和做各种其他事情。

var sum = 5 + 3 // 加法
var 差 = 10 - 4 // 减法
var isGreater = 7 > 4 // 比较
var concatStr = "Hello" + " " + "World" // 字符串串联

如果语句-假设您正在编写代码并做出判断。如果是真的，就这样做；否则，做别的事情。

var温度 = 30

如果（温度> 25）{
    console.log（“今天很热！”）// 如果条件为真
} 否则 {
    console.log("这是愉快的一天。") // 如果条件为假
}

循环类似于重复的模式。您可以使用它们来重复执行任何操作。

// 从1到5打印数字的for循环示例
for (var i = 1; i <= 5; i++) {
    console.log（i）
}

// 从10倒计时到1的while循环示例
var倒计时 = 10;
而（倒计时>= 1）{
    console.log（倒计时）
倒计时--
}

功能

函数类似于单独的代码块，在调用时执行特定任务。它们使您能够编写一段代码一次，并在整个程序中重复使用。将函数视为可重用指令，可以在需要时调用。

定义一个函数
您可以使用以下语法定义函数：

函数函数名称（参数）{
 // 要执行的代码
}

以下是添加两个数字的简单函数示例：

函数addNumbers（a，b）{
 返回a + b
}

调用函数

要使用函数，您用它的名称“调用”它，并提供任何必需的参数：

var result = addNumbers(5, 3) // 调用函数
console.log（结果）//输出：8

返回声明
函数在调用时使用“return”语句发送结果。此结果可以存储在变量中，也可以直接用于代码的其他部分。

Console.log功能
`console.log()`用于将消息、值或信息输出到浏览器的控制台。它对于检查变量、检查某些代码块是否正在执行或对错误进行故障排除特别方便。

输出文本
您可以直接在括号内输出文本：

console.log（“你好，世界！”）

输出变量
您可以输出变量的值以查看其当前状态：

var年龄=25；
console.log("我的年龄是:", age);

阵列

数组就像可以容纳多个值的列表，无论是数字、字符串还是其他数组。它们对于存储和组织相关数据非常有用。

创建数组
您可以通过将其元素括在方括号中来创建数组：

var水果=['苹果'，'香蕉'，'橙色']

访问数组元素
您可以使用它们的索引（从0开始）访问数组中的元素：

var firstFruit = 水果[0] // '苹果'
var secondFruit = 水果[1] // '香蕉'

修改数组元素
您可以通过为该索引分配新值来更改数组元素的值：

水果[2] = '葡萄' // 将'橙色'更改为'葡萄'

数组方法
数组具有执行各种操作的内置方法：

fruits.push('pear') // 在末尾添加'pear'
fruits.pop('pear') // 删除最后一个元素('pear')
fruits.length // 返回数组中的元素数量

物体

对象就像容器，将相关数据存储为键值对。它们是组织更复杂信息的强大方式。

创建对象
您可以通过使用花括号定义其属性和值来创建对象：

var person = {
 名字：“约翰”，
 姓氏：'Doe'，
 年龄：30，
 isStudent：false
}

访问对象属性
您可以使用点符号或方括号访问对象属性：

var firstName = person.firstName; // 'John'
var age = person['age']; // 30

修改对象属性
您可以像访问它们一样修改对象属性：

person.lastName = 'Smith'; // 将'Doe'更改为'Smith'
person['isStudent'] = true; // 将'false'更改为'true'

嵌套对象
对象也可以包含其他对象作为属性：

var car = {
 制作：'丰田'，
 型号：'Camry'，
 年份：2022年，
 所有者：{
   名字：'爱丽丝'，
   姓氏：'Johnson'
}
}

对象方法
对象也可以有方法，这些方法是在对象中定义的函数：

var计算器 = {
 添加：函数（a，b）{
 返回a + b
}
 减去：函数（a，b）{
 返回a-b
}
}
var sum = calculator.add(5, 3) // 8
console.log（总和）
var difference = calculator.subtract(10, 4) // 6
console.log（差异）

DOM操作和事件

DOM（文档对象模型）—网页的结构由DOM（文档对象模型）表示为对象树。JavaScript可以编辑此树，以动态更改网页的内容、外观和行为。

选择元素
您可以使用各种方法选择HTML元素：

// 按ID选择
var headerElement = document.getElementById('header')
//按类名选择
var buttons = document.getElementsByClassName('btn')
// 按标签名称选择
var paragraphs = document.getElementsByTagName('p')
// 通过CSS选择器选择
var mainContent = document.querySelector('.main-content')

修改内容
您可以使用“textContent”和“innerHTML”等属性更改HTML元素的内容：

headerElement.textContent = "新标题文本"
mainContent.innerHTML = "<p>这是一个新段落。</p>"

改变风格
您可以使用“样式”属性修改元素的样式：

mainContent.style.backgroundColor = "lightblue"
按钮[0].style.color = "红色"

添加和删除类
您可以添加或删除类以应用CSS样式或切换可见性：

mainContent.classList.add（'highlight'）
按钮[1].classList.remove（'active'）

处理事件
事件是在浏览器中发生的操作或事件，例如单击按钮或按键。您可以监听这些事件并执行响应代码。

// 添加点击事件侦听器
headerElement.addEventListener('click', function() {
 警报（“点击了标题！”）
}）

事件对象
当事件发生时，浏览器会创建一个包含事件信息的事件对象。您可以在事件处理程序中访问此对象：

button.addEventListener('click', function(event) {
 console.log（“按钮点击：”，event.target）；
});

事件类型
有许多类型的事件，例如“click”、“mouseover”、“keydown”等。您可以将事件侦听器附加到不同的元素上，以进行不同的操作。

inputElement.addEventListener('keyup', function(event) {
 console.log("Key pressed:", event.key);
});

防止默认行为
您可以使用事件对象的“preventDefault()”方法阻止事件的默认行为（例如，阻止表单提交）。

formElement.addEventListener('submit', function(event) {
 event.preventDefault(); // 阻止表单提交
 // 处理表单数据
});

异步JavaScript
—这是一个深度主题，所以，让我们用基于场景的来理解

假设你在厨房里准备吃的东西。你开始为意大利面加热水，但你不只是站在那里等它沸腾；你在水加热时做其他事情。JavaScript中的异步编程类似于，您可以在等待特定操作完成的同时保持程序运行。

回电：喜欢订购食物
回电类似于预订餐厅。你告诉服务员你想要什么，当厨师做你的食物时，你可以继续和别人说话。回调是JavaScript中的函数，您可以传递给另一个函数，以说：“完成后，调用此函数。”这允许您的程序在等待任务完成时做其他事情。

函数prepareFood（顺序，回调）{
 // 厨师需要一些时间来准备订单
 setTimeout（函数（） {
 var food = "这是你的" + order + "!"；
 回电（食物）；
}, 1000); // 需要1秒
}
功能吃（食物）{
 console.log（“吃：”+食物）；
}
准备食物（“披萨”，吃）；//在等待披萨时继续聊天

承诺：就像收到包裹一样

承诺有点像在线订购。您可以保证您的产品将交付，并且您可以在等待时做其他事情。包裹到达后，你可以打开它。Promises在JavaScript中的功能类似——你得到一个承诺，即会发生一些事情，当它准备好时，你可以对结果做任何事情。

函数订单包（项目）{
 返回新Promise（函数（解决，拒绝）{
 setTimeout（函数（） {
 var package = "您的" + 项目 + "已到达！"；
 解决（包）；
 // 如果有问题：拒绝（“对不起，我们搞砸了”）；
}, 2000); // 需要2秒
});
}
订单套餐（“书”）
.then（功能（包）{
 console.log（包）；
}）
.catch(function(error) {
 console.error（错误）；
});

Async/Await：像食谱一样

Async/await就像一步一步地遵循食谱。你停下来等待事情完成，但你可以继续准备剩下的菜。JavaScript中的异步/等待允许您设计看起来线性且易于理解的代码，即使它同时做多件事。

异步函数 cookDinner() {
 尝试{
 等待准备食物（“沙拉”）；
 等待订单包装（“刀具套装”）；
 console.log（“晚餐准备好了！”）；
} 抓住（错误）{
 console.error("出错了: " + 错误);
}
}
cookDinner(); // 遵循食谱而不迷失方向

标签：JavaScript, HTML, CSS
来源：