Download presentation
Presentation is loading. Please wait.
1
Software Engineering for Internet Applications
jQuery ADF 11/15/2018
2
jQuery JavaScript library fast and concise
simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development Write less, do more 11/15/2018
3
Using jQuery Local Installation CDN Based Version
download jQuery library and include it in HTML code. CDN Based Version include jQuery library into HTML code directly from Content Delivery Network (CDN). <script src=" </script> 11/15/2018
4
Using jQuery Register a ready event for document Add event function
$(document).ready(function() { // do stuff when DOM is ready }); $(document).ready(function() { $("tag").eventfunction( function() { /* do something */ } ); }); 11/15/2018
5
Example using jQuery <style> div.in { width: 20%; height: 10%;
background-color: #fc0; margin: 10px auto;} p { line-height: 1em; margin: 0; padding: 0;} </style> <body> <div> <span>mouse over the box to see a dialogue box</span> <div class="in trymouseover"> <p align='center'>here</p> </div> <br> <div class="trymouseclick"> Click on this to see a dialogue box. <p>Select this text to see a message appears</p> <input type="text" value="Some text"> <div class="output"></div> </body> 11/15/2018
6
Example using jQuery <script type="text/javascript“
src=" </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div.trymouseover").mouseover(function() { alert("Hello, world!");}); $("div.trymouseclick").click(function() { alert("Hello, world again!");}); $(":input").select(function() { $( "div.output" ).text( "Something was selected" ) .show().fadeOut( 1000 ); }); }); 11/15/2018
7
jQuery Selector Tag name Tag ID Tag class $(‘p’), $('*'), etc.
$(‘p a’), $(‘p > a’), etc. $(":input"), $(":text"), $(":radio"), etc. Tag ID $(‘#some-id’) Tag class $(‘.some-class’) $(‘element.class’) $("li:not(.myclass)") 11/15/2018
8
jQuery Filter p:first or p:last a:nth(3) or a:eq(3) p:even or p:odd
First or last element of p a:nth(3) or a:eq(3) 4th a element p:even or p:odd a:gt(3) or a:lt(4) a:contains(‘sometext’) 11/15/2018
9
jQuery Chaining Chaining method to select multiple attribute of an element $(‘a:contains("ECS")’).parent().addClass("emphasize") 11/15/2018
10
jQuery Attributes .attr(properties); .attr(key,value);
Fetch or set the value of an attribute for an element .remove(properties) Remove an attribute of an element .addClass() apply defined style sheets onto all the matched elements 11/15/2018
11
jQuery Attributes Example <body> <div>
<em title="no title">This is first paragraph.</em> <p id="myid">This is second paragraph.</p> <div id="divid"></div> </div> </body> 11/15/2018
12
jQuery Attributes add script to get and change attribute of an element
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("em").attr("title", "Bold and Brave"); var title = $("em").attr("title"); $("#divid").text(title); }); </script> 11/15/2018
13
jQuery Attributes add script to set style of an element <style>
.selected { color:red; } .highlight { background:yellow; } </style> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("em").addClass("selected"); $("#myid").addClass("highlight"); }); </script> 11/15/2018
14
jQuery CSS selector.css( ‘Property’, ‘Value’ );
selector.css({‘Property’:’Value’, ‘Property’:’Value’, … }); .hide(speed) or .show(speed) <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> 11/15/2018
15
jQuery CSS Add script to change the css
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("li").eq(2).css("color", "red"); $("li").eq(4).css({"color":"red", "background-color":"green"}); }); </script> 11/15/2018
16
jQuery DOM selector.html( ); selector.replaceWith( content )
selector.remove( [ expr ]) or selector.empty( ) selector.after( content ) or selector.before( content ) append( content ) wrap( elem ) etc 11/15/2018
17
jQuery Event Event Type Syntax Mouse click Page load Mouse over
Submitting form key pressed etc. Syntax .bind() and .unbind() 11/15/2018
18
jQuery Event Syntax selector.bind(eventType[, eventData], handler)
selector.unbind(eventType, handler) selector.unbind(eventType) eventType A string containing a JavaScript event type, such as click or submit. eventData This is optional parameter is a map of data that will be passed to the event handler. handler A function to execute each time the event is triggered. 11/15/2018
![jQuery Event Syntax selector.bind(eventType[, eventData], handler)](http://slideplayer.com/slide/14525073/90/images/18/jQuery+Event+Syntax+selector.bind%28eventType%5B%2C+eventData%5D%2C+handler%29.jpg "selector.unbind(eventType, handler) selector.unbind(eventType) eventType. A string containing a JavaScript event type, such as click or submit. eventData. This is optional parameter is a map of data that will be passed to the event handler. handler. A function to execute each time the event is triggered. 11/15/2018.")
19
jQuery Event Type blur change click dblclick error Focus keydown
keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit unload 11/15/2018
20
jQuery Event Attributes
altKey ctrlKey data keyCode metaKey pageX pageY relatedTarget screenX screenY shiftKey target timeStamp type which 11/15/2018
21
jQuery Event Example <body>
<style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> <body> <p>Click on any square below to see the result:</p> <div id="blue" class="div" style="background-color:blue;">ONE</div> <div id="green" class="div" style="background-color:green;">TWO</div> <div id="red" class="div" style="background-color:red;">THREE</div> </body> 11/15/2018
22
jQuery Event Add script to handle mouse event
<script type="text/javascript" language="javascript"> $(document).ready(function() { $('div').bind('click', function( event ){ alert('Event type is ' + event.type + '\npageX : ' + event.pageX + '\npageY : ' + event.pageY + '\nTarget ID : ' + event.target.id + '\nTarget Text : ' + event.target.innerHTML); }); </script> 11/15/2018
23
jQuery + AJAX Load static or dynamic data $.ajax( options )
$.get( url, [data], [callback], [type] ) [selector].load( URL, [data], [callback] ); <?xml version="1.0"?> <root> <entry name="hello">Hello World</entry> </root> somefile.xml 11/15/2018
24
jQuery + AJAX Create div to show the result <body>
<p>Click on the button to load fileXML file -</p> <div id="stage" style="background-color:c0c;"> STAGE </div> <input type="button" id="driver" value="Load Data" /> </body> 11/15/2018
25
jQuery + AJAX Create script to load the XML file using ajax
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(startAjax); }); function startAjax() { $("#stage").text("Calling server"); $.ajax( { url:'somefile.xml', success:callbackFunction, error:errorFunction }) } function callbackFunction(data,info) { $("#stage").text("result:"+data); function errorFunction(data,info) { $("#stage").text("error occurred:"+info); </script> 11/15/2018
26
jQuery + AJAX Selecting XML element .find("tagname")
.find("tagname:first") .find("#myid") .find("tag1 tag2") <?xml version="1.0" encoding="UTF-8"?> <studentinfo> <student1> <name>Budi</name> <major>Computer Science</major> <studentID> </studentID> </student1> <student2> <name>Cita</name> <studentID> </studentID> </student2> </studentinfo> 11/15/2018
27
jQuery + AJAX Change callbackFunction to select only element “name”
function callbackFunction(data,info) { var name = $(data).find("name"); if (name && name.length) $("#stage").text("result:"+name.text()); else errorFunction(data, "No name"); } 11/15/2018
28
jQuery + AJAX Simplify using .load()
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(startAjax); }); function startAjax() { $('#stage').load('somefile.xml'); } </script> 11/15/2018
29
XML vs JSON Remove unused closing tag
<?xml version="1.0" encoding="UTF-8"?> <studentinfo> <student1> <name>Budi</name> <major>Computer Science</major> <studentID> </studentID> </student1> <student2> <name>Cita</name> <studentID> </studentID> </student2> </studentinfo> 11/15/2018
30
XML vs JSON Use JavaScript Object Notation (JSON) { "studentinfo": {
"name": "Budi", "major": "Computer Science", "studentID": " " }, "student2": { "name": "Cita", "studentID": " " } 11/15/2018
31
XML vs JSON JSON relatively smaller than XML if not by much
And relatively faster in parsing than XML JSON is easier to use in javaScript 11/15/2018
32
jQuery + AJAX + JSON $.ajax( options )
[selector].getJSON( url [, data ] [, success ] ) $.ajax({ dataType: "json", url: url, data: data, success: success }); 11/15/2018
33
jQuery + AJAX + JSON <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(startAjax); }); function startAjax() { $.ajax( { url:'somefile.json', success:callbackFunction, error:errorFunction, dataType: 'json' }) } function callbackFunction(data) { $("#stage").html("result:"+data + '</br>'); $('#stage').append('Name: ' + data.studentinfo.student1.name + '</br>'); $('#stage').append('ID : ' + data.studentinfo.student2.studentID + '</br>'); function errorFunction(data,info) { $("#stage").text("error occurred:"+info); } </script> 11/15/2018
34
jQuery + AJAX + JSON Simplify using .getJSON()
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(startAjax); }); function startAjax() { $.getJSON('somefile.json',callbackFunction); } function callbackFunction(data) { $("#stage").html("result:"+data + '</br>'); $('#stage').append('Name: ' + data.studentinfo.student1.name + '</br>'); $('#stage').append('ID : ' + data.studentinfo.student2.studentID + '</br>'); </script> 11/15/2018
35
jQuery + AJAX + JSON Sending data to server $.ajax( options )
[selector].post( url [, data ] [, success ] [, dataType ] ) $.ajax({type:'POST', url:"url.php", success:callbackFunction, error:errorFunction, dataType: 'json', data:{name1:value1, name2:value2} }); 11/15/2018
36
jQuery + AJAX + JSON Server-side : result.php Client side form
if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name; } ?> <body> <p>Enter your name and click on the button:</p> <input type="input" id="name" size="40" /><br /> <input type="button" id="driver" value="Show Result" /> </body> 11/15/2018
37
jQuery + AJAX + JSON Add script to send json input data to Server
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $.ajax({ type: "POST", url: '/jquery/result.php', data: {"name":name}, success: callbackFunction, }); function callbackFunction(data) { alert( "Data Loaded: " + data ); } </script> 11/15/2018
38
jQuery + AJAX + JSON Simplofy using .post()
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $.post( '/jquery/result.php', {"name":name}, callbackFunction); }); function callbackFunction(data) { alert( "Data Loaded: " + data ); } </script> 11/15/2018
39
11/15/2018
Similar presentations
