website development cycle
DESCRIPTION
wTRANSCRIPT
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
<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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
</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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
*********
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
*********
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
13
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
<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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
</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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
<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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
<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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
Sample7.html
<html><head><title> Declare an Array Variable and find out the length of the array </title>
<script language="javascript"> <!--/*travel = new Array(4) travel[0] = "France"travel[1] = "Australia"travel[2] = "Africa"travel[3] = "Cuba"*/travel = new Array("France","Australia","Africa","Cuba") n=travel.lengthdocument.write("<h3 align=center> The Final Destination \'" + travel[n-1] + "\'</h3>");//--> </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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
</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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
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
Prepared by: SAEstrada
DCIT 65 – Web DevelopmentLecture 3
<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