Java Script Dvijesh Bhatt

Web Page HTML defines Web sites content through semantic tags (headings, paragraphs, lists, …). CSS defines 'rules' or 'styles' for presenting every aspect of an HTML document Font (family, size, color, weight, etc.) Background (color, image, position, repeat) Position and layout (of any object on the page) JavaScript defines dynamic behavior Programming logic for interaction with the user, to handle events, etc.

Java Scripts JavaScript is a front-end scripting language developed by Netscape for dynamic content Lightweight, but with limited capabilities Can be used as object-oriented language Client-side technology Embedded in your HTML page Interpreted by the Web browser Simple and flexible Powerful to manipulate the DOM

What Java Script can do? Can handle events Can read and write HTML elements and modify the DOM tree Can validate form data Can access / modify browser cookies Can detect the user’s browser and OS Can be used as object-oriented language Can handle exceptions Can perform asynchronous server calls (AJAX) Slider kind of behaviour in web pages

Use of Java Scripts Internal declaration …. External Declaration

Alert box Alert() : will display the alert box.(Pop-up) i.e = alert(“Hello world”); Some of the character will use in alert box \n : New line \t : Horizontal Tab \r : Carriage Return \\ : Use backslash in text \” : Use double quote in text \’ : Use single quote in text

Write To write any thing on page we use write() i.e. documents.write(“Hello World”); documents.write(“ Hello World ”); documents.write(“ \ ” Hello World ” \ ”); documents.writeln(“Hello World”); document.write(“ Nirma Uni ”);

prompt Which allows user to input a value that the script can use. var name; name = window.prompt("Hello"); document.write("Welcome " + name + " for visiting site");

Mathematical operation +, -, *, /, % Precedence Equality operators i.e. =, != Relational operators i.e. >, =, <=

Date var now = Date(); getHours(); getDay getDate parse : Parses a date string and returns the number of milliseconds since midnight of January 1, 1970

Variable var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String var answer="It's alright"; var answer="He is called 'Johnny'"; var answer='He is called "Johnny"'; var x1=34.00; //Written with decimals var x2=34; //Written without decimals

Continue var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; var person={ firstname : "John", lastname : "Doe", id : 5566 }; Name = person.firsname ; //person[“firstname”]

Continue var lastName = "Doe", age = 30, job = "carpenter"; typeof "John" // Returns string typeof 3.14 // Returns number typeof false // Returns boolean typeof [1,2,3,4] // Returns object typeof {name:'John', age:34} // Returns object

Array var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"];

Objects Objects are just a data, with added properties and methods. Almost "everything" in JavaScript are treated as objects. Dates, Arrays, Strings, Functions.... You can make your own objects as well i.e. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Strings var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; var x = "John"; var y = new String("John"); typeof x // returns String typeof y // returns Object

Functions of Strings length search indexof slice() // (7,12) (-12,-6) (7) substring() substr() // (7,6) replace() toUpperCase() toLowerCase() concat() charAt() charCodeAt() var txt = "a,b,c,d,e" // String txt.split(","); // Split on commas txt.split(" "); // Split on spaces txt.split("|"); // Split on pipe

Number and functions Precision: Integers (numbers without a period or exponent notation) are considered accurate up to 15 digits. The maximum number of decimals is 17, but floating point arithmetic is not always 100% accurate: Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside the largest possible number. var x = 123; var y = new Number(123); typeof x; // returns number typeof y; // returns object

Continue It will convert string in to integer. N1 = parseInt(firstnum); N1 = parseFloat(firstnum); tostring(); toExponential() toFixed() toPrecision() Number() valueOf()

Math Math.random(); Math.min(x,y,z); Math.max(x,y,z); Math.round(x); Math.ceil(x); Math.floor(x); abs(x); pow(x,y); sqrt(x);

Array var person = ["John", "Doe", 46]; var cars = new Array("Saab", "Volvo", "BMW"); var car = new Array(40); car.length(); car.sort(); valueof(); tostring(); join(“*”); splice(2, 0, “Maruti", “Honda");

Condition if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }

Switch 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 }

Loops while (condition) { code block to be executed } do { code block to be executed } while (condition);

Continue for (statement 1; statement 2; statement 3) { the code block to be executed } var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; }

Functions A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2,...) The code to be executed, by the function, is placed inside curly brackets: {}

Continue Invoke the fuction var x = myfunction(4,3);

Finding the HTML elements document.getElementById()Find an element by element id document.getElementsByTagName()Find elements by tag name document.getElementsByClassName()Find elements by class name

Change elements and attributes of HTML element.innerHTML=Change the inner HTML of an element element.attribute=Change the attribute of an HTML element element.setAttribute(attribute,value)Change the attribute of an HTML element element.style.property=Change the style of an HTML element

Regular Expression A regular expression can be written in either of two ways: var patt = new RegExp(pattern,modifiers); Or var patt = /pattern/modifiers; pattern specifies the pattern of an expression modifiers specify if a search should be global, case- sensitive, etc.

Modifiers Description i Perform case-insensitive matching g Perform a global match (find all matches rather than stopping after the first match) m Perform multiline matching

Brackets ExpressionDiscreption [A-Z]Find any character between the brackets [^A-Z]Find any character NOT between the brackets [0-9]Find any digit between the brackets [^0-9]Find any digit NOT between the brackets (X|Y)Find any of the alternatives specified

Meta Character Description.Find a single character, except newline or line terminator $End of line or multiple lines ^Beginning of the lines \wFind the Word Character \WFind the non-word Charcter \sFind a whitespace character \SFind a non-whitespace character \dFind Digit only text \DFind non-digit text \bFind a match at the beginning/end of a word \BFind a match not at the beginning/end of a word