用chrome学编程利用chrome学编程,一切都变得简单...
时间:2022-05-11
本文章向大家介绍用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
- 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 数组属性和方法