JS Objects -part 1

Browser Objects and Built-in Objects

JavaScript organizes all the objects in a Web page in a hierarchy. Six built in browser objects are available and they can be used in any scripting language and three built-in objects.

Browser Objects:
Window
Document
Form
Navigator
History
Location
Built-in Objects:
String
Math
Date

Window Object :
The window object is the top level object in the object model. It contains all other objects except the navigator object, which is not tied to any particular window.

Properties:-
default status – The default message in the status bar
frames - An array that describes all the frames in the window
length - Reflects the number of frames in a window
name - Name of the window
status - Values that appear in the window's status bar, usually last for a moment before being overwritten by some other event.
Method:
alert : Bring up alert dialog box in which we can display the data
close : Closes the window
confirm : Bring up a dialog box with yes or no buttons and a user specified
message
open : opens a new window
prompt : Brings up a window with user specified text and an
input box that allows the user to type information

Document Object :
The document object is very useful because it contains a lot of information about the current document.

Properties :
alinkcolor : reflects ALINK attribute of tag
anchors : array listing of all the html anchors
anchor : an anchor object
bgcolor : used to set the background color of document
fgcolor : used to set foreground color (text color) of the document
history : The object containing current browser's history
linecolor : default color setting for all the links
vlinkcolor: used to set the color of the links that have been visited

Methods :
clear ; Clears the window of all its content
close : close the open document
open : opens a new document
write ; writes some expression to current window
writeln : writes some expression to current window and write a new line character at the end
Form Object:

The Form object is created every time Javascript encounters a

.....

in the HTML document. It contains all the information about the form
as well as it can be used to submit information to the server.

Properties:
action : reflects the html action attribute of the

tag
elements : an array of listing of all the elements in a form
length : number of elements in the form
method : reflects METHOD attribute of the tag

Method :
Submit : submits the form to the location in the ACTION attribute


Navigator Object :
This object contains the information about the browser like name of browser,version etc.

Properties :
AppCodeName : The code name of the browser
appName : Name of browser
appVersion : Contains the user – agent header that the server sends to
the server to identify itself
History Object:

This object is used to navigate between pages

Methods:

forward
back
go(n) where n is an integer

Built -in Objects
String object :
String object's method can be used to modify and add HTML modification without changing the string itself. Any number of its methods can be stringed together to create multi-layers of HTML encoding.

Properties:
length : number of characters in the string

Methods:
anchor: converts string to anchor
charAt : returns the character at some index value . Index is read from left to write
fixed : encloses a string in ...
index of ; looks for first instance of some string and returns the index of the first character in the target string
link : converts string to hyperlink
substring : given start and end indices, returns the string contain within those indices
to lowercase : convert to lowercase
touppercase : convert to upper case


Math Object:
The Math object contains a set of methods that are used to perform high level mathematical operations. It has a set of properties and methods. Instance for Math object need not be created.

Properties:
1.E
2.log2E
3.ln2
4.log10E
5.ln10
6.PI
Methods
1.abs
2.acos
3.asin
4.max
5.min
6.sqrt
7.Log
8.Abs
9.Ceil
10.Floor
11.round

Date Object :
The Date object allows gathering information about the client's current time,year, month, and date

Methods:
getDate : returns current date
getDay : returns the day of the week
get Hours : returns number of hours since midnight
getMinutes : returns the number of minutes in past hour
getMonth : number of month since January
getSeconds:
getTime :
getYear:

JS loops :

JS loops :
Loop statements are used to repeat the execution of a set of statements. There are three loop statements available in JavaScript.
1. do... while Statement
2.while statement
3.for statement

do ...while statement

do ... while executes the statements for once even if the condition is wrong because the condition is checked only at the end of the loop .



In above example at the time of onLoad event happens, it will call that color ( ) function.
In color function an input is obtained from the user using the prompt method of window object. The prompt has two arguments. The first argument passed is the message that will appear in the prompt dialog box (in this case “ Enter your favorite color”)and the second argument is the default value that will appear in the text box( gray in this above program ). In this place you can input your color.
Since the while loop condition is x==”” or x== null , if we didn't give any input the prompt will come again because the condition is true

for loop

for loop executes the statements inside the curly brackets until the condition become false.
for (initialization statement ; condition ; update statement )
{
statements
}



In the above example the 'data' variable is incremented by one in every loop and drawn a line by the color the user has entered through the prompt. When the condition (data < x) become false, the control will come out of the 'for loop'.
document.write(“

---

”) is to draw a line using the color user has given as input.

while loop.

while loop checks the condition before entering into the loop statements.



In the above example , the numbers are being printed starting from 0 to 4 using the while loop. Document is a built in object and write is a method. Any data passed in the write method gets printed in the browser.

break statement :

break statement is used to terminate the execution of a loop and transfer control to the statement following the loop.

count = 0;
for (i = 0; i < 5 ; i++)
{
if ( i==3) break;
count += i;
}
document.write(count);

count will be 3 because when the if clause become true, the break will get executed and control will go to statement following the loop( in this case - > document.write(count); ).

Js functions

JS functions:

JavaScript functions will be executed only when the event happens
or by a call to that function. To keep the browser from executing a
script when the page loads, we can define it as a function.




In this external script 'jsfunc.js ' contains only only a function. This script can be called from the main page.
window.alert("welcome to my page"); is for pop up message .




When the onload event happens ( means if we open that page), from body it will automatically call the fun() function. Actually that event has called the function.

Argument passing and return value:

We can pass arguments through functions as we are doing in C programming language. For declaring a variable 'var' keyword and returning a value 'return' keyword also uses. Rewriting the external script 'jsfunc.js' as below





From page, onload event calls the fun() and this function call add() with arguments 2,3 . The add() function return the added value through 'x' variable to 'sum' variable.The document.write function display the value of the variable in the page.

Js Comments

Comments can be added to explain the javascript or to make javascript more readable.

Single Line Comments:
Second line of the code shows how to comment a line using // symbol.




Multiple line comments:
This code used mutliple line comment method in Javascript.





One more important thing we have to
remember before writing a professional javascript is to use an HTML
comment tag (end
comment) after the last javascript statement. Because browsers that do
not have support for javascript will display javascript as page
content. To prevent this as part of javascript , the html comment tag
can be used to hide javascript.

What is JavaScript??

What is Javascript ?

Javascript was designed to add interactivity to HTML pages .The script is computer excutable code and usually embed directly to HTML pages. The script will execute without priliminary compilation and the main advantage is everyone can use it without purchasing license.

What is the relation between Java and Javascript ?

Java and JavaScript are entirely different lanaguages in both concept and design. Javascript copies many Java names and naming conventions . It's official name ECMA script because it is following ECMA -262 standard. Javascript is originally developed by Brendan Eich of Netscape under the name Mocha which is later renamed to Livescript and finally to Javascript. It was first introduced and deployed in the Netscape browser version 2.0B3 in December 1995.


Features

• Structured Programming : Javascript support almost all the structural programming syntax in 'C' ( eg : if ,while,switch ..etc)
• Dynamic Programming : Dynamic Typing (type assigning) facility is avaliable and it is heavily object-based. Object are associative arrays, that means obj.x = 5 and obj ["x"] = 5 are equivalent.
• Functional Programming : Function - level programming is tremondously using in javascript.
• Protype based : Javascript uses prototype instead of classes for defining object properties, including methods and inheritance. It is possible to simulate many class-based features with prototypes in Javascript.
• Javascript can react to events : events may be from mouse or keyboard .. etc
• Javascript can read and write HTML elements
• Javascript can validate data in a form before it is submitting to server
• Javascript can be used to create cookies