JAVASCRIPT A powerful client side scripting language developed
- Slides: 36
JAVASCRIPT A powerful client side scripting language developed by NETSCAPE Mahesh Chandran Pillai
About Java. Script � Java. Script is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment. � It can be characterized as a prototype-based object-oriented scripting language that is dynamic, weakly typed and has first-class functions Mahesh Chandran Pillai
About Java. Script (contd…. ) � Java. Script is primarily used in the form of client-side Java. Script, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. Mahesh Chandran Pillai
Java. Script Can � Put dynamic text into an HTML page � React to events � Read and write HTML elements � Validate data � Detect the visitor’s browser � Create cookies Mahesh Chandran Pillai
Java. Script Can’t � Access other resources such as Files, Databases and Programs � Talk to Web Servers � Give similar output on different browsers � Be encrypted. � Be used with copyrighted data or algorithms Mahesh Chandran Pillai
Need for Client Side Scripting � A script that is executed by the browser on a users computer � Instead of the entire page, part of the page is sent to the browser when user requests for the page. � Mostly run in response to an event � For example: Click events, validations. � Direct interaction with client Mahesh Chandran Pillai
Getting started � Requirements › A Text Editor like Notepad, Notepad++, etc…. › Knowledge of basic HTML and form Tags � Ways for Including Java. Script in your HTML page › Direct Insertion �Using <SCRIPT> ……. </SCRIPT> inside <HEAD> or <BODY> tags › Embedded Insertion �Using “Javascript” as prefix in other HTML tags. �<input type=“button” onclick=‘Java. Script: alert(“Hi”); ’ /> › External References �By specifying the “src” attribute in <SCRIPT> tag. �<SCRIPT type=“text/javascript” src=“filename. js”/> Mahesh Chandran Pillai
A simple HTML page with Java. Script <html> <head> <title>Java. Script Skeleton</title> <script type = "text/javascript"> // Java. Script can go here! // But no HTML! </script> </head> <body> <script type = "text/javascript"> // Java. Script can go here too! // But no HTML! </script> </body> </html> Mahesh Chandran Pillai
Comments in Java. Script � // - single line commenting � /*…. . */ - multiple lines commenting � <!- - // - - > - Commenting Javascript from old browsers <script type = "text/javascript"> <!--hide me from older browsers // say Hello, world! alert("Hello, world!"); // show me --> Mahesh Chandran Pillai
Programming Rules � Java. Script is case-sensitive � �Ending statements with a semicolon is optional. � �Open and Close braces for scoping the embedded Java Script code is mandatory. � �You can apply more than one script in a same HTML file. Mahesh Chandran Pillai
Java. Script Language Constructs � Values, Variables, and Literals � Expressions and Operators � Regular Expressions � Statements � Functions � Objects Mahesh Chandran Pillai
Variables in Java. Script � Java. Script does not have explicit data types � �There is no way of specifying that a particular variable represents an integer, a string or a real. � All Java. Script variables are declared applying the keyword var. › For example: var x, y=7 › Var x=“hello guys” › Y=true � Java. Script recognizes strings, numbers, Boolean values and null Mahesh Chandran Pillai
Variables in Java. Script Rules for identifiers � Should start with a letter or an underscore ( _ ). � Case sensitive. Numbers are possible in a name. Scope of variables � Local variables: declared inside a function using var keyword. � Global Variables: declared outside the functions. Mahesh Chandran Pillai
Programming in Java. Script � Operators: › » >=, ==, +=, ||, <, >, and so on. � Control statements: › If, if…. else, for, and so on. � Keywords: › Var, true, false, new, return Mahesh Chandran Pillai
Control flow Constructs – Conditional Statements � if. . else › Syntax: if (condition){code to be executed if condition is true } else {code to be executed if condition is not true } � if. . …else if…. else. if (condition 1) { code to be executed } else if (condition 2) { code to be executed } else { code to be executed } Mahesh Chandran Pillai
Conditional Statements (contd…) � Switch …. Case › 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 } Mahesh Chandran Pillai
Control Statements – Looping Constructs � For Loop › The for loop is applied when you know in advance, how many times the script should run. › For loop Syntax: var initval; for(initval=startvalue; initval<=endalue; initval=initval+incrval) { code to be executed } Mahesh Chandran Pillai
Looping Constructs( contd…) � While › Syntax: while (initval<=endvalue) { code to be executed } � Do. . While › Syntax: do { code to be executed } while (var<=endvalue) Mahesh Chandran Pillai
Looping Constructs( contd…) � For … in Loop › The for. . in statement is applied to loop (iterate) through the elements of an array or through the properties of an object. › Syntax: for (variable in object) { code to be executed } Mahesh Chandran Pillai
Functions in Java. Script Functions can be of two types. � Built in Functions › Functions which are provided by Javascript. � User Defined Functions › A function is identified by the keyword function, followed by a programmer-supplied name for the function, and followed by a set of parentheses that optionally enclose data values needed by the function to carry out its processing. › Syntax: function_name(parameters) { function-body; } Mahesh Chandran Pillai
Functions (contd…) � Calling Functions › You can call a function by using it name followed by parenthesis with parameters if defined. Function_name(parameters); › You can call functions with event handlers <Input type=“button” id=“Btn 1" onclick=“fun 1()“/> › You can avoid functions by writing inline scripts �It is useful only for avoiding small functions. Mahesh Chandran Pillai
Built in Functions – Message Box � Alert( message) › Which puts a string into a little announcement box (also called an alert box). › Syntax: alert(“I will show this message!"); � Prompt(message, txtmsg) › which asks your visitor for some information and then sets a variable equal to whatever your visitor types. › Syntax: var name = prompt("What's your name? ", "put your name here"); � Confirm() › Which confirms the users action and returns a Boolean value. › Syntax: confirm(“Do you want to continue”); Mahesh Chandran Pillai
Message Box (contd…) Examples: � alert("Hello, world!"); � prompt("Pls enter u r name", "enter here "); � confirm("Do you want to continue"); Mahesh Chandran Pillai
Writing string to an HTML page � document. write (str) › This function will help you to write any string message to the web page. Mahesh Chandran Pillai
Built in Objects � Date › The Date Object type provides a common set of methods for working with dates and times. � String › The String Object type provides a set of methods for › manipulating strings. � Math › The Math Object type provides a common set of methods for working with mathematical tasks. Mahesh Chandran Pillai
Date Functions Name Description get. Date() The day of the month as an integer from 1 to 31 get. Day() The day of the week as an integer where 0 is Sunday and 1 is Monday get. Hours() The hour as an integer between 0 and 23 get. Minutes() The minutes as an integer between 0 and 59 get. Month() The month as an integer between 0 and 11 where 0 is January and 11 is December get. Seconds() The seconds as an integer between 0 and 59 get. Time() The current time in milliseconds where 0 is January 1, 1970, 00: 00 get. Year() The year, but this format differs from browser to browser Mahesh Chandran Pillai
String Functions � substring(start. Index) � substring(start. Index, end. Index) � char. At(index) � to. Lower. Case() � to. Upper. Case() � to. String() � value. Of() � Indexof() Mahesh Chandran Pillai
Math Functions Name Description exp() Value of e raised to the power passed as the argument Abs() Absolute value of the sqrt() Square root of the argument round() Argument rounded up if its decimal value is greater than or equal to 0. 5 and rounded down otherwise pow() First argument raised to the power passed as the second argument random() Random number between 0 and 1 min() Lower of the two numbers passed as arguments Max() Higher of the two numbers passed as arguments Log() Natural log of the argument floor() Integer lower than or equal to the number passed as the argument ceil() Integer greater than or equal to the number passed Mahesh Chandran Pillai
Conversion and Comparison Name Functions Description escape(string) Encodes a string from ASCII into an ISO Latin-1. Unescape() encodes a string from ISO Latin-1 to ASCII Eval() Converts a string to integer or float value. It can also evaluate expressions included with a string. is. Na. N(value) If the value passed is a not a number, the Boolean value of true is returned, if it is a number, it returns false. typeof operator This is an operator but its usefulness is similar to a function. This operator returns the type of the object it operates on. parse. Int() Converts a string to an integer returning the first integer encountered which is contained in the string. parse. Float() Returns floating point numbers the same as the parse. Int function, but looks for floating point qualified strings and returns their value as a float. to. String() Converts an object to a string Mahesh Chandran Pillai
Arrays in Java. Script � A collection elements in contiguous memory location. � Creating Arrays › Syntax Var arr_name=new Array(elements); › Example var colors = new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet"); � Assigning Values var the_answers = new Array(); the_answers[0] = "yes"; the_answers[1] = "no“; Mahesh Chandran Pillai
Associative Arrays � An associative array uses strings instead of numbers to store values. � Examples: var phone_book = new Array(); phone_book[“devu"] = "(415) 555 -5555"; phone_book["info"] = "(415) 555 -1212"; � Length property of array will help you to find the number of elements. Mahesh Chandran Pillai
� � � � EVENTS & EVENT HANDLERS on. Load on. Mouse. Out and on. Mouse. Over on. Reset on. Select on. Submit on. Unload on. Abort on. Blur on. Change on. Click on. Error on. Focus On. Keyup On. Key. Down On. Key. Press Mahesh Chandran Pillai
EVENTS & EVENT HANDLERS � Event handlers are functions are invoked when an event is raised or fired by the object. � Examples: › <a href = "#" on. Mouse. Over = "alert(‘Mouse overboard!'); ">board</a> › <a href = “hello. html" on. Click = "alert('I'm glad you have Java. Script turned on!'); return false; ">Click me</a> › <a href = "#“ on. Click = “var the_color = prompt('red or blue? ', ''); window. document. bg. Color = the_color; return false; ">change background</a> Mahesh Chandran Pillai
Java. Script Hierarchy Mahesh Chandran Pillai
DOCUMENT Object � The document object lists all the images, links, forms, and other stuff on a web page. Mahesh Chandran Pillai
Mahesh Chandran Pillai