Javascript-part1.pdf

TDivyaKumari, CSE 2 JavaScript TDivyaKumari, CSE 3 JavaScript TDivyaKumari, CSE 4 JavaScript TDivyaKumari, CSE 5 JavaScript JavaScript is not Java  JavaScript has some features that resemble features in Java:  JavaSc...

TDivyaKumari, CSE 2 JavaScript TDivyaKumari, CSE 3 JavaScript TDivyaKumari, CSE 4 JavaScript TDivyaKumari, CSE 5 JavaScript JavaScript is not Java  JavaScript has some features that resemble features in Java:  JavaScript has Objects and primitive data types -- JavaScript has Events and event handlers  Exception handling in JavaScript is almost the same as in Java  JavaScript has some features unlike anything in Java:  Variable names are untyped: the type of a variable depends on the value it is currently holding  Objects and arrays are defined in quite a different way  JavaScript has with statements and a new kind of for statement TDivyaKumari, CSE 6 JavaScript TDivyaKumari, CSE 7 JavaScript TDivyaKumari, CSE 8 JavaScript TDivyaKumari, CSE 9 JavaScript TDivyaKumari, CSE 10 JavaScript Comments  Comments are as in C or Java:  Between // and the end of the line  Between  Java’s javadoc comments, , are treated just the same as comments; they have no special meaning in JavaScript TDivyaKumari, CSE 11 JavaScript TDivyaKumari, CSE 12 JavaScript TDivyaKumari, CSE 13 JavaScript TDivyaKumari, CSE 14 JavaScript TDivyaKumari, CSE 15 JavaScript TDivyaKumari, CSE 16 JavaScript TDivyaKumari, CSE 17 JavaScript TDivyaKumari, CSE 18 JavaScript TDivyaKumari, CSE 19 JavaScript TDivyaKumari, CSE 20 JavaScript TDivyaKumari, CSE 21 JavaScript TDivyaKumari, CSE 22 JavaScript TDivyaKumari, CSE 23 JavaScript TDivyaKumari, CSE 24 JavaScript TDivyaKumari, CSE 25 JavaScript TDivyaKumari, CSE 26 JavaScript TDivyaKumari, CSE 27 JavaScript TDivyaKumari, CSE 28 JavaScript TDivyaKumari, CSE 29 JavaScript TDivyaKumari, CSE 30 JavaScript TDivyaKumari, CSE 31 JavaScript TDivyaKumari, CSE 32 JavaScript TDivyaKumari, CSE 33 JavaScript TDivyaKumari, CSE 34 JavaScript TDivyaKumari, CSE 35 JavaScript TDivyaKumari, CSE 36 JavaScript TDivyaKumari, CSE 37 JavaScript TDivyaKumari, CSE 38 JavaScript TDivyaKumari, CSE 39 JavaScript TDivyaKumari, CSE 40 JavaScript TDivyaKumari, CSE 41 JavaScript TDivyaKumari, CSE 42 JavaScript Functions & Objects TDivyaKumari, CSE 43 JavaScript TDivyaKumari, CSE 44 JavaScript TDivyaKumari, CSE 45 JavaScript TDivyaKumari, CSE 46 JavaScript TDivyaKumari, CSE 47 JavaScript  function add() { var a,b,c; a=document.calc.val1.value; b=document.calc.val2.value; c=parseInt(a)+parseInt(b); document.calc.result.value=c; } TDivyaKumari, CSE 48 JavaScript  enter text1: enter text2: result : TDivyaKumari, CSE 49 JavaScript  Find out factorial of a given number without using Recursion  Same function Using Recursion  Maximum of 3 numbers using Functions and also using predefined function Math.max() TDivyaKumari, CSE 50 JavaScript Objects  Objects have attributes and methods.  Many pre-defined objects and object types.  Using objects follows the syntax of Java: objectname.attributename objectname.methodname() TDivyaKumari, CSE 51 JavaScript The Math Object  Access to mathematical functions and constants.  Constants: Math.PI  Methods: Math.random() Math.abs(x), Math.ceil(x) Math.sin(x), Math.floor(x) Math.cos(x), Math.exp(x) Math.max(x,y), Math.log(x) Math.min(x,y), Math.round(x), Math.sqrt(x), Math.pow(x,y) TDivyaKumari, CSE 52 JavaScript Math object in use // returns an integer between 1 and 6 function roll() { var x = Math.random(); // convert to range [0,6.0) x = x * 6; // add 1 and convert to int return parseInt(1+x ); } document.writeln("Roll is “ + roll() ); TDivyaKumari, CSE 53 JavaScript The String Object Access to String functions Methods: var s1=“Information”,s2=“Technology” charAt(index), Ex: s1.charAt(2) concat(string),Ex: s1.concat(s2) slice(start,end), Ex:s1.slice(3,8) Substr(start,length), Ex: s2.substr(1,4) toLowerCase()Ex: s2.toLowerCase() toUpperCase()Ex: s2.toUpperCase() TDivyaKumari, CSE 54 JavaScript The Date Object Access to Date functions Methods: var d= new Date() getDate(); Ex: d.getDate(); getDay(); getSeconds(); getFullYear(); getTime(); getHours(); getMonth(); getMilliseconds();getMinutes(); TDivyaKumari, CSE 55 JavaScript Predefined Objects  JavaScript also includes some objects that are automatically created for you (always available). – document – navigator – window TDivyaKumari, CSE 56 JavaScript The document object Methods: document.write() like a print statement – the output goes into the HTML document. document.write("My title is" + document.title+ “URL is” +document.URL); string concatenation! TDivyaKumari, CSE 57 JavaScript JavaScript Example JavaScript JavaScript isis Javalicious Javalicious I I am am aa web web page page and and here here is is my my name: name: document.write(document.title); document.write(document.title); TDivyaKumari, CSE 58 JavaScript JavaScript and HTML Comments HT TDivyaKumari, CSE 59 JavaScript The navigator Object  Represents the browser. Read-only!  Attributes include: i n e appName te rm is de e r appVersion to w s e d s of b ro platform n u te d of t kin d E) a e I wh g us e vs. e i n ap b tsc (Ne TDivyaKumari, CSE 60 JavaScript navigator Example  alert(navigator.appName);  alert(navigator.appVersion);  alert(navigator.platform); TDivyaKumari, CSE 61 JavaScript The window Object  Represents the current window.  There are possible many objects of type Window, the predefined object window represents the current window.  Access to, and control of, a number of properties including position and size. TDivyaKumari, CSE 62 JavaScript window attributes document name status the status line parent TDivyaKumari, CSE 63 JavaScript some window methods alert() close() prompt() moveTo() moveBy() open() scroll() scrollTo() resizeBy() resizeTo() TDivyaKumari, CSE 64 JavaScript  Arrays TDivyaKumari, CSE 65 JavaScript Array literals  JavaScript has array literals, written with brackets and commas  Example: color = ["red", "yellow", "green", "blue"];  Arrays are zero-based: color is "red"  If you put two commas in a row, the array has an “empty” element in that location  Example: color = ["red", , , "green", "blue"]; – color has 5 elements  However, a single comma at the end is ignored – Example: color = ["red", , , "green", "blue”,]; still has 5 elements TDivyaKumari, CSE 66 JavaScript Four ways to create an array  You can use an array literal: var colors = ["red", "green", "blue"];  You can use new Array() to create an empty array:  var colors = new Array();  You can add elements to the array later: colors = "red"; colors = "blue"; colors="green";  You can use new Array(n) with a single numeric argument to create an array of that size  var colors = new Array(3);  You can use new Array(…) with two or more arguments to create an array containing those values:  var colors = new Array("red","green", "blue"); TDivyaKumari, CSE 67 JavaScript The length of an array  If myArray is an array, its length is given by myArray.length  Array length can be changed by assignment beyond the current length  Example: var myArray = new Array(5); myArray = 3; TDivyaKumari, CSE 68 JavaScript Array functions  If myArray is an array, – myArray.sort() sorts the array alphabetically – myArray.sort(function(a, b) { return a - b; }) sorts numerically – myArray.reverse() reverses the array elements – myArray.push(…) adds any number of new elements to the end of the array, and increases the array’s length – myArray.pop() removes and returns the last element of the array, and decrements the array’s length – myArray.toString() returns a string containing the values of the array elements, separated by commas TDivyaKumari, CSE JavaScript 69 Array example code   var a = [8,7,6,5];  b = a.reverse();  document.writeln(b);  TDivyaKumari, CSE 70 JavaScript The with statement with (object) statement ; uses the object as the default prefix for variables in the statement  For example, the following are equivalent: – with (document.myForm) { result.value = compute(myInput.value) ; } – document.myForm.result.value = compute(document.myForm.myInput.value);  One of my books hints at mysterious problems resulting from the use of with, and recommends against ever using it TDivyaKumari, CSE 71 JavaScript for.. in statement  You can loop through all the properties of an object with for (variable in object) statement;   var a = new Array(4);  for (i=0;i