用chrome学编程利用chrome学编程,一切都变得简单...

利用chrome学编程,一切都变得简单...

用chrome学编程,安装浏览器就可以上手,javascript本身也足够强大,前后端通吃,容易出成果,有了成果产生的成就感也就有了持续学习编程的动力...

chrome_js

编辑器在哪里?

开启snippets

(一) 孩子第一次开口都叫"妈妈",我们第一次编程要打印"Hello world"!

动图_天才第一步

源码: alert("Hello World");

为什么第一次要打印Hello world? Hello world是程序员的符号和图腾,第一本介绍C语言的书《C程序设计语言》,书的第一章通过打印Hello world介绍了c语言,后来人们也都跟着用了... 其实Hello world你可能一辈子也用不到,你也可以打印Hello girl

(二) 九九乘法表!

先放一张童年阴影:

快乐学习_九九乘法表

记得小学二年级背诵"小九九",老师为了检验学生背诵熟练度,发明了2种检测方式:

广度检测:

学生按座位次序(这个不流行摇号...),到讲台背乘法表,通过回座位,不通过继续排队(小学生不容易额~~).

深度检测:

DNF_小九

何为"斜着背"

其实像"小九九"乘法表这种问题,编程几句就可以搞定,而且不出错!

动图_js打印小九九

源码:

function jiujiu() {
    // 存储每一行的数据
    var result = "";

    for (var i = 1; i <= 9; i++) {
        // 清空上一行的数据
        result = "";
        for (var j = 1; j <= i; j++) {
            // 表示每一句运算口诀
            con = i + "*" + j + "=" + i*j;          
            result = result + " " + con;
        }
        // 打印每一行的数据
        console.log(result + "\n");       
    }
}
// 调用刚刚写好的函数
jiujiu();

九九乘法表涉及了编程的循环(负责从一数到九),函数(决定什么时候开始数)...

循环就是让计算机做重复的工作:

动图_循环弹出

这里面的i被称为变量,负责计数,计算机每完成一次,i就会加一,当累加到十的时候,任务完成!

for(var i = 1; i<=10; i++){

    alert("这是第"+i+"个弹窗");
    
}

这里面的function就是函数,函数是一个功能,它可以简单而无聊,也可以复杂而强大...

但一个好的函数可以简单而强大...

(三) 函数为chrome写扩展

chrome扩展可以看做是浏览器的一个小插件,这次我们就用函数为chrome写一个时钟...

动图_时钟扩展

源码:

function my_clock(clock_div){
    // 获取今天的日期  
    var today = new Date();
    // 获取当前的"时" 
    var h = today.getHours();
    // 获取当前的"秒" 
    var m = today.getMinutes();
    // 获取当前的"秒" 
    var s = today.getSeconds();

    // 为了美观, 当"分钟数"小于十的时候在个位数的前面补一个零
    m = m >= 10? m: ('0'+m);
    // 为了美观, 当"秒钟数"小于十的时候在个位数的前面补一个零
    s = s >= 10? s: ('0'+s);

    // 将刚刚得到的数据拼接好,插入到结点中
    clock_div.innerHTML = h+":" + m + ":" + s;
    // 每隔1000毫秒(一秒钟)更新一次时间  
    setTimeout(function(){my_clock(clock_div)}, 1000);
}

// 通过Id获取元素结点
var clock_div = document.getElementById("clock_div");

// 将元素结点传入my_clock函数

my_clock(clock_div);

简单与强大并不矛盾,getHours, getMinutes, getSeconds是系统内置的函数,我们简单调用它们,它们为程序员提供强大的功能.

如何获取独立IDE?

动图_独立IDE


教程涉及到的资源我都通过百度网盘分享给大家,为了便于大家的下载,资源整合到了一张独立的帖子里,链接如下: http://www.jianshu.com/p/4f28e1ae08b1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

C/C++获取本地时间常见方法

(1)UTC (Coordinated Universal Time):协调世界时,又称世界标准时间。曾由格林威治平均时间(Greenwich Mean Tim...

9410
来自专栏阮一峰的网络日志

Javascript的10个设计缺陷

前几篇文章,我经常说Javascript的设计不够严谨,有很多失误。 今天的这一篇,前半部分就谈为什么会这样,后半部分将列举Javascript的10个设计缺陷...

37170
来自专栏大数据文摘

史上最强算法论战:请不要嘻哈,这是哈希

28660
来自专栏架构师之路

深入浅出搜索架构引擎、方案与细节(上)

一、缘起 《100亿数据1万属性数据架构设计》文章发布后,不少朋友对58同城自研搜索引擎E-search比较感兴趣,故专门撰文体系化的聊聊搜索引擎,从宏观到细节...

88250
来自专栏从流域到海域

Python 条件判断

Python if语句 格式:注意不要漏写:这是容易犯错的地方。 if语句包含两部分,判断部分和执行部分,只有在判断部分得到的布尔值为True时,才会执行执...

270100
来自专栏IT笔记

JAVA工作三年面试(一)

博主毕业快满三年了,由于种种原因想换一份工作。学了 7 年计算机技术,在目前的行业用到的技术不多,还是想去寻找一份互联网行业的工作,这样更能学以致用发挥自己的特...

2K80
来自专栏函数式编程语言及工具

细谈Slick(5)- 学习体会和将来实际应用的一些想法

   通过一段时间的学习和了解以及前面几篇关于Slick的讨论后对Slick这个函数式数据库编程工具有了些具体的了解。回顾我学习Slick的目的,产生了许多想法...

21480
来自专栏web前端教室

javascript ES6 初次相见

JS的ES6网上也热炒了好久了, 我一直也没怎么太细看, 今天想起来就写个东西, 也为分享,也为学习。 我喜欢接地气一点,所以网上的那些新名词我就不写了, 就写...

19870
来自专栏Janti

项目心得:广度遍历搜索部门处理业务

部门树节点 平常在做后台管理系统的时候,多多少少都会涉及部门管理,部门有上下级,所以架构会呈现出树形,下图是一个简单的部门节点图: ? 这个和平时的二叉树很像,...

32880
来自专栏圆方圆学院精选

【许晓笛】EOS 数据库与持久化 API —— 实战

上次的文章详细讲解了 EOS 数据库的架构,本文将以官方示例为基础,详解 EOS 数据库的开发实战。

11630

扫码关注云+社区

领取腾讯云代金券