1 of 55

INTRODUCTON

JavaScript

2 of 55

HTML JavaScript

HTML
JavaScript

3 of 55

Introduction

Extensible Markup Language XML

Extensible- can create own tags
Complete separation of content and style

Web Applications and Real World Design - Knuckles

4 of 55

History

Releases

HTML 4.0 1997
XML 1.0 1998

XML and HTML need to better cooperate

XHTML 1.0 2000

XHTML

Contains elements and attributes of HTML
Elements must have closing tags
Lowercase
Attributes must have values
Attributes in single or double quotes

http://www.w3schools.com/xhtml/default.asp

5 of 55

HTML Forms and JavaScript

Client Server Model

Client Side Processing

JavaScript downloaded from web page and processed by the client – typically form checking
JavaScript can interact directly with form data

Server Side processing

Information from a form sent to server for processing
PHP Perl C++
Server can interact directly with the form data

6 of 55

HTML Forms and JavaScript

JavaScript

HTML files are text files
JavaScript is interpreted not compiled
Object oriented

HTML forms are objects and can be manipulated via JavaScript
Dynamic HTML – merger of JavaScript and HTML

Different implementations of DHTML by software companies

7 of 55

What is JavaScript

Scripting language (object-oriented)

Lightweight programming language developed by Netscape
Interpreted, not compiled

Designed to be embedded in browsers

Ideal for adding interactivity to HTML pages
Detect browser versions
Work with info from user via HTML forms
Create cookies
Validate form data
Read and write HTML elements

Supported by all major browsers

Internet Explorer has JScript (started in IE3)

http://www.faqts.com/knowledge_base/view.phtml/aid/1380

It’s free, no license required

8 of 55

What is JavaScript

Syntax is similar to Java, but it’s not Java per se

Usually JavaScript code is embedded within HTML code using the script tag:�
Can have more than one pair of script tags in a page

Semicolons: C++ and JAVA require them but in JavaScript it’s optional

9 of 55

What is JavaScript

HelloWorld example program…

<html>

<head><title>JavaScript HelloWorld!</title></head>
<body>
<script language="JavaScript">
document.write('Javascript says "Hello World!"')
</script>
</body>

</html>

Let’s open it in the browser

10 of 55

What is JavaScript

Javascript can be located in the head, body or external file

Head section

Ensures script is loaded before trigger event

Body section

Script executes when body loads

External

Allows scripts to run on several pages

Examples:

http://www.w3schools.com/js/js_whereto.asp

11 of 55

What is JavaScript

JavaScript statements in head write to the beginning of the body section but don’t violate HTML code already there.
JavaScript statements in body write based on their location
JavaScript interpreted first then HTML interpreted second

Document.write writes to the HTML document not the web page

12 of 55

What is JavaScript

<html>
<head>
<script language=“JavaScript”>
document.write (“<b> This is first </b>);
</script>
</head>�
<body>
Now where does this print on the web page???? <br />

<script language=“JavaScript”>
document.write ( “This might be last?”)
</script>

</body>
</html>

Lets See what the answer is!

13 of 55

What is JavaScript

Now, let JavaScript generate HTML for us…

<html>
<head><title>JavaScript HelloWorld!</title></head>
<body>
<script laguage="JavaScript">
document.write("<h2>Javascript-Generated output:</h2> <p>This paragraph generated by JavaScript</p>
<p>It can even insert an image</p>
<img src='../assigns/RayWeb/images/cathedral.jpg' />")
</script>
</body>
</html>

Let’s open it in the browser

14 of 55

Identifier Etiquette

Identifier– The name of a variable (or function)

Starts with a letter, can contains digits & underscores
Case Sensitive!!
Should be meaningful to someone reading your code

Good: accountBalance, amountDue

Bad: bal, due,

Just plain wrong: 2bOrNotToBe, +var, total-value

15 of 55

Variables

Must declare variables before they’re used in the program

Declare at the top of the program & terminate each statement with ‘;’
Intialize variables when appropriate
Local variables (declared within a function) destroyed after function exit.

Can only be accessed within the function

Example – Note Assignments

var candyBarPrice = 2.50;
var taxRate = .075;
var candyBarsPurchased;

16 of 55

Assignment Operator

Assignment ‘looks like’ equal sign but does NOT behave like it

subTotal = subTotal + 1.50

subTotal ‘is assigned the value’ that is currently in subTotal plus the value of 1.50

17 of 55

Expressions

An expression is a statement that describes a computation
Usually look like algebra formulas

total = subTotal * taxRate

Operators (+, -, *, /, etc.) have different levels of precedence, similar to algebra

Don’t rely on it! For clarity, use parentheses

w3Schools operator reference page

18 of 55

Conditional Statements--if

if (some boolean expression is true){

execute the statements within

the curly braces, otherwise skip to the first statement after the closing brace

}

Resume execution here in either case

19 of 55

Conditional Statements– if/else

if (some boolean expression is true){

execute these statements, otherwise skip to ‘else’ clause

}

else {

execute these statements if boolean expression is false

}

Resume execution here in either case

20 of 55

Conditional Test Program

Diagnostic messages indicate flow of control

var variable1 = 1; var variable2 = 2;
if(variable1 >= 0){
document.write(“<p> 1 is greater than 0 </p>");
}
document.write(“<p>Resuming execution after 'if'
statement</p>");

if(variable1 > variable2){
document.write(“<p>1 is greater than 2</p>");
}
else {
document.write(“<p>2 is greater than 1</p>");
}
document.write("Resuming execution after 'if/else‘
statement</p>");

21 of 55

Strings

Strings are sequences of keyboard characters enclosed in quotes

“Hello World” or ‘Hello World’

Variables can hold strings

var greeting = “Hello World”

String can be empty, i.e., contain no characters

var myAnswer = “”

Use ‘\’ (escape symbol) to ‘type’ prohibited characters

\b for backspace, \n for newline, \t for tab, \” for double quote

22 of 55

JavaScript Functions – Basic Principles

Abstraction

Experience has taught us that much code is duplicated throughout program

Functions let us write the functionality once, then reuse it

23 of 55

JavaScript Functions – Basic Principles

Encapsulation

Functions encapsulate a specific capability or feature

Function name allows us to access a function in our program

Parameterization

We can customize the function’s result by passing in different values each time we use it

Must use functions to write serious software!

24 of 55

JavaScript Functions – Basic Principles

Reasons to use functions

Ease of communication
Problem simplification
Easier construction
Code readability
Reusability
Maintainability

In JS, functions are the primary encapsulation mechanism

25 of 55

JavaScript Functions – Syntax

JS function syntax

function myFunctionName (list of parameters) {

….JS code here…

}

26 of 55

JavaScript Functions -- Issues

Key issues about using functions

Naming functions
Passing in parameters
Using local variables within functions
How to call (i.e., invoke) functions
How to handle a function’s return value
Where to put JS functions in your webpage

27 of 55

JavaScript Functions – Naming

Function names

Name describes what function does
Name is an identifier, so follow JS identifier syntax rules & course coding standards

Example,

findMaxValue(‘put some parameters here’)

28 of 55

JavaScript Functions -- Parameters

Passing parameters to the function

Parameters provide functions with input
Implicitly declared variables that can be accessed by code within function body
You provide actual input values when you call the function
Parameters are named variables separated by commas

Example,

function findMaxValue(num1, num2, num3)

29 of 55

JavaScript Functions – Where to put?

Put functions within <script>….</script> tags within the <head> section of the web page

<head>

declare functions here….

</script>

</head>

30 of 55

JavaScript Functions – Local Variables

If needed, you can declare local variables within a function

local variable is visible only within the function body after it’s declared

Commonly used to store results of an intermediate calculation

31 of 55

JavaScript Functions – Local Variables

function findMaxValue(num1, num2,num3) {

var tempMax; //local var

if (num1 >= num2) {

tempMax = num1;

}

else {

tempMax = num2;

}

if(num3 >= tempMax) {

tempMax = num3;

}

return tempMax;

} //end function

32 of 55

JavaScript Functions -- Calling

To call a function from your program, add a statement that contains the function name with values for the parameters the function requires

Example…somewhere in the <body>….,

var x = 1, y = 4, z = 2;

findMaxValue(x, y, z);

What value does the function return?
What happens with the result?

33 of 55

JavaScript Functions -- Return

Return keyword tells function to return some value and exit immediately

Function can have multiple return statements but only 1 can be executed in any given function call

Normally used to return the final result of a calculation to the calling program

For an example, see findMaxValue function

34 of 55

JavaScript Functions -- Return

Good Example

Uses var maxNumber in calling program
Function’s return value is assigned to maxNumber
Display of maxNumber has correct value for inputs

Code snippet

var x = 1, y = 4, z = 2;

var maxNumber = findMaxNumber(x, y, z);

document.write(“The maximum is: “ + maxNumber);

35 of 55

JavaScript Functions -- Return

The return must be handled properly or it will be ‘lost’

Usually, you want to assign the result of a function to a variable

Bad Example1,

Declares var maxNumber in calling program, then displays it
Value is ‘undefined’ because maxNumber is never initialized & the return value is never assigned to it

36 of 55

JavaScript Functions -- Return

Bad Example 2

Declares var tempMax in calling program because that’s the name of the var being returned from function

Attempts to display tempMax but value is undefined

the tempMax in calling program may have the same name as var being ‘returned’ but they are different variables!

37 of 55

JavaScript Functions – Parameter Sequence

When calling functions, must enter parameters in same order as specified in function argument list.

function calculateDensity(height, width, depth, mass){
var volume = height * width * depth;
var density = mass / volume;
return density;
}
……………………………………………….
var hth = 2, wth = 3, dth = 4, mass = 10;

var result = calculateDensity(2, 10, 3, 4);
//returns .07 but correct answer is .42!!!

38 of 55

JavaScript Functions – Global Variables

Global variables are those declared outside of functions
Global variables are ‘visible’ from anywhere in the program, including inside functions

var globalHello = “Hello!”;

function writeHello() {

document.write(globalHello);

}

// outputs “Hello!”

Example program

39 of 55

JavaScript Functions – Testing

Test each function thoroughly before proceeding with next programming task

Using multiple sets of inputs, be sure to test all possible outcomes

For each test, be sure calling program is properly handling return values

40 of 55

JavaScript Functions – Debugging

Use diagnostic output statements to trace program execution

Good places for diagnostic outputs

Just before entering function
Immediately upon entering function
Before/In/After complex logic or computation
Just before function return statement
Immediately after function returns to calling program

41 of 55

JavaScript Functions

Built-In Functions

Prompt
Alert
Confirm

http://www.w3schools.com/js/js_popup.asp

42 of 55

JavaScript and HTML Forms

JavaScript Objects

Var truck = new Object();
Expression on right is a constructor
Properties

truck.color=“white”
document.write(color);

Primitives

In JavaScript variable primitive types are number, string and Boolean

43 of 55

JavaScript and HTML Forms

Object Model for the Browser Window

Compound object structure is created when a web page loads into a browser

Hierarchy

Window is an object, the HTML document is an object and its elements are objects
These objects have primitives associated with them

44 of 55

JavaScript and HTML Forms

window [closed, location]

history [length]

document [bgColor, fgColor, URL, lastmodified,linkColor, vlinkColor]

images [properties]
links [properties]
frames [properties]
forms [properties]

45 of 55

JavaScript and HTML Forms

Window object is parent of structure

window.closed is primitive that is Boolean
window.location primitive contains string of the URL of the HTML file
window.document object is primary focus

When web page is loaded the HTML elements assign values to most of these window.document primitives
Often the word window is excluded as in document.write but need it if referring to multiple open windows
Properties can also be objects

46 of 55

JavaScript and HTML Forms

<HTML>
<HEAD>
<TITLE>Document Properties</TITLE>
<SCRIPT LANGUAGE=JavaScript><!--
document.write(closed);
document.write("<BR>"+ document.bgColor);
document.write("<BR>"+document.fgColor);
document.write("<BR>"+document.lastModified);
//--></SCRIPT>
</HEAD>
<BODY TEXT="#0000FF" BGCOLOR="#FFFFCC">
<P>Blue text on a yellow background.<BR>
<SCRIPT LANGUAGE=JavaScript><!--
document.write("<BR>"+ document.bgColor);
document.write("<BR>"+document.fgColor);
//--></SCRIPT>
</BODY>
</HTML>

Interactive Programming on the Internet Knuckles

47 of 55

JavaScript and HTML Forms

false�#ffffff�#000000�01/10/2001 17:18:30 Blue text on a yellow background.��#ffffcc�#0000ff

Interactive Programming on the Internet, Knuckles

48 of 55

JavaScript and HTML Forms

Methods

Behavior associated with an object
Essentially functions that perform an action
Some are built in and others user made

Built-In Methods of the window object

Confirm
Alert
Prompt

49 of 55

JavaScript and HTML Forms

User Events

An event occurs when a user makes a change to a form element

Ex. Click a button, mouseover an image

Detection of an event done by event handlers
Event handler is an attribute of the HTML button
<form>

<input type=button value=“please click” onclick=“function name()”>

</form>

50 of 55

JavaScript and HTML Forms

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!--
function changecolor(){
document.bgColor="#ff0000";
}
//--></SCRIPT>
</HEAD>
<BODY>
<P><FORM >
<P><INPUT TYPE=button VALUE="Click Me" onclick="changecolor()">
</FORM>
</BODY>
</HTML>

Interactive Programming on the Internet ,Knuckles

51 of 55

JavaScript and HTML Forms

Form Object

Window.document.form
A form is a property of the document but is also an object
Form elements are properties of a form and are also objects
Access to form’s properties is done through the NAME attribute of the FORM tag
Access to the properties of the form elements is done through the NAME attributes of the particular form element

52 of 55

JavaScript and HTML Forms

Interactive Programming on the Internet ,Knuckles

53 of 55

JavaScript and HTML Forms

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!--
function plus(){
var n1;
var n2;
n1=document.addmult.num1.value;
n2=document.addmult.num2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1+n2;
}
function times(){
var n1;
var n2;
n1=document.addmult.num1.value;
n2=document.addmult.num2.value;
n1=parseFloat(n1);
n2=parseFloat(n2);
document.addmult.result.value=n1*n2;
}

//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
<P><FORM name=addmult>
<P>Enter a number in each field:
<INPUT TYPE=text NAME=num1 VALUE="" SIZE=5>
<INPUT TYPE=text NAME=num2 VALUE="" SIZE=5><BR>
<INPUT TYPE=button VALUE="+" onclick="plus()">
<INPUT TYPE=button VALUE="*" onclick="times()"><BR>
<INPUT TYPE=reset VALUE="Reset Form"><BR>
<TEXTAREA NAME=result ROWS=3 COLS=27 WRAP=virtual></TEXTAREA>
</FORM>
</BODY>
</HTML>

Interactive Programming on the Internet ,Knuckles

54 of 55

JavaScript and HTML Forms

Form for submitting info for server side processing

Interactive Programming on the Internet ,Knuckles

55 of 55

JavaScript and HTML Forms

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!--
function verify(){
with(document.infoform){
if((fullname.value=="")||(address.value=="")||(email.value=="")){
alert("You have left one or more fields blank. Please supply the necessary information, and re-submit the form.");
}
else {
display.value="The following information has been added to our guestbook:\r"+fullname.value+"\r"+ address.value +"\r" +email.value;
}
}
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
<P><FORM name=infoform>
<P><TABLE BORDER=0>
<TR>
<TD WIDTH=83>
<P>Name:
</TD>
<TD>
<P><INPUT TYPE=text NAME=fullname VALUE="" SIZE=32>
</TD>
</TR>

<TR>
<TD WIDTH=83>
<P>Address:
</TD>
<TD>
<P><INPUT TYPE=text NAME=address VALUE="" SIZE=32>
</TD>
</TR>
<TR>
<TD WIDTH=83>
<P>E-mail:
</TD>
<TD>
<P><INPUT TYPE=text NAME=email VALUE="" SIZE=32>
</TD>
</TR>
<TR>
<TD WIDTH=83>
<P><INPUT TYPE=button VALUE="Submit" onclick="verify()">
</TD>
<TD>
<P><INPUT TYPE=reset VALUE="Clear Your Information">
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<P><TEXTAREA NAME=display ROWS=5 COLS=41 WRAP=virtual></TEXTAREA>
</TD>
</TR>
</TABLE>

</FORM>
</BODY>
</HTML>