Introduction to Programming the WWW I CMSC 10100 01 Summer 2003 Lecture 11 Topics Today Introduction to DOM cont d More JavaScript examples 2 Reminder Final project released Quiz3 next Monday Class delayed to 11 30 next Monday 3 Review DOM Nodes Element nodes Each tag is an element node Text nodes Text contained by element node Attribute nodes Attribute associate with element node Attributes and text nodes are children nodes of the node containing it 4 Review DOM Nodes Example p align center How are you b john b p Element Node Level1 p Level2 text node How are you align center Attribute Node Level3 Text Node b text node john Element Node Text Node 5 Review Basic DOM Operations 1 node firstchild node parentNode node childNodes node childNodes 0 node nodeValue node setAttribute att val node style property value 6 Review Basic DOM Operations 2 document getElementById document getElementsByTagName document createElement document createNode document createTextNode node appendChild newChild node removeChild existingChild 7 Review DOM Examples Example1 Browse Nodes Example2 Update Nodes Changing node text Removing and adding nodes Using loops to change nodes 8 Example 3 Updating Node Style Change alignment color and size through JavaScript buttons Note that when CSS properties are hyphenated e g text algin JavaScript refers to them with the dash removed and the next letter capitalized e g textAlign Example Web page styleupdates html 9 Example 4 Page Writer Use JavaScript to append nodes to a page dynamically at loading time Addresses scaling issue if code is externally linked Example Web page template html 10 Working with Images Using predloading for image swapping Creating a slide show Animated banners 11 Example 1 Image Swapping preloading images Have created a crude rollever effect Changing the SRC property of img in an onMouseOver event handler Example rolloverimage html This technique is not recommended Why Create more effective rollovers by preloading image files Why it is efficient Runs in only those browsers that support the Image object Example newrolloverimage html 12 Example 2 Creating a Slide Show Preloading multiple images can be applied to creating slide shows Mouseover events are common triggers for image swapping but CLICK events work just as well Buttons or links with onclick handlers may be used to trigger image swaps Function to change images may do different things based on what parameter received next or previous Example listing5 1 html 13 Example 3 Animated Advertising Banners Banner with images that change with a schedule is one use of the setTimeout method This method allows you to schedule tasks for the Web browser to perform after a given delay A unique number for each requested task may be stored in a variable so that the task may be cancelled using the clearTimeout method Example listing5 2 html 14 Dynamic Techniques in JavaScript Sliding menus Dropdown menus Collapsible menus Dynamic clipping See DHTML CSS book chapter 5 15 Code Library Used All examples use codelibrary js What codelibrary js includes 16 Sliding Menus Get the menu out of the way to give more space for reading Need a clickable area to begin the sliding Example listing5 2 html 17 Dropdown Menus Useful for giving sub choices within a given category Need some dynamic visibility plus some positioning of divs Start with scaled down version of the book s example Example listing5 4 html 18 Some Points Note arrays of URLs created Note that hide and drop menu functions can work on any menu Go to a page uses the code window location href eval stuff Follow the string manipulations inside then evaluate it as a JavaScript value 19 Collapsible Menus Simulate hierarchical file trees Set display to none to hide menu Set display to block to show menu Enhance with text node substitution Enhance with cursor and color changes Example listing5 6 html 20 Dynamic Clipping Control visible portion of content Use the clip property of the style object Example listing5 8 html 21 Final Project http www classes cs uchicago edu classes archive 2003 summer 101001 hw project html 22