第1章：初识编程

[kaiye]

写在前面

之前答应过不少朋友今年要写个《猫哥极简编程入门》的系列，帮助各位对编程感兴趣的新人和非程序员，快速掌握一些实用的编程技巧，以便快速入门编程以及应付一些日常的工作需要。

眼看着 2017 年只剩下几天了，所以是时候展现真正的技术了……

本系列将会采用小说故事的写法，在一个个具体的故事场景中带入编程相关的知识，欢迎各位在文末留言自己的心得与建议。

新的任务

小鱼是 M 公司的一位产品经理，她的日常工作主要是「各种打杂」。最近老板给她安排了一个新的任务：每天早上 9 点半在钉钉群里给同事分享前一天的（科技）行业头条。

经过各种搜罗和同事的推荐，最终小鱼在新华网的科技首页上找到了合适的新闻来源：

http://www.xinhuanet.com/tech/index.htm

她对新闻的整理流程如下：

首先，用鼠标选中新闻标题，将它复制到新的文档：

“千机变”之2017年的手机代表们

然后，在新闻标题上点击鼠标右键选择「复制链接地址」，将新闻链接粘贴在了下面一行：

“千机变”之2017年的手机代表们
http://news.xinhuanet.com/tech/2017-12/20/c_1122138478.htm

接着，选中摘要，粘贴至新的一行

“千机变”之2017年的手机代表们
http://news.xinhuanet.com/tech/2017-12/20/c_1122138478.htm
截止到12月，依旧有新品手机发布，如此来看，2017年手机市场已经趋于饱和。细分市场下的手机产品有更加精确的对应，百元至万元的手机比比皆是，供选择的可能性太多也造成了行业产品冗余。

最后，使用同样的方法，将当天的其他新闻都粘贴进去

“千机变”之2017年的手机代表们
http://news.xinhuanet.com/tech/2017-12/20/c_1122138478.htm
截止到12月，依旧有新品手机发布，如此来看，2017年手机市场已经趋于饱和。细分市场下的手机产品有更加精确的对应，百元至万元的手机比比皆是，供选择的可能性太多也造成了行业产品冗余。

积极探索家电领域消费维权新途径
http://news.xinhuanet.com/tech/2017-12/20/c_1122137921.htm
在上海市消保委对外公布去年受理的122453件消费者投诉中，涉及家用电器、旅游及相关服务方面的消费投诉最多。为进一步剖析家电领域问题，家电办积极联系媒体、行业专家、维权志愿者，共同加入到消费体察队伍中去。

工业APP打破创新“围墙”
http://news.xinhuanet.com/tech/2017-12/20/c_1122137639.htm
工信部信息化和软件服务业司副司长李冠宇表示，加快推进工业软件发展，增强工业软件技术、产品研发能力和服务支撑水平，有助于推进我国工业互联网创新发展，促进软件业与工业协同发展。

...

毫无疑问，这是一件「简单而又枯燥」的事情。

初识编程

今天小鱼在整理新闻时，恰好被公司的程序员老司机猫哥看到了。

猫哥：如果你会编程的话，这些重复性的操作，只需要一行代码就可以搞定。

小鱼：啊？！不会吧！

猫哥：来，我给你演示下。

说完，猫哥接过了小鱼的电脑。

步骤1：用**「QQ浏览器」**重新打开新闻页面：http://www.xinhuanet.com/tech/index.htm

步骤2：在新闻标题「“千机变”之2017年的手机代表们」上按下鼠标右键，选择「检查（N）」

步骤3：浏览器的右侧打开了「开发者工具」

步骤4：鼠标右键点击 <a href="http://news.xinhuanet.com/tech/2017-12/20/c_1122138478.htm" target="_blank">“千机变”之2017年的手机代表们</a> ，菜单中选择 Copy -> Copy Selector

步骤5： 按下 Esc 键，打开 Console 面板

步骤6： 输入 $$('')，在两个单引号之间粘贴刚才复制的字符串，即 $$('#showData0 > li:nth-child(1) > h3 > a')，按下回车

步骤7：重新输入 $$('#showData0 > li > h3 > a') ，按下回车。控制台打印出了当前页面所有的热点新闻标题和链接

小鱼：刚才删掉的 :nth-child(1) 是什么？

猫哥：噢，那个是 CSS 伪类选择器。你现在只需要记住，把拷贝出来的 Selector 中类似 :nth-child(*) 的字符删除掉，就能选中所有标题了。

步骤8：重新输入 $$('#showData0 > li > h3 > a').map(a => a.innerText + '\n' + a.href).join('\n\n') ，回车运行。控制台打印了以下格式：

"“千机变”之2017年的手机代表们
http://news.xinhuanet.com/tech/2017-12/20/c_1122138478.htm

积极探索家电领域消费维权新途径
http://news.xinhuanet.com/tech/2017-12/20/c_1122137921.htm

工业APP打破创新“围墙”
http://news.xinhuanet.com/tech/2017-12/20/c_1122137639.htm

国家科技奖励改革应重在彰显荣誉
http://news.xinhuanet.com/tech/2017-12/20/c_1122137455.htm

从引力波到抗癌新希望
http://news.xinhuanet.com/tech/2017-12/20/c_1122137446.htm

...

小鱼：哇塞！

猫哥：你把打印出来的文本复制到新的文档中就可以了，记得删除掉开头和结尾的双引号。

小鱼：可是没有打印出新闻的摘要呀？

猫哥：别急，我先和你说下这行命令的相关概念，听完后你看能不能自己改写下命令，输出摘要。

小鱼：好！

主要概念

属性、方法、参数

本例中使用的编程语言为 JavaScript，简称 JS，属性、方法（或称函数）、参数基本是所有编程语言都具备的。

编程的过程实际上就是运行各类对象的方法，将对象的属性与给定的数值或字符进行运算的过程。例如，猫哥.头 通过 . 点号，取得了「猫哥」这个对象的「属性」「头」，猫哥.吃饭()，通过. 点号，取得了对象「猫哥」的「方法」「吃饭」，通过() 运行了猫哥的「吃饭」方法。

通常「方法」还可以接受任意数量的「参数」，例如，猫哥.吃饭(砂锅粥)，表明对象「猫哥」运行了「吃饭」方法，吃的「参数」是「砂锅粥」。

CSS 选择器

本例中，#showData0 > li:nth-child(1) > h3 > a

网页中的元素，从代码的角度来看，就是一个树状的结构，从根节点从分出子节点，再从子节点中分出孙子节点。这些节点通过浏览器渲染成网页中的标题、文本、链接、图片等等，我们把网页元素的这种树状结构称为 DOM 树。

CSS 选择器可以用来标识定位 DOM 树中的一个或一组 DOM 元素。

DOM 方法

本例中，$$

$$ 是开发者工具中内置的方法，能接受一个 CSS 选择器 ，返回匹配这个选择器的元素数组。

所有的 DOM 元素上都有一个 querySelector() 方法，该方法接受一个 CSS 选择器 ，用来在该 DOM 元素的所有子孙节点中查找匹配选择器的 DOM 元素。
通过 DOM 元素的 parentNode 属性，可以获取到当前元素的父元素。

同时，本例中还使用了 DOM 元素的 innerText 属性，该属性能获取 DOM 元素里的文本内容，即本例中的新闻标题文本。

数组方法

本例中，.map() 与 .join() 都是数组方法。如果你问我数组是什么？

简单来说，数组就是包含了多个元素的集合，用中括号和逗号来表示 [元素1，元素2，元素3]。

map 用于遍历数组中的所有元素，将传入的函数（函数 function，我们可以把不属于某个对象的方法叫做函数）应用于每个数组元素上，返回新的数组。

join 接收一个字符串参数，将所有的数组元素使用该字符串进行拼接。

字符串拼接

本例中，使用 + 号可以将 + 号两边的字符进行拼接成新的字符串。其中 \n 表示换行符，注意字符串要使用单引号或双引号括起来。

箭头函数

本例中，a => a.innerText + '\n' + a.href 为一个具体的箭头函数，箭头函数的形式通常为

(参数1，参数2) => {
	其他执行语句
	return 返回值
}

本例中只有一个参数 a，可以省略()，且只有一行执行语句，且该语句的执行结果就是返回值，所以可以直接省略 { } 和 return

猫哥：好了，讲完这些概念，你自己写行命令输出下所有新闻摘要试试。

小鱼：嗯……应该替换掉你这个例子里的 CSS 选择器和箭头函数的内容就可以了吧。

于是小鱼在开发者工具的控制台（console）中输入以下语句，顺利地得到了所有的新闻摘要。

$$('#showData0 > li > p').map(a => a.innerText).join('\n\n')

小鱼：哇塞，我也学会编程了！

猫哥：干得漂亮！以后遇到这种重复性的工作，记得使用这类编程范式来解决哦。

小鱼：好滴！……可是，我要怎么样才能把新闻摘要和刚才的新闻链接放在一起呢？

猫哥：你可以试试我刚才说的 CSS 选择器以及 DOM 的 querySelector 方法。

猫哥：一会我把答案放在我的微信公众号「猫哥学前班」里，你关注之后回复消息 js1 就能获得了。如果有不清楚的，百度一下或者直接来找我吧。

小鱼：猫哥，不如你收我做关门弟子，我以后跟你学编程吧~

猫哥：哈哈，收你做徒弟没问题，可是为什么要「关门」呢？

[Kingson]

图片挂掉了