1. 1 Other Java Related Technologies

2. 2 HTML DOM

3. 3 HTML DOM مجموعه ای استاندارد از اشیاء را برای HTML تعریف می کند و یک راه استاندارد برای دسترسی و دستکاری سندهای HTML است. DOM به تمام عناصر HTML به همراه متن داخل آنها و خاصیت های آنها دسترسی دارد. می توان محتوی را حذف کرد یا تغییر داد و عناصر جدیدی به سند اضافه کرد. می توان از DOM به همراه هر زبان برنامه نویسی مثل Java ، JavaScript و VBScript استفاده کرد.

4. 4 اشیاء HTML DOM Anchor object Document object Event object Form and Form Input object Frame, Frameset, and IFrame objects Image object Location object Navigator object Option and Select objects Screen object Table, TableHeader, TableRow, TableData objects Window object

5. 5 Document Object: Write text to the output document.write("Hello World!")

6. 6 Document Object: Use getElementById() function getElement() { var x=document.getElementById("myHeader") alert("I am a " + x.tagName + " element") } Click to see what element I am! view page

7. 7 Document Object: Use getElementsByName() function getElements() { var x=document.getElementsByName("myInput") alert(x.length + " elements!") } <input type="button" onclick="getElements()" value="How many elements named 'myInput'?"> view page

8. 8 Document Object: Return the innerHTML of the first anchor in a document First anchor Second anchor Third anchor InnerHTML of the first anchor in this document: document.write(document.anchors[0].innerHTML) view page

9. 9 Document Object: Access an item in a collection Your name: Your car: To access an item in a collection you can either use the number or the name of the item: document.write(" The first form's name is: " + document.forms[0].name + " ") document.write(" The first form's name is: " + document.getElementById("Form1").name + " ") view page

10. 10 Event Object: What are the coordinates of the cursor? function show_coords(event) { x=event.clientX y=event.clientY alert("X coords: " + x + ", Y coords: " + y) } Click in the document. An alert box will alert the x and y coordinates of the cursor. view page

11. 11 Event Object: What is the unicode of the key pressed? function whichButton(event) { alert(event.keyCode) } Note: Make sure the right frame has focus when trying this example! Press a key on your keyboard. An alert box will alert the unicode of the key pressed. view page

12. 12 Event Object: Which event type occurred? function whichType(event) { alert(event.type) } Click on the document. An alert box will alert which type of event occurred. view page

13. 13 JQuery

14. What is jQuery? یک کتابخانه از توابع JavaScript خصوصیات انتخاب و دستکاری HTML دستکاری CSS متحرک سازی JavaScript پیمایش و اصلاحHTML DOM AJAX

15. Fun with jQuery Hello, jQuery! Say Ouch $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); Example 1: A Closer Look view page

16. How jQuery Works jQuery عناصر HTML را انتخاب می کند و روی آنها عمل انجام می دهد. $(selector).action() علامت $ مشخص کننده ی jQuery است. از (selector) برای پیدا کردن عناصر HTML استفاده می شود. سپس یکaction() روی عناصر انتخاب شده انجام می شود.

17. jQuery Selectors

18. Example 2 Fun with jQuery Hello, jQuery! $("h2").click(function(){ $(this).hide("slow"); }); hello world Second header view page

19. Example 3 Fun with jQuery p.blue {color:blue} Hello, jQuery! Hide Blue $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); First blue paragraph A simple paragraph Second blue paragraph view page

20. jQuery Events

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

22. Example 4, 5 22 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! change color $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); Lemon drops biscuit chocolate... $("# lemon ").mouseover (function(){ $("#lemon").append(" Cookie! "); }); view page

23. Example 6 23 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! check color $("#btnColorCheck").click(function(){alert($("#lemon").css("color")); }); Lemon drops biscuit chocolate... view page

24. Example 7 24 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! Lemon drops biscuit chocolate... $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); view page

25. jQuery Effects

26. Example 8 26 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! Toggle $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); Lemon drops biscuit chocolate... view page

27. Example 9 27 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! Fade $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); Lemon drops biscuit chocolate... view page

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

29. Example 10 29 Fun with jQuery.blue {color:blue}.red {color:red} Hello, jQuery! Replace $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice ream tootsie roll donut..."); }); Lemon drops biscuit chocolate... view page