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

相关文章

来自专栏编程微刊

2018年各大互联网前端面试题五(今日头条)

3283
来自专栏web前端教室

药不能停之--CSS怎么学怎么记效果好?

image.png CSS这个东西,唉,我也是不知道什么时候就学会了的。想当年根本没有前端,做网页就是table套table的时代,CSS基本上只能一种用法...

1996
来自专栏牛客网

2018春招酷乐家面经分享(前端篇)一面:二面:面试总结:

前言:酷家乐面试前会通知你面试时间,面试后会反馈面试结果,总之,真的挺好的,可惜就是楼主二面没过~~~ 一面: 1.自我介绍 2.说说自己做的前端项目 3.为什...

3518
来自专栏JackieZheng

如何写出好代码

如何写出好代码 这个题目把我自己都看傻了,因为仔细想想,这不是一个命题,是对代码的思考,对细节的推敲和打磨。写好代码是一门学问,还是一种修行。 以前是公众号(...

2165
来自专栏数据小魔方

左手用R右手Python系列17——CSS表达式与网页解析

上一篇着重讲解了网页解析中的XPath表达式,今天这一篇主要讲解另一套网页解析语法——CSS路径表达式。 R语言与Python中都有支持CSS表达式的解析库,R...

3335
来自专栏前端知识分享

第66天:闭包的原理和函数传参

在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型...

1044
来自专栏章鱼的慢慢技术路

2017年第八届蓝桥杯C/C++B组省赛题目解析

3235
来自专栏tkokof 的技术,小趣及杂念

HGE系列之八管中窥豹(粒子系统)

这次的HGE系列让我们一起来学习一下HGE引擎的粒子系统部分,对于粒子系统不甚了解的朋友可以从这里开始了解。

783
来自专栏进步博客

[温故知新] Text-level semantics

The em element represents stress emphasis of its contents.

1113
来自专栏恰同学骚年

设计模式的征途—10.装饰(Decorator)模式

虽然目前房价依旧很高,就连我所在的成都郊区(非中心城区)的房价均价都早已破万,但却还是阻挡不了大家对新房的渴望和买房的热情。如果大家买的是清水房,那么无疑还有一...

763

扫码关注云+社区