2. CIS 233
• JavaScript ≠ Java
• Developed by Netscape
• Purpose: to Create Dynamic websites
• Widely Used
3. CIS 233
Why Use JavaScript?
• JavaScript enhances Web pages with dynamic and
interactive features.
• JavaScript runs in client software.
• JavaScript 1.3 works with version 4.0 browsers.
4. CIS 233
What Can JavaScript Do?
• Common JavaScript tasks can replace server-
side scripting.
• JavaScript enables shopping carts, form
validation, calculations, special graphic and
text effects, image swapping, image mapping,
clocks, and more.
5. CIS 233
• Client-side programming
• recall: HTML is good for developing static pages
• can specify text/image layout, presentation, links, …
• Web page looks the same each time it is accessed
• in order to develop interactive/reactive pages, must
integrate programming
• client-side programming
6. CIS 233
• programs are written in a separate programming
language
• e.g., JavaScript, JScript, VBScript
• programs are embedded in the HTML of a Web page,
with tags to identify the
• program component
• e.g., <script type="text/javascript"> … </script>
• the browser executes the program as it loads the
page, integrating the dynamic
• output of the program with the static content of HTML
7. CIS 233
JavaScript Syntax.
• Unlike HTML, JavaScript is case sensitive.
• Dot Syntax is used to combine terms.
• e.g., document.write("Hello World")
• Certain characters and terms are reserved.
• JavaScript is simple text (ASCII).
8. CIS 233
JavaScript Terminology.
• JavaScript uses specialized terminology.
• Understanding JavaScript terms is
fundamental to understanding the script.
• Objects, Properties, Methods, Events, Functions,
Values, Variables, Expressions, Operators.
9. CIS 233
Objects
• Objects refers to windows, documents,
images, tables, forms, buttons or links, etc.
• Objects should be named.
• Objects have properties that act as modifiers.
10. CIS 233
Properties
• Properties are object attributes.
• Object properties are defined by using the
object's name, a period, and the property
name.
• e.g., background color is expressed by:
document.bgcolor .
• document is the object.
• bgcolor is the property.
11. CIS 233
Methods
• Methods are actions applied to particular
objects. Methods are what objects can do.
• e.g., document.write(”Hello World")
• document is the object.
• write is the method.
12. CIS 233
Events
• Events associate an object with an action.
• e.g., the OnMouseover event handler action can
change an image.
• e.g., the onSubmit event handler sends a form.
• User actions trigger events.
13. CIS 233
Functions
• Functions are named statements that
performs tasks.
• e.g., function doWhatever () {statement here}
• The curly braces contain the statements of the
function.
• JavaScript has built-in functions, and you can
write your own.
14. CIS 233
Function
<script langauge="JavaScript">
<!-- hide me
function announceTime( ) {
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
//put together the string and alert with it
var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert("The time is now: " + the_time); }
// show me -->
</script> </head> <body> ... </body> </html>
15. CIS 233
Values
• Values are bits of information.
• Values types and some examples include:
• Number: 1, 2, 3, etc.
• String: characters enclosed in quotes.
• Boolean: true or false.
• Object: image, form
• Function: validate, doWhatever
16. CIS 233
Variables
• Variables contain values and use the equal
sign to specify their value.
• Variables are created by declaration using
the var command with or without an initial
value state.
• e.g. var month;
• e.g. var month = April;
17. CIS 233
Variables
<script language=“JavaScript”>
<!-- definition of variables
var num_car= 25;
var passenger_per_car= 3;
//calculation of total number of people
var total_passenger= num_car * passenger_per_car
Alert(total_passenger);
// end of script -->
</script>
www.artsci.wustl.edu/~hmliaw/Test-Variable.htm
18. CIS 233
Expressions
• Expressions are commands that assign
values to variables.
• Expressions always use an assignment
operator, such as the equals sign.
• e.g., var month = May; is an expression.
• Expressions end with a semicolon.
19. CIS 233
Operators
• Operators are used to handle variables.
• Types of operators with examples:
• Arithmetic operators, such as plus.
• Comparisons operators, such as equals.
• Logical operators, such as and.
• Control operators, such as if.
• Assignment and String operators.
20. CIS 233
Methods of Using JavaScript.
1. JavaScripts can reside in a separate page.
2. JavaScript can be embedded in HTML
documents -- in the <head>, in the
<body>, or in both.
3. JavaScript object attributes can be placed
in HTML element tags.
e.g., <body onLoad="alert('WELCOME')">
22. CIS 233
1. Using Separate JavaScript Files.
• Linking can be advantageous if many pages use
the same script.
• Use the source element to link to the script file.
<script src="myjavascript.js”
language="JavaScript1.2”
type="text/javascript">
</script>
23. CIS 233
2. Embedding JavaScript in HTML.
• When specifying a script only the tags
<script> and </script> are essential, but
complete specification is recommended:
<script language="javascript”
type="text/javascript">
<!-- Begin hiding
window.location=”index.html"
// End hiding script-->
</script>
24. CIS 233
Using Comment Tags
• HTML comment tags should bracket any script.
• The <!-- script here --> tags hide scripts
in HTML and prevent scripts from displaying in
browsers that do not interpret JavaScript.
• Double slashes // are the signal characters
for a JavaScript single-line comment.
25. CIS 233
3. Using JavaScript in HTML Tags.
• Event handlers like onMouseover are a perfect
example of an easy to add tag script.
<a href=”index.html”
onMouseover="document.logo.src='js2.gif'"
onMouseout="document.logo.src='js.gif'">
<img src="js.gif" name="logo">
</a>
26. CIS 233
Creating an Alert Message
• The following script in the <body> tag uses the
onLoad event to display an Alert window
• The message is specified within parenthesis.
<body onLoad="alert('WELCOME. Enjoy
your visit. Your feedback can improve
cyberspace. Please let me know if you
detect any problems. Thank you.')">
