1. Код Бааз Цөм Функцын хамаарал DOM Events Ajax Animations Хэрэглэгчийн интерфайс widgets

2. Цөм Функцын хамаарал Динамик “Ajax” веб сайт хийхэд шаардагдана: “DOM (Traversal and Manipulation)” Үзэгдэл “Ajax” “Animations”

3. DOM “Traversal” CSS сонгогчыг ашиглан элементийн байршлыг тодорхойлох Өөрчлөлт Элементийг өөрчлөх, устгах, үүсгэх “DOM builder”-тэй байх нь чухал

4. DOM Traversal Prototype, Mootools: $$(“table > tr”) jQuery: $(“div > p:nth-child(odd)”) Dojo: dojo.query(“table tr:nth-child(even)”) Yahoo UI: Y.get('div p')

5. DOM өөрчлөх Prototype: $(“list”).insert(“<li>Another item</li>”); jQuery: $(“#li”).append(“<li>An item</li>”); Mootools: $(“li”).append(new Element(“li”,{html:“Anitem”}));

6. DOM Manipulation Dojo: dojo.query(“#li”).addContent(“<li>An item</li>”); Yahoo UI: Y.get(“#li”).appendChild( Y.create(“<li>Anitem</li>”));

7. Үзэгдэл Энгийн үзэгдэл барих, арилгахыг дэмжинэ Хэрэглэгчийн үзэгдлийг дэмжих нь чухал • Prototype: $$(“#button”).invoke(“observe”, ”click”,function(){ alert(“Thanks for the click!”); }); • jQuery: $(“div”).click(function(){ alert(“div clicked”); });

8. Үзэгдэл (үргэлжлэл.) Yahoo UI: Y.get(“#list”).on(“click”, function(){ alert(“List Clicked”); }); Dojo: dojo.query("#mylink").connect("click", function(){ alert(“Link clicked”); }); Mootools: $$("#mylink").addEvent("click", function(){ alert(“Link clicked”); });

9. Ajax Алсын баримт бичигт хүсэлт илгээх ба хандана Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $$(‘#results’).invoke(“update”,( res.responseText ); } }); jQuery: jQuery.get(“test.html”, function(html){ $(“#results”).html( html ); });

10. Ajax (үргэлжлэл.) Yahoo UI Y.on(“io:complete”, function(id, data){ Y.get(“#results”).set(“innerHTML”, data.responseText); }); Y.io(“test.html”); Dojo dojo.xhrGet({ url: "test.html", load: function(type, data) { dojo.query(“#results”).empty().addContent( data ); } });

11. Ajax (үргэлжлэл.) Mootools: new Request.HTML({ onComplete: function(t, e, html){ $$(“#results”).html( html ); } }).get('myPage.html');

12. Ajax (үргэлжлэл.) jQueryбаMootools нь XML-ээр DOM-ийг дамжуулах чадвартай байдаг • jQuery.get(“test.xml”, function(xml){ $(“user”, xml).each(function(){ $(“<li/>”).text( $(this).text() ) .appendTo(“#userlist”); }); });

13. “Animations” Энгийн animations(нуух, харуулах) Ойлгомжтой энгийн шилжэлтээр хангах Prototype, Scriptaculous– ийг хэрэглэн: $(‘menu’).appear({duration: 0.6}); jQuery: $(“#menu”).animate({opacity: 1}, 600);

14. “Animations” (үргэлжлэл.) Yahoo UI: new Y.Anim({ node: “#list”, duration: 600, { to: {opacity: 1}}}).run(); Dojo: dojo.query(“#list”).anim({opacity: 1}, 600); Mootools: new Fx.Tween(“list”, {duration: 600}).start(“opacity”, 0, 1);

15. Гол онцлог шинжүүдийн товчлол

16. Хэрэглэгчийн интерфэйс “widget” Бүрэлдэхүүн хэсгүүдийг гүйцэтгэхэд хэцүү, хийхэд хялбар Нийтлэг хэрэглэгддэг, хуулбар хадгалдаг Some common components: Drag & Drop, Tree, Grid, Modal Dialog, Tabbed Pane, Menu / Toolbar, Datepicker, Slider

17. Хэрэглэгчийн интерфэйс багцууд Зөвхөн албан ёсны дэмжигддэг кодууд Prototype нь “Scriptaculous”-тай jQueryнь “jQuery UI”-тай Dojo has “Dijit”-тай Mootoolsнь зарим Цөмтэй Yahoo UI-д багтдаг