006SectionIntro 欢迎来到课程的第一部分。在本节中,你将开始学习JavaScript语言基础知识,像变量、数据类型、运算符、ifelse语句等等。在这一部分我们还没有涉及用户界面。当然,我们稍后会这样做,但首先我们需要集中精力关注语言基础。在我们真正深入后面的章节之前,这些课程教你基础知识,并为你提供语言概述。好了,让我们现在就开始这段旅程。 视频加载中。。。 007HelloWorld! 现在我们来写第一行JavaScript代码。在浏览器界面直接使用F12打开,选择console页面即可。在浏览器控制台输入:alert(HelloWorld) 网页弹窗显示HelloWorld。 这就是一行JavaScript代码。 接下来尝试给变量js赋值操作。 第一次ls赋值amazing,如果检查js值为amazing,alert窗口显示JavaScriptisFun。 第二次ls赋值boring,再次检查js值为amazing,条件不满足,alert窗口不显示。letjsamazingif(jsamazing)alert(JavaScriptisFun!)jsboringif(jsamazing)alert(JavaScriptisFun!) 接下来在console页面可以直接进行数值计算,回车直接给出结果。4082310 查看输入的历史命令,可以使用键盘的上下方向键。 视频加载中。。。 008ABriefIntroductiontoJavaScript 你已经写了一两行JavaScript,但究竟什么是JavaScript,我们能用它做什么?嗯,这正是我们在这个视频中要发现的,所以在这个讲座中,我们将为课程的其余部分奠定基础,所以你一定要跟着这个讲座走到最后。说到这里,我们现在可以进入下一节课了吗?好吧,可能不行,因为这些东西到底是什么意思?所以让我们稍微解构一下,至少要让这些东西有一些意义。从编程语言本身开始,编程语言基本上就是一种工具,可以让我们编写代码,指示计算机做一些事情。 这就是我们使用JavaScript的主要目的,对吗?然后我继续说,JavaScript是一种高级语言,这意味着我们不需要考虑很多复杂的东西,比如在运行或编程时管理计算机的内存,所以在JavaScript中,有很多所谓的抽象,覆盖了所有这些我们不想担心的小细节。接下来,我说JavaScript是面向对象的,这意味着该语言主要是基于对象的概念,用于存储大多数类型的数据,当然,我们将在整个课程中学习所有关于面向对象的编程。最后,JavaScript也是一种多范式语言,意味着它是如此的灵活和多变,我们可以使用各种不同的编程风格,例如命令式和声明式编程,这些不同的风格基本上只是构造我们代码的不同方法。 这只是第一个非常高层次的概述,但我希望到目前为止它是有意义的。无论如何,现在我们知道了JavaScript实际上是什么,它在Web开发中扮演的角色是什么?或者换句话说,我们实际上用它做什么?为了回答这个问题,让我们实际看一下网页的三个核心技术:HTML、CSS,当然还有JavaScript。所以这三种技术都在一起工作,以创建漂亮的交互式动态网站或网页应用程序。 然后,CSS负责内容的呈现,所以基本上是用于样式设计和在网页上布置元素。最后,JavaScript是互联网的真正编程语言,它允许开发人员在任何网页上添加动态和互动效果。我们还用它来操作内容或CSS,从远程服务器加载数据,并在浏览器中真正建立整个应用程序,然后我们称之为网络应用程序。 CSS是形容词,因为它描述了名词,就像这段CSS说的那样。这段文字是红色的,所以这里的红色是描述名词的形容词。最后,JavaScript当然是动词,比如说隐藏这段文字。现在,由于我们已经在这里谈了很多关于动态效果和网络应用的问题,现在让我们实际看看一个真实的例子,以便更清楚地了解JavaScript的能力。 一开始,你就看到页面上有两个旋转的旋转器,这意味着JavaScript可能正在后台从twitter服务中加载一些数据,然后随着数据的到来,JavaScript隐藏了这些旋转器,转而显示加载的内容。但在这个页面上还有一些更简单的动态效果,比如当我们点击推特按钮时,JavaScript就会显示推特框,当我们点击该框外时,就会隐藏它。最后,当我们将鼠标悬停在twitter上的任何用户身上时,JavaScript也会将这些好友的用户信息,它可能也会即使加载这些数据。 我希望这能让你对我的所有内容更加感兴趣。好了,现在我们看到了JavaScript的真正能力,让我们快速回顾并看看其他很酷的东西,我们可以用JavaScript的力量来构建。所以我们可以说,是JavaScript让现代网络开发以及整个现代网络本身首先成为可能。现在,如果你已经对网络开发行业有些熟悉,你可能听说过现代JavaScript库和框架,比如React,Angular或Vue,如果你没有听过,那也绝对没有问题。你需要知道的是,这些基本上都是让现代大型网络应用更加容易和快速的工具。 现在重要的是,所有这些框架和库仍然百分之百地基于JavaScript。这意味着,在学习和使用任何这些框架之前,你应该变得非常、非常擅长JavaScript,而不是仅仅跳入你的第一个框架。因为这样你就可以轻松地学习下一个流行的东西了。所以不管别人怎么说,正确地学习JavaScript是你现在可以在你的网络开发生涯中做出的唯一最好的投资。现在,JavaScript语言和网络浏览器实际上是两个独立的东西,而这意味着JavaScript也可以在网络浏览器之外运行。 另一方面,当我们在浏览器中使用JavaScript时,我们会创建所谓的前端应用程序。所以在本课程中,我们将学习JavaScript语言本身的来龙去脉,当然还有如何在浏览器中使用它。好了,现在我想说的是,我们实际上也可以使用JavaScript来构建本地移动应用程序,以及用于任何手机和电脑操作系统的本地桌面应用程序。 这是因为有了现代的工具,比如reactive、ionic框架和electron等工具。在过去的几年里,这些工具完全改变了整个开发行业,使以前不可能实现的事情成为可能。所以你可以看到,在成为真正的JavaScript高手之后,几乎没有什么是你不能建立的,如果你想一想,这真的有点令人震惊。好了,现在要结束这课程了,我想简单地谈谈JavaScript的发布或版本,你可以这样称呼它们。我们会在本节结束时再来讨论这个话题,因为它超级重要,但在这个时候对JavaScript的发布有一个初步的了解也是一个好主意。总之,长话短说,在2015年对语言进行了一次巨大的更新,官方称之为ES2015。 现在,在ES2515之后,每年都会有一个新的版本,在所有这些新的版本中都有一些新的JavaScript功能。从ES2015开始,就是我们所说的现代JavaScript,但我为什么要告诉你这些呢?嗯,这只是因为在这个课程中,我将从一开始就教你现代JavaScript,我想从一开始就把这些说清楚。然而,我也相信你需要了解在ES2015之前的东西,也就是ES5。所以我也会向你展示ES5的重要内容。原因是在本节末尾有一个关于JavaScript发布的完整视频,因为现在我不再想用理论来烦扰你。 我们现在终于开始了。 视频加载中。。。 009LinkingaJavaScriptFile 好了,现在我们知道了什么是JavaScript,现在我们来学习如何在一个特殊的JavaScript文件中写代码,然后,如何在浏览器中运行这个代码?这个资源库就在这里,如果你错过了,它就在课程的最开始,在第一节的第一个文本讲座中。为了现在实际下载所有这些启动代码,你需要做的就是点击这里的绿色按钮,然后下载zip。 这是个网站,开发者基本上在这里托管代码。稍后,这个网站可能看起来有点不同,但只要注意可能有一个绿色的按钮,然后写着下载zip。 你可能会在某个时候遇到这些问题,在常见问题解答这里找到答案要容易得多。然后,在这些文件夹中,总是有一个最终文件夹和一个启动文件夹,所有这些文件夹都一样。 然后将你的代码与这些章节中的最终代码进行比较,这将使你能够找到并修复你的代码中可能出现的任何错误,这样,你就可以继续进行这个章节。这些文件夹中的每一个都有Star代码,这基本上是每个部分或项目的起点。 你现在应该使用这里的启动文件夹作为你的项目文件夹,我认为这是你最好的方法。在选择了项目文件夹后,点击打开,然后在这里我们看到了索引HTML文件,我们已经在我们的商店或代码里有这个文件。因此,为了开始,我们总是需要一个像这样的HTML文件,因为我们的JavaScript需要附加到一个HTML文件中。 你可以在30分钟左右的时间里学习一下HTML和CSS的基础知识。无论如何,现在让我们在这里创建一个脚本标签,我们将在其中写入JavaScript,因为在第一个视频中我们在控制台中写入JavaScript,还记得吗?我们现在就写下我们在第一个视频中写的同样的代码,letjsamazing,然后在JavaScript中,我们通常在每一行的末尾加一个分号,这将让JavaScript知道我们已经完成了这一行。 就像之前我们说的那样,如果JavaScript是amazing,那么弹窗显示,JavaScriptisFun!再一次不要担心这个代码是如何工作的,现在只是输入它,只是对它的作用有一个大致的了解。 回到我的桌面上。用google浏览器打开了这个文件。的确,我们马上就得到了这个alert,说JavaScriptisFun!这是从我们的索引HTML中来的。我们可以点击OK。然后它就完成了,我们看到的还是启动文件,实际上就是这个文本。如果你看到VSCode中看到JavaScriptFundamentalsPart1在H1标签中,正是我们在这里看到的,我们打开了正确的页面,所有JavaScript也在工作。 现在让我告诉你一些非常重要的东西,那就是如何在浏览器中看到我们的代码的结果。 现在,如果我们仍然想显示结果,例如在控制台中像这样的计算,我们需要告诉JavaScript明确地将结果输出到控制台。我们可以使用一个叫做console。log的特殊函数来做到这一点,然后如果我们把这个代码放在这里并复制和粘贴,然后保存它,然后重新加载,然后我们需要点击OK,这样JavaScript就可以进入下一行,然后我们实际上得到了打印到控制台的结果。 这正是我们进行计算的那一行。好的,但是让我们在这里回顾一下,因为我知道这对许多初学者来说是很困惑的。在上一节课中,我们已经在console中了,没有必要使用console。log。当我们在控制台中时,我们也不需要脚本标签,但是现在我们实际上在一个脚本中,不再在控制台中。 现在我们需要明确地说,console。log,无论何时我们都要访问开发者控制台,就像这里一样,基本上这就像在这里的脚本和另一边的控制台之间建立了一座桥梁,这个控制台是住在浏览器中的,现在为了完成这个课程,让我们把这个JavaScript代码从HTML文件中拿出来,放到它自己单独的JavaScript文件中。 我们现在的这个脚本被称为内联脚本,内联脚本的唯一好处是我们不必加载另一个文件,但另一方面,它对于分离网站内容和JavaScript逻辑来说是非常糟糕的,通常我们使用外部JavaScript文件,正如我刚才提到的。 因此,让我们回到侧边栏,创建一个新的文件,我把它叫做script。js,这是一个非常标准的JavaScript脚本的名字。 现在我们可以摆脱这个脚本了。很好,现在我们在表现和逻辑之间有了更好的分离,从长远来看,这也使得代码更容易维护。现在要做的就是把这个JavaScript文件和HTML文件连接起来,因为现在HTML没有办法知道代码的实际位置。如果我们通过重新加载浏览器来执行这段代码,现在什么也不会发生。同样,因为这个HTML文件现在不知道在哪里可以找到JavaScript代码,让我们来做这个连接。 在这里我们所要做的就是指定脚本的名称和位置,在这个例子中是script。js文件和index。html在同一个文件夹中,我们在这里所要做的就是像这样写文件名,我们不必指定整个文件的路径。那么你会看到它又开始工作了,我们又有了这个弹出的窗口,然后是这个计算的结果。现在,如果你没有得到alert窗口或这个输出,那么这意味着你的脚本文件可能没有正确地链接到HTML文件。 在这种情况下,请百分之百地确保脚本文件和HTML文件在同一个文件夹里。也请确保你正确地拼写了script,就像我在HTML中的那样。这意味着你现在终于能够真正开始学习JavaScript语言了,我们在下一节课上见。 视频加载中。。。