第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 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

ECharts使用心得

ECharts百度旗下图标插件,在展示地图、雷达图等方面有很好的支持。 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || typ...

2627
来自专栏python成长之路

类实例:飞机大战

1435
来自专栏张俊红

房天下数据爬取及简单数据分析

总第64篇 01|明确本次爬虫以及目的: ---- 我是想看看太原的房地产情况,包括楼盘名称、价格、所处区域、评论数(一定程度上可以反映出该楼盘受欢迎程度)...

2867
来自专栏coding

2018年Go语言实战笔记1含着金钥匙出生的gogo环境搭建第一个go程序变量常量数据类型值类型与引用类型小结

由于出身名门,Go在诞生之初就吸引了大批开发者的关注。诞生十年以来,已经有很多基于Go的应用,一直有传言Go在将来是要取代现在Java的位置。对于一门只有十年历...

601
来自专栏前端儿

做网站,乱码?应该选用什么编码?GB2312 ? UTF-8 ?

================================================起===============================...

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

Android上学习ARM指令集系列第一篇

打算为入门ARM指令集写点初级文章,没什么远大理想,写到哪里算哪里,权当娱乐罢了。工作中经常碰到crash的问题,如果是debug版本,那还好, 调...

3198
来自专栏数据结构与算法

12:加密的病历单

12:加密的病历单 总时间限制: 1000ms 内存限制: 65536kB描述 小英是药学专业大三的学生,暑假期间获得了去医院药房实习的机会。  在药房实习期...

3164
来自专栏微信小开发

小程序“圣诞帽”的实现思路

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!...

20710
来自专栏Java爬坑系列

易语言 【寻找文本】命令的bug

最近在重写易语言模块的时候,在取子文本操作时老是出错,经常出现一些奇怪的问题,一开始以为是代码问题,可是找半天硬是找不到问题所在。 image.png 于是进...

20211
来自专栏十月梦想

Express框架之Jade模板引擎使用

前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合express框架如何使用jade!

732

扫描关注云+社区