The Power of Javascript: An Introduction - Hello World? What's going on?
(Page 4 of 4 )
So let's go through step-by-step to explain what happened in the Hello World code example. I ran the example with Netscape 7.2 and Microsoft Internet Explorer 6.0 (but mostly with IE 6 unless there are differences; more on that later). This means that both browsers have a Javascript interpreter that executes the scripts we write. But where should we write Javascript code to tell the interpreter to run it? The simple answer is to include the Javascript code between <script> and </script> tags in the HTML code. You can write this tag anywhere in the HTML code, but it's better to write it in the <head> or the <body> elements.
When you load the Web page, the browser begins to display the HTML content in the page until it encounters an opening <script> tag. It understands that what follows the tag is not HTML code; it's a script that should be run using a specific interpreter. Actually, there are other scripting languages, like Microsoft VBScript, so the browser needs a way to tell which interpreter it needs to load.
Let's take a look at the first Javascript code we have in our example:
<script language="JavaScript" type="text/javascript">
<!-- hiding Javascript from old browsers
window.alert("Hello World, from the head element");
// end of the HTML comment -->
</script>
When the browser reaches the <script> opening tag, it checks the language attribute's value (which is Javascript in our example). It then transfers the control to the scripting language interpreter, so that the Javascript code can run in a Web page. Note that in the above example we have two attributes (the language and the type attributes).
The language attribute is very common in Web pages over the Internet as a way to tell the browser which scripting language to use. The type attribute does the same job. It's defined by the W3C HTML Standards (the value of the type attribute is the MIME of the scripting language, which in our case is text/javascript), but because the language attribute has another use (more on that later in the series) we include both of them in the opening <script> tag.
So why have we included an HTML comment inside the <script> element, and just before the script code? I think that you have an idea about the answer if you have some CSS knowledge. To hide CSS from a browser that doesn't support it, we include the CSS rules in an HTML comment inside the script element, so the browser will consider it an HTML comment. The same applies to Javascript; we have to comment our script using an HTML comment, so that when the page is loaded using a non-Javascript browser, it will not display the Javascript code to the page. So we need to put <!-- after the <Script> opening tag and --> just before the </Script> closing tag, like this:
<script language="JavaScript" type="text/javascript">
<!-- hiding Javascript from old browsers
window.alert("Hello World, from the head element");
// end of the HTML comment -->
</script>
Note that we put two forward slashes at the beginning of the ending comment. If you didn't include them, the example will run only in IE6. It will not give you any results if you run it in Netscape 7.2 or Firefox 1.3 because the > and - are Javascript operators, so we must comment the line to tell the Javascript interpreter that this is a Javascript comment to ignore. So if you load the Web page with a non-Javascript browser, the script will be ignored because of the opening <!-- and closing --> HTML comment.
When you load the Web page with a browser that supports Javascript, it will understand that you are using the opening <!-- HTML comment to hide the script from non-Javascript browsers. It will ignore the comment, then execute the script, but you need to put the two forward slashes at the being of the HTML closing comment (// is the Javascript comment way) because - and > means something to Javascript, and we need to ignore this line completely.
The line window.alert("Hello World, from the head element"); just displays the text enclosed in the parentheses in a message box (we will talk about that in detail later in the series, after we discuss the basics). At this point you should understand that we have three scripts in the Web page: the first one in the <head> element, the second one in the beginning of the <body> element, and the third one enclosed in the <h1> element. As you may have guessed, the scripts get executed in the order they exist in the HTML document. That's why we got the message "Hello World, from the head element" (while the Web page contains no text), then "Hello world, from the body element" (while the Web page contains no text), and then the text "Hello Javascript" is displayed as an <h1> (we will discuss all this in great detail through the series, so don't worry if you don't get it all right now).
The last <script> element in the HTML code just writes the text "Hello Javascript" to the page. Because the script itself is surrounded by <h1> opening and </h1> closing tags, the text "Hello Javascript" is displayed as <h1>. I think that now you have an idea about Javascript, I will not mention how powerful Javascript here in the first article but I will after I completely introduce Javascript.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 13 
