Skip to main content

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 ....>.



Comments

Popular posts from this blog

JavaScript Variables-Storage & Declaration

Now we have understood how simple scripting in JavaScript is written. Let us take in some input from the user using the prompt(); function. prompt(); function: The prompt function prompts the user to input data into it by providing a textbox.You also get two buttons to input your reaction.Hence the interactivity. Now the website has asked the input data, now let it process it and act upon it. You have entered the data asked by the webpage prompt, now let us store it in a variable. STORING OF VARIABLES USING prompt(); Storing the data directly upon entering is done using the variable declaration along with the prompt input function separated by a "=" sign. var num = prompt("Enter a number"); DECLARING OF VARIABLES In JavaScript variables are declared using the "var" keyword. Any variable can be created using this keyword, irrespective of the type of data it stores viz.textual,numerical,symbolical,patterns. Sample variable...

CSS Font Weight

In the earlier post, we looked at the font-style attribute. It gives some styles like italic,normal,oblique. But what about the bold. The bold style is defined under the font-weight attribute. The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: <p class="red"> 9: Red 10: </p> 11: <p class="blue"> 12: Blue 13: </p> 14: <p class="green"> 15: Green 16: </p> 17: <style> 18: p.red 19: { 20: color:red; 21: ...

Simple XHTML 1.0 Strict program with 5 tags (html,head,title,body,p)

This program below shows the usage of basic 5 tags/XHTML elements html | head | title | body | p 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title> This is the title of the page</title> 6: </head> 7: <body> 8: <p> 9: Hello Web! 10: </p> 11: </body> 12: </html>