Thursday, 28 November 2013

Simple Javascript

JavaScript
Why is JavaScript special?

JavaScript generates DYNAMIC content.

JavaScript gives life to your content by animating certain parts and adds interactivity to it.Weren't the hyperlinks enough,why do I need more interactivity?

Let us map this to the concept of writing in a book once again.

It is pretty hard to imagine interactivity so let us take an example we are aware of i.e. cartoons we see animating in the television.

Imagine one day you open your book and suddenly the objects start animating like the cartoons from your favorite bestselling television series.

Similarly, JavaScript does the same thing to the content.

This is just the beginning, it gets more deeper and denser by allowing you to have complete control of your page content with Server Side Scripting.

In this post we have just begun with some simple functional interactivity.

We have some simple functions in JavaScript like:
1.     alert();
2.     document.write();

The alert() function in JavaScript alerts the user by displaying a message with a small window.You also get a small button to input your reaction.Hence the interactivity.

The document.write() function in JavaScript prints the content on the webpage.The document.write can also take multiple line content using the "\n".

The program below showcases the functionality delivered by the alert() and document.write() functions in a simple JavaScript program.


The declaration of variables in the JavaScript is much simpler than compared to other languages. We shall look at the variable -creation and assignment along with the prompt() function in the next post.

1:  <?xml version = "1.0" encoding="utf-8"?>
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
4:  <html xmlns="http://www.w3.org/1999/xhtml">  
5:  <head>  
6:  <title>Simple Javascript</title>  
7:  </head>  
8:  <body>  
9:  <script>  
10:  alert("This website belongs to me");  
11:  alert("Hello I am Javascript, Let us begin a dynamic journey");  
12:  document.write("I can write on the webpage");</script>  
13:  </body>  
14:  </html>  


The JavaScript uses the DOM model to provide such flexibility for the designer pick up specific tags i.e. components on the web page and design them dynamically. In the above simple JavaScript program the DOM is not completely shown as the script tag is used and the JavaScript is written as a part of the HTML document itself.The JavaScript document can be written separately as well and referenced by the link tag as the src attribute in the head section of the HTML document.

The code if written separately using the JavaScript and the HTML document would be as below.

The HTML code firstly would be as follows:
Here the link tag with the src attribute in HTML is demonstrated.
1:  <?xml version = "1.0" encoding="utf-8"?>
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
4:  <html xmlns="http://www.w3.org/1999/xhtml">  
5:  <head>  
6:  <title>Simple Javascript</title>  
7:  </head>  
8:  <body>  
9:  </body>  
10:  </html>  

The above file is to be saved separately as a .html extension file.

The next file is to be written containing the JavaScript function exclusively.One can also notice that this file does not have the script tag, The name of the file is the most important thing in this method along with the saved extension type which is .js type file extension.


In the above link tag one may also notice that this tag does not have a closing tag such as </link>. Everything is enclosed in a single tag from <link ....>.



Post a Comment