Javascript 运算符和表达式

当我们执行 if 语句或 for 循环时,我们会使用Javascript 表达式。它们让我们比较变量、数字和其他类型的数据,以检查它们是否正确。在本教程中,我们将研究如何构造表达式,以及我们可以在其中使用的运算符。

Javascript 比较运算符#

if以前,我们使用下面的代码来检查一个块中的某个东西是否小于其他东西:

以上,i < 5是我们的表达式。小于号 ( < ) 称为比较运算符。比较运算符的完整列表可以在下面找到:

比较运算符定义<小于,即1小于5<=小于等于,即5小于等于5>=大于等于,即5大于等于5&g[……]

继续阅读

Javascript数学运算

在所有编程语言中,执行数学运算都是例行公事。任何应用程序都需要加法、减法和许多其他操作。在 Javascript 中,我们可以通过简单的操作和利用 JavascriptMath对象来做到这一点。

Note: 要进行数学运算,我们需要比较数字。引号中的数字在数学运算中不起作用。

数学运算#

让我们看一个简单的数学运算,我们如何在此处介绍的变量中使用数学。基本的数学运算就像我们将它们写在纸上一样:

上面,我们定义了一个变量i。然后我们定义另一个变量 ,j它等于i加 10。因此,当我们在代码中引用时j,它将返回 11。

我们可以做很多其他的数学运算。让我们[……]

继续阅读

Web Workers 教程:了解 Javascript Web Workers 的工作原理

Javascript 是一种单线程语言。这意味着 Javascript 在一个进程上运行。它在您的代码中一次只能做一件事。

这通常很好,因为 Javascript 非常快。但有时,它还不够快。当我们想要同时运行多个进程时,我们必须使用web workers。

Web Workers 什么时候有用?#

在复杂的大型应用程序中,Javascript 只能从上到下运行您尝试使用的文件或函数。如果我们在彼此之上进行大量高计算过程,则可能会出现问题。

想象一个简单的图像上传网站,它可以识别照片中的对象。您上传图像,然后通过复杂的算法对图像进行处理以识别帧中的对象。由于 Javas[……]

继续阅读

如何使用 Javascript 正则验证电子邮件格式

电子邮件验证是一次又一次出现的事情。电子邮件验证并不棘手,假设您有正确的正则表达式。不幸的是,有很多方法可以在电子邮件上执行 RegEx,而您在 Google 上找到的大部分内容通常会消除有效的电子邮件,或者更糟糕的是,根本不起作用。

有一个称为 RFC822 的标准正则表达式,它是海量的. 我不建议使用它。相反,您可以使用 RFC5322,它的继任者,它更短且更易于使用。下面的函数将验证放入其中的任何电子邮件:

注意:这是非常完整的证明,但确定电子邮件是否有效的最佳方法是向其发送电子邮件,看看会发生什么。此 RegEx 将确保您的电子邮件格式正确。[……]

继续阅读

什么是 NodeList,它们是如何工作的?

您是否知道 Javascript 不会将多个元素的选择分类为数组?相反,它是一种叫做 NodeList 的东西。节点列表本质上是元素列表。要生成NodeList,我们可以这样做:

上面的代码将返回在页面上找到的所有段落的列表作为NodeList.

节点列表很有趣,因为它们不是数组,因此它们不会继承数组具有的所有不同功能。一个值得注意的例子是,在一些较旧的浏览器中,例如 Internet Explorer,NodeLists 不继承该foreach功能。

因此,如果您想为每个段落添加事件侦听器,以下代码将在 Internet Explorer 中引发错误:

由于这[……]

继续阅读

解决 HTTP 在 Node.JS 中将标头发送到客户端后无法设置标头

在使用 express 和 Node.JS 时,我们有时会得到这个错误:

如果您不熟悉 HTTP 标头,这是一个非常令人困惑的错误。当您向用户或客户端发送超过 1 个响应时,会出现此错误。这意味着接收器得到两个响应,而它应该只得到一个。要解决此问题,请确保您只发送一个响应。

如何解决 ERR_HTTP_HEADERS_SENT 错误#

这通常是在您向客户端发送响应时引起的,然后一段异步代码在第一个响应之后发送了第二个响应。查看您的代码,您可能不小心使用res.send了两次。例如,以下将导致错误:

注意:其他 res 函数,比如res.redirect会导致同样[……]

继续阅读

Web 组件和 Shadow DOM

如果你曾经使用过 React,你会很熟悉 Web 组件。它们是自定义的、可复制的 HTML 片段,可以在代码的其他地方引用。Web 组件是它们自己的 HTML 规范,因此您可能会惊讶于它们可以与纯 Javascript 和 HTML 一起独立使用。让我们来看看如何做到这一点。

想象一下,我们有一个状态栏项目,我们可以在多个地方重复使用它。它的结构可能如下所示:

想象一下,必须将它粘贴到多个位置并对其进行维护,以使其看起来始终相同——如果有一天我们更改状态栏会怎样?我们需要返回所有出现状态栏的地方,并更新它们!Web 组件允许你在多个地方引用这段 HTML,并给它一个唯一的标签,[……]

继续阅读

Promises 和 Await 如何在 Javascript 中工作

Javascript 是一种异步语言。这意味着一行代码可以运行,并触发一个动作,而下一行运行。如果我们需要等待动作完成,那将成为一个问题。

一个完美的例子就是运行 API。假设我们使用 fetch 从 API 中获取数据,然后需要在下一行使用它:

所以我们尝试获取一个页面,然后使用该页面应该返回的数据。问题是获取请求仍在运行,而其他行已完成执行。fetch异步运行,这意味着它会触发,并且在它试图得到它的答案时其他行可以继续。

我们必须以某种方式等待 fetch 完成,以获得我们需要的响应。

Await#

Await是我们想要等待一行完成时使用的关键字,但它只在[……]

继续阅读

Javascript 点击 五彩纸屑效果的实际

演示链接

这个怎么运作#

让我们考虑一下这种效果如何发挥作用的基本原理:

  • 首先:我们需要创建所有单独的五彩纸屑。
  • 接下来:我们需要像五彩纸屑一样移动它们,即达到一个顶峰,然后下降。?
  • 最后:我们需要淡出并移除五彩纸屑。

为了制作五彩纸屑,我们将制作很多小divs。我们将为它们分配所有随机颜色。

为此,代码如下所示:

现在我们已经创建了五彩纸屑的结构,我们必须进入它的运动。

移动#

建模运动需要方程。对于这篇文章,我们将使用传统的弹丸运动方程。如果您不熟悉这些,它们会模拟物体从起点沿 x 和 y 轴的运动,给定一定的速度。

方程如下所示:[……]

继续阅读

如何使用 vanilla Javascript 检查用户是否滚动到页面底部

在许多网站上,滚动到底部通常表示“加载更多内容”。例如,在 facebook 或 instagram 上,滚动到页面底部会导致自动加载更多内容。

但是,您如何确定用户是否滚动到页面底部?使用 Javascript 非常容易。

如何检查用户是否滚动到底部#

要检查用户是否在页面底部,请使用以下代码:

不相信我?尝试滚动到此页面的底部以查看它的实际效果。[……]

继续阅读