Professional Documents
Culture Documents
uiopasdfghjklzxcvbnmqwertyuiopasd
fghjklzxcvbnmqwertyuiopasdfghjklzx
cvbnmqwertyuiopasdfghjklzxcvbnmq
wertyuiopasdfghjklzxcvbnmqwertyui
Introduction to Web Development With
HTML, CSS and JavaScript
opasdfghjklzxcvbnmqwertyuiopasdfg
Student Handbook
hjklzxcvbnmqwertyuiopasdfghjklzxc
1/4/2013
vbnmqwertyuiopasdfghjklzxcvbnmq
Lenandlar Singh
of Computer Science
Department
University of Guyana
wertyuiopasdfghjklzxcvbnmqwertyui
opasdfghjklzxcvbnmqwertyuiopasdfg
hjklzxcvbnmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjklzxcvbnmq
wertyuiopasdfghjklzxcvbnmqwertyui
opasdfghjklzxcvbnmqwertyuiopasdfg
hjklzxcvbnmrtyuiopasdfghjklzxcvbn
mqwertyuiopasdfghjklzxcvbnmqwert
yuiopasdfghjklzxcvbnmqwertyuiopas
dfghjklzxcvbnmqwertyuiopasdfghjklz
xcvbnmqwertyuiopasdfghjklzxcvbnm
qwertyuiopasdfghjklzxcvbnmqwerty
Contents
Introduction to Web Development ..............................................................................................................................3
HTML and Markup ....................................................................................................................................................3
CSS and Style.............................................................................................................................................................3
JavaScript and Interaction ........................................................................................................................................3
Structure of Web Page .................................................................................................................................................4
HTML.........................................................................................................................................................................4
HTML TAGS ...............................................................................................................................................................4
Skeleton structure of a Web page ................................................................................................................................5
A First Web pages .....................................................................................................................................................5
Adding Content to Web Pages......................................................................................................................................7
Title ...........................................................................................................................................................................7
Text Content .............................................................................................................................................................8
Paragraph .................................................................................................................................................................8
Headers.....................................................................................................................................................................8
Lists ...........................................................................................................................................................................9
Ordered List ..........................................................................................................................................................9
Unordered List ....................................................................................................................................................10
Hyperlinks ...................................................................................................................................................................12
Linking Web Pages..................................................................................................................................................12
Images.........................................................................................................................................................................15
Tables..........................................................................................................................................................................15
Forms ..........................................................................................................................................................................17
Form Elements........................................................................................................................................................17
Web page Layout........................................................................................................................................................18
Cascading Style Sheets (CSS) ......................................................................................................................................22
Separating Content from Presentation ..................................................................................................................22
Types of CSS............................................................................................................................................................22
Inline ...................................................................................................................................................................22
Internal ...............................................................................................................................................................23
External...............................................................................................................................................................25
JavaScript ....................................................................................................................................................................27
Introduction to JavaScript ......................................................................................................................................27
Sample Programs....................................................................................................................................................28
Variables .............................................................................................................................................................28
User Input ...........................................................................................................................................................30
2
Conditional Expressions......................................................................................................................................31
Loops...................................................................................................................................................................32
For Loop..............................................................................................................................................................33
While Loop..........................................................................................................................................................34
Event Handling....................................................................................................................................................36
Form Processing..................................................................................................................................................37
Data Validation ...................................................................................................................................................39
Arrays..................................................................................................................................................................42
At the very basic level, a web page is a document with various kinds of content and capable of being
displayed in a web browser. Content is generally in the form of multimedia text, images, audio, video,
etc. A website is a collection of related web pages, joined (hyperlinked) together to form a common
information space. Every resource on the World Wide Web web page, images, videos and audios etc
can be identified by a URL (Uniform Resource Locator) or simply an address.
In this handbook, we explore web development using three client side technologies HTML, CSS and
JavaScript.
HTML and Markup is considered the most fundamental of all the web development technologies. It
provides the basic mechanism for setting up web pages. In a nutshell, it provides elements that allow us to
add content to our web page document. As is expected, different elements allow for the addition of
different types of multimedia content.
CSS and Style is used to add the styling aspects to our web pages. A range of styles are available. Even
though HTML does provide some styling elements, it is advisable to use CSS for styling elements and let
HTML provide the content.
JavaScript and Interaction is a scripting (programming) language that provides web developers
with the capacity to create interactive web pages. By default, web pages created with HTML alone is
almost entirely static. This in general means that content on a web page remain as is when the web page is
loaded into a web browser. No interaction with the user of the content is possible. While this is useful,
there are times when you need to interact with your user. JavaScript allows for many forms of interactions
to be programmed into your web pages.
3
Structure of Web Page
A web page is a document that is interpreted and presented by your web browser. In order for a web page
to be effectively rendered, the web browser will have to instructed correctly. A web page is generally
divided into two sections a head section and a body section as shown in FIGURE 02 below:
HEAD contains
HEAD important elements e.g.
title of web page
BODY
BODY contains content
displayed in main
browser window
To implement the above structure, we use HTML elements. See FIGURE 02 below.
HTML
HTML or Hypertext Markup Language provides the instructions used to markup or create web pages. In
HTML, instructions for marking up content are represented by tags. These tags are predefined meaning
that you cannot create your own HTML tags. To effectively use these tags, a basic understanding of their
structure and usage is important.
HTML TAGS
HTML provides a set of markup tags to describe a web page. These tags are usually referred to as HTML
tags and your web page is sometimes referred to as an HTML document. HTML tags are keywords
enclosed by angle brackets e.g. <html>. These tags normally come in pairs an opening tag (start tag)
and a closing tag (end tag). However, not all tags come in pairs. Where there is a corresponding end tag,
the / (forward slash) is used before the text name of the tag to signal the end of the tag, for e.g. </html>.
Where theres only one tag an opening tag, the forward slash is used at the end of the opening tag e.g.
<hr />. So essentially, a web page is a series of HTML tags and the content these tags markup. To
effectively markup or create your web pages, it is important to use the appropriate tags and follow basic
markup guidelines for e.g. every tag should be closed.
4
Skeleton structure of a Web page
Figure 01 provided a conceptual view of a web page (HTML document). To implement this structure, we
have to use the corresponding HTML tags. Figure 02 below demonstrates this structure.
<html>
HEAD
<head>
</head>
BODY <body>
</body>
</html>
Figure 02 shows the basic structure of any web page on the left and the corresponding HTML tags to
implement this structure. THREE pairs of tags are required to set up this structure. The <html> </html>
pair indicates the start and end of a web page. Every other element comes within these tags. The <head>
</head> indicates the head section of the web page and of course the <body> </body> represents the
main content area.
To create our web pages, we need tools. The most basic tool that is needed to write your html code is a
text editor for e.g. Notepad on the Windows Operating System. More sophisticated html editors are
available for e.g. Notepad++, Dreamweaver, etc
Figure 03 below is a simple web page written using Notepad. It is important to save your web pages
correctly. HTML pages are saved using a name and the .html extension. In figure 03, the web page is
called skeleton.html
5
FIGURE 03 Skeleton.html written in Notepad
This page once saved correctly, can now be viewed in your web browser. To do so, open your web
browser and navigate to the web page and open it. Alternatively, locate the web page and double click on
it. It will open in your web browser.
This particular web page will not display any content in your web browser since we have not added any
content. See figure 04 below.
We have provided a completed web page but only the skeleton structure. We will start to add some
content below.
So in summary, to create a web page, we need to learn HTML, use a tool to help us enter the code into the
computer e.g. Notepad, and finally use a web browser to display the web page. Changes to the web page
are done by opening the web page code in your editor. To see the effects of any changes, save all changes
and refresh your browser.
6
Adding Content to Web Pages
Now that we have our skeleton web page set up, we can start marking up content. HTML allows us to
mark up almost any conceivable type of multimedia element. To add any content, we need to use the most
appropriate tag and decide exactly where we want to add the content in our page. By default, content is
displayed on your webpage in the order of the HTML code and from left to right, top-down.
We will develop web pages that include the following HTML element:
Title
Text Content
o Headers
o Paragraphs
Lists
o Ordered
o Unordered
o
Hyperlinks
Images
Tables
Forms
Title
Every web page should have a title. The title of a web page is displayed in the browser title bar at the top
left. The title is used to provide a brief description of the web page. Appropriate names are recommended.
To insert a title, we used the <title> </title> enclosed in the head section of our web page. Figure 05
below is the HTML code with a title included. We will save this page in figure 05 as index.html (index is
a default name used for the homepage of most websites).
<html>
<head>
</head>
Actual Content
of title
<body>
</body>
</html>
7
Save this file as index.html and open in your browser. If done correctly, your output should look like
FIGURE 06 below
Webpage Title
Text Content
A number of HTML elements allow us to add text-based content to our web pages. The most commonly
used text elements are:
Paragraph
Paragraphs are inserted using the <p> </p> tag. A line break is inserted by default after every paragraph
Headers
Headers are bold pieces of text and are inserted using <h1> </h1> .<h6> </h6>, each of h1 to h6
represents a different size starting with h1 being largest to h6 being smallest
Paragraphs and Headers are added to the body section of the web page. Figure 07 below demonstrates the
use of the paragraph and header tags. The content on this page is taken from your course outline of CSI
1201.
8
<html>
<head>
</head>
<body>
<p>
It is also intended to teach
students to build web pages
and to write simple
computer programs.
</p>
</body>
</html>
Lists
Lists are used to organize content in point forms. HTML allows for the creation of an ordered list <ol>
</ol> and an unordered list <ul> </ul>. We can also have a hybrid list an ordered and unordered
combined. Ordered lists are used when it is important to identify the order in which items should be
presented. Unordered lists are used when order is not very important. Lists are made of one or more items
<li> </li>.
Ordered List
<ol>
<li> Arthur Chung</li>
<li> LFS Burnham </li>
<li> HD Hoyte</li>
</ol>
9
Unordered List
<ul>
<li> Berbice</li>
<li> Essequibo</li>
<li> Demerara</li>
</ul>
10
<html>
<head>
</head>
<body>
</p>
It is also intended to teach
students to build web pages
and to write simple
computer programs.
</p>
<h3> Objectives of CSI 121
</h3>
<ul>
<li>Use Microsoft Office
Software to create
documents, spreadsheets,
PowerPoint Presentations
and databases </li>
<li> Design a web page
using HTML</li>
<li> Write interactive
webpages using
JavaScript</li>
</ul>
<h3> Lecturers</h3>
<p> CSI 121 will be taught
by the following
lecturers</p>
<ol>
<li> P DeFreitas</li>
<li> A Liddell </li>
<li> F DeJesus</li>
<li> L Singh </li>
</ol>
</body>
FIGURE 08 Lists
</html>
11
Hyperlinks
Hyperlinks or simply links glue web pages together to form the web. Technically, links can be created
from any source to any destination providing a destination address is known.
To create links we use the anchor <a> </a> tag. The general format is as follows:
href - is an attribute/property of the anchor tag. The attributes of a tag allows a tag to
become functional in some cases for e.g. the <a> tag. In other cases, attribute extend the
default functionality of a tag.
Clickable object this appears as the visible/clickable hotspot that allows the user
access to the destination. Plain text and images are typically used clickable objects.
Lets add a link at the end of index.html in figure 08 above to a second page called content.html.
Assuming that both web pages are in the same location, our link from index.html to content.html is as
follows:
12
<html>
<head>
</head>
<body>
</p>
It is also intended to teach
students to build web pages
and to write simple
computer programs.
</p>
<h3> Objectives of CSI 121
</h3>
<ul>
<li>Use Microsoft Office
Software to create
documents, spreadsheets,
PowerPoint Presentations
and databases </li>
<li> Design a web page
using HTML</li>
<li> Write interactive
webpages using
JavaScript</li>
</ul>
<h3> Lecturers</h3>
<p> CSI 121 will be taught
by the following
lecturers</p>
<ol>
<li> P DeFreitas</li>
<li> A Liddell </li>
<li> F DeJesus</li>
<li> L Singh </li>
</ol>
</body>
<a href=content.html>
Course Content</a> FIGURE 09 Link to Content.html from index.html
</html>
The link Course Content when clicked will open content.html. Figure 10 below shows content.html
13
<html>
<head>
<title> Course Contents </title>
</head>
<body>
<h1> Contents</h1>
<ul>
<ul>
<li><a href="resources.html">Resources
</a></li>
</ul>
</body>
</html>
FIGURE 10 content.html
Content.html uses nested lists to display the contents of the two main topics. Nested lists are lists within
another list. The two links at the end are to index.html (Home) and a third page resources.html
(Resources). Figure 11 below show resources.html
14
<html>
<head>
<title> Other Resources</title>
</head>
<body>
<h1> Resources</h1>
<ol>
<li><a href="www.w3schools.com">
W3Schools </a> </li>
<li><a href="www.tizag.com"> Tizag
</a></li>
<li><a href="www.w3c.org"> W3C
</a></li>
</ol>
<ul>
<li><a href="index.html"> Home
</a></li>
<li><a href="content.html">Content
</a></li>
</ul>
</body>
FIGURE 11 resource.html
</html>
Resource.html uses 2 lists. The items for each list are links and not plain text. The ordered list contains
three links to external resources (www.w3schools.com, www.tizag.com, and www.w3c.org ). The
unordered list are internal links to index.html and content.html.
Images
The <img /> tag is used to insert images into a webpage. A number of attributes of the <img> tag makes
it possible to insert your images. Some of the most commonly used attributes are shown below in BOLD
<img src="image file" alt="text if image unavailable" width="width for image" height="height for
image" /> - image file is the image to be inserted.
For example
Tables
Tables provide web developers with a tool that allows content to be presented in a tabular structure. A
table in html is structured according to the number of rows and the number of cells in each row. In order
to create a table, a number of tags are necessary. The most important tags are:
<table border=1>
<tr>
<th> Firstname</th>
<th>Lastname </th>
<th>Reg # </th>
<th>Major </th>
</tr>
<tr>
<td> Len</td>
<td>Singh </td>
<td>00/000/0000</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Brian</td>
<td>Lara</td>
<td>10/100/1000</td>
<td>Engineering </td>
</tr>
<tr>
<td> Shiv</td>
<td>Chanderpaul </td>
<td>30/300/3000 </td>
<td>Environmental Science</td> FIGURE 12 - Tables
</tr>
</table>
The table in Figure 12 above contains only text elements. Any multimedia content can be placed in a
table.
16
<table border=1>
<tr>
<tr>
<td> <img src ="img2.jpg" width=50 height=50 /></td>
</tr>
FIGURE 13 Images in a Table
</table>
Forms
Forms are used to collect data from users. HTML provides form elements to collect various types of data.
The <form> </form> is used to create a form together with the various elements. The general structure of
a form is as follows:
<form name=somename>
</form>
Form Elements
17
<form name="login">
<fieldset>
<legend>Login Details:</legend>
</fieldset>
FIGURE 14 Login Form
</form>
The Login Form in Figure 14 above uses three different input type text, password and button. Text
allows the user to enter plain text data, password allows for a password to be entered. The characters of
this field are masked out. The button input type allows for a clickable button to be inserted.
There are other input types available. For example, the radio allows the user to create radio buttons and
the checkbox input type allows the user to create checkboxes.
The structure and layout of a web page can be dictated by the web designer in a number of ways. One
approach to layout a web page is to use a table to organize the entire structure of a web page. A table
allows a web designer to place content exactly where required.
Figure 15 and Figure 16 below are examples of two typical layout structure used by many website.
18
FIGURE 15 A 3-row by 2-column Tabular Layout
19
<html>
<body>
</tr>
<tr valign="top">
<td style="background-color:#00FF00; width:50px; text-align:top;">
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>
</tr>
<tr>
</table>
</body>
</html>
Figure 15 uses three rows. In the first row there is only 1 cell. In the second row, there are two cells. In
order to cater for this, row one was set up to span 2 cells (colspan=2). Row three is similar to row 1.
20
The sample source code to that implements Figure 16 is presented below:
<html>
<body>
<table width="500px">
<tr>
<td colspan="3" style="background-color:#0FFF00;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>
</tr>
<tr>
</table>
</body>
</html>
Figure 16 also uses three rows. In the first row there is only 1 cell. In the second row, there are three cells.
In order to cater for this, row one was set up to span 3 cells (colspan=3). Row three is similar to row 1.
The width and height attributes of the table tag are used to allocate the dimensions of your table. Width
and height values can be specified using various units, e.g. pixels (px), percentage (%), etc.
With these tabular layouts, the web designer can now place content in any of the available cells. For
example, the first row can be used to place a banner image, while navigation menus can be set up using
the cells in row 2, and content can be displayed in the main content area.
21
Various style elements are used to add presentation to the layout. These will be covered in the CSS
section below.
CSS allows style elements to be separate from the html elements in general. This separation of content
(html) from presentation (css) makes it easier to manage your web design process. Making changes to
your html or css is much easier when the two sets of code are separated out. Further, by separating your
code, it becomes much easier to reuse css for multiple pages. Reuse saves time and effort. Also, reuse
means that the developer can apply the same style across all web page elements, leading to consistent
look and feel for an entire website.
Types of CSS
There are three types of styles that can be added to a web page, and are as follows:
Inline
Internal
External
Inline styles are used to apply presentation elements to individual html tags. Internal styles are used to
apply presentation aspects to an entire web page. Inline and external css elements are saved as part of
your .html document. External styles are written entirely separate from a web page and can be applied to
any web page. External style sheets are saved a different file (.css).
Inline
Inline styles are applied to individual html elements through the use of the style attribute. Figure 15 and
Figure 16 above use inline styles to apply presentation aspects to the respective web pages. The general
format for applying inline style is as follows:
CSSproperty is the actual style that you wish to apply to your htmlTag and value is the corresponding
value to be applied to that particular CSSproperty.
There are many CSSproperty that can be set for your htmlTag. It is now a matter of learning what those
elements are and what values can be set for each.
22
Examples of Inline Styles
In Figure 15 and Figure 16, we used the following inline style for the <td> elements of:
style="background-color:#FFFF00
This is used to set the background color of the particular html tag where the style is applied. The css
property is background-color and the value is #FFFF00 (a color, using the RGB color scheme, where
the first 2 values provide the amount of Red, the next two values, the amount of Green, and the last two
the amount of Blue).
Width, height and text-align are css properties also used in figure 15 and figure 16. Look at the complete
example below:
In this example, we have set four css properties with their respective values for the same html element.
One or more styles can be set for an individual element. The property:value pairs as they are sometimes
called, are separate from each other using a semi-colon (;)
There are many more properties available. The task of the web designer is to seek out the appropriate
styles required to achieve the required presentation.
NOTE: Inline styles are best used when it is necessary to apply a particular style to an html element to
achieve a unique look and feel. This approach to applying style does NOT separate content from
presentation as you have noticed and therefore should be used only when absolutely necessary. If not used
properly, content and presentation becomes mixed up and management of your web page more difficult.
Internal
Internal style sheets are place in the <head> </head> section of your web page. An internal style is a set
of style rules grouped together. These rules are place within the <style> </style> tag. The general format
is as follows:
<style type=text/css>
</style>
23
The type=text/css is referred to as a MIME type and its main purpose is to indicate to the browser that
this is a style sheet.
Style Rules
Style rules specify the CSS style property to be applied together with the given value (similar to the
property:value pairs with inline). However, a style rule also includes a selector whose purpose is to
match the element the style is to be applied to.
Selector {property:value;}
Typically, selector matches one-on-one with html elements. However, user-defined selectors are also
possible. In addition, multiple styles can be set for one selector/html element and multiple selectors/html
elements can use the same set of styles.
In the example below, the selectors used correspond to their respective html elements by name. For
example:
p - <p> </p>
NOTE: When writing your style rules, do NOT include the selectors in < >
The following a complete example of an internal style sheet that is applied to index.html
<head>
<title>Lens homepage </title>
<style type="text/css">
p{
color:purple;
background-color:gray;
font-family:"Times New Roman";
}
h2, h3 {
text-align:center;
background-color:"green";
color:red;
}
h3 {
font-family:"Arial";
}
24
h1 {
text-align:center;
color:blue;
background-color:#FF0000;
}
ul {
list-style-type: circle; /* change default bullet to circle*/
}
ol{
list-style-type: upper-roman; /* change default numbering to upper case roman numerals */
}
</style>
</head>
When index.html loads, the browser will apply all inline styles as priority. If there is an internal style
sheet such as is above, the browser will apply only those styles that are not already set as inline. In other
words, inline styles have a higher priority than internal styles.
If the other pages have similar html elements, then this style sheet can be copied into the <head> </head>
section of those pages and as such is reused immediately. If there are additional elements, the style sheet
can be extended to include additions or it can also be edited if different styles are needed.
External
External style sheet rules are written in exactly the same way as internal style sheets. However, the
<style> </style> tag is not necessary. Essentially, an external style sheet is a text file of css style rules and
is saved with a .css extension. For example, we can take the internal style sheet applied to index.html
above and save it as an external style sheet as follows:
p{
color:purple;
background-color:gray;
font-family:"Times New Roman";
}
h2, h3 {
text-align:center;
background-color:"green";
color:red;
}
h3 {
font-family:"Arial";
}
h1 {
25
text-align:center;
color:blue;
background-color:#FF0000;
}
ul {
list-style-type: circle; /* change default bullet to circle*/
}
ol{
list-style-type: upper-roman; /* change default numbering to upper case roman numerals */
}
Notice there is no <style> </style>. We can write our external style sheets using Notepad. However, be
sure to save you file with the correct (.css) extension. We can save this style sheet as csi121.css .
To use an external stylesheet, we have to create a connection from within the web page where we would
like to apply that stylesheet. We do this in the <head> </head> section of our webpage using the <link>
tag, as follows:
<head>
<title> Page Title...</title>
<link rel="stylesheet" type="text/css" href="csi121.css" />
</head>
The href attribute takes a link to the external stylesheet. This stylesheet can be reused across all pages or
only on those pages where it is needed.
Cascading Order
As noted above, inline styles have the highest priority. This means that where there might an inline,
internal and external style set for the same element e.g. a paragraph in a page, the inline style will be
applied by the browser. External style sheets have the lowest priority.
It is normal to have all three types of styles in a single page for each type serves a particular purpose with
specific advantages. The challenge for the web designer is to organize styles for maximum reuse, while at
the same time apply the most efficient use of style elements.
26
JavaScript
Introduction to JavaScript
JavaScript is a scripting language used on the World Wide Web (WWW). It is used on web sites to add
functionality to web pages that are not otherwise possible with HTML and CSS. Specifically, JavaScript
can be used for a number of things include (i) validating data entry via html forms, (2) interact and
change web page elements and so on. JavaScript is also used in other applications.
JavaScript is an interpreted programming language that executes mainly in the web browser (client-side
JavaScript). JavaScript can also be used on the server side and in other applications.
27
Sample Programs
Variables
<html>
<head>
<script type="text/javascript">
//Variable Declaration
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
t_gp = 72;
t_cr = 24;
</script>
</body>
</html>
28
29
User Input
2. Calculate GPA based on user-inputted total grade point and total credit
<html>
<head>
<script type="text/javascript">
//variable declaration
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
t_gp = window.prompt("please enter total grade points", ""); // user input of total
gp
</script>
</body>
</html>
30
Conditional Expressions
<html>
<head>
<script type="text/javascript">
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
// if and else block --- only one of these will ever be true, execution stops after
if (gpa >=3.4)
document.write("you are a distinction student --->");
else
if (gpa >=2.7)
document.write("you are a <b>credit</b> student--->")
else
if (gpa >= 2.0)
document.write("you are a pass student--->");
else
document.write("you are not ready to graduate--->");
</script>
</body>
</html>
31
Loops
<html>
<head>
<script type="text/javascript">
var t_gp;
car t_cr;
var gpa;
var i;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
//loop below executes 5 times
for(i = 0; i< 5; i++){
32
For Loop
5. For loop used to repeat a block of code a number of times. This example repeats a number of
times as decided by the user
<html>
<head>
<script type="text/javascript">
var t_gp;
car t_cr;
var gpa;
var numCrs;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
33
While Loop
6. The while loop similar to the for loop but could be more flexible. User input for example can
determine the end.
<html>
<head>
<script type="text/javascript">
var t_gp;
car t_cr;
var gpa;
var i;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
i = 0; // start position of loop
while (i< 5){
document.writeln("gpa is --->" + gpa + "<br />");
document.write("<br />");
34
7. A more flexible version of the while loop similar to 2nd for loop above.
<html>
<head>
<script type="text/javascript">
var t_gp;
car t_cr;
var gpa;
var numCrs;
var i;
</script>
</head>
<body>
<h1> gpa calculator </h1>
<script type="text/javascript">
35
Event Handling
8. Event Handling and Form Processing: Events can be thought of as actions generated as a result
of some interaction with an element and some other entity. For example a user clicking on a
button generates an event.; the onClick event. An event handler is a piece a code that can be set
up execute when an event is generated. Not all events will have an attached event handler.
<html>
<head><title>My Page</title></head>
<body>
<form>
<input type="button" Value="Press" onClick="window.alert('Hello');">
</form>
</body>
</html>
<html>
<head><title>My Page</title>
</head>
<body>
document.alertform.yourname.value);">
</form>
</body>
</html>
36
Form Processing
9. Form Processing: Forms are used to collect data. Event handlers can be to particular form
elements to process data supplied by user.
<html>
<head>
<title>
</title>
<script type=text/javascript>
function displayValues(form){
var firstname=document.f.firstname.value;
var lastname=document.f.lastname.value;
var age=document.f.age.value;
alert('my name is ' +firstname + ' ' +lastname + ' and my age is ' +age );
document.write(firstname + "<br />" + lastname + "<br />" + age);
}
</script>
</head>
<body>
</form>
</body>
</html>
37
10. A simple calculator.
<html>
<head>
<title>
</title>
<script type=text/javascript>
//form as argument is a property of the form object, passes a copy of the form to be processed
function doAddition(form){
}
</script>
</head>
<body>
<form name="f" id="f">
<label> First value: </label>
<input type="text" name="val1" id="f1" />
<br />
38
Data Validation
11. Data Validation - Data validation is important. Incorrect data leads to incorrect processing and
output. JavaScript can be used to perform validation and checks on data using validation criteria.
39
<html>
<head><title>Form Validation</title>
<script type="text/javascript">
<!--
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
</head>
//-->
</script>
</head>
return( true );
40
}
//-->
<body>
</body>
</html>
41
Arrays
12. Array an array is a data structure that can be used to store more than one piece of data. By
allowing multiple pieces of data to be stored in one common storage structure, data processing and
management is made easier. For example, we can group related data together and then use a loop
to traverse the entire array when processing the data elements.
<html>
<head>
</head>
<body>
<h1> JavaScript Arrays </h1>
<script type="text/javascript">
<!--
var myArray = new Array();
var age = new Array(1,2,3,4,5,6);
myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
42