Just a short note to my self. To change caption of button declared in HTML like:

<button id="animationTwoStart">Click me</button>

Use JS like:

document.getElementById("animationTwoStart").innerHTML = "Clicked"

 

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
		<script type="text/javascript" src="/index.js"></script>
	</head>
	
	<body>
		<div class="animation"></div>
	</body>
	
</html>

JS:

var spritePosition,
	imageLeft, 
	imageTop,
	step;

window.onload = function () {
	spritePosition = 100;
	imageLeft = 0;
	imageTop = 0;
	step = 10;
	
	window.setInterval (function () {
		document.getElementsByClassName('animation')[0].style.backgroundPosition = spritePosition + "px 0px";
		spritePosition = spritePosition + 108;
	}, 100);
	
	document.getElementsByTagName('html')[0].addEventListener("keydown", function(e){ 
			if (e.keyCode == 38) { //up
				imageTop = imageTop - step;
				document.getElementsByClassName('animation')[0].style.top = imageTop + "px";
			};
			if (e.keyCode == 40) { //down
				imageTop = imageTop + step;
				document.getElementsByClassName('animation')[0].style.top = imageTop + "px";
			};
			if (e.keyCode == 37) { //left
				imageLeft = imageLeft - step;
				document.getElementsByClassName('animation')[0].style.left = imageLeft + "px";
			};
			if (e.keyCode == 39) { //right
				imageLeft = imageLeft + step;
				document.getElementsByClassName('animation')[0].style.left = imageLeft + "px";
			};			
		}, false);
};

Things to notice in JS code are window.setInterval - with that we have infinite loop, and document.getElementsByTagName('html')[0].addEventListener("keydown", function(e){ - with that we are listening key events, so you can move image around page.

CSS:

.animation {
	width: 102px;
	height: 120px;
	background-image: url("scottpilgrim_multiple.png");
	background-position: 0px 0px;
	position: absolute;
}

Sprite I have stolen from this web site, and example you can download from here.

Title taken from here.

Here is my example. HTML part I need just to execute javascript files, so it looks like this:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="/index.js"></script>
	</head>
	<body>
		test
	</body>
</html>

index.js:

$.getScript("myScript.js", function() {
	debugger;
	alert("Load complete!");
	myFunction();
});

myScript.js:

function myFunction() {
	debugger;
	alert("tfqseftr");
}
//@ sourceURL=myScript.js

Notice line //@ sourceURL=myScript.js, without that line when we debug from Chrome it looks like this:

With //@ sourceURL=myScript.js line will look like:

Check this code:

aTest = function () {
	["a", "b", "c", "d"].forEach(function (event) {alert(event)} )
}

aTest();

After executing it, it will popup "a", "b", "c", "d"