Javascript

*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:-
 <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>
 This is a header
 This is a paragraph
 This is another 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>
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>
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>
 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

Operator
+ 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 x=y%2 x=1
remainder)
++ Increment x=++y x=6
-- Decrement x=--y x=4
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=5
+= 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
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";
 x=5+"5";
 x="5"+5;
 </script>
 <p>The common rule is: If you add a number and a string,

 the result will be a string.</p>
 </body>
 </html>
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 x===5 is true
and type) 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>
 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>
 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>
 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!");
 }
 else
 {
 document.write("You pressed Cancel!");
 }
 }
 </script>
 </head>
 <body>
 <input type="button" onclick="disp_confirm()" value="Display a confirm box" />
 </body>
 </html>
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()s
 {


window.open("Default2.aspx","chandreshsingh","top=40,left=50,width=50,height=50,resizable=1,to
olbar=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

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Javascript

Caricato da

Copyright:

Formati disponibili

*JAVASCRIPT*

 JavaScript is a Scripting Language.

The code above will produce this output on

JavaScript code (or just JavaScript) is a

Each statement is executed by the

This example will write a header and

 JavaScript statements can be grouped together in blocks.

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

 Comments can be added to explain the JavaScript, or to make it

 Multi line comments start with /* and end with */.

 In this example the comment is placed at the end of a line:

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

 A JavaScript variable can also hold a text value like in carname="Volvo".

 Rules for JavaScript variable names:

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

 You can declare JavaScript variables with the var statement:

If you assign values to variables that has not yet

Arithmetic operators are used to perform arithmetic between variables

Description Example Result

Assignment operators are used to assign values to JavaScript variables.

Operator Example Same As Result

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

After the execution of the statements above, the variable txt3

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

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

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

Comparison operators are used in logical statements to determine equality or

Operator Description Example

== is equal to x==8 is false

Comparison operators can be used in conditional statements to

Operator Description Example

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

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

JavaScript also contains a conditional operator that assigns a value to a

 if (time < 10)

This example demonstrates the If statement.

 if (time < 10)

 Output Og above Example

 Visit ATS INFOTECH Data

The JavaScript Switch Statement

I'm really looking forward to this weekend!

 To Print the message in the Message Box

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

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

 Message Box with confirm Button

 <input type="button" onclick="disp_confirm()" value="Display a confirm box" />

AJAX ( Asynchronous JavaScript and

 AJAX is not a new programming language, but a technique for

 With AJAX, your JavaScript can communicate directly with the

 The AJAX technique makes Internet applications smaller,

 AJAX is a browser technology independent of web server

Ajax Server Controls:-

The following list describes the most frequently used

Potrebbero piacerti anche

JAVASCRIPT