由于最近很闲，都不知道干啥，随便看了一本书-javaScript从入门到精通！每当看到某某书有”精通“两个字，我都very好奇的，无不对时刻对作者投以钦佩之情，总在想要是我偷偷看了的话，是不是也非常非常厉害了的，是不是也能炉火纯青，登峰造极,是不是也能....等等等等.但是我又好害怕的，因为第一篇随笔呀，怕别人看了都不关注我，我又少了好多粉丝呢，而且都说博客写的不好的长得丑呢，怎么办才好呢！坐立不安啊..................
因为javaScript是在浏览器里解释执行的，为了早日能看到修炼成果，我不得不去偷学其他的东西了了不容易啊！清晰的记得有一天我不小心点到了网页源码，为此我精简如下：
<html> <head> <style type="text/css"> selector {property: value} </style> <script language="javascript"> function name(){} </script> </head> <body> hello...world </body> </html>
还有如下口诀：
HTML:
超文本标记语言（HyperText Markup Language）html元素由很多成对的标签构成,标签有各种莫名其妙的属性！其实，碰到这种敌人我只能先翻下书；
CSS：
指层叠样式表（Cascading Style Sheets) 是能够真正做到网页表现与内容分离的一种样式设计语言，样式定义如何显示 HTML 元素 样式通常存储在样式表中 要是没这的话，估计复杂的好看页面会死人的；
Dom：
文档对象模型 (Document Object Model) 在应用程序中，基于Dom的Html分析器将html文档转换成一个对象模型的集合（通常称作是Dom树），一个html分析器，在对html文档分析后，不管这个文档有多简单或复杂，其中的消息都会被转化成一颗对象树 ，通过Dom接口，应用程序可以在任何时候访问Html文档的任何一部分数据，因此利用Dom接口的机制也可以被称为随机访问机制。Dom接口提供了一种通过分层对象模型来访问html文档的信息的方式，这些分层对象模型依据html文档结构形成了一个节点树。
DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言；要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
JavaScript：
是一种原型化继承，面向对象的，动态类型的客户端脚本语言。是因特网上最流行的脚本语言 ，主要目的是为了解决服务器端语言，比如：Perl遗留的速度问题，为客户端提供更流畅的浏览效果：：有 利于页面显示和行为的分离，浏览器事件作出响应 浏览器事件作出响应；
------是一种解释性脚本语言（代码不进行预编译）
什么是解释性呢,呢呢，？？？？？？如下：
编译器翻译的方式有两种：一个是编译，一个是解释。两种方式之间的区别在于翻译时间点的不同。
编译型程序执行速度快，同等条件下对系统要求较低；解释型边解释边运行，，效率相对比较低但是不同系统平台间的兼容性较好。
它的基本特点如下：
嵌入动态文本于HTML页面；
对浏览器事件作出响应 ；
读写HTML元素 ；
在数据被提交到服务器之前验证数据；
检测访客的浏览器信息，控制cookies，包括创建和修改等；
额，我都觉得我很啰嗦了！
0 . 整体
前面我们看到了这个<script>..</script>那这个东西什么作用来的啊？我又千辛万苦百度了下，发现如下：
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件（如:js文件的地址URI）
必需的 type 属性规定脚本的 MIME 类型。例如:type="text/javascript");
这时我又在想，在页面这个关系复杂的地方，它是何时何地执行的呢？
head标签是前于body标签处理的，在head标签的所有文件加载完前是没法进行body内容的展示，且Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， 请看下：
<html> <head> <script language="javascript"> alert("one"); </script> </head> <body onload="alert('three')" > <script language="javascript"> alert("two"); </script> </body> </html> //one two three
知道了它从哪里开始了，那么着既然是一门语言，那又有和其它语言有什么不同呢？（都说了时解释性的了，啰嗦！）
- 变量：
不像其他语言有固定的数据类型，int,float,javaScript变量可以存放任何类型的值, 内部快速自动的进行两种不同的类型的转换;(特么神奇啊，是吧？是啊！)，也有两个烦人的类型，null，undefined，
如果没有声明，默认为undefined，如果声明了，但是没赋值，就是null,不知道是不是这个样子的呢？算了，为了加快速度，我闪了！但为了回忆还是留下点啥！如下：
<html> <head> <script language="javascript"> function cmp(){ alert(null===undefined); //false; alert(typeof null); //Object alert(typeof undefined) //undefined } cmp(); </script> <script language="javascript"> alert(tmp); //输出 undefined var tmp = 1; alert(tmp); // 1
//也说明是边解释边执行哦
var i,j; i=5;j=7; alert(""+i+j); //57 alert(""+(i+j)); //12; alert(j/i);//1.4 alert(Math.floor(j/i)); //1 </script> </head> <body> hello..木有..world </body> </html>
对于上面，你也会发现：var ={int ,bool ,float,Object,String,undefined,null......}各种数据类型的集合，Ps:对象是一种构造数据类型；
2 . 语法：
好歹我先前也练了乾坤大挪移，什么语法的小菜了，（不过也有她自身的独特语法，，whih,,in,,等，）
函数：function name(){......} 、、呵呵很简单了
还有其他两个函数有必要说出来，这样我们才可以看到我们程序的结果了：document.write("hello"); alert（“提示什么结果不”）；请看：
<html> <head> <script language="javascript"> function find( ){ document.write("hello"); //会清除原有的内容！ // document.getElementById("id").value="不好"; //没有注释的话，报错，无法设置属性value，对象为空或未定义， } // find(); </script> </head> <body>dfd <input type="button" onclick="find()"> <input type="text" id="id" name="id" value="你好吗？"> </body> </html> 看到结果后，会惊奇的发现，因为document.write()把页面原来存在标签按钮的覆盖了，为什么啊？尼玛，赶速度啊，先这样吧！于是你也会惊奇不，看到了吧，可以有事件哎！
因为如此，才增加了它的可练性啊，因为有了互动么！
3.事件：
简单理解，事件机制是一种触发机制，要想客户端的ｊａｖａＳｃｒｉｐｔ程序有 机会呗激活并运行，就必须有一个触发的事件；（好比老鼠夹子，嘻嘻）；
如何绑定呢：
------1.绑定到元素属性：即标签中的属性，属性名由事件属性有一个“ｏｎ”前缀＋事件类型；如：onClick OnMouseOver 这些属性也被称为事件处理器：
------2.绑定到对象属性: Ｄｏｍ节点中的对象属性, document.getElementById("myButton").onclick=myFunction;
<html> <head> <script language="javascript"> var i=0; function find( ){ document.getElementById("myButton").onclick=find; alert(i); i++; } </script> </head> <body> <input type="button" value="先点元素"onclick="find()"> <input type="button" value="后点对象" id="myButton"> </body> </html>
//结果为 alert（0），alert（1），
不写了，再写的话，本来很好的别人也会差评的呢，。但是既然学了那么多，还是留下个数字拼图游戏吧：如下：很好玩的哦，不信算了。。
截图炫耀：（其实你不用羡慕了）
<html> <head> <title> five </title> <style type="text/css"> td input { background-color: #00ff00 padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom:0px; padding-left: 0px; width: 100px; height: 100px; font-size: 80px; } </style> <script language="javascript"> var hasvalue = new array(5); for(i=0;i<=4;i++) hasvalue[i]=new array(5); var s=0,m=0,t; function timecount(){ s++; if (s<10) s="0" + s; else if(s>59){ s-=60; m++; } document.getelementbyid('time').value=m+":"+s; t=settimeout("timecount()",1000) } function reducerandom(){ s=m=0; timecount(); //为何不是递归呢？？？？一直在此循环？？ var isok = new array(8); var i,num ; var t=0; for(i=0;i<=8;i++) isok[i]=false; for(i=0;i<=4;i++) for(j=0;j<=4;j++) hasvalue[i][j]=1; hasvalue[3][3]=0; while(1){ num = math.floor(math.random()*8+1) ; if(isok[num]) continue; isok[num]=true; t++; document.getelementbyid(""+t).value=num; if(t==8) break; } document.getelementbyid("9").value=""; } function exchange(button){ var i , j; if(button.value=="") return; if(button.value!=""){ i=math.floor((button.id-1)/3+1); if(button.id%3==0) j=3; else j=button.id%3; hasvalue[i][j]=0; if(hasvalue[i-1][j]==0) { hasvalue[i-1][j]=1;document.getelementbyid(""+((i-2)*3+j)).value=button.value ;button.value=""; } else if(hasvalue[i+1][j]==0) { hasvalue[i+1][j]=1;document.getelementbyid(""+(i*3+j)).value=button.value ;button.value=""; } else if(hasvalue[i][j-1]==0) { hasvalue[i][j-1]=1;document.getelementbyid(""+((i-1)*3+j-1)).value=button.value;button.value=""; } else if(hasvalue[i][j+1]==0) { hasvalue[i][j+1]=1;document.getelementbyid(""+((i-1)*3+j+1)).value=button.value;button.value=""; } else hasvalue[i][j]=1; if(checkover()) { alert("congratulation!!"); cleartimeout(t); } } } function checkover(){ var i; var target; for(i=1;i<=8;i++){ target=document.getelementbyid(""+i); if(target.id!=target.value) return false; } return true; } </script> </head> <body> <br> <center> <input type="button" style="color:#ff0000;" value="开始游戏" onclick="reducerandom()"> <input type="text" id="time" style="color:#ff0000;" > </center> <br><h4 align="center" style="color:#ff66cc;">author:five</h4> <hr> <table align="center" border="0" width="10%" > <tr> <td><input type="button" id="1" onclick="exchange(this)"></td> <td><input type="button" id="2" onclick="exchange(this)"></td> <td><input type="button" id="3" onclick="exchange(this)"></td> </tr> <tr> <td><input type="button" id="4" onclick="exchange(this)"></td> <td><input type="button" id="5" onclick="exchange(this)"></td> <td><input type="button" id="6" onclick="exchange(this)"></td> </tr> <tr> <td><input type="button" id="7" onclick="exchange(this)"></td> <td><input type="button" id="8" onclick="exchange(this)" ></td> <td><input type="button" id="9" onclick="exchange(this)" ></td> </tr> </table> </body> </html>
好了，累死我了；
不会排版，丑死了！
2013-10-22 21:57:57,