Presentation is loading. Please wait.

Presentation is loading. Please wait.

JavaScript FaaDoOEngineers.com. Objectives Introduction to JavaScript  Introduction to JavaScript programming language  Using Script tag  Inserting.

Similar presentations


Presentation on theme: "JavaScript FaaDoOEngineers.com. Objectives Introduction to JavaScript  Introduction to JavaScript programming language  Using Script tag  Inserting."— Presentation transcript:

1 JavaScript FaaDoOEngineers.com

2 Objectives Introduction to JavaScript  Introduction to JavaScript programming language  Using Script tag  Inserting Java Script into tags  Linking Java Script from separate files JavaScript expression and Operators  Defining and naming variables  Data Types  Expression  Operators – Arithmetic, String, Logical, Assignment, typeof FaaDoOEngineers.com

3 Objectives (Contd.) Functions and Flow Control  Flow Control If…else For loops while loops Break and continue statements  Using JavaScript functions Built in functions User defined functions Returning values from functions Events, Event Handlers FaaDoOEngineers.com

4 Objectives (Contd.) Objects and Arrays  Properties and Methods  Browser Object Hierarchy  Addressing Objects  Creating Objects  Objects and Variables  External Objects  Security Implications  Arrays and Objects FaaDoOEngineers.com

5 Objectives (Contd.) Document Object Model  Introduction to DOM  The Navigator Object  The Window Object  Communicating between windows  Working With Frames in the DOM  The Document object  The Location & History Object  Image Object  Link Object FaaDoOEngineers.com

6 Objectives (Contd.) Form Validation The Form Object Model  Recap of Form Elements  Form Tag Events  Controlling Submission  Forms as Navigation  List Events  Buttons  Text Processing FaaDoOEngineers.com

7 Objectives (Contd.) Cookies  Introduction to HTTP Cookies  Formatting Cookies  Persisting Cookies  Cookie Security  JavaScript & Cookies  Reading / Writing Cookies  Modifying and deleting Cookies FaaDoOEngineers.com

8 Introduction To JavaScript FaaDoOEngineers.com

9 Introduction to Java Scripts What is JavaScript???  JavaScript is a scripting Language created by Netscape What is a Scripting Language??? Scripting Language is a lightweight programming language. Scripting Languages are not needed to be compiled. The language is interpreted at runtime. FaaDoOEngineers.com

10 Introduction to JavaScript (Contd.)  A JavaScript is usually directly embedded in an HTML page.  External JavaScripts can be created which can be used by HTML pages.  JavaScript adds interactivity to HTML pages.  JavaScript's are integrated into the browsing environment. FaaDoOEngineers.com

11 Introduction to JavaScript (Contd.) Java is a programming language which requires compilation and interpretation. Java is used to make large scale applications. JavaScript is a scripting language which just requires interpretation. The script is some set of commands which the browser interprets. JavaScript is used to add interactivity in HTML Pages. Is JavaScript same as Java??? Is JavaScript same as Java??? FaaDoOEngineers.com

12 Types of JavaScript Client-Side JavaScript (CSJS) -- an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers. Server-Side JavaScript (SSJS) -- an extended version of JavaScript that enables back-end access to databases, file systems, and servers. Core JavaScript -- the base JavaScript language. FaaDoOEngineers.com

13 Core JavaScript Core JavaScript encompasses all of the statements, operators, objects, and functions that make up the basic JavaScript language. The following objects are part of core JavaScript:  array  date  math  number  string FaaDoOEngineers.com

14 Client Side Java Scripting CSJS is composed of core JavaScript and many additional objects, such as the following:  document  form  frame  window  Navigator  History FaaDoOEngineers.com

15 Server Side JavaScript SSJS is composed of core JavaScript and additional objects and functions for accessing databases and file systems, sending e-mail, and so on. FaaDoOEngineers.com

16 Uses of JavaScript (Client Side) Menus for Navigation Form Validation Popup Windows Password Protecting Math Functions Special effects with document and background Status bar manipulation Messages Mouse Cursor Effects Links FaaDoOEngineers.com

17 Client Side JavaScript Server Side JavaScript Core JavaScript ________________ is an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers Test Your Understanding FaaDoOEngineers.com

18 Client Side JavaScript Server Side JavaScript Core JavaScript ________________ is an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers Test Your Understanding FaaDoOEngineers.com

19 Syntax rules of JavaScript Statements may or may not contain a semicolon at the end. Multiple statements on one line must be separated by a semicolon. JavaScript is case sensitive. FaaDoOEngineers.com

20 Using tag The HTML tag is used to enter JavaScript into a HTML. The tag can be embedded within  tag. JavaScript in the head section will be executed when called. JavaScript in the body section will be executed while the HTML page is loaded. Unlimited number of JavaScript’s can be placed both in head and body section in a HTML document. FaaDoOEngineers.com

21 Using tag Eg: Example document.write("Hello World!") Is a standard command for writing output to a page FaaDoOEngineers.com

22 How to Handle Older Browsers Browsers that do not support JavaScript will display the script as it is. Use the HTML comment tag to prevent this. Eg. The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. FaaDoOEngineers.com

23 Using an External JavaScript A JavaScript can be written in an external file, which can be used by different HTML pages. The external script cannot contain the tag. The external file needs to end with the.js extension. FaaDoOEngineers.com

24 Using External JavaScript (contd.) document.write("This line has been writen in the External JavaScript!!!") External.js Example > This line has been written in the html page!!! JavaScript.html FaaDoOEngineers.com

25 Test Your Understanding is embedded within { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/11/3275425/slides/slide_25.jpg", "name": "Test Your Understanding is embedded within

26 Test Your Understanding is embedded within { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/11/3275425/slides/slide_26.jpg", "name": "Test Your Understanding is embedded within

27 JavaScript Operators & Expressions FaaDoOEngineers.com

28 JavaScript Variables and expression JavaScript Variables  Variable: A variable is a symbolic name that represents some data in the memory. A variable value can change during the execution of the JavaScript. A variable can be referred by its name to see or change its value. Variables are name are case sensitive. Must begin with a letter or underscore. FaaDoOEngineers.com

29 Rules of a Variable Variable Declaration  Variables can be declared using the var statement var =some value  Variables can also be created without using var statement =some value –Eg var firstname=“Samuel” OR firstname=“Samuel” FaaDoOEngineers.com

30 Data Type in JavaScript JavaScript is a loosely typed language. Data Type of Variable need not be specified during declaration. Data types are automatically converted during script execution. Loosely Typed?? FaaDoOEngineers.com

31 Data Type in JavaScript (contd.) JavaScript recognizes the following type of values: Values string numbers null boolean 9, 3.56 true or false Samuel, ”Samuel J Palmisano” A Special keyword which refers to nothing FaaDoOEngineers.com

32 Data Type in JavaScript (contd.) FaaDoOEngineers.com

33 JavaScript Operators ArithmeticAssignment Conditional String Comparison Logical Operators typeof FaaDoOEngineers.com

34 JavaScript Operator (contd.) Arithmetic FaaDoOEngineers.com

35 JavaScript Operator (contd.) Comparison FaaDoOEngineers.com

36 JavaScript Operator (contd.) Assignment FaaDoOEngineers.com

37 JavaScript Operator (contd.) Logical FaaDoOEngineers.com

38 JavaScript Operator (contd.) String FaaDoOEngineers.com

39 JavaScript Operator (contd.) Conditional FaaDoOEngineers.com

40 JavaScript Operator (contd.) typeof FaaDoOEngineers.com

41 number string null x=20 x=“Test” typeof(x) evaluates to Test Your Understanding FaaDoOEngineers.com

42 number string null x=20 x=“Test” typeof(x) evaluates to Test Your Understanding FaaDoOEngineers.com

43 Flow Control & Functions FaaDoOEngineers.com

44 Flow Control Conditional Statements  if statement - use this statement if you want to execute some code only if a specified condition is true.  if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false.  if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed.  switch statement - use this statement if you want to select one of many blocks of code to be executed. FaaDoOEngineers.com

45 while statement FaaDoOEngineers.com

46 break and continue Statements There are two special statements that can be used inside loops:  break.  continue. Break  The break command will break the loop and continue executing the code that follows after the loop (if any). Continue  The continue command will break the current loop and continue with the next value. FaaDoOEngineers.com

47 Example of break statement var i=0 for (i=0;i<=5;i++) { if (i==3){break} document.write("The number is " + i) document.write(" ") } Result The number is 0 The number is 1 The number is 2 FaaDoOEngineers.com

48 Example of continue statement var i=0 for (i=0;i<=5;i++) { if (i==3){continue} document.write("The number is " + i) document.write(" ") } Result The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 FaaDoOEngineers.com

49 For loop FaaDoOEngineers.com

50 Functions A function is a reusable piece of code that will be executed when called for. A function can be called from anywhere from within the page or even from other pages if the function is stored in an external JavaScript (.js) file. Functions can be embedded in the and within the tag. FaaDoOEngineers.com

51 Predefined functions in JavaScript DialogBoxes  alert( message) Displays an alert box with a message defined by the string message. Eg. alert(“An Error Occurred!”) FaaDoOEngineers.com

52 Predefined functions in JavaScript (contd.) confirm(message)  When called, it will display the message and two boxes. One box is "OK" and the other is "Cancel". If OK is selected, a value of true is returned, otherwise a value of false is returned. Eg. confirm(“Do you wish to Continue?”) FaaDoOEngineers.com

53 prompt(message)  Displays a box with the message passed to the function displayed.  The user can then enter text in the prompt field, and choose OK or Cancel.  If the user chooses Cancel, a NULL value is returned. If the user chooses OK, the string value entered in the field is returned. Eg: prompt(“enter your Name”) Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

54 Conversion Functions  eval(string) Converts a string to an integer or a float value. Eg x=“20” y=eval(x)+10 y contains the value 30 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

55  isNaN(value) If the value passed is not a number then a boolean value of true is returned else the boolean value of false is returned. Eg x=“Samuel” y=isNaN(x) The value stored in y is true Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

56  parseInt(string) Converts a string to an integer returning the first integer encountered which is contained in the string. Eg x=77AB67 y=parseInt(x) y stores the value 77 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

57  parseFloat(string) Converts a string to an float value. Eg x=77.5AB67 y=parseFloat(x) y stores the value 77.5 Predefined functions in JavaScript (contd.) FaaDoOEngineers.com

58 User Defined Functions FaaDoOEngineers.com

59 User Defined Functions (contd.) FaaDoOEngineers.com

60 User Defined Functions (contd.) FaaDoOEngineers.com

61 Events FaaDoOEngineers.com

62 Events (contd.) FaaDoOEngineers.com

63 Event Handlers FaaDoOEngineers.com

64 Common Event Handlers FaaDoOEngineers.com

65 Common Event Handlers (contd.) FaaDoOEngineers.com

66 onLoad and onUnload  The onload and onUnload events are triggered when the user enters or leaves the page.  The onload event is also triggered when the image is loaded. The showstatus() function will be called when a user enters a page Common Event Handlers (contd.) FaaDoOEngineers.com

67 Common Event Handlers (contd.) onFocus, onBlur and onChange  The onFocus, onBlur and onChange events are often used in combination with validation of form fields. The checkEmail() function will be called whenever the user changes the content of the field: ; FaaDoOEngineers.com

68 Common Event Handlers (contd.) onSubmit  The onSubmit event is used to validate ALL form fields before submitting it. The checkForm() function will be called when the user clicks the submit button in the form. FaaDoOEngineers.com

69 Common Event Handlers (contd.) onMouseOver and onMouseOut  onMouseOver and onMouseOut are often used to create "animated" buttons. An alert box appears when an onMouseOver event is detected: FaaDoOEngineers.com

70 Test Your Understanding FaaDoOEngineers.com

71 Test Your Understanding FaaDoOEngineers.com

72 Example FaaDoOEngineers.com

73 Example (contd.) FaaDoOEngineers.com

74 Example (contd.) FaaDoOEngineers.com

75 Example (contd.) FaaDoOEngineers.com

76 Example (contd.) FaaDoOEngineers.com

77 Example (contd.) FaaDoOEngineers.com

78 Example (contd.) function Addition(x,y) { var x1=document.form1.text1.value var y1=document.form1.text2.value var Ans=document.form1.text3.value var temp=x1+y1 } FaaDoOEngineers.com

79 function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 } Example (contd.) FaaDoOEngineers.com

80 Example (contd.) function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 } FaaDoOEngineers.com

81 Example (contd.) f unction Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 if(Ans==temp){ alert(“Your Result agrees with JavaScript!”) document.form1.text1.value=‘’ document.form1.text2.value=‘’ document.form1.text3.value=‘’ } else{ alert(“No, JavaScript evalutes this operation differently”) document.form1.text3.value=‘’ }} FaaDoOEngineers.com

82 Test Your Understanding FaaDoOEngineers.com

83 Test Your Understanding FaaDoOEngineers.com

84 A Complete Program function myfunction(txt) { alert(txt) } When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. FaaDoOEngineers.com

85 Output FaaDoOEngineers.com

86 myfunction (txt) receives “ Good Morning!” FaaDoOEngineers.com

87 myfunction (txt) receives “ Good Evening !” FaaDoOEngineers.com

88 Objects & Arrays FaaDoOEngineers.com

89 JavaScript Objects JavaScript is not a true Object Oriented language as C++ or Java but rather an Object Based language. Objects in JavaScript are software entities such as the browser window or an HTML document. FaaDoOEngineers.com

90 JavaScript Objects (contd.) FaaDoOEngineers.com

91 JavaScript Objects (contd.) FaaDoOEngineers.com

92 JavaScript Objects (contd.) FaaDoOEngineers.com

93 JavaScript Objects (contd.) FaaDoOEngineers.com

94 JavaScript Objects (contd.) FaaDoOEngineers.com

95 JavaScript Objects (contd.) FaaDoOEngineers.com

96 JavaScript Objects (contd.) FaaDoOEngineers.com

97 JavaScript Objects (contd.) FaaDoOEngineers.com

98 JavaScript Objects (contd.) FaaDoOEngineers.com

99 Instances of Computer Objects (contd.) FaaDoOEngineers.com

100 JavaScript Core Objects FaaDoOEngineers.com

101 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

102 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

103 Boolean Object  This object is used to convert a non boolean value to a boolean value.  The Boolean Object is an Object Wrapper for a Boolean value  Boolean object is defined with the new keyword var BooleanObj=new Boolean() JavaScript Core Objects (contd.) FaaDoOEngineers.com

104 All the following lines of code create Boolean objects with an initial value of false :  var myBoolean=new Boolean()  var myBoolean=new Boolean(0)  var myBoolean=new Boolean(null)  var myBoolean=new Boolean("")  var myBoolean=new Boolean(false)  var myBoolean=new Boolean(NaN) JavaScript Core Objects (contd.) FaaDoOEngineers.com

105 All the following lines of code create Boolean objects with an initial value of true:  var myBoolean=new Boolean(true)  var myBoolean=new Boolean("true")  var myBoolean=new Boolean("false")  var myBoolean=new Boolean("Richard") JavaScript Core Objects (contd.) FaaDoOEngineers.com

106 Test Your Understanding FaaDoOEngineers.com

107 Test Your Understanding FaaDoOEngineers.com

108 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

109 Date Object  The Date object is used to work with dates and times.  An instance of the Date object with the "new" keyword.  An instance of Date object can be created as: var myDate=new Date() var myDate=new Date("Month dd, yyyy hh:mm:ss") var myDate=new Date("Month dd, yyyy") var myDate=new Date(yy,mm,dd,hh,mm,ss) var myDate=new Date(yy,mm,dd) var myDate= new Date(milliseconds) JavaScript Core Objects (contd.) FaaDoOEngineers.com

110 JavaScript Core Objects (contd.) FaaDoOEngineers.com

111 JavaScript Core Objects (contd.) FaaDoOEngineers.com

112 JavaScript Core Objects (contd.) FaaDoOEngineers.com

113 JavaScript Core Objects (contd.) FaaDoOEngineers.com

114 JavaScript Core Objects (contd.) FaaDoOEngineers.com

115 JavaScript Core Objects (contd.) FaaDoOEngineers.com

116 JavaScript Core Objects (contd.) FaaDoOEngineers.com

117 JavaScript Core Objects (contd.) FaaDoOEngineers.com

118 JavaScript Core Objects (contd.) FaaDoOEngineers.com

119 Commonly used methods of the Date Object JavaScript Core Objects (contd.) FaaDoOEngineers.com

120 JavaScript Core Objects (contd.) FaaDoOEngineers.com

121 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

122 JavaScript Core Objects (contd.) FaaDoOEngineers.com

123 JavaScript Core Objects (contd.) FaaDoOEngineers.com

124 JavaScript Core Objects (contd.) FaaDoOEngineers.com

125 JavaScript Core Objects (contd.) FaaDoOEngineers.com

126 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

127 Math Object  Math object allows to perform common mathematical functions.  The Math object includes several Mathematical values and functions.  The Math object need not be defined before using it. JavaScript Core Objects (contd.) FaaDoOEngineers.com

128 Mathematical values provided by JavaScript  Math.E  Math.PI  Math.SQRT2  Math.SQRT1_2  Math.LN2  Math.LN10  Math.LOG2E  Math.LOG10E JavaScript Core Objects (contd.) FaaDoOEngineers.com

129 Methods of Math object JavaScript Core Objects (contd.) FaaDoOEngineers.com

130 Test Your Understanding FaaDoOEngineers.com

131 Test Your Understanding FaaDoOEngineers.com

132 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

133 JavaScript Core Objects (contd.) FaaDoOEngineers.com

134 JavaScript Core Objects (contd.) FaaDoOEngineers.com

135 JavaScript Core Objects (contd.) FaaDoOEngineers.com

136 JavaScript Core Objects (contd.) BooleanMath Date Function Number String 1.Boolean 2.Date 3.Function 4.Math 5.Number 6.String FaaDoOEngineers.com

137 String object  The String object is used to manipulate a stored piece of text.  String objects must be created using the new keyword.  JavaScript automatically converts the string primitive to a temporary String object  A string literal can be embedded within a single or double quotation marks. JavaScript Core Objects (contd.) FaaDoOEngineers.com

138 String primitives and String objects give different results when evaluated as JavaScript. Primitives are treated as source code, but String objects are treated as a character sequence object.  s1 = "2 + 2“ // creates a string primitive  s2 = new String("2 + 2") // creates a String object  eval(s1) // returns the number 4  eval(s2) // returns the string "2 + 2“  eval(s2.valueOf()); // returns the number 4 JavaScript Core Objects (contd.) FaaDoOEngineers.com

139 Common Methods of String Object JavaScript Core Objects (contd.) FaaDoOEngineers.com

140 Defining Arrays An Array object is used to store a set of values in a single variable name. An Array object is created with the new keyword. An array can be created as:  var MyArray=new Array() An array can also be created by specifying the array size.  var MyArray=new Array(3) FaaDoOEngineers.com

141 Arrays (contd.) Data can be entered into an array as: var MyArray=new Array() MyArray[0]=“Paul” MyArray[1]=“Sam” MyArray[2]=“Niel” Data can also be entered into an array as: var MyArray=new Array(“Paul”,”Sam”, “Niel”) FaaDoOEngineers.com

142 Arrays (contd.) Accessing Arrays  You can refer to a particular element in an array by referring to the name of the array and the index number.  The index number starts at 0. var MyArray=new Array() Myarray [0] The starting index FaaDoOEngineers.com

143 Document Object Model FaaDoOEngineers.com

144 Document Object Model The DOM is a programming API for documents. It is based on an object structure that closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document: Shady Grove Aeolian Over the River, Charlie Dorian FaaDoOEngineers.com

145 Graphical representation of the DOM of the example table Document Object Model (contd.) FaaDoOEngineers.com

146 Document Object Model (contd.) With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page. To change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM). In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page. All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared. FaaDoOEngineers.com

147 Document Object Model (contd.) Document Tree FaaDoOEngineers.com

148 How to access the nodes in an HTML You can find the element you want to manipulate in several ways:  By using the getElementById() and getElementsByTagName() methods  By using the parentNode, firstChild, and lastChild properties of an element node FaaDoOEngineers.com

149 Navigator Object Navigator object is the object representation of the client internet browser or web navigator program that is being used. This is a top level object to all others object in DOM hierarchy. FaaDoOEngineers.com

150 Navigator Object Properties appCodeName – The name of the browser’s code such as Internet Explorer appName – The name of the browser. appVersion – The version of the browser. plugins – An array of plug-ins supported by the browser and installed on the browser. cpuClass – The type of CPU which may be “x86”. cookieEnabled – A boolean value of true or false depending on whether cookies are enabled in the browser. FaaDoOEngineers.com

151 Navigator Object Methods javaEnabled() – Returns a boolean telling if the browser has JavaScript enabled. FaaDoOEngineers.com

152 Window Object The Window object is the top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a or tag. FaaDoOEngineers.com

153 Window Object Collections Frames[] – Returns all named frames in the window. FaaDoOEngineers.com

154 Window Object Properties name – sets of return the name of the window. status – sets or returns the name of the window. length – sets or returns the number of frames in the window. self – returns a reference to the current window. statusbar - sets whether or not the browser’s statusbar should be visible. toolbar - sets whether or not the browser’s toolbar should be visible. closed – Returns all named frames in the window document history FaaDoOEngineers.com

155 Window Object Methods open() – Opens a new browser window. createPopup() – Creates a popup window. setInterval(code,millisec[,lang]) – Evaluates an expression at specified intervals. clearInterval(id_of_setInterval) – cancels a timeout that is set with the setInterval() method. setTimeout(code,millisec[,lang]) – Evaluates an expression after a specified number of milliseconds. clearTimeout(id_of_setTimeout) – cancels a timeout that is set with the setTimeout() method. focus() – sets the focus to the current window. blur() – removes focus from the current window. close() – closes the current window. FaaDoOEngineers.com

156 Frame Object Frame object represents an HTML frame. For each instance of a tag in an HTML document, a Frame object is created. FaaDoOEngineers.com

157 Frame Object (contd.) In Document Object Model Frames are instances of Window object FaaDoOEngineers.com

158 Frame Object (contd.) FaaDoOEngineers.com

159 Frame Object (contd.) FaaDoOEngineers.com

160 Frame Object (contd.) FaaDoOEngineers.com

161 Frame Object (contd.) FaaDoOEngineers.com

162 Frame Object (contd.) FaaDoOEngineers.com

163 Frame Object (contd.) FaaDoOEngineers.com

164 Frame Object (contd.) FaaDoOEngineers.com

165 Frame Object (contd.) FaaDoOEngineers.com

166 Frame Object (contd.) FaaDoOEngineers.com

167 Frame Object (contd.) FaaDoOEngineers.com

168 Frame Object (contd.) FaaDoOEngineers.com

169 Frame Object (contd.) FaaDoOEngineers.com

170 Frame Object (contd.) FaaDoOEngineers.com

171 Frame Object (contd.) FaaDoOEngineers.com

172 Frame Object (contd.) FaaDoOEngineers.com

173 Frame Object (contd.) FaaDoOEngineers.com

174 Test Your Understanding FaaDoOEngineers.com

175 Test Your Understanding FaaDoOEngineers.com

176 Document Object The document object represents the entire HTML document and can be used to access all elements in a page. The document object is part of the window object and is accessed through the window.document property or simply document. FaaDoOEngineers.com

177 Document Object Collections anchors[] - Returns a reference to all Anchor objects in the document. forms[] - Returns a reference to all Form objects in the document. images[] - Returns a reference to all Image objects in the document. links[] - Returns a reference to all Area and Link objects in the document. FaaDoOEngineers.com

178 Document Object Properties Body – gives direct access to the element. Cookie – Sets or returns all cookies associated with the current document. lastModified – Returns the date and time a document was last modified. Title – Returns the title of the current document. URL – Returns the URL of the current document. FaaDoOEngineers.com

179 Document Object Methods write() - Writes HTML expressions or JavaScript code to a document writeln() – Similar to write(), with the addition of writing a new line character after each expression. open() - Opens a stream to collect the output from any document.write() or document.writeln() methods. close() - Closes an output stream opened with the document.open() method, and displays the collected data getElementByID() – Returns a reference to the first object with the specified id. getElementsByName() – Returns a collection of objects with the specified name. getElementsByTagName() – Return a collection of objects with the specified tag name. FaaDoOEngineers.com

180 Location object is an JavaScript object it is not an DOM object. The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. The Location object is part of the Window object and is accessed through the window.location property. Location Object FaaDoOEngineers.com

181 Location Object (contd.) FaaDoOEngineers.com

182 Location Object (contd.) FaaDoOEngineers.com

183 Location Object (contd.) FaaDoOEngineers.com

184 Location Object (contd.) FaaDoOEngineers.com

185 Location Object (contd.) FaaDoOEngineers.com

186 Location Object (contd.) FaaDoOEngineers.com

187 Assign (url) – It loads a new document. Reload() – the current document. Replace() – Replaces the current document with a new one. Location Object Methods FaaDoOEngineers.com

188 Location Object Example switch (window.location.protocol) { case "http:": document.write("From Web \n") break case "file:": document.write("From Local computer \n") break default: document.write("Unknown Source \n") break } FaaDoOEngineers.com

189 Output: If Accessed from the Local File System FaaDoOEngineers.com

190 Output: If the page is delivered by a Web Server. FaaDoOEngineers.com

191 History Object History object is a JavaScript object. The History object is automatically created by the JavaScript runtime engine and consists of and array of URLs. It is a part of window object & accessed through window.history property. FaaDoOEngineers.com

192 History Object (contd.) FaaDoOEngineers.com

193 History Object (contd.) FaaDoOEngineers.com

194 History Object (contd.) FaaDoOEngineers.com

195 History Object (contd.) FaaDoOEngineers.com

196 Test Your Understanding FaaDoOEngineers.com

197 Test Your Understanding FaaDoOEngineers.com

198 Form Object Model FaaDoOEngineers.com

199 Form Object Model (contd.) FaaDoOEngineers.com

200 Form Object Model (contd.) FaaDoOEngineers.com

201 Test Your Understanding FaaDoOEngineers.com

202 Test Your Understanding FaaDoOEngineers.com

203 Form Object Model (contd.) FaaDoOEngineers.com

204 Form Object Model (contd.) FaaDoOEngineers.com

205 Form Object Model (contd.) FaaDoOEngineers.com

206 Form Object Model (contd.) FaaDoOEngineers.com

207 Form Object Model (contd.) FaaDoOEngineers.com

208 Test Your Understanding FaaDoOEngineers.com

209 Test Your Understanding FaaDoOEngineers.com

210 Form Object Model (contd.) FaaDoOEngineers.com

211 Form Object Model (contd.) FaaDoOEngineers.com

212 Test Your Understanding FaaDoOEngineers.com

213 Test Your Understanding FaaDoOEngineers.com

214 Form Object Model (contd.) FaaDoOEngineers.com

215 Form Object Model (contd.) FaaDoOEngineers.com

216 Form Object Model (contd.) FaaDoOEngineers.com

217 Form Object Model (contd.) FaaDoOEngineers.com

218 Test Your Understanding FaaDoOEngineers.com

219 Test Your Understanding FaaDoOEngineers.com

220 Test Your Understanding FaaDoOEngineers.com

221 Test Your Understanding FaaDoOEngineers.com

222 Cookies FaaDoOEngineers.com

223 Cookies A cookie can store a small amount of information about a user visiting a site. A cookie is a small text file that is stored on the site visitor's computer by their browser. Because the cookie is stored on the user’s computer, it does not require any server space no matter how many users you have. With JavaScript, you can both create and retrieve cookie values. FaaDoOEngineers.com

224 Cookies (contd.) You can use cookies to :  save user preferences.  customize data.  remember the last visit.  Keep track of items in an order while a user browses.  Remember the information your site’s visitors gave last time. Cookies can be created, read and erased by JavaScript. They are accessible through the property document.cookie FaaDoOEngineers.com

225 What does a cookie contain?  Name value pair The first element in a cookie is a "name" attribute, followed by the data to be stored in the cookie.  The expiry date specifies how long the cookie is valid for. Cookies (contd.) FaaDoOEngineers.com

226 Cookies (contd.) What does a cookie contain?  The path this states where the cookie may be accessed from on the Web site. Most often, this is set to the server's document root.  The domain The "domain" attribute allows you to set a domain name for the cookie. Again, this is optional. FaaDoOEngineers.com

227 Question first second third The name-value pair is the _____________ element in the Cookie FaaDoOEngineers.com

228 Answer first second third The name-value pair is the _____________ element in the Cookie FaaDoOEngineers.com

229 Cookies and Security Turn up security level on your browser to disable cookies or prompt for cookie. Delete the content of a cookie and then write protect it. Use 3 rd party software:  Cookie Pal, CookieMaster, CookieCrusher to monitor, browse and edit cookies. FaaDoOEngineers.com

230 Format of Cookie First the name value pair. Then a semicolon and a space. Then the expiry date.  Expiry date should be in UTC format. Then again a semicolon and a space. Then the path. FaaDoOEngineers.com

231 Format of Cookie (contd.) document.cookie= = ; expires= ; path= Example document.cookie = ‘user=Paul; expires=Thu, 2 Aug 2008 20:47:11 UTC; path=/' FaaDoOEngineers.com

232 Example of Setting a Cookie function setCookie(name, value) { var exp=new Date("January 31,2008") document.cookie=name+"="+escape (value)+"; expires="+exp.toGMTString() +"; path=/“ document.write(“Cookie has been set”) ) Set an expiry date What does the escape function do? FaaDoOEngineers.com

233 escape() function There's no escape!  Strictly speaking, we should be escaping our cookie values -- encoding non-alphanumeric characters such as spaces and semicolons.  This is to ensure that our browser can interpret the values properly.  Fortunately this is easy to do with JavaScript's escape() function. For example document.cookie = "username=" + escape(“Paul Smith") + "; expires=15/02/2003 00:00:00"; FaaDoOEngineers.com

234 Example of Setting a Cookie function setCookie(name, value) { var exp=new Date("January 31,2008") document.cookie=name+"="+escape (value)+"; expires="+exp.toGMTString() +"; path=/“ document.write(“Cookie has been set”) ) Setting the cookie The value stored is user=Paul Smith FaaDoOEngineers.com

235 Reading a Cookie function readCookie() { var ca = document.cookie document.write(ca) } Returns the cookie name value pair Value retrieved is user=Paul Smith FaaDoOEngineers.com

236 Extracting only the value from the Cookie function readCookie(c_name) { if (document.cookie.length>0) {c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length document.write( document.cookie.substring(c_start,c_ end)) } Displays the value: Paul Smith FaaDoOEngineers.com

237 Delete Cookies function deleteCookie ( cookie_name) { var cookie_date = new Date ( ) cookie_date.setTime ( cookie_date.getTime() - 1 ) document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString() } The cookie's expiry date is set to one second less then the current date. FaaDoOEngineers.com

238 Modifying a cookie To modify a cookie simply reset the values and use the same procedure for setting the cookie. Ensure that the cookie name is existing or a new cookie will be created. FaaDoOEngineers.com

239 Summary Cookies are small text files that sit on your hard disk. Cookies are created when you visit websites that use cookies to store information that they need (or prefer). Websites often use cookies to personalize the user experience - such as remembering your name (assuming you supplied it previously) or remembering the items in your shopping cart from previous visits. Despite the many misconceptions about cookies being malicious, they are quite harmless. Cookies can't give your personal details to other websites, or transmit a virus or anything like that. A cookie can only be read by the server that created it. Websites normally use cookies to make its users' lives easier, not harder. FaaDoOEngineers.com

240 Thank You For Your Participation FaaDoOEngineers.com


Download ppt "JavaScript FaaDoOEngineers.com. Objectives Introduction to JavaScript  Introduction to JavaScript programming language  Using Script tag  Inserting."

Similar presentations


Ads by Google