通过建立一个计数器应用程序来学习JavaScript基础知识

迪鲁宾
210 阅读10分钟

JavaScript允许你制作动态网站。它是与HTML和CSS三位一体的网页开发的最后一部分，你用它来使你的静态网页变得动态。

当你掌握了HTML和CSS的基础知识后，你可能就会开始学习JavaScript。然后，经过一段时间后，你可能会陷入以下几种情况：

  • 你已经学会了所有花哨的JavaScript语法，但你无法理解它。
  • 你了解语法，但无法将其应用于你的个人项目。
  • 你想辞职，或者正在考虑改变职业。

在这篇文章和后面的文章中，我们将采取一种实用的方法来学习JavaScript。我保证我不会用语法来烦扰你，而是通过建立项目来学习。

在这篇文章和后面的文章中，我将假设你知道HTML和CSS的基础知识。但如果你不知道，你可以在继续学习本教程之前，通过这个适合初学者的课程来学习或刷新你的知识。

我需要什么工具来学习JavaScript？

JavaScript不需要复杂或昂贵的设置。你真正需要的是一台具有以下功能的电脑：

  • 一个文本编辑器（如Visual Studio Code）。
  • 一个现代的网络浏览器（如Chrome、Edge、Firefox等）。

如果你没有电脑，你仍然可以通过使用在线代码编辑器（如codepen.io）来学习本课。

如何开始学习JavaScript

如上所述，你只需要一个文本编辑器和一个浏览器就可以开始了。启动你的文本编辑器--我的例子是VSCod--在你希望你的代码文件所在的目录中。

创建一个名为index.html 的新文件。如果你使用的是VS Code，你的项目设置应该是这样的。

Screenshot--5--1

如何在浏览器中预览你的代码

一旦你完成了HTML文件的创建，你将想在你的浏览器中查看成品。

为了使这个过程更容易，我们需要在VS Code上安装 "实时服务器 "扩展。这个扩展将使我们每次对HTML文件进行修改时，网页会立即刷新。

点击VSCode右侧的扩展图标：

Screenshot--7-

寻找并安装 "实时服务器 "扩展。返回到你的HTML文件，从上下文菜单中选择 "用实时服务器打开"：

Screenshot--8-

你的网页现在应该在你的浏览器中可见。

如何将JavaScript嵌入到你的HTML页面中

你可以在你的HTML中包含JavaScript代码，直接把它放在脚本标签中：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <script>
      let my_variable = "hello JavaScript";

      // any JavaScript can go in here
    </script>
  </head>
  <body>
    <h1>Hello world</h1>
   
  </body>
</html>

但请记住，不建议使用上述方法。相反，你应该生成一个扩展名为.js 的外部JavaScript文件。

在你的项目目录下创建一个名为script.js 的新文件，然后用你的外部JavaScript代码的URL将其链接到你的HTML文件，像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <script src="script.js"></script>
    <title>Counter</title>
  </head>
  <body>
    ...
  </body>
</html>

JavaScript将在任何HTML之前执行。这通常会引起一些问题，因为你用JavaScript选择的HTML元素将是未定义的，因为浏览器是从上到下读取HTML代码的。

我们将使用脚本元素的defer 属性来纠正这一点，它指示浏览器在运行JavaScript代码之前先加载HTML：

<script defer src="script.js"></script>

现在我们都准备好了，让我们深入了解一些JavaScript的基本原理。

如何在JavaScript中使用变量

变量是一个占位符，用来存放你将来可能需要使用的值。在JavaScript中，所有的东西都存储在变量中。

要声明一个变量，你可以使用let 或const 关键字：

let first_variable
const last_variable`

你使用平等符号来给变量赋值：

let first_variable = “hello world”

如果你用let声明一个变量，你可以修改它。另一方面，如果你用const 来声明变量，你就不能改变它们的值--因此而得名。

在JavaScript中，你可以在变量中存储多种数据类型。

  • 字符串 - 任何单倍或双倍的、用引号包裹的数值都是字符串：
let my_string = "Hello world" // string
let my_second_string = "24" // string
  • 数字--这些数字不包含在引号中：
let my_number = 15 // number
let my_second_number = "15" // string
  • 数组 - 如果你想在一个单一的变量中存储多个值，数组是你最好的选择：
let my_array = [1, "hello", "4", "world"]
  • 布尔 - 你不需要将布尔值用引号括起来，因为它是一个真或假的值，而不是一个字符串：
let my_boolean = true;
  • 对象 - 对象允许你用键值对来存储数据：
let my_obj = {
    name: "John snow",
    aim: "Learning JavaScript",
    age: 20,
}

由于JavaScript将一切都解释为对象，你甚至可以在变量中保存对HTML元素的引用：

let my_button = document.querySelector("#id")

当我们使用document.querySelector("#id") 的时候，我们是根据元素的id来选择网页上的元素。 别担心，我们以后会详细介绍。

要在JavaScript中使用一个变量，只需像这样调用变量的名字：

my_button

为了演示变量如何在JavaScript中工作，让我们建立一个基本的计数器应用程序。在你之前创建的HTML文件中加入以下代码：

...
<body>
    <div class="counter_conatiner">
      <button id="subtract">-</button><span id="output">0</span
      ><button id="add">+</button>
    </div>
  </body>
...

创建一个style.css 文件，并添加以下样式，用CSS赋予它一些生命：

*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  font-family: inherit;
}
html,
body {
  height: 100vh;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
}
.counter_conatiner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-top: 1rem;
}
span {
  font-size: 3rem;
  background-color: #00bb00;
  padding: 2px 12px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 4px;
  color: #fff;
}
button {
  font-size: 3rem;
  cursor: pointer;
  background-color: transparent;
  border: 0px;
}

不要忘了像这样将CSS文件与你的HTML链接起来：

<head>
   ...
    <link rel="stylesheet" href="style.css" />
    <title>Counter</title>
  </head>

这就是你所拥有的--一个用HTML和CSS构建的基本计数器应用程序：

Web-capture_13-8-2022_75125_127.0.0.1

请记住，变量可以包含对HTML元素的引用。现在让我们把对按钮的引用保存在变量中。打开我们之前制作的script.js文件，在其中添加以下代码：

let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");

console.log(add, subract);

等一下，变量很有趣，对吗？虽然它们可以保存任何东西，但在使用变量之前，你应该注意一些基本准则：

  • 避免在变量名称的开头使用下划线，比如_my_variable ，因为它们非常容易混淆。
  • JavaScript不允许你用数字开头的变量名，比如8_variable.
  • my_variable,MY_VARIABLE, 和my_Variable 在JavaScript中都是完全不同的东西，因为大小写敏感。
  • 而且，在任何情况下，你都不应该使用任何JavaScript的保留词，包括let、const、true、false、function和其他任何词。

嘿，不要去破坏这些基本准则。所以，让我们继续讨论其他一些有趣的事情，我们可以用JavaScript来做。

如何在JavaScript中使用运算符

没有数学，世界会变成什么样子？如果没有数学，JavaScript又会是什么样子呢？

在JavaScript中，我们有一系列的数学符号，你可以用它们来进行简单的数学运算。

别担心，你可能已经熟悉了其中的大部分。

  • 加法 - 在JavaScript中，你使用加号（+）来连接（连接）字符串或添加数字：
let addition = 1 + 1 // 2
let addition = 1 + "1" // "11"
let addition = "hello" + "world" // "hello world"
  • 减法--你用减号（-）来减去数字：
let subtraction = 10 - 9 // 1
  • 乘法 - 在JavaScript中，当数字相乘时，你使用星号来表示乘法：
let multiplication = 2 * 2 // 4
  • 除法 - 你使用除号（/）来除数：
let division = 4 / 2 // 2
  • 等价 - 在JavaScript中使用双等号（==）来检查两个值是否相等：
let if_true = 2 + 4 == 6 // true
let if_false = 5 + 6 == 10 // false

还有其他的JavaScript运算符，但我在这里就不多说了。

现在我们已经熟悉了运算符，让我们回到我们的计数器应用程序，并修改它，使它在我们点击页面上的 "+"按钮时增加。

我们在上一节中声明了一些变量并保存了对HTML按钮的引用作为值：

let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");

...

现在，我们要使用我们的add 变量，所要做的就是调用它的名字：

add

但这还不够。我们需要知道它是否被点击了，而JavaScript为我们提供了我们称之为事件的东西。我们用它们来监听网页上发生的事件，例如当用户点击一个按钮或向下滚动页面时，以及其他一些事情。

下面是它的样子：

add.addEventListener("click", function () {
 // Every time the add button is pressed, this code will execute.
});

这并不需要直接说明问题。在这种情况下，我们使用addEventListener ，为按钮添加一个点击事件。我们将在另一节专门讨论事件。

现在，当按钮被点击时，监听器的回调中的任何代码都会被调用。

现在我们已经意识到了这一点，让我们增加输出值。要做到这一点，只需获得输出值，然后在按钮被按下时将其增加1。下面是做这个的代码：

let add = document.querySelector("#add");

add.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = output.innerText + 1;

  output.innerText = result;
});

除了innerText ，它在JavaScript中用于从网页上的HTML元素中获取文本，也可以修改HTML元素的文本，如上图所示，上面的大部分语法现在应该是可以识别的。

在下面的例子中，点击添加（+）按钮，可以看到计数器的增量。

和你预期的不一样，是吗？因为let output = document.querySelector("#output") 的值是一个字符串，而JavaScript不允许你将字符串和数字相加，所以你必须在添加之前将输出转换成一个数字：

let result = Number(output.innerText) + 1;

在上面的代码中，我们使用Number() 方法将字符串变为数字。

让我们再试一下前面的例子，在我们做了这些改变之后。

现在它正按计划工作。

如何在JavaScript中使用条件语句

如果...怎么办？条件式被用来解决这样的问题："如果我们想让我们的计数器应用在10的时候停止计数呢？"或者 "如果我们想跳过一个数字呢？"当你面临这样的条件性问题时，你就需要一个条件式。

我们今天在JavaScript中要看的唯一条件是if...else语句：

if (condition) {
  /* code to run if condition is true */
} else {
  /* run some other code instead */
}

条件式允许我们只在满足给定条件的情况下运行代码。例如，如果我们的计数器大于10，我们可以将其重置为零（0）：

let add = document.querySelector("#add");

add.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = output.innerText + 1;

  if (result > 10) {
    result = 0;
  }

  output.innerText = result;
});

如果结果大于10，前面代码中的if语句将结果返回到0。在下面的例子中，尝试将计数器增加到大于10的数字。

你会看到，我们省略了else语句。这是因为它是可选的。

如何在JavaScript中使用函数

我们终于结束了我们的小型计数器应用。让我们增加减法的功能。我们所要做的就是从输出中扣除1：

let add = document.querySelector("#add");
let subract = document.querySelector("#subtract");

add.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = Number(output.innerText) + 1;

  if (result > 10) {
    result = 0;
  }

  output.innerText = result;
});

subract.addEventListener("click", function () {
  let output = document.querySelector("#output");
  let result = Number(output.innerText) - 1;

  if (result < 0) {
    result = 0;
  }

  output.innerText = result;
});

就这样，一个基本的JavaScript计数器应用就完成了。

看一下上面那支笔的完整代码，描述一下你所观察到的。

好吧，我注意到有很多重复的代码，这不是好事。你应该在你的代码中避免重复。

出于这个原因，我们使用了函数。我们可以写一段代码，然后用函数尽情地使用它。

你可以使用JavaScript中的函数关键字来创建一个函数：

function add() {
  alert("hello world")
}

函数也可以接受参数：

function add(number1, number2) {
 return number1 + number2
}

这些参数的使用方式与变量在函数中的使用方式相同。它们本质上是占位符。

函数，就像变量一样，可以用它们的名字来调用。唯一的区别是，在调用一个函数时，你必须包括小括号--（）：

add(2,4) // 6

你可能也见过以这种方式声明的函数：

const add = (number1, number2) => number1 + number2;

上面的内容相当于正式的add() 函数。它们被称为箭头函数，从现在开始我们将这样声明我们的函数。

我相信目前这些信息已经足够介绍了，所以我把这个任务留给你。

JavaScript每周挑战

我们在本课中创建了一个简单的计数应用，但它包含了很多重复的代码，所以这里有一个挑战给你。

  • 创建一个名为addAndSubtract() 的单一函数，该函数可以处理加法和减法运算，而不需要重复任何代码。

总结

在这篇文章中，我们学习了如何使用JavaScript，开发了一个小的计数器应用，并了解了变量、条件和函数。

另外，祝你编码愉快!

avatar
文章
阅读
粉丝