Assignment 2 Client Side Technology

Assignment 2 Client Side Scripting
A client-side script is a program that may accompany an HTML document or be embedded

directly in it. The program executes on the client's machine when the document loads, or at some
other time such as when a link is activated. HTML's support for scripts is independent of the
scripting language.
2.1 HTML
H-T-M-L are initials that stand for HyperText Markup Language
• Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion.
This before this, this before this, and so on. HTML does not hold to that pattern and allows the person
viewing the World Wide Web page to go anywhere, any time they want.
• Text is what you will use. Real, honest to goodness English letters.
• Mark up is what you will do. You will write in plain English and then mark up what you wrote.
More to come on that in the next Primer.
• Language because they needed something that started with "L" to finish HTML and
Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the
language is plain English.
• An HTML file is a text file containing small markup tags

• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
Tags are short codes surrounded by less than and greater-than signs, also called “angle brackets.”
Most tags are container tags: they have start and stop elements.
The stop element begins with a slash. The style or property of the tag will apply to its contents.
Example: <P> </P>
HTML Tag Attributes
• HTML tags can have attributes. Attributes provide additional information to an HTML
element.
• Attributes always come in name/value pairs like this: name="value".

• Attributes are always specified in the start tag of an HTML element.
Attributes Example
• <h1> defines the start of a heading.

• <h1 align="center"> has additional information about the alignment.
 Skeleton
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>
Document content
</BODY>
</HTML>
(1) <HTML>...</HTML>
These tags surround the entire document and define the page as an HTML page.
VERSION="..." - URL of document containing type definition of the version used to create the
HTML document
(2) <HEAD>...</HEAD>
This is the first section of an HTML page.
The document header resides within these tags - defines the header information, such as the
<TITLE> in an HTML page.
There can only be one HEAD tag and it must follow the HTML tag and precede the BODY tag.
PROFILE="..." - URL for the lcation of META data
(3) <BODY>...</BODY>
This is the second section of an HTML page - defines the body information, i.e. the content of an
HTML page.
There can only be one BODY tag, it must follow the HEAD tags.
Attributes:
BGCOLOR="..." - sets the background colour using either the colour name or the hex number
BACKGROUND="..." - specifies the URL of the background image to be tiled
TEXT="..." - sets the text colour using either the colour name or the hex number
LINK="..." - sets the link colour using either the colour name or the hex number
VLINK="..." - sets the visited link colour using either the colour name or the hex number
ALINK="..." - sets the active link colour using either the colour name or the hex number
ONLOAD="..." - triggered event when document loads
ONUNLOAD="..." - triggered event when document unloads
(4) Styling text

<I> </I> Italic
<EM> </EM> Emphasis (same as italic)
<B> </B> Bold
<STRONG> </STRONG> Strong (same as bold)
<BIG> </BIG> Make text one size bigger
<SMALL> </SMALL> Make text one size smaller
<U> </U> Underline
<S> </S> Strikethrough
<FONT>...</FONT> Allows specification of the font size, color and
style (face)
Attributes:
FACE="..." sets the font type, i.e. Arial, Times New Roman, Comic Sans, etc.
SIZE="..." sets the font size. Use 1 to 7, or relative sizes, i.e. -1, +0, +1, etc.
COLOR="..." sets the font colour using either the colour name or the hex number
(5) Dividing and spacing text
1. <H3>...</H3> to <H6>...</H6>
There are 6 header tags, <H3>...</H3> to <H6>...</H6> , <H3>...</H3> being the largest.
Attributes:
ALIGN="..." - LEFT, CENTER, RIGHT or JUSTIFY
2. <P>...</P> graph tags

Text within the paragraph tags will begin on a new line, and the paragraph will be separated by a
blank line before and after the paragraph.
In most browers it will work without an end tag, but to be on the safe side, always enclose your
paragraph in a beginning and an end paragraph tag.
Attributes
ALIGN="..." LEFT, CENTER, RIGHT and JUSTIFY
3. <HR> Horizontal Rule - inserts a horizontal line across the screen placing everything
before it above the line, and everything after in below the line. Usually there will
be some blank space inserted above and below it automatically by the browser.
This is a one sided tag - it doesn't act on anything.
Attributes
ALIGN="..." - LEFT, CENTER, RIGHT or JUSTIFY

NOSHADE="..." - rule is a solid color, not shaded
SIZE="..." - the size (height) of the horizontal rule
WIDTH="..." - the width of the horizontal rule
4. <BR> Forces a line break.

This tag is one sided - it does not act on anything.
Attributes
CLEAR="..." - NONE, LEFT, RIGHT or ALL, sets the location of the start of the next line
(6) <PRE> </PRE> tags appears preformatted—exactly as typed, preserving all spaces,
returns, tabs, and other whitespace characters usually ignored in markup.
(7) Lists Lists are automatically indented. There are three kinds.
<UL> </UL> Unordered list

<OL> </OL> Ordered list
<DL> </DL> Definition list
For ordered or unordered lists, list items are indicated with LI:
<LI> </LI> List item (for UL or OL lists)
The bullet type of the UL list is defined with a TYPE attribute of SQUARE, CIRCLE, or DISC
Ordered lists are automatically incremented for each item.
Numerals are the default, but TYPE attributes of A, a, I, or I can be used to specify letters or
Roman numerals. To start a listfrom a certain number, add a START attribute.
<OL START=”5” TYPE=”i”>
(8) Images
Most HTML documents contain images. You can add images with the <IMG> tag.
<IMG SRC=”filename.jpeg”>
Attribute:
WIDTH image width, in pixels or percentage
HEIGHT image height, in pixels or percentage
ALT alternate text
VSPACE vertical space, in pixels
HSPACE h orizontal space, in pixels
ALIGN alignment
BORDER border surrounding the image, in pixels
(9) Tables
Tables can be extremely useful for organizing data or controlling layout. A table is made up of
rows and cells. Each row needs to have at least one cell.
<TABLE> </TABLE> Table
Attributes:
BORDER border around table, in pixels
CELLPADDING margin inside cells, in pixels
CELLSPACING space between cells, in pixels
BGCOLOR color of table background
WIDTH table width, in pixels or percentage
ALIGN alignment of table relative to page
<TR> </TR> Table row

<TD> </TD> Table data (cell)
<TH> </TH> Table header (cell)
Attributes:
BGCOLOR color of row or cell background

WIDTH width, in pixels or percentage
ALIGN horizontal alignment of table contents
VALIGN vertical alignment of table contents
ROWSPAN number of rows cell should span
COLSPAN number of rows cell should span
(10) Frames - A Generic Frame Page

Frames are most typically used to have a menu in one frame, and content in another frame. When
someone clicks a link on the menu that web page is then opened on the content page. Here is a
classic example of a basic "index" frameset with a menu on the left and content on the right.
HTML Code:
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Frame Set:
Here's the example: Frame Index
frameset The parent tag that defines the characteristics of this frames page.
Individual frames are defined inside it.
frameset cols="#%, *"Cols(columns) defines the width that each frame will have. In the above
example we chose the menu (the 1st column) to be 30% of the total page
and used a "*", which means the content (the 2nd column) will use the
remaining width for itself.
frame src="" The location of the web page to load into the frame.
(11) Hyperlinks
Important Definitions:
Source Page The page containing the hyperlink.

Destination Page The page being linked to, i.e. you click a hyperlink in the
source page to go to the destination page.
Directory Folder (these terms are interchangeable)
Hyperlinks are created with an "href" tag (hyperlink reference).
<a href="page1.html">Go To Page 1</a>
There are two distinct types of hyperlink: "absolute" and "relative". Absolute links are quite
simple, but relative links take a bit of getting used to. Relative links are actually divided into two
further categories: "document-relative" and "site-root-relative".
1. Absolute Links
An absolute link (or "absolute URL link") contains a complete internet address, just the same as
if you typed the address into your browser's address bar. It doesn't matter where the source page
is in relation to the destination page, the link will always work as long as the destination page
exists. Most absolute links begin with "http://" and follow this simple format:
<a href="http://www.mysite.com/index.html">Go To My Site</a>
2.Document-Relative Links
Document-relative links use directions from the source page to the destination page, sort of like
saying "Start here then follow this path until you reach the destination".
There are three ways to do this - the method you use will depend on the location of the source
and destination pages in relation to each other. We will use the example on the right and create
hyperlinks from the page called sourcepage.html to other pages in the site.
(1) If the destination page is in the same directory as the source page
All you need to specify is the source file name:
<a href="page1.html">Go To Page 1</a>
(2) If the destination page is in a folder inside the source page's folder
Specify the folder name and then the file name:
<a href="directory2/page2.html">Go To Page 2</a>
(3) If the destination page is in a folder outside the source page's folder
Use the special instruction ../ which signifies "one directory higher".
The following link means "Go up one directory level, then go to a folder called directory3, then
to a file called page3.html":
<a href="../directory3/page3.html">Go To Page 3</a>
You can repeat the ../ to make the link more than one level higher, for example, "Go up two
levels, to a file called index.html":
<a href="../../index.html">Go To The Index Page</a>
Important Note: For relative links to work, you must keep the file structure intact. For example,
if you moved the sourcepage.html file down into the directory2 folder, the relative links would
no longer work. In this case you would need to add another ../ to point the links to the correct
level. For example:
<a href="../../../index.html">Go To The Index Page</a>
3. Site-Root-Relative Links
Site-root-relative links use a single forward-slash / to signify the instruction: "Start at the
document root of the site and go down the directory path from there."
The format is:
<a href="/main-directory/directory4/page4.html">Go To Page 4</a>
Despite the cumbersome name, this method is quite simple. The link begins at the same level as
your domain and works down from there. The link above is the same as:
<a href="http://www.mysite.com/main-directory/directory4/page4.html">Go To Page 4</a>
This method has the significant advantage of staying intact if you move the source page. The
exact same link will work from any page anywhere in the site.
Important Notes:
• This method will not work on files on your own hard drive unless you run them through a
personal web server. However once you upload the pages to your server they will work.
• If your site does not have it's own domain name, this method is likely to cause problems.
Consult your hosting provider for more information.
Targets
You can specify a target window or frame for a hyperlink. This is where the linked page will
open. If no target is specified, the link will open in the same window/frame. The format is this
(where the target is "self"):
<a href="page1.html" target="_self">Go To Page 1</a>
The target window options are:
_self Opens in the same window and same frame.

_top Opens in the same window, taking the full window if there is more than one frame.
_parent Opens in the parent frame.
_blank Opens in a new window.
If you have a frameset defined, you can set your target as any particular frame.
For example, if you have a navigation frame called"nav" and a main frame called "main", set the
target of your navigation links like so:
<a href="page1.html" target="main">Go To Page 1</a>

<a href="page2.html" target="main">Go To Page 2</a>
Important Note: Instead of specifying a target for each individual link, you can define a "base
target" for an entire frame or page. This means that every link on the page will use the base
target by default. Place the base target tag in the page's head.
Example: <base target="_blank">

4. Link to a Specific Part of a Page (Internal Hyperlink)
An internal hyperlink is a link which points to a particular part of a page. This can be useful in
long pages with lots of sub-sections. For example, the links at the top of this page are internal
links pointing to each sub-heading.
Internal hyperlinks require an anchor tag with the "name" attribute like so:
<a name="part2">Part 2</a>
Create an anchor like this at the place in the page you want to link to. It doesn't matter if there is
anything between the open and close tags.
Then create a hyperlink which refers to this anchor with a hash (#) like so:
<a href="#part2">Go To Part 2</a>
This assumes that the name anchor is on the same page as the hyperlink. To link to an anchor on
a separate destination page, simply create a normal link with the anchor name appended to the
file name like so:
<a href="page1.html#part2">Go To Page 1, Part 2</a>
Important Notes:
• Browsers treat internal links exactly the same way as normal links, i.e. as if they were a
separate page. This can result in some confusion with back and forward buttons.
• If an internal hyperlink on the same page doesn't work, try including the page's file name
in the hyperlink (as if you were linking to a separate page).
• Sometimes internal hyperlinks don't work in pages on your hard drive unless you are
running a personal web server. They will work when you upload them to your site.
5. E-Mail Links (mailto)
E-Mail links, otherwise known as a "mailto" links, use the following format:
<a href="mailto:myname@mysite.com">Click Here to Email Me</a>
This type of link is a special case, completely different to those described above. Instead of
linking to a place on the internet, clicking this link causes the user's computer to open it's default
email program (e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified
address. The user then enters their message and sends the email in the normal way.
If you want to be tricky, you can add a "subject" attribute to the link. This will automatically
insert the specified subject line into the email:
<a href="mailto:myname@mysite.com?subject=Inquiry From Website">Click Here to Email

Me</a>
Important Notes:
• The subject attribute doesn't work in all browser/email programs. Those programs which
don't support it will probably just ignore it, but there are no guarantees that it won't cause
an error. Use at your own risk.
• Be aware that using mailto links on your website is an open invitation to spam. Malicious
programs called "email harvesters" troll the internet looking for these links - when they
find yours they will add it to a database for spammers. This is why we recommend using
a contact form rather than a mailto link wherever possible.
(12) MetaData Information:
Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed
on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document,
last modified, and other metadata.
The <meta> tag always goes inside the head element.
(13) How to Use Styles
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
• External style sheet

• Internal style sheet
• Inline styles
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal styles are
defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an
element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example below shows how to change the text color and the left margin of a
paragraph:
<p style=”color:blue;margin_left:20pt>
(14) Forms
Interactive forms let web page authors give their pages interactive elements, such as for
receiving messages from their readers, much like the reply cards found in some magazines.
The reader enters information by filling in fields or clicking on buttons, then pressing a submit
button to send it to a URL, normally one pointing to an e-mail address or to a dynamic web script
like PHP, ASP, or a CGI script.
The FORM tag
Forms are delimited with the <FORM> ... </FORM> tag, which contains several form
elements, such as buttons and text boxes, and which must possess the following attributes:
METHOD Indicates how replies will be sent
"POST" is the value that sends the data to the processing agent by storing it in the body of
the form, while "
GET" sends the data by adding it to the URL, separating it from the address with an
exclamation
ACTION indicates the address that the information will be sent to (a CGI script or e-mail
address (mailto:email.address@machine))
Here are a few examples of FORM tags:
<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">
<FORM METHOD=GET ACTION="http://en.kioskea.net/cgi-bin/script.cgi">
Inside the FORM Tag
The FORM tag acts as a sort of container for storing elements which let the user select or enter
data. All data will be sent to the URL indicated in the ACTION attribute of the FORM tag by the
method indicated by the METHOD attribute.
Any basic HTML element may be inserted into a FORM tag (such as text, buttons, tables, and
links), but the interactive elements are the most important. These interactive elements are:
• The INPUT tag: All buttons and text boxes

• The TEXTAREA tag: A text box
• The SELECT tag: A multiple-choice list
(15) The INPUT Tag
The INPUT tag is the essential form tag, since it is used to create many interactive "elements."
This tag's syntax is as follows:
<INPUT type="Field Name" value="Default Value" name="Element Name">
Attributes:
The name attribute is essential, as it lets the CGI script know which field is associated with
which name/value pair, meaning that the name of the field will be followed by an equal sign
("=") followed by the value entered by the user, or if the user didn't input a value, by the default
valuefor the value attribute.
The type attribute is used to specify which type of element is represented by the INPUT tag.
These are the possible values:
• checkbox: Checkboxes can be in one of two states: checked or unchecked. When the box
is checked, the name/value pair is sent to the CGI.
• hidden: This field, which the browser does not display, is for defining a fixed setting that
will be sent to the CGI as a name/value pair.
• file: A field that lets the user specify a filepath leading to a file that will be sent along
with the form. The file types that can be sent should be specified, by using the ACCEPT
attribute of the FORM tag
• image: A customised submit button, which appears as whatever image is at the location
defined by its SRC attribute
• password: A textbox, in which the characters that are entered show up as asterisks, in
order to camouflage the input text.
• radio: A button allowing the user to choose from between several options. Each of these
radio buttons must have the same name attribute. The name/value pair of the radio button
selected will be sent to the CGI. Using the checked attribute for one of the buttons lets
you define it as being selected by default.
• reset: A reset button for clearing all elements in the form by setting them back to their
default values.
• submit: A submit button to send the form. The text on the button can be set using the
value attribute.
• text: A textbox for entering a line of text. The size of the box may be defined using the
size attribute and the maximum length of the text with the maxlength attribute.
(16) The TEXTAREA tag
The TEXTAREA tag is for defining a textbox bigger than just the single line allowed by the
INPUT tag.:
Attributes:
• cols: represents the number of characters that a line may contain

• rows: represents the number of lines
• name: represents the name associated with the textbox, which allows it to be identified in
the name/value pair.
• readonly: prevents the user from changing the default text in the field
• value: represents the default value that will be sent to the script if the user has not entered
anything in the textbox
(17)The SELECT tag
The SELECT tag is for creating a dropdown list of elements (specified by the OPTION tags
within it).
Attributes:
• name: represents the name associated with the textbox, which allows it to be identified in
the name/value pair.
• disabled: creates a disabled list, shown as being grayed out
• size: represents the number of lines in the list (this value may be larger than the number
of actual elements in the list)
• multiple: enables the user to select several fields in the list
2.2 Java script

• A lightweight programming language that runs in a Web browser (client-side).
• Embedded in HTML files and can manipulate the HTML itself.
• Interpreted, not compiled.
• JavaScript is not Java.
– Developed by Netscape, not Sun.

– Only executed in a browser.
– Is not a full-featured programming language.
– However, the syntax is similar.
Why use JavaScript?
• To add dynamic function to your HTML.

• JavaScript does things that HTML can’t—like logic.
• You can change HTML on the fly.
• To shoulder some of the form-processing burden.
• JavaScript runs in the browser, not on the Web server.
• Better performance
• JavaScript can validate the data that users enter into the form, before it is
sent to your Web application.
When not to use JavaScript?
• When you need to access other resources.

– Files
– Programs
– Databases
• When you are using sensitive or copyrighted data or algorithms.
– Your JavaScript code is open to the public.
Add JavaScript to HTML
• In the HTML page itself:

<html>
<head>
<script language=“javascript”>
/ / JavaScript code
</script>
</head>
• As a file, linked from the HTML page:

<head>
<script language=“javascript” src=“script.js”>
</script>
</head>
Functions
JavaScript instructions are usually grouped together in a function:

function myFunction(parameters) {
// some logical grouping of code
}
</script>
Like a method, procedure, or subroutine functions are called by events.
Events
• JavaScript is event-driven.
– onClick – link or image is clicked
– onSubmit – a form is submitted
– onMouseOver – the mouse cursor moves over it
– onChange – a form control is changed
– onLoad – something gets loaded in the browser etc.
–
• Events are specified in the HTML code.
Event example
<html>
<head>
function funct() {
// code
}
</script>
</head>
<body>
<img src=“pic.gif” onClick=“funct();”>
</body>
</html>
Variables
JavaScript has untyped variables.

Variables are declared with the var keyword:
var num = “1”;
var name = “Mel”;
var phone = “123-456-7890”;
Cookies
• JavaScript provides some limited, persistent storage, called cookies:

– Data is stored in a text file on the client
– name=value
–Multiple values are delimited by a semicolon
• Use sparingly. There are limits (generally):
– Up to 300 cookies per browser, 20 cookies per web server,
and 4 KB of data per cookie
• Don’t depend on cookies—users can block or delete them.
• By default, cookies are destroyed when the browser windowis closed, unless you explicitly set
the expires attribute.
– To persist a cookie, set the expires attribute to a future date.
– To delete a cookie, set the expires attribute to a past date.
• By default, cookies can only be read by the web page that wrote them unless you specify one or
more of these.
Attributes:
– path allows more than one page on your site to read a cookie.
– domain allows multiple servers to read a cookie

Assignment 2 Client Side Technology

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment 2 Client Side Technology

Uploaded by

Copyright:

Available Formats

Assignment 2 Client Side Scripting

A client-side script is a program that may accompany an HTML document or be embedded

H-T-M-L are initials that stand for HyperText Markup Language

• An HTML file is a text file containing small markup tags

• Attributes always come in name/value pairs like this: name="value".

• <h1> defines the start of a heading.

(4) Styling text

(5) Dividing and spacing text

2. <P>...</P> graph tags

ALIGN="..." LEFT, CENTER, RIGHT and JUSTIFY

ALIGN="..." - LEFT, CENTER, RIGHT or JUSTIFY

4. <BR> Forces a line break.

<UL> </UL> Unordered list

<OL START=”5” TYPE=”i”>

ALIGN alignment of table relative to page

<TR> </TR> Table row

BGCOLOR color of row or cell background

(10) Frames - A Generic Frame Page

Here's the example: Frame Index

Source Page The page containing the hyperlink.

Hyperlinks are created with an "href" tag (hyperlink reference).

<a href="page1.html">Go To Page 1</a>

<a href="http://www.mysite.com/index.html">Go To My Site</a>

<a href="page1.html">Go To Page 1</a>

<a href="directory2/page2.html">Go To Page 2</a>

<a href="../directory3/page3.html">Go To Page 3</a>

<a href="../../index.html">Go To The Index Page</a>

<a href="../../../index.html">Go To The Index Page</a>

<a href="/main-directory/directory4/page4.html">Go To Page 4</a>

<a href="http://www.mysite.com/main-directory/directory4/page4.html">Go To Page 4</a>

<a href="page1.html" target="_self">Go To Page 1</a>

The target window options are:

_self Opens in the same window and same frame.

<a href="page1.html" target="main">Go To Page 1</a>

Example: <base target="_blank">

<a name="part2">Part 2</a>

<a href="#part2">Go To Part 2</a>

<a href="page1.html#part2">Go To Page 1, Part 2</a>

5. E-Mail Links (mailto)

<a href="mailto:myname@mysite.com">Click Here to Email Me</a>

<a href="mailto:myname@mysite.com?subject=Inquiry From Website">Click Here to Email

(12) MetaData Information:

Metadata is information about data.

The <meta> tag always goes inside the head element.

(13) How to Use Styles

There are three ways of inserting a style sheet:

• External style sheet

External Style Sheet

Internal Style Sheet

The FORM tag

METHOD Indicates how replies will be sent

Here are a few examples of FORM tags:

<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">

<FORM METHOD=GET ACTION="http://en.kioskea.net/cgi-bin/script.cgi">

Inside the FORM Tag

• The INPUT tag: All buttons and text boxes

(15) The INPUT Tag

<INPUT type="Field Name" value="Default Value" name="Element Name">

(16) The TEXTAREA tag

• cols: represents the number of characters that a line may contain

(17)The SELECT tag

2.2 Java script