├── gcc ├── compile.sh ├── gcc_hello.sh ├── hello.c ├── gcc.md ├── C.md ├── hello.s └── gcc_hello.s ├── chapter5 ├── src │ ├── helloworld.py │ ├── server.py │ └── steps.py └── simple-python.md ├── book.png ├── RESTful └── RESTful.md ├── chapter2 ├── src │ ├── jsl │ ├── app.js │ ├── helloworld.html │ └── jsl.default.conf └── anywhere-javascript.md ├── chapter4 ├── src │ ├── jsl │ ├── app.js │ ├── index.html │ ├── style.css │ └── jsl.default.conf └── anywhere-hjc.md ├── chapter3 ├── src │ ├── nostyle.png │ ├── redfonts.png │ ├── helloworld.html │ └── style.css └── anywhere-css.md ├── chapter1 ├── javascript-design.png ├── javascript-design.rif ├── README.md └── anywhere-html.md ├── README.md ├── SUMMARY.md └── content.md /gcc/compile.sh: -------------------------------------------------------------------------------- 1 | gcc -O2 -S -c hello.c 2 | -------------------------------------------------------------------------------- /chapter5/src/helloworld.py: -------------------------------------------------------------------------------- 1 | print "Hello,World" 2 | -------------------------------------------------------------------------------- /gcc/gcc_hello.sh: -------------------------------------------------------------------------------- 1 | gcc -c gcc_hello.s && ld hello.o && ./a.out -------------------------------------------------------------------------------- /book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/book.png -------------------------------------------------------------------------------- /RESTful/RESTful.md: -------------------------------------------------------------------------------- 1 | RESTful 2 | ==== 3 | RESTful就是个有趣的东西，我们围绕着这个构建了一个服务 -------------------------------------------------------------------------------- /chapter2/src/jsl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter2/src/jsl -------------------------------------------------------------------------------- /chapter4/src/jsl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter4/src/jsl -------------------------------------------------------------------------------- /chapter2/src/app.js: -------------------------------------------------------------------------------- 1 | var para = document.getElementById("para"); 2 | para.style.color = "blue"; -------------------------------------------------------------------------------- /chapter3/src/nostyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter3/src/nostyle.png -------------------------------------------------------------------------------- /chapter3/src/redfonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter3/src/redfonts.png -------------------------------------------------------------------------------- /chapter1/javascript-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter1/javascript-design.png -------------------------------------------------------------------------------- /chapter1/javascript-design.rif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/beageek/master/chapter1/javascript-design.rif -------------------------------------------------------------------------------- /gcc/hello.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | int main(){ 4 | printf("Hello,world"); 5 | return 0; 6 | } 7 | -------------------------------------------------------------------------------- /chapter1/README.md: -------------------------------------------------------------------------------- 1 | 2 | 原文在 [be a geek 1:无处不在的html][1] 3 | 4 | [1]:http://www.phodal.com/blog/be-a-geek-chapter-1-anywhere-html/ -------------------------------------------------------------------------------- /chapter4/src/app.js: -------------------------------------------------------------------------------- 1 | function Calc(){ 2 | 3 | } 4 | Calc.prototype.add=function(a,b){ 5 | return a+b; 6 | }; 7 | Calc.prototype.sub=function(a,b){ 8 | return a-b; 9 | }; 10 | -------------------------------------------------------------------------------- /gcc/gcc.md: -------------------------------------------------------------------------------- 1 | #GCC# 2 | 3 | 4 | #include 5 | 6 | int main(){ 7 | printf("Hello,world"); 8 | return 0; 9 | } 10 | 11 | 12 | 13 | gcc -O2 -S -c hello.c 14 | 15 | -------------------------------------------------------------------------------- /chapter5/src/server.py: -------------------------------------------------------------------------------- 1 | import cherrypy 2 | class HelloWorld(object): 3 | def index(self): 4 | return "Hello World!" 5 | index.exposed = True 6 | 7 | cherrypy.quickstart(HelloWorld()) 8 | -------------------------------------------------------------------------------- /chapter4/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Library 4 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /chapter2/src/helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Red

8 | 9 | 10 | -------------------------------------------------------------------------------- /gcc/C.md: -------------------------------------------------------------------------------- 1 | C 2 | ==== 3 | 4 | C语言算是经典中的经典作为一门大学中的必修课，只是这是在国内范围内来说的。总得来说这门语言有点难，有的语言不是在语法和语义上，不是我们在平常所了解的那些语言，我们需要去关心系统的底层，有好似会成为一种噩梦一样。 5 | 6 | ##C与操作系统## 7 | C与操作系统有着很友好的部分，而这并不是C成为近乎操作系统语言标准的原因之一。和Javascript与WEB之风流行一样，C之所以流行开来原因是Unix系统的流行，加之语言本身的特性。 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##Be a geek# 2 | 有一天，走在回学校的路上，我在想：“未来是科技时代（现在也是），只是未来科技会无处不在，而如果我们对于周围的无处不在的代码一无所知的话，或许我们会成为黑客帝国中的一般人”。所以开始想着，人们会开始学习编程就像学习一门语言一样，直到有一天我看到了学习编程如同学习一门语言。这算是一个有趣的时间点，于是我开始想着像之前做最小物联网系统的那些步骤一样，写一个简单的入门。也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。 3 | 4 | 我们先从身边的语言下手，也就是现在无处不在的html+javascript+css。 -------------------------------------------------------------------------------- /chapter3/src/helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS example 5 | 6 | 7 | 8 |

如果没有一个好的结构

9 |
10 |

那么以后可能就是这样子。。。。

11 |
12 | 13 | -------------------------------------------------------------------------------- /chapter3/src/style.css: -------------------------------------------------------------------------------- 1 | .para{ 2 | font-size: 22px; 3 | color:#f00; 4 | text-align: center; 5 | padding-left: 20px; 6 | } 7 | .para2{ 8 | font-size:44px; 9 | color:#3ed; 10 | text-indent: 2em; 11 | padding-left: 2em; 12 | } 13 | .para_bg{ 14 | background-color:#000; 15 | } 16 | 17 | p.para{ 18 | color:#f0f; 19 | } 20 | div#content p { 21 | font-size:22px; 22 | } -------------------------------------------------------------------------------- /chapter5/src/steps.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import json 3 | import urllib2 4 | import serial 5 | import time 6 | 7 | url="http://b.phodal.com/athome/1" 8 | 9 | while 1: 10 | try: 11 | date=urllib2.urlopen(url) 12 | result=json.load(date) 13 | status=result[0]['led1'] 14 | print status 15 | except urllib2.URLError: 16 | print "Bad URL or timeout" -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [HJC](content.md) 4 | * [无处不在的HTML](chapter1/anywhere-html.md) 5 | * [无处不在的Javascript](chapter2/anywhere-javascript.md) 6 | * [无处不在的CSS](chapter3/anywhere-css.md) 7 | * [Anywhere](content.md) 8 | * [无处不在](chapter4/anywhere-hjc.md) 9 | * [Simple Python](chapter5/simple-python.md) 10 | * [C](gcc/gcc.md) 11 | * [DIP](oo/dip/dip.md) 12 | * [End](tw/thoughtworks.md) -------------------------------------------------------------------------------- /chapter4/src/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0px; 4 | padding: 0px; 5 | font-family: Helvetica; 6 | } 7 | a, 8 | a:visited { 9 | text-decoration: underline; 10 | } 11 | a[href]:after { 12 | content: " (" attr(href) ")"; 13 | } 14 | abbr[title]:after { 15 | content: " (" attr(title) ")"; 16 | } 17 | a[href^="javascript:"]:after, 18 | a[href^="#"]:after { 19 | content: ""; 20 | } -------------------------------------------------------------------------------- /gcc/hello.s: -------------------------------------------------------------------------------- 1 | .section __TEXT,__text,regular,pure_instructions 2 | .globl _main 3 | .align 4, 0x90 4 | _main: ## @main 5 | .cfi_startproc 6 | ## BB#0: 7 | pushq %rbp 8 | Ltmp2: 9 | .cfi_def_cfa_offset 16 10 | Ltmp3: 11 | .cfi_offset %rbp, -16 12 | movq %rsp, %rbp 13 | Ltmp4: 14 | .cfi_def_cfa_register %rbp 15 | leaq L_.str(%rip), %rdi 16 | xorb %al, %al 17 | callq _printf 18 | xorl %eax, %eax 19 | popq %rbp 20 | ret 21 | .cfi_endproc 22 | 23 | .section __TEXT,__cstring,cstring_literals 24 | L_.str: ## @.str 25 | .asciz "Hello,world" 26 | 27 | 28 | .subsections_via_symbols 29 | -------------------------------------------------------------------------------- /gcc/gcc_hello.s: -------------------------------------------------------------------------------- 1 | .global _start 2 | 3 | .text 4 | _start: 5 | # write(1, message, 13) 6 | mov $1, %rax # system call 1 is write 7 | mov $1, %rdi # file handle 1 is stdout 8 | mov $message, %rsi # address of string to output 9 | mov $13, %rdx # number of bytes 10 | syscall # invoke operating system to do the write 11 | 12 | # exit(0) 13 | mov $60, %rax # system call 60 is exit 14 | xor %rdi, %rdi # we want return code 0 15 | syscall # invoke operating system to exit 16 | message: 17 | .ascii "Hello, world\n" 18 | -------------------------------------------------------------------------------- /content.md: -------------------------------------------------------------------------------- 1 | 2 | 基石 3 | ==== 4 | 5 | ------- 6 | - 无处不在的HTML 7 | ** 刀柄 熊猫** 8 | - 无处不在的 Javascript 9 | ** 利刃 白鹭 ** 10 | - 无处不在的CSS 11 | ** 舞者 装饰 ** 12 | - 无处不在的三剑客 13 | 14 | ------- 15 | 16 | 进阶 17 | ==== 18 | 19 | -------- 20 | 21 | - 简约之蛇 python 22 | ** 整洁的代码 ** 23 | - C assemble 24 | ** 物种的起源 ** 25 | 26 | ------- 27 | 28 | 硬件 29 | ==== 30 | 31 | - Linux 32 | ** 狮子 ** 33 | - Arduino 34 | ** 蝴蝶 ** 35 | - 51 36 | ** 螃蟹 ** 37 | 38 | 物联网 39 | ==== 40 | 41 | - Internet of Things 42 | ** 蜘蛛 ** 43 | - 大地之熊 HTTP 44 | ** 坚实的基础 ** 45 | - RESTful 46 | ** 袋貂 ** 47 | - Ajax 48 | ** 蝴蝶 ** 49 | - Ruby Dashboard 50 | ** 宝石 ** 51 | 52 | 53 | 编程似乎是一些熟能生巧的东西，有时并非我们比别人碰，只是不同的人有不同的经历，他学习过的东西你还没有学习，世界观不同了，作法也就不同了。 -------------------------------------------------------------------------------- /chapter1/anywhere-html.md: -------------------------------------------------------------------------------- 1 | #Be a Geek# 2 | 3 | 有一天，走在回学校的路上，我在想：“未来是科技时代（现在也是），只是未来科技会无处不在，而如果我们对于周围的无处不在的代码一无所知的话，或许我们会成为黑客帝国中的一般人”。所以开始想着，人们会开始学习编程就像学习一门语言一样，直到有一天我看到了学习编程如同学习一门语言。这算是一个有趣的时间点，于是我开始想着像之前做最小物联网系统的那些步骤一样，写一个简单的入门。也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。 4 | 5 | 我们先从身边的语言下手，也就是现在无处不在的html+javascript+css。 6 | 7 | ##从html开始## 8 | 从html开始的原因在于我们不需要去配置一个复杂的开发环境，也许你还不知道开始环境是什么东西，而这些需要去慢慢的了解才能接触，特别是对于普通的业余爱好者来说，对于专业的选手那些自然不是问题。HTML是Web的核心语言，也算是基础的语言。 9 | 10 | ###html的hello,world### 11 | Hello,world是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情事实很简单。虽然也有点hack的感觉，所以让我们新建一个文件叫"helloworld.html"。 12 | 13 | (PS:大部分人应该都是在windows下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里推荐用sublime text。破解不破解，注册不注册都不会对你的使用有太多的影响。) 14 | 15 | 1. 新建文件 16 | 17 | 2. 输入
hello,world
18 | 19 | 3. 保存为->"helloworld.html"， 20 | 21 | 4. 然后双击打开这个文件。 正常情况下应该是刚好用你的默认浏览器打开。只要是一个现代的浏览器的话，应该可以看到上面显示的是"Hello,world"。 22 | 23 | 这才是最短的hello,world程序，其次呢？ruby中的会是这样子的 24 | 25 | 
2.0.0-p353 :001 > p "hello,world"
 26 | "hello,world"
 27 |  => "hello,world"
 28 | 2.0.0-p353 :002 >
 29 |
30 | 31 | 等等，如果你了解过html的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完Nginx后看到It works!更让人激动了。 32 | 33 | 遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的bug。 34 | 35 | ###调试hello,world### 36 | 我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。 37 | 38 | 39 | 40 | hello,world 41 | 42 | 43 | 这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。 44 | 45 | ###说说hello,world## 46 | 我很不喜欢其中的<\*>，但是我也没有找到别的方法来代替它们，所以这一个设计得当的语言，或许大部分人都说这算不上是一门真正的语言，不过html的原义是 47 |
超文本标记语言
48 | 所以我们可以发现其中的关键词是标记——markup，也就是说html是一个markup，head是一个markup，body是一个markup。 49 | 50 | 而后，我们真正工作的代码是在body里面，至于为什么是在里面，这个问题算是太复杂了。 51 | 52 | 1. 我们所学的汉语是别人创造的，我们所正在学的这门语言也是别人创造的。 53 | 54 | 2. 我们在自己的语言里遵循着他代表是个男的，她代替是个女的。 55 | 56 | 57 | ###想用中文？### 58 | 所以我们也可以把计算机语言与现实世界的语言划上一个等号。而我们所要学习的语言，因为没有一门真正意义上的汉语语言，所以我们便觉得这些很复杂，如果我们可以用汉语代换掉上面的代码的话 59 | 60 | <语言> 61 | <头><结束头> 62 | <身体>你好，世界<结束身体> 63 | <结束语言> 64 | 65 | 看上去很奇怪，只是因为是音译过去的原因，也许你会觉得这样会好理解一点，但是输入上可能一点儿也不方便，因为这键盘都不适合我们去输入汉字，也意味着可能你输入的会有问题。 66 | 67 | 让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果 68 | 69 | <语言> <头><结束头> <身体>你好，世界<结束身体> <结束语言> 70 | 71 | 更不幸的结果可能是 72 | 73 | <璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█> 74 | 75 | 这是一个编码问题，对中文支持不友好。 76 | 77 | 所以我们把上面的代码改为和标记语言一样的结构 78 | 79 | <语言> 80 | <头> 81 | <身体>你好，世界 82 | <结束语言> 83 | 84 | 于是我们看到的结果便是 85 | 86 | <语言> <头> <身体>你好，世界 87 | 88 | 被chrome浏览器解析成什么样了？ 89 | 90 | <语言> 91 | <头> 92 | <身体>你好，世界 93 | 94 | 95 | 96 | 以\结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。 97 | 98 | 但是当我们把代码改成 99 | 100 | 你好世界 101 | 102 | 浏览器上面显示的内容就变成了 103 | 104 | 你好世界 105 | 106 | 或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。 107 | 108 | 结论: 109 | 110 | 1. 浏览器对中文支持不友好。 111 | 2. 浏览器对英文支持友好。 112 | 113 | 刚开始的时候不要对中文编程有太多的想法，这不是很现实的: 114 | 115 | 1. 现有的系统都是基于英语构建的，对中文支持不是很友好。 116 | 2. 中文输入的速度在某种程度上来说没有英语快。 117 | 118 | 我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，这些包括的东西有cpu，软件，硬件，而我们还需要考虑重新设计cpu的结构，在某种程度上来说会有些不现实。需要一代又一代的人的努力，只是在当前就更不现实了。忘记那些，师夷长之技以治夷。 119 | 120 | ###其他html标记### 121 | 添加一个标题， 122 | 123 | 124 | 125 | 标题 126 | 127 | hello,world 128 | 129 | 130 | 我们便可以在浏览器的最上方看到“标题”二字，真实世界的淘宝网也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。 131 | 132 | 133 | 134 | 标题 135 | 136 | 137 | hello,world 138 |

大标题

139 |

次标题

140 |

...

141 | 145 | 146 | 147 | 148 | 更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。 149 | 150 | ###美妙之处### 151 | 我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有C和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如python，我们所要做的就是 152 | 153 | $ python file.py 154 | =>hello,world 155 | 156 | 然后在终端上返回结果。只是因为在我看来学会html是有意义的，简单的上手，而后再慢慢地深入，如果一开始我们就开始去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了 157 | 158 | 1. 中文编程语言在当前意义不大，不现实，效率不高兼容性差 159 | 2. 语言的语法是固定的。（ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。） 160 | 3. 已经开始写代码，而不是还在配置开发环境。 161 | 4. 随身的工具才是最好的，最常用的code也才是实在的。 162 | 163 | 164 | ##更多## 165 | 我们还没有试着去解决，某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西如javascript,css。我们可以理解为Javascript是解决问题的语言，html是前端显示，css是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚学了下怎么在前端显示那些代码的行为，于是我们还需要Javascript。 -------------------------------------------------------------------------------- /chapter5/simple-python.md: -------------------------------------------------------------------------------- 1 | #Python# 2 | 作为一门计算机语言来说，Python会有下面的特点。 3 | 4 | - 语言学习起来容易 5 | - 解决生活中的实际问题 6 | - 支持多学科 7 | 8 | 我们可以和其他不是脚本语言的语言进行一个简单的对比，如C，你需要去编译去运行，有时候还需要解决跨平台问题，本来你是在你的Windows上运行得好好的，但是有一天你换了一个Mac电脑的时候，问题变得很棘手，你甚至不知道怎么去解决问题。我没有用过MFC，听说很方便，但是在其他平台下就没有一个好的解决方案。这里可能跑得有点远，但是不同的用户可能在不同的平台上，这也就是脚本语言的优势所在了。 9 | 10 | 11 | 12 | ##代码与散文## 13 | 你可能听过，也可能了解过，不过在这里我们可能不会去讲述那些基础的语法的东西，我们想说的是代码格式的重要性，在html中你可以这样去写你的代码 14 | 15 | This is a Title 16 |
17 |

flakjfaklfjalfa

18 | 19 | 20 | 又或者是js的minify，它可能会使你的代码看起来像是这样的: 21 | 22 | function NolTracker(b,a){this.pvar=b;this.mergeFeatures(a)} 23 | 24 | 可能的是如果是python的话，你可能会遇到下面的问题。。 25 | 26 | File "steps.py", line 10 27 | try: 28 | ^ 29 | IndentationError: expected an indented block 30 | 31 | 如果你对JSLint、Lint这类的工具有点印象的话，你也可以认为python集成了这类工具。整洁的代码至少应该看上去要有整洁的衣服，就好像是我们看到的一个人一样，而后我们才会有一个好的印象。更主要的一点是代码是写给人看的，而衣服更多的时候对于像我这样的人来说，他首先应该是要保暖的，其次对于一个懒的人来说。。。 32 | 33 |
程序应该是具有可读性的短文，它将在计算机上执行，从而解决某些问题
34 | 35 | 我们需要去读懂别人的代码，别人也需要去读懂我们的代码。计算机可以无条件地执行你那未经编排过的程序，但是人就不是如此了。 36 | 37 | var calc={add: function(a,b){return a+b;},sub: function(a,b){return a-b;},dif: function(a,b){if(a>b){return a;}else{return b;}}} 38 | 39 | 上面的代码相对于下面的代码可读性没有那么多，但是计算机可以无条件地执行上面的代码。上面的代码对于网络传输来说是好的，但是对于人来说并不是如此，我们需要一些工具来辅助我们去读懂上面的代码。如果代码上写得没有一点可读性，诸如函数命名没有多少实际意义，如果我们把前面的函数就成这样： 40 | 41 | var c={ 42 | a: function(a,b){ 43 | return a+b; 44 | }, 45 | s: function(a,b){ 46 | return a-b; 47 | }, 48 | d: function(a,b){ 49 | if(a>b){ 50 | return a; 51 | }else{ 52 | return b; 53 | } 54 | } 55 | } 56 | 57 | 那么只有在我们理解了这个函数是干什么之后才能理解函数是干什么，而不是光看函数名就可以了。 58 | 59 | 在Javascript解决一个函数的办法有很多，在其他一些语言如Ruby或者Perl中也是如此，解决问题的办法有很多，对于写代码的人来说是一个享受的过程，但是对于维护的人来说并非如此。而这个和Python的思想不是很一致的是，Python设计的理念是 60 | 61 |
对于特定的问题，只要有一种最好的方法来解决就够了
62 | 63 | 可读性的代码在今天显得比以前重要的多，以前写程序的时候我们需要去考虑使用汇编或者其他工具来提高程序的效率。 64 | 65 | .global _start 66 | 67 | .text 68 | _start: 69 | # write(1, message, 13) 70 | mov $1, %rax # system call 1 is write 71 | mov $1, %rdi # file handle 1 is stdout 72 | mov $message, %rsi # address of string to output 73 | mov $13, %rdx # number of bytes 74 | syscall # invoke operating system to do the write 75 | 76 | # exit(0) 77 | mov $60, %rax # system call 60 is exit 78 | xor %rdi, %rdi # we want return code 0 79 | syscall # invoke operating system to exit 80 | message: 81 | .ascii "Hello, world\n" 82 | 83 | 所以上面的代码的可读性在今天新生一代的程序员来说可能没有那么容易理解。芯片运行的速度越来越快，在程序上我们也需要一个越来越快的解决方案，而所谓的越来越快的解决方案指的不是运行速度上，而是开发速度上。如果你没有办法在同样时间内开发出更好的程序，那么你就可能输给你的竞争对手。 84 | 85 | ##开始之前## 86 | 我们终于又从一种语言跳到了另外一种语言，我们可能习惯了一种模式，而不敢于去尝试新的东西，这些或许是我们的一些习惯又或者是因为害怕等等。 87 | 88 | 作为另外一个跨平台能力很强的语言，这里说的是与Javascript、HTML比较，或许你会觉得C算是最好的，但是我们这里讨论更多的是脚本语言，也就是直接可以运行的。在现在主流的大多数移动平台上，python也有良好的支持，如Android,IOS，只是这些算是类Unix系统内核，python还支持之前Nokia的Symbian。 89 | 90 | 开始之前我们需要确认我们的平台上已经有了python环境，也就是可以运行下面的Hello,World，你可以在网上很多地方看到，最简单的地方还是到官网，又或者是所用移动平台的store下载。 91 | 92 | ##Python的Hello,World## 93 | Python的Hello,World有两种形式，作为一种脚本语言来说，Javascript也是一种脚本语言，只是两者之间有太多的不同之处，每个人都会有不同的选择对于一种语言用来作为其的习惯。于是这就是我们的 94 | 95 | print "Hello,World" 96 | 97 | 当我们把我们的脚本在shell环境下运行时 98 | 

 99 | >>>  print "Hello,world"
100 |   File "", line 1
101 |     print "Hello,world"
102 |     ^
103 | IndentationError: unexpected indent
104 | >>> print "Hello,world"
105 | Hello,world
106 | >>>
107 |
108 | 109 | 如果你没有预料到缩进带来的问题的时候，这就是一个问题了。 110 | 111 | 和我们在Javascript或者是CSS里面一样，我们也可以用一个文件的方式来写入我们的代码，文件后缀名是py，所以创建一个helloworld.py，输入上面的代码，然后执行 112 | 113 | python helloworld.py 114 | 115 | 一个理想的结果，或许你试过C语言的helloworld，如果了解过GCC的话应该是可以这样的: 116 | 117 | 118 | ./a.out 119 | 120 | 也就是执行编译完后的程序，需要注意的是helloworld.py没有编译，不过也会输出 121 | 122 | Hello,world 123 | 124 | ##我们想要的Hello,World## 125 | 126 | 我们想展示的是如何结合前面学习的内容做一个更有意思的Hello,World。 127 | 128 | import cherrypy 129 | class HelloWorld(object): 130 | def index(self): 131 | return "Hello World!" 132 | index.exposed = True 133 | 134 | cherrypy.quickstart(HelloWorld()) 135 | 136 | ##算法## 137 | 138 | 我们需要去了解算法(algorithm)，引经据典的话就是这样子: 139 | 140 |
a process or set of rules to be followed in calculations or other problem-solving operations, especially by a computer
141 | 142 | 也就是计算或其他解决问题的操作需要遵循的一个过程或者一套规则，书上还提到的说法是——解决问题的诀窍，让我想起了hack一词。我们总会去想某些东西是否有一个更快的计算方法，有时候在处理某些问题上也显示了一个好的算法的重要性。 143 | 144 | ##实用主义哲学## 145 | -------------------------------------------------------------------------------- /chapter4/anywhere-hjc.md: -------------------------------------------------------------------------------- 1 | #无处不在的三剑客# 2 | 这时我们终于了解了我们的三剑客，就这么可以结合到一起了，HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、Ruby等等的最后都会变成上面的结果，当然还有Coffeescript之类的语言都是以此为基础，这才是我们需要的知识。 3 | 4 | ##Hello,Geek## 5 | 有了一些些的基础之后，我们终于能试着去写一些程序了。也是时候去创建一个像样的东西，或许你在一些见面设计方面的书籍看过类似的东西，可能我写得也没有那些内容好，只是这些都是一些过程。过去我们都是一点点慢慢过来的，只是现在我们也是如此，技术上的一些东西，事实上大家都是知道的。就好比我们都觉得我们可以开个超市，但是如果让我们去开超市的话，我们并不一定能赚钱。 6 | 7 | 学习编程的目的可能不在于我们能找到一份工作，那只是在编程之外的东西，虽然确实也是很确定的。但是除些之处，有些东西也是很重要的。、 8 | 9 | 过去没有理解为什么会一些人会不厌其烦地去回答别人的问题，有时候可能会想是一种能力越大责任越大的感觉，但是有时候在写一些博客或者回答别人的问题的时候我们又重新思考了这些问题，又重新学习了这些技能。所以这里可能说的不是关于编程的东西而是一些编程以外的东西，关于学习或者学习以外的东西。 10 | 11 | ##从源码学习## 12 | 过去总会觉得学了一种语言的语法便算是学了一种语言，于是有一天发现到了这个语言的项目上的时候，虽然会写上几行代码，但是却不像这语言的风格。于是这也是这一篇的意义所在了： 13 | 14 | ###HTML### 15 | 写好HTML的一个要点在于看别人写的代码，这只是一方面，我们所说的HTML方面的内容可能不够多，原因有很多，很多东西都需要在实战中去解决。读万卷书和行万里路，分不清哪个有重要的意义，但是如果可以同时做好两个的话，成长会很快的。 16 | 17 | 写好HTML应该会有下面的要点 18 | 19 | - 了解标准及遵守绝大多数标准 20 | - 注重可读性，从ID及CLASS的命名 21 | - 关注SEO与代码的联系 22 | 23 | 或许在这方面我也算不上很了解，不过按笔者的经验来说，大致就是如此。 24 | 25 | 多数情况下我们的HTML是类似于下面这样子的 26 | 27 |
28 | {% nevercache %} 29 | {% include "includes/user_panel.html" %} 30 | {% endnevercache %} 31 |
32 |
33 | {% block right_panel %} 34 | {% ifinstalled mezzanine.twitter %} 35 | {% include "twitter/tweets.html" %} 36 | {% endifinstalled %} 37 | {% endblock %} 38 |
39 |
40 |
41 | 42 | 换句话说HTML只是基础，而不是日常用到的。我们的HTML是由template生成的，我们可以借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML，所以这里只是一个开始。 43 | 44 | 还需要了解的一部分就是HTML的另外一个重要的部分，DOM树形结构 45 | 46 | 47 | #DOM树形结构图# 48 | 49 | ###javascript### 50 | 这里以未压缩的jQuery源码和zepto.js作一个小小的比较，zepto.js是兼容jQuery的，因此我们举几个有意思的函数作一简单的比较，关于源码可以在官网上下载到。 51 | 52 | 在zepto.js下面判断一个值是否是函数的方面如下， 53 | 54 | function isFunction(value) { return type(value) == "function" } 55 | 56 | 而在jQuery下面则是这样的 57 | 58 | isFunction: function( obj ) { 59 | return jQuery.type(obj) === "function"; 60 | }, 61 | 62 | 而他们的用法是一样的，都是 63 | 64 | $.isFunction(); 65 | 66 | jQuery的作法是将诸如isFunction,isArray这些函数打包到jQuery.extend中，而zepto.js的则是 67 | 也是这样的，只不过多了一行 68 | 69 | $.isFunction = isFunction 70 | 71 | 遗憾的是我也没去了解过为什么，之前我也没有看过这些库的代码，所以这个问题就要交给读者去解决了。jQuery里面提供了函数式编程接口，不过jQuery更多的是构建于CSS选择器之上，对于DOM的操作比javascript自身提供的功能强大得多。如果我们的目的在于更好的编程，那么可能需要诸如Underscore.js之类的库。或许说打包自己常用的函数功能为一个库，诸如jQuery 72 | 73 | function isFunction(value) { return type(value) == "function" } 74 | function isWindow(obj) { return obj != null && obj == obj.window } 75 | function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE } 76 | function isObject(obj) { return type(obj) == "object" } 77 | 78 | 我们需要去了解一些故事背后的原因，越来越害怕GUI的原因之一，在于不知道背后发生了什么，即使是开源的，我们也无法了解真正的背后发生什么了。对于不是这个工具、软件的用户来说，开源更多的意义可能在于我们可以添加新的功能，以及免费。如果没有所谓的危机感，以及认为自己一直在学习工具的话，可以试着去打包自己的函数，打包自己的库。 79 | 80 | var calc={ 81 | add: function(a,b){ 82 | return a+b; 83 | }, 84 | sub: function(a,b){ 85 | return a-b; 86 | }, 87 | dif: function(a,b){ 88 | if(a>b){ 89 | return a; 90 | }else{ 91 | return b; 92 | } 93 | } 94 | } 95 | 96 | 然后用诸如jslint测试一下代码。 97 | 98 | $ ./jsl -conf jsl.default.conf 99 | JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24) 100 | Developed by Matthias Miller (http://www.JavaScriptLint.com) 101 | 102 | app.js 103 | /Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon 104 | } 105 | ........^ 106 | 107 | 108 | 0 error(s), 1 warning(s) 109 | 110 | 于是我们需要在第15行添加一个分号。 111 | 112 | 最好的方法还是阅读别人的代码，而所谓的别人指的是一些相对较大的网站的，有好的开发流程，代码质量也不会太差。而所谓的复杂的代码都是一步步构建上去的，罗马不是一天建成的。 113 | 114 | 有意思的是多数情况下，我们可能会用原型去开发我们的应用，而这也是我们需要去了解和掌握的地方， 115 | 116 | function Calc(){ 117 | 118 | } 119 | Calc.prototype.add=function(a,b){ 120 | return a+b; 121 | }; 122 | Calc.prototype.sub=function(a,b){ 123 | return a-b; 124 | }; 125 | 126 | 我们似乎在这里展示了更多的Javascript的用法，但是这不是一好的关于Javascript的介绍，有一天我们还要用诸如qunit之类的工具去为我们的function写测试，这时就是一个更好的开始。 127 | 128 | 如果我们乐意的话，我们也可以构建一个类似于jQuery的框架，以用来学习。 129 | 130 | 作为一门编程语言来说，我们学得很普通，在某种意义上来说算不上是一种入门。但是如果我们可以在其他的好书在看到的内容，就没有必要在这里进行复述，目的在于一种学习习惯的养成。 131 | 132 | ###CSS### 133 | CSS有时候很有趣，但是有时候有很多我们没有意识到的用法，这里以Bootstrap为例，这是一个不错的CSS库。最令人兴奋的是没有闭源的CSS，没有闭源的JS，这也就是前端好学习的地方所在了，不过这是一个开源的CSS库，虽然是这样叫的，但是称之为CSS库显然不合适。 134 | 135 | a, 136 | a:visited { 137 | text-decoration: underline; 138 | } 139 | a[href]:after { 140 | content: " (" attr(href) ")"; 141 | } 142 | abbr[title]:after { 143 | content: " (" attr(title) ")"; 144 | } 145 | a[href^="javascript:"]:after, 146 | a[href^="#"]:after { 147 | content: ""; 148 | } 149 | 150 | 这里有一些有趣的，值得一讲的CSS用法。 151 | 152 | - 伪类选择器,如a:visited这样需要其他条件来对元素应用样式，用于已访问的链接。 153 | - 属性选择器,如a[href]这样当a元素存在href这样的属性的时候来寻找应用元素。 154 | 155 | 其他的还需要去好好了解的就是**CSS的盒模型**，作为CSS的基石之一。 156 | 157 | #CSS盒模型图# 158 | 159 | 诸如 160 | 161 | * { 162 | margin: 0px; 163 | padding: 0px; 164 | font-family: Helvetica; 165 | } 166 | 167 | 这样的通用器用来进行全局选择的工具和我们用于抵消某个body对于子选择器的影响一样值得注意得多。 168 | 169 | ##笔记## 170 | 写博客似乎是一个不错的好习惯，作为一个不是很优秀的写手。对于来说，有时候发现原来能教会别人对于自己的能力来说算是一种肯定。有些时候教会别人才算是自己学会的表现，总会在项目上的时候需要自己去复述工作的一个过程，我们需要整理好我们的思路才能带给别人更多的收获。我们的笔记上总会留下自己的学习的一些过程，有些时候我们想要的只是一点点的鼓励，有时是诸如评论一类，有时可能是诸如访问量。更多的可能是我们可以重新整理自己的知识，好好复习一下，以便于好好记住，写出来是一个好的过程。 171 | 172 | 无处不在的三剑客就这样到了这里，写得似乎很多也很少，但是还是没有做出来一个东西，于是我们朝着这样一个方向前进。 -------------------------------------------------------------------------------- /chapter3/anywhere-css.md: -------------------------------------------------------------------------------- 1 | #无处不在的CSS# 2 | 3 | CSS或许你觉得他一点儿也不重要，HTML好比是建筑的框架，CSS就是用于装修房子。那么Javascript呢，我听到的最有趣的说法是小三，先让我们回到代码上来吧。 4 | 5 | ##CSS## 6 | 7 | 下面就是我们之前说到的代码，css将Red三个字母变成了红色。 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Red

15 | 16 | 17 | 18 | 19 | 只是， 20 | 21 | var para=document.getElementById("para"); 22 | para.style.color="blue"; 23 | 24 | 将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript打乱了这些秩序，不过却也让生活多姿多彩，小三不都是这样的么——终于可以理解，为什么以前人们对于Javascript没有好感了？不过这里要讲的是正室，也就是CSS，这时还没有Javascript。 25 | 26 | ![Alt text](./src/redfonts.png) 27 | 28 | ##关于CSS## 29 | 30 | 这不是一篇好的关于讲述CSS的书籍，所以不会去说CSS是怎么来的，有些东西既然我们可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。 31 | 32 | 到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的CSS来说也不会有例外的。 33 | 34 | CSS是来自于(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，翻译成什么样的可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。 35 | 36 | 忘说了，CSS也是有版本的，和windows，Linux内核等等一样，但是更新可能没有那么频繁，HTML也是有版本的，JS也是有版本的，复杂的东西不是当前考虑的内容。 37 | 38 | ##代码结构## 39 | 40 | 对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。 41 | 42 | 43 | 44 | 45 | 46 | 47 |

如果没有一个好的结构

48 |

那么以后可能就是这样子。。。。

49 | 50 | 51 | 52 | 虽然我们看到的还是一样的: 53 | 54 | ![Alt text](./src/nostyle.png) 55 | 56 | 于是我们就按各种书上的建议重新写了上面的代码 57 | 58 | 59 | 60 | 61 | CSS example 62 | 76 | 77 | 78 |

如果没有一个好的结构

79 |

那么以后可能就是这样子。。。。

80 | 81 | 82 | 83 | 总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该是下面: 84 | 85 | 86 | 87 | 88 | CSS example 89 | 90 | 91 | 92 |

如果没有一个好的结构

93 |

那么以后可能就是这样子。。。。

94 | 95 | 96 | 97 | 我们需要 98 | 99 | 100 | 101 | 102 | CSS example 103 | 104 | 105 | 106 |

如果没有一个好的结构

107 |

那么以后可能就是这样子。。。。

108 | 109 | 110 | 111 | 然后我们有一个像app.js一样的style.css放在同目录下，而他的内容便是 112 | 113 | .para{ 114 | font-size: 22px; 115 | color:#f00; 116 | text-align: center; 117 | padding-left: 20px; 118 | } 119 | .para2{ 120 | font-size:44px; 121 | color:#3ed; 122 | text-indent: 2em; 123 | padding-left: 2em; 124 | } 125 | 126 | 127 | 这代码和JS的代码有如此多的相似 128 | 129 | var para={ 130 | font_size:'22px', 131 | color:'#f00', 132 | text_align:'center', 133 | padding_left:'20px', 134 | } 135 | 136 | 而22px、20px以及#f00都是数值，因此。。 137 | 138 | var para={ 139 | font_size:22px, 140 | color:#f00, 141 | text_align:center, 142 | padding_left:20px, 143 | } 144 | 145 | 目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多的这种符号，除非你乐意去理解: 146 | 147 | (dotimes (i 4) (print i)) 148 | 149 | 总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到，或者说用这个去。。 150 | 151 | \d{2}/[A-Z][a-z][a-z]/\d{4} 152 | 153 | 没有什么会比一开始不理解那是正则表达式，然后去修改上面的代码，为的是去从一堆数据中找出某日/某月/某年。 154 | 155 | 这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说还是比其他语言好理解一些。 156 | 157 | ##样式与目标## 158 | 下面也就是我们的样式 159 | 160 | .para{ 161 | font-size: 22px; 162 | color:#f00; 163 | text-align: center; 164 | padding-left: 20px; 165 | } 166 | 167 | 我们的目标就是 168 | 169 | 如果没有一个好的结构 170 | 171 | 所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是CSS与HTML沟通的重点所在了: 172 | 173 | ###选择器### 174 | 我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子: 175 | 176 | p.para{ 177 | color:#f0f; 178 | } 179 | 180 | 将代码添加到style.css的最下面会发现“如果没有一个的结构”变成了粉红色，当然我们还会有这样的写法 181 | 182 | p>.para{ 183 | color:#f0f; 184 | } 185 | 186 | 为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。 187 | 188 | 而通常我们可以通过一个 189 | 190 | p{ 191 | text-align:left; 192 | } 193 | 194 | 这样的元素选择器来给予所有的p元素一个左对齐。 195 | 196 | 还有复杂一点的复合型选择器，下面的是HTML文件 197 | 198 | 199 | 200 | 201 | CSS example 202 | 203 | 204 | 205 |

如果没有一个好的结构

206 |
207 |

那么以后可能就是这样子。。。。

208 |
209 | 210 | 211 | 212 | 还有CSS文件 213 | 214 | 215 | .para{ 216 | font-size: 22px; 217 | color:#f00; 218 | text-align: center; 219 | padding-left: 20px; 220 | } 221 | .para2{ 222 | font-size:44px; 223 | color:#3ed; 224 | text-indent: 2em; 225 | padding-left: 2em; 226 | } 227 | 228 | p.para{ 229 | color:#f0f; 230 | } 231 | div#content p { 232 | font-size:22px; 233 | } 234 | 235 | ##更有趣的CSS## 236 | 一个包含了para2以及para_bg的例子 237 | 238 |
239 |

那么以后可能就是这样子。。。。

240 |
241 | 242 | 我们只是添加了一个黑色的背景 243 | 244 | .para_bg{ 245 | background-color:#000; 246 | } 247 | 248 | 重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是如上面的例子。 249 | 250 | 我们还可以用CSS3做出有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。 251 | 252 | 或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是有一些东西才是核心的，而不是去考虑一些基础的语法，基础的东西我们可以从实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这些可以从观察一些比较好的设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。 253 | 254 | -------------------------------------------------------------------------------- /chapter2/src/jsl.default.conf: -------------------------------------------------------------------------------- 1 | # 2 | # Configuration File for JavaScript Lint 0.3.0 3 | # Developed by Matthias Miller (http://www.JavaScriptLint.com) 4 | # 5 | # This configuration file can be used to lint a collection of scripts, or to enable 6 | # or disable warnings for scripts that are linted via the command line. 7 | # 8 | 9 | ### Warnings 10 | # Enable or disable warnings based on requirements. 11 | # Use "+WarningName" to display or "-WarningName" to suppress. 12 | # 13 | +no_return_value # function {0} does not always return a value 14 | +duplicate_formal # duplicate formal argument {0} 15 | +equal_as_assign # test for equality (==) mistyped as assignment (=)?{0} 16 | +var_hides_arg # variable {0} hides argument 17 | +redeclared_var # redeclaration of {0} {1} 18 | +anon_no_return_value # anonymous function does not always return a value 19 | +missing_semicolon # missing semicolon 20 | +meaningless_block # meaningless block; curly braces have no impact 21 | +comma_separated_stmts # multiple statements separated by commas (use semicolons?) 22 | +unreachable_code # unreachable code 23 | +missing_break # missing break statement 24 | +missing_break_for_last_case # missing break statement for last case in switch 25 | +comparison_type_conv # comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==) 26 | +inc_dec_within_stmt # increment (++) and decrement (--) operators used as part of greater statement 27 | +useless_void # use of the void type may be unnecessary (void is always undefined) 28 | +multiple_plus_minus # unknown order of operations for successive plus (e.g. x+++y) or minus (e.g. x---y) signs 29 | +use_of_label # use of label 30 | -block_without_braces # block statement without curly braces 31 | +leading_decimal_point # leading decimal point may indicate a number or an object member 32 | +trailing_decimal_point # trailing decimal point may indicate a number or an object member 33 | +octal_number # leading zeros make an octal number 34 | +nested_comment # nested comment 35 | +misplaced_regex # regular expressions should be preceded by a left parenthesis, assignment, colon, or comma 36 | +ambiguous_newline # unexpected end of line; it is ambiguous whether these lines are part of the same statement 37 | +empty_statement # empty statement or extra semicolon 38 | -missing_option_explicit # the "option explicit" control comment is missing 39 | +partial_option_explicit # the "option explicit" control comment, if used, must be in the first script tag 40 | +dup_option_explicit # duplicate "option explicit" control comment 41 | +useless_assign # useless assignment 42 | +ambiguous_nested_stmt # block statements containing block statements should use curly braces to resolve ambiguity 43 | +ambiguous_else_stmt # the else statement could be matched with one of multiple if statements (use curly braces to indicate intent) 44 | +missing_default_case # missing default case in switch statement 45 | +duplicate_case_in_switch # duplicate case in switch statements 46 | +default_not_at_end # the default case is not at the end of the switch statement 47 | +legacy_cc_not_understood # couldn't understand control comment using /*@keyword@*/ syntax 48 | +jsl_cc_not_understood # couldn't understand control comment using /*jsl:keyword*/ syntax 49 | +useless_comparison # useless comparison; comparing identical expressions 50 | +with_statement # with statement hides undeclared variables; use temporary variable instead 51 | +trailing_comma_in_array # extra comma is not recommended in array initializers 52 | +assign_to_function_call # assignment to a function call 53 | +parseint_missing_radix # parseInt missing radix parameter 54 | 55 | 56 | ### Output format 57 | # Customize the format of the error message. 58 | # __FILE__ indicates current file path 59 | # __FILENAME__ indicates current file name 60 | # __LINE__ indicates current line 61 | # __ERROR__ indicates error message 62 | # 63 | # Visual Studio syntax (default): 64 | +output-format __FILE__(__LINE__): __ERROR__ 65 | # Alternative syntax: 66 | #+output-format __FILE__:__LINE__: __ERROR__ 67 | 68 | 69 | ### Context 70 | # Show the in-line position of the error. 71 | # Use "+context" to display or "-context" to suppress. 72 | # 73 | +context 74 | 75 | 76 | ### Semicolons 77 | # By default, assignments of an anonymous function to a variable or 78 | # property (such as a function prototype) must be followed by a semicolon. 79 | # 80 | +lambda_assign_requires_semicolon 81 | 82 | 83 | ### Control Comments 84 | # Both JavaScript Lint and the JScript interpreter confuse each other with the syntax for 85 | # the /*@keyword@*/ control comments and JScript conditional comments. (The latter is 86 | # enabled in JScript with @cc_on@). The /*jsl:keyword*/ syntax is preferred for this reason, 87 | # although legacy control comments are enabled by default for backward compatibility. 88 | # 89 | +legacy_control_comments 90 | 91 | 92 | ### JScript Function Extensions 93 | # JScript allows member functions to be defined like this: 94 | # function MyObj() { /*constructor*/ } 95 | # function MyObj.prototype.go() { /*member function*/ } 96 | # 97 | # It also allows events to be attached like this: 98 | # function window::onload() { /*init page*/ } 99 | # 100 | # This is a Microsoft-only JavaScript extension. Enable this setting to allow them. 101 | # 102 | -jscript_function_extensions 103 | 104 | 105 | ### Defining identifiers 106 | # By default, "option explicit" is enabled on a per-file basis. 107 | # To enable this for all files, use "+always_use_option_explicit" 108 | -always_use_option_explicit 109 | 110 | # Define certain identifiers of which the lint is not aware. 111 | # (Use this in conjunction with the "undeclared identifier" warning.) 112 | # 113 | # Common uses for webpages might be: 114 | #+define window 115 | #+define document 116 | 117 | 118 | ### Files 119 | # Specify which files to lint 120 | # Use "+recurse" to enable recursion (disabled by default). 121 | # To add a set of files, use "+process FileName", "+process Folder\Path\*.js", 122 | # or "+process Folder\Path\*.htm". 123 | # 124 | +process app.js 125 | -------------------------------------------------------------------------------- /chapter4/src/jsl.default.conf: -------------------------------------------------------------------------------- 1 | # 2 | # Configuration File for JavaScript Lint 0.3.0 3 | # Developed by Matthias Miller (http://www.JavaScriptLint.com) 4 | # 5 | # This configuration file can be used to lint a collection of scripts, or to enable 6 | # or disable warnings for scripts that are linted via the command line. 7 | # 8 | 9 | ### Warnings 10 | # Enable or disable warnings based on requirements. 11 | # Use "+WarningName" to display or "-WarningName" to suppress. 12 | # 13 | +no_return_value # function {0} does not always return a value 14 | +duplicate_formal # duplicate formal argument {0} 15 | +equal_as_assign # test for equality (==) mistyped as assignment (=)?{0} 16 | +var_hides_arg # variable {0} hides argument 17 | +redeclared_var # redeclaration of {0} {1} 18 | +anon_no_return_value # anonymous function does not always return a value 19 | +missing_semicolon # missing semicolon 20 | +meaningless_block # meaningless block; curly braces have no impact 21 | +comma_separated_stmts # multiple statements separated by commas (use semicolons?) 22 | +unreachable_code # unreachable code 23 | +missing_break # missing break statement 24 | +missing_break_for_last_case # missing break statement for last case in switch 25 | +comparison_type_conv # comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==) 26 | +inc_dec_within_stmt # increment (++) and decrement (--) operators used as part of greater statement 27 | +useless_void # use of the void type may be unnecessary (void is always undefined) 28 | +multiple_plus_minus # unknown order of operations for successive plus (e.g. x+++y) or minus (e.g. x---y) signs 29 | +use_of_label # use of label 30 | -block_without_braces # block statement without curly braces 31 | +leading_decimal_point # leading decimal point may indicate a number or an object member 32 | +trailing_decimal_point # trailing decimal point may indicate a number or an object member 33 | +octal_number # leading zeros make an octal number 34 | +nested_comment # nested comment 35 | +misplaced_regex # regular expressions should be preceded by a left parenthesis, assignment, colon, or comma 36 | +ambiguous_newline # unexpected end of line; it is ambiguous whether these lines are part of the same statement 37 | +empty_statement # empty statement or extra semicolon 38 | -missing_option_explicit # the "option explicit" control comment is missing 39 | +partial_option_explicit # the "option explicit" control comment, if used, must be in the first script tag 40 | +dup_option_explicit # duplicate "option explicit" control comment 41 | +useless_assign # useless assignment 42 | +ambiguous_nested_stmt # block statements containing block statements should use curly braces to resolve ambiguity 43 | +ambiguous_else_stmt # the else statement could be matched with one of multiple if statements (use curly braces to indicate intent) 44 | +missing_default_case # missing default case in switch statement 45 | +duplicate_case_in_switch # duplicate case in switch statements 46 | +default_not_at_end # the default case is not at the end of the switch statement 47 | +legacy_cc_not_understood # couldn't understand control comment using /*@keyword@*/ syntax 48 | +jsl_cc_not_understood # couldn't understand control comment using /*jsl:keyword*/ syntax 49 | +useless_comparison # useless comparison; comparing identical expressions 50 | +with_statement # with statement hides undeclared variables; use temporary variable instead 51 | +trailing_comma_in_array # extra comma is not recommended in array initializers 52 | +assign_to_function_call # assignment to a function call 53 | +parseint_missing_radix # parseInt missing radix parameter 54 | 55 | 56 | ### Output format 57 | # Customize the format of the error message. 58 | # __FILE__ indicates current file path 59 | # __FILENAME__ indicates current file name 60 | # __LINE__ indicates current line 61 | # __ERROR__ indicates error message 62 | # 63 | # Visual Studio syntax (default): 64 | +output-format __FILE__(__LINE__): __ERROR__ 65 | # Alternative syntax: 66 | #+output-format __FILE__:__LINE__: __ERROR__ 67 | 68 | 69 | ### Context 70 | # Show the in-line position of the error. 71 | # Use "+context" to display or "-context" to suppress. 72 | # 73 | +context 74 | 75 | 76 | ### Semicolons 77 | # By default, assignments of an anonymous function to a variable or 78 | # property (such as a function prototype) must be followed by a semicolon. 79 | # 80 | +lambda_assign_requires_semicolon 81 | 82 | 83 | ### Control Comments 84 | # Both JavaScript Lint and the JScript interpreter confuse each other with the syntax for 85 | # the /*@keyword@*/ control comments and JScript conditional comments. (The latter is 86 | # enabled in JScript with @cc_on@). The /*jsl:keyword*/ syntax is preferred for this reason, 87 | # although legacy control comments are enabled by default for backward compatibility. 88 | # 89 | +legacy_control_comments 90 | 91 | 92 | ### JScript Function Extensions 93 | # JScript allows member functions to be defined like this: 94 | # function MyObj() { /*constructor*/ } 95 | # function MyObj.prototype.go() { /*member function*/ } 96 | # 97 | # It also allows events to be attached like this: 98 | # function window::onload() { /*init page*/ } 99 | # 100 | # This is a Microsoft-only JavaScript extension. Enable this setting to allow them. 101 | # 102 | -jscript_function_extensions 103 | 104 | 105 | ### Defining identifiers 106 | # By default, "option explicit" is enabled on a per-file basis. 107 | # To enable this for all files, use "+always_use_option_explicit" 108 | -always_use_option_explicit 109 | 110 | # Define certain identifiers of which the lint is not aware. 111 | # (Use this in conjunction with the "undeclared identifier" warning.) 112 | # 113 | # Common uses for webpages might be: 114 | #+define window 115 | #+define document 116 | 117 | 118 | ### Files 119 | # Specify which files to lint 120 | # Use "+recurse" to enable recursion (disabled by default). 121 | # To add a set of files, use "+process FileName", "+process Folder\Path\*.js", 122 | # or "+process Folder\Path\*.htm". 123 | # 124 | +process app.js 125 | -------------------------------------------------------------------------------- /chapter2/anywhere-javascript.md: -------------------------------------------------------------------------------- 1 | #无处不在的Javascript# 2 | 3 | Javascript现在已经无处不在了，也许你正打开的某个网站他可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是Javascript已经无处不在了，可能会在你手机上的某个app里，在你浏览的网页里，在你IDE中的某个进程中运行的。 4 | 5 | ##Javascript的Hello,world## 6 | 这里我们还需要有一个helloworld.html，Javascript是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的helloworld.html 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 然后开始融入我们的javascript，向HTML中插入Javascript的方法，就需要用到html中的\ 22 | 23 | 24 | 25 | 26 | 按照标准的写法，我们还需要声明这个脚本的类型 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | 没有显示hello,world?试试下面的代码 39 | 40 | 41 | 42 | 43 | 46 | 47 | 48 | 51 | 52 | 53 | 54 | ###更js一点### 55 | 我们需要让我们的代码看上去更像是js，同时是以js结尾。C语言的源码但是以C结尾的，所以我们要让我们的代码看上去更正式一点。于是我们需要在helloworld.html的同文件夹下创建一个app.js，里面写着 56 | 57 | 
document.write('hello,world');
 58 |
59 | 60 | 同时我们的helloworld.html还需要告诉我们的浏览器js代码在哪里 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 71 | 72 | 73 | 74 | ###从数学出发### 75 | 让我们回到第一章讲述的小明的问题，从实际问题下手编程，更容易学会编程。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱的问题。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算3x5=? 76 | 77 | 
document.write(3*5);
 78 |
79 | 80 | document.write实际也我们可以理解为输出，也就是往页面里写入3*5的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个不好的开始。 81 | 82 | ###设计和编程### 83 | 对于我们的实际问题如果总是止于所要的结果，很多年之后，我们成为了code monkey。对这个问题进行一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。 84 | 85 | 

 86 | document.write(3*4);
 87 |
88 | 89 | 于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序 90 | 91 | 

 92 | tang=4;
 93 | num=3;
 94 | document.write(tang*num);
 95 |
96 | 97 | 这才能叫得上是程序设计，或许你注意到了";"这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去fuck。 98 | 99 | ###函数### 100 | 记得刚开始学三角函数的时候，我们会写 101 | 102 | sin 30=0.5 103 | 104 | 而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。 105 | 

106 | function hello(){
107 | 	return document.write("hello,world");
108 | }
109 | hello();
110 |
111 | 当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的方法，然后我们调用了hello这个函数，于是页面上有了hello,world。 112 | 113 | 

114 | function sin(degree){
115 | 	return document.write(Math.sin(degree));
116 | }
117 | sin(30);
118 |
119 | 在这里degree称之为变量，也就是可以改变的量。 120 | 于是输出了-0.9880316240928602，而不是0.5，因为这里用的是弧度制，而不是角度制。 121 | 122 | sin(30) 123 | 124 | 的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在ruby中我们可以直接用类似于数学中的表达: 125 | 126 | 

127 | 2.0.0-p353 :004 > Math.sin 30
128 | => -0.9880316240928618
129 | 2.0.0-p353 :005 >
130 |
131 | 132 | 我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去写代码。 133 | 134 | 

135 | function calc(tang,num){
136 | 	result=tang*num;
137 | 	document.write(result);
138 | }
139 | calc(3,4);
140 |
141 | 142 | 但是从某种程度上来说，我们的calc做了计算的事又做了输出的事，总的来说设计上有些不好。 143 | 144 | ###重新设计### 145 | 我们将输出的工作移到函数的外面， 146 | 

147 | function calc(tang,num){
148 | 	return tang*num;
149 | }
150 | document.write(calc(3,4));
151 |
152 | 153 | 接着我们用一种更有意思的方法来写这个问题的解决方案 154 | 

155 | function calc(tang,num){
156 | 	return tang*num;
157 | }
158 | function printResult(tang,num){
159 | 	document.write(calc(tang,num));
160 | }
161 | printResult(3, 4)
162 |
163 | 看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用calc，如果我们需要输出的时候我们就调用printResult的方法。 164 | 165 | ###object和函数### 166 | 我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法看上去很奇怪，所以让我们看看他们到底是什么，修改app.js为以及内容 167 | 168 | document.write(typeof document); 169 | document.write(typeof Math); 170 | 171 | typeof document会返回document的数据类型，就会发现输出的结果是 172 | 173 | object object 174 | 175 | 所以我们需要去弄清楚什么是object。对象的定义是 176 | 177 |
无序属性的集合，其属性可以包含基本值、对象或者函数。
178 | 179 | 创建一个object，然后观察这便是我们接下来要做的 180 | 181 | store={}; 182 | store.tang=4; 183 | store.num=3; 184 | document.write(store.tang*store.num); 185 | 186 | 我们就有了和document.write一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为 187 | 188 | typeof story.tang="number" 189 | 190 | 一个包含对象的对象应该是这样子的。 191 | 192 | store={}; 193 | store.tang=4; 194 | store.num=3; 195 | document.writeln(store.tang*store.num); 196 | 197 | var wall=new Object(); 198 | wall.store=store; 199 | document.write(typeof wall.store); 200 | 201 | 而我们用到的document.write和上面用到的document.writeln都是属于这个无序属性集合中的函数。 202 | 203 | 下面代码说的就是这个无序属性集中中的函数。 204 | 205 | var IO=new Object(); 206 | function print(result){ 207 | document.write(result); 208 | }; 209 | IO.print=print; 210 | IO.print("a obejct with function"); 211 | IO.print(typeof IO.print); 212 | 213 | 我们定义了一个叫IO的对象，声明对象可以用 214 | 215 | var store={}; 216 | 217 | 又或者是 218 | 219 | var store=new Object{}; 220 | 221 | 两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是document.write，IO中的print函数是等价于print()函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。 222 | 223 | 复杂一点的对象应该是下面这样的一种情况。 224 | 225 | var Person={name:"phodal",weight:50,height:166}; 226 | function dream(){ 227 | future; 228 | }; 229 | Person.future=dream; 230 | document.write(typeof Person); 231 | document.write(Person.future); 232 | 233 | 而这些会在我们未来的实际编编程中用得更多。 234 | 235 | ###面向对象### 236 | 237 | 开始之前先我们简化上面的代码， 238 | 239 | Person.future=function dream(){ 240 | future; 241 | } 242 | 243 | 看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。 244 | 245 | var Person=function(){ 246 | this.name="phodal"; 247 | this.weight=50; 248 | this.height=166; 249 | this.future=function dream(){ 250 | return "future"; 251 | }; 252 | }; 253 | var person=new Person(); 254 | document.write(person.name+"
"); 255 | document.write(typeof person+"
"); 256 | document.write(typeof person.future+"
"); 257 | document.write(person.future()+"
"); 258 | 259 | 只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。这里的+"
"是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。 260 | 261 | 上面的方法显得有点不可取，换句话说和一开始的 262 | 263 | document.write(3*4); 264 | 265 | 一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。 266 | 267 | var Person=function(name,weight,height){ 268 | this.name=name; 269 | this.weight=weight; 270 | this.height=height; 271 | this.future=function(){ 272 | return "future"; 273 | }; 274 | }; 275 | var phodal=new Person("phodal",50,166); 276 | document.write(phodal.name+"
"); 277 | document.write(phodal.weight+"
"); 278 | document.write(phodal.height+"
"); 279 | document.write(phodal.future()+"
"); 280 | 281 | 于是，产生了这样一个可重用的Javascript对象,this关键字确立了属性的所有者。 282 | 283 | ###其他### 284 | Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。 285 | 286 | 所谓的继承， 287 | 288 | var Chinese=function(){ 289 | this.country="China"; 290 | } 291 | 292 | var Person=function(name,weight,height){ 293 | this.name=name; 294 | this.weight=weight; 295 | this.height=height; 296 | this.futrue=function(){ 297 | return "future"; 298 | } 299 | } 300 | Chinese.prototype=new Person(); 301 | 302 | 303 | var phodal=new Chinese("phodal",50,166); 304 | document.write(phodal.country); 305 | 306 | 307 | 完整的Javascript应该由下列三个部分组成: 308 | 309 | - 核心(ECMAScript)——核心语言功能 310 | - 文档对象模型(DOM)——访问和操作网页内容的方法和接口 311 | - 浏览器对象模型(BOM)——与浏览器交互的方法和接口 312 | 313 | 我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM真正用到的机会很少，因为没有好的统一的标准。 314 | 315 | 一个简单的DOM示例, 316 | 317 | 318 | 319 | 320 | 321 | 322 | 325 |

Red

326 | 327 | 328 | 329 | 330 | 我们需要修改一下helloworld.html添加 331 | 332 |

Red

333 | 334 | 同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。 335 | 336 | var para=document.getElementById("para"); 337 | para.style.color="blue"; 338 | 339 | 接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。 340 | 341 | ###美妙之处### 342 | 这里说到的Javascript仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的app，作为一门编程语言，他还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。 343 | 344 | - 我们可以创建一个对象或者说函数，它可以包含基本值、对象或者函数。 345 | - 我们可以用Javascript修改页面的属性，虽然只是简单的示例。 346 | - 我们还可以去解决实际的编程问题。 --------------------------------------------------------------------------------