标签：JavaScript  HTML  CSS

一般来说，众所周知，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
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。