1302383 web programming java script & jquery web programming
DESCRIPTION
:Java Script Basic Generate HTML Dynamically User Events Syntax Function Object & Class Class Methods Web Programming /32TRANSCRIPT
1302383Web Programming
Java Script & jQuery
Web Programming
Course Content• Java Script Basic• Java Script Framework• JQuery
– Core– Selector– Attributes– Traversing– Events– Effects– JQueryUI
Web Programming
03 - 2/32
:Java Script Basic Generate HTML Dynamically User Events Syntax Function Object & Class Class Methods
Web Programming
03 - 3/32
::Generate HTML DynamicallyUse the <script> tag (also use the type attribute to define thescripting language)<html><head><script type="text/javascript">...</script></head><body><script type="text/javascript">...</script></body></html>
Web Programming
03 - 4/32
::Referencing External JavaScriptScripts can be provided locally or remotelyaccessible JavaScript file using src attribute<html><head><script language="JavaScript" type="text/javascript”
src="http://somesite/myOwnJavaScript.js"></script><script language="JavaScript" type="text/javascript"
src="myOwnSubdirectory/myOwn2ndJavaScript.js"></script>
Web Programming
03 - 5/32
::Syntax• JavaScript is dynamically typed
language.var answer = 42answer = “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
::Function You can call myfunction() or
myfunction(20)
function myfunction(value){ if (value){ this.area=value; } return this.area;
}Web Programming
03 - 7/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
03 - 8/32
::JavaScript Language Conditional statement
if, if.. else, switch Loop
for loop, while loop try...catch throw
Web Programming
03 - 9/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
03 - 10/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
03 - 11/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
03 - 12/32
::::Example: onblur<html><head><script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() }</script></head><body>Enter your name:<input type="text" id="fname" onblur="upperCase()"></body></html>
Web Programming
03 - 13/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
03 - 14/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
03 - 15/32
::Object & Classfunction
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
: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
:JQuery 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
::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
:::Hello jQuery<html> <head> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> // we will add our javascript code here </script> </head> <body> <a href="">Link</a> <!-- we will add our HTML content here -->
</body> </html>
Web Programming
03 - 20/32
::First jQuery function $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
Web Programming
03 - 21/32
::Core each(callback) length eq(position) get() get(index) index(subject)
Web Programming
03 - 22/32
::Selector (Basics)
Web Programming
03 - 23/32
Selector
Use for
#id Matches a single element with the given id attribute.
element Matches all elements with the given name.
.class Matches all elements with the given class.
* Matches all elements.
selector1,selector2,selectorN
Matches the combined results of all the specified selectors.
::Selector (Hierarchy)
Web Programming
03 - 24/32
Selector Use forancestor descendant Matches all descendant elements
specified by "descendant" of elements specified by "ancestor".
parent > child Matches all child elements specified by "child" of elements specified by "parent".
prev + next Matches all next elements specified by "next" that are next to elements specified by "prev".
prev ~ siblings Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
::Selector (Filters)
Web Programming
03 - 25/32
Selector Use for:first Matches the first selected element. :last Matches the last selected element. :not(selector)
Filters out all elements matching the given selector.
:even Matches even elements, zero-indexed. :odd Matches 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. :header Matches all elements headers, like h1, h2, h3
and so on. :animated Matches all elements that are currently being
animated.
Selector See others selector at
http://docs.jquery.com/Selectors Content filters Visibility filters Attribute Filters Child filters Forms Form Filter
Web Programming
03 - 26/32
::Attributes
Web Programming
03 - 27/32
Attr Use forattr(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