我重新开始学习 JavaScript——面向初学者的基础指南
从这篇文章的标题就能看出，我正在从零开始重新学习 JavaScript，并最终目标是掌握 React 和 Node.js。
你可能想知道为什么。
嗯，我最近为一个机构写了一篇文章，以下是我收到的部分反馈：“……代码库在上次更新后有所改进，但代码质量仍然不够好。”
说实话，我当时感觉糟透了。不过，这仍然是一次建设性的意见。它促使我反思自己，我发现自己已经生疏了很多编程技能。
我正在努力复习基础知识，并邀请你一同参与！
你可以把它看作是一个面向初学者的教程，但它也适合已经掌握一些基础知识的人。它不会深入讲解，只是提供一些简短的片段和解释，方便那些想要快速复习的人。
- 我正在通过这个视频学习。
本文是我即将推出的系列文章的一部分。
在本教程中，我们将：
- 了解 JavaScript 是什么以及它为何如此强大
- 使用浏览器控制台编写并测试我们的第一个 JS 代码
- 探索数字和字符串等数据类型。
- 学习变量、表达式和语句
- 深入了解文档对象模型 (DOM)
- 使用逻辑和函数构建一个简单的购物车
我们开始吧。
什么是 JavaScript？
JavaScript (JS) 是一种用于创建动态网站的编程语言。
时不时地温习一下基础知识很有必要，这样才不会滥用或低估 JavaScript 的潜力。HTML
负责构建结构，CSS 负责添加样式，而JavaScript 则负责实现交互功能——例如下拉菜单、弹出窗口、计算器、游戏和实时反馈。
本教程使用谷歌浏览器和开发者工具控制台——无需其他软件。
你的第一个 JavaScript 代码（无需设置）
如何打开 JavaScript 浏览器控制台：
- 下载/安装您选择的任何网络浏览器，或者您可以使用电脑上的默认浏览器。
- 右键单击任何网页，
- 点击弹出下拉菜单中的“检查”选项，
- 选择“控制台”选项卡
在控制台选项卡中，输入：
alert('Hello there!');
这条命令会弹出浏览器提示框。JS 刚刚执行了你的指令。
现在试试：
console.log('Logging to the console');
这会将一条消息记录到控制台中，这是调试过程中非常重要的工具。
JavaScript 中的数字和运算
JS 处理所有基本数学运算：
2 + 2 // 4 addition
10 - 3 // 7 subtraction
10 * 3 // 30 multiplication
10 / 2 // 5 divison
15 % 2 // 3 modulus
10^3 // 1000 exponential
JavaScript 运算顺序
JS 遵循PEMDAS规则：
1 + 1 * 3 // 4
(1 + 1) * 3 // 6
注意 JavaScript 中的小数错误（浮点运算）
0.1 + 0.2 // 0.30000000000000004
由于计算机处理小数的方式，可能会出现一些小的误差。
在这种情况下，计算金额时，请使用分（较小的货币单位）。
(2095 + 799) / 100 // 28.94 (represent $20.95 + $7.99)
JavaScript Math.round 方法代码片段
用于Math.round()确保总数准确：
Math.round(2.7) // 3
Math.round(2.3) // 2
您可以像这样对税额或总额进行四舍五入：
Math.round((2095 + 799) * 0.1) / 100 // $2.89 tax rounded
JavaScript 中的变量：存储值
使用变量来存储和重用数据。
name = Dumebi's tutorial
console.log(name)
JavaScript 中的 let 和 const
let quantity = 3;
quantity = quantity + 1; // 4
const taxRate = 0.1;
// taxRate = 0.2; ❌ Error — const can’t be reassigned
最后一条评论的意思是，一旦变量名被赋予谓词const，其值或内容就不能在代码中后续更改。
const默认使用；let如果需要重新分配，请切换到其他设置。
JavaScript命名规范
- 请使用驼峰式命名法：
itemPrice，而不是item_price - 请先用字母开头（不要用数字或符号）。
字符串：在 JavaScript 中处理文本
字符串就是用引号括起来的文本：
'hello'
"world"
`template`
JavaScript 中的字符串拼接
starterText = "The price is "
price = "$15"
endText = starterText + price
console.log(endText)
// The price is $15
JavaScript 中的模板字面量
我们使用反引号、美元符号和花括号${}来表示模板文本：
num1 = 5
num2 = 6
add = num1 + num2
addt = "Total number is:" + `${add}`
console.log(addt)
// Total number is:11
模板字面量用于在 JavaScript 中连接两种类型的数据。在 DOM 操作中，它还可以用于向 DOM 表达式中添加 JavaScript 代码。
JavaScript 中的表达式与语句
表达式是一段用于生成值的代码：
3 + 4
语句执行一个操作：
let total = 3 + 4;
JavaScript 中的布尔运算符和比较运算符
布尔值只有两种可能：要么是，true要么是false。在决策过程中非常有用：
true
false
5 > 3 // true
5 === 5 // true
'5' === 5 // false (strict equality)
最后一条陈述是错误的，因为在 JavaScript 中，严格相等运算符===在 vLalue 和 type 的值完全相同时才为真。例如，'5' 虽然是数字，但string由于被引号括起来，所以类型为整数。然而，左边的 5 实际上是整数类型的数字。
在条件语句块中使用布尔值if：
const age = 16;
if (age >= 18) {
console.log('Adult');
} else {
console.log('Minor');
}
我们将在下一篇文章中更深入地讨论条件语句。
JavaScript 中的函数：可重用的代码块
函数可以帮助你避免重复输入：
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Chris'));
你可以向它们传递数据（参数）并返回结果。
function greet(name = 'Chris') {
return `Hello, ${name}!`;
}
console.log(greet());
JavaScript 中的 DOM（文档对象模型）简介
DOM 是网页上所有元素的动态树状结构。通过 JavaScript 中的 DOM 操作，您可以：
- 访问 HTML 元素
- 更改其内容
- 对用户操作做出反应
例如：更改标题
HTML：
<h1 id="main-heading">Original</h1>
JavaScript：
document.getElementById('main-heading').textContent = 'Updated with JS!';
即时创建元素
const newElement = document.createElement('p');
newElement.textContent = 'I was added with JavaScript';
document.body.appendChild(newElement);
JavaScript 中的 DOM 事件：监听用户操作
<button id="clickMe">Click Me</button>
document.getElementById('clickMe').addEventListener('click', function() {
alert('Button was clicked!');
});
script请记住，要使此方法生效，必须通过元素上的标签将包含代码的 JavaScript 文件添加到 HTML 文件中head。
JavaScript 初学者项目：购物车计算器
const item1 = 2095; // in cents
const item2 = 799;
let total = item1 + item2;
let shipping = total <= 1000 ? 499 : 0;
const tax = Math.round(total * 0.1);
const finalAmount = total + shipping + tax;
console.log(`Final Total: $${finalAmount / 100}`);
让我们把它连接到 DOM：
<button onclick="calculateCart()">Calculate</button>
<p id="result"></p>
function calculateCart() {
const item1 = 2095;
const item2 = 799;
const shipping = (item1 + item2 <= 1000) ? 499 : 0;
const tax = Math.round((item1 + item2) * 0.1);
const final = item1 + item2 + shipping + tax;
document.getElementById('result').textContent = `Total: $${final / 100}`;
}
现在，当你点击按钮时，它会计算并显示总数。
本文所有代码均在浏览器控制台中编写。
在第一篇文章中，我们介绍了：
- 在浏览器控制台中编写 JS
- 数字、字符串、变量、表达式和语句
- 布尔逻辑、比较和条件逻辑
- 函数用于代码重用
- DOM操作：更改元素、处理点击事件
我们甚至用 JavaScript 搭建了一个简单的购物车系统，并将其连接到了网页上。第一天就取得这样的成绩，还不错！我对接下来的工作充满期待。希望我能把这变成每周的例行工作。
感谢你和我一起学习。让我们继续努力！你可以在领英
上找到我。