JavaScript基础知识。介绍和初始设置

JavaScript是世界上最流行的编程语言，所以它是网络开发行业最受欢迎的技能之一，这一点不足为奇。事实上，Devskiller IT技能和招聘报告（2020年）指出，72%的公司正在寻找招聘JavaScript专家。

此外，在全球超过18亿个网站中，95%的网站都使用了JavaScript。

选择在2021年学习JS无疑是一个非常明智的举动!让我们直接进入介绍，然后我们再看看最初的设置步骤。

介绍一下JavaScript!

JavaScript是一种编程语言，它使你有能力在网页上实现复杂的功能--而且你能做的事情几乎没有限制！你可以将2D/3D的图形做成动画，也可以将其做成动画。你可以为2D/3D图形制作动画，添加滚动视频、交互式地图、可缩放图像、开发游戏，这些可能性真的是无穷无尽的

当涉及到标准的网络技术时，它与HTML和CSS发挥得特别好。

• HTML是一种标记语言，我们用它来结构我们的网络内容。我们将我们的内容分类为各种元素，如段落、标题、表格，甚至是嵌入的图像和视频。
• CSS 是一种由样式规则组成的语言，我们用它来为我们的HTML内容设置样式。我们用它来设置字体、颜色、背景，我们还可以用CSS来创建我们的整体页面布局（有定位、弹性框和网格）。
• JavaScript使你能够创建几乎所有其他的东西如前所述，你可以添加复杂的动画，控制多媒体，并添加动态内容。

让我们看一个例子，看看它们是如何相互作用的!

这是我们的基本HTML，由一个标题、段落和按钮组成。

<h1>I am a headline made with HTML</h1><p>And I am a simple text paragraph. The color of this text is styled with CSS. Click the button below to remove me through the power JavaScript.</p><button>Hide the text above</button>

让我们添加一些CSS来使它看起来更漂亮。

body { font-family: sans-serif; text-align: center; padding: 3rem; font-size: 1.125rem; line-height: 1.5; transition: all 725ms ease-in-out;}

最后，我们可以添加一些JavaScript来实现动态行为。

document.querySelector("button").addEventListener("click", function () { document.querySelector("p").css("opacity", 0);});

在这个例子中，在按钮被点击后，JavaScript检测到了点击事件，并通过添加opacity: 0 CSS规则删除了这段文字。所有这些都不需要刷新页面!

这仅仅是个开始。JavaScript可以做更多的事情--我将在这个系列中深入研究所有的JavaScript。

现在，让我们看看如何将JavaScript添加到我们的网页上，这样我们就可以开始自己玩了。

如何将JavaScript添加到网页中

将JavaScript添加到HTML页面的方式与CSS类似。如果你熟悉CSS，你可能记得，它使用<link> 元素来连接外部样式表，使用<style> 元素来定义HTML中的内部（内联）样式。

JavaScript只需要一个元素就可以被添加到HTML页面中：<script> 元素。

让我们来看看如何将<script> ，用于内联的JavaScript代码和连接到外部的JavaScript文件。

如何添加内联的JavaScript

嵌入到HTML文档中的JavaScript代码被称为内联JavaScript。要把它添加到你的网页上，只要把你的JavaScript代码放在一对<script> 标签之间，像这样。

<script>  // Your JavaScript code</script>

最好的位置是放在</head> 标签之前。这可以让你的脚本尽快被下载，而不会阻塞你的浏览器（为什么？ 请看我的下一篇文章 "什么是async和defer ？"）。

因此，上面的例子可以被添加到一个网页上，就像这样。

<script>

如何链接到外部的JavaScript

另一方面，HTML文档可以引用一个包含JavaScript程序的独立文件，在这种情况下，它被称为外部JavaScript。

你可以随心所欲地创建多个独立的JavaScript文件！只要你给它们加上.com的名字就可以了。只要你给它们的扩展名是**.js**，你就可以把它们连接到你的网页上。例如，文件script.js ，可以这样链接到你的页面。

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

在script.js ，你有你的JavaScipt代码。

document.querySelector("button").addEventListener("click", function () { document.querySelector("p").css("opacity", 0);});

这个代码的工作原理与我们的内联例子相同，只是现在我们的JavaScript在一个外部文件中。这通常是件好事，因为你的代码通常会更有条理和可重复使用。此外，如果没有大块的脚本混在一起，你的HTML会更容易阅读。

总结

今天就到此为止吧!我们首先介绍了一下JavaScript的历史，包括它是如何与HTML和CSS联系在一起的，并基本上形成了现代前端开发的基础！我们还研究了如何将JavaScript添加到你的HTML网页中，并使用内部和外部方法。我们还研究了如何使用内部和外部方法将JavaScript添加到你的HTML网页上。

现在看来，JavaScript可能有点令人生畏，但不要担心--在这个系列中，我们将以简单的步骤完成每个核心概念。在你的旅程中，无疑会有大量的 "AHA "时刻。随着你继续向前推进，随着你建立新的联系和增加你的知识，这些概念将开始变得更有意义

谢谢你的阅读。🎉🎉🎉