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.
Online Training Tutorials
JavaScript EventJavaScript Event : Imagine an interface where the only way to find out whether a key on the keyboard is being pressed is to read the current state of that key. To be able to react to […]- JavaScript Node.jsJavaScript Node.js, a program that allows you to apply your JavaScript skills outside of the browser. With it, you can build anything from small command line tools to HTTP servers that […]
- JavaScript ScopeJavaScript Scope refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. When a […]
- JavaScript “this” KeywordIn JavaScript "this" Keyword, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being […]
- JavaScript FunctionThe definition expression defines a JavaScript function, and the value of such an expression is the newly defined function. In a sense, a function definition expression is a “function […]
- JavaScript User InputJavaScript User Input : Clicks are powerful and easy and you can add an on Click event to pretty much any HTML element, but sometimes you need to be able to ask for input from the user and […]
- JavaScript BooleanJavaScript Boolean, It is often useful to have a value that distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”. For this purpose, JavaScript has Boolean […]
- JavaScript Interview Questions and AnswersJavascript is an interpreted language with a C like syntax. While many people brush the language off as nothing more than a browser scripting language, it actually supports many advanced […]