1. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Embedding JavaScript In HTML Instructor: Joseph DiVerdi, Ph.D., MBA

2. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Example Syntax Two Parts to Most JavaScript: –Function Definitions Tell the Browser What to Do Not required –References To Those Functions Required

3. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Status Line Message No Function Required Tightly Integrated Into HTML Uses HTML Event Handler ONMOUSEOVER <A HREF=“mozart.html” ONMOUSEOVER= “window.status=‘A study of the operas of Mozart’; return true;” >Mozart Use This Code on Your Site Now –Create a new file named status.html –See the Next Two Slides

4. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Status Line Message Status Line Example Disney WWF

5. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Status Line Message Status Line Example <A HREF ="http://www.disney.com" ONMOUSEOVER="window.status='Go to the Magic Kingdom?'; return true;">Disney <A HREF="http://www.wwf.com" ONMOUSEOVER="window.status='Most Polite People on Earth'; return true;">WWF

6. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Debugging JavaScript No JavaScript Validator Exists at This Time –None is Likely for Some Time Navigator's & Explorer's implementations in Advanced Features Diverge Dignificantly –Their DOMs are Very Different Document Object Model - The API for interacting with Web Documents –Basic Features are Quite Similar –Both Browsers Provide Some Debugging

7. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Development Strategy Use Netscape Navigator to Test JavaScript Examine Status Line When Page Loads If an Error Occurs –Location Contains a Message to go to javascript: Type javascript: in Location to View Console –It is Helpful to Add javascript: to Bookmarks Create Quick Development Environment –Run HTML-Kit –Run Navigator

8. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Display Browser Identity No Function Definitions Required Goes Right into Body of HTML Document Use This Code on Your Site Now –Create a new file named browser.html –See the Next Slide

9. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Display Browser Identity Browser Identity Example You are using: document.write(navigator.appName + ' - ' + navigator.appVersion);

10. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Hiding JavaScript JavaScript code is –Completely Dependent on Browser Support If a Browser doesn’t Understand JavaScript Then the Code is Displayed as Text –The Result is Usually Rather Unpleasant The Solution is to Use HTML Comments to Encapsulate the JavaScript Code

11. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Hiding JavaScript <!-- JavaScript code goes here // --> Comment Codes Must be On Own Lines –Otherwise the JavaScript Code Itself Will Be Commented Out & Unusable Notice Closing Comment –Contains C++ Comment & HTML Comment Close

12. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Commenting Out Code Browser Identity Example You are using: <!-- document.write(navigator.appName + ' - ' + navigator.appVersion); // -->

13. Using Embedded JavaScript Fort Collins, CO Copyright © XTR Systems, LLC Browser Compatibility Browsers Have Different Internal Models –Page Element Access is Different & Incompatible Online Table of Browser JavaScript support: http://webreview.com/browsers/browsers.shtml Design Issues –For What Version(s) Does One Design? –For Certain Projects the Code is Identical –For Others You Must Create a Browser Selector And Create Two Versions of JavaScript Code More on This Later in the Course