<script type="text/javascript">
//build our array
var array1 = new Array();
array1[0] = 0;
array1[1] = 1;
array1[2] = 2;
array1[3] = 3;
array1[4] = 4;

var numArray = array1.length;
for(var i=0; i<numarray ; i++){
	if (array1[i] == 2){
		continue; //skip to the end of the for loop, then start over after incrementing by 1
	}else if (array1[i] == 3){
		break; //end the for loop, and execute code after the loop
	}

	alert("still in for loop: " + i);
}
	alert("after for loop: " + i);
</script>

The above code should have created popups for the numbers “0″, “1″, and “3″. This is because the “continue;” statement makes the code skip to the end of the loop, not executing any of the rest of the loop code, then starts over at the beginning of the loop after incrementing i by 1.

The “break;” statement causes the loop to end and the code after the loop to be executed. i is NOT incremented anymore and thus remains at 3.

You can also use “return;” to just end a function prematurely.

<script type="text/javascript">
Array.prototype.clone = function (){
	var newArray = new Array(this.length);

	for(var i=0; i < this.length; i++ ){
		newArray[i] = this[i];
	}

	return newArray;
}

</script>

This would have the same effect as the following code:

<script type="text/javascript">
function cloneArray(oldArray){
	var newArray = new Array(oldArray.length);

	for(var i=0; i < oldArray.length; i++ ){
		newArray[i] = oldArray[i];
	}

	return newArray;
}

</script>

The difference here being that for the prototype function you call it by using “arrayName.clone()” and for the second function you use cloneArray(arrayName). The both functions return the same thing.

Why not just use the following code below, you might ask? Because what you are doing below is just creating a new reference to the same array object. So if you made changes to oldArray, newArray would reflect those same changes. The functions above actually create and return a brand new array.

var oldArray = new Array();
var newArray = oldArray;

The solution? There are 2 possible workarounds. 1) Use a DIV, or 2) use appendChild(). I will show how to use appendChild here. I’ve tested this in IE7, FF, and Safari (Mac) and it should work. Thanks to Jeremy Keith I was able to figure it out after hours of struggling.

The following code should probably be within a function you call.

<script type="text/javascript">

var output = "dynamic output from earlier should go in this variable";

//first, create the table row and the table cell
var newtr = document.createElement("tr");
var newtd = document.createElement("td");

//place the output variable within the table cell, innerHTML here works because it's not on the page yet
//then, append the cell to the row, basically places the "<td>output here</td>" tags within the <tr></tr> tags
newtd.innerHTML = output;
newtr.appendChild(newtd);

//last, append the whole thing to the element, here it'll find the element with the "tbody_one" id, go inside, and make it the last child
document.getElementById("tbody_one").appendChild(newtr);

</script>

<script type="text/javascript">
var browser = navigator.appName; //find the browser name

alert(browser); //popup with the browser name

if(browser == "Microsoft Internet Explorer"){
    alert("You are using IE");
}else{
    alert("you are using a different browser than IE");
}
</script>

Usually the code above suffices, because most JavaScript will either work in IE or the other browsers.

Note: You must add the following onload event to your body tag: < body onload=”loadClassNames()”>

<script language="javascript" type="text/javascript">

//function that allows us to get the elements by a class name,

document.getElementsByClassName = function(clsName){

	var retVal = new Array();
	var elements = document.getElementsByTagName("*");

	for(var i = 0;i < elements.length;i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");

			for(var j = 0;j < classes.length;j++){
				if(classes[j] == clsName){
					retVal.push(elements[i]);
				}
			}

		}else if(elements[i].className == clsName){
			retVal.push(elements[i]);
		}
	}
	return retVal;
}

function loadClassNames(){
	//this method only works for event handlers

	var classNames= document.getElementsByClassName('test2');

	for (var i = 0; i < classNames.length; i++){
		classNames[i].onmouseover = function(){
			alert(this.id);
		}

	}
}

</script>

The first function simply adds the capability of getting an element by class name, which is not inherently possible with JavaScript. Now, what the 2nd function does, is the following. If you add loadClassNames() as an “onload” function to the body tag, when the page loads, the function will get all of the elements with a class name of ‘test2′, and assign a new “mouseover” event. In this case, it will create a popup that displays the id of the element.

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

var elemToFind = document.getElementById('div1');

var elemCoords = findPos(elemToFind);

So now, elemCoords holds both the x and the y. Since findPos() returns an array, to access the x or y by itself do the following:

// elemCoords[0] or elemCoords[1] for the x and y values, respectively
alert(elemCoords[0]);