1. XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding E-Mail Addresses from Spammers

2. XP Tutorial 1New Perspectives on JavaScript, Comprehensive2 Objectives Understand the history and theory of JavaScript Create a script element Understand and use basic JavaScript syntax Write text to a Web document using a JavaScript command

3. XP Tutorial 1New Perspectives on JavaScript, Comprehensive3 Objectives Understand the different data types supported by JavaScript Declare a variable and assign it a value Reference a variable in a JavaScript statement Create and call a JavaScript function

4. XP Tutorial 1New Perspectives on JavaScript, Comprehensive4 Objectives Access functions from an external JavaScript file Document code with multiline and single-line comments Understand basic techniques for debugging JavaScript code

5. XP Tutorial 1New Perspectives on JavaScript, Comprehensive5 Staff Directory at Monroe Public Library Web Page

6. XP Tutorial 1New Perspectives on JavaScript, Comprehensive6 Introduction to JavaScript Spam –Junk e-mail Spammer –Person who sends spam E-mail harvester –Program that scans documents looking for e-mail addresses

7. XP Tutorial 1New Perspectives on JavaScript, Comprehensive7 E-Mail Addresses in Staff Directory

8. XP Tutorial 1New Perspectives on JavaScript, Comprehensive8 Server-Side and Client-Side Programming Server-side programming –Program placed on server that hosts Web site –Program then used to modify contents and structure of Web pages

9. XP Tutorial 1New Perspectives on JavaScript, Comprehensive9 Server-Side and Client-Side Programming Client-side programming –Runs programs on user’s computer –Programs likely to be more responsive to users –Can never completely replace server-side programming

10. XP Tutorial 1New Perspectives on JavaScript, Comprehensive10 Server-Side Programming

11. XP Tutorial 1New Perspectives on JavaScript, Comprehensive11 Client-Side Programming

12. XP Tutorial 1New Perspectives on JavaScript, Comprehensive12 Combining Client-Side and Server- Side Programming

13. XP Tutorial 1New Perspectives on JavaScript, Comprehensive13 The Development of JavaScript Java –Developed by Sun Microsystems –Programs designed to be run within Java interpreters –An example of a compiled language JavaScript –Subset of Java –An interpreted language –Internet Explorer supports a version called JScript

14. XP Tutorial 1New Perspectives on JavaScript, Comprehensive14 Comparing Java and JavaScript

15. XP Tutorial 1New Perspectives on JavaScript, Comprehensive15 Versions of Java and JavaScript

16. XP Tutorial 1New Perspectives on JavaScript, Comprehensive16 Working with the Script Element Script element –Used to enter scripts into an HTML or XHTML file –Syntax script commands

17. XP Tutorial 1New Perspectives on JavaScript, Comprehensive17 Writing Output to a Web Document Inserting cadler@mpl.gov in a Web documentcadler@mpl.gov document.write("cadler@mpl.gov");

18. XP Tutorial 1New Perspectives on JavaScript, Comprehensive18 The document.write() Method One way to send output to the Web document Object –Can be any item, including mouse pointer or window scrollbars Method –Process by which JavaScript manipulates the features of an object

19. XP Tutorial 1New Perspectives on JavaScript, Comprehensive19 Understanding JavaScript Rules and the Use of White Space JavaScript –Is case sensitive –Ignores most occurrences of extra white space –Line breaks occurring within a statement can cause error –Good practice to not break a statement into several lines

20. XP Tutorial 1New Perspectives on JavaScript, Comprehensive20 Supporting Non-JavaScript Browsers noscript element –Used by browsers that do not support scripts –Syntax alternative content

21. XP Tutorial 1New Perspectives on JavaScript, Comprehensive21 Supporting Non-JavaScript Browsers CDATA section –Marks text as data that should not be processed by XHTML parsers –Syntax <![cdata[ JavaScript code ]]>

22. XP Tutorial 1New Perspectives on JavaScript, Comprehensive22 Working with Variables Variable –A named item in a program that stores information –Used to represent values and text strings –Values can change as the program runs

23. XP Tutorial 1New Perspectives on JavaScript, Comprehensive23 Declaring a Variable Tells JavaScript interpreter to reserve memory space for the variable Statement to declare a variable var variable; Declaring three variables var emLink, userName, emServer;

24. XP Tutorial 1New Perspectives on JavaScript, Comprehensive24 Declaring a Variable Limits on variable names –First character must be either a letter or an underscore character ( _ ) –Remaining characters can be letters, numbers, or underscore characters –Variable names cannot contain spaces –Reserved words cannot be used

25. XP Tutorial 1New Perspectives on JavaScript, Comprehensive25 Assigning a Value to a Variable variable = value; Combining variable declaration and assignment in a single statement var userName = "cadler", emServer = "mpl.gov";

26. XP Tutorial 1New Perspectives on JavaScript, Comprehensive26 Working with Data Types Data type –Type of information stored in a variable Numeric value –Any number, such as 13, 22.5, or -3.14159 Text string –Any group of text characters, such as “Hello” Boolean value –Indicates the truth or falsity of a statement

27. XP Tutorial 1New Perspectives on JavaScript, Comprehensive27 Working with Data Types Null value – Value has not yet been assigned to variable Weakly typed language –Variables are not strictly tied to specific data types Strongly typed languages –Force programmer to explicitly identify a variable’s data type

28. XP Tutorial 1New Perspectives on JavaScript, Comprehensive28 Writing a Variable Value to a Web Document Variable –Can be used in place of value it contains Writing a text string to a Web page var libName = "Monroe Public Library"; document.write(libName); Plus symbol ( + ) –Can be used to combine variable with text string

29. XP Tutorial 1New Perspectives on JavaScript, Comprehensive29 Creating a Function to Perform an Action Functions –Collection of commands that perform an action or return a value –Include a function name –Include a set of commands that run when function is called –Some require parameters

30. XP Tutorial 1New Perspectives on JavaScript, Comprehensive30 Creating a Function to Perform an Action Syntax of a JavaScript function function function_name(parameters){ JavaScript commands } Calling a function function_name(parameter values)

31. XP Tutorial 1New Perspectives on JavaScript, Comprehensive31 Functions and Variable Scope Variable scope –Indicates where and how the variable can be used in your application –Can be local or global

32. XP Tutorial 1New Perspectives on JavaScript, Comprehensive32 Functions and Variable Scope Local scope –Variable created within a JavaScript function Global scope –Variables not declared within functions

33. XP Tutorial 1New Perspectives on JavaScript, Comprehensive33 Creating a Function to Return a Value For a function to return a value –It must include a return statement Syntax of a function that returns a value function function_name(parameters) { JavaScript commands return value; }

34. XP Tutorial 1New Perspectives on JavaScript, Comprehensive34 Accessing an External JavaScript File Common practice to –Create libraries of functions located in external files Script elements that point to external files are –Placed in a document’s head section Extension “.js” –Used by external files containing JavaScript commands and functions

35. XP Tutorial 1New Perspectives on JavaScript, Comprehensive35 Using an External Script

36. XP Tutorial 1New Perspectives on JavaScript, Comprehensive36 Commenting JavaScript Code Comments –Explain what your programs are designed to do and how they work Multiline comment /* The showEM() function displays a link to the user’s e-mail address. The username and e-mail server name are entered in reverse order */

37. XP Tutorial 1New Perspectives on JavaScript, Comprehensive37 Using Comments to Hide JavaScript Code Syntax for hiding script <!-- Hide from non-JavaScript browsers JavaScript commands // Stop hiding from older browsers -->

38. XP Tutorial 1New Perspectives on JavaScript, Comprehensive38 Debugging Your JavaScript Programs Load-time error –Occurs when script is first loaded by JavaScript interpreter Run-time error –Occurs after script has been successfully loaded and is being executed Logical errors –Free from syntax and structural mistakes, but result in incorrect results

39. XP Tutorial 1New Perspectives on JavaScript, Comprehensive39 Displaying a Logical Error

40. XP Tutorial 1New Perspectives on JavaScript, Comprehensive40 Common Mistakes Debugging –Process of searching code to locate a source of trouble Common errors –Misspelling a variable name –Mismatched parentheses or braces –Mismatched quotes –Missing quotes

41. XP Tutorial 1New Perspectives on JavaScript, Comprehensive41 Debugging Tools and Techniques Writing modular code –Breaking up a program’s different tasks into smaller, more manageable chunks Alert dialog box –Dialog box generated by JavaScript that displays a text message with an OK button Microsoft Script Debugger –Can help to create and debug JavaScript programs

42. XP Tutorial 1New Perspectives on JavaScript, Comprehensive42 Microsoft Debugger Window

43. XP Tutorial 1New Perspectives on JavaScript, Comprehensive43 Tips for Writing Good JavaScript Code Apply layout techniques to make code more readable Use descriptive variable names Be consistent in how you apply uppercase and lowercase letters to your variable names Add comments to your code

44. XP Tutorial 1New Perspectives on JavaScript, Comprehensive44 Tips for Writing Good JavaScript Code Create customized functions Break up long and complicated functions into smaller functions Use the debugging tools available In case of a logical error, use alert boxes