编程语言
首页 > 编程语言> > 什么是JavaScript?

什么是JavaScript?

作者:互联网

一般来说,众所周知,HTML用于网页的结构,而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
来源: