Download
dynamic html n.
Skip this Video
Loading SlideShow in 5 Seconds..
Dynamic HTML PowerPoint Presentation
Download Presentation
Dynamic HTML

Dynamic HTML

180 Vues Download Presentation
Télécharger la présentation

Dynamic HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Dynamic HTML

  2. Dynamic HTML • A combination of technologies to create dynamic web pages • xhtml • CSS • Javascript • Browsers make the page that is being displayed, its style properties, and events accessible to JavaScript.

  3. The DOM • A platform- and language-neutral interface that allows programs andscriptsto dynamically access andupdatethecontentandstructure of HTML and XHTML documents • every element in the HTML document is represented by an object • Elements can be manipulated using the properties and methods of the corresponding objects • Changes in the element properties are immediately reflected by the browser

  4. The DOM

  5. DOM Standards • W3C www.w3.orgdefines the standards • DOM Level 3 recommendation • www.w3.org/TR/DOM-Level-3-Core/ • DOM Level 2 HTML Specification • www.w3.org/TR/DOM-Level-2-HTML/ • additional DOM functionality specific to HTML, in particular objects for XHTML elements • But, thedevelopers of web browsers • don't implement all standards • implement some standards differently • implement some additionalfeatures

  6. Accessing HTML Elements • All HTML elements (objects) are accessed through the document object • document itself is automatically created • Several ways to access a specific element • paths in the DOM tree • retrieval by tag • retrieval by ID

  7. Accessing Elements by Tags function execute() { var spans = document.getElementsByTagName("span"); spans[0].style.color="red"; spans[1].style.color="blue"; spans[1].style.fontVariant="small-caps"; } head <p>This <span>example</span> is lovely.</p> <p>But <span>this one</span>is even more!</p> body

  8. Accessing Elements by ID function execute() { var theDiv = document.getElementById("div1"); if(theDiv.style.visibility=="hidden") {theDiv.style.visibility="visible" } else {theDiv.style.visibility="hidden" } } head <div id="div1"> This text can be hidden!</div> body This technique is more stable w.r.t. document changes (why?)

  9. Element Properties • Elements of different types have different sets of properties and methods • See www.w3schools.com/htmldom/ for a detailed list of element properties and methods • Most elements have the style member • style is an object that represents the style-sheet rules applied over the element

  10. Other Node Properties • nodeType property • ELEMENT_NODE: HTML element • TEXT_NODE: text within a parent element • ATTRIBUTE_NODE: an attribute of a parent element • attributes can be accessed another way • CDATA_SECTION_NODE • CDATA sections are good for unformatted text • nodeName property • nodeValue property • attributes property • innerHTML property • not standard, but implemented in major browsers • very useful • style property • object whose properties are all style attributes, e.g., those defied in CSS

  11. The innerHTML Property • The attribute innerHTML attribute of an element is the HTML code embedded inside that element • Hence, you can replace existing content by setting this attribute: • element.innerHTML = "new HTML code” functionreplace(button){ d = document.getElementById("d1"); d.innerHTML ="<h1>This is a header<\/h1>"; button.disabled=true; }

  12. Special DOM Objects • window • the browser window • new popup windows can be opened • document • the current web page inside the window • body • <body> element of the document • history • sites that the user visited • makes it possible to go back and forth using scripts • location • URL of the document • setting it goes to another page

  13. Events

  14. Event Example <html> <head> <title>Simple Events</title> <script type="text/javascript"> functionfocusInput(){ vartheInput = document.getElementsByTagName("input")[0] theInput.style.background="yellow"} functionblurInput(){ theInput = document.getElementsByTagName("input")[0] theInput.style.background="white" } </script> </head>

  15. Event Example (cont) <body> <p> <imgsrc="lighton.gif" alt="light bulb" onmouseover="alert('Mouse Over')"/> </p> <p> <input type="text"onfocus="focusInput()" onblur="blurInput()"/> </p> </body> </html>

  16. Event Model • Events usually occur due to users actions • For example, pressing the keyboard, changing a text field, moving the mouse over an element, etc. • An event is represented by an event objectthat is created upon the event occurrence • Every event has an associatedtarget element • For example, the image over which the mouse clicks

  17. Event Model (cont) • Elements can have registeredevent listenerswhich are associated with certain types of events • When an event takes place, the listeners that are registered for this event are invoked • Typically, a listener is described by a scripting code (e.g., JavaScript) • This code is executed upon listener invocation

  18. Inline Listener Registration • The simplest (and most common) way to register a listener is by an attribute assignment: ontype= "JavaScript code" • For example: <img src="img.gif" onmouseover="alert('!')"/> • The JavaScript code has access to the following objects: • this - the element (e.g., the image defined above) • event - the event object

  19. Some Event Types load unload abort click dblclick mousedown mousemove mouseup mouseover reset select submit keydown keypress keyup change blur focus

  20. Another Example <html> <head><title>Event Object Example</title> <script type="text/javascript"> function execute(e) { alert(" x: " + e.clientX + ", y: " + e.clientY + " mouse button: " + e.button); } </script></head> <body onmousedown="execute(event)" style="cursor: pointer; position:absolute; width:100%; height:100%"></body> </html>

  21. JQuery

  22. JQuery • Open source library for manipulating the DOM • JQuery object has functions for • Selecting DOM elements • Manipulating DOM elements • Event handling • Effects and Animations • AJAX • Utilities • Simple way into dynamic HTML

  23. jQuery Object • jQuery • Most often seen as $ • $ is a legal identifier in JavaScript • Better, cleaner to use jQuery • Can be used as a function and as an object • JQuery function is used to select DOM elements • jQuery object is used for utility functions • Includes a way to define a function that will run when the page is fully loaded

  24. jQuery document ready • Function that is called when page is loaded • jQuery(document).ready(function() { // Javascript }); • Can be placed anywhere

  25. <html> <head> <title>jQuery Hello World</title> <script src="/libs/jquery.js"></script> <script> function tryMe() { jQuery("#buttondiv").html("You pushed my button"); } </script> </head> <body> <script> $(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery"); }); </script> This is Hello World by HTML <button id="mybutton" onclick="tryMe();">Try Me</button> <div id="msgid"></div> <div id="buttondiv"></div> </body> </html>

  26. jQuery Selector • Select DOM elements by • HTML element tag jQuery(“p”) • HTML element class jQuery(“.class”) • HTML element id jQuery(“#id”) • More advanced selectors • Selector returns the elements as a JavaScript object • Methods for manipulating the elements

  27. jQuery Selector • $(selector) • selector: • $(‘#id’) id of element • $(‘p’) tag name • $(‘.class’) CSS class • $(‘p.class’) <p> elements having the CSS class • $(‘p:first’) $(‘p:last’) $(‘p:odd’) $(‘p:even’) • $(‘p:eq(2)’) gets the 2nd <p> element (1 based) • $(‘p’)[1] gets the 2nd <p> element (0 based) • $(‘p:nth-child(3)) gets the 3rd <p> element of the parent. n=even, odd too. • $(‘p:nth-child(5n+1)’) gets the 1st element after every 5th one • $(‘p a’) <a> elements, descended from a <p> • $(‘p>a’) <a> elements, direct child of a <p> • $(‘p+a’) <a> elements, directly following a <p> • $(‘p, a’) <p> and <a> elements • $(‘li:has(ul)’) <li> elements that have at least one <ul> descendent • $(‘:not(p)’) all elements but <p> elements • $(‘p:hidden’) only <p> elements that are hidden • $(‘p:empty’) <p> elements that have no child elements

  28. Useful jQuery Functions • .each() iterate over the set • .size() number of elements in set • .end() reverts to the previous set • .get(n) get just the nth element (0 based) • .eq(n) get just the nth element (0 based) also .lt(n) & .gt(n) • .slice(n,m) gets only nth to (m-1)th elements • .not(‘p’) don’t include ‘p’ elements in set • .add(‘p’) add <p> elements to set • .remove() removes all the elements from the page DOM • .empty() removes the contents of all the elements • .filter(fn/sel) selects elements where the func returns true or sel • .find(selector) selects elements meeting the selector criteria • .parent() returns the parent of each element in set • .children() returns all the children of each element in set • .next() gets next element of each element in set • .prev() gets previous element of each element in set • .siblings() gets all the siblings of the current element

  29. Other Functions • Formatting Functions • .css(property, value) • .html() • .val() (form elements) • .text() • .addClass(‘class’) • .removeClass(‘class’) • Adding Elements • $(‘#target’).before(‘<p>Inserted before #target</p>’); • $(‘#target’).after(‘<p>This is added after #target</p>’); • $(‘#target’).append(‘<p>Goes inside #target, at end</p>’); • $(‘#target’).wrap(‘<div></div>’);

  30. Example 1 • Compare the following: What are the advantages of the jQuery method? $("a").click(function(){ alert("You clicked a link!"); }); • <a href="#" onclick="alert(‘You clicked a link!')">Link</a>

  31. Example 2 <script> $("h2").click(function(){ $(this).hide("slow"); }); </script> What will this do? What happens if you have more than one h2? Try it!

  32. Example 3 Hide all blue paragraphs when btnHideBlue is clicked <script> $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); </script> <button id='btnHideBlue'>Hide Blue</button>

  33. jQuery Events For a full jQuery event reference, please see jQuery Events Reference

  34. Example 4 Append text to paragraph lemon on mouseover <script> $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); </script> <p id='lemon'>Lemon drops biscuit chocolate…</p>

  35. Manipulating CSS For a full jQuery CSS reference, please see jQuery CSS Methods Reference • For more on the css function, see http://api.jquery.com/css/

  36. Example 5 Change color of paragraph lemon when btnColor is clicked <script> $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); </script> <style type="text/css"> .red{ color:red; } .blue{ color:blue; } </style>

  37. Example 6 • <script> • $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); • }); • </script> What color is the paragraph? Display the color of the paragraph lemon when btnColorCheck is clicked.

  38. Example 7 Highlight (background-color = yellow) any paragraph that is double-clicked <script> $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); </script>

  39. jQuery Effects

  40. Example 8 Create a toggle button that shows/hides paragraph lemon. <script> $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); </script>

  41. Example 9 <script> $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); </script> Fade paragraph lemon to 50% opacity when btnFade is clicked.

  42. Manipulating HTML For a full jQuery HTML reference, please see jQuery HTML Methods Reference

  43. Example 10 <script> $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); </script> Replace text in paragraph lemon when btnReplace is clicked.