js打印样式丢失_学习p5.js - 第一章导学-CSDN博客

第一章导学
第二章准备工作
第三章 p5.js中的颜色
第四章操作符和变量
第五章条件语句和比较运算符
第六章 p5.js中的更多变量
第七章循环
第八章函数
第九章对象，第十章数组
第十一章事件
第十二章 p5.js扩展知识
第十三章最终项目
附录写在最后

在我们生活的这个时代，编程是无价之宝。它具有提升就业、未来发展甚至是你的智力的超能力。计算机正在驱动人类历史最大的资本扩张之一，没有比现在学习编程的更好时机了。

为何学习编程

我与编程的第一次正面交锋是在大学时。我们要学习一门名为 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这种内核不带有内置标准库的程序语言尤其如此，因此开发中会重度依赖第三方库来解决通用问题。下面举例说明几个比较有意思的库来让读者品味个中选择：

Faker.js : 生成大量假数据
franc : 检测给定文本的语言
jimp : 图像处理库
cylon.js : 针对机器人、特惠计算和物联网的机器人库

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）