Академический Документы
Профессиональный Документы
Культура Документы
CDWP2203
Introduction to
Web Programming
Copyright
©
Open
University
Malaysia
(OUM)
Table of Contents
Course Guide ix - xiii
Topic 7 Javascripts 89
7.1 Introduction to Javascript 89
7.2 Using Javascript in HTML Documents 90
7.3 Variables 91
7.4 Operations 92
7.4.1 Arithmetic 92
7.4.2 Accumulation 93
7.4.3 Relationships 93
7.4.4 Logical 94
7.5 Functions 94
7.6 Selection Control Structures 97
7.7 Looping Control Structures 99
Summary 101
Key Terms 101
INTRODUCTION
CDWP2203 Introduction to Web Programming is one of the courses offered by
Faculty of Science and Technology at Open University Malaysia (OUM). This
course is worth 3 credit hours and should be covered over 8 to 15 weeks.
COURSE AUDIENCE
This course is offered to all students taking the Diploma in Information
Technology. All Information Technology students are required to attend this
course and master the subject well because todayÊs technology era is an era of
visual and web based computing. Students from other majors will also find this
course useful as web applications are widely used in numerous activities today.
As an open and distance learner, you should be able to learn independently and
optimise the learning modes and environment available to you. Before you begin
this course, please confirm the course material, the course requirements and how
the course is conducted.
STUDY SCHEDULE
It is a standard OUM practice that learners accumulate 40 study hours for every
credit hour. As such, for a three-credit hour course, you are expected to spend 120
study hours. Table 1 gives an estimation of how the 120 study hours could be
accumulated.
COURSE OUTCOMES
By the end of this course, learners should be able to:
COURSE SYNOPSIS
This course is divided into 10 topics. The synopsis for each topic is presented
below:
Topic 1 will expose you to basic static web development document which can be
linked to other static site through hypertext link. (HTML)
Topic 3 introduces you to the basic elements of design, such as colours, graphics
and fonts. (Website architecture)
Topic 4 discovers about tables and how to create tables to insert into your
website.
Topic 5 explores forms, its elements and the method of retrieving values sent by
visitors.
Topic 6 explains some important concepts like the client-server concept, client-
side programming and server-side programming and the use of events.
Topic 9 learns basic ASP script programming at the same time will explore
characteristics and syntax for some primary objects in ASP.
Learning Outcomes: This section refers to what you should achieve after you
have completely covered a topic. As you go through each topic, you should
frequently refer to these learning outcomes. By doing this, you can continuously
gauge your understanding of the topic.
Summary: You will find this component at the end of each topic. This component
helps you to recap the whole topic. By going through the summary, you should
be able to gauge your knowledge retention level. Should you find points in the
summary that you do not fully understand, it would be a good idea for you to
revisit the details in the module.
Key Terms: This component can be found at the end of each topic. You should go
through this component to remind yourself of important terms or jargon used
throughout the module. Should you find terms here that you are not able to
explain, you should look for the terms in the module.
PRIOR KNOWLEDGE
Basic knowledge of the subject matter is not required for students who study this
module. However, programming knowledge will be an added advantage.
ASSESSMENT METHOD
Please refer to myINSPIRE.
REFERENCES
Deitel, P. J., & Deitel, H. M. (2007). Internet & world wide web: How to program.
New Jersey: Prentice Hall.
Copyright
©
Open
University
Malaysia
(OUM)
COURSE GUIDE xiii
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Develop six HTML documents based on the example given; and
2. Use at least seven tags in HTML documents.
INTRODUCTION
This topic will introduce you to the basic knowledge of Hypertext Markup
Language or more popularly known as HTML. To achieve this objective, you will
learn some important terminologies used in HTML including Head, Paragraph
and List.
To create a hypertext document (web page) as the one above, you may:
(a) Use the What You See Is What You Get (WYSIWYG) tool; and
(b) Use Markup Language.
Web servers such as Internet Explorer will act as an engine that will interpret
HTML and display it in the correct form. The original HTML version was
developed by Tim Berners-Lee and he was one of the creators of the World
Wide Web (WWW). Although HTML has solid fundamentals, the standards
for new versions are still growing. You may find that each web server on the
market is able to support different HTML variations.
Note that the same hypertext documents will not be displayed in similar
forms if accessed through different web browsers. This is because each web
browser has different configurations for its components such as font type
size. The advantages of these differences are:
However, the disadvantage is users are not able to preview their hypertext
document design in other types of web browsers or on other platforms.
SELF-CHECK 1.1
What are the advantages and the disadvantages of using the WYSIWYG
and Markup Language approach in developing a hypertext document?
Some examples of tags used in this Topic are as per Table 1.1 below.
Among the important issues that you must remember are that tags must be
placed in brackets (< >). All document contents must be in brackets with two tags
i.e the opening tag and the closing tag. You can insert specific properties that
have been specified in the tag, only for the opening tag. For example, the
properties for tag H1 is ALIGN.
Try the following Activity 1.1. This activity requires you to use the computer.
Follow the steps as instructed.
ACTIVITY 1.1
The new file that you have created in Activity 1.1 is an example of a HTML file.
HTML files can also use .html extensions, other than .htm extensions. You must
make sure that there are no syntax or logical mistakes in completed HTML
documents. This can be done by displaying it to the web browser. Activity 1.2
below is the continuation from Activity 1.1.
ACTIVITY 1.2
Display HTML file on Web Browser
(a) Run the web browser that is on your system (example: Internet
Explorer).
(b) Choose File menu >Open.
(c) Locate file activity1.htm that you have saved in Activity 1.1. The file
is possibly located at the folder:\Topic1\activity1.htm.
(d) Click the OK button. Results will be displayed on your web browser
screen.
Open the activity1.htm file in the text editor. Modify the code so
that the words „Ahmad Yusuf‰ appear in two lines. Press Spacebar
to shift the word „Yusuf‰. Do the following editing:
<H2>Ahmad
Yusuf</H2>
Save and click on the refresh button on your web browser. What are
the changes that you can see? What is your conclusion?
Activity 1.3 will test your understanding. Answer the question below.
ACTIVITY 1.3
1.3.1 Headings
Heading is normally text with bigger fonts than the rest of the text. HTML
contains six stages of headings from 1 to 6. You can use heading tags to increase
the size of text for example to create titles. The syntax is:
<Hx>Content Document</Hx>
The characteristics of H1 tag is ALIGN. ALIGN= „Center‰ means that the web
browser will display the text in the centre of the screen. You are required to
complete Activity 1.4. This activity will sharpen your skills in constructing HTML
documents.
ACTIVITY 1.4
1.3.2 Paragraphs
Texts arranged in paragraphs do not need a particular format. However, you can
use the <P> tag if you need one empty line before the next paragraph. The <BR>
tag or break can also be used to replace the return key to create an empty line
before and after a paragraph. Activity 1.5 will help you to differentiate the two
tags.
ACTIVITY 1.5
1.3.3 List
In HTML, there are two types of tags that you can use to generate lists ă ordered
list and unordered list. Ordered list, <OL> is a list that follows a number
sequence. The number begins with 1 and increases each time a new item is
inserted, for example:
1. item A
2. item B
3. item C
Meanwhile, an unordered list <UL> is a list that does not follow a particular
sequence. At the beginning of each item, a bulleted indentation symbol is
inserted:
item A
item B
item C
Each item for the two lists must be preceded by an item list tag, which is <LI>
with no closing tag. Try Activity 1.7 below which will add the two lists in the
resume.
ACTIVITY 1.6
The aim of Activity 1.6 is to test your theoretical knowledge. Make sure you
answer the question below.
ACTIVITY 1.7
Among the tags that you can use to change the physical characteristic of the text
are as stated in Table 1.2.
Tag Explanation
<B> Indicates text to be in bold.
<I> Indicates text to be slanted.
<BIG> Indicates text of a larger font size.
<SMALL> Indicates text of a smaller font size.
<SUB> Indicates text to be displayed as subscript.
<SUP> Indicates text to be displayed as superscript.
Once a tag has been opened, it must be closed to indicate the end of the format
modification of the text. You can combine several types of tags for the same text
format. You will modify the text format in Activity 1.8. Try using <B> tags on
your text editor and share the outcome of the modification.
ACTIVITY 1.8
If you have done Activity 1.8, continue to answer Activity 1.9 to test your
understanding.
ACTIVITY 1.9
The following tag example will draw the line in the centre of the display. The line
is 1 unit in thickness, with 50% length of the display width.
HTML is capable of displaying graphics. This is one of the factors that makes
HTML popular. There are two types of graphic format that you can use in HTML:
Graphics Interchange Format (GIF) and Joint Photographic Experts Group
(JPEG). The benefit of this format is the file size is smaller than other file formats
such as BMP and PCX. The tag syntax for graphics is as below:
<IMG SRC=”name_file_graphic”>
If you place graphic files in different folders from the folder that contains HTML
documents, make sure that you enter the folder name as shown below:
<IMG SRC=”name_folder/name_file_graphic”>
Try Activity 1.10 to add more lines and graphics in the resume.
ACTIVITY 1.10
However, the website is not complete as it lacks document links from the
resume to other websites.
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Create two elements to link the HTML document;
2. Create two links between two different HTML documents;
3. Differentiate between absolute path and relative path; and
4. Create one link to other web objects.
INTRODUCTION
Information management is important in website development. Websites that are
properly managed will give a positive image to the company or individuals who
are responsible for developing the website. Websites that are not properly
managed will be difficult to navigate, and in the process, will disappoint visitors
to the website.
In Topic 1, you have learnt the structure of a website. With proper structure and
links, visitors to your website will find it easier to obtain information and
navigate the website. In this Topic, you will be taught several structures and
methods of creating links between HTML documents.
you can use links to draw a visitorÊs attention to an important and interesting
concepts.
In the resume that you have been designing, the windows display is limited as it
depends on the size of your web browser. This means information such as
Objective, Education and Position cannot fit into one page. Therefore, a visitor
will have to scroll down to find the required information. To overcome this
problem, you can create a link at the beginning of the document that allows the
visitor to directly access other sections of the resume.
To create links in the same document, you need an object known as anchor.
Anchor is the <A> tag which becomes the marker or destination that will be
accessed using links.
Anchor does not need to be in text form. You can use other objects such as
graphics as markers.
Once you have created an anchor, you will need to create a suitable link for it.
Links using tags are the same, which is <A> or anchor with different properties.
Syntax for the links is as follows:
<A HREF=”#Name_Anchor”>Text_Link</A>
Hence, the syntax for the links for the Education anchor in your resume is as
follows:
<A HREF=”#Edu”>Education</A>
HREF refers to the location of the destination object. In the example above, the
destination object is the anchor represented by #Edu.
ACTIVITY 2.1
Creating Links
(a) Insert a thumb drive into your computer.
(b) Create a folder, name it Topic 2 in your thumb drive.
(c) Open file named activity6.htm in the Topic1 folder and save it as
activity7.htm in the Topic 2 folder.
(d) Identify the H2 heading tag for the Objectives section. The HTML
code is:
<H2>Objective</H2>
(e) Insert an anchor tag at the side of the head tag so the HTML code
will become as follows:
<H2><A NAME=”Obj”>Objective</A></H2>
(f) Identify other head tags for the following sections: Biodata, Education,
Position and Additional Information. Add anchor tags as shown in
step 5. The HTML code for the head tags with the added anchors are:
<H2><A NAME= “Bio”>Biodata</A></H2>
<H2><A NAME= “Edu”>Education</A></H2>
<H2><A NAME=”pos”>Position</A></H2>
<H2><A NAME= “Add_Info”>Additional Information </A></H2>
(g) To create links, you need to identify the image tag first which is:
“<P ALIGN=”Center”><IMG SRC=”Ahmad Yusuf.gif”> </P>”.
(h) Create a new line at the bottom.
(i) Add the following programme code:
<P ALIGN=”Center”>
<A HREF=”#Obj”>Objective</A> ·
<A HREF=”#Bio”>Biodata</A> ·
<A HREF=”#Edu”>Education</A> ·
<A HREF=”#Pos”>Position</A> ·
<A HREF=”#Add_Info”>Additional Information</A>
(j) Save the file, open the file with your web browser.
(k) Test each link to make sure the links function properly. If the links do
not function, make sure that both anchors at NAME and HREF are the
same. The values are case-sensitive.
ACTIVITY 2.2
ACTIVITY 2.3
Have you heard of hyperlinks or links? What are the differences of these
two terms and what is the connection with links?
Links created are not only to link objects in the same document. Links can also be
used to open other documents in the same folder or different folders. To be able
to do this, you may use the same tag which is <A>. The syntax is:
Document_HTML refers to the HTML file name that you would like to link to;
such as resume.htm and reference.htm. Similar to the previous activities, the
Text_Link that you create will be underlined.
In the resume example, you will create a link to reference.htm document. Before
this, it would have been necessary for you to download reference.htm and save it
in the Topic2 folder, in your thumb drive.
ACTIVITY 2.4
So far, you have not created links to files in other folders. To open a file in
another folder, you will need to specify the fileÊs location. The location is known
as path. There are two types of paths in HTML:
Relative path refers to the location of a relative file to a document that you
have opened. This path does not begin with the symbol „/‰. Instead, the
symbol „..‰ is used to refer to a file or folder that is located one level above
the document.
Table 2.2 will explain the usages of relative paths based on Figure 2.2.
ACTIVITY 2.5
To obtain the location of other websites, you need to understand the term URL.
Components Explanation
http:// Communication Protocol
www.w3.org Name of the Internet host for the
computer that stores the document.
/Consortium/Legal/privacy-statement Path and document name
#Member Anchor name
Other than websites, you can also include your e-mail address in the website so
visitors can comment on your website. For example, in Ahmad YusufÊs resume,
his e-mail address is very important as it allows employment agencies to contact
him. Many web browsers assume an e-mail address is similar to a link. The
syntax is:
<A HREF=mailto:ahmadyusuf@freemail.com>ahmadyusuf@freemail.com
</A>
If a visitor clicks on the e-mail address, automatically the e-mail application in the
visitorÊs computer will run. Figure 2.3 shows the Outlook Express application
that will run automatically once the link has been clicked on. Notice that the
recipientÊs e-mail address is also inserted into the textbox automatically.
ACTIVITY 2.6
Test yourself by answering the following Activity before you complete Topic 2.
ACTIVITY 2.7
Now you have succeeded in creating links to objects in the same document as
well as to other web objects. This enables visitors to explore your entire
website you have developed.
However, your website will not look interesting without colours, graphics
and attractive fonts. To acquire these skills, we can continue to the next topic.
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Use value and colour names in your website;
2. Modify font format;
3. Manipulate graphics;
4. Modify placing and presentation of graphics; and
5. Use image maps and hotspots in developing an interactive website.
INTRODUCTION
The website that you have developed will not look interesting without elements
such as colours, graphics and fonts. Not only do you have to organise the
contents of your website to present useful information to visitors, you will also
have to think about the websiteÊs presentation or design. An interesting and
attractive design will certainly impress the visitors. This topic will introduce you
to the basic elements of design, such as colours, graphics and fonts.
ACTIVITY 3.1
Each website you develop will look more interesting if colour and graphics are
added to it. Adding colour in a document using editor software such as Microsoft
Word is not difficult. Just use your mouse. Click on the desired colour and the
text that you want to colour. However, adding colour to a HTML document is not
that easy.
There are two ways to represent colour in HTML. The first is to use colour value
and the second is to use colour name.
These numerals originate from three basic colours, which are red (R), green (G)
and blue (B), (see Figure 3.1). For each basic colour, HTML provides 255 shades.
That means, numeral 0 represents the lightest shade, while numeral 255
represents the darkest shade.
BLUE GREEN
CYAN
MAGENTA YELLOW
RED
Generally, there are 255ò or 16.7 million colours that can be created with this
combination of colours. There are too many colours for you to remember. It is for
this reason that each colour is differentiated by using RGB triplet. RGB triplet is
based on Red, Green and Blue components. For example, white will have an RGB
triplet value (255,255,255) and black will have the value (0, 0, 0). Figure
3.2 shows the colour dialogue box that you will see in the text editor application.
However, in HTML you will not use numerals 0 until 255 but hexadecimal
numbers. Hexadecimal numbers are numbers with a base value of 16. The
equivalent of decimal base ten numbers and hexadecimals are stated in Table 3.1.
To add colour in HTML documents, you have to change the RGB triplet value,
from base 10 to base 16. Table 3.2 describes the main colours in RGB triplet
value and hexadecimals.
Therefore, you can continue to represent the colour red with the name “Red” or
green as “Green”. However, not all colour names are recognised by your web
browser. Colour names that are usually used and recognised by web browsers
are listed in Table 3.3.
You can change the colour scheme of your website by changing the property in
the BODY tag. Examples of property are shown in Table 3.4 below.
Property Explanation
BGCOLOUR To determine the background colour of the document.
TEXT To determine the document text colour.
LINK To determine the colour of the links.
VLINK To determine the colour of visited links.
To add colour, you can use the colour name such as Maroon or Tan, or the colour
value such as #808080 and #CCCCCC. For example:
The script will result in a yellow background colour, black text, blue links and red
for visited links. Try the following Activity 3.1.
ACTIVITY 3.2
ACTIVITY 3.3
For example, by inserting COLOUR= “Navy” in FONT tag, you are changing the
text colour to navy blue.
ACTIVITY 3.4
What is the difference between using BODY tag and FONT tag in
modifying the font colour in your website?
Apart from colour, FONT tag has the property to allow you to change the font
type. The default font for many web browsers is Times New Roman. You can
change the font type to:
Arial
Helvetica
San Serif
Courier New
For example, if you want to change the text to Sans Serif, you need to insert the
property FACE= „San Serif‰ in the FONT tag. Figure 3.3 displays several
examples of font types.
Arial
Helvetica
San Serif
Courier New
Figure 3.3: Types of font
The SIZE property allows you to change the size of certain texts. Size is measured
by using point measurement. Table 3.5 shows the heading size in points.
H1 6
H2 5
H3 4
H4 3
H5 2
H6 1
For example, if you want to change the font size to 5, enter SIZE= „5‰ in the
FONT tag. If you want to increase the font size by 3 points relative to the font size
of the text, you insert SIZE= „+3‰.
ACTIVITY 3.5
ACTIVITY 3.6
ACTIVITY 3.7
Image is another object that you can insert into your website. By inserting the
appropriate images in terms of size, format and theme, your website will be more
interesting.
There are two types of image format that can be opened on most web browsers,
GIF and JPEG formats. Both these formats have their advantages and
disadvantages. Therefore, choosing the right format is important in website
development.
Variable Explanation
graphic_file_name Images from GIF or JPEG format.
Align How the text around the image will be arranged.
text_mouse_over Text that will be displayed when you run the mouse
pointer over the image.
GIF or Graphics Interchange Format is the graphic format that is most widely
used in the web. However, GIF files can only display a maximum of 256 colours.
Therefore, GIF is suitable for simple images such as logos, lines and icons.
Images that have more than 256 colours will look distorted on the web browser.
Among the advantages of GIF format include the capability of saving transparent
and animated images.
If you do not have the time to create GIF animated images, you can obtain them
for free from the web.
ACTIVITY 3.8
Another graphic file format that can be opened by web browsers is JPEG or Joint
Photographic Experts Group. JPEG is different from GIF as JPEG is able to
support total colours and is capable of saving images of 16.7 million types of
colours. For this reason, JPEG is suitable for photographic images and video
images.
Another graphic file format that can be opened by web browsers is JPEG or Joint
Photographic Experts Activity 3.9.
ACTIVITY 3.9
As a tip, when you insert colour and graphic into a HTML document, you will
find that the size of the file increases. This will slow down the display of the
document if the user is using a normal Internet connection. Therefore, there are
several ways to decrease the file size:
(a) Decrease the total colour that you are using. Use 256 colours, instead of 16.7
million colours.
(b) Decrease the graphic size by using graphic application such as Paint and
Adobe (this is not changing the width value and height in the IMG tag).
(c) Try to save the graphic in GIF and JPEG formats. Choose the format with
the smaller file size which does not improvise the quality of the graphic.
(d) Use GIF animation only for small images such as icons, lines and button.
(e) Use thumbnails, which are small images with low image quality. Place a
link at the thumbnail images to the actual graphic image. This gives the
visitor the opportunity to view the actual image.
(f) Recycle graphics. This is because web browsers will save graphic files when
you first access them into your computer. If needed, the computer can
access the same file at a later date.
ACTIVITY 3.10
Image map is a list of coordinates at an image that determines the boundary for
one or more hotspots. A hotspot is an area on the image that functions as a link.
Visitors can click on the hotspot and the link will be activated.
To create image maps, you must open the image file with a graphics
application and record its coordinates to create hotspots. This is time consuming
and can be difficult. You can use several applications such as MapEdit, MapServe
and Web Hotspot that is used specifically to create image maps.
Even though the applications create image maps automatically for you, it can
only be used as a support tool. You must still know the image maps syntax
because it will help you to understand the web browser display.
<MAP NAME=”name_image_map”>
<AREA SHAPE=”form” COORDS=”coordinates” HREF=”URL”>
</MAP>
with name_image_map as any name that can represent image maps, form is the
type of hotspot form, coordinates are the coordinate points of the hotspot and
URL is the link document. Once the tag map has been completed, you will need to
add USEMAP property to the IMG tag as below:
There are three types of hotspot shapes that you can use. The first hotspot shape
is a square. The SHAPE property for the square form is „Rect‰. The coordinates
for COORDS property is determined by two points, which are the corner points
on the top-left corner and on the right-down corner.
For the Pusanika map, the Lestari Auditorium can represent a square. Two
important points for the Lestari Auditorium will be (261, 91) and (339,196) as
shown in Figure 3.5. Therefore, the AREA tag syntax for the Lestari Auditorium
is:
The second shape is the circle and is represented as „Circle‰ at the SHAPE
property. The COORDS value for the circle is determined by the centre and
radius of the circle. The radius is calculated in pixel units. In the Pusanika map,
Bakawali Hall is the area which can be represented by a circle.
Figure 3.6 shows the centre and radius points of the Bakawali Hall. Therefore, the
AREA syntax for the Bakawali Hall is:
The third hotspot shape is a polygonal, which is represented as „Poly‰. This form
of hotspot is suitable for areas shaped other than a square and circle. The
coordinates depend on the number of corners that make up the shape.
For example in Figure 3.7, a triangle has three corners, therefore its COORDS
equal to 6. For the Pusanika map, the Block C area has six corners. The AREA
syntax for Block C is:
ACTIVITY 3.11
Around the map, you will see a purple coloured line. This line is called a BORDER.
This happens because your image contains links. To hide the line, add a BORDER
property to the IMG tag as follows:
ACTIVITY 3.12
You have learnt how to insert colour and to modify font type in your website.
You also learnt about several types of graphic file formats. You were able to
create image maps for those graphics.
You may also want to display tables in your website. You may draw the table
as a graphic and display it as you have learnt in this topic.
However, this is not an efficient method. In the following topic, you will learn
ways of inserting and modifying tables in your website.
INTRODUCTION
Now, you have an interesting website to present. To increase interactivity, there
is one more method for you to present text-based information. The text that you
would like to insert into your website does not have to be only in paragraphs. At
times, you may want to arrange your information into tables, especially if you are
presenting statistical information or a list of student names.
In the table itself, you can display or hide the column and row lines. In HTML,
the table object is known as table. In this topic, you will learn about tables and
how to create tables to insert into your website.
To use a text table, you need to use a typewriter or fixed-width font. An example
would be Courier New. Each letter in this font has the same width. Notice that
the font width for letters „m‰ and „i‰ is the same for Courier New as compared to
other fonts such as Arial and Verdana. The choice of fonts is important to
determine similar spacing between each word and space for each column.
<PRE>
Table_Contents
</PRE>
ACTIVITY 4.1
In Topic 1, you learnt that HTML will ignore excessive tabs and spacebar.
However, this will not occur in PRE tag. You can press the spacebar many times
to create empty spaces so that your table is symmetrical and organised. Try to
complete Activity 4.1 below.
ACTIVITY 4.2
ACTIVITY 4.3
1. What are the two types of tables that you can insert into a website?
2. What is the tag used to create a text table?
A graphical table uses the opening tag <TABLE> and is ends with the closing tag
</TABLE>. Each line is opened with the <TR> (table row) tag and is ended with
the closing tag </TR>. In each <TR> tag you need to insert the <TD> tag (table
data). The <TD> tag marks the beginning of the column and insert </TD> to close
the column.
You can insert as many columns for each line. If you want two lines and three
columns in a table, you must have two pairs of <TR> tags and six pairs of <TD>
tags.
<TR>
<TD>Cell Three</TD>
<TD>Cell Four</TD>
</TR>
<TR>
<TD>Cell Five</TD>
<TD>Cell Six</TD>
</TR>
</TABLE>
The tag at the top most of the syntax is indented to differentiate it from the row
and column tags. You do not have to do this, but this indentation prevents you
from making mistakes and it will make it easier for you to read the codes.
ACTIVITY 4.4
Creating a Graphical Table
(a) Download activity 16.htm from the DVD and save the file in the
Topic 4 folder.
(b) Open file activity 16.htm using Notepad.
(c) Identify the <HR SIZE = „1‰ WIDTH = „100%‰> tag and create an
empty line below it.
(d) Type <TABLE BORDER=1> to start a graphical table and press
Enter.
(e) For the column title of this table, type the following codes:
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
(f) Then, for the first line of the table type the following codes:
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
(g) Since the table has four columns for each line, you will have to
repeat step 6 three more times. Finally, you will have four pairs of
<TR> and </TR> tags.
(h) Return to the table heading, insert the following text as the title in
the first line.
<TR>
<TH>Item#</TH>
<TH>Brand</TH>
<TH>Model</TH>
<TH>Price</TH>
</TR>
(i) Next, insert the following text in the relevant columns for all four rows
that you have created.
<TR>
<TD>4682</TD>
<TD>Dell</TD>
<TD>PowerPC800</TD>
<TD>RM 3550</TD>
</TR>
<TR>
<TD>6840</TD>
<TD>Compaq</TD>
<TD>Inspire-X2</TD>
<TD>RM 3990</TD>
</TR>
<TR>
<TD>7894</TD>
<TD>Gateway</TD>
<TD>GPC-450</TD>
<TD>RM 3680</TD>
</TR>
<TR>
<TD>1858</TD>
<TD>NEC</TD>
<TD>Millennium Edition</TD>
<TD>RM 3510</TD>
</TR>
(j) Press the Enter key to create a new line and type the closing tag
</TABLE>.
(k) Save the file.
(l) Run the web browser and open the file activity 16.htm to see the
result.
ACTIVITY 4.5
ACTIVITY 4.6
In a graphical table, you can insert properties that can change the appearance of
the table such as colour, shading and borders so your table will look more
attractive. This section will discuss <TABLE> tag properties which are BORDER,
CELLSPACING, CELLPADDING, ALIGN, WIDTH, HEIGHT and BGCOLOR.
The use of BORDER property is to display table lines. By default, if you do not
insert BORDER properties, your table will be displayed without lines as shown in
Figure 4.1. The syntax for BORDER property is:
<TABLE BORDER=”size”>
CELLSPACING is the property that controls the space between cells in a table. The
default CELLSPACING value is 2. If you require a different value, you can set
CELLSPACING = „0‰. The property syntax for CELLSPACING is:
To determine the space between cell lines and text, you will need to use the
CELLPADDING property. By default, CELLPADDING value is 1. The syntax for
CELLPADDING property is
By default, your table will be positioned at the left column or margin. You can
change the position by using the ALIGN property. The syntax is as follows:
Positioning can be done either to the left, centre or right. The ALIGN property can
also be used in the TD tag. Therefore, you can control the text positioning in each
cell. For example, the code:
The size of a table is determined by the text contained within the cells. By default,
if you add text in a cell, the web browser will increase the width of the cell so that
the text in the cell is contained within a row. If you continue to insert text into the
cell until the width of the table is the same as the width of the display, the web
browser will place the text on the next line. This means that the width and height
of the table can be controlled automatically by the web browser.
In some situations, you will need to control the width and height of the table that
you have created. To do this, you will need to add to the WIDTH and HEIGHT
properties in the TABLE tag. The syntax is as follows:
with height and width in pixel units or percentages (%). The code is:
This will result in your table being as wide as the web browser display and the
height will be 300 pixels. The following code:
will result in the table being the width and height of the web browser display.
This code is useful when you want to divide your website display page into
several sections.
The WIDTH property can also be used to determine the width of a cell. The syntax
for the WIDTH property is:
Width value in percentage is the relative percentage to the width of the table and
not to the width of the web browser display. For example, if the width of the table
is 500 pixels, the cell with a 50% width is half of the 500 pixel value which is 250
pixels.
By default, the table cannot have any colour and is dependant on the background
colour or graphics of the document. To add colour in the table, you must use the
BGCOLOUR property. You can insert this property in the TABLE, TR, TH or TD tags.
The syntax is as follows:
where colour is the same as colour value or colour name. You are encouraged to
attempt the following activity.
ACTIVITY 4.7
To have a solid understanding on the subject matter of this topic, attempt Activity
4.8.
ACTIVITY 4.8
1. What is the code used to insert a column title in the first line of the
table?
2. What are the two units of measurement to determine width and
height of a table?
3. What is the difference between CELLSPACING and CELLPADDING?
Spanning cell are cells that comprise more than one column or row.
where the total_rows is the total number of rows that you want to combine. For
example, if you enter the codes below, the output will be similar to that shown in
Figure 4.8.
In the code above, you need two rows below the cell that is declared ROWSPAN (or
two more <TR> and </TR> tags). Therefore, the total number of rows to be
combined is three rows including the row where the cell is positioned at.
<TD COLSPAN=”total_columns”>Text_In_Cell</TD>
where the total_columns is the total number of columns that you wish to
combine.
In the code above, you need three columns at the row below.
ACTIVITY 4.9
ACTIVITY 4.10
ACTIVITY 4.11
This assignment requires you to create a colour table that has spanning
columns and rows.
SITUATION
Puan Salmah, the class teacher of 2-Sentosa, would like to put her class
timetable on the web. The timetable looks like the diagram below:
Physical
Monday BM-1 Math Eng-1 Eng-2
Education
Pend.
Tuesday Math BM-2 Eng-2
Islam
Pend.
Wednesday BM-1 BM-2 BREAK Math
Islam
Pend.
Friday Eng-1 Eng-2 Music Math
Islam
ASSIGNMENT
You are required to create the timetable for Puan SalmahÊs class. You are
also required to add colours to the timetable.
Once completed, print out the results displayed on the web browser and the
HTML code and submit it to your tutor.
In this topic, you have succeeded in creating two types of tables i.e. text and
graphical tables.
You now can modify tables by adding colours and borders. You are also able
to span row and column cells on the table.
By using the table, you can also create an object in HTML which is form.
In the next topic, you will learn methods to create and send forms on the web.
Cellpadding Rowspan
Cellspacing Table
Colspan
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Explain the concept of CGI script in web development;
2. Name elements in creating FORM tag;
3. Use six form elements; and
4. Differentiate two types of buttons in forms.
INTRODUCTION
Forms are sometimes a necessity in web pages. You may be developing a website
in which you would like visitors to give certain input like registration of
customers and fill in the questionnaires. For this purpose, you need forms which
are objects in HTML to get the values visitors keyed in and process it.
In this topic, you will explore forms, its elements and the method of retrieving
values sent by visitors.
ACTIVITY 5.1
Before creating forms, you need to know how a form is read and processed on the
web first. Refer to Figure 5.1 to view form elements.
In HTML, there are specific tags that allow you to create a form like Figure 5.1.
However, forms do not have the ability to process information that has been
entered. One way of processing this information is by sending it to an application
run at the web server called CGI Script.
Figure 5.2 illustrates how a HTML document interacts with CGI Script.
With the introduction to CGI Script, you should be able to change the perspective
on the usage of HTML documents. HTML documents are no longer used solely to
display information (static) but also, to receive input from visitors and process it
(dynamic). This will encourage the development of many applications with web-
orientation such as:
(a) C/C++;
(b) AppleScript;
(c) Perl;
(d) TCL; and
(e) Visual Basic.
Data is
processed
by CGI
script in
the server
CGI script is run on the web server; therefore you cannot create it and edit it. This
is due to the fact that CGI Script is developed in line with the web server
specifications and platform which you have no information on.
ACTIVITY 5.2
Before using the elements above, you need to declare to the web browser that the
website will be using forms. The tag used for this purpose is <FORM>. <FORM> tag
declares the start of the form and </FORM> tag is the closing tag. The syntax for
this tag is:
<FORM>
Elements
</FORM>
You can insert more than one form in a HTML document. However remember,
you cannot put a form in another form!
Between the <FORM> tags, you can insert other tags like heading, graphic, link,
table and more. This allows you to design the form so that it follows a particular
order. You can also have more than one form in the same HTML file. To
differentiate one form from another, you can insert NAME property in <FORM> tag
like below:
ACTIVITY 5.3
The tag used is <INPUT> coupled with TYPE = “Text” property. The syntax is:
The NAME property is a must for INPUT tags. When a form is sent to CGI script,
the NAME property will be used to differentiate information that is sent from
various form elements. An example of NAME property usage is:
The SIZE property is to determine the width of the text box. On default, if you do
not declare this property, the width of the text box is 20 characters wide. If you
entered more than 20 words, the text typed in will automatically scroll to the left.
What this means is, you can enter as much text as you want but only 20
characters can be seen at a time. Nevertheless, the entire text will be sent to CGI
script. Some examples of the SIZE property can be seen in Figure 5.3.
Figure 5.3: Output of <INPUT TYPE= “TEXT” SIZE= “5”> and <INPUT TYPE=
“TEXT” SIZE “20”>
The MAXLENGTH property is where the total number of characters that can be
entered into the box is blocked. However, this property does not determine the
number of characters that can be viewed at a time as this is controlled by the
SIZE property. This property is important only when you require the user to
enter a certain amount of characters like postcodes (5 digits), and identity card
numbers (14 characters including „-„).
Another property that you can use is VALUE. The VALUE property is where a
default value is placed into an input box. Let us say that there is a box for
Country in your form. If most of the visitors to your website are Malaysians, you
can have „Malaysia‰ as the default text in the box. Visitors who are not from
Malaysia can delete this default value and enter the country they reside in.
In some situations you may want to block users from seeing the text that is
entered into an input box. For example, text boxes for passwords and credit card
numbers. You want the text here to be hidden from others that may be near the
user when the form is being filled out. This is made possible by changing the text
box to a password box. Input typed into a password box will be represented by
bullets or asterisks. The syntax is:
Selection list is a list box that allows the user to choose an item of choice using
the mouse.
This element is useful if you have a list of fixed answers like country name, the
name of a particular companyÊs product or the months in every year.
For this you will use the <SELECT> tag for lists and <OPTION> tag for each item
in the list. Both tags require a closing tag. The syntax for selection list is:
Like other form of elements, the NAME property is needed for selection list. By
default, selection list will display only the first item in its list. If you wish to see
other items, you will need to press the drop-down arrow.
The SIZE property allows you to display more than one item at a time. Figure
5.5 shows the display of a few boxes using different SIZE property values.
Figure 5.5: Selection list using a few different values of SIZE property
Users are not necessarily confined to choosing only one item from the selection
list. You can change the list by entering the MULTIPLE property. It is meant to
allow users to choose more than one item in the list. There are two ways of
choosing more than one item:
(a) One-by-one
Press the Ctrl button while clicking on the desired items.
(b) Linked
Choose the first item in the desired item category, while pressing the Shift
key, choose the last item in the category. All the items between the first item
and the last chosen item will be automatically selected.
By default, a form will send the item text that you choose from the selection list.
However, in some circumstances you may want to send a code or value that is
not the same as the item text.
You can perform this by using the VALUE property in the OPTION tag. The
example below illustrates how a country code is sent to CGI script in place of the
country name.
If you wish to preset an item as the default setting, use the SELECTED property as
shown below:
The function of radio button is similar to selection list in the sense that it displays
the list for the user to choose from. Unlike the selection list however, the radio
button allows the user to choose one item only. When one item is chosen, the
previous selected item is cancelled.
To create a radio button, you need to use an INPUT tag together with a TYPE=
“RADIO” property. The syntax is as shown below:
The NAME property is necessary for radio buttons. The VALUE property is the
same as in the OPTION tag, which is to determine the value for the item that will
be sent to CGI script. Figure 5.6 shows the display for a few radio buttons. If you
wish to preset an item as the default, add the CHECKED property into the INPUT
tag as shown below:
If you have more than one group of radio buttons, you will have to differentiate
them by giving different NAME properties to each one.
Users will need to select or de-select a check box. Compared to the radio button, a
check box allows users to make more than one choice. The tag that you will need
to use for a check box is INPUT with the TYPE= “CHECKBOX” property. The
check box syntax is:
The NAME property is needed for check box just like other form elements. The
VALUE property is the same as in radio button, to determine the value for the
item that will be sent to CGI script.
You can see examples check boxes in Figure 5.7. If you wish to set an item as the
default selection, add the CHECKED property in the INPUT tag as shown below:
Text Area is a form element that allows users to insert text that exceeds one line.
Rows property sets out the allowed number of lines. Meanwhile, the COLS
property refers to the number of characters that are permitted for each line.
TEXTAREA tag requires an opening tag which is <TEXTAREA>, and a closing tag
which is </TEXTAREA>. The text between the opening and closing tags is the
default text in the text area box.
WRAP property determines how text will fill each line in the text area box. It also
determines how the format of text that is sent to CGI script will be. Table 5.2
displays three WRAP property values that you may use.
Value Description
OFF Text is displayed in a long line. The text will scroll to the left if the
number of characters is more than the COLS value. Text will
move to the next line when you hit the Enter key. The text is sent
to CGI script in one line.
SOFT/ VIRTUAL Text will move to the next line automatically if the number of
characters exceeds the value in COLS. The text is still sent to CGI
script in one line
HARD/ PHYSICAL Text will move to the next line automatically if the number of
characters exceeds the value in COLS. Text is sent to CGI script
according to the number of lines as shown in the text area box.
ACTIVITY 5.4
Can you determine when do we use an input box and when do we use a
text area?
Like other form elements, the NAME property is required. An important property
is VALUE, which is the value hidden from the userÊs knowledge. You can put this
tag anywhere between the opening and closing TEXTAREA tags. The best place is
at the beginning of the TEXTAREA in order for you to understand the function of
the form.
ACTIVITY 5.5
The VALUE property is the text displayed on the button. If you do not enter the
VALUE property for SUBMIT and RESET buttons, the default text „Submit‰ and
„RESET‰ will be displayed respectively. Figure 5.9 shows the display for two
types of buttons (SUBMIT and RESET).
HTML tag to
create buttons
Download Reset
The ACTION property is to determine the location of the CGI script that will
process the form. The METHOD property will determine how the web browser will
send information to the CGI script. The values for METHOD are either GET or
POST. Discussion on the differences between these values is beyond the scope of
this topic.
However, in brief, GET will place every form of information at the end of the CGI
script URL. The CGI script will then change the information at the end of the URL
into text that will be processed. The POST method in a nutshell, sends
information as separate data streams.
POST is safer and more popular as there are instances when GET may cause
lengthy information to be cropped.
ACTIVITY 5.6
ACTIVITY 5.7
Now you know how to use forms in a website and have completed this topic.
Until now, the forms you have created have not been processed. This is
because input entered into the form was not sent to any application in the
server.
You will therefore, learn in the next topic how to produce scripts at the server
that will manipulate input from web form. This script is known as Active
Server Pages (ASP).
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Explain the concept of client and server in a web page;
2. State three applications that can be built with client-side scripting;
3. Explain the importance of server-side programming;
4. Use scripts in developing web pages; and
5. Determine the needs of using events script.
INTRODUCTION
One way to increase the interactivity of a web page is through the use of scripts.
JavaScript and VBScript are among the scripts you may have heard or read.
However, many people do not understand the usage and classification of scripts
in HTML.
Therefore, this topic will explain some important concepts like the client-server
concept, client-side programming and server-side programming and the use of
events, before delving into insertion of scripts into web pages.
ACTIVITY 6.1
When the web server opens a website, the operations executed by the web server
is not just a switch from HTML codes to text or pictures only. At the same time,
the web server also functions as a client that interacts with other servers that have
the HTML documents that you are accessing.
The simplest model to illustrate the relationship between client and server is the
processing of forms by the Common Gateway Interface (CGI) application. CGI is
an application that is run from the web server. The web user fills in a form and it
is sent to the CGI (see Figure 6.1).
Request
HTML file
Sent
Client Server
The userÊs request is received by the CGI and the requested output is sent. This is
illustrated in Figure 6.2. This shows that HTML is not a static document but it is
capable of developing server and client applications such as database access.
Value to
CGI Value is
processed
by CGI
Text
(result)
Client Server
In special situations, CGI can only be run by certain users to avoid intrusions to
the system that can slow down or even damage the web serverÊs application. This
restriction is set up by the system administrator.
The issues above have been the motivating factor to develop several types of
programs or scripts that can be run using a web browser on the clientÊs computer.
Scripts run on web browsers will reduce the burden of processes that are
performed by the server. Besides that, the reaction or output generated on the
web browser becomes faster. This is due to the fact that users no longer need to
send requests and wait for CGI output that is sent through the Internet.
Examples of client-side scripts are JavaScript and VBScript. The use of scripts is
limited to simple applications. An example of a simple application is the
development of a loan calculator in a web page. Besides that, among other
applications are form validation, web page decoration and dynamic web page
generation. HTML website developers are more comfortable with scripts because
scripts can be inserted into HTML files without changing the HTML codes.
There are other available client-side programming technologies like Java Applet
and ActiveX that are capable of performing more complex operations like
displaying graphics. Despite this, Java Applet cannot be discussed in this unit
due to its wide scope.
To illustrate further, assume you are building a form to send the value of a
textbox that contains the name of a person to CGI. Initially, you may have to
ensure that the textbox is not empty. After that, you will have to enter a name.
Copyright © Open University Malaysia (OUM)
82 TOPIC 6 INTRODUCTION TO SCRIPTS
Make sure that no numerical digit is inserted because logically a human name
does not contain digit.
It cannot be denied that scripts are able to perform many processes in a HTML
document. Given this, it cannot fully replace the applications provided by CGI. An
online shopping program for example, cannot store buying data at the client-side as
this would mean that data cannot be centrally kept up-to-date. Instead, the data is
combined in a database located at the web server. The role of CGI comes into play
here, to access the data for processing and sending it back to the client.
ACTIVITY 6.2
The use of programs at the server-side to increase the interactivity of your website is
the best choice. Among examples of programs at the server-side are CGI programs,
NSAPI/ ISAPI, Active Server Pages, Live Wire and Cold Fusion.
There are two reasons as to why programs need to be applied at the server-side:
One weakness of using programs at the server is that applications will rely
entirely on the server. The client or web browser needs only to send requests via
forms and then receive the result or decision from the server. Therefore, the
server workload increases and may cause delay in the processing of data at the
server. This situation can be aggravated when there are many requests from the
client at a time.
ACTIVITY 6.3
url is the location and name of the script file if the script is located in a separate
file. JavaScript script for example can be placed under a file name like script.js.
Disregard this property if the code is placed in the same HTML file.
Script_Type refers to the type of script that is used. As you already know,
there are two types of popular scripts: JavaScript and VBScript. For instance, if
using JavaScript it would read as Language=”JavaScript”.
The symbols <!— and --> are used to hide the script from older versions of
web browsers that do not support the script. If the symbols are not placed, these
web browsers would read the script as part of the HTML document. This will
affect the way the existing web page is displayed. The <!— and --> symbols in
effect make the script as text comments. When older version web browsers read
the code, the script between <SCRIPT> and </SCRIPT> tag is ignored.
You can place <SCRIPT> tag anywhere in the HTML document. It can be placed
either in the <HEAD> tag or <BODY>. Nevertheless, many programmers prefer to
place it in the <HEAD> tag to differentiate script code and other HTML tags that
are display functions. There are some web developers who are more comfortable
placing it in the <BODY> tag in a location where the code will be run and then
displayed. Try Activity 6.5, so you can differentiate script that is inserted within
the <HEAD> tag and script placed in the <BODY>.
ACTIVITY 6.4
ACTIVITY 6.5
(e) Store the file above as activity1a.htm. Open this file using a web
browser.
Next, open a new file using Notepad and type the following code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=”CENTER”>Title</H1>
<HR>
Website Contents
<BR><BR><BR><BR><BR><BR><BR>
<HR>
<SCRIPT LANGUAGE= “JavaScript”>
<!-
document.write(“Updated on:” +
document.lastModified);
-->
</SCRIPT>
</BODY>
</HTML>
(f) Store the above file as activity1b.htm and display it using a web
browser.
Before moving on to the next topic, test your theoretical understanding by doing
Activity 6.6.
ACTIVITY 6.6
Other examples of events are onclick, onblur, onload, etc. You will be trying the
onclick event later in Activity 6.7. HTML allows numerous types of events which
are partially listed in Table 6.1.
Onchange When a form element loses focus and its value <INPUT>, <SELECT>,
is changed compared to the previous value. <TEXTAREA>
Onclick Run when an element is clicked. Most HTML elements
Onfocus When an element gets the focus upon the click <A>, <AREA>,
of a mouse or use of the Tab key. <BUTTON>, <INPUT>,
<LABEL>, <SELECT>,
<TEXTAREA>
Onload Performed when the window or frame <BODY>, <FRAMESET>
containing the document is opened.
Onsubmit When a form is sent via a click of the Submit <FORM>
button on the form.
ACTIVITY 6.7
(c) Store the file above as activity2.htm and display it using a web
browser.
ACTIVITY 6.8
Now you know the basics of scripting, the next step is to apply this client
script and your ability to develop simple applications on the client-side.
Before this, you will need to know the syntax for the script, as each script will
have a different syntax from the other.
To obtain this skill, you will learn JavaScript in the next topic.
INTRODUCTION
JavaScript is an example of a script language. Script language can be considered
as a non-complex programming language. Like other programming languages,
JavaScript consists of instructions that can be executed. What differentiates it is it
can be inserted into a HTML document. The results of a script can be viewed
using a web browser like Netscape and Internet Explorer.
In this topic, you will explore in detail the characteristics of JavaScript, syntax like
variables, operations and expressions, functions, control structures and loops for
JavaScript.
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE= “JavaScript”>
<!-
//print Hello World!
document.write(“Hello World!”)
->
</SCRIPT>
</BODY>
</HTML>
Hello World!
The previous versions of web browsers that do not support this script will
display the script code as normal text. To prevent this from happening, <!--
and --> can be used to make the script in between appear as comments to the
web browser. The // symbol is also a symbol for comments that are on a single
line only. This will prevent JavaScript from running the lines.
7.3 VARIABLES
Variables are temporary spaces to store data where it will be used to run
JavaScript programme. The value of the variable can change when the script is
run. You can refer to a variable by its name for the purpose of viewing the value
contained within or to change the existing value.
There are a few important rules that you need to remember when naming a
variable:
If the variable is declared outside the function, all functions in the programme
can access that variable. The lifespan of the variableÊs value begins when it is
declared and ends when the document is closed.
ACTIVITY 7.1
Obtain specific rules for naming variables besides the ones stated above.
7.4 OPERATIONS
Let us see how operations are used in JavaScript.
7.4.1 Arithmetic
JavaScript also provides a few arithmetic operators for use in mathematical
calculations. Table 7.2 illustrates JavaScript arithmetic operation symbols and
operation examples if the values a = 6, b = 11, and c = 3.
Example
Symbol Definition
Operation Value d
+ Add d=b+c 14
- Subtract d=c-a -3
* Multiply d=a*b 66
/ Divide d=a/c 2
% Modulo d=b%a 5
++ Increase d = c++ 4
-- Decrease d = b-- 10
7.4.2 Accumulation
Certain operators may be used if you wish to accumulate the value of a variable.
Table 7.3 below lists the operation symbols for accumulation in JavaScript.
7.4.3 Relationships
JavaScript also provides operators for operations involving meaningful
relationships, if you wish to run a comparison of data. Table 7.4, illustrates the
JavaScript symbols for relationship operations and examples of operations if a =
4, b = „g‰, c = -3 and d = „G‰. The ÂvalueÊ column shows the result given by the
computer after executing the relationship operation. The value 0 indicates a false
relationship value, while 1 represents a true relationship.
Example
Symbol Definition
Operation Value
< Less than a<c 0
<= Less than or equal to c <= a 1
> Greater than d>b 0
>= Greater than or equal to a >= c 1
== Equals b == d 0
!= Not Equal to d != b 1
7.4.4 Logical
You may use logical operators when comparing between one or more operations.
Logical operators are shown in Table 7.5.
Example
Operator Type
Operation Value d
x=7, y=4
&& And True
(x < 10 && y > 1)
x=4, y=6
Or False
(x == 5 ŨŨ y == 5)
x=8, y=1
! Not True
x != y
7.5 FUNCTIONS
Function contains a portion of the code that will be run by events or the call to the
particular function. One function is one set of instructions. You may use the same
instruction repeatedly. An instruction like
alert(“Hello World!”)
actually means that a text value; “Hello World!” has been sent to the function
called alert.
Argument is a variable that will be used in function. You can pass value to
function using argument. Example of a function call includes argument:
Value 341 will be assigned in argument 1 and „Java‰ string will be assigned
in argument 2. Meanwhile, a function that does not include arguments must
remain as such.
Function Function_name()
{
instructions
}
function_name()
When this function is called, two values will have to be prepared to be sent
to the function. A variable also has to be prepared to receive the value
returned to the function. In the example below, total is a variable that will
receive the total of 4 and 1 which is 5.
total=total(4,1)
ACTIVITY 7.2
Functions
<HTML>
<HEAD>
<SCRIPT LANGUAGE= “Javascript”>
function speech(text)
{
alert(text)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE= “BUTTON”
ONCLICK= “speech(‘Selamat Datang!’)”
VALUE= “Bahasa Melayu”>
(c) Save the above file as activity3.htm and display it using your web
browser.
(a) if instruction
(b) if...else instruction
(c) switch instruction
(a) if instruction
This instruction is used when you wish to run a set of codes given that a
particular condition is true. The syntax for this selective structure is as
follows:
if (condition)
{
code to be run if condition is true
}
if (condition)
{
code to be run if condition is true
}
else
{
code to be run if condition is false
}
switch (expression)
{
case value1:
code that is run if expression = value1
break
case value2:
code that is run if expression = value2
break
default:
code that is run if expression is neither value1 nor
value2
}
ACTIVITY 7.3
if () and switch ()
(c) Save the file above as activity4a.htm and display it on your web
browser.
(d) Next, open a new editor and type the following code.
<HTML>
<BODY>
<SCRIPT LANGUAGE= “Javascript”>
var date = new Date()
var today = date.getDay()
switch (today)
{
case 1:
document.write(“Today is Monday”)
break
case 2:
document.write(“Today is Tuesday”)
break
case 3:
document.write(“Today is Wednesday”)
break
case 4:
document.write(“Today is Thursday”)
break
case 5:
document.write(“Today is Friday”)
break
default:
document.write(“Today is a holiday”)
}
</SCRIPT>
</BODY>
</HTML>
(e) Save the file above as activity4b.htm and display it using your web
browser.
(a) while
The program will run a specific set of instructions as long as the condition is
true. The syntax for while is:
while (condition)
{
code to be run when the condition is true
}
(b) do...while
The program will run a set of instructions once and will repeat it if the
condition is true. Do...while has the following syntax:
do
{
code that will be run
}
while (condition)
(c) for
An instruction that will repeat a set of instructions a few times. The syntax
for the instruction is as follows:
{
document.write(“Number : “ + i)
document.write(“<br>”)
}
Number 1
Number 2
Number 3
In the next topic, you will learn the characteristics and syntax for VBScript
programming.
INTRODUCTION
In principle, the programming techniques in VBScript are the same as JavaScript.
What differentiates them is the syntax used. VBScript is an alternative to
JavaScript. A number of web developers choose VBScript because its syntax is
easier than JavaScript. How far is this true?
This Topic will explore further the characteristics of VBScript, syntax like
variables, operations, expressions, functions, control structures and repetitions
for VBScript.
The advantage of VBScript is the syntax is easier than JavaScript. In Activity 8.2
below, you will be creating VBScript to request a user name that will be placed in
the message box and displayed on your web page. Like other scripting
languages, VBScript can produce various types of programmes capable of
processing user input before data is sent to the server. Yet, the weakness of
VBScript is that the older versions of web browsers or browsers other than
Microsoft Internet Explorer may not be able to run VBScript properly.
ACTIVITY 8.1
ACTIVITY 8.2
Data Input
(a) Open a new file using Notepad.
(b) Create a new folder called Topic 8 in your thumb drive. Save this
file (Save as) activity1.htm.
(c) Type the following code:
<HTML>
<HEAD>
<TITLE>VBScript Example</TITLE>
<!-
UserName = InputBox("Enter Your Name?") MsgBox
UserName
Document.Write "<H1>"
Document.Write "My name is: " & UserName
Document.Write " <\/H1>"
->
</SCRIPT>
</HEAD>
</BODY>
</HTML>
(d) Save this file.
(e) Return to the web browser and open the file from
your thumb drive:\Topic8\activity1.htm
<SCRIPT LANGUAGE="VBScript">
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE= "VBScript">
<!-
‘print the text "This is VBScript"
document.write("This is VBScript")
->
</SCRIPT>
</BODY>
</HTML>
This is VBScript
Like JavaScript, the instruction document.write („This is VBScript‰) will print the
string or text within (). Older versions of web browsers that do not support this
script will display the script as normal text. To prevent this from happening, the
<!- and -> symbols will also be used. Their purpose is to make the script in
between appear as comments. The  symbol is also a symbol to make a line of
instruction appear as comments. This will prevent VBScript from running
those lines.
8.3 VARIABLES
All types of variables in VBScript are in the variant type. This type of variable can
contain any data like integer, double, and string. Like other scripting languages,
there are a few important matters that need attention when naming variables in
VBScript as listed below:
You can declare a variable using the keyword Dim, Public or Private as shown in
Table 8.1 below.
Now, you have created a variable called intAge. Yet this method is not the best
method. There is a possibility that the variable name is misspelled, resulting in
wrong output by the program. For example, ıintAgeˆ could be misspelled as
ıintAggˆ. This causes to appear as if VBScript has been instructed to create
another variable called ıintAggˆ.
To prevent the error above, you can use the Option Explicit instruction. By using
this instruction, you will have to declare all variables with Dim, Public, or
Private. There is no issue of misspelling of variables. You can place the
instruction Option Explicit above your VBScript like this:
Option Explicit
Dim intAge
intAge = value
In the declaration of this variable, you will need to classify whether this variable
is local or universal. Refer to Subtopic 6.3 of Topic 6 as the concept is the same.
ACTIVITY 8.3
Compare the rules for naming VBScript to naming JavaScript. Are they
the same?
8.4 OPERATIONS
In Topic 7, we learnt about the operations in JavaScript. Now, let us see how it is
done in VBScript.
8.4.1 Arithmetic
Like JavaScript programming language, VBScript also provides for a couple of
arithmetic operators to be used in mathematical calculations. Table 8.2 shows
VBScript arithmetic operation symbols. Observe the example below with the
values for a=10, b=5, and c=2.
Example
Symbol Definition
Operation Value d
+ Add d=b+c 7
- Subtract d=c-a -8
* Multiply d=a*b 50
/ Divide d=a/c 5
Mod Modulo d=b%a 5
8.4.2 Relationships
VBScript is equipped with operators for operations involving relationships that
are meaningful. If you wish to compare some data, refer to Table 8.3. The table
illustrates VBScript relationship operation symbols and operation examples if
a=7, b= ıfˆ, c=-1 and d= ıFˆ. The value used to show the result of the
relationship operation is 0 which represents false and 1 which represents true.
Example
Symbol Definition
Operation Value
< Less than a<c 0
<= Less than or equal to c <= a 1
> Greater than d>b 0
>= Greater than or equal to a >= c 1
== Equals b == d 0
Not x = y Not Equal to Not d = b 1
8.4.3 Logical
In VBScript, you may use logical operators (as shown in Table 8.4) in the event
that you wish to compare one or more operations.
Example
Operator Type
Operation Value
x=6, y=3
And And True
(x < 10 And y > 1)
x=3, y=7
Or Or False
(x == 5 Or y == 5)
Not Not x=2, y=5 x Not y True
8.5 FUNCTIONS
VBScript has two types of functions that is Sub and Function.
The value ıVBScript will be accumulated into argument 1 and the integer
3 will be accumulated to argument2.
Call sub that does not have any arguments will still require () as shown:
Call sub_name()
A set of instructions that begins with Function and ends with End
Function.
variable = function_name()
or,
msgbox "Your name is " & function_name()
ACTIVITY 8.4
Functions
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "VBScript">
Sub BM_OnClick()
msgbox "Selamat Datang"
End Sub
Function speech()
msgbox "Welcome" End Function
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" NAME = "BM"
VALUE= "Bahasa Melayu">
</BODY>
</HTML>
(c) Save the file above as avtivity5.htm in your Topic 8 folder and view
the output using a web browser.
The above instruction is suitable if you wish to run only one instruction
when the condition is true. If you want to run more than one instruction,
you must end the instruction with End if. Study the code below:
if i=7 Then
msgbox "July"
i=i+1
End if
if i=1 then
msgbox "Right"
else
msgbox "left"
end if
In the code above, there are expressions which are normally variables desired to
be valued. An example is the variable Pay. The value of the intended variable to
be matched is included in each case. If the value of the variable is the same as
the matched value in a case, then the instruction for that case is executed.
ACTIVITY 8.5
<HTML>
<BODY>
else
document.write("<b>Time To Sleep!</b>")
end if
</SCRIPT>
</BODY>
</HTML>
(c) Save the above file as activity6a.htm and view the output on your
web browser.
(d) Open a new text editor and type the code below.
<HTML>
<BODY>
(e) Save the file above as activity6b.htm in the Topic 8 folder and view
the output using a web browser.
You can use the control structure For...Next if you know the number of loops
for a set of instructions that you wish to execute. Here, you may use a variable
whose function is to count the number of loops. The value for the counter can
increase or decrease. In the example below, the counter is the variable i.
For i=1 to 12
code that will be run
Next
The value for i will begin with 1 and increase by a margin of 1 until its value
reaches 12 through the keyword Next. What if the counter value should be
added more than 1? You may use the keyword step. By using step, you can
increase or decrease the counter value according to the value that is declared. The
following code show an example of the use of step.
If you do not know the number of loops that need to be performed, you should
use Do...Loop. The code below will be run when i is greater than 12.
Do While i>12
code that will be run
Loop
The next code will be run once for the first time, and the condition will be
inspected. If i is greater than 12, looping will be done.
Do
code that will be run
Loop While i>12
For Each...Next control structure will repeat a set of instructions for every
item in a collection or every element in an array. It is almost like the
For...Next control structure. The difference is that you do not need to state the
number of loops to be performed. The code below is an example:
dim Name(2)
names(0)= "Ahmad"
names(1)= "Yosuf"
names(2)= "Ismail"
Ahmad
Yosuf
Ismail
You can use the keyword Exit if you wish to stop the loop. The code below is an
example of the use of Exit in a For...Next and Do...Loop control
structure.
For i=12 To 1
code that will be run
if i=5 then Exit
Next
Do While i>12
code that will be run
if i = 3 then Exit
Loop
ACTIVITY 8.6
PROBLEM
A teacher needs one website that can show her learners adding operation
of two numbers. Below is the form she needs.
Name:
Email:
First Number:
Second Number:
Result:
Add
Your task is to create the form that enables the user to fill up the required
information which are the Name, Email, First Number and Second
Number before the answers are displayed in the Result textbox. If the
user does not fill up the textbox with any of the required information, a
message such as the one below must be displayed. The teacher also
requires that only the email addresses that are inserted in the email
textbox be checked so that only users who place their email addresses
correctly are allowed to execute the operation stated above.
Error message if the email address entered has errors. For example, there
are no @ or ÂÊ.
TASK
You are requested to create a form that can produce addition result once the
Add button was clicked using VBScript codes. Once completed, display the
result in web browser and the HTML codes and send it to your tutor for
verification.
You have learnt the important VBScript characteristics and syntax. Besides
being a client-side script, VBScript is also used as the foundation language
at the server-side. In other words, VBScript can also be run at the server.
In the next topic you will study yet another scripting language called Active
Server Pages (ASP). This script runs on VBScript-based servers.
Looping VBScript
Sub functions
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. State the advantages of Active Server Pages (ASP);
2. Create ASP files;
3. Declare variables and data in ASP;
4. Apply functions and syntax in ASP; and
5. Use forms in ASP.
INTRODUCTION
Script programming at the server using CGI is difficult to perform. This is
because you need to have knowledge on Perl and C. To overcome this problem,
Microsoft introduced Active Server Pages (ASP). ASP has syntax that is easier
and capable of creating a plethora of applications that are developed compared
to using CGI before. In this topic, you will learn basic ASP script programming.
You will also explore characteristics and syntax for some primary objects in ASP.
ACTIVITY 9.1
Why is there a need for ASP when HTML is already in existence? What is
its advantage?
You may have heard from someone or read about ASP. ASP is the abbreviation
for Active Server Pages. ASP can be referred to as an application that can be run
in IIS. IIS is the abbreviation for a Microsoft product called Internet Information
Services. IIS is also a type of web server.
(b) Able to access information in databases and display them on the website.
If HTML files have the extension *.htm, ASP files on the other hand end with .asp
such as index.asp. ASP files are the same as normal HTML files. You can insert
text, HTML, XML and script. The difference is in the way ASP files are processed
before being displayed to the web browser. When a web browser requests a
HTML file, the server sends the file to the client to be opened by the web
browser. In contrast, when a web browser requests an ASP file, IIS at the server
will process the file line by line and the result is sent to the client in text form.
ACTIVITY 9.2
Beginning the script with <% and ending it with %>. For example:
<%
...ASP Script
%>
Insert the property runat = server in the SCRIPT tag. The code is as follows:
You can use the Write method in the Response object to display text at the
web browser. For example, the code below will display the text „Hello World‰
on the web browser.
Response.Write(“Hello World”)
ACTIVITY 9.3
Response.Redirect(“file_name”)
For example:
Response.Redirect(“erratum.asp”)
In the example above, ASP application will quit the processing of any file
currently open and jump to the file erratum.asp.
9.3 VARIABLES
There are two types of variables that can be declared in ASP and they are
Session or Application.
The Session variable stores information pertaining to a user. Hence, the same
variable will have different values for other users. This variable will begin storing
values as long as the user does not close the web browser. In general, this type of
variable is suitable for storing user information like name, ID, password, etc. The
syntax to accumulate the value at the Session variable is as follows:
Session(“variable_name”) = value
Session(“employee_id”) = A1302
The Application variable can be accessed by all users using the application.
Normally, the Application variable stores values that belong to all users. For
example, variables that store the number of visitors that have visited your
website. The syntax is as follows:
Application(“variable_name”) = value
Application(“system”) = “Student Information System”
<%=variable%>
For example:
<%=x%>
<%=Session(“employee_id”)%>
ACTIVITY 9.4
Variables in ASP
(a) Open a new file in Notepad and save the file as activity3.asp in the
OUM folder. (Server)
(b) Type the following code:
<%
dim count
count = count + 1
Session(“visitor_name”) = “Ahmad”
Application(“visitor_no”) = count
%>
Welcome <%Session(“visitor_name”)%>, you are
visitor number <%=Application(“visitor_no”)%>
(c) Save the file again.
(d) Open the web browser and type http://
localhost/OUM/activity3.asp
(e) Click the Refresh button and see the change to the visitor number in
your website.
ACTIVITY 9.5
<%
sub sub_name(argument1, argument2, etc)
ASP instructions
end sub
%>
ACTIVITY 9.6
Functions in ASP
(a) Open a new file in Notepad and save the file as activit4.asp in the
OUM folder. (Server)
(b) Type the code below:
<html>
<head>
<%
sub total(num1,num2)
response.write(num1+num2)
end sub
%>
</head>
<body>
The total of 5 and 9 is: <%call total(5,9)%>
</body>
</html>
(c) Save the file again.
(d) Open the web browser and type in http://localhost/OUM/
activity4.asp
Response.Querystring will take the form values in text format. For this, you
need to use method = get (observe the value for method in the form above).
The user can see this value. For example, if the form above is filled in as En.
Ahmad, the text that contains the formÊs value will be sent to process.asp will be
as follows:
http://localhost/Unitem/process.asp?title=En.&name=Ahmad
In the process.asp file, the value for title and name will each be received by
Response.Querystring. An example of the code for process.asp is:
<body>
Welcome
<%
response.write(request.querystring(“title”))
response.write(request.querystring(“name”) & “!”)
%>
</body>
The output for the above code is:
Welcome En. Ahmad
Response.Form on the other hand uses the method=post property in the
form. This method hides the values sent from the visitor. In the process.asp file,
Response.Querystring will receive each value for title and name. The code
for process.asp that uses Response.Form is:
<body>
Welcome
<%
response.write(request.form(“title”))
response.write(request.form(“name”) & “!”)
%>
</body>
Try Activity 9.7 to get familiar with another property for form.
ACTIVITY 9.7
Forms in ASP
(a) Open a new file in Notepad and save this file as activity5.asp in the
OUM folder.
(b) Type the code below. Observe that the form will be sent to itself:
<html>
<body>
<form action= “activity4.asp” method= “post”>
Insert your name:
<input type= “text” name= “name”>
<br>
<input type= “submit” value= “Send”>
</form>
<%
If Request.Form(“name”)<>”” Then
Response.Write (“Hello “ & Request.Form (“name) &
“.”)
else
Response.Write (“Please follow instructions!”)
End if
%>
</body>
</html>
Have you seen the output for Activity 9.7? Now answer the questions below to
improve your comprehension.
ACTIVITY 9.8
In this topic, you have learnt the importance of ASP syntax. ASP
programming is not limited to applications that you have gone through in the
examples above.
OR
Thank you.