If you’re not in the programming field, you likely got hit by a bunch of acronyms there as if you had been hit by a bus. Let me break it down:
- AJAX : A technique that makes websites look fast and smooth, unlike “old” style application. Think about the way Google maps looks, or Netflix.
- DOM: HTML (the language that web pages are written in) can be seen as a “tree-like” structure. This structure goes by the name of “DOM”, or “Document Object Model”
- Javascript: A language for telling your browser ( Firefox, IE, etc. ), to do something to the HTML page sent from the server within your browser. Thus what’s on the server and sent to everyone else doesn’t change, just your particular ‘view’ in *your browser
So, anyway, if you want to write in the AJAX mindset, you need to understand the latter two ideas rather well. The last time I really looked at Javascript was for one of my senior-year classes (way) back in 2000. Javascript has come a long way (baby) and with the advent of the AJAX technique, it’s really the only game in town.
I wrote a very simple script to help me get the hang of the language, so for you, here it is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Steven Harms">
<!-- Date: 2006-08-19 -->
<script type="text/javascript" charset="utf-8">
function configurePage(doTextChange){
// doTextChange is a variable passed as a YES or NO argument that
// is used to decide if the default text 'Moopy Hobo' is changed to
// something else
//Get the HTML <body> tag reference
var htmlParent = document.getElementsByTagName('Body')[0];
//Create a <p> tag element
var childEl = document.createElement('p');
// This is something subtle, you need to create a text node and bond
// that to the <p> element. In the DOM inspector, this shows
// up as 'nodeName' = #text
var tf = document.createTextNode("Moopy hobo");
// Bond the text to the <p> element
childEl.appendChild(tf);
// Handle the argument
if ( doTextChange == 'YES' ){
childEl.firstChild.nodeValue="Monsier Hobo"
}
// This is for getting familiar with using the DOM to manipulate
// text elments
//Changing the style at the line level...
childEl.style.width="200px";
childEl.style.fontFamily="garamond; helvetica";
//Changing the style at the line level, but with CSS
childEl.className='graybackground';
//add some other JavaScript events
childEl.addEventListener('mouseover',changebk,false);
childEl.addEventListener('mouseout',dazzle,false);
//Finally, put this loaded up <p> tag onto the page by appending
//it to the <html><body> node
htmlParent.appendChild(childEl);
}
// A function for callbacks, the alert() is pretty annoying when
// testing so I've commented it out, but enabling it makes things
// a bit more obvious
function dazzle(){
//alert('you are dazzled');
this.className='graybackground'
}
//Nifty!
function changebk(){
this.className='redbackground'
}
</script>
<style type="text/css" media="screen">
.graybackground{
background-color: #BBB;
}
.redbackground{
background-color: red;
}
</style>
</head>
<body onload="configurePage('YES')">
<!-- Look Ma, no content! -->
</body>
</html>
