Java scipt

Client-side EnvironmentThe client-side environment used to run scripts is usually a browser. The processing takes place on the end users computer. The source code is transferred from the web server to the u s e r s c o m p u t e r o v e r t h e internet and run directly in the browser. The scripting language needs to b e e n a b l e d o n t h e c l i e n t computer. Sometimes if a user is conscious of security risks they may switch the scripting facility off. When this is the

Client-side EnvironmentThis party requests pages from the Server, and displays them to the user. In most cases, the client is a web browser. The User opens his web browser (the Client). The User browses to http://google.com. The Client (on the behalf of the User), sends a request to http://google.com (the Server), for their home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page's source. The Client then receives the page's source, and renders it into a human viewable website. The User types Stack Overflow into the search bar, and presses Enter The Client submits that data to the Server. The Server processes that data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view.

Client-side EnvironmentThe User types Stack Overflow into the search bar, and presses Enter The Client submits that data to the Server. The Server processes that data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view. Example languages JavaScript (primarily), HTML*, CSS* Any language running on a client device that interacts with a remote service is a client-side language.

Server-side EnvironmentServer-side programming, is the general name for the kinds of programs which are run on the Server. This is different from client- side scripting where scripts are run by the viewing web browser, usually in JavaScript. T h e p r i m a r y a d v a n t a g e t o server-side scripting is the ability to highly customize the response based on the user's requirements, access rights, or queries into data stores. Example Languages

JavaScriptJavaScript was released by Netscape and Sun Microsystems in 1995. However, JavaScript is not the same thing as Java. JavaScript is a cross-platform, object-oriented scripting language, programming language, interpreted language, object- based programming, small and lightweight language.

Use of JavaScript?Use it to add multimedia elements With JavaScript you can show, hide, change, resize images, and create image rollovers. You can create scrolling text across the status bar. Create pages dynamically Based on the user's choices, the date, or other external data, JavaScript can produce pages that are customized to the user. Interact with the user It can do some processing of

Why Study JavaScript?JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages

Writing JavaScriptJavaScript code is typically embedded in the HTML, to be interpreted and run by the client's browser. Here are some tips to remember when writing JavaScript commands • JavaScript code is case sensitive. • White space between words and tabs are ignored• • Line breaks are ignored except within a statement• • JavaScript statements end with a semicolon ;

The SCRIPT TagThe <SCRIPT> tag alerts a browser that JavaScript code follows. It is typically embedded in the HTML. <SCRIPT language = "JavaScript"> statements </SCRIPT> Example : 1. <SCRIPT language = "JavaScript"> alert("Welcome to the script tag test page.") </SCRIPT> 2. <script type="text/javascript"

Syntatic Characteristics1.Identifiers 1. Identifier must be begin with either letter or underscore or dollor sign. 2. No limit of length. 3. Variable Name must not hava uppercase letter 2.Reserved Word 1. break, continue, delete, for, in, return, var, default, else, function 3.Comments 1.// : Single Line Comment 2./* and */ : Multi Line Comment 3.The XHTML <!-> and <-> is alos allowed in javascript.

Syntatic Characteristics4. Semicolon 5. Variable 1.Primitive Types - Number, String, Boolean, Undefined, Null 2.Literals - Numarical & String 3.Other Primitive Types Boolean, Null, Undefined.

To declare variables, use the keyword var and the variable name: var userName To assign values to variables, add an equal sign and the value: var userName = "Smith" var price = 100

Variable Declaration document.getElementById("id") : The getElementById() method accesses the first element with the specified id.

IF Statementif statement if...else statement if...else if... statement. <script type="text/javascript"> var age = 20; if( age > 18 ){ document.write("<b>Qualifies for driving</b>"); } </script>

if...else statement: Syntex: if (expression) { Statement(s) to be executed if expression is true } else { Statement(s) to be executed if expression is false } The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way. <script type="text/javascript"> var age = 15; if( age > 18 ){ document.write("<b>Qualifies for driving</b>"); } else{ document.write("<b>Does not qualify for driving</b>"); } </script>

Switch <script type="text/javascript"> var grade='A'; document.write("Entering switch block<br />"); switch (grade) { case 'A': document.write("Good job<br />"); break; case 'B': document.write("Pretty good<br />"); break; default: document.write("Unknown grade<br />") } document.write("Exiting switch block"); </script> Output Entering switch block Good job Exiting switch block

While Loop while (expression){ Statement(s) to be executed if expression is true } <script type="text/javascript">  </script> Output : Starting Loop Current Count : 0 Current Count : 1 Current Count : 2

do While Loop <script type="text/javascript">  </script> Output Starting Loop Current Count : 0 Current Count : 1 Current Count : 2

For Loop for (initialization; test condition; iteration statement) { Statement(s) to be executed if test condition is true } <script type="text/javascript">  </script>

For ...IN Loop The for...in loop is used to loop through an object's properties. for (variablename in object){ statement or block to execute } <script type="text/javascript"> var aProperty; document.write("Navigator Object Properties<br /> "); for (aProperty in navigator) { document.write(aProperty); document.write("<br />"); } document.write ("Exiting from the loop!"); </script>

Function A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. It helps programmers in writing modular codes. <script type="text/javascript">  </script> <script type="text/javascript">  </script>

Function <html> <head> <script type="text/javascript"> function sayHello() { document.write ("Hello there!"); } </script> </head> <body> <p>Click the following button to call the function</p> <form> <input type="button" onclick="sayHello()" value="Say Hello"> </form> <p>Use different text in write method and then try...</p> </body> </html> Hello there!

Event JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.

Array The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. var fruits = new Array( "apple", "orange", "mango" ); You can create array by simply assigning values as follows − var fruits = [ "apple", "orange", "mango" ];

Two-Dimensional Array var iMax = 20; var jMax = 10; var f = new Array(); for (i=0;i<iMax;i++) { f[i]=new Array(); for (j=0;j<jMax;j++) { f[i][j]=0; } }

Pop up Boxes JavaScript has three kind of popup boxes: 1. Alert box. 2. Confirm box. 3. Prompt box.

Confirm Boxes window.confirm("sometext");

Prompt Box window.prompt("sometext","defaultText");

Object JavaAScript is an Object Oriented Programming (OOP) language. A programming language can be called object-oriented if it provides basic capabilities to developers − • Booleans can be objects (or primitive data treated as objects) • Numbers can be objects (or primitive data treated as objects) • Strings can be objects (or primitive data treated as objects) • Dates are always objects • Maths are always objects • Regular expressions are always objects • Arrays are always objects • Functions are always objects • Objects are objects

Creating Object <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; </script> </body> </html> Creating a JavaScript Object. John is 50 years old.

The Date Object new Date( ) new Date(milliseconds) new Date(datestring) new Date(year,month,date[,hour,minute,second,millisecond ])

Boolean Object The Boolean object represents two values, either "true" or "false". If value parameter is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false.

String Object The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods. var val = new String(string);

String Concat() Example string.concat(string2, string3[, ..., stringN]);

Document Object Model The DOM is a W3C (World Wide Web Consortium) standard. A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content. The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document. The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents

Document Object Model • Window object − Top of the hierarchy. It is the outmost element of the object hierarchy. • Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. • Form object − Everything enclosed in the <form>...</form> tags sets the form object. • Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkbox.

The DOM Programming Interface The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element).

Validation Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information.

Validation Form validation generally performs two functions. Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

Java scipt

More Related Content

What's hot

Similar to Java scipt

Recently uploaded

Java scipt