5. Introduction to JavaScript

HTML is great for static Web pages; but supports very less interactivity through forms and hyper-links. JavaScript can be used (along with HTML) to develop interactive content for the Web.

What is JavaScript ?

===================

JavaScript is a programming language specifically designed to work with Web browsers. It is designed to be used for developing small programs – called scripts – that can be embedded in HTML Web pages. JavaScript supports event-driven programming and is object-based language.

Object Based means that everything that JavaScript manipulates, it treats as an object – e.g. a window, button etc... and again object has properties – e.g. a window has size, position, status, etc.

Why JavaScript ?

===================

Assume that there is no such thing like JavaScript and consider a simple HTML form (say the form created in the last post). Here, when we enter all the information and press send button, this is what exactly could happen in acual scnerio:

• Browser will send all the information to the server.
• Server will then send an acknowledgement back to the browser 
• And finally send the contents to the receiver's mail address.

This is what happens when the form is filled correctly.
(Server side scripts/code are programs that reside on Web servers, receive info that a user enters in a form, process that info and take appropriate action)

Now consider if the information is filled incorrectly for example user leaves one required field as empty or might type a wrong email address. Now this is what exactly happens:

• Browser will send all the information to the server.
• Server side code receives the data, analyze that and discover the missing or incorrect data.
• The server will send a respose back to browser stating the problem and ask the user to fill the form again.
• Again, user will fill the information and resend the data to the server.

This is quite time consuming as every time sever code helps the user to correct his mistakes. Moreover, if large number of users are using the server, it can really slow down the server processing.

Here comes the use of client side scripting (javaScript is one of the method).
In this technique, one uses the user’s browser to checking the form data. If data is missing or is incorrect, the browser can prompt the user to take corrective action. This way, the form data is sent to the server-side script only after it has been established that the collected data is complete and correct.

Now consider a simple example of javaScript. (Here I am extending the functionality of the same form as in my previous post).
Here user will be prompted an error message if receiver's field is empty as soon as he moves cursor on the 'send' button as shown below:

Below is script for the same:

< HTML>
    < HEAD>
        < TITLE>Send email to me< /TITLE>
    < /HEAD>
    < BODY>
        < H1>Send an Email< /H1>
        < FORM name="sendMail">
            < TABLE>
                < TR>
                    < TD>
                        From : 
                    < /TD>
                    < TD>
                        < INPUT type="text" name="sender" size="50" />
                    < /TD>
                < /TR>
                < TR>
                    < TD>
                        To : 
                    < /TD>
                    < TD>
                        < INPUT type="text" name="receiver" size="50" />
                    < /TD>
                < /TR>
                < TR>
                    < TD>
                        Message:
                    < /TD>
                    < TD>
                        < TEXTAREA name="message" cols="38" rows="6">< /TEXTAREA>
                    < /TD>
                < /TR>
                < TR>
                    < TD>< /TD>
                    < TD align="right">
                        < INPUT type="submit" name="sendEmail"
                        value="Send email to me"
						onMouseOver="if(document.sendMail.receiver.value.length<1)
						window.alert('Empty Field. Please correct')" />
                    < /TD>
                < /TR>
            < /TABLE>
        < /FORM>
    < /BODY>
< /HTML>

Here is additional javaScript code on button that would not allowed to be clicked if the 'To' field is empty.

onMouseOver="if(document.sendMail.sender.value.length<1)

window.alert('Empty Field. Please correct')"

• onMouseOver is a predefined event in javaScript.
• Any HTML page is reffered by 'document'
• sendMail is the name of the form.
• receiver.value.length - receiver is name of 'To' text field. So we are fetching its length. If length is less than 1 (means blank), we have to prompt an error message.
• window.alert: 'window' is a predefined object in javaScript having a function named 'alert'.

Here, instead of writing javaScript inside <INPUT> tag, we can define our own function using <SCRIPT> tag and then use that function whereever required.

4. Interactive Web Pages (Forms in HTML)

Initially, when web was designed, it was not for interactive purpose but just only for sharing documents or pages or just navigating from one document to another. So initial websites were in read-only format.

But there are lots of cases where we want to interact with websites/pages like we want to search or give some comments about the articles.. or place orders on e-commerce sites evolving these days.

Utility of 'Forms' makes a web page interactive.
Without form, a web site or web page is 'read-only' - it just provides information to the user.
Forms enables the user to provide information to the web site and thus we can perform various tasks such as: searching on website, post comments, ask for some information or place orders for goods...

Forms are always placed between <BODY> & </BODY> tags. These are GUI based and may contains items such as text fields, buttons, check boxes, radio buttons and so on.. Form starts with <FORM> tag and ends with </FORM> tag and in between are the details about such various items.

Below figure shows an interactive form:

Below is source code for the same (for proper alignment, all the items of the form are kept under <TABLE> tag):

< HTML>
	< HEAD>
		< TITLE>Send email to me< /TITLE>
	< /HEAD>
	< BODY>
		< H1>Send an Email< /H1>
		< FORM name="sendMail">
			< TABLE>
				< TR>
					< TD>
						From : 
					< /TD>
					< TD>
						< INPUT type="text" name="sender" size="50" />
					< /TD>
				< /TR>
				< TR>
					< TD>
						To : 
					< /TD>
					< TD>
						< INPUT type="text" name="receiver" size="50" />
					< /TD>
				< /TR>
				< TR>
					< TD>
						Message:
					< /TD>
					< TD>
						< TEXTAREA name="message" cols="38" rows="6">< /TEXTAREA>
					< /TD>
				< /TR>
				< TR>
					< TD>< /TD>
					< TD align="right">
						< INPUT type="submit" name="sendEmail"
						value="Send email to me" />
					< /TD>
				< /TR>
			< /TABLE>
		< /FORM>
	< /BODY>
< /HTML>

Exact syntax of form is:

<FORM name="sendEmail" method="post"                   action="sendMailScriptURL">

Elements of the form

</FORM>

• name: Name given to the form.
• method: Forms can be submitted through two alternate methods – GET & POST.
• action: Specifies the URL that is accessed when the form is being submitted.

Some other form related tags:

• <INPUT> tag is only useful if we want to take input in only one line. To take input in number of lines we can use <TEXTAREA> tag.
• we can also use INPUT type="password" for password fields.
• <INPUT type="checkbox" > for checkbox field (default is unchecked).
• <INPUT type="radio" checked> for radio button (default is unchecked).
• <INPUT type="file"> for file upload.
• <input type="reset" value=""> for reset field. This will reset all fields to their default values. This can be used to perform clear functionality on a page.

3. Creating Lists & Tables in HTML Page

In this post, I'll be extending the page created in previous post and add functionalities of lists and tables.

List is a way of presenting data in some order or sequence. 
Similarly, as lists are one dimensional, tables on the other hand are two dimensional and used to represent data in tabular form.

This is how the HTML page will appear after using lists and tables:

Here is script for the same:

< HTML>
	< HEAD>
		< TITLE>My First Web Page< /TITLE>
	< /HEAD>
	
	< BODY>
		< H1>Sushant Sharma< /H1>
		< P>< B>B.TECH (CSE)< /B>< BR>
		< A HREF="http://sushantsharmaa.blogspot.in">My Home Page< /A>< BR>
		This is realted to java realted technologies.< BR>
		< A HREF="mailto:abc@gmail.com">contanct me< /A>< BR>< /P>
		< P>This page is about my personal information.< /P>
		< P>My subjects:< /P>
		< UL>
			< LI>Java< /LI>
			< LI>OOPS< /LI>
			< LI>DBMS< /LI>
		< /UL>
		< P>Yearly Courses:< /P>
		
		< TABLE border="1">
			< TR>
				< TH>Year< /TH>
				< TH>Subject< /TH>
			< /TR>
			< TR>
				< TD>1st< /TD>
				< TD>C++< /TD>
			< /TR>			
			< TR>
				< TD>2nd< /TD>
				< TD>DBMS< /TD>
			< /TR>
			< TR>
				< TD>3rd< /TD>
				< TD>Java< /TD>
			< /TR>						
		< /TABLE>
		
	< /BODY>
	
< /HTML>

Lists
=========

• <UL> tag is used to display unordered lists and by default "bullet" for these lists is "disc" (we can change this to "circle" or "square" with the help of "type" attribute).
• <OL> tag is used to display lists in some specific order and by default order for list is 1,2,3....
• We can change the order of lists using "type" attribute. For example: <OL type="a"> for order a,b,c.... ,<OL type="i"> for order in roman format or <OL start="25"> to display order from any number..
• Also we can create nested lists using <OL> or <UL> tag inside another list tag.

Tables
=========

• Tables are used to represent data in two dimensional format.
• <TABLE> tag: this tag includes set of all rows to be displayed inside the table.
• <TR> tag: inside TR tag, we specify set of cells; cells can either be of type heading or type data.
• <TH> used in only first row to display heading and it shows in bold. <TD> is tag for displaying the actual data.

Here, I have only shown text inside a table however we can display lists, images or even a form or a table inside a table as well. Some attributes of table are:

• border - thickness of table.
• cellpadding: distance between border of cell and content of cell.
• cellspacing: empty spacing between borders of 2 adjacent cells.

There are some attributes which are common in among all these tags: <TABLE>, <TR>, <TH>, <TD>:

• align: center, left, right
• bgcolor: ex: <TD bgcolor="red">
• width ex: <TR width="50%">
• height: <table height=200>

<caption> Tag: This tag can also be used to display some text information about the table. ex:

<TABLE border="1">

<caption>some text</caption>

2. Creating a Simple Web (HTML) Page

We create web pages using HTML (Hyper Text Markup Language) language. HTML is used to create static part of our web pages. Web sites which are dynamic, use many other languages (such as java, php, javaScript....) to become dynamic.
HTML file consists of some of the contents that display on browser and others are some commands in the form of tags. Through these tags, browser comes to know what are the contents and how to display those contents to the user. 

Though there are lots of tags but any web/HTML page must have these six essential tags: <HTML>, <HEAD>, </HEAD>, <BODY>, </BODY> and </HTML>.

tag with '/', indicates that the particular tag is ending here.

Here, I have shown how to create a very basic HTML page using some tags. This is how the page will appear:

To create this page, simply open a notepad file and save it with extension '.html'. Below is code for the page:

< HTML>
 < HEAD>
  < TITLE>My First Web Page< /TITLE>
 < /HEAD>
 
 < BODY>
  < H1>Sushant Sharma< /H1>
  < P>
   < B>B.TECH (CSE)< /B>< BR>
   < A HREF="http://sushantsharmaa.blogspot.in">My Home Page< /A>< BR>
   This is realted to java realted technologies.< BR>
   < A HREF="mailto:abc@gmail.com">contanct me< /A>< BR>
  < /P>
  < P>This page is about my personal information.< /P>
 < /BODY>
 
< /HTML>

• Every html page starts with <HTML> tag and ends with </HTML> tag.
• HTML pages can have two portions; head and body.
• Head portion starts with <HEAD> tag and ends with </HEAD> tag.
• Similarly, body portion starts with <BODY> tag and ends with <BODY> tag.
• Inside head portion, we have used only one tag <TITLE>. Anything between <TITLE> & </TITLE> will appear at upper left corner of web page.
• In body portion, there is <H1> tag which used for heading. There are some other tags as well like <BR> & <P>. <BR> (line break) tag is different from <P> (paragraph) tag as <BR> tag takes us to next line however <P> tag leaves a empty line and then takes us to further next line.
• Another tag we used is <B> tag. anything between these tags will appear in bold in browser. We can also use <STRONG></STRONG> to display text in bold.
• Another important tag is anchor tag (<A>). It has 2 parts, one is label & another is action. Label is what is visible to us and action is what actually happens when we click on that label.
• If in a anchor tag <A>, HREF starts with http, browser will take us to that web page. However, if it starts with 'mailto' followed by mail address, then browser will search if there is any email client available in the computer and then launch that. So first hyperlink takes us to a new web page but second one takes us to a new application through which we can send an email.
• We can also use a property called 'target' inside <A> tag. If we set 'taget=_blank', it will open the link in another window.

1. World Wide Web

World Wide Web is a huge collection of information- logically unified (means if we want to see any information from this collection, there is a very simple way and we can go to any piece of information) and physically distributed (means all this information is not stored at one place but is distributed across the globe in various computers). These computers talk to each other and we access this information through World Wide Web.

When we talk about World Wide Web, we talk about collection of web pages. To access any web page/information, we require browser and url of the page.

Borwser: browser can be thought of as a tool through will we can see that infomation on the web.

URL: every web page on world wide web has a unique address and that address is known as URL of that page. Also from one web page, we can  further move around the web through hyperlinks, buttons or other URLs.

Search Engines: this is one of the most important tool in world wide web.  The Job of search engine is to keep looking and analysing new websites and pages and whatever terms and words they come across, they keep on indexing and listing those terms.

Now, whenever someone is interested in any field/technique or want to access some information, he would go to any search engine and enter some keywords. Search engine will search those keywords in its index or list and check on which web pages those words are appearing. It will prepare a list of all those web pages and return as a result.

Google is the largest search engine in the world.

Also, there remains a confusion that internet and web are the same thing. But this is not so. Web is just a service which runs over the internet. Internet is like a infrastructure and lots of services run over this infrastructure.