Home arrow JavaScript arrow Page 3 - The Power of Javascript: An Introduction
JAVASCRIPT

The Power of Javascript: An Introduction


Javascript is a powerful language for Web designers to know, but there are some misconceptions about what it is and what it can do. This first article in a series covering Javascript from the basics to more advanced applications will explain what it is, what it is not, and give you a small taste of what it can do.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
June 28, 2005
TABLE OF CONTENTS:
  1. · The Power of Javascript: An Introduction
  2. · Meet Javascript
  3. · The Hello World Example
  4. · Hello World? What's going on?

print this article
SEARCH DEVARTICLES

The Power of Javascript: An Introduction - The Hello World Example
(Page 3 of 4 )

Let's take a look at your first Javascript example, the Hello World example. Write (or copy) the following code into a file with the extension .html as any other Web page you develop.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
window.alert("Hello World, from the head element");
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
window.alert("Hello World, from the body element");
</script>
</body>
</html>

Fire up your IE6 Browser (or any browser you like to use for this example, like Netscape 7.2 or Mozilla Firefox 1.3) and you will get the following message box as the result:

Click on OK and another message box will show up:

And here's the Web page itself. There's no text or any other thing on the page because we didn't include any HTML elements that can be displayed to the page:

Before we discuss your first Javascript example, let's extend it a little bit. Modify your Web page to contain the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
window.alert("Hello World, from the head element");
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
window.alert("Hello World, from the body element");
</script>
<h1>
<script language="JavaScript" type="text/javascript">
document.write("Hello Javascript");
</script>
</h1>
</body>
</html>

Reload the Web page and you will get the same two message boxes you saw above, but this time the page will look like this:

As the last change for the Hello World example, modify the code to include HTML comments around the code of the scripts tags (but inside the <script> tags) so it looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<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>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!-- hiding Javascript from old browsers
window.alert("Hello World, from the body element");
// end of the HTML comment -->
</script>
<h1>
<script language="JavaScript" type="text/javascript">
<!-- hiding Javascript from old browsers
document.write("Hello Javascript");
// end of the HTML comment -->
</script>
</h1>
</body>
</html>

Reload the Web page again and you will get the same message boxes and the same <h1> Hello Javascript element.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials