第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 方法。

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

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

猫哥:哈哈,收你做徒弟没问题,可是为什么要「关门」呢?

本文来自企鹅号 - 猫哥学前班媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

iOS 滚动视图的复用问题解决方案

LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题。它...

20660
来自专栏向治洪

iOS 滚动视图的复用问题解决方案

##LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题...

270100
来自专栏互联网杂技

最全面的前端开发指南

HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 <!-- bad --> <div id="main">...

34570
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

7510
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现对话效果

386120
来自专栏phodal

「微信小程序」剖析(四):原生的实时DOM转Virtual DOM

在之前的几篇文章里,我们讨论了MINA的一些原理。晚上在想着怎么结合Vux + Virtual Dom实现一个名为WINV框架的时候,在探索WCC功能才发现:自...

24760
来自专栏HTML5学堂

段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大...

42350
来自专栏Java帮帮-微信公众号-技术文章全总结

CSS Selectors Level 4新特性全面解析

前言 当看到 CSS Selectors Level 4 很多人会理所当然地喊出 CSS4。但是,这里必须明确一个概念,目前所谓的 CSS3 和 CSS4 都是...

32470
来自专栏好好学java的技术栈

特别的520,送给特别的你们,还不来看看?

13020
来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

30470

扫码关注云+社区

领取腾讯云代金券