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

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

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

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

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

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

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

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

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);

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

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

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); // -->

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: 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