第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('nn')
,回车运行。控制台打印了以下格式:
"“千机变”之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('nn')
小鱼:哇塞,我也学会编程了! 猫哥:干得漂亮!以后遇到这种重复性的工作,记得使用这类编程范式来解决哦。 小鱼:好滴!……可是,我要怎么样才能把新闻摘要和刚才的新闻链接放在一起呢? 猫哥:你可以试试我刚才说的 CSS 选择器以及 DOM 的 querySelector 方法。 猫哥:一会我把答案放在我的微信公众号「猫哥学前班」里,你关注之后回复消息
js1
就能获得了。如果有不清楚的,百度一下或者直接来找我吧。 小鱼:猫哥,不如你收我做关门弟子,我以后跟你学编程吧~ 猫哥:哈哈,收你做徒弟没问题,可是为什么要「关门」呢?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 命令行通配符及转义符的实现
- Python爬虫抓取指定网页图片代码实例
- PHP变量作用域(全局变量&局部变量)&global&static关键字用法实例分析
- CentOS 7 安装Chrome浏览器的方法
- PHP高级编程之消息队列原理与实现方法详解
- thinkphp5.1框架模板布局与模板继承用法分析
- Linux内核设备驱动之内存管理笔记整理
- Matplotlib 绘制饼图解决文字重叠的方法
- Yii 实现数据加密和解密的示例代码
- 3分钟看懂Python后端必须知道的Django的信号机制
- Hadoop 2.X新特性回收站功能的讲解
- php开发论坛系统
- 详解python中GPU版本的opencv常用方法介绍
- 详解Python IO编程
- PHP 使用位运算实现四则运算的代码