纯JavaScript制作围棋棋盘

同学们这次要让大家开开眼界啦。在上上上文中提到的书中有这样一个实例:用纯JavaScript制作一个围棋棋盘,本来以为很复杂,但看到作者给出的代码时就很惊讶,简简单单几行代码就能实现这样一个效果真是强大啊。

效果如下图:

js-chessboard

JavaScript代码如下

for(var x = 0; x<19; x++){
for(var y = 0; y<19; y++){
	var div = document.createElement("div");
	document.body.appendChild(div);
	div.style.position = "absolute";
	div.style.width = "23px";
	div.style.height = "23px";
	div.style.left = x*23 + "px";
	div.style.top = y*23 + "px";

	var s = ((x-9)%9 ? 0 :(x-9)/9)+1 + (((y-9)%9 ? 0 : (y-9)/9)+1)*3;
	if(s==4&&(x/3)%2==1 && (y/3)%2==1) s="X";

	div.style.backgroundImage = "url(B" +s+ ".gif)";
}
}
}

短短十来行代码却凝结了多少经验和智慧,值得细细品味。

点这里看效果

推荐一本JavaScript方面的书

昨天刚收到amazon的平邮书籍:悟透JavaScript<李战 著> , 网页设计解析<周陟 著>。前者原本在在别人博客上看有很多人推荐就慕名买下了。刚看一天,感觉非常不错值得推荐给大家阅读。

JavaScript的重要和强大自然不言而喻,如果你喜欢JavaScript或者是喜欢网站前端开发。作为一个非常实用而且流行的编程语言,这将是你的必须课。

悟透javascript

悟透javascript

后者(网页设计解析)还没来得及看,如果感觉好的话我会给大家介绍一下的。里面有几部非常强大的视频教程等我上传到网站上后也一起发出来给大家分享。

JavaScript简单实现表格格行换色

网页中数据表的设计往往采用格行变色的方法修饰表格,不仅看起来美观也一定程度上提升用户体验。传统的方法是用JavaScript来实现,今天我们来看看具体的实现方法。的确很简单哦。

先看最终效果图:

 

js-table-color-changing

表格的代码可以任意写,或者直接从DreamWeaver里面拉。最重要的是JavaScript代码,如下:

window.onload = function(){ //浏览器载入时执行函数
var tr = document.getElementsByTagName("tr");
		//获取文档中的tr元素。此时变量tr是个对象数组

for ( i=0; i<tr.length; i++){
	if (i%2 == 0){	//奇数行给tr元素添加ctr类属性
		tr[i].className += "ctr";
	}

	tr[i].onmouseover = function(){
		this.className += " trhover";
		//鼠标经过每个tr时追加给tr元素trhover类属性
	}
	tr[i].onmouseout = function(){
		this.className = this.className.replace(" trhover","");
		//鼠标离开每个tr时移除掉tr元素trhover类属性
	}
}
}

接下来的工作很简单了,就是把批段代码加入到你网页的script标签中。

点击查看效果及源码

JavaScript函数递归调用

学习C语言或者考二级C的人都会知道函数的递归调用这个知识点是最难的了,理解它对我的编程的逻辑思维会有很大的帮助。那么在JavaScript中是怎样使用递归的呢,一个很经典的例了就是平方和的计算。

代码如下:

function sumn(n) {
	if (n==1)

		{ return n; }

	else
		{ return ( n*n + sumn(n-1) ); }
}

调用此函数就可以计算出n的阶乘。比如我们计算3的阶乘,函数sumn(3)的执行过程如下:

square-sum

JavaScript中的函数(方法)重载

学习JavaScript有几天了,今天看到JS中的面向对象编程。我们知道在一般的面向对象的编程中方法是可以重载的,通俗得说就是可重载方法的调用是根据形参决定的。比如说一个类中有两个方法(不完整):

cal (a,b) 	{ return a+b;};
cal (a,b,c) 	{ return a*b;};

如果调用第二个带三个参数的方法”cal(1,2,3);”,将返回1乘2的值,而不是1加2。

然而在JavaScript中函数是不支持重载的,如果我们必须要用到重载怎么办呢?这时候就得用到arguments对象了,它可以检测到返回的函数参数个数。我们可以调用它的length属性来做判断从而达到防重载的效果。用法如下:

function returnArgs (){ alert(arguments.length); }
returnArgs("小","强");	 //输出2
returnArgs(2009);		//输出1
returnArgs();			//输出0

总结一下写一个小程序,下面的脚本代码一定会输出”3|6″从而模仿实现了JavaScript的函数重载:

<script type="text/javascript">
	function cal (a,b,c){
		if (arguments.length == 2){
			return a+b;
		}
		else if(arguments.length == 3){
			return a*b*c;
		}
	}
	document.write (cal(1,2) + " | ");
	document.write (cal(1,2,3));
</script>