INTRODUCTION TO JAVSCRIPT


JAVASCRIPT IS USED IN MILLIONS OF WEB PAGES TO IMPROVE THE DESIGN ,VALIDATE FORMS ANDCREATE COOKIES.JAVASCRIPT IS THE MOST POPULAR LANGUAGE ON THE INTERNET,NETSCAPE NAVIGATOR,MOZILLA,OPERA.


HISTORY OF JAVASCRIPT
JavaScript was a programming language written by Brendan Eich that was able to be embedded in Web pages and could process numbers and modify the contents of forms. While in development, JavaScript had been known as LiveWire then LiveScript. Its core script syntax closely resembled Java, so it was renamed JavaScript when it was released. The way it referenced forms, links and anchors as children of the document object, and inputs as children of their parent form became known as the DOM level 0.

The same year, Netscape passed their JavaScript language to the European Computer Manufacturers Association (ECMA) for standardisation. The ECMA produced the ECMAscript standard, which embodied the JavaScript core syntax, but did not specify all aspects of the DOM level 0. With the release of Netscape 3 later in the same year, Netscape had produced JavaScript 1.1, which could also change the location of images, bringing on a wave of Web sites that used this most popular of Web page effects, making images change when the mouse passed over them. The images were also referenced as children of the document object and thus the DOM level 0 was completed.

`
VERSIONS OF JAVASCRIPT


JavaScript

A collective name for all versions of JavaScript.
JavaScript1.0

The first version of JavaScript to be released - Early ECMAscript + DOM level 0 without images.
JavaScript1.1

Early ECMAscript + DOM level 0.
JavaScript1.2

ECMAscript + DOM level 0 + layers or proprietary DOM.
JavaScript1.3

More advanced ECMAscript + DOM level 0 + layers or proprietary DOM.
JavaScript1.4

Server side JavaScript.
JavaScript1.5

Even more advanced ECMAscript + DOM level 0 + W3C DOM.
JavaScript2.0

JavaScript 1.5 with several extensions added by Mozilla - may become a future standard.
JScript
WHAT IS JAVASCRIPT???
• JAVS SCRIPT WAS DESIGNED TO ADD INTERACTIVITY TO YOUR PROJECT.
• JAVASCRIPT IS A LIGHTWEIGHT PROGRAMMING LANGUAGE.
• A JAVASCRIPT CONSISTS OF LINES OF EXECUTABLE COMPUTER CODES.
• A JAVASCRIPT IS EMBEDED INTO HTML PAGES.
• JAVASCRIPT IS AN INTERPRETED LANGUAGE.

DIFFERENCE BETWEEN JAVA AND JAVASCRIPT?

1. JAVA IS A PROGRAMMING LANGUAGE WHEREAS JAVASCRIPT IS A SCRIPTING LANGUAGE.
2. JAVA IS COMPILED LANGUAGE BUT JAVASCRIPT IS AN INTERPRETED LANGUAGE.
3. JAVA IS USED FOR HANDLING COMPLEX PROJECTS WHEREAS JAVASCRIPT IS USED ONLY FOR SMALL PROJECTS.
4. JAVASCRIPT USES SMALL TEXT COMMANDS BUT JAVA APPLETS ARE COMPILED INTO CLASS FILES TO BE USED ON WEB PAGE.

ADVANTAGES OF JAVASCRIPT

1. INTERPRETED LANGUGE.
2. EMBEDDED INTO HTML DOCUMENT.
3. MINIMAL SYNTAX.
4. QUICK DEVELOPMENT.
5. DESIGNED FOR SIMPLE AND SMALL PROGRAMS.
6. OBJECT/EVENT ORIENTED PROGRAMMING.
7. EASY AND DEBUGGING.
8. PLATFORM INDEPENDENCE.


WHERE TO PLACE THE JAVASCRIPT FILE-

JAVASCRIPT CAN BE PLACED EITHER IN BODY SECTION AS WELL AS HEAD SECTION AND WE CAN CALL A JAVASCRIPT FILE SAVED WITH(.JS) EXTENSION.



SCRIPT IN THE HEAD SECTION:-

WHEN WE WANT THE SCRIPT TO BE EXECUTED WHEN THEY ARE CALLED OR EHEN AN EVENT TRIGGERED.






SCRIPT IN THE BODY SECTION:-

WHEN WE WANT THE SCRIPT TO BE EXECUTED WHEN BODY LOADS THE WE DECLARE THE SCRIPT IN THE BODY TAG.










YOU CAN PLACE MORE THAN ONE SCRIPTS IN ONE HTML FILE,BOTH IN HEAD SECTION AS WELL AS BODY SECTION.













USING AN EXTERNAL JAVASCRIPT FILE;-

SOMETIMES YOU WANT TO RUN THE SAME CODE ON SEVERAL PAGES
WITHOUT WRITING THE SAME CODE AGAIN AND AGAIN WE CALL THAT FILE.BUT WHILE CALLING AN EXTERNAL JAVASCRIPT FILE IT MUST KEPT IN MIND THAT THEN WE WILL NOT INCLUDE ANY SCRIPT TAH..





…………..




JAVSCRIPT VARIABLES-

A ________________________________________ VARIABLE IS A CONTAINER FOR INFORMATION TO BE STORED.A VARIABLE ‘S VALUE CAN BE CHANGED DURING THE SCRIPT.

RULES FOR BVARIABLES=
1. VARIABLE NAMES ARE CASE-SENSITIVE.
2. VARIABLE NAME MUST BEGIN WITH CHARACTER OR UNDERSCORE CHARACTER.

DECLARING THE VARIABLES –

VAR S;


ASSIGING VALUE TO VARIABLES-

S=HELLO ;



OPERATORS


JAVASCRIPT OPERATORS-
ARITHMATIC OPERATORS
OPERATOR DESCRIPTION EXAMPLE RESULT
+ Addition x=2
y=2
x+y 4
- Subtraction x=5
y=2
x-y 3
* Multiplication
x=5
y=4
x*y 20
/ Division 15/5 3
5/2 2.5

% Modulus (division remainder)
5%2 1
10%8 2
10%2 0

++ Increment x=5
x++ x=6
-- Decrement x=5
x-- x=4

ASSIGNMENT OPERATORS
OPEARTOR EXAMPLE IS THE SAME AS
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
COMPARISON OPERATOR
OPERATOR DESCRIPTION EXAMPLE
== is equal to 5==8 returns false
=== is equal to (checks for both
value and type) x==5
y="5"
x==y returns true
x===y returns false
!= is not equal 5!=8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true

LOGICAL OPERATORS
OPERATOR DESCRIPTION EXAMPLE
&& and x=6
y=3
(x < 10 && y > 1) returns true

|| or x=6
y=3
(x==5 || y==5) returns false

! not x=6
y=3
!(x==y) returns true

STRING OPERATOR
A STRING IS USUALLY TEXT
FOR EXAMPLE-
txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
THE VARIABLE txt3 NOW CONTAINS "What a verynice day!".
CONDITIONAL OPERATOR
JAVASCRIPT ALSO CONTAINS CONDITIONAL OPERATOR THAT ASSIGNS AVALUE BASED ON SOME CONDITION
SYNTAX
Variable_name=(condition)?value1:value2



JavaScript Loops
When you write code AND you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
In JavaScript there is two different kind of loops:
• for - loops through a block of code a specified number of times
• while - loops through a block of code while a specified condition is true
________________________________________
The for Loop
The for loop is used when you know in advance how many times the script should run.
Syntax
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
Example





Result
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

________________________________________
The while loop
The while loop is used when you want the loop to execute and continue executing while the specified condition is true.
while (var<=endvalue)
{
code to be executed
}

Example






Result
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
The do...while Loop
The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed once, even if the condition is false, because the code are executed before the condition is tested.
do
{
code to be executed
}
while (var<=endvalue)
Example
IF –ELSE STATEMENT-

THE CONDITIONAL CONSTRUCT IN JABAVSCRIPT OPFFERS A SIMPLE WAY TO MAKE A DECISION IN A JAVASCRIPT PROGRAM.IF THE CONDITION SATISFIES THE GIVEN CONDITION THEN IT RETURNS TRUE OTHERWISE IT WILL RETURN FALSE.

SYNTAX-

IF (CONDITION)
{
……………
ELSE
……………..
}



JavaScript Popup Boxes

________________________________________
In JavaScript we can create three kind of popup boxes: Alert box, Confirm box, and Prompt 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.
Syntax:
alert("sometext")

________________________________________
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.
Syntax:
confirm("sometext")

________________________________________
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.
Syntax:
prompt("sometext","defaultvalue")


JavaScript Events

________________________________________
Events are actions that can be detected by JavaScript.
________________________________________
Events
Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

onload and onUnload
The onload and onUnload events are triggered when the user enters or leaves the page.
The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page.

EXAMPLE OF USING ONLOAD EVENT-

seconds left to exit

onFocus, onBlur and onChange
The onFocus, onBlur and onChange events are often used in combination with validation of form fields.


________________________________________
onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.


________________________________________
onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create "animated" buttons.



onMouseOver="window.location='E:/html/IMAGES/2.JPG' "
onMouseOut="window.location='E:\html\IMAGES\0211001L.JPG' " >




ONMOUSEDOWN EVENT-







ONCLICK- OPENING F NE WINDOW ONCLICK EVENT-

FUNCTIONS

JavaScript Functions
A function contains some code that will be executed only by an event or by a call to that function.
WE CAN call a function from anywhere within the page
Functions are defined at the beginning of a page, in the section.
Example

onclick="dis()" >

________________________________________
DEFINING A FUNCTION-

Function functionname(var1,var2,...,varX)
{
some code
}
var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.

EXAMPLE-

ADDITION