Web Development & Design Foundations with XHTML

1. Web Development & Design Foundations with XHTML Chapter 14Key Concepts

2. Learning Outcomes • In this chapter, you will learn how to: • Describe common uses of JavaScript in Web pages. • Describe the purpose of the Document Object Model and list some common events. • Create a simple JavaScript using the <script> element and the alert() method. • Describe the considerations for XHTML conformance and JavaScript. • Use variables, operators and the if control structure. • Create a basic form validation script.

3. What isJavaScript? • Object-based scripting language • Works with the objects associated with a Web page document • the window • the document • the elements • such as forms, images, hyperlinks, etc

4. What isJavaScript? • Originally developed by Netscape • Named LiveScript • Netscape & Sun Microsystems Collaboration • LiveScript renamed JavaScript • JavaScript is NOT Java

5. Common Usesof JavaScript • Display a message box • Select list navigation • Edit and validate form information • Create a new window with a specified size and screen position • Image Rollovers • Status Messages • Display Current Date • Calculations

6. CodingJavaScript • JavaScript statements can be coded on a Web page using two different techniques: • Place JavaScript code between <script> tags • Place JavaScript code as part of an event attached to an XHTML element

7. JavaScriptUsing <script> Elements • The script element • A container tag • May be placed in either the head or the body section of a Web page • Character Data declaration for XHTML-strict conformance • Use XHTML comment to hide JavaScript from old browsers. <script language="JavaScript" type="text/javascript"> <!- - <![CDATA[ // JavaScript code goes here // ]]> - -> </script>

8. Checkpoint 14.1 • Describe two uses of JavaScript. • Describe XHTML tag used to add JavaScript to a Web page. • True or False. JavaScript is the same as Java.

9. Document Object Model(DOM) • A portion of the DOM is shown at the left. • Defines every object and element on a web page • Hierarchical structure • Accesses page elements and apply styles to page elements

10. Object • An object is a thing or entity. • Browser window is an object • Web page document is an object • Some actions can be performed on some objects • Object window displays alert message box These actions are called methods.

11. Property • A property is a characteristic or attribute of an object. • The background color of a web page documentdocument.bgcolor • The date the web page file was last modifieddocument.lastmodified • The src file of an image object image1.src

12. Method • A method is an action (a verb) • Writing text to a web page document document.write() • Submitting a form form1.submit()

13. JavaScriptand Events • Events: actions by the Web page visitor • clicking (onclick), • placing the mouse on an element (onmouseover), • removing the mouse from an element (onmouseout), • loading the page (onload), • unloading the page (onunload), etc.

14. Events

15. JavaScriptand Events • JavaScript can be configured to perform actions when these and other events occur. • JavaScript code is added directly to the XHTML tag with the type of event as an attribute. • The value of the event attribute will contain one or more JavaScript statements. • Example: Display an alert box when the mouse is placed over a link. <a href="home.htm" onmouseover="alert('Click to go home')">Home</a>

16. JavaScript Debugging(1) • Check the syntax of the statements • Pay very close attention to upper and lower case letters, spaces, and quotations • Verify that you have saved the page with your most recent changes • Verify that you are testing the most recent version of the page (refresh or reload the page) • If you get an error message, use the error messages that are displayed by the browser

17. JavaScriptDebugging(2) • Use the Firefox or Mozilla browser: • In Firefox go to Tools > Error Console • The JavaScript Console will indicate an issue and the line number • This may not be exactly where the problem is • Sometimes the error is a one or two lines above the indicated line number.

18. Checkpoint 14.2 • With respect to objects, describe the difference between a property and a method. Feel free to use words like “thing,” “action,” “description,” “attribute,” and so forth. • What is the difference between an event and an event handler? • Where are event handlers placed in the XHTML document?

19. Variable • A variable is a placeholder for information. • The variable is stored in the computer’s memory (RAM). var userName; userName = "Karen"; document.write(userName);

20. Prompts • prompt() method • Displays a message and accepts a value from the user myName = prompt(“prompt message”); • The value typed by the user is stored in the variable myName

21. Arithmetic Operators

22. Comparison Operators

23. Decision Making if (condition) { … commands to execute if condition is true } else { … commands to execute if condition is false }

24. Only One JavaScript Statement to Execute Three Types of Buttons we Learned on Chapter 9: <input type=:”submit” /> <input type=:”reset” /> <input type=:”button” /> In this Section we will use the third type, Button and OnClick Event Handler to run a Script <input type=:”button” value=“Click to see a message” onclick=“alert(‘Welcome!’) /> We use this when we have only one JavaScript statement to execute, if we have more than one we provide a name for the statement block by creating a Function

25. Function Definition • A function is a block of one or more JavaScript statements with a specific purpose, which can be run when needed. function function_name() { ... JavaScript statements … } Typically, function definitions are placed in the <head> area of XHTML document. This loads the function code but it does not execute until it is called

26. Using Functions Defining the Function function showAlert() { alert("Please click OK to continue."); } Calling the Function showAlert();

27. Checkpoint 14.3 • What is a function definition? • Why do you call a function? • Can you call a function more than once?

28. Form Validation • It is common to use JavaScript to validate form information before submitting it to the Web server. • Is the name entered? • Is the e-mail address of correct format? • Is the phone number in the correct format? • Is the address of correct format? • When the user clicks on Form’s submit button, the submit even occurs, so we use onsubmit event handler to call a function that test form data for validation. This technique is referred to as Form Handling

29. Validating Form Fields • Use the "" or null to check to determine if a form field has information if (document.forms[0].userName.value == "" ) { alert("Name field cannot be empty."); return false; } // end if

30. JavaScript & Accessibility • Don’t expect JavaScript to always function for every visitor • Some may have JavaScript disabled • Some may be physically unable to click a mouse • Provide a way for your site to be used if JavaScript is not functioning • Plain text links • E-mail contact info

31. JavaScript Resources • Beginning JavaScript Tutorialshttp://www.pageresource.com/jscript/index.html • JavaScript Tutorial for the Total Non-Programmer http://www.webteacher.com/javascript/ • More Beginning JavaScript Tutorials http://echoecho.com/javascript.htm • Core JavaScript 1.5 Reference Manual http://www.webreference.com/javascript/reference/core_ref • The JavaScript Source http://javascript.internet.com

32. Checkpoint 14.4 • What is meant by the term “form data validation”? • Give three examples of form data that may require validation. • Should you always expect your JavaScript to “work” – why or why not?

33. Summary • This chapter introduced the use of JavaScript on Web pages. Topics included: • Common uses of JavaScript in Web pages. • The purpose of the Document Object Model • The<script> element and alert() method. • Use variables, operators and the if control structure. • Configuring functions • Validating a form