曾 俊

曾 俊

1657903740

用原生 JavaScript 构建可访问的词汇表

这是我第一次写这样的文章。我的大部分文章都是由我的一个想法引发的,然后我进行研究以使其发挥作用,但这篇文章的灵感来自我最近使用电子学习平台Kognity进行的一个项目,他们有兴趣为他们的用户提供使用他们的平台时,一流的可访问性体验。

在我们可以访问的平台的许多部分中,有一个来自他们教科书的交互式术语表,可以在他们的在线平台上作为可扩展/可折叠的侧边栏使用。由于我们在构建成功、可访问的解决方案方面拥有非常好的经验,因此我想分享一下。

Kognity 解决方案是用 Vue.js 编写的,但它的大部分功能都是特定于他们的平台的——因为我想让这篇文章尽可能通用——我将在 vanilla JavaScript 中实现一个类似的解决方案。应该很容易为各种其他框架重新设计此实现。

关于本文截图和屏幕阅读器使用的说明

屏幕阅读器和浏览器组合之间可能存在显着差异,本文中的许多屏幕截图将展示屏幕阅读器的工作原理。我主要在 Mac 上,因此我的大部分屏幕截图都将在 Firefox、Chrome 和 Safari 上使用 VoiceOver。但是,本文中提供的代码已经在 Windows 上使用NVDA和 Firefox 进行了测试。在行为存在差异的情况下,将记录该差异。

由于存在这些显着差异,您可能需要考虑使用Assistiv Labs之类的解决方案进行测试,因为它们可以为 VM 提供您可以远程访问的不同屏幕阅读器设置。在任何情况下,仅在一个屏幕阅读器/浏览器组合上测试此代码都是错误的,因为它们的输出和功能存在很大差异,并且您很容易错过问题。

探索词汇表示例

Kognity 词汇表

所以,首先,让我们看看 Kognity 词汇表是如何工作的。在以下屏幕截图中,您可以看到 Kognity 生物学教科书的一部分以及右上角的打开词汇表的按钮。

Kognity 词汇表

 

单击词汇表按钮时,词汇表将打开,您会看到如下内容:

打开时的 Kognity 词汇表

 

你会看到词汇表中的一些字母是灰色的——这些字母没有与教科书的这个特定部分相关联的条目。如您所见,字母 A 周围有一个蓝绿色圆圈,表示它是词汇表第一次打开时被选中的字母(当然,假设 A 下有条目)。

此词汇表还有一些附加功能,例如按文本输入过滤;我不会在本文中实现类似的功能,但为了完整起见,我会提到它。

HBOMax 电影片名词汇表

我相信你以前见过这样的事情:字母表中的字母被列出来,单击其中一个字母会显示与该字母相关的一些内容。在这种情况下,它是一个词汇表,但您会看到用于导航视频产品的类似 UI 模式,例如在 HBOMax 上:

HBOMax 标题屏幕

如果您单击右侧边栏中的一个字母,页面将向下滚动到标题以该字母开头的第一部电影。

所以我想我们可以同意这是一种常见的设计,但不太常见的是一种经过深思熟虑、易于使用的设计。我们将在随后的部分中通过这个 HBOMax 示例进一步演示这一点。

制作可访问的词汇表:方法

从本质上讲,可访问性是一个用户体验问题,每个开发人员和设计师都必须发挥他们的想象力来解决它,就像他们必须对他们的应用程序的任何使用一样。无论您可能拥有哪些特定的能力集,该集都不会与您所有用户的能力相匹配。

这种想象行为本质上是制作合理可访问的应用程序的关键,但请注意警告。我说合理的可访问性是为了强调,虽然有些部分会非常困难,但使应用程序可访问所需的编程工作是微不足道的,只要您完成了想象应用程序在以下情况下将如何使用的必要工作某人的能力可能与你自己的不同。通常,这种必要的想象力工作也不会特别耗费精力!

建立我们的用户资料

让我们首先想象一下具有不同、特定能力集的用户将如何使用内容和工具与您网站上的内容进行交互。拥有一组用户配置文件会很有帮助。为了构建我们的词汇表,我们将想象三个不同的配置文件,如下所示:

用户配置文件 1:不使用任何辅助设备和技术的用户

这包括那些不使用辅助设备或技术,但仍可能需要它们或缺乏一些无法用矫正设备轻松修复的能力的人。因此,除了完全没有任何问题的人之外,在这个类别中,我们将放置:

我们可以将其视为我们的基线普通用户。

用户资料 2:行动不便者

这包括专门使用键盘和选项卡快捷方式导航站点的用户,即无法使用鼠标或触摸板的用户。

用户资料 3:使用屏幕阅读器的用户

有很多人可能符合这个描述。有些人可以在没有屏幕阅读器的情况下很好地查看页面,例如有阅读障碍或其他语言处理困难但喜欢使用屏幕阅读器寻求帮助的人。然后,有些视力障碍的人可能仍然更喜欢使用屏幕阅读器来帮助他们。最后,有些用户是盲人,绝对需要屏幕阅读器。

您可以从2021 年 6 月 30 日最后更新的第九次 WebAim屏幕阅读器用户调查中阅读屏幕阅读器使用统计数据的细分。

这些不同的用户如何使用同一个网页?

不熟悉测试可访问性问题的开发人员决定通过选项卡来测试一切是如何工作的。如果您可以标记事物,与它们交互并确保它们正常工作,则假定该网站是可访问的。

所有交互元素都应该通过 Tab 键访问,这当然是可访问性的要求,但这主要是针对我们第二组中的用户的要求,因为使用 Tab 键对于行动不便的人来说很好,他们也可以直观地处理页面的内容。

但是,屏幕阅读器的用户需要其他方式来订购和处理页面内容,我们应该在我们的解决方案中考虑这一点。

为屏幕阅读器设计网页转子

具体来说,每个屏幕阅读器都有一种方法可以独立于正常的页面顺序来阅读页面的有用部分。这对于查找您想在网站上执行的操作以及导航到您感兴趣的页面部分很有用。

例如,在 VoiceOver 中,这称为网络转子(或简称转子)。下面是 Kognity 上的转子视图,词汇表已关闭。

Kognity 网站上 VoiceOver 的表单控制 web 转子

您会注意到的第一件事是只有 13 个表单控件关闭了词汇表按钮。那太棒了!想象一下,如果您在它打开时与之交互:将有 12 个按钮,加上 26 个英文字母按钮,总共需要读出 38 个条目。那是很多!并且,对于用户组 3 中有一定视力的人来说,他们当然能够在视觉上使用屏幕阅读器元素的视图。

我们为什么要制作可访问的词汇表?

为了确保人们可以最佳地使用我们页面上的词汇表,我们应该设计一个合理的工作流程。如果与页面交互的工作流程没有经过深思熟虑,我们的页面将无法使用。

作为具有可访问性问题的实现示例,我将在 HBOMax 上挑选一些内容。我对他们没有任何反对意见(尽管我希望有更多经典的华纳兄弟内容),但我刚刚获得了会员资格,我注意到这些事情,因为我是一名开发人员。

假设我们正在使用词汇表样式导航的页面之一,例如喜剧电影 A-Z。如果我们使用 VoiceOver 并决定检查转子,转子将有大约 38 个按钮可供使用:

HBOMax 应用程序中 VoiceOver 的表单控件

这些按钮中只有八个具有有意义的标签,或者让我们有机会了解它们的作用。其余的都标记为暗淡按钮

“变暗按钮”是 VoiceOver 宣布按钮当前被禁用且无法由应用程序使用的方式。您可能认为暗色按钮用于按电影标题的第一个字母导航类别,但是当您单击查看以该特定字母开头的标题时,您会意识到情况并非如此(尤其是因为您不太可能'会计算变暗按钮的数量并意识到有超过 26 个)。

您可能还认为变暗的按钮根本无法交互,但它们可以。如果单击第一个变暗的按钮,则焦点将设置在第二行电影中的第一个元素上,并且您将听到 VoiceOver 宣布“链接:冒险时间”。

但这些按钮位于链接元素内。为什么按钮在链接中,我不知道,因为我不是开发过程的一部分,但我可以假设有人认为他们应该对屏幕阅读器禁用,因为他们将aria-disabled="true"属性放在了他们身上,而不考虑实际这样做会影响用户体验。

按钮在链接元素内被禁用

在上面的屏幕截图中,您可以看到Adventure Time的链接是并且它用thataria-disabled="false"包裹了 a 。这显示在我们的灰色按钮列表中。divrole="button"aria-disabled

我还要注意,因为这有点令人生气,链接内还有另一个按钮。此按钮未被禁用,而是标有aria-hidden="true",因此屏幕阅读器根本无法与之交互。这个按钮有什么作用?它允许您将媒体添加到收藏夹列表中。

将媒体添加到收藏夹列表的隐藏按钮

有趣的是,它确实有一个 aria-label 告诉你它的目的,尽管它实际上应该说“将Adventure Time添加到我的列表”之类的东西。

哦,等等——我太忙于这个小小的 UI 的所有问题,以至于我忘了谈论词汇表!

如您所见,变暗的按钮不是词汇表的一部分;相反,它们没有作为按钮公开,它们只是直截了当的文本。

按钮只是文本

如果您设法导航到可以单击的字母列表,并到达以您单击的字母开头的第一个条目,您将只听到“A”、“B”、“C”等浏览它们。此外,它不会通知屏幕阅读器用户他们听到的字母是可点击的!

因此,简而言之,有时查看完全不可用的东西是有帮助的,以便考虑需要做什么才能使某些东西变得有用。

如何构建可访问的词汇表

既然我们已经花了很多时间谈论我为什么要写这篇文章,并展示了好的词汇表和那些明显不好的词汇表的例子,我认为是时候开始编写代码了——也就是说,我们会得到进入我们需要的工具来实现我们认为好的东西。

首先,我将讨论代码的一些非常具体的部分,然后,当我们进入实现时,我们将整体讨论代码。

将 CSS 用于屏幕阅读器友好的可访问内容

如果他们试图让他们网站的任何部分可访问,几乎每个人都需要的一件事是一种仅向屏幕阅读器公开某些内容的方法。事实是,许多事情需要向视障用户解释,而这些事情在视觉环境中是显而易见的。WebAim 的这篇文章讨论了使用 CSS 向屏幕阅读器隐藏和公开内容的各种方法。

需要注意的一件显而易见的事情是,将内容暴露给屏幕阅读器(但对其他用户隐藏)的方法都是 hack。在我看来,不幸的是,没有 aria-only 属性或类似的解决方案,因此我们无法处理这些 hack,因为 hack 的行为并不理想。例如,最常见的解决方案是将仅屏幕阅读器的内容放置在我们希望遇到的 DOM 部分中,并使用 CSS 将其移出可见视图。这具有使通过键盘导航的人感到困惑的副作用,因为可聚焦元素仍将在导航流中,但在他们的视图之外。

综上所述,我们将使用以下 CSS,从上面链接的 WebAim 文章中借用,用于我们的仅屏幕阅读器类:

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

除此之外,我们将做出一个违背一般可访问性建议的决定:让我们的一些按钮看起来不像按钮。

我们为什么这样做呢?因为,务实地说,那艘船已经航行了。人们想让按钮看起来像其他东西,但我们需要它们成为按钮,因为它们具有可访问性的好处。

由于人们经常想要看起来不像按钮的按钮,我将向您展示如何使用无样式的按钮仍然可以访问。我们不会使用未设置样式的按钮类,而是将以下属性应用于我们不会设置样式的按钮。

{
background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    outline: inherit;
}

使用标记编写我们的词汇表条目

我们将把词汇表的部分写成描述列表,有时也称为定义列表。这是字母 A 下与辅助技术相关的词汇表项目示例列表

https://codepen.io/bryanrasmussen/pen/wvrNMWW

这些术语和定义本身是从usability.gov借来的。

除此之外,如您所知,我们将使用按钮来表示词汇表中的字母,看起来类似于:

<button class='letter' aria-label="Glossary letter A">A</button>

我们的第一次词汇表尝试

在这里,我们对词汇表进行了简单的第一次尝试。词汇表是隐藏的,但有一个显示词汇表的按钮。单击时,词汇表变为可见,而按钮变为不可见。

词汇表隐藏:

显示词汇表按钮

显示的词汇表:

没有明确焦点的开放词汇表

但是,当然,我们需要使用我们所拥有的屏幕阅读器——而且马上就有一些不好的东西。

例如,我们可以看到并非我们的每个字母都包含词汇表中的子项,因为我们禁用了它们下面没有任何内容的字母。但是这些相同的字母是如何呈现给屏幕阅读器的呢?

下面,在左侧,您可以看到其中一些禁用的按钮;右侧是页面的 Web 转子表单控件菜单。

左侧的禁用按钮和右侧的 web 转子窗体

这真的很烦人。禁用的按钮仍然显示在表单控件中,这意味着如果有人要收听所有可用按钮,他们也会听到这些变暗的按钮。

确实,他们可以听到按钮变暗,意识到该字母不允许交互,并推测这是因为它在词汇表中没有任何条目。但以这种方式传达这些信息似乎很困难。

此外,没有快速的方法可以转到实际当前打开的词汇表内容;因此,如果您开始使用屏幕阅读器浏览词汇表,则必须先阅读每个按钮,然后才能阅读内容。

如果您单击其中一个按钮,例如按钮 B,这也适用。您仍然必须浏览字母表中的所有按钮,然后才能看到单击字母 B 时显示的词汇表术语。

最后,大多数屏幕阅读器在与浏览器中的内容交互时显示的行为与用户直接与其交互时不同。例如,当使用 VoiceOver 单击“显示词汇表”按钮时,词汇表的外观如下所示:

使用 VoiceOver 打开词汇表

没错,词汇表已显示,但焦点仍在现在隐藏的按钮上。

当您单击Close Glossary按钮时,也会发生同样的事情。

聚焦时的关闭词汇表按钮

最后,如果您不是屏幕阅读器用户,而是使用键盘在元素之间导航,我们的无样式按钮无法充分显示焦点设置。

从屏幕阅读器中删除不可用的功能

在这里,我建议我们从屏幕阅读器中删除不可用的词汇表部分。

让我们解决这些问题。是我们的下一个版本:

首先,让我们来解决一些简单的问题:为关闭按钮和字母添加一个漂亮的焦点样式。

关闭”按钮在获得焦点时,会获得深蓝色背景和白色 X。

带有白色 X 和海军背景的关闭按钮

这些字母在圆形按钮中具有相同的样式,但有一些进一步的填充以提供它们弹出的良好体验。

.letter:focus {
  text-decoration: none;
  border: 2px solid #000;
  border-radius: 300px;
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 2px;
}

.letter:focus ,.close:focus {
  outline: blue;
  background-color: navy;
  color: white;
}

关注词汇表中的当前字母

从屏幕阅读器视图中删除禁用的按钮

其次,让我们摆脱所有禁用的按钮。这很容易做到;如果它们被禁用,我们也可以给它们一个aria-hidden="true"属性。

显然,词汇表部分和这些部分的标题应该只有在访问该字母时才可用。否则,我们会遇到我们之前讨论过的问题,即内容过多而无法有效导航。

我们的主要问题将是关注元素并让我们的屏幕阅读器跟随我们在不同浏览器组合中的关注。

我们有两种情况需要改变焦点:

  1. 当我们打开词汇表时,我们希望将焦点从Show Glossary按钮移到实际的词汇表内容中
  2. 当我们单击词汇表字母时,我们希望将焦点移到该字母的内容中

查看词汇表时,可以看到词汇表右侧的字母A内容。当您转到下一个字母 B 并单击时,您会看到右侧的内容被替换为字母 B 的内容。

但是,如果您使用的是屏幕阅读器并且视觉障碍严重以至于无法看到右侧的内容,那么当您在字母 A 中浏览并单击字母 B 时,您将无法访问该内容。

这就是为什么第二点很重要。如果您没有将焦点设置在可见的内容上,则必须浏览整个列表才能进入内容!那会很烦人。

要允许导航到字母内容,请在每个部分的顶部放置一个标题,以便您可以使用标题导航快速到达那里。然后,当您单击一个字母时,将焦点设置在词汇表部分内。标题内部是一个按钮,用于转到下一个字母。

在 Safari 中使用 VoiceOver

在基于涉及 VoiceOver 的按钮事件将焦点更改为其他元素时,不同的 Safari 版本可能会遇到困难。对此有一些变通方法,例如使用 A 元素作为具有角色的本地链接attribute="button",或者,正如我在本文的代码中所做的那样,在setTimeout大于 的 a 中运行您的焦点代码0ms。我用 16 毫秒的 setTimeout 完成了它,将它放在事件循环的下一次迭代之上(当然,应用了通常的附带条件)。

当然,如果这是在 React 或类似项目中完成的,我们可能会根据点击事件的状态变化来渲染组件,在这种情况下,我们可能会决定在autofocus我们想要关注的元素上使用属性,但是在这种情况下,我们将使用 JavaScript 动态设置焦点。

所以,我认为我们做了一些合理的事情。为了证明这一点,我将展示一些屏幕截图,说明我希望屏幕阅读器用户(在本例中使用 VoiceOver)将如何浏览词汇表。

首先,我们进入带有 VoiceOver 的页面。如果您按下 VoiceOver 组合键 (CTRL-option-U),您将看到以下内容:

使用 VoiceOver 组合键进入页面

这看起来并不有趣,但它向您表明您有两种方法可以访问词汇表按钮。按 VO 键 + 向下键将选择词汇表按钮:

隐藏时的词汇表单击它,词汇表​​变得可见,我们的焦点设置在字母 A 内容的标题上。

显示时的词汇表

如您所见,由于VoiceOver 光标已打开,VoiceOver 将显示它当前关注的部分。出于开发目的,我认为它真的很有用,而且一般来说,许多不是盲人的屏幕阅读器用户使用光标来帮助保持视觉跟踪他们在页面上的位置。

当我们打开词汇表并再次查看表单控件时,我们可以看到只有未禁用的按钮可用,因为我们添加aria-hidden="true"了每个也被禁用的按钮。

只有未禁用的按钮可见

有了这个,熟悉我们的词汇表的用户可以在找到它的页面上打开词汇表,直接进入表单控件,并向下导航到他们想要的字母,而无需通过标题、关闭按钮、文本部分和等等。

您会注意到我们有“转到下一个字母”按钮。在这里,如果你想使用它取决于你跟踪你的上下文,所以人们可能想要么根本不使用它,要么添加更多内容,比如将标签更改为Go to Next Letter (B),假设当前活动的按钮是 A。

这是通用性必须让位于您希望站点如何工作的点,就像通用组件将更改样式以适应站点的整体外观一样。

当用户从表单控件菜单中选择一个按钮时,他们最终会在页面上选择该按钮。

打开的词汇表有一个明显的焦点在字母 D此时,他们可以单击按钮,显示该字母的定义,并将焦点设置在该字母上。

显示的定义清楚地集中在指示的字母上

我们可以看到,虽然没有可见的 h2,但我们已经将注意力集中在它上面,并且屏幕阅读器已经将它读给了用户。如果他们导航到下一步,他们会得到:

我们通用的转到下一个字母按钮

屏幕阅读器和网络转子的导航限制

在意见问题上,我们又来了。在选择“转到下一个字母”按钮时可以看到一些问题,这些问题可能会导致完全忽略它或更改其在 DOM 中的位置值得考虑。

第一个问题是我们没有可见的“转到下一个字母”按钮,这意味着使用可以看到的屏幕阅读器的人可能会被这一步弄糊涂。当然,我们也没有以前的标题,但这问题较小,因为当添加这些人们看不到的东西时,最好让它尽可能地跟随视觉上下文。看到或听到您单击的字母下方的标题并没有那么令人迷惑,因为可能会被告知有一个按钮可以单击而看不到这样的按钮。

由于此示例的词汇表很短,因此在每个术语部分的末尾添加“转到下一个字母”按钮可能很有意义,或者您可能决定完全删除它并依靠人们使用他们的屏幕阅读器的网络转子转到下一个按钮,如果您的定义很少或很多,它也同样适用。

用户在定义之前有Go to Next Letter按钮可能会让人感到困惑,因为实际上是盲人的用户可能认为这意味着没有为该字母定义术语。

最后,转子中显示的Go to Next Letter按钮有一个限制:

具有转到下一个字母按钮的限制

使用转子时,您不会被告知下一个字母是什么,甚至当前字母是什么。

改善导航

让当前词汇表字母按钮说明它是否是当前显示的字母可能是有益的,即文本显示为当前显示词汇表字母 A 按钮,而转到下一个字母按钮显示转到下一个字母,B 按钮

因此,如果您正在浏览转子中的按钮列表,您有两个地方可以轻松放置您的上下文。

我将进行这些更改,可以在这里看到

由于Go to Next按钮都在标记中,这将取决于您用来生成标记的任何代码(无论是模板、React、Vue 还是手动完成)。唯一相关的变化是在switchSelectedLetters函数中,每当您单击词汇表按钮之一时都会调用该函数,如下所示:

const switchSelectedLetters = (target) => {
  const selector = "selectedLetter";
  const currentSelectedLetter = document.querySelector(`.${selector}`);
  const currentAria = currentSelectedLetter.getAttribute("aria-label");
  const targetAria = target.getAttribute("aria-label");
  const selectionText = "Current selected, ";
  //use [...selectionText] because we want number of characters, not code units.
  currentSelectedLetter.setAttribute("aria-label", currentAria.substring([...selectionText].length))
  currentSelectedLetter.classList.remove(selector);
  target.setAttribute("aria-label", selectionText + targetAria);
  target.classList.add(selector);
}

让我们继续进行这些更改并再次使用词汇表。您会被告知您当前正在访问的词汇表按钮是当前选定的按钮。

我们新的转到下一个字母按钮

当您单击Next按钮时,它成为当前选定的按钮,您可以在转子中看到它。此外,“转到下一个字母”按钮还会告诉您下一个字母是什么。

我们最终的、可访问的词汇表表单控件显示

我认为,最后,这个实现为我们提供了一些不错的功能,可以制作一个可用的、可访问的定义词汇表,这不仅有利于盲人用户,也有利于其他屏幕阅读器用户。

为行动不便的用户调整我们的可访问词汇表

最后,我将快速展示主要使用键盘进行导航的行动不便的用户如何访问所有内容。

Show Glossary按钮可切换到,并指示它何时获得焦点:

选项卡时显示词汇表按钮

单击按钮打开词汇表:

使用 Tab 键打开词汇表再次按 Tab 选择关闭按钮:

使用 Tab 选择的关闭按钮

下一个 Tab 选择一个字母:

再次点击选项卡选择下一个字母

如果您按 Tab,您将转到下一个字母。之后,您可以单击查看该字母的定义,如果您在此之后按 Tab,您将再次进入Close Letter,因此您可以随时快速关闭。您可能希望为 Escape 键添加一个处理程序,在这种情况下,通过按 Escape 键启用关闭词汇表,但就目前而言,它是可用的,而且我认为在逻辑上是可以理解的。

结论

只要您能够设想客户将遇到的问题并牢记各种辅助技术必须使用的世界的局限性和模型,使某些东西易于访问并不是特别困难。

来源:https ://blog.logrocket.com/building-accessible-glossary-vanilla-javascript/

#javascript 

What is GEEK

Buddha Community

用原生 JavaScript 构建可访问的词汇表

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Santosh J

1622036598

JavaScript compound assignment operators

JavaScript is unarguablly one of the most common things you’ll learn when you start programming for the web. Here’s a small post on JavaScript compound assignment operators and how we use them.

The compound assignment operators consist of a binary operator and the simple assignment operator.

The binary operators, work with two operands. For example a+b where + is the operator and the a, b are operands. Simple assignment operator is used to assign values to a variable(s).

It’s quite common to modify values stored in variables. To make this process a little quicker, we use compound assignment operators.

They are:

  • +=
  • -+
  • *=
  • /=

You can also check my video tutorial compound assignment operators.

Let’s consider an example. Suppose price = 5 and we want to add ten more to it.

var price = 5;
price = price + 10;

We added ten to price. Look at the repetitive price variable. We could easily use a compound += to reduce this. We do this instead.

price += 5;

Awesome. Isn’t it? What’s the value of price now? Practice and comment below. If you don’t know how to practice check these lessons.

Lets bring down the price by 5 again and display it.
We use console.log command to display what is stored in the variable. It is very help for debugging.
Debugging let’s you find errors or bugs in your code. More on this later.

price -= 5;
console.log(price);

Lets multiply price and show it.

price *=5;
console.log(price);

and finally we will divide it.

price /=5;
console.log(price);

If you have any doubts, comment below.

#javascript #javascript compound assignment operators #javascript binary operators #javascript simple assignment operator #doers javascript