Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第1章:初识编程 #23

Open
kaiye opened this issue Dec 20, 2017 · 1 comment
Open

第1章:初识编程 #23

kaiye opened this issue Dec 20, 2017 · 1 comment

Comments

@kaiye
Copy link
Owner

kaiye commented Dec 20, 2017

写在前面

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

眼看着 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
Copy link

Kingson commented Dec 21, 2017

图片挂掉了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants