TOPIC 7 & 8
CLIENT-SIDE SCRIPTING
LANGUAGE: JAVASCRIPT
Copyright © Terry Felke-Morris 1
TABLE OF CONTENTS:
What is JavaScript?
Common Use of JavaScript
Coding JavaScript
Document Object Model (DOM)
JavaScript and Events
JavaScript Debugging
Variable and Prompts
Arithmetic and Comparison Operators
Decision Making
Function
JavaScript and Accessibility
Copyright © Terry Felke-Morris 2
TOPIC LEARNING OUTCOMES
Upon completion of this topic, students should be
able to:
Describe common uses of JavaScript in web pages.
Describe the purpose of the Document Object Model
and list some common events.
Create a simple JavaScript using the script element and
the alert() method.
Use variables, operators and the if control structure.
Create a basic form validation script.
Copyright © Terry Felke-Morris 3
WHAT IS JAVASCRIPT?
Object-based scripting language
Originally developed by Netscape - LiveScript
Netscape & Sun Microsystems Collaboration -
JavaScript
Works with the objects associated with a Web page
document
the window
the document
the elements - forms, images, hyperlinks, etc.
Copyright © Terry Felke-Morris 4
COMMON USES OF JAVASCRIPT
Display a message box
Select list navigation
Edit and validate form information
Create a new window with a specified size and
screen position
Image Rollovers
Status Messages
Display Current Date
Calculations
Copyright © Terry Felke-Morris 5
CODING JAVASCRIPT
JavaScript statements can be coded on a web page
using two different techniques:
Place JavaScript code between <script> tags
Place JavaScript code as part of an event attached to an
HTML element
Copyright © Terry Felke-Morris 6
JAVASCRIPT: USING THE SCRIPT ELEMENT
The script element
◦ A container tag
◦ May be placed in either the head or the body
section of a web page
<script type="text/javascript">
<!- -
alert ("Welcome to Our Site"); Output:
// - ->
</script>
Copyright © Terry Felke-Morris 7
EXAMPLE:
Output:
Copyright © Terry Felke-Morris 8
DOCUMENT OBJECT MODEL (DOM)
A portion of the
DOM is shown at the
left.
Defines every object
and element on a web
page
Hierarchical structure
Accesses page
elements and apply
styles to page
elements
Copyright © Terry Felke-Morris 9
OBJECT
An object is a thing or entity.
Browser window
Submit button
Web page document
Copyright © Terry Felke-Morris 10
PROPERTY
A property is a characteristic or attribute of an
object.
The background color of a web page document
[Link]
The date the web page file was last modified
[Link]
The src file of an image object
[Link]
Copyright © Terry Felke-Morris 11
METHOD
A method is an action (a verb)
Writing text to a web page document
[Link]()
Submitting a form
[Link]()
Copyright © Terry Felke-Morris 12
JAVASCRIPT AND EVENTS
Events:
actions taken by the web page visitor
◦ clicking (onclick),
◦ placing the mouse on an element (onmouseover),
◦ removing the mouse from an element (onmouseout),
◦ loading the page (onload),
◦ unloading the page (onunload), etc.
Copyright © Terry Felke-Morris 13
EVENTS
Event Event Handler
click onclick
load onload
mouseover onmouseover
mouseout onmouseout
submit onsubmit
unload onunload
14
JAVASCRIPT AND EVENTS
JavaScript can be configured to perform actions when
events occur.
The event name is coded as an attribute of an HTML tag
The value of the event attribute contains the JavaScript code
Example:
Display an alert box when the mouse is placed over a
hyperlink.
<a href="[Link]" to go home')">Home</a>
Copyright © Terry Felke-Morris 15
OUTPUT:
Copyright © Terry Felke-Morris 16
EXAMPLE:
<html> <body>
<head> <p>Bring your mouse inside the
<script type="text/javascript"> division to see the result:</p>
<!-- <div > >function over() {Mouse Out
<h2> This is inside the division </h2>
[Link] ("Mouse Over");
</div>
}
</body>
function out() {
</html>
[Link] ("");
}
//-->
</script></head>
17
OUTPUT:
Copyright © Terry Felke-Morris 18
JAVASCRIPT DEBUGGING
Check the syntax of the statements
◦ Pay very close attention to upper and lower case letters, spaces, and quotations
Verify that you have saved the page with your most recent changes
Verify that you are testing the most recent version of the page
(refresh or reload the page)
If you get an error message, use the error messages that are
displayed by the browser
◦ In Chrome: Select Setting > More tools > Developer Tools > Console
Copyright © Terry Felke-Morris 19
Copyright © Terry Felke-Morris 20
VARIABLE
A variable is a placeholder for information.
The variable is stored in the computer’s memory
(RAM).
var userName;
userName = "Karen";
[Link](userName);
Copyright © Terry Felke-Morris 21
PROMPTS
prompt() method
Displays a message and accepts a value from the user
myName = prompt(“prompt message”);
The value typed by the user is stored in the variable
myName
Copyright © Terry Felke-Morris 22
ARITHMETIC OPERATORS
Operator Description Example Value of Quantity
= assign quantity = 10 10
+ addition quantity = 10 + 6 16
- subtraction quantity = 10 - 6 4
* multiplication quantity = 10 * 2 20
/ division quantity = 10 / 2 5
23
COMPARISON OPERATORS
Operator Description Example Sample values of quantity
that would result in true
== Double equals quantity = = 10 10
sign
(equivalent)
“is exactly
equal to”
> Greater than quantity > 10 11, 12 (but not 10)
>= Greater than quantity > = 10 10, 11, 12
or equal to
< Less than quantity < 10 8, 9 (but not 10)
<= Less than or quantity < = 10 8, 9, 10
equal to
!= Not equal to quantity ! = 10 8, 9, 11 (but not 10)
24
DECISION MAKING
if (condition) {
… commands to execute if condition is true
}
else {
… commands to execute if condition is false
}
Copyright © Terry Felke-Morris 25
EXAMPLE:
Output:
Copyright © Terry Felke-Morris 26
FUNCTION
A function is a block of one or more JavaScript
statements with a specific purpose, which can be
run when needed.
function function_name() {
... JavaScript statements …
}
Copyright © Terry Felke-Morris 27
USING FUNCTIONS
Defining the Function
function showAlert() {
alert("Please click OK to continue.");
}
Calling the Function
showAlert();
Copyright © Terry Felke-Morris 28
EXAMPLE:
Copyright © Terry Felke-Morris 29
OUTPUT:
Copyright © Terry Felke-Morris 30
FORM VALIDATION
It is common to use JavaScript to validate form
information before submitting it to the web server.
Is the name entered?
Is the e-mail address of correct format?
Is the phone number in the correct format?
Copyright © Terry Felke-Morris 31
VALIDATING FORM FIELDS
Use the "" or null to check to determine if a
form field has information
if ([Link][0].[Link] == "" ) {
alert("Name field cannot be empty.");
return false;
} // end if
Copyright © Terry Felke-Morris 32
JAVASCRIPT & ACCESSIBILITY
Don’t expect JavaScript to always function for
every visitor
Some may have JavaScript disabled
Some may be physically unable to click a mouse
Provide a way for your site to be used if JavaScript
is not functioning
Plain text links
E-mail contact info
Copyright © Terry Felke-Morris 33
References:
1. [Link]
2. [Link]
3. Tutorials Point JavaScript
Copyright © Terry Felke-Morris 34
