javascript programming language. introduction javascript is a scripting language. the term scripting...

JAVASCRIPT JAVASCRIPT PROGRAMMING PROGRAMMING

LANGUAGELANGUAGE

IntroductionIntroduction

JavaScript is a scripting language. The term scripting language refers to programming languages that are executed by an interpreter from within a Web browser. An interpreter translates programming code into an executable format each time the program is run – one line at a time. Programs written in scripting languages, such as JavaScript, are interpreted when a scripting engine loads an HTML page.

The JavaScript language was first introduced in Navigator and was originally called LiveScript.

With the release of Navigator 2.0, the name was changed to JavaScript 1.0. Subsequently, Microsoft released its own version of JavaScript in Internet Explorer 4.0 and named it Jscript.

Introduction (Continued)

JavaScript’s Role on the WebJavaScript’s Role on the Web

JavaScript brings HTML to life and makes Web pages dynamic. Instead of HTML documents being static, JavaScript can turn them into applications, such as games or order forms. You can use JavaScript to change the contents of a Web page after it has been rendered by a browser, to interact with a user through forms and controls, to create visual effects such as animation, and to control the web browser window itself. None of these things was possible before the creation of JavaScript.

JavaScript is available in two formats: Client-side JavaScript and Server-side JavaScript. The standardized client-side JavaScript is the format available to HTML pages displayed in Web browsers (the client). JavaScript version 1.2 in Navigator 4.0 and ECMScript are client-side versions of JavaScript. Server-side JavaScript is used with Web servers to access file systems, communicate with other applications, access databases, and perform other tasks.

JavaScript’s Role on the JavaScript’s Role on the WebWeb

Script BeginningScript Beginning

JavaScript Programs run from within an HTML document. The statements that make up a JavaScript program in an HTML document are contained between the <SCRIPT> ….. </SCRIPT> tag pairs. The <SCRIPT> tag is used to notify the Web Browser that the commands that follow it need to be interpreted by a scripting engine. The LANGUAGE attribute of the <SCRIPT> tag tells the browser which scripting language and which version of the scripting language is being used.

<SCRIPT LANGUAGE=“JAVASCRIPT”>

JAVASCRIPT STATEMENTS;

</SCRIPT>

First JavaScript ProgramFirst JavaScript Program

<PRE>

<Script Language=“JavaScript1.4”

Document.writeln(“Hello World”>; //Print on the screen

Document.write(“This line is printed below the ‘Hello World’ line.”);

</Script>

</PRE>

[Note: The write() and writeln() methos of the document object require a text string as an argument.]

Structure of JavaScript Programming

<HTML>

<HEAD>

<TITILE> … </TITLE>

<Script Language=“JavaScript”>

Define any function

</Script>

<BODY>

<Script Language=“JavaScript”>

Use defined function

</script>

</HEAD>

</HTML>

Should be :

“javascript” OR

JavaScript

<HTML><HEAD><TITLE> Multiple JavaScript Calls </Title></Head/><Body> <Script Language="JavaScript" SRC="source.js"></Script><pre> <script language="JavaScript"> document.writeln("This line was created with embedded JavaScript code."); document.writeln("This line was also created with embedded JavaScript code.");</Script></pre></body><HTML>

Internal and External Source for print

document.write("this line was printed from the JavaScript spurce file.")

Save the file as JavaScriptsource.js

Adding Comments to a JavaScript Program

<Script Language=“JavaScript1.2”>

/*

This line is part of the block comment.

This line is also part of the block comment

*/

Document.writeln(“somments Example”); //Line comments con follow code statements

//This line comment takes up an entire line.

/*This is another way of creating a block comment.*/

</Script>

Hiding JavaScript from Incompatible Browsers<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

This line is rendered normally since it is located before the opening comment tag. <BR>

<!- - text on this line is not displayed

Text on this line is not displayed

This line is not displayed either -->

This line is rendered normally since it is located after the closing comment tag. <BR>

</BODY>

</HTML>

<HTML><HEAD><TITLE> Multiple JavaScript Calls </Title>

<Script Language="JavaScript"<!– Begin Hiding JavaScript mylink= "C:\Documents and Settings\Administrator\Desktop\1.html"</Script><Body><a href= "&{mylink};"> click here </A></body><HTML>

Variables, Functions, Variables, Functions, Objects, and EventsObjects, and Events

VariableVariableOne of the most important aspects of programming is the ability to store and manipulate values in computer memory location. The values stored in computer memory locations are called variables.

In JavaScript, you use the reserved keyword Var to create variable. Reserved word, or keywords, are part of the JavaScript language syntax. Reserved words cannot be used for variable names.

Abstract Char Do Finally Boolean Class

Double Float Break Const Else For

Byte Continue Extends Function Case Default

False Goto Catch Delete Final If

Implements New Static True Import Null

Super Try Import Null Super Try

In Package Switch Typeof Instanceof Public

Throw While Long Return Throws With

Native Short Transient

The value you assign a variable can be a literal string or a numeric value.

Var myvariable=“Hello”; ------- String

Var myvariable=100; ------------ numeric

You can declare multiple variables in the same statement using a single Var keyword:

Var firstvar=“text” , secondvar=100, thirdvar=2.5;

Ex.

Var myDog=“Golden Retriever”;

Document.writeln(myDog);

myDog=“Irish Setter”;

document.writeln(myDog);

<HTML><HEAD> <SCRIPT language = JavaScript> var name = prompt("Enter your name", "Name"); </SCRIPT></HEAD>

<BODY> <SCRIPT language = "JavaScript"> document.write("<H2> Hello " + name + "</H2>"); </SCRIPT></BODY></HTML>

USER INPUT

To Display String and Number<HTML><HEAD><TITLE>Script</TITLE><SCRIPT LANGUAGE=“JavaScript”>document.write("JavaScript")</script></HEAD>

<body><SCRIPT LANGUAGE="JavaScript">document.write("Hello everybody")document.write(1000)</Script></BODY></HTML>

Simple Convert on Hexadecimal Value<HTML><HEAD><TITLE>Integer</TITLE>Integral Value with String</HEAD>

<body><SCRIPT LANGUAGE="JavaScript">document.write(00123 + "<br>")document.write(2*125 + "<br>" + 123 + "Aptech")</Script></BODY></HTML>

Hexadecimal to Binary

<HTML><HEAD><TITLE>Hexadecimal Code</TITLE>This Hexadecimal Code convert to Binary.

</HEAD>

<body><SCRIPT LANGUAGE="JavaScript">document.write("<br>" + "<Font color=red face=Arial size=5>")document.write("Notebook" + 10e5)document.write("<center>" + "Good Morning" + "</center>" + 10e-5)</Script></BODY></HTML>

Print Number<html><head><title> Print Numbers </Title></head><body><pre><Script Language="JavaScript"> var integervar = 150; var floatingpointvar = 3.0e7; document.writeln(integervar); document.writeln(floatingpointvar);</script></pre></body></html>

Variable Calculation<HTML><HEAD> Variable </HEAD><title> Variable </title><BODY bgcolor="Red"> <Script Language="JavaScript">

var a = "Ram has scored";var b = 100;var c = "in Final";var d = a+b+c;var e = 100;document.writeln("<font color=Blue face=Arial size=4>");document.writeln("<br>" + a + b );document.writeln("<br>" + d + "<br>" + "<hr>");document.writeln("Total" + c + "is" + b + e + "</font>");</script></body></HTML>

Variable Calculation

<HTML><HEAD> Variable calculation</HEAD><title> Variable </title><BODY bgcolor=wheat> <Script Language="JavaScript">var a = 100;var b = -109;var c = 15;var d = a*c;var e = a/c;

document.writeln("<hr color=Blue size=5>" + "<Font color=Blue size=4>");document.writeln("a+b" + "=" + (a+b));document.writeln("<br>" + "a-b" + "=" + (a-b));document.writeln("<br>" + "(a+b-e)" + "=" + (a+b-e));document.writeln("<br>" + "(a*b-d)" + "=" + (a*b-d));document.writeln("<br>" + "(a/b*c)" + "=" + (a/b*c));document.writeln("</font>");</script></body></HTML>

Variable Calculation<script language="javascript">var name="anil";var salary=900;var da=90;var hra=90;var totalsalary=salary+da+hra;document.write("<font size=7 color=red><b><i>"+"name is" +name+"<br>");document.write("<font size=7 color=red><b><i>"+"da is"+da +"<br>");document.write("<font size=7 color=red><b><i>"+"hra is" +hra+"<br>");document.write("<font size=7 color=red><b><i>"+"total salary is" + totalsalary+"<br>");</script>

Define Global Variable<HTML><HEAD> <title> Variable scope </title><Script Language="JavaScript">var First_Global_Variable = "First Global Variable";function Scope_Example() { Second_Global_Variable = "Second Global Variable"; var Local_Variable = "Local Variable"; document.writeln(First_Global_Variable); //prints successfully document.writeln(Second_Global_Variable); //prints successfully document.writeln(Local_Variable); //prints successfully } </script>

</head><BODY bgcolor=wheat> <pre><Script Language="JavaScript"> Scope_Example(); document.writeln(First_Global_Variable); //prints successfully document.writeln(Second_Global_Variable); //prints successfully document.writeln(Local_Variable); //error message</script></pre></body></HTML>

Table Inside Function

<script language="javascript">document.write("<table border=5>");document.write("<tr><td>name</td>");document.write("<td>ram</td>");document.write("<tr><td>address</td>");document.write("<td>bkt</td>");document.write("<tr><td>phone</td>");document.write("<td>610521</td>");</script>

Defining Functions:

Individual statements used in a computer program are often grouped into logical units called procedures. In JavaScript programming, procedures are called functions.

The lines that compose a function within an HTML document are called the function definition. The syntax for defining a function is:

Function name_of_function (parameters) {

Statements;

}

A function definition consists of three parts:

1. The reserved word function followed by the function name. The reserved word function notified the JavaScript interpreter that the code that follows is a function. As with variables, the name you assign to a function is called an identifier. The same rules and conventions that apply to variable names apply to function names.

2. Any parameters required by the function, contained within parentheses following the function name.

3. The function’s statements, enclosed in curly braces{ }

Function that prints the name of multiple companiesFunction print_company_name(company1, company2, company3)

{

document.writeln(company1);



}

To create a JavaScript Program that Print Company Name:

<HTML>

<HEAD>

<TITLE> Two Functions Program </TITLE>

<Script Language=“JavaScript”

<!- - Hide from incompatible Browsers

Function print_conpany_name(company_name)

{

document.writeln(company_name);

}

//Stop Hiding from Incompatible Browsers - ->

</Script>

Typeof Function<HTML><HEAD> type of function (to define character or number </HEAD><Title>typeof()</title><BODY bgcolor="Red"> <pre><Script Language="JavaScript">var a = 150;var b = "MOTHER";document.writeln("Type of a is" + typeof(a));document.writeln("<br>" + typeof(a));document.writeln("<br>" + "type of b is" + b + typeof(b));</script></pre></body></HTML>

</HEAD><BODY><Script Language=“Java Script1.3”><!– Hide from incompatible browsers Print_ company_name(“my company”);//Stop Hiding from incompatible browsers - -></script></BODY></HTML>

To Create a JavaScript Program that contains two functions:

<HTML>

<HEAD>

<TITLE> Two Function Program</TITLE>

<SCRIPT LANGUAGE=“JAVASCRIPT1.2”>

<!- - Hide from incompatible browsersFunction print_message(first_message) { document.writeln(first_message); }Function return_message(second_message) { return “This message was returned from a function”; }//Stop Hiding from Incompatible Browsers - -></Script>

</HEAD><BODY><PRE><Script Language=“Java Script1.2”><!– Hide from incompatible browsers Print_ message(“’This text was printed from a function”); var return_value = return_message(); document.writeln(return_value);//Stop Hiding from incompatible browsers - -></script></pre></BODY></HTML>

USING EVENTS

One of the primary ways in which JavaScript makes HTML documents dynamic is through events. You can use JavaScript events to add interactivity between your Web pages and users. An event is specific circumstance that is monitored by JavaScript. The most common events are actions that users take.

EVENT Triggered when

About The loadihng of an image is interrupted

Blur An elemet, such as a radio button, because inactive

Click An element is clicked onces

Change The calue of an element changes

Error There is an erroe when loading a document or image

Focus An element because activeLoad A socument or image loadsMouseOut The mouse moves off an elementMouseOver The mouse moves an elementReset A form resetsSelect A user selects a field in a formSubmit A user submits a formUnload A document unloads

HTML Tags and EventsElement Description Events

<A> … </A> Link Click

MouseOver

MouseOut

<IMG> Image About

Error

Load

<AREA> area MouseOver

MouseOut

<Body> … </Body> Document body Blur

Error

Focus

Load

Unload

<FRAMESET> … </FRAMESET> Frame set Blur

Error

Focus

Load

Unload<FRAME> … </FRAME> Frame Blur Focus<FORM> … </FORM> Form Submit Reset<INPUT TYPE=“Text”> Text Field Blur Focus

change

Select

<TEXTAREA> … </TEXTAREA> Text area Blur

focus

change

select

<INPUT TYPE =“SUBMIT”> Submit Click

<INPUT TYPE=“RESET”> Reset Click

<INPUT TYPE=”Radio”> Radio Click

<INPUT TYPE=“CHECKBOX”> Checkbox Click

<SELECT> … </SELECT> Selection Blur

Focus

Change

<HTML><HEAD>

<TITLE>Viewing the array elements of a JavaScript Array</TITLE></HEAD><BODY>

<SCRIPT language = "JavaScript"></SCRIPT></BODY></HTML>

<HTML> <HEAD> <TITLE>Creating and Using User Defined Functions</TITLE> <SCRIPT LANGUAGE="JavaScript"> var name = ""; function hello( ) { name = prompt('Enter Your Name:','Name'); alert('Greetings ' + name + ', Welcome to my page!'); }

function goodbye( ) { alert('Goodbye ' + name + ', Sorry to see you go!'); } </SCRIPT> </HEAD> <BODY onLoad="hello( );" onUnload="goodbye( );"> <IMG SRC="Images\Pinkwhit.gif "> </BODY></HTML>

<HTML> <HEAD>

<TITLE>Outputting Text </TITLE> </HEAD> <BODY>

<CENTER><BR><BR><IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>

Silicon Chip Technologies.<BR><SCRIPT Language = "Javascript">

document.write("<BR><BR>"); document.write('<IMG SRC = "Images/sctfamil.gif" Width = 100

Height = 100>'); document.write("<B>Silicon Chip Technologies.</B> <BR>")</SCRIPT>

</CENTER> </BODY></HTML>

<HTML> <HEAD><TITLE>EXAMPLE</TITLE> </HEAD>

<BODY><SCRIPT Language = "Javascript"> alert("Welcome To My Web Site!"); document.write('<IMG SRC = "Images/welcome.gif">');</SCRIPT> </BODY></HTML>

<HTML> <HEAD><TITLE>Example 2.6 </TITLE> </HEAD> <BODY><SCRIPT LANGUAGE="JavaScript">document. write('<IMG SRC="Images/welcome.gif">');document. write("<H1>Greetings,");document.write(prompt("Enter Your Name:","Name"));document.write(".Welcome to My HomePage!</H1>"); </SCRIPT> </BODY></HTML>