第1章:初识编程

写在前面

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

眼看着 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 就能获得了。如果有不清楚的,百度一下或者直接来找我吧。 小鱼:猫哥,不如你收我做关门弟子,我以后跟你学编程吧~ 猫哥:哈哈,收你做徒弟没问题,可是为什么要「关门」呢?

原文发布于微信公众号 - 猫哥学前班(imgXQB)

原文发表时间:2017-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

关于网页设计的一些统计数字

● 2003年,全世界网页的平均大小是93.7KB,2008年增长到312KB,5年中翻了3.3倍。(这里的网页大小包括图片、CSS文件、Javascript文...

1052
来自专栏非著名程序员

好的搜索技巧能够造就好的程序员

? 搜索,是互联网的入口,每个人都离不开搜索,更何况程序员?程序员最离不开的有两样东西,一个是 GitHub ,一个是搜索引擎。离开这两样东西,我相信大部分程...

19210
来自专栏Data Analysis & Viz

手把手教你完成一个数据科学小项目(2):数据提取、IP查询

本系列将全面涉及本项目从爬虫、数据提取与准备、数据异常发现与清洗、分析与可视化等细节,并将代码统一开源在GitHub:DesertsX/gulius-proje...

671
来自专栏极客猴

爬虫实战二:爬取电影天堂的最新电影

前面两篇文章介绍 requests 和 xpath 的用法。我们推崇学以致用,所以本文讲解利用这两个工具进行实战。

662
来自专栏cloudskyme

众推平台架构——分布式爬虫

分布式爬虫架构 经过新一轮的投票,项目的范围已经基本确定。 ? 大家决定 全力以付,集中攻克“分布式爬虫”。 分布式爬虫架构1 使用队列,即生产者,消费都模式。...

3205
来自专栏守候书阁

重构 - 改善代码的各方面问题

做前端开发有一段时间了,在这段时间里面,对于自己的要求,不仅仅是项目能完成,功能正常使用这一层面上。还尽力的研究怎么写出优雅的代码,性能更好,维护性更强的代码,...

41713
来自专栏程序员互动联盟

【专业技术第四讲】如何检测浏览器的快慢?

现在做浏览器的大概有下面几个方向吧 1. 从事浏览器外壳的工作,开发基于浏览器的各种应用和扩展; 2. 做浏览器内核优化的,大概又分为几个部分: a. 渲染模块...

33012
来自专栏守候书阁

重构 - 改善代码的各方面问题

做前端开发有一段时间了,在这段时间里面,对于自己的要求,不仅仅是项目能完成,功能正常使用这一层面上。还尽力的研究怎么写出优雅的代码,性能更好,维护性更强的代码,...

671
来自专栏CDA数据分析师

电商数据分析时的excel的基本操作(吐血总结)

一般的使用Excel的工作习惯 1.保留原始文件,新建一个Sheet进行处理数据存放,或者另外COPY一份新的文档,尽量保持原始数据的原貌,因为我们都不知道啥时...

24610
来自专栏微信公众号:Java团长

Java EE基本框架(Struts2+Spring+MyBatis三层,Struts MVC)之间的关系

一个JavaEE的项目,页面用JSP,后台用了Struts2+Spring+MyBatis,数据库用的是Oracle,这么多技术名词,他们之间的关系如何,整体是...

653

扫码关注云+社区