第一章 导学
在我们生活的这个时代,编程是无价之宝。它具有提升就业、未来发展甚至是你的智力的超能力。计算机正在驱动人类历史最大的资本扩张之一,没有比现在学习编程的更好时机了。
为何学习编程
我与编程的第一次正面交锋是在大学时。我们要学习一门名为 C#(C Sharp)的编程语言,第一次考试我就挂科了,第二次补考也仅仅是勉强通过。带头内心的挫败感,很长时间我都和编程保持距离。我把它当成一种我不具备的天赋。后来我从工程的工作转到了视觉效果,因为我想要进入一个有更多创意表达空间的领域。通过视效的工作,我逐渐意识到整个操作都是借力于计算机运算。从使用的软件到辅助制片(production)的项目管理...,编程无处不在。通过它各工作室可以为电影带来震憾的效果,并产生数百、数千万美元的票房。
意识到在我的行业中编程的魔力,我决定开始我的编程学习之旅。最终成为了教授在视效中广泛使用的编程语言Python 的老师。这给内心带来了满足感,不仅让我能更完整地完成视效作品、创建获奖的视效,它还让我在软 件开发领域获得更好的职业发展。
写代码 vs. 编程
你一定有相似的场景下听说过写代码(coding)和编程(programming),可能会奇怪两者的区别是什么。在过去的几年中,写代码在表述中被更多地选择来让编程走进大众世界。基本前提是你可能在写代码并对数字经济做着贡献,而实际并不是在编程。
让我来举个例子:你可能在使用网页语言HTML和CSS,而它们并非编程语言。所以在使用这些语言时你并不是真的在编程,崦是为网站添加样式和结构(下面一部分会讲解其用法)。但通过编程语言JavaScript来写代码就是在编程了。通过编程语言我们只可以让计算机“做事”。每当编程时,你也在写代码,但写代码时并不一定在编程。写代码是一个更能用的词语,用于描述与计算机通讯的各种情况。
基本上可以把编程当做写代码的一个子集,但说句实话这两个词现在通常可以互换。本书的主要目的是教授编程。我们将使用编程语言JavaScript来写代码编程。
HTML 和 CSS
回看我的学习编程之路,我发现我缺乏对教授初学者写代码方面的努力,其中一个主要原因是这个领域使用HTML和CSS作为入门语言。
这些语言的问题在于它们甚至不是编程语言。HTML是一种标记语言,用于定义浏览器所能理解的文件结构。比如,HTML中教你如何为浏览器编写文件,然后浏览器会知道文件的哪一部分是头部、段落等。
同样,CSS也不是编程语言,它是一种样式语言,能让HTML文档更加美观,并且理想情况让它比之前对用户更友好。此外,虽然CSS可用于创建非常好看的效果,但使用时通常是反直觉的,并且即便对于软件工程师也是很难进行推理的。学习CSS不仅不是在学习编程,而且如果给网站添加样式不是你的唯一目的的话,它还会是一种让初学者觉得非常无趣的事情。
使用这些语言教授写代码的推力是可以理解的。毕竟网页应用无处不在并且有些还带有巨额收益,这让人们都想要在网上创建自己的项目。如果你要创建的是网站,就需要在某种程度上使用这些语言。但从这些语言入手会形成对写代码的误解。在创建程序或应用时写代码会更有回报性并更有趣,因为这样可能性会更泛。如前面所讨论,我们需要使用编程语言来创建程序,那么问题很显了:什么样的语言是编程语言?
你可以查看维基百科获得半正式的定义。但对我而言,编程语言需要带有能允许我们表述一些基本运算的某些控制结构。这一定义对于初学者可能没什么意义。意思是说在编程语言中存在结构来让计算机执行逻辑运算。这些结构在稍后我们将更深入介绍,它们有:根据给定条件和存储值的变量输出不同结果的条件结构,或让程序重复执行指定次数的循环结构。如果尚不能理解不必担心,本书就是让我们学习所有这些基本编程概念的。
几乎所有编程语言都有这类基础结构,让我们可以构建更为复杂的应用。以英语或其它你熟悉的语言来类比,有动词、名词和形容词,使用这些作为基础,人们既可以说简单的事情,也可以去写伟大的小说。这些基础正是HTML和CSS所缺失的,而在编程语言中可以获取。
本书中我们将学习所有这些基本结构,并让我们通过JavaScript编程语言来向计算机传达编程意图。
为何学习JavaScript?
市面上有很多种编程语言,本书将使用非常流行的编程语言JavaScript来进行代码编写的教学。
JavaScript是使用最广泛的编程语言之一,因为它内置在浏览器中。因此,几乎所有的网页和应该都在某种程度上使用JavaScript。近年来,JavaScript不仅用在网页用户交互编程中,还用于服务端:后台应用,物联网(IOT) 设备或安卓、iPhone等平台移动端应用。尽量它来自网页开发,JavaScript的知识可应用于其它大量领域。
因为JavaScript的流行性和无处不在,在碰到问题时可以很容易找到相关资源和信息。它背后有强大和活跃的社区。在知名的问答网站 StackOverflow上有数百万与JavaScript相关的问题。如果使用该语言并碰到了问题,很可能其他人也碰到过同样的问题,并在该网上提问过,可以在上面找到供你学习的答案。
我不会讲到编程语言或静态语言的细节,但作为动态语言的JavaScript,与其它静态语言相比代码更简洁,也更易于书写。例1-1和1-2 中为不同语言向屏幕输出‘hello world’ 的简单语句的写法。注意使用JavaScript来写代码有多简短:
1-1 使用C++在屏幕上打印Hello World(来源: http://helloworldcollection.de/)
// Hello World in C++ (pre-ISO)
#include <iostream.h>
main()
{
cout << "Hello World!" << endl;
return 0;
}
1-2 使用Java在屏幕上打印Hello World(来源: http://helloworldcollection.de/)
// Hello World in Java
class HelloWorld {
static public void main( String args[] ) {
System.out.println( "Hello World!" );
}
}
使用JavaScript在屏幕上打印Hello World
console.log('Hello World');
学习JavaScript的另一个优势是,因为它是网页语言,我们能以最简单的方式向其它分享我们的创意。我觉得在学习新技能时能够分享并获得反馈非常的重要。
总结一下,有学习编程以及JavaScript是一个很好的选择有很多的原因,因为它:
- 易于编写
- 很流行并且无处不在
- 应用于大量领域
为什么会存在不同的编程语言?
你一定会想为什么要有这么多功能相近的编程语言呢?
这是一个很好的问题。存在不同的编程语言是因为它们的设计原则各不相同。有些语言很冗长,但可以让你对自己程序的稳定性和速度有更多的控制。有些语言很简洁但执行速度较慢。有些语言适合特定的任务。JavaScript适于全栈网页开发,Matlab适用于数学计算,C++在游戏开发具有统治力,Julia用于数据科学。但这不并说这些领域就不能使用其它语言了。Unity游戏引擎提供了C#来进行游戏开发。Python也很适合数据科学。GoLang或很多其它语言可用于后台网页开发。有时归结于开发人员偏好哪种语言或已了解哪种语言。有时又取决于给定项目本身的限制。
我曾就职于视效行业,在该领域能够使用的软件包可通过Python或C++进行自动化。因此在这一领域它们就是很好的选择,提供了对我们所使用工具的大量支持。对于视效来说学习Java几乎就没什么 用,除非你后面想要学习的其它语言与它也有很多相似的原则。
选择第一门语言有时非常难,因为有很多不错的选项。有时选择受应用领域所限。如果你想要使用Unreal引擎来创建游戏,那么就应该学习C++。但是如果这是你第一次学习编程语言,你将而对陡峭的学习曲线,积极性被打消。
JavaScript是初学编程语言时一个很好的选择。如前面所述,它广泛用于大量的应用领域,可以通过大量应用进行实验和测试。它背后有一个强大、活动的社区,语法也很简洁,这让它很人类语言非常相近。
通过 p5.js 学习JavaScript
学习编程的最大挑战之一是能随手找到一个既有趣、印象深刻又对主题具有描述性的示例。一旦掌握了编程,它会是一个回报性和有趣性都很强的事情,但对于初学者,那些专业编程人员需要处理的大部分问题会显示无趣甚至无聊。这也是为什么我们使用一个叫p5.js的JavaScript库来进行编程入门的教学。p5.js让我们可以创建很有趣的交互和视图片断,创建过程也很有意思,同时也能巩固软件开发基础。这个库的视觉属性让我们可以通过图像来看到我们的脚本的效果,并对编程结构有很近距离的掌握。
p5.js是一个编程库。编程库可以认为是一个为特定目的创建的代码集合,这样在执行与该目的相关的操作时,都不需自己实现功能而只要使用这个库就可以了。库是建立在语言核心功能之上并对其的扩展。对于JavaScript,有几万种库可以执行大量不同的操作。所以在尝试实现自己的功能之前最好能去看看是否其它人 已创建相同功能的开源甚至是收费库。这样的库一般经过实战检验,我们可以从容地使用,而不是自己去设计解决方案,可能会在开发程序时所没有预料到的问题。对于JavaScript这种内核不带有内置标准库的程序语言尤其如此,因此开发中会重度依赖第三方库来解决通用问题。下面举例说明几个比较有意思的库来让读者品味个中选择:
p5.js是一个基于草图想法的创意代码库。正如草图可供快速将创意绘制成原型一样,p5.js可写最少的代码来将视觉、交互或动画创意呈现到屏幕上。p5.js是知名的叫Processing 这个基于Java 编程语言的库在JavaScript中的实现。
值得一提的是Java和JavaScript是毫不相关的两种语言。JavaScript名称中包含Java是当时品牌和市场决策的一个失误。
p5.js的简洁属性让其成为非常易于学习的库。但不要以为p5.js 的能力非常有限。p5.js拥有大量的功能,惊人的发展历史和背后的社区,这些无不让那些想要使用代码创建艺术、设计、动捕或交互作品的人对它的学习成为一笔非常有价值的投资。p5.js程序短至潦潦数行,多至几千行。因为p5.js遵循极简的原则,有时小的p5.js程序也被称为草图(sketch)。虽然这是一种非常聪明的描述方式,但我个人对该称呼从来都不太感冒,因为这会混淆我们在做编 程这一事实。
可以看到p5.js一些实际应用,如创建数据可视化(图1-1)
图1-1. p5.js的数据可视化
或者你可以使用它创建抽象生成艺术(图1-2)
图1-2. p5.js的抽象生成艺术
你甚至可以创建动画或交互视觉作品,在本书最后我们将使用p5.js来创建一个交互式游戏。