japaz · September 26, 2011 20:22
diff --git a/moving_box.html b/moving_box.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>

 	<head>

 		<style type="text/css">

 		body{background-color:#ccc}
 		#box{
 			width:100px;
 			height:100px;
 			background-color:red;
 			position:absolute;
 			left:50%;
 			top:50%;
 			margin-left:-50px;
 			margin-top:-50px;
 		}

 		</style>

 		<script type="application/javascript">

 		console.log("Example that uses events in Javascript to move and re-arrange a box on the screen");

 		function playingWithBox( window, document, undefined ) {
 		
 		    // Don't use body to add event handlers; e.g. body.addEventListener...
 		    var body = document.getElementsByTagName( 'body' )[0];
 		    console.log( body, typeof body, body.constructor.toString() );
 				
 		    var box = document.getElementById( 'box' );
 		    console.log( box, typeof box );
 		
 			// Point in box used to perform calculations
 			var boxleft = box.offsetLeft;
 			var boxwidth = box.offsetWidth;

 			// Box movement properties
 			var step = 10;
 			var angle = 0;
 			var spin = false;

 			var move = { // This is a JS object
 				moveLeft : function() {
 					// From the bottom-right pixel towards the right side
 					console.log( 'Moving box left' );
 					box.style.left = box.offsetLeft + ( boxwidth/2 ) - step + 'px';
 				},
 				moveRight : function() {
 					console.log( 'Moving box right' );
 					box.style.left = box.offsetLeft + ( boxwidth/2 ) + step + 'px';
 				},
 				moveUp : function() {
 					console.log( 'Moving box up...' );
 					box.style.top = box.offsetTop + ( box.offsetHeight/2 ) - step + 'px';
 				},
 				moveDown : function() {
 					console.log( 'Moving box down...' );
 					box.style.top = box.offsetTop + ( box.offsetHeight/2 ) + step + 'px';
 				}
 			}

 			var resize = {
 				resizeLeft : function() {
 					box.style.width = box.offsetWidth + step + 'px';
 					move.moveLeft();
 				},
 				resizeRight : function() {
 					box.style.width = box.offsetWidth + step + 'px';
 				}
 			}

 			// Defining events

 			// Functions must be placed before the event 
 			var onClick = function( e ) { 
 				console.log( 'Click!', e );
 			}
 			
 			// If the function were not assigned to a variable, it would be executed 
 			// when entering to the script section
 			var dblClick = function( e ) { 
 				console.log( 'Double click!', e );
 				if( !spin ) {
 					spin = setInterval(function() {
 						// Chrome uses WebkitTranform
 						box.style.MozTransform = 'rotate(' + angle + 'deg)'
 						angle = angle + 1;
 					}, 5 );
 				} else {
 					console.log( spin );
 					clearInterval( spin );
 					spin = false;
 				}
 			}
 			
 			var keyDown = function( e ) { 
 				console.log('Key pressed: ', e);
 				switch(e.keyCode) {
 					case 13: test(); break;
 					case 37: ( e.shiftKey ? resize.resizeLeft() : move.moveLeft() ); break;
 					case 38: move.moveUp(); break;
 					case 39: ( e.shiftKey ? resize.resizeRight() : move.moveRight() ); break;
 					case 40: move.moveDown(); break;
 					default: console.log( 'This key is not allowed: ', e.keyCode );//e.preventDefault();
 				}
 			}

 			// Specific listeners for modern browsers. This function doesn't work in all browsers 
 			//window.addEventListener( 'click', onClick, false ); 
 			//window.addEventListener( 'dblclick', dblClick, false ); 
 			//window.addEventListener( 'keydown', keyDown, false ); 
 			addEvent( window, 'click', onClick );
 			addEvent( box, 'dblclick', dblClick );
 			addEvent( window, 'keydown', keyDown );

 			// This function is prepared to work in (almost) all browsers
 			function addEvent( element, event, callback ) {
 				if( element.addEventListener ) { // Firefox
 					element.addEventListener( event, callback, false );
 				} else if ( element.attachEvent ) {
 					element.attachEvent( 'on' + event, callback );
 				} else {
 					element( 'on' + event ) = callback;
 				}
 			}
 		}

 		</script>

 	</head>

 	<body onload="playingWithBox(this, this.document)">
 		<h1>Example that uses events in Javascript to move and re-arrange a box on the screen</h1>
 		<div id="box"/>
 	</body>

 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>

	<head>

	<style type="text/css">

	body{background-color:#ccc}
	#box{
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
	}

	</style>

	<script type="application/javascript">

	console.log("Example that uses events in Javascript to move and re-arrange a box on the screen");

	function playingWithBox( window, document, undefined ) {

	// Don't use body to add event handlers; e.g. body.addEventListener...
	var body = document.getElementsByTagName( 'body' )[0];
	console.log( body, typeof body, body.constructor.toString() );

	var box = document.getElementById( 'box' );
	console.log( box, typeof box );

	// Point in box used to perform calculations
	var boxleft = box.offsetLeft;
	var boxwidth = box.offsetWidth;

	// Box movement properties
	var step = 10;
	var angle = 0;
	var spin = false;

	var move = { // This is a JS object
	moveLeft : function() {
	// From the bottom-right pixel towards the right side
	console.log( 'Moving box left' );
	box.style.left = box.offsetLeft + ( boxwidth/2 ) - step + 'px';
	},
	moveRight : function() {
	console.log( 'Moving box right' );
	box.style.left = box.offsetLeft + ( boxwidth/2 ) + step + 'px';
	},
	moveUp : function() {
	console.log( 'Moving box up...' );
	box.style.top = box.offsetTop + ( box.offsetHeight/2 ) - step + 'px';
	},
	moveDown : function() {
	console.log( 'Moving box down...' );
	box.style.top = box.offsetTop + ( box.offsetHeight/2 ) + step + 'px';
	}
	}

	var resize = {
	resizeLeft : function() {
	box.style.width = box.offsetWidth + step + 'px';
	move.moveLeft();
	},
	resizeRight : function() {
	box.style.width = box.offsetWidth + step + 'px';
	}
	}

	// Defining events

	// Functions must be placed before the event
	var onClick = function( e ) {
	console.log( 'Click!', e );
	}

	// If the function were not assigned to a variable, it would be executed
	// when entering to the script section
	var dblClick = function( e ) {
	console.log( 'Double click!', e );
	if( !spin ) {
	spin = setInterval(function() {
	// Chrome uses WebkitTranform
	box.style.MozTransform = 'rotate(' + angle + 'deg)'
	angle = angle + 1;
	}, 5 );
	} else {
	console.log( spin );
	clearInterval( spin );
	spin = false;
	}
	}

	var keyDown = function( e ) {
	console.log('Key pressed: ', e);
	switch(e.keyCode) {
	case 13: test(); break;
	case 37: ( e.shiftKey ? resize.resizeLeft() : move.moveLeft() ); break;
	case 38: move.moveUp(); break;
	case 39: ( e.shiftKey ? resize.resizeRight() : move.moveRight() ); break;
	case 40: move.moveDown(); break;
	default: console.log( 'This key is not allowed: ', e.keyCode );//e.preventDefault();
	}
	}

	// Specific listeners for modern browsers. This function doesn't work in all browsers
	//window.addEventListener( 'click', onClick, false );
	//window.addEventListener( 'dblclick', dblClick, false );
	//window.addEventListener( 'keydown', keyDown, false );
	addEvent( window, 'click', onClick );
	addEvent( box, 'dblclick', dblClick );
	addEvent( window, 'keydown', keyDown );

	// This function is prepared to work in (almost) all browsers
	function addEvent( element, event, callback ) {
	if( element.addEventListener ) { // Firefox
	element.addEventListener( event, callback, false );
	} else if ( element.attachEvent ) {
	element.attachEvent( 'on' + event, callback );
	} else {
	element( 'on' + event ) = callback;
	}
	}
	}

	</script>

	</head>

	<body onload="playingWithBox(this, this.document)">
	<h1>Example that uses events in Javascript to move and re-arrange a box on the screen</h1>
	<div id="box"/>
	</body>

	</html>