按下开始
所以你想学编程?你做了一个很好的决定。编程是一项非常值得学习的技能,而且非常有趣。它可以用来构建下一代应用程序,破解树莓派或Arduino,编写最新的重磅游戏——以及其他很多事情。事实上,一旦你学会了如何编程,唯一的限制就是你的想象力。
在本章中,我们将简要回顾编程的历史,了解计算机程序实际上是什么,然后介绍计算机程序JavaScript编程语言,我们将用它来学习如何编程。
我们也会马上开始一些编程,不是写一个,而是两个JavaScript程序!
以下是本章的内容:
- 编程到底是什么
- 算法和伪代码
- 编程简史
- JavaScript语言的介绍
- “你好,世界!——你的第一个JavaScript程序
- web浏览器中的JavaScript
- " I Can Code a Rainbow " -你的第二个JavaScript程序
- 程序员的心态
我们还将以一些编程挑战来结束本章,以帮助您测试新发现的技能——正如我们将在本书每一章的末尾所做的那样。
编程
编程就是让电脑做你想让它们做的事。计算机程序基本上是告诉计算机如何执行一项任务的一系列指令。不幸的是,电脑和我们说的语言不同。
例如,你不能只写“将圆圈的颜色改为蓝色”,就指望计算机能理解。编程语言是一种中介:它是一种计算机和人类都能理解的语言。
学习编程有点像学习一门外语,只不过计算机可以非常对语法很挑剔(甚至比我的法语老师还挑剔!)您需要确保所有内容都放在正确的位置,语法也需要恰到好处。计算机是强大的,你可以让它们做一些真正令人印象深刻的事情,但如果一个支架出了问题,它们也会崩溃!
编写程序基本上就是编写一组让计算机执行的指令。问题是,他们必须如此非常精确的指令。任何轻微的歧义,计算机将做一些完全不同于你的想法-甚至可能崩溃。
算法
这个词算法现在用得很频繁。你可能听说过“Instagram算法”或“谷歌搜索算法”。但算法到底是什么?“算法”一词是波斯数学家Al-Khwarizmi名字的拉丁化,他写了第一本代数教科书,喜欢用循序渐进的方法解释他的方法。
这就产生了这个词算法用于描述任何一步一步的方法。应该清楚每一步做什么,每一步做什么。例如,下面是泡一杯茶的算法:
- 用水壶烧水。
- 拿杯来。
- 拿个茶包。
- 把茶包放进杯子里。
- 水壶烧开后,把水倒进杯子里。
- 让它煮两分钟。
- 把茶包从杯子里拿出来。
- 得到牛奶。
- 往茶里加牛奶。
- 搅拌茶。
茶后牛奶
我意识到要加牛奶后茶的制作方法可能会有争议。如果你认为应该先加牛奶,我很抱歉,但你必须接受你在这一点上错了。
这些说明似乎相当基本和直接,但有相当多的假设,有些步骤是有点模糊的。你怎么煮水壶?你的茶杯和茶包是从哪里来的?我应该往杯子里倒多少水?这些问题都没有答案。这通常是可以接受的,因为大多数人都熟悉泡茶的过程,但那些从未见过泡茶的人可能很难遵循其中的一些步骤(尽管我承认可能很难找到这样的人)。
伪代码
伪代码是可以用来说明程序功能的假想代码,而不必担心实际编程语言的复杂性。它仍然遵循程序的约定和结构,并使用精确的命令,但没有语言的细节。
例如,指令“在屏幕上显示一条消息”可以用伪代码写成显示器(消息)
,而在Python编程语言中,它将被写成打印(消息)
.注意,Python代码使用非常特定的符号打印
,该命令用于在屏幕上显示消息。其他语言使用不同的命令来做基本相同的事情。
泡一杯茶的例子可以用伪代码写成这样:
煮(水,250毫升)在水壶得到(杯)从橱柜得到(袋泡茶)从盒子把(袋泡茶)在杯当(锅沸腾){倒(水,250毫升)在杯}等待(2分钟)删除(袋泡茶)从杯得到(牛奶,20毫升)添加(牛奶,20.毫升)喝茶搅拌(茶)
知道如何用特定语言编程的程序员应该能够遵循伪代码示例,然后用他们选择的语言编写它。伪代码对于在开始编码之前规划程序非常有用,而且它还使使用不同编程语言的程序员之间更容易分享想法。
编程简史
最早的计算机是用穿孔卡片来编程的二进位数制即计算机使用的数字系统。二进制系统完全由1和0组成,它们大致可以转换为“开”和“关”。在卡片上,一个洞代表1
没有洞0
.在此之后,人们开始开发可以用来对计算机“说话”的语言。
第一个计算机程序是用机器代码而且汇编语言.这些都是低级编程语言它们与计算机硬件紧密相关。这意味着它们可能是很难编程的语言,因为它们涉及编写与计算机架构紧密相关的抽象代码。事实上,现在很少有人用机器码或汇编来编程,但那些人会与计算机硬件密切合作——例如,编写设备驱动程序,或在嵌入式系统上工作。
高级编程语言使用抽象使代码更易于人类阅读和编写。程序是用Swift、c#或Java等语言编写的,然后编译成机器代码并执行。使用这些语言编写的程序非常快,使得高级语言适合编写游戏和专业商业软件,在这些地方速度是很重要的。
脚本语言是另一种高级语言,但它们是解释,而不是编译,这意味着它们在程序运行时被翻译成机器代码,而不是在程序运行之前。这意味着它们通常比编译语言慢,尽管解释器变得越来越复杂,使得一些解释语言几乎和编译语言一样快。你可能听说过的一些常见的脚本语言有Python、Ruby,当然还有JavaScript。
JavaScript
我们将在本书中学习的语言是JavaScript,通常被称为Web语言。几乎每个网络浏览器都可以运行JavaScript,使其成为世界上最流行的编程语言之一。
在学习如何编程时,JavaScript是一种很好的语言。它的入门门槛很低:你只需要一个web浏览器就能使用JavaScript编程。开始很容易,基本的东西也很容易掌握。它也是一种灵活而富有表现力的语言,可以创建各种功能强大的程序。
JavaScript是一种在运行时进行解释和编译的脚本语言。这意味着它需要一个引擎来解释和运行程序。这通常是通过web浏览器完成的,但也有JavaScript引擎可以在没有浏览器的情况下运行程序。JavaScript也是一个动态语言,这意味着程序的元素可以在运行时改变,不像编译语言,如c++。
JavaScript的历史
万维网最初是一堆由超链接链接起来的页面。用户很快就想与这些页面进行更多的交互,因此Netscape(早期的浏览器供应商)要求他们的员工Brendan Eich为他们的Navigator浏览器开发一种新的语言。他在短短十天内就提出了一个名为Mocha的脚本语言原型。新语言被重新命名为LiveScript,但后来又被匆忙地重新命名为JavaScript,这样它就可以从Sun Microsystems的Java语言所吸引的宣传中受益。
“JavaScript”这个名字经常引起一些不幸的混淆,JavaScript经常被认为是“精简版Java”,尽管这两种语言完全不相关。
JavaScript于1995年首次出现,并开创了一个令人兴奋的新时代,即能够编写web浏览器来做事。(不幸的是,在早期,最常见的用途是创建弹出式广告和旋转标志!)
到2005年,谷歌Maps和Gmail等网站开始出现,它们证明了JavaScript能够创建外观和行为类似于本地桌面应用程序的富互联网应用程序。这种进步还在继续,如今几乎每个网站都会以某种方式使用JavaScript。JavaScript也在智能手机应用、可穿戴设备和数据库等其他领域找到了自己的一席之地。
JavaScript版本
1996年,在欧洲计算机制造商协会(European Computer Manufacturers Association)的帮助下,决定对JavaScript进行标准化。这种标准化的语言被称为ECMAScript以避免侵犯“Java”商标。这引起了更多基于名称的混乱,但最终ECMAScript被用来指代规范,而JavaScript被用来指代语言本身。尽管关于改名的争论不断,但情况仍然如此。一个建议是将JavaScript正式重命名为“JS”——它经常被这样称呼(就像迈克尔·乔丹经常被称为“MJ”一样)。
当JavaScript在1997年被标准化时,该规范被称为ECMAScript版本1。2015年,它决定每年发布一个新规范,版本以它发布的年份命名。由于这一变化,ECMAScript版本6在发布时被重新命名为ES2015,从那时起,每年都有一个新版本的JavaScript。在本书中,我们将使用JavaScript的最新版本,但每年都有必要了解该语言的最新添加和更改。
向后兼容性
JavaScript语言开发中的一个重要概念是向后兼容性.这意味着所有旧代码在由运行新规范的引擎解释时必须以相同的方式工作。(这有点像说PlayStation 5仍然必须能够运行为所有之前的PlayStation创建的任何游戏)。这是为了防止JavaScript通过做出巨大的改变来“破坏Web”,这意味着一些网站上使用的旧的遗留代码可能无法在现代浏览器中正常运行。
在本书中,我们假设您使用的是能够运行最新版本JS的现代浏览器。(试着更新到你最喜欢的浏览器的最新版本。)
关于JavaScript的讨论已经够多了。让我们来编写您的第一个程序吧!
你好,世界!你的第一个JavaScript程序
这是学习编程语言的一个传统你好,世界!程序。这是一个简单的程序,输出短语“Hello, World!”来宣布你进入了编程的世界。
我们要坚持这个传统,写一首Hello, World!JavaScript程序。它将是一个语句,记录短语“Hello, World!”对控制台说。
控制台?
一个控制台基本上是用于运行代码的命令提示符。您可以输入一段代码,它将被计算,并将输出记录到屏幕上。控制台是测试和试验代码的好方法。你可以在你的计算机终端上运行JS控制台,也可以在智能手机和平板电脑上运行JS控制台应用程序。还有许多网站在浏览器中运行控制台,大多数浏览器也有内置的控制台。
在这本书中,我们将主要使用网络jsconsole.com作为我们的控制台。我建议您使用它来运行本书中出现的代码片段,以了解它们是如何工作的。对输入代码有一种感觉总是比仅仅阅读要好。这也意味着您可以通过更改和检查结果来试验代码。
控制台的另一种选择是使用内置在浏览器中的控制台。要打开它,只需按照下面的说明,取决于你的浏览器:
- 火狐:持有
转变
+Ctrl
+J
(或选项
+⌘
+J
在Mac上)或压力机F12
- Safari:持有
选项
+⌘
+C
(请注意,您需要在首选项中启用开发人员菜单) - 铬:持有
转变
+Ctrl
+J
(或选项
+⌘
+J
在Mac上)或压力机F12
- 边缘/ Internet Explorer:新闻
F12
在浏览器中打开控制台后,它将与jsconsole.com完全相同。下图是Chrome内置的控制台。
好,我们来写第一个程序。去jsconsole.com或打开浏览器的控制台,输入以下代码,然后按输入
关键:
控制台.日志(“Hello, World !”);
输入?回报呢?
我告诉过你按输入按上面的键盘。明确一点,在大多数电脑键盘上,你会看到一个输入向右边键。(有时它只是一个箭头符号:↵)。在Mac键盘上,你会看到一个返回关键。为了简单起见,我把它叫做输入从现在开始。
如果一切按计划进行,您应该看到“Hello, World!”显示在屏幕上,就像下面的截图一样。
恭喜你!您刚刚编写了第一个JavaScript程序!这可能看起来并不多,但一位智者曾经说过,每个程序员的旅程都始于一行代码——或者类似的东西!
浏览器中的JavaScript
我前面说过,JavaScript是一种解释性语言,需要一个宿主环境才能运行。由于其起源,JavaScript运行的主要环境是浏览器,尽管它也可以在其他环境中运行。
到目前为止,JavaScript最常见的用途仍然是使网页具有交互性。正因为如此,在我们继续之前,我们应该先看看是什么组成了一个网页。
网页的结构
几乎所有的网页都由三个关键元素组成:HTML、CSS和JavaScript。HTML用于标记页面的内容,CSS是表示层,指示页面的外观,JavaScript添加了交互性,使页面能够执行某些操作。这三种技术合起来称为Web的三层.可以在HTML中添加CSS和JavaScript,但保持每一层的代码独立是一种良好的实践。
在这本书中,我们不会关注网页的HTML和CSS部分,因为我们在这里学习如何编程。不过,偶尔会需要一些HTML和CSS来提供我们的程序需要与之交互的图形元素。
为了节省您花费很长时间设置和编码网页,我们将使用CodePen网站上的许多例子在这本书。这个网站为你设置了一切,所以你只需要添加任何HTML, CSS和JS代码来创建一个功能网页。它还将Web的三个层分别放在编辑器顶部的三个部分中,如下面的截图所示。
CodePen还提供了一个控制台。在本书的各个地方,您会发现在JS部分,然后通过打开CodePen控制台查看代码在幕后的执行情况。可以通过单击控制台选项卡在CodePen界面的左下角。
在线编辑和离线工作
在HTML和CSS的同时运行JavaScript代码还有许多其他选项。只要搜索“在线JavaScript编辑器”就可以看到更多的在线选项。通过在文本编辑器中编写代码并在浏览器中打开它,也可以脱机工作(即仅在您的计算机上)。看到“HTML5模板:适用于任何项目的基本样板,以获取如何设置的说明。
让我们试着写第二个程序。
我可以编写彩虹:你的第二个JavaScript程序
我们将用第二个在浏览器中运行的JavaScript程序来结束本章。这个例子比前一个要复杂得多,包含了很多概念,这些概念将在后面的章节中更深入地讨论,所以如果你不能完全理解这个阶段所发生的一切,也不要担心!目的是向您展示JavaScript能够做什么,并交互式地介绍一些重要的概念,这些概念将在接下来的章节中介绍。
前往CodePen网站再买一支新的钢笔。
将以下内容添加到超文本标记语言部分:
<按钮id=“按钮”>点击我</按钮>
这将显示一个ID为的按钮按钮
.ID属性是JavaScript程序识别和操作页面上某些元素的有用方法。它看起来应该类似于下图中的一个。
实际的JavaScript代码放在JS部分。添加以下代码行:
常量按钮=文档.getElementById(“按钮”);常量颜色=[“红色”,“橙”,“黄色”,“绿色”,“蓝”,“rebeccapurple”,“紫色”];函数改变(){文档.身体.风格.背景=颜色[数学.地板上(7*数学.随机())];}按钮.addEventListener(“点击”,改变);
程序的第一行创建了一个名为按钮
.(我们在第二章)。
然后我们使用. getelementbyid
函数查找ID为的HTML元素按钮
.这是我们在HTML部分中创建的按钮元素。它被赋值给变量按钮
,所以从现在开始,每当我们提到按钮
,程序知道我们在谈论那个按钮。(查找HTML元素在第十章)。
的改变
函数还使用随机数从数组中随机选择颜色。(数字,包括生成随机数,在第四章)。
程序以事件处理程序,它会在按钮被单击时进行监听。当这种情况发生时,它将运行我们刚刚定义的函数。(事件和如何处理它们在第十一章)。
试着点击几次按钮。如果一切正常,背景应该改变为彩虹的每一种颜色!
你可以看到我在CodePen上的代码:
丽贝卡紫色
rebeccapurple
颜色的正式名称是十六进制编码吗# 663399
.它是以网页设计师埃里克·迈耶的女儿命名的,他不幸去世,年仅6岁。这是她最喜欢的颜色,作为对她的致敬,它被添加到CSS颜色的官方列表中。
程序员的心态
在我们结束这一章之前,我们需要谈一下编程风格.显然,编写计算机程序的重点是让它做它应该做的事情,但程序的风格也很重要。您的代码应该清晰简洁,并且在遵循约定的方式上保持一致——从为变量选择的名称到在代码块之间留下的空白量。您的代码还应该易于阅读,并包含解释代码功能的注释。
您应该始终寻求改进代码,使其更高效、更易于遵循。这个过程叫做重构,并且应该定期执行,以便您的代码保持最新,而不会变得陈旧。
编程中一个重要的原则是“不要重复自己”干.这意味着您应该始终避免重复大量代码。遵循这一原则将有助于使您的代码更灵活,更容易维护和更新。(修改一段代码总比修改几百段代码容易!)如果这听起来有点像程序员很懒,那么你是完全正确的!一个优秀的程序员总是希望编写的代码能够以最有效和最优雅的方式完成工作。更少的代码意味着更少的错误机会,并且更容易维护。
一个好的程序不会突然出现。它开始于一个计划,并有机地发展到它的完成状态。开发一个程序需要解决很多问题,有时你会走错路,陷入困境。这很正常,你应该做好改变和适应的准备。遵循DRY原则的良好计划和注释良好的代码将阻止您的代码变成无法遵循和理解的复杂混乱。
挑战
尝试编写伪代码来描述一些常见的任务,如刷牙或骑自行车。
编写伪代码,在数字列表中找到最大的数字。
尝试将一些不同的消息记录到控制台
console.log ()
.你可以看到我在CodePen上的代码.在“I Can Code a Rainbow”程序中为数组添加更多的颜色。你可以看到我在CodePen上的代码.
总结
- 算法是一组逐步完成特定任务的指令。
- 伪代码用于编写程序而不使用特定的编程语言。
- JavaScript创建于1995年,被认为是Web语言。
- JavaScript的主要环境是浏览器,但它也可以在其他环境中运行。
- JavaScript的每个版本都必须向后兼容旧版本。
- 代码应该易于阅读,并定期重构以保持其平稳运行。
- 在编码时记住DRY原则。不要重复自己!
在下一章中,我们将开始研究一些编程基础知识。我们走吧!