1. Adding Javascript How to include javascript in a webpage

2. Inline Javascript <!-- function helloworld() { window.alert("hello world"); } //-->...

3. Got JavaScript? Use to place an alternate message to users without javascript SOME users purposely disable javascript SOME users have special browsers that do not support javascript

4. Creating a JavaScript Source File Incorporated directly into an HTML file Using the same tag External (source) file Has file extension.js Contains ONLY JavaScript -

5. JavaScript source files src attribute of tag Cannot include HTML tags in source Browser will ignore any JavaScript statements inside and if src attribute is used

6. Advantages of JavaScript source files HTML document neater (less confusing) JavaScript can be shared Hides JavaScript code from incompatible browsers (and speeds up download) NOTE: Embedded and non-embedded(src file) code can be used on the same page

7. or ? Script statements interpreted in order of document rendering section rendered before section Good practice to place as much code as possible in section for page load speed place most code at the bottom

8. HTML Document with 2 Javascript sections document.writeln("Your order has been confirmed.");

9. Context of the variables, objects, functions ALL JAVASCRIPT SHARES THE SAME SPACE inline, external, multiple script files from different websites, html events Security risk: include external scripts and… Shared Namespace

10. DOM A hierarchy of objects, each of which provides programmatic access to a different aspect of the HTML page or the Web browser window Created automatically when a Web browser opens an HTML document Accessed by Javascript as if it was javascript

11. Window DocumentNavigatorHistoryLocationframes[] forms[] images[] anchors[] links[] embeds[] applets[] childNodes[] styleSheets[] cookie hash host hostname href pathname port protocol search Plugins[] Mime Type[] language

12. Represents a Web browser window (or frame) Top-level object in the DOM Controls the Web browser window Your namespace is inside window the window object! var x= “hello”; alert( window.x ); Window

13. PropertyDescription documentyour web page frames[]array of frames windows historyURL history for the window locationURL navigatorbrowser object parentparent frame window

14. MethodDescription alert()message box with OK button blur()move window back close()closes window confirm()message box with OK/Cancel focus()bring window to front open()make a new window pop-up prompt()message box with text input

15. alert( “message” ); Displays a pop-up dialog box with an OK button confirm( “message” ); alert + Cancel button, returns true/false Prompt( “message” ); confirm + text field, returns text or false if canceled

16. Opening and Closing Windows Pop-up ads and blockers inhibit this! Create a new window object: var w= window.open(“URL”, “name”, options); w= the new pop-up window’s object options string is a lame hack to pass parameters window.close(); //closes browser window / tab

17. Referencing windows var newWindow = window.open(“http://junk.com”); window.frames[2] (frameset page or normal page with iframe tags) Security restriction on external websites

18. aWindow = window.open( "", "tinyWindow", "toolbar=no,scrollbars=yes,width=150,height=100"); aWindow.document.write(“Here is a new window!"); aWindow.document.bgColor="lightblue"; //aWindow.document.close();

19. setTimeout() Execute code after a specific amount of time has elapsed Executes only once var ref= setTimeout(“code”, milliseconds); clearTimeout(ref);

20. setInterval( ) Repeatedly runs code every X milliseconds var ref= setInterval(“code”, milliseconds); clearInterval( ref ); Used to cancel a setInterval() method

21. function clock() { time= new Date(); var tag= document.getElementById("jClock"); tag.value= time; } window.setInterval( 'clock()', 1000); // use of window is redundant; optional.

22. All functions and methods are just variables which contain Function objects! var f = function(){alert(‘hi’);} f(); // says hi f; // says Function object f2 = f; // copies reference to function window.setInterval( clock, 1000); Function References

23. the HTML document object Represents the content of a browser’s window Ancestor (parent) for all elements contained on an HTML page window.document or just document Window DocumentNavigatorHistoryLocationframes[]

24. Writing to the page write() & writeln() methods of Document object Creates new text on a web page document.write(“hello world”); ONLY USED WHEN PAGE IS STILL LOADING! and tags sometimes useful RARELY USED- after page loads it makes a new page killing the current page!

25. Your BEST Friend getElementById(”html_id_name”); what id=”” HTML tag attribute exist for! Only ONE tag per ID! THE way to “connect” with the HTML tags Alternative old method is forbidden!!!! document.html_id_name;

26. .getElementById() Used in other XML document APIs as well … var tag= document.getElementById(“something”); Similar to clicking on a tag in a DOM Inspector tool in the browser ID attribute values pretty much follow variable naming rules. CASE SENSITIVE too

27. HTML Events how to trigger your code

28. Event Types User-generated events: e.g., mouse-click System-generated events, e.g., load event → triggered by web browser when HTML document finishes loading

29. Event “Handlers” Code that executes in response to an event Naming convention Event name with a prefix of “on” (lowercase) click -> onclick

30. HTML Tags and Events HTML TAG ≡ HTMLElement (DOM classname) SOME HTML elements can trigger javascript: Special HTML attributes exist to run javascript

31. Typical Use in HTML must return TRUE or the link is not taken! must return TRUE or the form does not submit!

32. Other Links Events Mouse Over event Occurs when the mouse moves over a link Mouse Out event Occurs when the mouse moves off a link Before CSS this was how any roll-over changes occurred! NOTE: do not capitalize event names

33. Common Trick http://fakelink.com used to hide links from user used to trick users and perform illegal activities Some browsers block it; many rarely even display the status bar anymore

34. Ok, so how to I get a Tag's Object? Review + alternatives

35. … 1) var x= document.getElementById( “some_id” ); 2) Browser execs value of onclick if clicked this this is an extremely useful technique refers to the calling/invoking object in HTML event attributes this = tag of the event function f( tag ){ alert(tag); }

36. CSS and DOM Get a good CSS reference & inspector Get a good DOM reference & inspector Too many details to memorize They change as newer DOM and CSS versions come out or browsers fix or add bugs...