1. JavaScript and Ajax (JavaScript Dynamic HTML (DHTML)) Week 7 Web site: http://fog.ccsf.edu/~hyip

2. What is Dynamic HTML? Dynamic HTML is a combination of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. HTML provides document structure and context for the information contained in a Web page. CSS provides the details on how to present that information. JavaScript provides the interactivity and dynamism.

3. HTML From the earliest days of the web, HTML was only meant to provide structure for a document and context for its content. This text This is a paragraph, more … item one item two item three

4. Cascading Style Sheet (CSS) CSS provides a rich selection of presentation effects that can be applied to all HTML elements, such as color, background, margins, and borders. With CSS, Web developers can set indents on paragraphs, specify a default font for an entire Web site with one line of code, use small caps, assign an image as a bullet for a list item, and accomplish many more things that are impossible with HTML alone.

5. Cascading Style Sheet (CSS) (continue…) body { background-color: white; color: black; margin: 20px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } h1 { font-weight: bold; text-align: center; color: purple; background-color: yellow; }

6. JavaScript JavaScript brings dynamism and interactivity to DHTML. Not only can it provide interactivity with event handlers, it can also modify document object properties on the fly, pop up windows, and write content dynamically. In the HTML arena, JavaScript is primarily used to modify stylesheet properties on the fly, after a Web page is loaded, to create animations and special effects.

7. DHTML – only CSS sample DHTML CSS /* CSS embed style */ h1 { color:red; text-align: center; } p { background: white; color: black; font-style: normal; font-vairant: normal; font-weight: 400; font-size: 5.6mm; letter-spacing: 2.3mm; text-decoration: none; text-transform: none; text-align: left; }

8. DHTML – only CSS sample (continue…) function changeIt() { document.getElementById("txt2").style.background = "green"; document.getElementById("txt2").style.color = "white"; document.getElementById("txt2").style.fontStyle = "italic"; document.getElementById("txt2").style.fontVariant = "small-caps"; document.getElementById("txt2").style.fontWeight = "bolder"; document.getElementById("txt2").style.fontSize = "0.5in"; document.getElementById("txt2").style.textDecoration = "underline"; document.getElementById("txt2").style.visibility = "visible"; document.getElementById("txt1").style.visibility = "hidden"; } DHTML CSS This is paragraph one with text, more text. This is paragraph two with less text.

9. Visibility sample cnit133 DHTML /* define css here */ body { background-color: #ffffff; }.picarea { text-align: center; visibility: hidden; } function showimg(id, w, h) { obj=document.getElementById(id); obj.style.visibility = "visible"; obj.width = w; obj.height = h; }

10. Visibility sample (continue…) function hideimg(id, w, h) { obj=document.getElementById(id); obj.style.visibility = "hidden"; obj.width = w; obj.height = h; } DHTML & Event handler

11. Visibility sample (continue…) Some web page information here: Now, if user agree to view terms and conditions, then will display a button to continue. If user disagree, then go back to home page. View terms and conditions | Dis-agree, Go to home page or hide the contract info Contract agreement info here: -

12. More DHTML samples See my web page http://fog.ccsf.edu/~hyip/cnit133/cnit133.htmlhttp://fog.ccsf.edu/~hyip/cnit133/cnit133.html