1302383 Web Programming Java Script & jQuery Web Programming.
-
Upload
malcolm-young -
Category
Documents
-
view
241 -
download
5
description
Transcript of 1302383 Web Programming Java Script & jQuery Web Programming.
![Page 1: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/1.jpg)
1302383Web Programming
Java Script & jQuery
Web Programming
![Page 2: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/2.jpg)
Course Content• Java Script Basic• Java Script Framework• JQuery
– Core– Selector– Attributes– Traversing– Events– Effects– JQueryUI
Web Programming
03 - 2/32
![Page 3: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/3.jpg)
:Java Script Basic Generate HTML Dynamically User Events Syntax Function Object & Class Class Methods
Web Programming
03 - 3/32
![Page 4: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/4.jpg)
::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
![Page 5: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/5.jpg)
::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
![Page 6: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/6.jpg)
::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
![Page 7: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/7.jpg)
::Function You can call myfunction() or
myfunction(20)
function myfunction(value){ if (value){ this.area=value; } return this.area;
}Web Programming
03 - 7/32
![Page 8: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/8.jpg)
::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
![Page 9: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/9.jpg)
::JavaScript Language Conditional statement
if, if.. else, switch Loop
for loop, while loop try...catch throw
Web Programming
03 - 9/32
![Page 10: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/10.jpg)
::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
![Page 11: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/11.jpg)
:::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
![Page 12: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/12.jpg)
:::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
![Page 13: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/13.jpg)
::::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
![Page 14: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/14.jpg)
::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
![Page 15: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/15.jpg)
::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
![Page 16: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/16.jpg)
::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
![Page 17: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/17.jpg)
: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
![Page 18: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/18.jpg)
: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
![Page 19: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/19.jpg)
::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
![Page 20: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/20.jpg)
:::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
![Page 21: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/21.jpg)
::First jQuery function $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });
Web Programming
03 - 21/32
![Page 22: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/22.jpg)
::Core each(callback) length eq(position) get() get(index) index(subject)
Web Programming
03 - 22/32
![Page 23: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/23.jpg)
::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.
![Page 24: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/24.jpg)
::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.
![Page 25: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/25.jpg)
::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.
![Page 26: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/26.jpg)
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
![Page 27: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/27.jpg)
::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.
![Page 28: 1302383 Web Programming Java Script & jQuery Web Programming.](https://reader033.fdocuments.in/reader033/viewer/2022042600/5a4d1ace7f8b9ab05997052a/html5/thumbnails/28.jpg)
Q & A
Web Programming