Since JavaScript is run using a web browser's built-in JavaScript interpreter, there is no need to compile these programs!
We begin by providing below a simple "Hello World!" JavaScript example. As described earlier, we can embed JavaScript code in an HTML file (let us name this file, "hello.html"). This programs prints "Hello World!" in two different styles. In the first style, we use JavaScript's document.write() function to print the string "Hello World!" on the browser. In the second style, we use the innerHTML property of the "idDiv" HTML element to add "Hello World!" to it.
<!doctype html> <html> <body> <div id="idDiv"> </div> <script type="text/javascript"> <!-- Needed for old-browsers that do not understand Javascript. // Get a handle of the div element. var elem = document.getElementById("idDiv"); elem.innerHTML += "Hello World! <br>"; document.write("Hello World! <br>"); // --> </script> </body> </html>We present two different styles to print "Hello World!" for a good reason.
The first style uses the write() method of the document object and this method prints text on the HTML page. This method was a popular method in the past but its use now is discouraged due to the possibility of it erasing all the contents on a page. Therefore, we would not be using document.write() henceforth.
The second method uses getElementById() method of the document object to get a handle of the "div" element of the HTML body. Next, it adds to the innerHTML property of the "div" element. This method is safe and does not erase existing content. In our examples, we will use innerHTML method for printing text on the page.
Note that we will describe the document object, document.write() method, document.getElementById() method, and innerHTML property in a later section. If you feel overwhelmed, please make a note of these methods and once you have read the later sections, these methods would start to make complete sense!
In-between the script tags, the above example has two lines, one starting with "<!--" and the other one having "// -->". This is a workaround to handle (old) browsers that are incompatible with JavaScript. With this workaround, these browsers see JavaScript code lying between "<!--" and "-->" as HTML comments and thus, ignore it. In that case, why do JavaScript-compatible browsers not see this code as comments? Well, JavaScript engine has a hack for this. It is acceptable for JavaScript code to keep the string "<!--" at the start of the script code and JavaScript simply ignores everything in this line. Now, the last line starts with "//" and since "//" indicates JavaScript comments, JavaScript ignores everything on that line as well. This way, JavaScript does not complain about HTML's closing comment tag, "-->"! Thus, this workaround allows JavaScript compatible browsers to run JavaScript code and JavaScript incompatible browsers to ignore it.
In the above example, we end each line with a semicolon; each of these lines are referred to as a statement. In JavaScript, it is not required to end each line with a semicolon, but when we provide a semicolon, JavaScript does interpret that as an end of statement. While it is okay to not provide semicolon, for cases that have a statement spread over multiple lines, a lack of semicolon can sometimes lead to unknown behavior. Without a semicolon, JavaScript can parse a statement spread over multiple lines as long as it considers them to be making a valid expression. It is this behavior that can potentially lead to confusion! For this reason, we always use a semicolon at the end of each line and we also recommend the same!
No comments:
Post a Comment