JavaScript - Client Side Object
Review
window.status = "change the status bar contents";
window.defautlstatus = "default status bar contents";
navigator object = info
about browser. Example: navigator.appName. Example:
if(navigator.appName ==
"Microsoft Internet Explorer") {
document.write("IE!"); }
if(navigator.appName ==
"Netscape") {
document.write("Netscape!"); }
else {document.write(navigator.appName)};
location object - redirects a page client side, contains
url information. Examples:
Displaying Information
document.write(" +
+ document.location +
+ location.href +
+ location.protocol +
+ location.host +
+ location.hostname +
+ location.port +
+ location.pathname )";
Redirecting a Page (3 Methods)
1. Javascript (Client-side): document.location.href =
http://www.networkingprogamming.com
2. META TAGS: <meta
http-equiv="refresh" content="5;
url="http"//www.networkingprogramming.com">
3. ASP (Server-side): response.redirect
"http://www.networkingprogramming.com"
Note: Redirection on the client side can be
stopped. Redirection on the server side can not.
reload = reloads the
page. Example: location.reload()
;
replace = replaces page with another. Example: location.replace("http://www.no.com");
history = history list. Examples:
window.history.length
= number of entries
window.history.back()
= go to previous entry in history list
window.history.next()
= move to the next window in the history list
window.history.forward()
= advance to next entry in history list
window.history.go(x)
= would go to a specific entry in history list (represented by
x)
Calling functions using hyperlinks.
Use void(0) so won't go to URL if needed. Examples:
<A href="javascript:TheFunction()">Invoke
Function</a>
<A href="javascript:void(0)"
onClick="document.bgColor="silver">SILVER</a>
Document Object Attributes = Web page/document
attributes. Use with document. +
alinkColor -
active hyperlink color
background -
background image
bgColor - background color
cookie - document's cookie
defaultClientScript - default
client scripting language
defaultServerScript - default
server scripting language
domain - domain name of web server
hosting page
fgColor - foreground color (the
text)
lastModified - date page was last
changed
linkColor - color of link
referrer - url of referring page
(page they came from)
text - text color
title - text string in caption bar
url - url of current page
vlinkColor - visited link color
document.open = clears document for
new input
document.close = stops output
to document
Reading and Writing Cookies Client-Side
document.cookie = "FavoriteAnimal=Cats;
expires=Friday, 12:00:00 GMT";
var ReadMeTheCookie;
ReadMeTheCookie = document.cookie;
Event Handlers = Can be used to invoke/call functoins
from event based programming.
|
Event
handler
|
Applies
to
|
Occurs
when
|
onChange
|
text
fields, textareas, select lists
|
User
changes value of element
|
onClick
|
buttons,
radio buttons, checkboxes, submit buttons, reset buttons,
links
|
User
clicks form element or link
|
onDragDrop
|
windows
|
User
drops an object onto the browser window, such as dropping
a file on the browser window
|
onError
|
images,
windows
|
The
loading of a document or image causes an error
|
onKeyDown
|
documents,
images, links, text areas
|
User
depresses a key
|
onKeyPress
|
documents,
images, links, text areas
|
User
presses or holds down a key
|
onKeyUp
|
documents,
images, links, text areas
|
User
releases a key
|
onLoad
|
document
body
|
User
loads the page in the Navigator
|
onMouseDown
|
documents,
buttons, links
|
User
depresses a mouse button
|
onMouseMove
|
nothing
by default
|
User
moves the cursor
|
onMouseOut
|
areas,
links
|
User
moves cursor out of a client-side image map or link
|
onMouseOver
|
links
|
User
moves cursor over a link
|
onMouseUp
|
documents,
buttons, links
|
User
releases a mouse button
|
onMove
|
windows
|
User
or script moves a window
|
onReset
|
forms
|
User
resets a form (clicks a Reset button)
|
onResize
|
windows
|
User
or script resizes a window
|
onSelect
|
text
fields, textareas
|
User
selects form element's input field
|
onSubmit
|
forms
|
User
submits a form
|
onUnload
|
document
body
|
User
exits the page
|
String Object - Example: var StringName = new String();
Document Object Method Review:
Dialog Boxes
window.alert("some text");
window.confirm("some text");
window.prompt("Text to display", "Default Text");
Windows
opening - window.open("WebPage.html", "WindowName",
"height=200, width=400, status=no,
toolbar=no, menubar=no, location=no");
closing - window.close();
assigning to an object - win = window.open("ge.html","nam","status=no,menubar=no,scrollbars=no,resizable=no");
moving - win.moveTo(0,0);
resizing - win.resizeTo(400,600);
writing to windows - win.document.write(SomeStringVariable);
or win.document.write("Text in new window.");
Displaying Information
navigator.appname = browser name
navigator.appVersion = browser version
navigator.userAgent = user agent
location.href - complete url
location.hostname - host portion of url
document.title = document title
document.referrer = url surfer is coming from
document.lastModified = date last page was modified
Classes in JavaScript
Classes in JavaScript are comparable to friend classes in C++.
Methods and data members are declared inside the class, but they are
defined outside (implementation). Instead of the "class"
keyword, as in C++, classes are defined with the function keyword and
the "this" pointer, to allow each object its own data
members. Instantiation involves declaring a variable and using it
like a pointer in C++. In other words, you would assign the
variable to an instance of the pre-defined class and ust the dot
operator along with that variable to get at data members and functions
of that class. Example:
<script language="JavaScript">
function Monster() {
this.Strength = 10;
this.Life = 100;
this.setStrength = setStrength;
this.getStrength = getStrength;
this.getLife = getLife;
this.setLife = setLife;
this.DamageMonster = DamageMonster;
this.AttackPlayer = AttackPlayer;
} //close function that defines/declares class
function setStrength(Str) { this.Strength = Str; }
function getStrength() { return (this.Strength); }
function.setLife(Lif) { this.Life = Life; }
function.getLife() = { return (this.Life; }
function AttackPlayer() {
var seriouspain;
seriouspain = Math.floor(1 + Math.random() * 6);
switch(seriouspain) {
case 1 : document.write("Merely a flesh wound.");
break;
case 2 : document.write("A serious scratch.");
break;
case 3 : document.write("You are bleeding profusely.");
break;
case 4 : document.write("You are critically wounded");
break;
case 5 : document.write("You are now dead!");
break;
case 6 : document.write("Not only are you dead, you are refused a
decent burial");
break;
default : document.write("Strange, this shouldn't be
happening...");
}
}
function DamageMonster() {
var PutAHurtinOnTheMonster;
PutAHurtinOnTheMonster = Math.floor(1 + Math.random() * 6);
if(PutAHurtinOnTheMonster > 5) {
document.write("You killed the monster!");
}
else {
if(PutAHurtinOnTheMonster > 4) {
document.write("You have critically wouned the monster.");
}
if(PutAHurtinOnTheMonster !> 3) {
document.write("The monster merely laughs at you.");
}
} //close function definition
//Instantiatiing object with our class
var Godzilla, Mothra;
Godzilla = new Monster();
Mothra = new Monster();
Godzilla.setLife(500); Godzilla.setStrength(150);
Mothra.setLife(300); Mothra.setStrength(50);
document.write("From the murky depths comes the greatest monster of
all time - Godzilla!<br>");
document.write("Godzilla has " + Godzilla.getLife() + "
life points. He is of strength " + Godzilla.getStrength() +
".");
Godzilla.AttackPlayer();
Godzilla.DamageMonster();
</script>
For In Loops
Note: Used to retrieve properties anc collections of an object.
for(var KeyItemThingies in
document) {
document.write(KeyItemThingies);
document.write(" = ");
document.write(document[KeyItemThingie]);
document.write("<br>");
}
JavaScript
Math Object Methods
|
Method
|
Description
|
Example
|
Result
|
|
Abs
|
Returns the absolute value of a number
|
Math.abs(-5)
|
5
|
|
Floor
|
Rounds the number to the next lowest integer
|
Math.floor(5.05)
|
5
|
|
Ceil
|
Rounds the number to the next highest number
|
Math.ceil(5.05)
|
6
|
|
Random
|
Returns a random number between 0 and 1
|
Math.random()
|
Varies
|
|
Round
|
Rounds the number to the nearest integer
|
Math.round(5.5)
|
6
|
|
Min
|
Returns the lower of 2 numbers
|
Math.min(1,10)
|
1
|
|
Max
|
Returns the higher of 2 numbers
|
Math.max(1,10)
|
10
|
JavaScript
String Object Methods
|
Method
|
Description
|
Example
|
|
bold
|
Displays
the string in bold style
|
var
strEx = "Click Here";
document.write(strEx.bold());
|
|
anchor
|
Creates
an anchor; same as HTML code:
<a
name=”click”>Click Here</a>
|
|
|
fontcolor
|
Displays
the string in the specified color. The name or hexadecimal value
for the color may be used.
|
var
strEx = "Click Here";
strEx.fontcolor(“ff0000”);
|
|
fontsize
|
Displays
the string in the specified size. The size ranges from 1 to 7.
|
var
strEx = "Click Here";
strEx.fontsize(4);
|
|
toLowerCase
|
Converts
the string to all lowercase
|
var
strEx = "Click Here";
strEx.toLowerCase();
|
|
toUpperCase
|
Converts
the string to all uppercase
|
var
strEx = "Click Here";
strEx.toUpperCase();
|
|
charAt
|
Returns
1 single character from a string at the position indicated.
Start counting the first character as 0.
|
var
strEx = "Click Here";
strEx
.charAt(4);
|
|
indexOf
|
Searches
for a specified string within a string object. You can specify
which position to begin the search. Returns –1 if no match is
found, or the index number of the first character of the string
found.
|
var
strEx = "Click Here";
strEx
.indexOf(“H”, 0);
|
|
lastIndexOf
|
Searches
for a specified string, starting from the end of the
string
|
var
strEx = "Click Here";
strEx
.lastIndexOf(“H”, 0);
|
|
substring
|
Returns
a subset of a string. The first number indicates the starting
position. The second number indicates the position of the last
character to be returned.
|
var
strEx = "Click Here";
strEx
.substring(0, 4);
|
|
split
|
Splits
the string into an array of smaller strings. A separator
character is used to determine where to split the string.
|
var
strEx = "One, Two, Three";
var
nEx = Ex.split(“,”);
document.write(nEx[2]);
|
When a value is passed from a form, the value is passed as a string.
You cannot perform mathematical calculations on strings. Whether you are
working in JavaScript or VBScript, you will need to convert string
variables and strings to numbers. In JavaScript these functions include
eval, isNaN, parseInt, and parseFloat.
|
Functions
|
Explanation
|
|
eval
|
Will evaluate a string of JavaScript
statements that can consist of expressions, variables,
functions, and objects.
|
|
isNaN
|
Known as the “is not a number”
function, can determine whether the value is something other
than a number. The isNaN function returns false if the value is
a number, or true if the value is not a number.
|
|
parseInt
|
Converts a string into a number.
|
|
parseFloat
|
Converts a string into a float.
|
|
Syntax
of the code
|
Explanation
|
|
strQ=window.document.frm1.txtVAL.value;
|
The
variable strQ is initialized to the value placed in the
textbox set up in the form. It is initialized as a string object.
|
|
strT=eval(strQ);
|
The eval()
function converts the
string to a number and places the value in the strT
variable.
|
|
document.frm1.txtTotal.value
=strQ+5;
document.frm1.txtNumber.value
=strT+5;
|
The
first line is treated as a string concatenation.
The
second line is treated as a math equation.
|
|
Contact
