HTML and JavaScript are from different planets for sure. The proof? HTML’s DNA is made of declarative markup that allows you to describe a set of nested elements that make up your pages. JavaScript, on the other hand, is made of pure algorithmic genetic material, meant for describing computations.
Are they so far apart they can’t even communicate? Of course not, because they have something in common: the DOM. Through the DOM, JavaScript can communicate with your page, and vice versa. There are a few ways to make this happen, but for now lets concentrate on one. It’s a little wormhole of sorts that allows JavaScript to get access to any element, and it’s called getElementById. Let’s see how it works...
Let’s start with a DOM. Here’s a simple DOM; it’s got a few HTML paragraphs, each with an id identifying it as the green, red or blue planet. Each paragraph has some text as well. Of course there’s a <head> element too, but we’ve left the details out to keep things simpler.
Now let’s use JavaScript to make things more interesting. Let’s say we want to change the greenplanet’s text from “All is well” to “Red Alert: hit by phaser fire!’ Down the road you might want to do something like this based on a user’s actions or even based on data from a web service. But we’ll get to all that; for now let’s just get the greenplanet text updated. To do that we need the element with an id of greenplanet. Here’s some code that does that:
document.getElementById("greenplanet");
-Remember the ‘document’ represents the entire page in your browser and contains the complete DOM, so we can ask it to do things like find an element with a specific id.
-getElementById: Here we’re asking the ‘document’ to get us an ‘element’ by finding the element that matches the given ‘id’.
-From the above simple code, getElementById(“greenplanet”) returns the paragraph element corresponding to “greenplanet”...
...and then the JavaScript code can do all sorts of interesting things with it..
Once getElementById gives you an element, you’re ready do something with it (like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the element to a variable so we can refer to the element thoughout our code; let’s do that and then change the text:
var planet = document.getElementById("greenplanet");
-We’re assigning the element to a variable named ‘planet’.
-Here’s our call to getElementById, which seeks out the “greenplanet” element and returns it.
And in our code we can now just use the variable planet to refer to our element.
planet.innerHTML = "Red Alert: hit by phaser fire!";
-We can use the innerHTML property of our planet element to change the content of the element.
-We change the content of the greenplanet element to our new text... which results in the DOM (and your page) being updated with the new text.
Any changes to the DOM are reflected in the browser’s rendering of the page, so you’ll see the paragraph change to contain the new content!
[Sources: Head first HTML5 programming]
Post a Comment