JS References

JS Objects
JS HTML DOM

Suscriber with us



Receive HTML?

Syndicate

JS How To Use? PDF Print E-mail

The HTML <script> tag is used to insert  a JavaScript into an HTML page.

If you have ever used CSS before, then the whole part about how to include Javascript will be a lot simpler to grasp. Here are Tizag's three important steps you should always take when creating or using someone else's Javascript code.

  1. Use the script tag to tell the browser you are using Javascript.
  2. Write or download some Javascript
  3. Test the script!

There are so many different things that can go in the wrong with a script, be it human error, browser compatibility issues, or operating system differences. So whenever using Javascript, be sure that you test your script out on a wide variety of systems and most significantly different web browsers.

Your First Javascript Script

To follow the classic examples of many programming tutorials let's use Javascript to print out "Hello World" to the browser. I know this isn't very attractive but it will be a good way to explain all the overhead required to do something in Javascript.

HTML & JavaScript Code:

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

The code above will construct this output on an HTML page:

Hello World!

Example Explained

To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the "type=" attribute to define the scripting language.

So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

The word document.write is a standard JavaScript command for writing output to a page.     

By entering the document.write command between the <script> and </script> tags, the browser will distinguish it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Try it yourself.

Note: If we had not entered the <script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.

Try it yourself.

HTML Comments to Handle Simple Browsers

Browsers that do not support JavaScript will display JavaScript as page content.

To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag can be used to "hide" the JavaScript. Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement.

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

The two onward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.





Digg!Del.icio.us!Google!Live!Facebook!Slashdot!Technorati!StumbleUpon!Newsvine!Yahoo!Free social bookmarking plugins and extensions for Joomla! websites!
Last Updated ( Monday, 17 March 2008 )
 
< Prev   Next >

Polls

Which is the best Scripting language?