Website Development Cycle

Prepared by: SAEstrada

DCIT 65 – Web DevelopmentLecture 3

WEBSITE DEVELOPMENT LIFE CYCLE

I. Web Site Planning

Is the first phase Involves identifying the goals or purpose of the website (what is

the purpose, who will use it age, gender, demographic background, and level of computer literacy)

II. Web Site Analysis Define the appropriate web site content and functionality Identify the tasks that users need to perform Consider the process required to support web site features. Ex.

confirmation

III. Web Site Design and Development Defining how to organize web page content Selecting the appropriate web structure Determining how to use multimedia Addressing accessibility issues Designing pages for an international audience

DIFFERENT TYPES OF STRUCTURES1. Linear Web Site – connects pages in a straight line, appropriate if

the information on the web pages should be read in a specific order.

2. Hierarchical Web Site – connects pages in a tree-like structure, works well in site with a main index or table of contents page that links to all other web pages.

3. Webbed Web Site – has no set of organization, works best on web sites with information that does not need to be read in a specific order and with many navigation options users can select.

4. Broad Web Site – is one in which the home page is the main index page and all other web pages are linked individually to the home page.

5. Deep Web Site – is one that has levels of pages, requiring the user to click many times to reach a particular web page.

IV. Web Site Testing Should be comprehensive and include a review of web page content,

functionality and usability

V. Web Site Implementation Involves the actual publishing of the web pages to a web server

BODY ATTRIBUTES

1. <background> - can be an image file.2. <bgcolor> - color name (or hexadecimal), defines the background color of

your page3. <font> - formats the text of your web page

Attribute: <size> - the range is from 1 to 7; 3 is the default size

1



<color> - color name(or hexadecimal) <face> - font name ;

ex. <font face = ‘Arial’>Good Morning</font>4. <link> - defines the color of the hyperlink5. <alink> - defines the color of the active link6. <vlink> - defines the color of the visited link

Additional Text Formatting Tags1. <center> - used to center text2. <marquee> - runs only in IE

7 Attributes of Marqueea. direction – left, right, down, upb. behavior – scroll, slide, alternatec. bgcolor – color name (or hexadecimal)d. width – n%e. height – n%f. scrollamount – in millisecondsg. scrolldelay – in milliseconds

HR tag – used to separate different areas of a web page; like <br> it does not have a closing tag.

Attributes of HRa. color – color name (or hexadecimal)b. width – n (pixel width) or n% (certain % of the screen width)c. size – n (thickness in pixel)d. noshade – used to turn off the line shadinge. align – left/center/right

WEB PAGE IMAGES

used in many ways to enhance the look of a web page and make it more interesting and colorful.

used to add background color, help organize a Web Page, help clarify a point being made in the text, or serve as links to other wed pages.

Images types – compressed file formats that supports multiple colors and extensions: graphics interchange format(.gif) joint photographic experts group(.jpeg) portable network graphics(.png)

Image Tag<img> - used to display an image file in your web page.

Attributes for Image Taga. src – “filename”b. align – left, center, rightc. width – pixelsd. height – pixelse. HSPACE – pixels; specifies the horizontal distance of the text beside the image

2



f. VSPACE – pixel; specifies the vertical distance of text above or below the image.

g. Alt – “text”; specifies the alternative text to be displayed if the image was not loaded. Ex. <img src = “filename”> text

Anchored Links <a>..</a> - indicates an anchor for a piece of text or image that serves as an origin of the hyperlink.

<a href = “url”> linking text and/or image </a>; the url can be another document, program, an image, audio or video file.

Attributes of Anchored Taga. href –link destination (path); specifies the hyperlink reference or file to be

accessed in the form of a filenameb. name – “bookmark”; given name to the link destination marke; it is used to

identify a bookmark within an html file.c. target – “frame label”; indicates the name of a specific frame into which you

load the linked document.Special Targets:

“_blank” – link is loaded into a new blank window“_self” – link is loaded into the current browser window“_top” – link is loaded into the frame where link was desired“_parent” – link is loaded in the immediate frameset parent

CREATING TABLES IN A WEBSITE

Tables allows you to organize information on a Webpage using HTML tags. are useful when you want to arrange text and images into rows and columns

in order to make the information straightforward and clear to the Webpage visitor.

used to create web pages with 2 newspaper-type column of text or structured lists of information.

used to position text and images. used to create a border or frame around an image.

Table Elements

Row – is a horizontal line of information.

Column – is a vertical line of information.

Cell – is the intersection of a row and a column.

2 Types of Cella. heading cell – displays text as bold and center-aligned.b. data cell – displays normal text that is left-aligned.

Table borders – is the line that encloses the perimeter of the table.

Table Header – is the same as a heading cell.

3



Table Caption – is a descriptive text located above or below the table that further describes the purpose of the table.

Rule Attribute – allows a web developer to select which internal borders to show.

rules = “none” creates a table with no internal rulerules = “cols” creates a table with vertical rules between each column in the

tablerules = “rows” creates a table with horizontal rules between each row in the

table

Table Tags

<table> </table> - start and end of the table

<tr> </tr> - indicates the start and end of a table row.

<th> </th> - indicates the start and end of a table heading.

<td> </td> - indicates the start and end of a data cell in a table.

Table Tag Attributes and FunctionsTAG ATTRIBUTE FUNCTION<table> </table> align

bgcolorbordercellspacingcellpaddingcolswidth

controls table alignment (left, center, right)sets background color for tabledefines width of table border in pixelsdefines space between cells in pixelsdefines space within cells in pixelsdefines number of columns.sets table width relative to window width

<tr> </tr> alignbgcolorvalign

horizontally align row (left, center, right)sets background color for rowvertically aligns row (top, middle, bottom)

<th> </th><td> </td>

alignbgcolorcolspanrowspanvalign

horizontally aligns cell (left, center, right)sets background color for cellsets number of columns spanned by a cellsets number of rows spanned by a cellvertically aligns cell (top, middle, bottom)

To create a borderless table

Ex. <table border =”0” cols = “2” width =”90%”>

A benefit of using a percentage to set the table width is that it automatically changes the width of the table if the window is resized in the browser.

To create table caption

Ex. <caption align = “bottom”><em> List of Students </em> </caption>

4



USING FRAMES IN A WEB SITE

Frame – is a rectangular area of a Web Page- basically, a window – in which a Web Page can be displayed.

Frames can be used for the following: To allow a Web site visitor to view more than one Web Page at a time To create a navigation menu, as a replacement for such objects as menu lists

and menu bars To display headers, navigation menus, or other information that needs to

remain on the screen as other parts of the Web page change.

Frame Tags

<frameset> - defines the structure of the frames within a window</frameset>

<frame> - defines a given frame;; required for each frame. No end tag

<noframe> - defines alternate content that appears if the browser does not support frames</noframe> - supported by multiple types and versions of browsers/

Frame Tag Attributes

Tag Attribute Function<frameset> cols indicates the number of columns

rows Indicates the number of rows

<frame> frameborder turns frame border on or offbordercolor changes the border colormarginwidth adjusts the margin on the left and right of

the framemarginheight adjusts the margin above and below a

document within a framenoresize locks the border of the frame to prohibit

resizingname defines the name of the frame that is used

as a targetscrolling indicates whether a scrollbar is presentsrc indicates the web page or other file to be

displayed in the frame

Defining rows and columns

The cols and rows attribute of the <frameset> tag set the number of columns and rows of the display area.

Ex. two rows<frameset rows = “30%, 70%”><frame src = “menu.html”><frame src = “mainpage.html” name=”mainwindow”>

5



</frameset>Ex. two columns

<frameset cols = “30%, 70%”><frame src = “menu.html”><frame src = “mainpage.html” name=”mainwindow”></frameset>

Defining Frame AttributesIn the <frame> tag, the frameborder attribute defines the border that

separates frames.By default, a border is gray.

Ex. <frameset rows = “30%, 70%”><frame src = “header.html” scrolling=”no” frameborder=”no”<frameset cols = “25%, 75%”><frame src =”menu.html” scrolling=”no” frameborder=”no”><frame src =”mainpage.html” name=”main window” frameborder=”no”></frameset></frameset>

The bordercolor can change the border to any color.

CREATING WEB PAGE FORM

When a form is included on a Web Page, the Web Page can be used to gather information from Web site visitors for a number of purposes.

Examples of forms commonly used on Web sites include:

A feedback form to gather visitor’s comments on the Web Site A guestbook users to sign in as visitor’s to the site A registration form for visitors to create an account, including a user name

and password A survey form to gather information on any number of topics A search form for users to initiate a search for a word, a phrase, or other

information An order form to select products and enter shipping and payment information

Note: whatever the purpose of the form, it should provide clear instructions to the users and allow users to fix any mistakes before submitting the form.

Three main components of the Web Page Form:1. Input controls2. A <form> tag, which contains the information necessary to process the form.3. A Submit button, which sends the data to be processed.

Input Control – is any type of input mechanism on a form.

Classification of input control:

6



Data input control – either radio button, check box (checkbox), a Submit button (submit), a Reset button (reset), or a selection menu (select)

Text input – is either A text box (text), in which the visitor may enter small amounts of text A textarea box (textarea), in which the visitor may enter larger

amounts of data or A password text box (password), in which the visitor may enter a

password

Form Input Controls

CONTROL FUNCTION REMARKStext Creates a single-

line field for a relatively small amount of text

Indicates both the size of the field and the total maximum length

password Identical to text boxes and for single-line data entry

Echoes(or masks) back the entered texts as asterisks or bullets

textarea Creates a multiple-line field for a relatively large amount of text

Indicates the number of rows and columns for the area

select Creates a drop-down list or menu of choices from which a visitor can select an option or options

Indicates the width of the list in number of rows

checkbox Creates a list item More than 1 item in the list can be chosen

radio Creates a list item Indicates only one item in the list can be chosen

submit Submits a form for processing

Tells the browser to send the data on the form to the server

reset Resets the form Returns all input controls to the data default status

Text control attributes:1. size – determines the number of characters that display on the form2. maxlength – specifies the maximum length of the input field.

Note: the maximum length of the field may exceed the size of the field that displays on the form.

Name: Password:

Radio Control

7

*********



Are you currently enrolled? Yes No

What subject(s) do you take? Differential Equation DBMS SAD History

Select Control

In what month do you take a trip?

Which country to you prefer to visit?

Textarea control

Two primary attributes of textarea control1. rows – specifies the number of rows in the textarea field2. cols – specifies the number of columns in the textarea field

fieldset control – helps to group related form elements together. This makes the form easier to read and complete.

Login Information

Name: Password:

Enrolled Subjects Are you currently enrolled? Yes No

What subject(s) do you take? Differential Equation DBMS SAD History

Reset Control and Submit Control

8

June

*********



Note: The type of information a form is intended to gather dictates what controld are used in the form. For example, to limit the number of choices a user can select, use radio buttons, checkboxes, or selection menu. For less structured input or input that varies from user to user, such as username, password, or comments, use a text or textarea field.

Regardless of the specific type , each input control has one or two attributes:

1. Name – the name attribute identifies the specific information that is being sent when the form is submitted for processing.

2. Value – all controls except textarea also have a value attributes. The value attribute is the type of data that is contained in the named input control. For the textarea field, no attribute is possible because of the variability of the input.

HTML TAGS USED TO CREATE FORMS

TAG FUNCTION REMARKS<fieldset> </fieldset> Groups related controls on

a formOptionally used for readability

<form> </form> Creates a form that allows user input

Required when creating a form

<input> Defines the controls used in the form, using a variety of type attribute values

Required for input controls

<legend></legend> Defines the text that displays in the grouping borders

Optionally used when using <fieldset> tags

<select> </select> Creates a menu of choices from which a visitor selects

Required for selection choices

<option> </option> Specifies a choice in a <select> tag

Required, one per choice

<textarea></textarea> Creates a multiple-line text input area

Required for longer text inputs that appear on several lines

ATTRIBUTES OF HTML TAGS USED TO CREATE FORMS

TAG ATTRIBUTE FUNCTION<form> </form action URL for action completed

by the servermethod HTTP method (post)target Location at which the

resource will display<input> type Type of input control (text,

9

Submit Reset



password, checkbox, radio, submit, reset, file, hidden, image, button)

name Name of the controlvalue Value submitted if a

control is selected (required for radio and checkbox controls)

checked Sets a radio button to a checked state (only one can be checked)

disabled Disables a controlreadonly Used for text passwordssize Number of characters that

display on the formmaxlength Maximum number of

characters that can be entered

src URL to the location of an image stored on the server

alt Alternate text for image control

tabindex Sets tabbing order among control elements

<legend> </legend> align Indicates how a legend should be aligned

<select></select> name Name of the elementsize Number of options visible

when Web page is first opened

multiple Allows for multiple selections in select list

disabled Disables a controltabindex Sets the tabbing order

among control elements<option> </option> selected Specifies whether an

option is selecteddisabled Disables a controlvalue Value submitted if a

control is selected<textarea></textarea> name Name of the control

rows Width in number of rowscols Height in number of

columnsdisabled Disables a controlreadonly Used for text passwordstabindex Sets the tabbing order

among control elements

Creating a Form and Identifying the Form Properties

10



The action attribute of the <form> tag specifies the action that is taken when the form is submitted.

Information entered in forms can be sent by e-mail to an email address or can be used to update a database.

The method attribute of the <form> tag specifies the manner in which the data entered in the form is sent to the server to be processed.

Two primary ways are used in HTML:a. get method – sends the name-value pairs to the end of the URL indicated in the action

attribute.

b. post method – sends a separate data file with the name-value pairs to the URL (or email address) indicated in the action attribute.

Adding Text Boxes

1 <html>2 <head>3 <title>Sample TextBoxes </title>4 </head>56 <body>7 <h2> Student Information </h2>8 <form>910 Lastname : <input name = "lname" type="text" size="25">11 <br /> Firstname: <input name = "fname" type="text" size="25">12 <br /> Student Number: <input name = "studno" type="text" size="25">1314 </form>1516 </body>1718 </html>

Adding Check BoxesInsert the following script on line 13

13 <p> Select the subjects that you would like to enroll:14 <br/>15 <input name = "pictype" type="checkbox" value=subj1">System Analysis 16and Design17 <input name = "pictype" type="checkbox" value="subj2">Database 18Management Systems19 <input name = "pictype" type="checkbox" value="subj3">Information 20Resource Management21</p>

Adding a Selection MenuInsert the following script in line 23

23 <br />Semester:24 <select name="sem">25 <option>First</option>26 <option>Second</option>27 <option>Summer</option>28 </select>

11



Adding Radio Buttons Insert the following script in line 30

30 <br />31 <br /> Do you have scholarship?32 <input name = "scholarship" type="radio" value="yes">Yes33 <input name = "scholarship" type="radio" value="no">No

Adding a TextareaInsert the following script in line 35

35 <p> What other elective subjects you would like to enroll?36 <br /> <textarea name="elective" rows="6" cols="50"></textarea>37 </p>

Adding Submit and Reset Button

<p> <input type="submit" value="Submit"><input type="reset" value="Reset">

</p>

<p> <input type="submit" value="Submit"><input type="reset" value="Reset">

</p>

12



13



CREATING STYLE SHEETS

Style – is a rule that defines the appearance of an element on Web page.

Style Sheet – is a series of rules that defines the style for a Web page, or an entire Web Site.

- allows you to change the style for a single element on a Web Page, such as paragraph, or to change the style of elements on all of the pages in a Web site.

Cascading Style Sheets(CSS) – allows a Web developer to write code statements that control the style of elements on a Web page.

- it is not HTML. It is a separate language used to enhance the display capabilities of HTML.

- W3C defines the specifications for CSS.

3 types of Style Sheets

1. inline – add a style to an individual HTML tag (eg. Heading, paragraph)

Ex. <p style=”font-style: italic; font-size: 8 pt”>

2. embedded – add the style sheet within the <head> tags of the HTML document to define the style for an entire Web page.

- need <style> tags to start and end the style sheet.

Ex.

<style type=”text/css”><!—

a {text-indent:8pt}

a {text-decoration:none font-family:Verdana; font-size:14pt; color:navy}

a: hover {background; navy; color: white}

-- ></style>

3. external (or linked) – create a text file within the file extension, .css and you then add a link to this external style sheet into a Web page in the web site.

- does not need <style> tags to start and end the style sheet.- For each web page to which you want to apply the styles in an external

style sheet, a <link> tag should be inserted within the <head> tags of the Web Page

Ex. of link

14



<link rel=”stylesheet” type=”text/css” href=”styles1.css”>

The property-value statement rel=”stylesheet” defines the relationship of the linked document (that is, that it is a stylesheet).

The property-value statement type=”text/css” indicates the content and language used in the linked document.

The property-value statement href=”styles1.css” indicates the name and location of the linked style, style1.css.

Ex.

a {text-decoration:none; color:blue

p {font-family; Verdana, Garamond; font-size; 11pt}

table {font-family; Verdana, Garamond; font-size: 11pt}

th {color:white; background-color:blue; font-size:11pt: text-align:left}

Style Sheet Precedence

An external style sheet is used to define styles for multiple pages in a Web site.

An embedded style sheet is used to change the style of one Web page, but overrides or takes precedence over any styles defined in an external style sheet.

An inline style sheets is used to control the style within an individual HTML tag and takes precedence over any styles within an individual HTML tag and takes precedence over the styles defined in both embedded and external style sheets.

Type LEVEL AND PRECEDENCEInline To change the style within an individual

HTML tagOverrides embedded and external style sheets

Embedded To change the style of one Web PageOverrides external style sheets

External To change the style of multiple pages in a Web site

Style Statement Format A Style statement is made up of a selector and a declaration that defines the style for one or more properties.

15



Ex. inline statement<h1 style = “font-family: Garamond; font-color: navy”>

Selector – the part of the style statement that identifies the page elements.

Declaration – the part of the style statement that identifies how the elements should display

Property – one type of style that is applied to the selected element. Ex. of Properties:

1. color2. text-indent3. border-width4. font-style

Value – specifies the display parameters for the specific property.

h1 {font-family: Garamond; font-size:32 pt}

Properties and Values

Property Name Options that can be controlledbackground color

image position

border color style width

font family size style variant weight

list image position type

margin length percentage

Text alignment decoration indention spacing white space

Working with classes in style sheets

Any element that belong to the class are marked by adding the tag:

class = “classname”

where classname is the identifier or name of the class.

16



Ex.

<style type=”text/css”><!—

p.beginning {color:red; font-size:20pt}

p.middle {color:green; font-weight:bold; font-style:oblique; font-size:16pt}

p.end {color:navy; font-weight:bolder; font-variant:small-caps; font-style:normal; font-size:12pt}

-- ></style>

Then you can use it in the <body>.

<p class=beginning> or

<p class=middle> or

<p class=end>

Setting a style for all links

You can set the text-decoration property to the following

blink – cause the text to blink on and off line-through – places a line through the middle of the text overline – places a line above the text underline – places a line below the text

You can specify two text-decoration value by separating the choices with a space.

INTRODUCTION TO JavaScript

Object - in javascript, it is a person or a thing.

built-in object – is a javascript object that neither depends on nor belong to another object, usch as the document or window.

Built-in Javascript Objects

OBJECT DESCRIPTION

17



Date Accesses the system time and dateDocument Represents the content of a browser’s

windowForm Represents forms created with the

<form> tagImage Represents images created with the

<img> tagLocation Switches to a new Web PageMath Performs CalculationNavigator Obtains information about the current

Web browserWindow and Frame Represents a browser window or every

frame within a browser window; every frame is a window and uses the same properties and methods as the window object.

Number Supports special constantsScreen Gives Platform-specific information about

the user’s screenBoolean Converts objects to Boolean ValuesArray Returns an ordered set of valuesString Represents a set of charactersHistory Keeps track of Web Pages visitedFunction Accesses information about specific

functions

Properties - are attributes of objects and describe an object’s characteristics.

Note: An object and its property is are written by separating the object from its property with a period (.). If a specific value is assigned to a property, an equal sign (=) is included after the property , followed by the value enclosed in quotation marks. Ex. car.color = “red” ( car is the object, color is the property, red is the value)

Object and PropertyGeneral Form object.propertyComment: the object is stated first, then a period,

the the descriptive property. A value can be assigned to the property or the property can return a value

Examples: Document.bgColor=”lightblue”Browser=navigator.appName

Methods - are actions that an object can perform. Example: the methods associated with the car object might be drive, turn and stop. An object and one of the methods are written as

car.drive()

Some methods require an argument, which is a a value given to the method.

Argument – is the message used in a method that is passed to the object. Example: given a car object the turn() method, a statement could be written as

car.turn(“left”)

18



where the argument “left” is additional information describing which way the car should turn.

Example 2:

document.write(“this is an example”)

the document is the object, write() is the method, and “this is an example” is what is to be written to the document.

Object and Method

General Form: objectname.method(parameters)Comment Where objectname is the object, method

is the action, and parameters are optional items or instructions the method should use. A period separates the object name from the property or method name.

Examples: document.write(“Some text”)window.alert(“This is a message”)var toDayDate=Date.toString()

User-defined functions – is a javascript code written to perform certain tasks repeatedly.

Global functions – are really methods that belong to the global object and also are called top-level methods.

Event – is the result of an action, such as a mouse click or a document loading.

Event Handler – is a way to associate that action with a function.

Javascript Variables – store values that can change depending on the results of an expression or data entered by a user from a form.

- case sensitive

Naming Conventions for Javascript VariablesRule Valid Name Examples Invalid Name ExamplesName must begin with a letter or underscore

Months 9Months

Rest of name must be letters, numerals, or undrscore

Last_Name Last-name

Name may not use spaces or punctuation

ZipCode zip.code or zip code

Name may not contain Javascript objects, properties and reserved words

xNow Date

Global Variables – means that the variable value is available for use anywhere inside the Web Page. To define a variable as global, it must be declared in the <script> section before any of the user-defined functions.

19



Local Variables – means that the variable’s value is available only in the function in which it is defined.

Data Type – type of data they store, such as text, numbers. Javascript data types are numeric, string, date or Boolean.

Keyword or reserved word – is a word with special meaning.

Note: Javascript variables are loosely typed, which means they do not have to be assigned a specific data type. Javascript indicates the data type by declaring the variable with an initial value because this technique and features allows variables to be flexible and store any data type.

Assigning Values to VariablesGeneral Form: var variableName=valueComment” where var is an optional keyword to

designate a variable; variableName is a valid variable name; and value is the string numeric, date or Boolean value being assigned to the variable

Examples: var NickName=”Shane”var lineCnt=1var Continue=false

Creating A New Object InstanceGeneral Form: var variableName=new Builtin_ObjectComment: Where variableName is the name of the

new object instance; new is the required keyword; and Builtin_object is the name of the object from which new object instance is to be created.

Examples var sysDate=new Date()var sysDate=new Date(“October 5, 2009”)var quote=new String(“No man is an island.”)

Sample1.html

<html><head><title>SampleJavascript </title>

</head>

<body bgcolor=skyblue>

<script language=javascript>alert("This is my first javascript")

</script>

</body>

20



</body></html>

Sample2.html

<html><head><title> SampleJavascript2 </title></head>

<body><input type=button value="button1" onclick="alert('mabuhay')"><br><br><input type=button value="button2" onclick="javascript:alert('hello')">

<br><br>

<a href="#" onclick="alert('kamusta')">greetings</a><br><br><a href="javascript:alert('are you sure?')">alert</a>

</body>

</html>

Sample3.html

<html><head><title> SampleJavascript3</title><script language=javascript>

function hello(){

alert("kamusta")}

</script></head><body><input type=button value="greetings" onclick="hello()"></body></html>

Sample4.html

<html>

21



<head><title> SampleJavascript4</title></head><body><script language=javascript>

document.write("<html><head><title>SampleJavascript5</title></head>")document.write("<body bgcolor=#001428 topmargin=50>")document.write("<center><img src='Waterlilies2.jpg'><br><br>")document.write("<font size=+2 color=#33CCFF>Waterlilies</font></center>")document.write("</body></html>")alert("Beautiful flowers")

</script></body></html>

Sample5.html

<html><head>

<title> eventhandler : onload, onfocus, onblur, onsubmit, onreset, onkeydown, onmouseover, onmouseout</title></head>

<body onload="alert('If you open a document onload!')" onunload="alert('If you close the document, it is onunload!')">

<form onsubmit="alert('Submit Form')" onreset="alert('Initializes the input form')">

<input type="button" value="MouseOver" onmouseover="alert('mouseover')">

<input type="button" value="Mouse out" onmouseout="alert('mouseout')"><p>

TechRepublic: <input type="text" size=50 value="Click the textbox" onfocus="alert('The input in the box is clicked, onfocus')" onblur="alert('the input in focus leaves, onblur')"><p>

Password :<input type="text" size=50 value="Press the arrowdown key" onkeydown="alert('You can press keydown')" ><p>

Entry Box: <input type=text size=50 value="The input in the box has been clicked" onFocus="this.value=''" onBlur="this.value='Hide value of the textbox'"> <p>

<input type="button" value="Confirm" onclick="alert('The button has been clicked')">

22



<input type="submit" value="submit">

<input type="reset" value="reset">

</form>

</body></html>

Sample6.html

<html><head><title> SampleJavascript6 </title>

<script>i=100

function test1(){

var i=10 document.write(i)

}

function test2(){

document.write("<br>" + i) }

</script>

</head>

<body>

<script language="javascript">

test1()test2()

</script>

</body></html>

23



Sample7.html

<html><head><title> Declare an Array Variable and find out the length of the array </title>

<script language="javascript">  </script></head><body><center><img src="cuba.jpg"></center>

</body></html>

Sample8.html

<html><head><title> operators </title></head>

<script language=javascript>

var a=5,b=3

document.write(" <h4>------ Arithmetic Operators ------</h4>")document.write( "[1] 5+3=", a+b ,"<br>" )document.write( "[2] 5-3=", a-b ,"<br>" )document.write( "[3] 5*3=", a*b ,"<br>" )document.write( "[4] 5/3=", a/b ,"<br>" )document.write( "[5] 5%3=", a%b ,"<p>" )

24



document.write(" <h4>------ Relational ------</h4>")document.write("[1] 5 >=3 : ", a>=b, "<br>")document.write("[2] 5 < 3 : ", a<b, "<br>")document.write("[3] 5 == 3 : ", 3==5, "<br>")document.write("[4] a > A : ","a">"A","<br>")document.write("[5] SARS > Dust : ","SARS\ ">\ "yellow dust","<p>")

document.write(" <h4>------ The conditional operator ------</h4>")

var year="2003"

today=(year=="2002")? "2002 years." : "2002 it is not."

document.write("[1] year : ",today,"<br>")

today=(year=="2003")? "2003 came." : "2004 it is not."

document.write("[2] year : ",today,"<br>")document.write(" <h4>------ Logical Operators ------</h4>")document.write("[1] (3>5)&&(7<13) : ",(3>5)&&(7<13),"<br>")document.write("[2] (3>5)||(7<13) : ",(3>5)||(7<13),"<br>")document.write("[3] !!(3>5) : ",!(3>5),"<br>")document.write("[4] (3>5)^(7<13) : ", (3>5)^(7<13),"<br>")document.write(" <h4>------ incrementing or decrementing operator ------</h4>")document.write("a : ", a , " b : " ,b, "<p>")document.write("[1] ++i : ",(++a),"<br>")document.write("[2] i++ : ",(b++),"<br>")document.write("a : ", a , " b : " ,b, "<p>")document.write("[3] a-- : ",(a--),"<br>")document.write("[4] --b : ",(--b),"<br>")document.write("a : ", a , " b : " ,b, "<p>")

document.write(" <h4>------ Assignment Operators ------</h4>")var a=100,b=10document.write("a : ", a , " b : " ,b, "<p>")document.write("[1] a+=b : ",a+=b,"<br>")document.write("[2] a-=b : ",a-=b,"<br>")document.write("[3] a*=b : ",a*=b,"<br>")document.write("[4] a/=b : ",a/=b,"<br>")document.write("[5] a%=b : ",a%=b,"<br>")

</script>

<body>

25



</body></html>

Sample9.html<html><head><title> Grades </title><script language="JavaScript">

function gradeSamp(){

txtTotal=form1.total.value

if(txtTotal>=90)result="Excellent"

else if(txtTotal>=80)result="Good"

else if(txtTotal>=70)result="Average"

else if(txtTotal>=60)result="Poor"

else if(txtTotal=="")result="Value Needed"

elseresult="end"

form1.txtResult.value=result}

</script>

</head>

<body>

<center>

<form name="form1">Total Score : <input type="text" size=3 name="total"> <input type="button" class=button value="Rate" onclick="gradeSamp()"> Result : <input type="text" size=10 name="txtResult"> </form>

</center>

</body></html>

26



Sample10.html

<html><head><title> Months </title></head>

<body><center>

<script language=javascript>

month=prompt("Please enter a number from 1-12!","");

switch(month){

case "1" : case "3" : case "5" : case "7" : case "8" : case "10" : case "12" : document.write(month," has 31 days.");break;case "4" :case "6" :case "9" :case "11" : document.write(month," has 30 days.");break;case "2" : document.write(month," has 28 days.");break;default : document.write("There is no equivalent month for that number. Thanks

anyway..");}</script>

</center>

</body></html>

Sample11.html

<html>

<head><title>Sum Total

</title><script language="javascript">

document.write("<h3>The initial value of sum is 0 </h3>")

27



var sum=0

for(a=1;a<11;a++)

{sum=sum+adocument.write(a + " union with current value of sum is : " + sum +

"<BR>" )}

</script>

</head>

<body>

</body></html>

Sample12.html

<html><head><title>Multiplication Table using Nested for statement </title></head>

<body>

<script language="javascript">document.write("<h3 align=left>Multiplication Table!</h3>");for(i=1;i<=9;i++) {

for(j=2;j<=9;j++) {

document.write(j + " x " + i + " = " + (i*j) + " : ");}document.write("<br>");

}</script>

</body></html>

28



Sample13.html

<html><head><title> The object properties </title></head><body>

<script language="javascript1.2">

document.fgColor="white"document.bgColor="orange"document.linkColor="blue"document.vlinkColor="yellow"document.alinkColor="pink"document.write("<h3>document title :"+document.title+"<br><br>")document.write("ForeColor :"+document.fgColor+"<br><br>")document.write("Background :"+document.bgColor+"<br><br>")document.write("link color :"+document.linkColor+"<br><br>")document.write("Neighbor Last Updated 2006-05 :"+document.lastModified+"<br><br>")document.write("URL address :"+document.URL+"<br></h3>")

</script>

</body></html>

Sample14.html

<html><head><title>Link object and anchor object properties</title><script language=javascript>function hanbitInfo() //Hanbit Media Links information{

alert("\n Full Path : " +document.links[10].href +"\n\n Protocol : " +hanbit.protocol +"\n\n Host : " +hanbit.hostname +"\n\n Route : " +document.links[10].pathname

+"\n\n Port : " + document.links[10].port)}</script></head><body><a name=top><h1 align=center>Link object and anchor object</h1></a><table width=600 align=center>

29



<tr valign=top><td>

<a href=#site1>April 14, 2006</a><br><a href=#site2>cinema information</a><br><a href=#site3>Cool Site</a><br>

</td><td>

<a name="site1">April 14, 2006 site</a><br><a href="http://www.yahoo.com"> yahoo </a><br><a href="http://www.naver.com"> naver </a><p>

</td><td>

<a name="site2">Cinema information Site</a>

<ul> <li> <a href="http://www.hollywood.com/">Hollywood </a> <li><a href="http://www.cine21.co.kr/"> Mr.21 </a> <li> <a href="http://www.escreen.co.kr/">Screen</a> <li> <a href="http://www.cineline.co.kr/">Line</a> <li> <a href="http://films.hitel.net">At film</a></ul>

</td><td>

<a name=site3>Cool Site</a><br><a href="http://www.hanbitbook.co.kr/book/new/newbook.html"

name=hanbit>Hanbit media</a></td>

</tr></table><br><br><br><hr><script language="javascript">document.write("link : " + document.links.length + "<br>")document.write("anchor : " + document.anchors.length + "<br>")for(i=0; i<document.links.length; i++) {

document.write(i + " : " + document.links[i] + "<br>")}</script><input type="button" value="Hanbit Media Links information" onclick="hanbitInfo()"><hr><a href=#top>Top</a>

</body></html>

30

Documents

Website Development Cycle