An Introduction To Web Programming

AN INTRODUCTION TO
WEB PROGRAMMING
Dr. Hossein Hakimzadeh

Department of Computer and Information Sciences
Indiana University
South Bend, IN
CONTENTS
• Fundamental programming constructs:
– Variable,
– Arithmetic operators,
– Assignment operator,
– Input and output,
– Arrays,
– Loops,
– Conditions,
– Modules (Functions),
– Structures, classes and objects,
– Events and event-handling
– Files and Databases
JavaScript 2
JAVA VS. JAVA-SCRIPT
• Java • Java-Script
– Java is an Object Oriented – JavaScript is a scripting
Programming (OOP) language language that was created by
created by James Gosling of the fine people at Netscape
Sun Microsystems. and was originally known as
– Java is a stand alone language LiveScript.
and runs on a virtual machine. – JavaScript must be part of a
– Java is compiled in a byte- HTML document and runs
code (an intermediate within a browser.
machine language) and – JavaScript is interpreted line-
produces a stand-alone by-line by the browser.
executable. – Object-based: Code uses built-
– Object-oriented: in, extensible objects, but no
(Encapsulation, inheritance, classes or inheritance.
polymorphism) – Dynamically typed language
– Strongly typed language.
Lean More:
http://en.wikipedia.org/wiki/JavaScript
http://sislands.com/coin70/week1/javajs.htm
JavaScript 3
WHAT IS JAVA SCRIPT?
• Java script is a scripting language which is typically used to
enhance the functionality and appearance of web pages.
• Java script is the de facto standard for client side programming

for web based applications.
• Java scripts are executed by the browser, however some

browsers (specifically Microsoft IE) disable this capability.
Therefore, if you use IE, you need to enable the execution of java
script in your browser.
JavaScript 4
JAVA SCRIPT
• The java script example Example:
creates a simple function for
displaying the date, and <!DOCTYPE html>
connects it to the event <html>
handler of a button.
<head>
<script>
function displayDate()
{
document.getElementById("placeholder").innerHTML=Date();
}
</script>
</head>
<body>
Java Script
<h1>My First JavaScript</h1>
the date will appear here...
Called when the
button is clicked
<button type="button" onclick="displayDate()">Display
Date</button>
</body>
</html>
Event
Handler
JavaScript 5
OUTPUT
• Before Click • After Click
JavaScript 6
JAVASCRIPT AND ITS RELATION WITH
DOM VS. BOM
• Document Object Model (DOM) Browser Object Model (BOM)
• The Document Object Model (DOM) • Browsers feature a Browser Object

is an application programming Model (BOM) that allows access
interface (API) for HTML as well as and manipulation of the browser
XML. window. For example (browser
history, location, navigator, and
• The DOM organizes the entire web screen)
page as a document composed of a
hierarchy of nodes like a tree • Because no standards exist for the
structure and using the DOM API, BOM, each browser has its own
nodes can be removed, added, and implementation.
replaced.
• BOM allows the developer to
• DOM allows the developer to manipulate the browser window.
manipulate the document.
JavaScript 7
THE STRUCTURE OF AN HTML DOCUMENT
DOCUMENT
<html>
<head> <body>
<title> Other <style> <script> <h1> <a>

tags
such as
<meta>,
Java
<link>, CSS
script
Etc.
JavaScript 8
THE STRUCTURE OF BROWSER OBJECT
Window
Screen Navigator History Location Document
DOCUMENT
Detecting Array of To
Detecting
the previously
<html>
screen size automatically

browser visited navigate the
and
<body>
<head>
used by URLs by user to

resolution < < <
the visitor the visitor

<script
<title> <style> h p a
another page
>
1> > >
Other
tags
such as
<meta
>,
<link>,
Java
Etc. CSS
script
http://www.javascriptkit.com/jsref/window.shtml
JavaScript 9
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
JAVA-SCRIPT SYNTAX
• Both Java and JavaScript syntax are based on the C
and C++ language so it is easy to learn the basics.
JavaScript 11
VARIABLES
• Variables in JavaScript are dynamically typed.
• Their type is determined only after they are assigned a

value.
• Example:
var myName; // No data type yet. (undefined)

var myNumber;
myName = “Cyrus”; // variable type will become string

myNumber = 5; // variable type will become int
myNumber = 5.6; // change the type int to float

myName = 4; // change the type from string to int.
JavaScript 12
VARIABLES
JavaScript 13
ARITHMETIC OPERATORS
• Same as C/C++ operators
+, -, *, /, %, ++, --
JavaScript 14
OTHER OPERATORS
• Bitwise http://www.javascriptkit.com/jsref/bitwise_operators.shtml
&, |, ^, ~, >>, <<
• Comparison
==, !=, < , >, <=, >=
http://www.javascriptkit.com/jsref/compariso
• Logical n_operators.shtml
&&, ||, !
• Other: http://www.javascriptkit.com/jsref/other_oper
typeof, new, delete ators.shtml
JavaScript 15
TYPEOF
JavaScript 16
OUTPUT
• Output methods in JavaScript apply to the DOM’s
DOCUMENT object.
• Example:
document.write(“hello”);
document.writeln(“hello”);
Remember however, document is part of a window (or BOM object)

myWin=window.open(""); //open blank window and write to it
myWin.document.open(); //open document stream
myWin.document.write(“Hello");
myWin.document.close();
JavaScript 17
INPUT
• Input methods in JavaScript apply to the BOM’s
WINDOW object.
• Example:
window.prompt(msg, [input]);
var myName;
myName = window.prompt("please enter your name")
• Displays a Prompt dialog box with a message. Optional "input" argument allows you
to specify the default input (response) that gets entered into the dialog box.
• Prompt will return the string the user has entered.
JavaScript 18
INPUT
JavaScript 19
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
ARRAY
• Can be allocated statically or dynamically.
Dynamic arrays:
var mySchedule = new Array([size]);
mySchedule[0] = “CSCI-A 340”;
mySchedule[1] = “MATH-M 215”;
Literal arrays:
var mySchedule = [“CSCI-A 340”, “MATH-M 215”];
Array properties:
mySchedule.lenght
JavaScript 21
ARRAY
JavaScript 22
OPERATION ON ARRAYS
• Array.sort([SortFunction])
• By default the function sort(), sorts the arrays alphabetically and in ascending order.
• //Sort Alphabetically and ascending:

var myArray=["Bob","Bully","Amy"];
myArray.sort(); //Array now becomes ["Amy", "Bob", "Bully"];
//Sort Alphabetically and descending:
var myarray=["Bob","Bully","Amy"];
myArray.sort();
myArray.reverse(); //Array now becomes ["Bully", "Bob", "Amy“]
• To sort the array numerically, need to compare the relationship between "a" to "b", with a return value
of <0 indicating to sort ascending, and >0 to sort descending
• //Sort numerically and ascending:

var myArray=[25, 8, 7, 41];
myArray.sort(function(a,b){return a - b}); //Array now becomes [7, 8, 25, 41]
//Sort numerically and descending:
var myArray=[25, 8, 7, 41];
myArray.sort(function(a,b){return b - a}); //Array now becomes [41, 25, 8, 7]
http://www.javascriptkit.com/jsref/arrays.shtml#e2
JavaScript 23
OPERATIONS ON AN ARRAY:
• Sorting an Array (Bubble Sort)
Private Sub BubbleSort(ByRef TheArray() As Integer)
Dim Pass, Index, Hold As Integer
For Pass = 1 To TheArray.GetUpperBound(0)
For Index = 0 To TheArray.GetUpperBound(0) – 1
If (TheArray(Index) > TheArray(Index + 1) )Then

Swap
Hold = TheArray(Index)
TheArray(Index) = TheArray(Index + 1)
TheArray(Index + 1) = Hold
End If
Next Index
Next Pass
End Sub
(c) Copyright 2007, H. Hakimzadeh 24

SORTING (ALPHANUMERIC)
JavaScript 25
SORTING (NUMERIC)
JavaScript 26
OPERATION ON ARRAYS
Array. Concat()
• Concatenates either a single elements or another array of

elements with the existing array, and returns the new
array.
var fruits=["Apple", "Oranges"];

var meat=["Pork", "Chicken"];
var dinner=fruits.concat(meat);
//creates ["Apple", "Oranges", "Pork", "Chicken"]. fruits and meat arrays not changed.
var snack=fruits.concat("Grapes", ["Cookies", "Milk"]);
//creates ["Apple", "Oranges", "Grapes", "Cookies", "Milk"] fruits array not changed.
JavaScript 27
CONCATENATION
JavaScript 28
OPERATION ON ARRAYS
Array. indexOf(targetElement)
• Returns the first index in which targetElment

(value) is found within an array, or -1 if nothing is
found.
• var fruits=["Apple", "Oranges", "Pork", "Chicken"];
alert(fruits.indexOf("Pork")); //alerts 2
JavaScript 29
INDEX OF
JavaScript 30
OPERATION ON ARRAYS
Array. Join([separator])
• Converts each element within the array to a string, and joins them into one large string.
Pass in an optional separator as argument to be used to separate each array element. If
none is passed, the default comma (,) is used:
Array. Map(mappingfunction())
• Returns a new array based on the return value of testfunction() on each of the array
elements. Original array is not changed. Use it to transform the values of all elements
within an array using some logic and derive the results as a new array.
Array.push(value);
• Adds the argument values to the end of the array, and modifies the original array with the
new additions. Returns the new length of the array.
Array.pop();
• Deletes the last element within array and returns the deleted element. Original array is
modified.
JavaScript 31
OTHER ARRAY OPERATIONS
JavaScript 32
ASSOCIATIVE ARRAYS
• Example:
• Associative array is an
array that uses a var testScore = []; // Create an empty array
testScore["Bob"] = 89;
“string” (instead of a testScore["Mary"] = 95;
number) as the index

document.write(testScore["Bob"]);
// The array. length will print a zero because apparently

to the elements of an // the length only counts the array with numeric index!!
document.write(testScore.length + " ");
array. // To examine the elements of the array

for(var student in testScore)
{
document.write(student + " : ");
document.write(testScore[student] + " ");
}
JavaScript 33
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
LOOPS
• While Loop
var number=0;
while (number<5){
document.write(number+" ");
number++;
}
• Do-While Loop
var number=0;
do{
document.write(number+" ");
number++;
}
while (number<5) ;
• For Loop
for (var i=0; i<3; i++){
document.write("This text is repeated three times ");
}
• For –in Loop

var userprofile={name:'George', age:30, sex:'male', getage:function(){return this.age}};
for (var attr in userprofile){
document.write(""+attr+": "+userprofile[attr]+" ");
}
JavaScript 35
WHILE LOOP
JavaScript 36
DO-WHILE LOOP
JavaScript 37
FOR LOOP
JavaScript 38
FOR-IN LOOP
JavaScript 39
ASSOCIATIVE ARRAYS AND FOR-IN LOOP
JavaScript 40
CONDITIONAL
• Same as C and C++
• If Statement
if (expression)
statement1;
else if (expression2)
statement2;
else
statement3;
• Switch Statement
switch (expression){
case label1:
statement1
break
case label2:
statement2
break
default: statement3;
}
JavaScript 41
MODULES
• JavaScript has several built-in objects. Each of these
objects have several built-in Functions:
Some Built-in Functions:
Built-in Objects: – alert();
– confirm();
– Array – prompt();
– Boolean –
–
parseInt(x);
parseFloat(x);
– Date – Math.max(x,y);
– Math.min(x,y);
– Math – Math.pow();
– Math.random();
– Number – Date();
– String –
–
toString()
charAt()
– toLowerCase()
– RegExp – toUpperCase()
– Global – escape(), unescape()
http://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm http://www.javascriptkit.com/jsref/math.shtml
JavaScript 42
MODULES
• User-defined Functions:
function getArea(w, h)
{
var area = w*h;
return area;
}
document.writeln(getArea(3,5)); //call the function
JavaScript 43
MODULES
• Recursive Functions:
function factorial(number)
{
if (number <=1) //base case
return 1;
else
return (number * factorial(number-1));
}
alert(factorial(5)); //call the function
JavaScript 44
RECURSIVE FUNCTIONS
JavaScript 45
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
JAVASCRIPT AND ITS RELATION WITH
DOM VS. BOM
• Document Object Model (DOM) Browser Object Model (BOM)
• The Document Object Model (DOM) • Browsers feature a Browser Object

is an application programming Model (BOM) that allows access
interface (API) for HTML as well as and manipulation of the browser
XML. window. For example (browser
history, location, navigator, and
• The DOM organizes the entire web screen)
page as a document composed of a
hierarchy of nodes like a tree • Because no standards exist for the
structure and using the DOM API, BOM, each browser has its own
nodes can be removed, added, and implementation.
replaced.
• BOM allows the developer to
• DOM allows the developer to manipulate the browser window.
manipulate the document.
JavaScript 47
DOCUMENT
<html>
<head> <body>

tags
such as
<meta>,
Java
<link>, CSS
script
Etc.
JavaScript 48
THE STRUCTURE OF BROWSER OBJECT
Window
Screen Navigator History Location Document
DOCUMENT
Detecting Array of To
Detecting
the previously
<html>
screen size automatically

browser visited navigate the
and
<body>
<head>
used by URLs by user to

resolution < < <
the visitor the visitor

<script
<title> <style> h p a
another page
>
1> > >
Other
tags
such as
<meta
>,
<link>,
Java
Etc. CSS
script
http://www.javascriptkit.com/jsref/window.shtml
JavaScript 49
INTERACTING WITH BOM
• Screen: contains information about the visitor's screen.
– (height, width, colorDepth, etc)
• Window: represents an open window in a browser.

– (open, close, name, length, width, parent, screenleft, screentop, alert(), prompt(),
print(), moveTo(),moveBy(), scrollBy(), scrollTo(), blur(), setTimeout(), etc)
• Navigator: contains information about the browser.

– (appName, CookiesEnabled, JavaEnabled, etc)
• History: contains the URLs visited by the user (within a browser

window).
– (length, back(), forward(), go(), etc.)
• Location: contains information about the current URL.

– (host, hostname, href, port, protocal, assign(), reload(), replace())
http://www.w3schools.com/jsref/obj_window.asp
JavaScript 50
INTERACTING WITH DOM
• The Document object is the root of a document tree. It gives us access to the
document's data elements.
• Since element nodes, text nodes, attributes, comments, etc. cannot exist outside
the document, the Document object contains methods to create and access these
objects.
• Properties: doctype, documentURI, inputEncoding, xmlEncoding, anchors,

forms, images, links, referrer, title, URL, domain, lastmodified, etc.
• Methods: open(), close(), write(), writeln(), getElementByName(),

getElementById(), getElementByTagName(), renameNode(), setAttribute(),
getAttribute(), removeAttribute(), etc.
• Events: load, unload, resize, scroll, click, dblclick, mousedown, mouseup,

mouseover, mouseover, mouseout, keydown, keyup, keypress, etc.
http://en.wikipedia.org/wiki/DOM_events
http://www.w3schools.com/jsref/dom_obj_node.asp
JavaScript 51
SCREEN / MONITOR OBJECT
document.write("Total Width of the screen (including the Windows Taskbar): " + screen.width + " ");
document.write("Total Height of the screen (including the Windows Taskbar): " + screen.height + " ");
document.write("Width of the screen (excluding the Windows Taskbar): " + screen.availWidth + " ");
document.write("Height of the screen (excluding the Windows Taskbar): " + screen.availHeight + " ");
document.write("Bit depth of the color palette for displaying images: " + screen.colorDepth + " ");
JavaScript 52
WINDOW /BROWSER OBJECT
document.write("X coordinate of the window relative to the screen: " + window.screenX + " ");
document.write("Y coordinate of the window relative to the screen: " + window.screenY + " ");
document.write("Inner Width of a window's content area: " + window.innerWidth + " ");
document.write("Inner Height of a window's content area: " + window.innerHeight + " ");
document.write("Outer width of a window, including toolbars/scrollbars: " + window.outerWidth + " ");
document.write("Outer height of a window, including toolbars/scrollbars: " + window.outerHeight + " ");
document.write("Current URL: " + window.location + " ");
JavaScript 53
WINDOW OBJECT (CONTINUED…)
• To create a new Browser Window:
– var myWin = window.open('‘, '_blank', 'width=100, height=400'); //make sure the pop-up blocker is off
• To write to that window:

– myWin.document.write("Hello");
• To position and size the window the window:

– myWin.moveTo(0,0); // not consistent (works in IE)
– myWin.resizeTo(500,500); // not consistent (works in IE)
• To focus on the window:

– myWin.focus(); // not consistent (works in IE)
• Creating a Timer Object: (to do something at a later time)

– myWin.document.write("....close in 15 seconds...");
– myWin.setTimeout(function() {myWin.close()}, 15000);// close window after 15 seconds
• Creating a Timer Object: (to repeat something on regular intervals)

– myWin.setInterval(function() {displayClock(myWin)}, 1000); // run the display clock function every second.
JavaScript 54
WINDOW OBJECT (CONTINUED…)
• To Scroll the Browser Window:
– window.scrollTo(x,y);
JavaScript 55
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
NAVIGATOR OBJECT
document.write("The name of the browser: " + navigator.appName + " ");
document.write("The code name for the browser: " + navigator.appCodeName + " ");
document.write("Version information for the browser: " + navigator.appVersion + " ");
document.write("Boolean that indicates whether the browser has cookies enabled: " + navigator.cookieEnabled + " ");
document.write("User Agent (can be used to determine mobile browsers such as iPhone, iPad, or Android: " +
navigator.userAgent + " "); //returns true if user is using one of the following mobile browsers
var isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
document.write("UserAgent is Mobile? " + isMobile + " ");
JavaScript 57
HISTORY OBJECT
•To get the length:
•document.write("Number of URLs in History object: " + history.length + " ");
•To move Backward or Forward:
•history.back();
•history.forward() ;
function goBack()
{
window.history.go(-1);
}
function goForward()
{
window.history.go(+1);
}
<body>
<input type="button" value="Go Back" onclick="goBack()">
<input type="button" value="Go Forward" onclick="goForward()"> (Forward may not do anything here since there may be no links
in the forward history!)
</body>
JavaScript 58
LOCATION OBJECT
document.write("URL of the current page: " + location.href + " ");
document.write("Show the Host: " + location.host + " ");
document.write("Show the Hostname: " + location.hostname + " ");
document.write("Show the Protocol (FILE, HTTP, HTTPS, etc:) " +
location.protocol + " ");
document.write("Show the Port number: " + location.port + " ");
document.write("Reload the current page: (Notice this should be controlled by an IF

statement or an Event handler.) " + " ");
//location.reload();
document.write("Replace the URL of the current page with another URL: " + " ");
//location.replace('http://www.iusb.edu');
JavaScript 59
AN INTRODUCTION TO
WEB PROGRAMMING

Indiana University
South Bend, IN
DOCUMENT
<html>
<head> <body>

tags
such as
<meta>,
Java
<link>, CSS
script
Etc.
JavaScript 61
INTERACTING WITH DOM
• The Document object is the root of a document tree. It gives us access to the
document's data elements.
• Since element nodes, text nodes, attributes, comments, etc. cannot exist outside
the document, the Document object contains methods to create and access these
objects.
• Properties: doctype, documentURI, inputEncoding, xmlEncoding, anchors,

forms, images, links, referrer, title, URL, domain, lastmodified, etc.
• Methods: open(), close(), write(), writeln(), getElementByName(),

getElementById(), getElementByTagName(), renameNode(), setAttribute(),
getAttribute(), removeAttribute(), etc.
• Events: load, unload, resize, scroll, click, dblclick, mousedown, mouseup,

mouseover, mouseover, mouseout, keydown, keyup, keypress, etc.
http://en.wikipedia.org/wiki/DOM_events
http://www.w3schools.com/jsref/dom_obj_node.asp
JavaScript 62
DOM OBJECT
• document.getElementById ()
JavaScript 63
DOM OBJECT
var checkAllBtn = document.getElementById("ckallbtn");
checkAllBtn.value = "Uncheck All";
JavaScript 64
DOM OBJECT
// Get the form object
var theForm = document.getElementById("form1");
// Get the elements within the form

var theElements = theForm.elements;
JavaScript 65
DOM OBJECT
// Get the form object
var theForm = document.getElementById("form1");
// Get the elements within the form

var theElements = theForm.elements;
JavaScript 66
DOM OBJECT
• Two Dimensional Arrays
• Changing the internal attributes of an HTML table.
• Changing the background color, changing the format format.
JavaScript 67

An Introduction To Web Programming

Uploaded by

Copyright:

Available Formats

An Introduction To Web Programming

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

An Introduction To Web Programming

Uploaded by

Copyright:

Available Formats

AN INTRODUCTION TO

Dr. Hossein Hakimzadeh

• Java script is the de facto standard for client side programming

• Java scripts are executed by the browser, however some

• The Document Object Model (DOM) • Browsers feature a Browser Object

<title> Other <style> <script> <h1> <p> <a>

Screen Navigator History Location Document

screen size automatically

used by URLs by user to

the visitor the visitor

Dr. Hossein Hakimzadeh

• Their type is determined only after they are assigned a

var myName; // No data type yet. (undefined)

myName = “Cyrus”; // variable type will become string

myNumber = 5.6; // change the type int to float

&, |, ^, ~, >>, <<

Remember however, document is part of a window (or BOM object)

• Prompt will return the string the user has entered.

Dr. Hossein Hakimzadeh

• //Sort Alphabetically and ascending:

• //Sort numerically and ascending:

Private Sub BubbleSort(ByRef TheArray() As Integer)

Dim Pass, Index, Hold As Integer

For Pass = 1 To TheArray.GetUpperBound(0)

For Index = 0 To TheArray.GetUpperBound(0) – 1

If (TheArray(Index) > TheArray(Index + 1) )Then

(c) Copyright 2007, H. Hakimzadeh 24

• Concatenates either a single elements or another array of

var fruits=["Apple", "Oranges"];

• Returns the first index in which targetElment

• var fruits=["Apple", "Oranges", "Pork", "Chicken"];

number) as the index

// The array. length will print a zero because apparently

array. // To examine the elements of the array

Dr. Hossein Hakimzadeh

• For –in Loop

– Global – escape(), unescape()

document.writeln(getArea(3,5)); //call the function

alert(factorial(5)); //call the function

Dr. Hossein Hakimzadeh

• The Document Object Model (DOM) • Browsers feature a Browser Object

<title> Other <style> <script> <h1> <p> <a>

Screen Navigator History Location Document

screen size automatically

used by URLs by user to

the visitor the visitor

• Window: represents an open window in a browser.

• Navigator: contains information about the browser.

• History: contains the URLs visited by the user (within a browser

• Location: contains information about the current URL.

• Properties: doctype, documentURI, inputEncoding, xmlEncoding, anchors,

• Methods: open(), close(), write(), writeln(), getElementByName(),

• Events: load, unload, resize, scroll, click, dblclick, mousedown, mouseup,

• To write to that window:

• To position and size the window the window:

• To focus on the window:

• Creating a Timer Object: (to do something at a later time)

• Creating a Timer Object: (to repeat something on regular intervals)

Dr. Hossein Hakimzadeh