JAVASCRIPT PROGRAMMING LANGUAGE

Introduction 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 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 Web

Script 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 ….. tag pairs. The 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 tag tells the browser which scripting language and which version of the scripting language is being used. JAVASCRIPT STATEMENTS;

First JavaScript Program <Script Language=“JavaScript1.4” Document.writeln(“Hello World”>; //Print on the screen Document.write(“This line is printed below the ‘Hello World’ line.”); [Note: The write() and writeln() methos of the document object require a text string as an argument.]

Structure of JavaScript Programming … Define any function Use defined function Should be : “javascript” OR JavaScript

Multiple JavaScript Calls <Script Language="JavaScript" SRC="source.js"> document.writeln("This line was created with embedded JavaScript code."); document.writeln("This line was also created with embedded JavaScript code."); 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 /* 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.*/

Hiding JavaScript from Incompatible Browsers This line is rendered normally since it is located before the opening comment tag. <!- - 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.

Multiple JavaScript Calls <Script Language="JavaScript" <!– Begin Hiding JavaScript  mylink= "C:\Documents and Settings\Administrator\Desktop\1.html" click here

Variables, Functions, Objects, and Events

Variable One 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 FinallyBoolean Class Double Float Break ConstElse For Byte Continue Extends FunctionCase Default False Goto Catch DeleteFinal If Implements New Static True Import Null Super Try Import Null Super Try In Package Switch Typeof Instanceof Public Throw While Long ReturnThrows 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);

var name = prompt("Enter your name", "Name"); document.write(" Hello " + name + " "); USER INPUT

To Display String and Number Script document.write("JavaScript") document.write("Hello everybody") document.write(1000)

Simple Convert on Hexadecimal Value Integer Integral Value with String document.write( " ") document.write(2*125 + " " "Aptech")

Hexadecimal to Binary Hexadecimal Code This Hexadecimal Code convert to Binary. document.write(" " + " ") document.write("Notebook" + 10e5) document.write(" " + "Good Morning" + " " + 10e-5)

Print Number Print Numbers var integervar = 150; var floatingpointvar = 3.0e7; document.writeln(integervar); document.writeln(floatingpointvar);

Variable Calculation Variable var a = "Ram has scored"; var b = 100; var c = "in Final"; var d = a+b+c; var e = 100; document.writeln(" "); document.writeln(" " + a + b ); document.writeln(" " + d + " " + " "); document.writeln("Total" + c + "is" + b + e + " ");

Variable Calculation Variable calculation Variable var a = 100; var b = -109; var c = 15; var d = a*c; var e = a/c;

document.writeln(" " + " "); document.writeln("a+b" + "=" + (a+b)); document.writeln(" " + "a-b" + "=" + (a-b)); document.writeln(" " + "(a+b-e)" + "=" + (a+b-e)); document.writeln(" " + "(a*b-d)" + "=" + (a*b-d)); document.writeln(" " + "(a/b*c)" + "=" + (a/b*c)); document.writeln(" ");

Variable Calculation var name="anil"; var salary=900; var da=90; var hra=90; var totalsalary=salary+da+hra; document.write(" "+"name is" +name+" "); document.write(" "+"da is"+da +" "); document.write(" "+"hra is" +hra+" "); document.write(" "+"total salary is" + totalsalary+" ");

Define Global Variable Variable scope 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 }

Scope_Example(); document.writeln(First_Global_Variable); //prints successfully document.writeln(Second_Global_Variable); //prints successfully document.writeln(Local_Variable); //error message

Table Inside Function document.write(" "); document.write(" name "); document.write(" ram "); document.write(" address "); document.write(" bkt "); document.write(" phone "); document.write(" ");

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 companies Function print_company_name(company1, company2, company3) { document.writeln(company1); document.writeln(company2); document.writeln(company3); }

To create a JavaScript Program that Print Company Name: Two Functions Program <Script Language=“JavaScript” <!- - Hide from incompatible Browsers Function print_conpany_name(company_name) { document.writeln( company_name ); } //Stop Hiding from Incompatible Browsers - ->

Typeof Function type of function (to define character or number typeof() var a = 150; var b = "MOTHER"; document.writeln("Type of a is" + typeof(a)); document.writeln(" " + typeof(a)); document.writeln(" " + "type of b is" + b + typeof(b));

<!– Hide from incompatible browsers Print_ company_name(“my company”); //Stop Hiding from incompatible browsers - ->

To Create a JavaScript Program that contains two functions: Two Function Program <!- - Hide from incompatible browsers Function 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 - ->

<!– 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 - ->

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. EVENTTriggered 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 active Load A socument or image loads MouseOut The mouse moves off an element MouseOver The mouse moves an element Reset A form resets Select A user selects a field in a form Submit A user submits a form Unload A document unloads

HTML Tags and Events Element Description Events … Link Click MouseOver MouseOut Image About Error Load area MouseOver MouseOut … Document body Blur Error

Focus Load Unload … Frame set Blur Error Focus Load Unload … Frame Blur Focus … Form Submit Reset Text Field Blur Focus change

Select … Text area Blur focus change select Submit Click Reset Click Radio Click Checkbox Click … Selection Blur Focus Change

Viewing the array elements of a JavaScript Array <!-- Begin Hiding JavaScript friends = new Array(5); friends[0] = "Ananth"; friends[1] = "Cedric"; friends[2] = "Ketan"; document.write(friends[0]+" "); document.write(friends[1]+" "); document.write(friends[2]+" "); join_crit = friends.join(); document.write(join_crit); // End hiding JavaScript -->

Creating and Using User Defined Functions 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!'); }

Outputting Text Silicon Chip Technologies. document.write(" "); document.write(' '); document.write(" Silicon Chip Technologies. ")

EXAMPLE alert("Welcome To My Web Site!"); document.write(' ');

Example 2.6 document. write(' '); document. write(" Greetings,"); document.write(prompt("Enter Your Name:","Name")); document.write(".Welcome to My HomePage! ");