Java Script & Jquery

Transcript Java Script & Jquery

1302383
Web
Programming
Java Script & jQuery
Web Programming
03 - 2/32
Course Content
•
•
•
Java Script Basic
Java Script Framework
JQuery
–
–
–
–
–
–
–
Core
Selector
Attributes
Traversing
Events
Effects
JQueryUI
Web Programming
03 - 3/32
:Java Script Basic
 Generate
HTML Dynamically
 User Events
 Syntax
 Function
 Object & Class
 Class Methods
Web Programming
03 - 4/32
::Generate HTML Dynamically
Use the <script> tag (also use the type attribute to define the
scripting language)
<html>
<head>
<script type="text/javascript">
...
</script>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
Web Programming
03 - 5/32
::Referencing External
JavaScript
Scripts can be provided locally or remotely
accessible 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 - 6/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
03 - 7/32
::Function
 You
can call myfunction() or
myfunction(20)
function myfunction(value){
if (value){
this.area=value;
} return this.area;
}
Web Programming
03 - 8/32
::JavaScript Popup Boxed
•
Alert box
–
–
•
Confirm box
–
–
•
User will have to click "OK" to proceed
alert("sometext")
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 - 9/32
::JavaScript Language
 Conditional

statement
if, if.. else, switch
 Loop

for loop, while loop
 try...catch
 throw
Web Programming
03 - 10/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 - 11/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 - 12/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 - 13/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 - 14/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 - 15/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 - 16/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
03 - 17/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 - 18/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 - 19/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 - 20/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>

</body>
</html>
Web Programming
03 - 21/32
::First jQuery function
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
Web Programming
03 - 22/32
::Core
 each(callback)
 length
 eq(position)
 get()
 get(index)
 index(subject)
Web Programming
03 - 23/32
::Selector
Selector
Use for (Basics)
#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,sel Matches the combined results of all the specified
selectors.
ector2,
selectorN
Web Programming
03 - 24/32
::Selector (Hierarchy)
Selector
Use for
ancestor 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.
Web Programming
03 - 25/32
Selector
Use for(Filters)
::Selector
: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.
Web Programming
:header
Matches all elements headers, like h1, h2, h3 and
so on.
03 - 26/32
Selector
 See
others selector at
http://docs.jquery.com/Selectors






Content filters
Visibility filters
Attribute Filters
Child filters
Forms
Form Filter
Web Programming
03 - 27/32
Attr
Use for
::Attributes
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.
Remove an attribute from each of the
Webmatched
Programming
removeAttr(name elements.
)
Q&A
Web Programming

Java Script & Jquery

Transcript Java Script & Jquery

Directory