Java Script and Ajax Java Script Dynamic HTML












- Slides: 12

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

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

HTML • From the earliest days of the web, HTML was only meant to provide structure for a document and context for its content. <h 1>This text</h 1> <p> This is a paragraph, more … </p> <ul><li>item one</li> <li>item two</li> <li>item three</li> </ul>

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.

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

Java. Script • Java. Script 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, Java. Script is primarily used to modify stylesheet properties on the fly, after a Web page is loaded, to create animations and special effects.

DHTML – only CSS sample <html> <head><title>DHTML CSS</title> <style type="text/css"> /* CSS embed style */ h 1 { color: red; text-align: center; } p{ background: white; color: black; font-style: normal; font-vairant: normal; font-weight: 400; font-size: 5. 6 mm; letter-spacing: 2. 3 mm; text-decoration: none; text-transform: none; text-align: left; } </style>

DHTML – only CSS sample (continue…) <script language="Java. Script" type="text/javascript"> function change. It() { document. get. Element. By. Id("txt 2"). style. background = "green"; document. get. Element. By. Id("txt 2"). style. color = "white"; document. get. Element. By. Id("txt 2"). style. font. Style = "italic"; document. get. Element. By. Id("txt 2"). style. font. Variant = "small-caps"; document. get. Element. By. Id("txt 2"). style. font. Weight = "bolder"; document. get. Element. By. Id("txt 2"). style. font. Size = "0. 5 in"; document. get. Element. By. Id("txt 2"). style. text. Decoration = "underline"; document. get. Element. By. Id("txt 2"). style. visibility = "visible"; document. get. Element. By. Id("txt 1"). style. visibility = "hidden"; } </script> <body onload="document. get. Element. By. Id('txt 2'). style. visibility = 'hidden'"> <h 1>DHTML CSS</h 1> <p id="txt 1">This is paragraph one with text, more text. </p> <p id="txt 2">This is paragraph two with less text. </p> <input type="button" value="Change Text" on. Click="change. It()"> </body></html>

Visibility sample <html> <head> <title>cnit 133 DHTML</title> <style type="text/css"> /* define css here */ body { background-color: #ffffff; }. picarea { text-align: center; visibility: hidden; } </style> <script type="text/javascript"> function showimg(id, w, h) { obj=document. get. Element. By. Id(id); obj. style. visibility = "visible"; obj. width = w; obj. height = h; }

Visibility sample (continue…) function hideimg(id, w, h) { obj=document. get. Element. By. Id(id); obj. style. visibility = "hidden"; obj. width = w; obj. height = h; } </script> </head> <body> <h 1>DHTML & Event handler</h 1>

Visibility sample (continue…) <p>Some web page information here: </p> <p>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. </p> <hr /> <div style="text-align: center; "> <a href="#" on. Click="showimg('a 1', 120); showimg('a 2', 120); ">View terms and conditions</a> | <a href="#" on. Click="hideimg('a 1', 120); hideimg('a 2', 120); ">Dis-agree, Go to home page or hide the contract info</a> </div> <div class="picarea"> <p id="a 1">Contract agreement info here: - </p> <input id="a 2" type="button" value="Continue"> </div> </body> </html>

More DHTML samples • See my web page http: //fog. ccsf. edu/~hyip/cnit 133. html
Java Script Simple Java Script Java Script html
Java Script Java Script Java Script html head
Java Script Simple Java Script Java Script html
Java Script Java Script Java Script Introduction Java
Java Script 1 Java Script html head script
01 HTML 02 Java Script Java Script HTML
AJAX Asynchronous Java Script and XML AJAX An
Ajax Prof Jim Briggs WEBP Ajax 1 Ajax
ASP NET AJAX What is AJAX Ajax which
ASP NET AJAX What is AJAX Ajax which
Java Script and Ajax Java Script Arrays Week
Java Script and Ajax Java Script Events Week