1. Copyright © 2002 ProsoftTraining. All rights reserved. JavaScript Fundamentals

2. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 1: Introduction to JavaScript

3. Objectives Describe the origins of JavaScript List the key JavaScript characteristics Describe the differences between Java and JavaScript Discern among JavaScript, JScript and VBScript Differentiate between server-side and client- side JavaScript applications Embed JavaScript into HTML Use the JavaScript comment tags

4. Origins of JavaScript Developed by Netscape Corporation Previously named LiveScript First supported in Navigator v2.0 –Has since gained universal support

5. JavaScript Characteristics A scripting language Object-based, not object-oriented Event-driven Platform-independent Enables quick development Relatively easy to learn

6. JavaScript and Common Programming Concepts Objects Properties Methods

7. Java and JavaScript JavaScript and VBScript Visual Basic and VBScript JavaScript, JScript and ECMA Script

8. Comparing Java to JavaScript Java JavaScript

9. Server-Side vs. Client-Side Applications Server-side applications –LiveWire Client-side applications –Embedding JavaScript into HTML –External scripts

10. Annotating Your Code with Comments Single-line comment indicator Multiple-line comment indicator

11. Summary Describe the origins of JavaScript List the key JavaScript characteristics Describe the differences between Java and JavaScript Discern among JavaScript, JScript and VBScript Differentiate between server-side and client- side JavaScript applications Embed JavaScript into HTML Use the JavaScript comment tags

12. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 2: Working with Variables and Data in JavaScript

13. Objectives Communicate with the user through alert(), prompt() and confirm() Define variables and data types Obtain user input and store it in variables Report variable text to the client window Discern between concatenation and addition Use expressions and operators Define inline scripting

14. Using JavaScript to Communicate with the User Giving the user a message: the alert() method Using semicolons in JavaScript Getting data from the user: the prompt() method Concatenation Requesting confirmation: the confirm() method Writing HTML dynamically: the document.write() method

15. Using Data More Than Once: Variables What is a variable? Variable data types Literals Naming variables Declaring variables Concatenating variables Working with variables

16. JavaScript Expressions Assignment Arithmetic String Logical

17. Operators Used in expressions to store or return a value Varieties include: –Assignment –Arithmetic –Unary –Logical

18. Inline Scripting and Simple User Events Event handlers –User-generated events are not script-driven event handlers

19. The onLoad and onUnload Event Handlers onUnload event handler is used to process, or handle, the unload event onLoad event handler is used by scripts that run as the page is loaded in the browser

20. Keywords and Reserved Words JavaScript keywords JavaScript reserved words

21. Summary Communicate with the user through alert(), prompt() and confirm() Define variables and data types Obtain user input and store it in variables Report variable text to the client window Discern between concatenation and addition Use expressions and operators Define inline scripting

22. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 3: Functions, Methods and Events in JavaScript

23. Objectives Use methods as functions Define and call functions Use conversion methods Pass arguments to and return values from functions Define operator precedence Discern between global and local variables Employ the conditional operator Identify user events and event handlers

24. Functions Organized blocks of code that handle actions generated by user events Can improve program efficiency and readability

25. Methods as Functions Methods and functions are interchangeable in JavaScript –Any method that returns a value can be called a function

26. Defining a Function Calling statements Arguments Inserting functions into HTML pages Using built-in functions Good coding practice

27. Calling a Function Passing arguments to functions Returning values from functions Operator precedence Global versus local variables

28. User Events and JavaScript Event Handlers User events –blur –click –change –focus –load –mouseOver –mouseOut –select Event handlers –button –reset –submit –radio –checkbox –link –form –text –textarea –select –image –area –window

29. Summary Use methods as functions Define and call functions Use conversion methods Pass arguments to and return values from functions Define operator precedence Discern between global and local variables Employ the conditional operator Identify user events and event handlers

30. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 4: Controlling Program Flow in JavaScript

31. Objectives Use the if... statement Use the while... statement Use the for... statement Use the break and continue statements Define the do...while statement Use the switch... statement

32. The if... else Statement A single condition Multiple conditions Using if for conditional program flow

33. The while Statement Used to execute a code group for as long as (while) a certain condition is true

34. The for Statement A loop that can be used to execute a group of statements repeatedly

35. The break Statement Used to exit a loop that otherwise would continue executing

36. The continue Statement Used to force the flow of control back to the top of the loop

37. The switch Statement Compares a value against other values Functions the same as multiple if statements

38. The do... while Statement Operates exactly like the while statement, with one key difference: –The do... while statement does not check the conditional expression until after the first time through the loop

39. Summary Use the if... statement Use the while... statement Use the for... statement Use the break and continue statements Define the do...while statement Use the switch... statement

40. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 5: The JavaScript Object Model

41. Objectives Describe the JavaScript object model Use the window object Manipulate properties and methods of the document object Use the with statement Deploy the image, navigator and history objects Evaluate and change URL information with the location object

42. The JavaScript Object Model Browser objects Language objects Form field objects Document Object Model (DOM) Containership

43. The window Object The highest-level object in the JavaScript object hierarchy Opening additional windows Dot notation revisited The status property The onMouseOver and onMouseOut event handlers

44. The document Object Subordinate to the window object in the window hierarchy Defined when the tag is evaluated in an HTML page

45. The with Statement Says that for the body of the statements, any references that follow refer to the same object

46. The image object Allows you to manipulate images in Internet Explorer 4.0 and Netscape Navigator 3.0 and later JavaScript and image maps

47. The history Object Subordinate to the window object in the window hierarchy

48. The location Object Subordinate to the window object in the window hierarchy Allows you to specify URLs in a script

49. The navigator Object Reflects information about the browser being used

50. Summary Describe the JavaScript object model Use the window object Manipulate properties and methods of the document object Use the with statement Deploy the image, navigator and history objects Evaluate and change URL information with the location object

51. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 6: JavaScript Language Objects

52. Objectives Use the String object to test user input Identify basic regular expressions and the RegExp object Deploy the Array object to create more efficient code Identify uses for the Date and Math objects

53. JavaScript Language Objects String object Math object Array object Date objects

54. The string Object String object formatting methods String object special characters Additional String object methods

55. Evaluating Strings The length property The indexOf() and lastindexOf() methods The substring() method The charAt() method Form validation using string methods

56. The Array Object The Array object length property Instances

57. The Date Object Based on arrays The only way to use date and time information in JavaScript

58. Setting and Extracting Time Information Follows the same procedures as setting and extracting date information

59. The Math Object Contains properties and methods that aid in the creation of advanced mathematical calculations

60. Summary Use the String object to test user input Identify basic regular expressions and the RegExp object Deploy the Array object to create more efficient code Identify uses for the Date and Math objects

61. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 7: Developing Interactive Forms with JavaScript

62. Objectives Identify and use form controls Refer to and define form objects Use the button object Use the checkbox object Evaluate text in the text and textarea objects Process radio object options Capture choices from a select list

63. Overview of Form Elements button checkbox hidden password radio reset select submit text textarea

64. Referring to a Form Element Two ways –By name –By index number in the form object’s elements array

65. The form Object Represents an HTML form in JavaScript tags present in HTML document

66. The button Object The simplest of all objects Has only one event handler: onClick

67. The checkbox Object A checkbox is an input object in the shape of a small square that can be checked on or off

68. The text and textarea Objects Text objects can only display a single line of text Textarea objects can display multiple, scrolling lines of text

69. The radio Object Used to select among mutually exclusive options

70. The select Object A drop-down list or a list box of items used in an HTML form No methods are defined for the select object

71. Form Validation Benefits –Increased validity of form submissions –Increased end-user satisfaction –Conservation of bandwidth

72. Summary Identify and use form controls Refer to and define form objects Use the button object Use the checkbox object Evaluate text in the text and textarea objects Process radio object options Capture choices from a select list

73. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 8: Cookies and JavaScript Security

74. Objectives Explain cookies Delete cookies from your disk Assign a cookie Test for the presence of a cookie Clear a cookie Enable and disable cookies in the browser Use cookies and passwords to restrict entry to a page

75. What Are Cookies? Small memory-resident pieces of information sent from a server to your computer Often referred to as “persistent cookies” and “persistent HTML”

76. How Are Cookies Sent? When a user generates an HTTP request, two actions can occur: –A server can deposit cookies on the user’s hard drive –Any cookies already on the user’s system that match the server’s domain can be passed along in the request header

77. Who Can Send Cookies? A server can set, or deposit, a cookie only if a user visits that particular site –Cross-domain posting is impossible –Some domains “share” cookies

78. Storing Cookies Cookies store name=value pairs as text strings Domains can store no more than 20 cookies on a user’s computer Users can delete cookie files

79. Why Use Cookies? Authentication Storing user information –Operating system and browser type –Service provider –IP address –History of sites visited State maintenance with cookies

80. Testing for Cookie Presence You can easily test for the presence of any cookie by using “document.cookie” in your script

81. Clearing a Cookie To clear a cookie, reassign it, adding an expiration date that has already passed

82. Controlling Cookies in the Browser Netscape Navigator Microsoft Internet Explorer

83. JavaScript Security Issues JavaScript and helper application programs Malicious and accidental coding Previous browser versions and security Signed scripts –Digital certificates

84. Summary Explain cookies Delete cookies from your disk Assign a cookie Test for the presence of a cookie Clear a cookie Enable and disable cookies in the browser Use cookies and passwords to restrict entry to a page

85. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 9: Controlling Frames with JavaScript

86. Objectives Target frames with JavaScript Change two or more frames simultaneously Use functions and variables within framesets Use functions and variables with related windows Target the opener window

87. Using JavaScript with Frames and Windows Understanding HTML frames Understanding HTML targets

88. Targeting Frames with JavaScript To target frames, use either of the following techniques –By target name –By number in the frames array

89. Changing Two or More Frames with JavaScript To change two (or more) frames at once in a script, write a simple function that includes two (or more) location.href lines

90. Frames, Functions and Variables Variables can be stored in any of the files involved in making a frameset Targeting windows –Targeting the “opener” window

91. Targeting Windows with JavaScript Targeting the opener window

92. Summary Target frames with JavaScript Change two or more frames simultaneously Use functions and variables within framesets Use functions and variables with related windows Target the opener window

93. Copyright © 2002 ProsoftTraining. All rights reserved. Lesson 10: Custom JavaScript Objects

94. Objectives Create a custom JavaScript object Define properties and methods of custom objects Create new object instances Create client-side databases using custom objects Create functions and methods for manipulating client-side databases

95. Advantages of Custom Objects Creating a user-defined object offers two major advantages –You can create sophisticated solutions with a minimum of coding –You can represent programming constructs as objects

96. Creating a JavaScript Object: The Constructor You define, or create, a custom JavaScript object with a special function called a constructor –The constructor defines the properties and methods of your object

97. Creating an Instance of a Custom Object To instantiate then populate the properties of each new instance with actual data, you must declare variables

98. Creating Object Methods You can create as many methods for your object as you want Methods can be as simple or as sophisticated as you want

99. Creating Functions for Your Objects When you need to evaluate multiple objects in an array, you need a function as opposed to a method

100. Summary Create a custom JavaScript object Define properties and methods of custom objects Create new object instances Create client-side databases using custom objects Create functions and methods for manipulating client-side databases

101. JavaScript Fundamentals Introduction to JavaScript Working with Variables and Data in JavaScript Functions, Methods and Events in JavaScript Controlling Program Flow in JavaScript The JavaScript Object Model JavaScript Language Objects

102. JavaScript Fundamentals Developing Interactive Forms with JavaScript Cookies and JavaScript Security Controlling Frames with JavaScript Custom JavaScript Objects