javaScript学习
由于最近很闲,都不知道干啥,随便看了一本书-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.事件:
简单理解,事件机制是一种触发机制,要想客户端的javaScript程序有 机会呗激活并运行,就必须有一个触发的事件;(好比老鼠夹子,嘻嘻);
如何绑定呢:
------1.绑定到元素属性:即标签中的属性,属性名由事件属性有一个“on”前缀+事件类型;如:onClick OnMouseOver 这些属性也被称为事件处理器:
------2.绑定到对象属性: Dom节点中的对象属性, 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),
不写了,再写的话,本来很好的别人也会差评的呢,。但是既然学了那么多,还是留下个数字拼图游戏吧:如下:很好玩的哦,不信算了。。
截图炫耀:(其实你不用羡慕了)
![](//images0.cnblogs.com/blog/553880/201310/22214410-0ccbc24bbfb74a3daa96a020516de4bd.jpg)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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,