Javascript : Compiles/Executes in Browser

*JAVASCRIPT*
COMPILES/EXECUTES IN
BROWSER
About JavaScript
JavaScript is a Scripting Language.
JavaScript is the Open Source Element.
JavaScript is Platform Independent Language.
JavaScript is the Case Sensitive Language.
JavaScript is developed by the NetScape Corporation.
JavaScript is the Object Base Language.
JavaScript is the Event-Driven Programming Language.
JavaScript is mainly used for client site validations.
JavaScript is also known as LiveScript.
If JavaScript support to the server site in this situation also called
LiveWire.
Every Person can be used without purchasing the License.
How to Put a JavaScript Into an HTML Page
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
The code above will produce this output on

an HTML page:
Hello World!
JavaScript Code
JavaScript code (or just JavaScript) is a
sequence of JavaScript statements.
Each statement is executed by the

browser in the sequence they are
written.
This example will write a header and
two paragraphs to a web page:
Example:<script type="text/javascript">
document.write("<h1>This is a
header</h1>");
document.write("<p>This is a
paragraph</p>");
document.write("<p>This is another
paragraph</p>");
</script>
Output of the above written code:-
This is a header
This is a paragraph
This is another paragraph
JavaScript Blocks
JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket {, and ends with a right curly bracket }.
The purpose of a block is to make the sequence of statements execute together.
This example will write a header and two paragraphs to a web page:
Example:-
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>
Output of the above written code: This is a header
This is a paragraph
JavaScript Comments
Comments can be added to explain the JavaScript, or to make it
more readable.
Single line comments start with //.
This example uses single line comments to explain the code:
// This will write a header:
// This will write two paragraphs: document.write("<p>This is a
paragraph</p>"); document.write("<p>This is another paragraph</p>");
</script>

This is a paragraph
JavaScript Multi-Line
Comments
Multi line comments start with /* and end with */.
This example uses a multi line comment to explain the
code:
/*
The code below will write one header and two paragraphs
*/
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>"); </script>

This is a paragraph
Using Comments at the End of a

Line
In this example the comment is placed at the end of a line:
<script type="text/javascript"> document.write("Hello"); // This will
write "Hello" document.write("Dolly"); // This will write "Dolly"
</script>
JavaScript Variables
As with algebra, JavaScript variables are used to hold values or
expressions.
A variable can have a short name, like x, or a more describing name like
length.
A JavaScript variable can also hold a text value like in
carname="Volvo".
Rules for JavaScript variable names:

Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character
NOTE: Because JavaScript is case-sensitive, variable names are case-
sensitive.
Example of Javascript Variables
<html>
<body>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable,
assigns a value to it, displays the value, change the value,
and displays the value again.</p>
</body>
</html>
Output of the above written code: Hege
Tove
The script above declares a variable, assigns a value to it,
displays the value, change the value, and displays the value
again
Variables
Creating variables in JavaScript is most often referred to as "declaring"
variables.
You can declare JavaScript variables with the var statement:

var x;
var carname;
After the declaration shown above, the variables has no values, but you can
assign values to the variables while you declare them:
var x=5;
var carname="Volvo";
Assigning Values to Undeclared

JavaScript Variables
If you assign values to variables that has not yet
been declared, the variables will automatically be

declared.
These statements:
x=5;
carname="Volvo";
have the same effect as:
var x=5;
var carname="Volvo";
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables

and/or values.
Given that y=5, the table below explains the arithmetic operators:
Description
Example
Result
Addition
x=y+2
x=7
Subtraction
x=y-2
x=3
Multiplication
x=y*2
x=10
Division
x=y/2
x=2.5
Modulus (division
remainder)
x=y%2
x=1
++
Increment
x=++y
x=6
--
Decrement
x=--y
x=4
Operator
Continue..
Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:
Operator
Example
Same As
Result
x=y
+=
x+=y
x=x+y
x=15
-=
x-=y
x=x-y
x=5
*=
x*=y
x=x*y
x=50
/=
x/=y
x=x/y
x=2
%=
x%=y
x=x%y
x=0
x=5
The + Operator Used on Strings
The + operator can also be used to add string variables or text values together.
To add two or more string variables together, use the + operator.
txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;
After the execution of the statements above, the variable txt3

contains "What a verynice day".
To add a space between the two strings, insert a space
into one of the strings:
txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;
Continue
or insert a space into the expression:
txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;
After the execution of the statements above, the variable txt3

contains:
"What a very nice day"
Adding Strings and Numbers
<html>
<body>
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
</script>
<p>The common rule is: If you add a number and a string,

the result will be a string.</p>
</body>
</html>
Output of the above written code: 10
55
55
55
The common rule is: If you add a number and a
string, the result will be a string.
Comparison Operators
Comparison operators are used in logical statements to determine equality or

difference between variables or values.
Given that x=5, the table below explains the comparison operators:
Operator
Description
Example
==
is equal to
x==8 is false
===
is exactly equal to (value

and type)
x===5 is true
x==="5" is false
!=
is not equal
x!=8 is true
>
is greater than
x>8 is false
<
is less than
x<8 is true
>=
is greater than or equal to
x>=8 is false
<=
is less than or equal to
x<=8 is true
How Can it be Used

Comparison operators can be used in conditional statements to
compare values and take
action depending on the result:
if (age<18) document.write("Tooyoung");
Logical Operators
Logical operators are used in determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:
Operator
Description
Example
&&
and
(x < 10 && y > 1) is true
||
or
(x==5 || y==5) is false
not
!(x==y) is true
Example
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a
variable based on some condition.
Syntax
variablename=(condition)?value1:value2
If the variable visitor has the value of "PRES", then the variable greeting
will be assigned the value "Dear President " else it will be assigned "Dear".
Example of If statements
<html>
<body>
var d = new Date();
var time = d.getHours();
if (time < 10)

{
document.write("<b>Good morning</b>");
}
</script>
<p>
This example demonstrates the If statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
</p>
</body>
</html>
Output of above code

This example demonstrates the If statement.
If the time on your browser is less than 10, you will
get a "Good morning" greeting.
Example of If...else statements
html>
<body>
var d = new Date();
if (time < 10)

{
}
else
{
document.write("<b>Good day</b>");
}
</script>
<p>
This example demonstrates the If...Else statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
</body>
</html>

Good day
This example demonstrates the If...Else statement.
If the time on your browser is less than 10, you will
get a "Good morning" greeting. Otherwise you will

get a "Good day" greeting.
Example of If..else if...else statement
<html>
<body>
var d = new Date();
if (time<10)
{
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
<p>
This example demonstrates the if..else if...else statement.
</p>
</body>
</html>

Hello World!
This example demonstrates the if..else if...else
statement.
Example of Random Link
<html>
<body>
var r=Math.random();
if (r>0.5)
{
document.write("<a href='http://www.w3schools.com'>Learn Web
Development!</a>");
}
else
{
document.write("<a href='http://www.refsnesdata.no'>Visit HPES Data!</a>");
}
</script>
</body>
</html>
Output Og above Example
Visit ATS INFOTECH Data
Syntax Of switch statements

The JavaScript Switch Statement
You should use the switch statement if you want to
select one of many blocks of code to be executed.

Syntax
switch(n) { case 1: execute code block 1 break; case
2: execute code block 2 break; default: code to be
executed if n is different from case 1 and 2 }
Example of Switch Statements
<html>
<body>
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>
<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0,
Monday=1, Tuesday=2, etc.</p>
</body>
</html>

I'm really looking forward to this weekend!
This JavaScript will generate a different greeting
based on what day it is. Note that Sunday=0,

Monday=1, Tuesday=2, etc
Example of Alert Box
Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
To Print the message in the Message Box

<html>
<head>
function disp_alert()
{
alert("I am an alert box!!");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />

</body>
</html>
Example of Alert box with line

breaks
<html>
<head>
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert
box!");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html>
Example of Confirm Box

Confirm Box
A confirm box is often used if you want the user to verify or accept
something.
When a confirm box pops up, the user will have to click either "OK"
or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.
Message Box with confirm Button
<html>
<head>
function disp_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
Example of Prompt Box

Prompt Box
A prompt box is often used if you want the user to input a value before
entering a page.
When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
To Input the value in run time
<html>
<head>
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" />
</body>
</html>
Example of new window open
<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Untitled Page</title>
function show()
{
window.open("Default2.aspx","chandreshsingh","top=40,left=50,width=50,height=50,
resizable=1,toolbar=1");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn" onclick="show()" value="Example of open
new window" style="left: 354px; position: relative; top: 58px; color: #ff0066; height:
77px;" size="40"/></div>
</form>
</body>
</html>
Example to print the

keycode/keyvalue of each key
<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Untitled Page</title>
function WhichKeyPress(event)
{
alert(event.keyCode);
}
</script>
</head>
<body onkeydown="WhichKeyPress(event)">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
AJAX
AJAX ( Asynchronous JavaScript and

XML)
AJAX
AJAX is not a new programming language, but a technique for

creating better, faster, and more interactive web applications.
With AJAX, your JavaScript can communicate directly with the
server, using the JavaScript XMLHttpRequest object. With

this object, your JavaScript can trade data with a web server,
without reloading the page.
AJAX
AJAX uses asynchronous data transfer (HTTP requests)
between the browser and the web server, allowing web

pages to request small bits of information from the server
instead of whole pages.
The AJAX technique makes Internet applications smaller,
faster and more user-friendly.

AJAX is a browser technology independent of web server
software.
AJAX
AJAX is Based on Web Standards
AJAX is based on the following web standards:
JavaScript
XML
HTML
CSS
The web standards used in AJAX are well defined, and

supported by all major browsers. AJAX applications are
browser and platform independent
AJAX
Ajax Server Controls:ASP.NET AJAX server controls consist of server and client
code that integrate to produce rich client behavior. When
you add an AJAX control to an ASP.NET Web page, the
page automatically sends supporting client script to the
browser for AJAX functionality. You can provide additional
client code to customize the functionality of a control, but
this is not required.
AJAX
The following list describes the most frequently used
ASP.NET AJAX server controls.
ScriptManager:Manages script resources for client components, partial-page
rendering, localization, globalization, and custom user
scripts. The ScriptManager control is required in order to
use the UpdatePanel, UpdateProgress, and Timer controls.
AJAX
UpdatePanel:Enables you to refresh selected parts of the page,
instead of refreshing the whole page by using a
synchronous postback.
UpdateProgress :Provides status information about partial-page
updates in UpdatePanel controls.
AJAX
Timer:Performs postbacks at defined intervals. You can use
the Timer control to post the whole page, or use it
together with the UpdatePanel control to perform
partial-page updates at a defined interval.

Javascript : Compiles/Executes in Browser

Uploaded by

Copyright:

Available Formats

Javascript : Compiles/Executes in Browser

Uploaded by

Document Information

Original Description:

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

Javascript : Compiles/Executes in Browser

Uploaded by

Copyright:

Available Formats

*JAVASCRIPT*

How to Put a JavaScript Into an HTML Page

The code above will produce this output on

Each statement is executed by the

Output of the above written code:-

JavaScript statements can be grouped together in blocks.

The purpose of a block is to make the sequence of statements execute together.

Output of the above written code: This is a header

Output of the above written code: This is a header

Output of the above written code: This is a header

Using Comments at the End of a

As with algebra, JavaScript variables are used to hold values or

A JavaScript variable can also hold a text value like in

Rules for JavaScript variable names:

Example of Javascript Variables

Output of the above written code: Hege

Creating variables in JavaScript is most often referred to as "declaring"

You can declare JavaScript variables with the var statement:

assign values to the variables while you declare them:

Assigning Values to Undeclared

been declared, the variables will automatically be

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables

The + Operator Used on Strings

After the execution of the statements above, the variable txt3

txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;

After the execution of the statements above, the variable txt3

Adding Strings and Numbers

<p>The common rule is: If you add a number and a string,

Output of the above written code: 10

Comparison operators are used in logical statements to determine equality or

is exactly equal to (value

is greater than or equal to

is less than or equal to

How Can it be Used

(x < 10 && y > 1) is true

(x==5 || y==5) is false

if (time < 10)

Output of above code

get a "Good morning" greeting.

Example of If...else statements

if (time < 10)

Output of above code

get a "Good morning" greeting. Otherwise you will

Example of If..else if...else statement

Output of above code

Example of Random Link

Output Og above Example

Visit ATS INFOTECH Data

Syntax Of switch statements

select one of many blocks of code to be executed.

Example of Switch Statements

Output of above code

based on what day it is. Note that Sunday=0,

Example of Alert Box

To Print the message in the Message Box

<input type="button" onclick="disp_alert()" value="Display alert box" />

Example of Alert box with line

JAVASCRIPT