第1章：初识编程

写在前面

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

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

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

新的任务

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

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

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

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

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

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

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

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

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

初识编程

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

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

小鱼：啊？！不会吧！

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

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

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

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

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

步骤4：鼠标右键点击，菜单中选择Copy -> Copy Selector

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

步骤6： 输入，在两个单引号之间粘贴刚才复制的字符串，即，按下回车

步骤7：重新输入，按下回车。控制台打印出了当前页面所有的热点新闻标题和链接

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

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

步骤8：重新输入，回车运行。控制台打印了以下格式：

小鱼：哇塞！

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

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

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

小鱼：好！

主要概念

属性、方法、参数

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

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

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

CSS 选择器

本例中，

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

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

DOM 方法

本例中，

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

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

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

数组方法

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

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

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

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

字符串拼接

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

箭头函数

本例中，为一个具体的箭头函数，箭头函数的形式通常为

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

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

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

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

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

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

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

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

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

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

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