JAVASCRIPT
Javascript
Introduction
Today's web sites need to go much beyond HTML.There is a definite need to allow users,browsing through a web site,to actually interact with the web site.The web site must be intelligent enough to accept users input and dynamically structure web page content,tailer made,to a user's requirements.
This may be as simple as ensuring a web page delivered to a user,having a background color that the user is confortable with of as complex as delivering a web page with special textual formatting for a user with visul disabilities.
The need to return standard HTML Pages,that map to a user's input ,is due to the fact that brosers use HTTP to communicate with a web server and are designed to interpret and render HTML on a client's machine.
The web site development enviroment should also provide the facility for 'validating' user input.Invalid user input,will either cause data to be sent back from the web server to the browser,which is not what the user wants or give rise to an error message being sent back to the browser from the web server.Neither of which would really attract repeat visits to the web site.
Hence,the web site development environment must also faciitate coding which runs in a browser at client side or data validation.Most developement environments offer standard constructs for data validation.Standard Programming constructs are:
IF the development environment is obejct oriented it will provide an object hierarchy to work with.An Object Oriented Programming(OOP)environment always offers event driven programming.This means that the programming environment will recognize object based events and allow the connection of code snippets to these events.When an event occurs, the code snippets will execute.
Netscape and javascript
Javascript is a scripting language(web site development environment)created by Netscape hence Javascript works best with the Netscape suite of client and server products.
The Netscape client 'browser'product is called Netscape Communicator.The default scripting langauge that Netscape Communicator understands is Javascript.
Database Connectivity
Netscape has a product called 'Livve Wire'.which permits server side.Javascript code,to connect to Realational Database Management Systems(RDBMS).RDBMS such as Oracle.MS SQL Server,MySQL and a host of other widely used relational database,which use generally use ANSI SQL as their natural language.'Live Wire' database drivers also support a number of non -relations databases.
Client side javascript
Client-side,javascript is traditionally embedded into a standard HTML program .Javascript is embedded between the <script>......</script>HTML tags.These tags can are embedded within the <Head>.......</head>or <body>.......</body> tags of the HTML program.
Javascript is embedded into an HTML program because Javascript uses the filename.html and the HTTP protocol to transport itself from the web server to the client's browser where the Javascript executes and processes client information.
Only a browwser that is Javascript enabled will be able to interpret Javascript code.Netscape Communicator does this best as Javascript is the natural langauge of Netscape Communicator.
Microsoft's Internet Explorer also interprets Javascript.However,Internet Explorer latest releases support an old version of Javascript.Hence,the total functionality of the latest release of Javascript as is available in Netscape Communicator is not available in Internet Explorer.
Javascript is an object-oriented langauge that allows creation of interactive web pages,Javascript allows user entries,which are loaded into an HTML form to be processed as reequired .This empowers a web site to return site information according to a user's requests.
Javascript offers several advantages to a web developer .A short development cycle .Ease of learing.Small size scripts .The strengths Of Javascript can be easily and quickly used to extend the functionally of HTML pages,already on a web site.
Variable
A Variable is a data storage in memory we can imagine memory as a series of cubyholes or box.Each box will have the Numerical address.
The literal name of the box is called variable with the help of the variable we can strore the data in it ir retrieve the data fpr manipulation.
Variable naming Convention:
var x;
var age;
var name;
Example
<html>
<head>
<title>Javascript sample page</title>
</head>
<body>
<script langauge="javascript">
var x;
x=10;
document.write("value of x ="+x )
</script>
</body>
Operators and expressions on Javascript
An operator is used to transform one or more values into a single resultant value.The values to which the opertaor is referred to as operands .A combination of an operator and its operands is referred to as an expression.
Expressions are evaluated to determine the value of the expression.This is the value that results when an opertors is applied to its operands.
Arithmetic Operators
Operator Description + Addition - Subtraction or uniary negation * Multiplication / Division % Modulus ++ Returs the value then Increment -- Return the value then Decrement An operator requiring a single is referred to as a uniary operator and one that requires two operands is a binary operator
The above standard arithemetic operators are binary operators.In addition to these binary operators,there are unary arithemetic operator.They are (++) and (--)
Both these increment and decrement operators can be used in two different ways.Before the operand or after the operand .For example,++x increment x by one and returns the result,While x++ returns x and then increment the value of x by one.similarly,--x decreases the value of x by one before returing a result,while x-- return the value of x before decreasing its value by one.
Example
x=3y=++x
z=x++
In these lines of code, X is first assigned the value of 3,which is then increased to 4 and assigned to Y.The new value of 4 is assigned to Z,and the value of x is increased to 5.Finally,x is 5,y is 4 and z is 4.
Logical Operators
Logical operators are used to perform Boolean Operators on Boolean Operand and,or,not.The logical operators supported by javascript are:
Operator Description && and || or ! not Comparison Operator
Comaparison Opertors are used to compare two values.The comparison opertors supported by javascript.
Operator Description = = Equal = = = Strictly Equal != not Equal != = Strictly not equal < Less then <= Less than or equal to > Greater than >= Greater than or equal to
String Operator
String Operators are those operators that are used to perform operation on strings.Currently Javascript supported only the string concatenation(+) operator.
This operator is used to join two strings.Eg. "pq"+ "ab" produce "pqab".
Specail Operators
Javascript support a number of special operators that do not fit into the operator categories covered above.
The delete Operator
The delete operator is used to delete a property of an element at an arrray index.
Example
delete myarray[5]
Deletes the sixth element of myarray
The new operators
The new operator is used to create an instance of an object type.
Example
myArray=new Array()
This will create a new javascript object of the type array assign this array to a context area in memory called myArray.
The Void operator:
The void operator does not return a value.It is typically used ub javascript to return a URL with no value.
Javascript programmming constructs
Most Programming langauge support a common set of construct.Langauges only differ in the syntax used for structuring these constructs.
Javascript provides a complete range of basic programming constructs.While it is not an object oriented programming environment Javascript is an object-based language.
Construct Purpose Example Assignment Assigns the value of an expression to avariable x=y+z data declaration Declares a variable and optionally assigns a value to it. var x=10 if Program execution depends upon the value of returned by the condition.If the value returned is True the program executes else the program doesnot execute if(x>y)
{
z=x
} switch Select from a number of alternatives switch(num)
{
Case 1:
//statement
break;
Case 2:
//statement
break;
default
//default action While Repeatedly executes a set of statements until a condition becomes false while(x!=7)
{
x=n
} For Repeatedly executes a set of statements untill a condition becomes false For(i=1;i<7;i++)
{
document.write
("Himalayanweb.com")
} do while Repeatedly executes a set of satements while a condition is true do
{
//statement
}while(i>0) lable Associate a label with a statement Label Name:
statement break Immediately terminates a do while or for loop construct if(x>y)continue continue Immediately terminates the current iteration of a do,while or forn construct if<x>y)continue function call Invokes a function x=abs(y) return Returns a value from a function call return x*y with Indentifies the default object with(Math)
{
d=P*2*r;
} CONDITIONAL CHECKING
if - then-else
The conditional construct in javascript offers a simple way to make a decision in a Javascript program.The conditional construct in Javascript will either return a 'True' or a 'False' depending upon how the 'condition' evaluated.
using the if-else construct the flow of the javascript program can be altered .The if condition determines which section of the program code will be executed based on whether the condition evaluates to TRUE or FALSE.
Syntax
if(condition)
{
statements
}
Example
var x=1
if(x= =1)
{
document.write("The value is one")
}
LOOP
Looping refers to the ability if a block of code to reapeat itself.This repetition can be for a predefined number of times or it can go until certain conditions are met.
Javascript offers 2 type of loop structures:
For loops: These loops iterate a specific number of times as specified
While Loops:These are conditional Loops,which continue untill a condition is met.
For Loop
The for loop is the most basic type of loop and resembles a for loop in most other programming languages,including ASCI 'C'
Syntax
for(expression1;conditional;expression2)
{
statements
}
Where
<html>
<head>
<Title>For loop</Title>
</head>
<body>
<script language="javascript">
var i;
for(i=1;i<=10;i++)
{
document.write("<br>"+i)
}
</script>
</body>
</html>
While Loop
The while loop provides a simialar functionally.The basic structure of a while loop is :
Syntax
while(condition)
{
Statements
}
Where,the condition is a valid javascript expression that evaluates to a Boolean value.The Javascript commands executed as long as the codition is true.
Example
<html>
<head>
<Title>While loop</Title>
</head>
<body>
<script language="javascript">
var num=1;
while(num<=10)
{
document.write(num);
num++
}
</script>
</body>
</html>
Functions in javascript
Functions are blocks of Javascript code that peroform a specific task and often return a value. A javascript funnction may take take zero or more paramaters.Parameters are a standard technique via which control data can be passed to a function.Control data passed to a function,offers a means of controlling what a function returns.
Built in Function
Javascript provides several built in functions that can be used to perform explicit type conversions.Some of them are eval(),parseInt()and parseFloat()
Example
eval()
<html>
<head>
<Title>Sample page</Title>
</head>
<body>
<script language="javascript">
var total;
total=eval(" 0*10+5");
document.write(total)
</script>
</body>
</html>
parseInt()
<html>
<head>
<Title>sample page</Title>
</head>
<body>
<script language="javascript">
var x,y,sum;
x=prompt("Enter any number")
y=prompt("Enter any number")
sum=parseInt(x)+parseInt(y)
document.write("Total sum ="+sum)
</script>
</body>
</html>
Note: The Prompt comes to the box we can enter the value.
Function
Functions are declared and created using the function keyword.A function can comprise of the following:
function function_name(parameter1,parameter2.....)
{
Block of Javascript code
}
A Function_name is case sensitive,can include underscores(_)and has to start with a letter.the list of parameters passed to the function appears in parenthese and commas separate members of the list.
place of declaration
Functions can be declared anywhere within an HTML file.Preferably,functions are created within in <HEAD>......</HEAD> tags of the HTML file .This ensures that all functions will be parsed,it will lead to an error condition,as the function has not been evaluated and the Browser does not know that it exists.
Passing parameters
Values can be passed to function parameters when a 'Parameterized' function is called.Values are passed to the function ny listing them in the parenthese following the function name.Multiple values can be passed,separated by commas provided that the function has been coded to accept multiple parameters.
Both javascript built in functions and user-defined functions can accept parameters,process them and retrun values.During declaration,a function need to be infromed about the number of values that will be passed.
Example
function printname(user)
{
document.write("<HR>your name is<b>M<i>");
document.write(user);
document.write("<B><I><HR>");
}
Where printname is a function,which has a parameter called user.The parameter user can be passed a value at the time of invoking the function.Within the function,reference to user will then refer to the value passed to function.
Function call:
Printname("bob");
Note:
1)Both variables and literals can be passed as arguments when calling a function
2)If a variable is passed to the function changing the value of the parameter within the function doesnot change the value of the variable passed to the function
3)Parameters exits onlu for the life of the function
Example
<html>
<head>
<title>javascript</title>
<script langauge="javascript">
function sample()
{
document.write("Function starting")
}
</script>
</head>
<body>
<script lanague="javascript">
sample();
</script>
</body>
</html>
Example
<html>
<head>
<title>javascript Function</title>
<script langauge="javascript">
function sum(x,y)
{
var z;
z=x+y
document.write(z);
}
</script>
</head>
<body>
<script lanague="javascript">
sum(10,20)
</script>
</body>
</html>
Dialog Boxes
Javascript provides the ability to pickup user or display small amounts of text to the user by dialog boxes.these dialog appear asd separate windows and their content depends on the information provided by the user.This content is independent of the text in the HTML page conatining the Javascript script and does not affect the content of the page in any way.
There are three types of dialog boxes provided by Javascript:
The Alert dialog box:
The simplest way to direct small amounts of textutal output to a browser's window is to use an alert dialog box.The javascript alert()method takes a string as an argument and displays an alert dialog box in the browser window when invoked by appropriate Javascript.
The alert dialog box can be used to display a cautinary message or display some information.For instance:
A message is displayed to the user when incorrect information is keyed in a form
An invalid result is the output of calculation
A warning that a service is not available on a given date/time
sytax
alert("message")
Example
<html>
<head>
<Title>alert message</Title>
</head>
<body>
<script language="javascript">
alert("Hello")
</script>
</body>
</html>
The Prompt dialog box:
As seen the alert dialog box simply displays information in a browser and does not allow any interaction of the OK button provides some very minimal control over form events i.e.program execution halts completely untill some user action takes place.
prompt("Message","Default value");
Example
<html>
<head>
<Title>prompt box</Title>
</head>
<body>
<script language="javascript">
var x;
x=prompt("Enter any number")
</script>
</body>
</html>
The confirm dialog box:
Javascript provides a third type of a dialog box called the confirm dialog box.As the name suggests,this dialog box serves as a technique for confirming user action.The confirm dialog box displays the following information:
A pre defined message
Ok & Cancel button
The confirm dialog box,causes program execution to halt until user action takes place.User can be either the OK button being clicked, or the CANCEL button being clicked,which causes the following action to take place.
confirm("message");
Example
<html>
<head>
<Title>Confirm box</Title>
</head>
<body>
<script language="javascript">
confirm("Are you sure want to exit out of system")
</script>
</body>
</html>
Arrays
Arrays let you store several pieces of data in the same variable. Usually the pieces have a common theme. This can save you creating a heap of variables all with similar names. This is how they work:
var month_totals = new Array(12);
month_totals[3] = 1999.95;
month_totals[4] = 'No sales';
var a=4;
document.write(month_totals[a]);
document.write(month_totals.length);
document.write(month_totals);
var days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
The variables totals and days are made into arrays by the as-yet cryptic code 'new Array(…)'. This does two things. First, the number of items in the array is decided, and stored in a hidden place called 'length'. In line 1, it's set explicitly to 12. Second, space for some variables (also called array elements) is created, which is equal to the size of the array. Line 2 shows one of those items storing a value. '[3]' means the array element with element index 3. Array elements are counted from 0 (zero), not one, so a three element array called fred has elements fred[0], fred[1] and fred[2]. As line 2 and 3 show, array elements, can contain different types of data: 'month_totals[3] = 1999.95' is an an array variable of the Number type, whereas the third line, 'month_totals[4] = 'No sales'' is a String type..
Accessing array elements is easy. The first two document.write() lines display 'No sales' and '12'. The last line shows a shorthand way of creating an Array and setting all its elements at the same time.
Arrays in JavaScript are closely tied to objects, which are discussed further on. In particular, the array indices are not restricted to numbers because of their object-like status. Arrays can also expand in size (in number of elements) just by storing a value in an array element whose index is bigger than any that exists so far. So arrays are quite flexible compared to equivalent concepts in other languages.
The third document.write() above only needs to report that the variable printed is an object to match ECMAScript. However, Netscape Navigator will print out all the array elements, comma-separated, which is very handy. Navigator 2.02 doesn't know how to do 'new Array', and neither does Internet Explorer 3.02 with JScript 1.0, but it can be simulated with objects—see that section.
One of the things you can store in an array element is another array. An array of arrays can be treated like a multidimensional array, which has a number of uses, particularly in mathematics and graphics. This example creates a two-dimensional array of size two-by-two, and fills it with the values that make up an 'identity matrix'.
var matrix = new Array(2);
matrix[0] = new Array(2);
matrix[1] = new Array(2);
matrix[0][0] = 1;
matrix[1][0] = 0;
matrix[0][1] = 0;
matrix[1][1] = 1;
Today's web sites need to go much beyond HTML.There is a definite need to allow users,browsing through a web site,to actually interact with the web site.The web site must be intelligent enough to accept users input and dynamically structure web page content,tailer made,to a user's requirements.
This may be as simple as ensuring a web page delivered to a user,having a background color that the user is confortable with of as complex as delivering a web page with special textual formatting for a user with visul disabilities.
The need to return standard HTML Pages,that map to a user's input ,is due to the fact that brosers use HTTP to communicate with a web server and are designed to interpret and render HTML on a client's machine.
The web site development enviroment should also provide the facility for 'validating' user input.Invalid user input,will either cause data to be sent back from the web server to the browser,which is not what the user wants or give rise to an error message being sent back to the browser from the web server.Neither of which would really attract repeat visits to the web site.
Hence,the web site development environment must also faciitate coding which runs in a browser at client side or data validation.Most developement environments offer standard constructs for data validation.Standard Programming constructs are:
- Condition checking constructs
- Case checking constructs
- Super controlled Loop Constructs
IF the development environment is obejct oriented it will provide an object hierarchy to work with.An Object Oriented Programming(OOP)environment always offers event driven programming.This means that the programming environment will recognize object based events and allow the connection of code snippets to these events.When an event occurs, the code snippets will execute.
Netscape and javascript
Javascript is a scripting language(web site development environment)created by Netscape hence Javascript works best with the Netscape suite of client and server products.
The Netscape client 'browser'product is called Netscape Communicator.The default scripting langauge that Netscape Communicator understands is Javascript.
Database Connectivity
Netscape has a product called 'Livve Wire'.which permits server side.Javascript code,to connect to Realational Database Management Systems(RDBMS).RDBMS such as Oracle.MS SQL Server,MySQL and a host of other widely used relational database,which use generally use ANSI SQL as their natural language.'Live Wire' database drivers also support a number of non -relations databases.
Client side javascript
Client-side,javascript is traditionally embedded into a standard HTML program .Javascript is embedded between the <script>......</script>HTML tags.These tags can are embedded within the <Head>.......</head>or <body>.......</body> tags of the HTML program.
Javascript is embedded into an HTML program because Javascript uses the filename.html and the HTTP protocol to transport itself from the web server to the client's browser where the Javascript executes and processes client information.
Only a browwser that is Javascript enabled will be able to interpret Javascript code.Netscape Communicator does this best as Javascript is the natural langauge of Netscape Communicator.
Microsoft's Internet Explorer also interprets Javascript.However,Internet Explorer latest releases support an old version of Javascript.Hence,the total functionality of the latest release of Javascript as is available in Netscape Communicator is not available in Internet Explorer.
Javascript is an object-oriented langauge that allows creation of interactive web pages,Javascript allows user entries,which are loaded into an HTML form to be processed as reequired .This empowers a web site to return site information according to a user's requests.
Javascript offers several advantages to a web developer .A short development cycle .Ease of learing.Small size scripts .The strengths Of Javascript can be easily and quickly used to extend the functionally of HTML pages,already on a web site.
Variable
A Variable is a data storage in memory we can imagine memory as a series of cubyholes or box.Each box will have the Numerical address.
The literal name of the box is called variable with the help of the variable we can strore the data in it ir retrieve the data fpr manipulation.
Variable naming Convention:
- Every variable name must start with character/underscore
- No space
- No special character(.,%,*,etc)
- No Keyword(eg if,else)
var x;
var age;
var name;
Example
<html>
<head>
<title>Javascript sample page</title>
</head>
<body>
<script langauge="javascript">
var x;
x=10;
document.write("value of x ="+x )
</script>
</body>
Operators and expressions on Javascript
An operator is used to transform one or more values into a single resultant value.The values to which the opertaor is referred to as operands .A combination of an operator and its operands is referred to as an expression.
Expressions are evaluated to determine the value of the expression.This is the value that results when an opertors is applied to its operands.
Arithmetic Operators
Operator Description + Addition - Subtraction or uniary negation * Multiplication / Division % Modulus ++ Returs the value then Increment -- Return the value then Decrement An operator requiring a single is referred to as a uniary operator and one that requires two operands is a binary operator
The above standard arithemetic operators are binary operators.In addition to these binary operators,there are unary arithemetic operator.They are (++) and (--)
Both these increment and decrement operators can be used in two different ways.Before the operand or after the operand .For example,++x increment x by one and returns the result,While x++ returns x and then increment the value of x by one.similarly,--x decreases the value of x by one before returing a result,while x-- return the value of x before decreasing its value by one.
Example
x=3y=++x
z=x++
In these lines of code, X is first assigned the value of 3,which is then increased to 4 and assigned to Y.The new value of 4 is assigned to Z,and the value of x is increased to 5.Finally,x is 5,y is 4 and z is 4.
Logical Operators
Logical operators are used to perform Boolean Operators on Boolean Operand and,or,not.The logical operators supported by javascript are:
Operator Description && and || or ! not Comparison Operator
Comaparison Opertors are used to compare two values.The comparison opertors supported by javascript.
Operator Description = = Equal = = = Strictly Equal != not Equal != = Strictly not equal < Less then <= Less than or equal to > Greater than >= Greater than or equal to
String Operator
String Operators are those operators that are used to perform operation on strings.Currently Javascript supported only the string concatenation(+) operator.
This operator is used to join two strings.Eg. "pq"+ "ab" produce "pqab".
Specail Operators
Javascript support a number of special operators that do not fit into the operator categories covered above.
The delete Operator
The delete operator is used to delete a property of an element at an arrray index.
Example
delete myarray[5]
Deletes the sixth element of myarray
The new operators
The new operator is used to create an instance of an object type.
Example
myArray=new Array()
This will create a new javascript object of the type array assign this array to a context area in memory called myArray.
The Void operator:
The void operator does not return a value.It is typically used ub javascript to return a URL with no value.
Javascript programmming constructs
Most Programming langauge support a common set of construct.Langauges only differ in the syntax used for structuring these constructs.
Javascript provides a complete range of basic programming constructs.While it is not an object oriented programming environment Javascript is an object-based language.
Construct Purpose Example Assignment Assigns the value of an expression to avariable x=y+z data declaration Declares a variable and optionally assigns a value to it. var x=10 if Program execution depends upon the value of returned by the condition.If the value returned is True the program executes else the program doesnot execute if(x>y)
{
z=x
} switch Select from a number of alternatives switch(num)
{
Case 1:
//statement
break;
Case 2:
//statement
break;
default
//default action While Repeatedly executes a set of statements until a condition becomes false while(x!=7)
{
x=n
} For Repeatedly executes a set of statements untill a condition becomes false For(i=1;i<7;i++)
{
document.write
("Himalayanweb.com")
} do while Repeatedly executes a set of satements while a condition is true do
{
//statement
}while(i>0) lable Associate a label with a statement Label Name:
statement break Immediately terminates a do while or for loop construct if(x>y)continue continue Immediately terminates the current iteration of a do,while or forn construct if<x>y)continue function call Invokes a function x=abs(y) return Returns a value from a function call return x*y with Indentifies the default object with(Math)
{
d=P*2*r;
} CONDITIONAL CHECKING
if - then-else
The conditional construct in javascript offers a simple way to make a decision in a Javascript program.The conditional construct in Javascript will either return a 'True' or a 'False' depending upon how the 'condition' evaluated.
using the if-else construct the flow of the javascript program can be altered .The if condition determines which section of the program code will be executed based on whether the condition evaluates to TRUE or FALSE.
Syntax
if(condition)
{
statements
}
Example
var x=1
if(x= =1)
{
document.write("The value is one")
}
LOOP
Looping refers to the ability if a block of code to reapeat itself.This repetition can be for a predefined number of times or it can go until certain conditions are met.
Javascript offers 2 type of loop structures:
For loops: These loops iterate a specific number of times as specified
While Loops:These are conditional Loops,which continue untill a condition is met.
For Loop
The for loop is the most basic type of loop and resembles a for loop in most other programming languages,including ASCI 'C'
Syntax
for(expression1;conditional;expression2)
{
statements
}
Where
- expression1 sets up a couter variable and assigns the initial value.The declaration of the counter variable can also be done here itself
- condition specifies the final value for the loop ti fire
- expression2 specifies how the initial value in expression1 is incremented.
<html>
<head>
<Title>For loop</Title>
</head>
<body>
<script language="javascript">
var i;
for(i=1;i<=10;i++)
{
document.write("<br>"+i)
}
</script>
</body>
</html>
While Loop
The while loop provides a simialar functionally.The basic structure of a while loop is :
Syntax
while(condition)
{
Statements
}
Where,the condition is a valid javascript expression that evaluates to a Boolean value.The Javascript commands executed as long as the codition is true.
Example
<html>
<head>
<Title>While loop</Title>
</head>
<body>
<script language="javascript">
var num=1;
while(num<=10)
{
document.write(num);
num++
}
</script>
</body>
</html>
Functions in javascript
Functions are blocks of Javascript code that peroform a specific task and often return a value. A javascript funnction may take take zero or more paramaters.Parameters are a standard technique via which control data can be passed to a function.Control data passed to a function,offers a means of controlling what a function returns.
Built in Function
Javascript provides several built in functions that can be used to perform explicit type conversions.Some of them are eval(),parseInt()and parseFloat()
Example
eval()
<html>
<head>
<Title>Sample page</Title>
</head>
<body>
<script language="javascript">
var total;
total=eval(" 0*10+5");
document.write(total)
</script>
</body>
</html>
parseInt()
<html>
<head>
<Title>sample page</Title>
</head>
<body>
<script language="javascript">
var x,y,sum;
x=prompt("Enter any number")
y=prompt("Enter any number")
sum=parseInt(x)+parseInt(y)
document.write("Total sum ="+sum)
</script>
</body>
</html>
Note: The Prompt comes to the box we can enter the value.
Function
Functions are declared and created using the function keyword.A function can comprise of the following:
- A name for the function
- A list of parameters(arguments)that will accept values passed to the function when called
- A block of Javascript code that defines what the funcion does
function function_name(parameter1,parameter2.....)
{
Block of Javascript code
}
A Function_name is case sensitive,can include underscores(_)and has to start with a letter.the list of parameters passed to the function appears in parenthese and commas separate members of the list.
place of declaration
Functions can be declared anywhere within an HTML file.Preferably,functions are created within in <HEAD>......</HEAD> tags of the HTML file .This ensures that all functions will be parsed,it will lead to an error condition,as the function has not been evaluated and the Browser does not know that it exists.
Passing parameters
Values can be passed to function parameters when a 'Parameterized' function is called.Values are passed to the function ny listing them in the parenthese following the function name.Multiple values can be passed,separated by commas provided that the function has been coded to accept multiple parameters.
Both javascript built in functions and user-defined functions can accept parameters,process them and retrun values.During declaration,a function need to be infromed about the number of values that will be passed.
Example
function printname(user)
{
document.write("<HR>your name is<b>M<i>");
document.write(user);
document.write("<B><I><HR>");
}
Where printname is a function,which has a parameter called user.The parameter user can be passed a value at the time of invoking the function.Within the function,reference to user will then refer to the value passed to function.
Function call:
Printname("bob");
Note:
1)Both variables and literals can be passed as arguments when calling a function
2)If a variable is passed to the function changing the value of the parameter within the function doesnot change the value of the variable passed to the function
3)Parameters exits onlu for the life of the function
Example
<html>
<head>
<title>javascript</title>
<script langauge="javascript">
function sample()
{
document.write("Function starting")
}
</script>
</head>
<body>
<script lanague="javascript">
sample();
</script>
</body>
</html>
Example
<html>
<head>
<title>javascript Function</title>
<script langauge="javascript">
function sum(x,y)
{
var z;
z=x+y
document.write(z);
}
</script>
</head>
<body>
<script lanague="javascript">
sum(10,20)
</script>
</body>
</html>
Dialog Boxes
Javascript provides the ability to pickup user or display small amounts of text to the user by dialog boxes.these dialog appear asd separate windows and their content depends on the information provided by the user.This content is independent of the text in the HTML page conatining the Javascript script and does not affect the content of the page in any way.
There are three types of dialog boxes provided by Javascript:
The Alert dialog box:
The simplest way to direct small amounts of textutal output to a browser's window is to use an alert dialog box.The javascript alert()method takes a string as an argument and displays an alert dialog box in the browser window when invoked by appropriate Javascript.
The alert dialog box can be used to display a cautinary message or display some information.For instance:
A message is displayed to the user when incorrect information is keyed in a form
An invalid result is the output of calculation
A warning that a service is not available on a given date/time
sytax
alert("message")
Example
<html>
<head>
<Title>alert message</Title>
</head>
<body>
<script language="javascript">
alert("Hello")
</script>
</body>
</html>
The Prompt dialog box:
As seen the alert dialog box simply displays information in a browser and does not allow any interaction of the OK button provides some very minimal control over form events i.e.program execution halts completely untill some user action takes place.
- Javascript a predefined Message
- Displays a textbox and accepts user input
- Can pass what the user keyed into the textbox back the javascript
- Displays an Ok & Cancel push buttons
prompt("Message","Default value");
Example
<html>
<head>
<Title>prompt box</Title>
</head>
<body>
<script language="javascript">
var x;
x=prompt("Enter any number")
</script>
</body>
</html>
The confirm dialog box:
Javascript provides a third type of a dialog box called the confirm dialog box.As the name suggests,this dialog box serves as a technique for confirming user action.The confirm dialog box displays the following information:
A pre defined message
Ok & Cancel button
The confirm dialog box,causes program execution to halt until user action takes place.User can be either the OK button being clicked, or the CANCEL button being clicked,which causes the following action to take place.
- Clicking on the OK button causes TRUE to be passed to the program which called the confirm dialog box.
- Clicking on the CANCEL button caueses FALSE to be passed to the program which called the confirm dialog box.
confirm("message");
Example
<html>
<head>
<Title>Confirm box</Title>
</head>
<body>
<script language="javascript">
confirm("Are you sure want to exit out of system")
</script>
</body>
</html>
Arrays
Arrays let you store several pieces of data in the same variable. Usually the pieces have a common theme. This can save you creating a heap of variables all with similar names. This is how they work:
var month_totals = new Array(12);
month_totals[3] = 1999.95;
month_totals[4] = 'No sales';
var a=4;
document.write(month_totals[a]);
document.write(month_totals.length);
document.write(month_totals);
var days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
The variables totals and days are made into arrays by the as-yet cryptic code 'new Array(…)'. This does two things. First, the number of items in the array is decided, and stored in a hidden place called 'length'. In line 1, it's set explicitly to 12. Second, space for some variables (also called array elements) is created, which is equal to the size of the array. Line 2 shows one of those items storing a value. '[3]' means the array element with element index 3. Array elements are counted from 0 (zero), not one, so a three element array called fred has elements fred[0], fred[1] and fred[2]. As line 2 and 3 show, array elements, can contain different types of data: 'month_totals[3] = 1999.95' is an an array variable of the Number type, whereas the third line, 'month_totals[4] = 'No sales'' is a String type..
Accessing array elements is easy. The first two document.write() lines display 'No sales' and '12'. The last line shows a shorthand way of creating an Array and setting all its elements at the same time.
Arrays in JavaScript are closely tied to objects, which are discussed further on. In particular, the array indices are not restricted to numbers because of their object-like status. Arrays can also expand in size (in number of elements) just by storing a value in an array element whose index is bigger than any that exists so far. So arrays are quite flexible compared to equivalent concepts in other languages.
The third document.write() above only needs to report that the variable printed is an object to match ECMAScript. However, Netscape Navigator will print out all the array elements, comma-separated, which is very handy. Navigator 2.02 doesn't know how to do 'new Array', and neither does Internet Explorer 3.02 with JScript 1.0, but it can be simulated with objects—see that section.
One of the things you can store in an array element is another array. An array of arrays can be treated like a multidimensional array, which has a number of uses, particularly in mathematics and graphics. This example creates a two-dimensional array of size two-by-two, and fills it with the values that make up an 'identity matrix'.
var matrix = new Array(2);
matrix[0] = new Array(2);
matrix[1] = new Array(2);
matrix[0][0] = 1;
matrix[1][0] = 0;
matrix[0][1] = 0;
matrix[1][1] = 1;