1. 1302383 Web Programming Java Script & jQuery Web Programming

2. Course Content Java Script Basic Java Script Framework JQuery – Core – Selector – Attributes – Traversing – Events – Effects – JQueryUI Web Programming 03 - 2/32

3. :Java Script Basic  Generate HTML Dynamically  User Events  Syntax  Function  Object & Class  Class Methods Web Programming 03 - 3/32

4. ::Generate HTML Dynamically Use the tag (also use the type attribute to define the scripting language)...... Web Programming 03 - 4/32

5. ::Referencing External JavaScript Scripts can be provided locally or remotely accessible JavaScript file using src attribute <script language="JavaScript" type="text/javascript” src="http://somesite/myOwnJavaScript.js"> <script language="JavaScript" type="text/javascript" src="myOwnSubdirectory/myOwn2ndJavaScript.js"> Web Programming 03 - 5/32

6. ::Syntax JavaScript is dynamically typed language. var answer = 42 answer = “Thanks for all the fish…” x = "The answer is " + 42 // returns "The answer is 42" y = 42 + " is the answer" // returns "42 is the answer" "37" - 7 // returns 30 "37" + 7 // returns 377 Web Programming 03 - 6/32

7. ::Function  You can call myfunction() or myfunction(20) function myfunction(value){ if (value){ this.area=value; } return this.area; } Web Programming 03 - 7/32

8. ::JavaScript Popup Boxed Alert box – User will have to click "OK" to proceed – alert("sometext") Confirm box – User will have to click either "OK" or "Cancel" to proceed – confirm("sometext") Prompt box – User will have to click either "OK" or "Cancel" to proceed after entering an input value – prompt("sometext","defaultvalue") Web Programming 03 - 8/32

9. ::JavaScript Language  Conditional statement  if, if.. else, switch  Loop  for loop, while loop  try...catch  throw Web Programming 03 - 9/32

10. ::User Events onabort - Loading of an image is interrupted onblur - An element loses focus onchange - The content of a field changes onclick - Mouse clicks an object ondblclick - Mouse double-clicks an object onerror - An error occurs when loading a document or an image onfocus - An element gets focus onkeydown - A keyboard key is pressed Web Programming 03 - 10/32

11. :::User Events onkeypress - A keyboard key is pressed or held down onkeyup - A keyboard key is released onload - A page or an image is finished loading onmousedown - A mouse button is pressed onmousemove - The mouse is moved onmouseout - The mouse is moved off an element onmouseover - The mouse is moved over an element onmouseup - A mouse button is released Web Programming 03 - 11/32

12. :::User Events  onreset - The reset button is clicked  onresize - A window or frame is resized  onselect - Text is selected  onsubmit - The submit button is clicked  onunload - The user exits the page Web Programming 03 - 12/32

13. ::::Example: onblur function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } Enter your name: Web Programming 03 - 13/32

14. ::Creating a Regular Expression  Using an object initializer, as follows: re = /ab+c/  Calling the constructor function of the RegExp object, as follows: re = new RegExp("ab+c") Web Programming 03 - 14/32

15. ::Example REGExp validate() function validate(obj){ var str = obj.value; myRe=/08-\d{4}-\d{4}/; var result = myRe.test(str); if(result){ obj.focus(); } Web Programming 03 - 15/32

16. ::Object & Class function Person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.tellYourage=function(){ alert(“This age is ” + this.age); } Web Programming 03 - 16/32

17. :Java Script Framework jQuery : Lightweight and popular ExtJS: Rich and Comercial DoJo : Reusable in many Framework jMaki : JAVA and PHP support (Widget style) GWT :Google YUI : Yahoo Prototype mooTools Web Programming 03 - 17/32

18. :JQuery  http://jquery.com http://jquery.com  Focus on the interaction between JavaScript and HTML  (Almost) every operation boils down to:  Find some stuff  Do something to it Web Programming 03 - 18/32

19. ::Only one function!  Absolutely everything starts with a call to the jQuery() function  Since it’s called so often, the $ variable it set up as an alias to jQuery  if you’re also using another library you can revert to the previous $ function with jQuery.noConflict(); Web Programming 03 - 19/32

20. :::Hello jQuery // we will add our javascript code here Link Web Programming 03 - 20/32

21. ::First jQuery function $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); Web Programming 03 - 21/32

22. ::Core  each(callback)  length  eq(position)  get()  get(index)  index(subject) Web Programming 03 - 22/32

23. ::Selector (Basics) Web Programming 03 - 23/32 SelectorUse for #idMatches a single element with the given id attribute. elementMatches all elements with the given name..classMatches all elements with the given class. *Matches all elements. selector1,sel ector2, selectorN Matches the combined results of all the specified selectors.

24. ::Selector (Hierarchy) Web Programming 03 - 24/32 SelectorUse for ancestor descendantMatches all descendant elements specified by "descendant" of elements specified by "ancestor". parent > childMatches all child elements specified by "child" of elements specified by "parent". prev + nextMatches all next elements specified by "next" that are next to elements specified by "prev". prev ~ siblingsMatches all sibling elements after the "prev" element that match the filtering "siblings" selector.

25. ::Selector (Filters) Web Programming 03 - 25/32 SelectorUse for :firstMatches the first selected element. :lastMatches the last selected element. :not(selector)Filters out all elements matching the given selector. :evenMatches even elements, zero-indexed. :oddMatches odd elements, zero-indexed. :eq(index)Matches a single element by its index. :gt(index)Matches all elements with an index above the given one. :lt(index)Matches all elements with an index below the given one. :headerMatches all elements headers, like h1, h2, h3 and so on. :animatedMatches all elements that are currently being animated.

26. Selector  See others selector at http://docs.jquery.com/Selectors http://docs.jquery.com/Selectors  Content filters  Visibility filters  Attribute Filters  Child filters  Forms  Form Filter Web Programming 03 - 26/32

27. ::Attributes Web Programming 03 - 27/32 AttrUse for attr(name)Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned. Attributes include title, alt, src, href, width, style, etc. attr(properties)Set a key/value object as properties to all matched elements. attr(key,value)Set a single property to a value, on all matched elements. attr(key,fn)Set a single property to a computed value, on all matched elements. removeAttr(name ) Remove an attribute from each of the matched elements.

28. Q & A Web Programming