Web Programming Java Script & jQuery Web Programming

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

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

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

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

::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 /32

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

::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 /32

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

::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 /32

:::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 /32

:::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 /32

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

::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 /32

::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 /32

::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 /32

: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 /32

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

::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 /32

:::Hello jQuery // we will add our javascript code here Link Web Programming /32

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

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

::Selector (Basics) Web Programming /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.

::Selector (Hierarchy) Web Programming /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.

::Selector (Filters) Web Programming /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.

Selector  See others selector at  Content filters  Visibility filters  Attribute Filters  Child filters  Forms  Form Filter Web Programming /32

::Attributes Web Programming /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.

Q & A Web Programming