Introducing JavaScript

1. Introducing JavaScript Hiding E-Mail Addresses from Spammers New Perspectives on JavaScript, Comprehensive

2. 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 New Perspectives on JavaScript, Comprehensive

3. 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 New Perspectives on JavaScript, Comprehensive

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

5. Staff Directory at Monroe Public Library Web Page New Perspectives on JavaScript, Comprehensive

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

7. E-Mail Addresses in Staff Directory New Perspectives on JavaScript, Comprehensive

8. 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 New Perspectives on JavaScript, Comprehensive

9. 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 New Perspectives on JavaScript, Comprehensive

10. Server-Side Programming New Perspectives on JavaScript, Comprehensive

11. Client-Side Programming New Perspectives on JavaScript, Comprehensive

12. Combining Client-Side and Server-Side Programming New Perspectives on JavaScript, Comprehensive

13. 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 New Perspectives on JavaScript, Comprehensive

14. Comparing Java and JavaScript New Perspectives on JavaScript, Comprehensive

15. Versions of Java and JavaScript New Perspectives on JavaScript, Comprehensive

16. Working with the Script Element • Script element • Used to enter scripts into an HTML or XHTML file • Syntax <script type="mime-type"> script commands </script> New Perspectives on JavaScript, Comprehensive

17. Writing Output to a Web Document • Inserting cadler@mpl.gov in a Web document <script type="text/javascript"> document.write("cadler@mpl.gov"); </script> New Perspectives on JavaScript, Comprehensive

18. 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 New Perspectives on JavaScript, Comprehensive

19. 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 New Perspectives on JavaScript, Comprehensive

20. Supporting Non-JavaScript Browsers • noscript element • Used by browsers that do not support scripts • Syntax <noscript> alternative content </noscript> New Perspectives on JavaScript, Comprehensive

21. Supporting Non-JavaScript Browsers • CDATA section • Marks text as data that should not be processed by XHTML parsers • Syntax <script type="text/javascript"> <![cdata[ JavaScript code ]]> </script> New Perspectives on JavaScript, Comprehensive

22. 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 New Perspectives on JavaScript, Comprehensive

23. 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; New Perspectives on JavaScript, Comprehensive

24. 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 New Perspectives on JavaScript, Comprehensive

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

26. 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 New Perspectives on JavaScript, Comprehensive

27. 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 New Perspectives on JavaScript, Comprehensive

28. 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 New Perspectives on JavaScript, Comprehensive

29. 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 New Perspectives on JavaScript, Comprehensive

30. 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) New Perspectives on JavaScript, Comprehensive

31. Functions and Variable Scope • Variable scope • Indicates where and how the variable can be used in your application • Can be local or global New Perspectives on JavaScript, Comprehensive

32. Functions and Variable Scope • Local scope • Variable created within a JavaScript function • Global scope • Variables not declared within functions New Perspectives on JavaScript, Comprehensive

33. 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; } New Perspectives on JavaScript, Comprehensive

34. 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 New Perspectives on JavaScript, Comprehensive

35. Using an External Script New Perspectives on JavaScript, Comprehensive

36. 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 */ New Perspectives on JavaScript, Comprehensive

37. Using Comments to Hide JavaScript Code • Syntax for hiding script <script type="text/javascript"> <!-- Hide from non-JavaScript browsers JavaScript commands // Stop hiding from older browsers --> </script> New Perspectives on JavaScript, Comprehensive

38. 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 New Perspectives on JavaScript, Comprehensive

39. Displaying a Logical Error New Perspectives on JavaScript, Comprehensive

40. 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 New Perspectives on JavaScript, Comprehensive

41. 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 New Perspectives on JavaScript, Comprehensive

42. Microsoft Debugger Window New Perspectives on JavaScript, Comprehensive

43. 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 New Perspectives on JavaScript, Comprehensive

44. 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 New Perspectives on JavaScript, Comprehensive