Javascript: DOM, Window Object, Page Load and URL Encoding/Decoding Examples

This software (wordpress.com) is so good at omitting scripts from your post and it’s true that if you wanna benefit from the glory of it all use the actual product (wordpress.org). I do not have my own domain for that though, so in spite of the absence of an actual demonstration, here are some useful javascript source codes!

window element

This code shows how to display a popup window.

onclick="window.open('test.html', 'windowname1', 'width=200, height=77'); return false;"

Full window properties

function popup(url) 
{
 var width  = 500;
 var height = 500;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=yes';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}

The DOM

This code shows how to change the innerHTML value of a tag, change the color of a text, change the options of a select, make some page contents disappear, disable radio buttons, mark radio buttons as checked by default and basically how to user a switch function in JS and use the function getElementByID().

<script language="javascript">
function act(n){
	switch(n){
		default: break;
		case 1:{
			document.getElementById("targetObj").innerHTML = 
"<p id='helloworld'>hello world</p>";
			replaceSelectOpt("change color of 'hello world'", 2);
			break;
		}
		case 2:{
			document.getElementById("helloworld").style.color = "red";
			replaceSelectOpt("change me into useless radio buttons", 3);
			break;
		}
		case 3:{
			r = "<input type='radio' name='rad' checked='true'>huhuhuh";
			r = r + "<input type='radio' name='rad' disabled='true'>nahnah";
			document.getElementById("thejester").innerHTML = r;
			s = "<a href='javascript:void(0)' onClick='act(4)'>
I am tired. Make me vanish.</a>";
			document.getElementById("helloworld").innerHTML = s;
			break;
		}
		case 4:{
			document.getElementById('thejester').innerHTML = "";
			document.getElementById('targetObj').innerHTML = "";
		}
	}
}

function replaceSelectOpt(txt, nxt){
	full = "<option>Choose!</option><option onClick=
'act(" + nxt + ")'>" + txt + "</option>";
	document.getElementById("you_have_no_choice_but_to_follow").innerHTML = full;
}

</script>

<div id="thejester">
	<select id="you_have_no_choice_but_to_follow">
	<option>Choose!</option>
	<option onClick="act(1)">show me a paragraph</option>
	</select>
</div>

<br>
<div id="targetObj"></div>

history.go() function

Go to previous page

For whatever purpose it may serve, you may use the history() function to navigate towards a specific page in your history.

history.go(-1);

Reload Page

history.go(0);

escape() and unescape() functions //url encode and decode

These are the javascript counterparts for PHP’s rawurldecode and rawurlencode.

<input type="text" size="100" onKeyPress=
"document.getElementById('s').innerHTML=escape(this.value)">
<div id="s"></div>

Jeassshhh… There’s too much code here….(X_+)

26. May 2008 | Categories: Information Technology | Tags: DOM, escape(), getElementByID(), history(), history.go(), Javascript, JS, page refresh, switch(), unescape(), url decode, url encode, Window | Leave a comment