JavaScript Output Writeln, alert and getElementById
JavaScript Output (writeln) : One of the most important things to do when learning a new language is to master basic input and output which is why hello world has become almost a cliché in programming textbooks. For JavaScript you need three hello worlds because there are three ways to communicate with the user, each increasingly more useful than the last.
The first method is to use the document.writeln(string) command. This can be used while the page is being constructed. After the page has finished loading a new document.writeln(string) command will delete the page in most browsers, so use this only while the page is loading. Here’s how a simple web-page will look…
JavaScript Output (writeln)
<html>
<head>
</head>
<body>
<script type='text/javascript'>
document.writeln('Hello World!');
</script>
</body>
</html>As the page is loading, JavaScript will encounter this script and it will output “Hello World!” exactly where the script block appears on the page. The problem with writeln is that if you use this method after the page has loaded the browser will destroy the page and start constructing a new one. For the most part, document. writeln is useful only when teaching yourself the language. Dynamic content during page load is better served by the server-side scripting languages. That said, document.writeln is very useful in pre-processing forms before they’re sent to the server –you can basically create a new web-page on the fly without the need to contact the server.
JavaScript Output (alert)
The second method is to use a browser alert box. While these are incredibly useful for debugging (and learning the language), they are communicating with the user. Alert boxes will stop your scripts from running until the user clicks the OK button, and it has all the charm and grace of all those pop-up windows everyone spent so many years trying to get ridof!
<html>
<head>
</head>
<body>
<script type='text/javascript'>
alert('Hello World!');
</script>
</body>
</html>JavaScript Output (getElementById)
The last method is the most powerful and the most complex (but don’t worry, it’s really easy!). Everything on a web page resides in a box. A paragraph (<P>) is a box. When you mark something as bold you create a little box around that text that will contain bold text. You can give each and every box in HTML a unique identifier (an ID), and JavaScript can find boxes you have labelled and let you manipulate them. Well enough verbiage, check out the code!
<html>
<head>
</head>
<body>
<div id='feedback'></div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='Hello World!';
</script>
</body>
</html>The page is a little bigger now but it’s a lot more powerful and scalable than the other two. Here we defined a division <div> and named it “feedback“. That HTML has a name now, it is unique and that means we can use Javascript to find that block, and modify it. We do exactly this in the script below the division! The left part of the statement says on this web page (document) find ablock we’ve named “feedback” ( getElementById(‘feedback’) ), and change its HTML (innerHTML) to be ‘Hello World!’. We can change the contents of ‘feedback‘ at any time, even after the page has finished loading (which document.writeln can’t do), and without annoying the user with a bunch of pop-up alert boxes (which alert can’t do!).
I will be adding more posts in JavaScript, so please bookmark the post for future reference too.