Software Engineering for Internet Applications jQuery ADF 1

Software Engineering for Internet Applications jQuery ADF 1

Software Engineering for Internet Applications jQuery ADF 1 01/31/2020 jQuery JavaScript library fast and concise simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development Write less, do more 2

01/31/2020 Using jQuery Local Installation download jQuery library and include it in HTML code. https://jquery.com/download/ CDN Based Version include jQuery library into HTML code directly from Content Delivery Network (CDN). 6 01/31/2020 jQuery Selector Tag name $(p), $('*'), etc. $(p a), $(p > a), etc.

$(":input"), $(":text"), $(":radio"), etc. Tag ID $(#some-id) Tag class $(.some-class) $(element.class) $("li:not(.myclass)") 7 01/31/2020 jQuery Filter p:first or p:last 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) 8 01/31/2020 jQuery Chaining Chaining method to select multiple attribute of an element $(a:contains("ECS")).parent().addClass("emphasize") 9

01/31/2020 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 10 01/31/2020 jQuery Attributes Example

This is first paragraph.

This is second paragraph.

11 01/31/2020 jQuery Attributes add script to get and change attribute of an element 12 01/31/2020 jQuery Attributes add script to set style of an element

13 01/31/2020 jQuery CSS selector.css( Property, Value ); selector.css({Property:Value, Property:Value, }); .hide(speed) or .show(speed)

  • list
  • list
  • list
  • list
  • list
  • list

14 01/31/2020 item item item item item item 1

2

3

4

5

6

jQuery CSS Add script to change the css 15 01/31/2020 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 16 01/31/2020 jQuery Event Event Type Mouse click Page load Mouse over Submitting form

key pressed etc. Syntax .bind() and .unbind() 17 01/31/2020 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. 18 01/31/2020 jQuery Event Type blur change click dblclick error Focus

keydown keypress keyup load mousedown 19 01/31/2020 mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll

select submit unload jQuery Event Attributes altKey ctrlKey data keyCode metaKey pageX pageY relatedTarget 20 01/31/2020

screenX screenY shiftKey target timeStamp type which jQuery Event Example

Click on any square below to see the result:

ONE
TWO

THREE

21 01/31/2020 jQuery Event Add script to handle mouse event

22 01/31/2020 jQuery + AJAX Load static or dynamic data $.ajax( options ) $.get( url, [data], [callback], [type] ) [selector].load( URL, [data], [callback] ); Hello World somefile.xml 23

01/31/2020 jQuery + AJAX Create div to show the result

Click on the button to load fileXML file -

STAGE

24 01/31/2020 jQuery + AJAX Create script to load the XML file using ajax

25 01/31/2020 jQuery + AJAX Selecting XML element .find("tagname") .find("tagname:first") .find("#myid") .find("tag1 tag2") 26 01/31/2020

Budi Computer Science 113130001 Cita Computer Science 113130004 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"); } 27 01/31/2020 jQuery + AJAX Simplify using .load()

28 01/31/2020 XML vs JSON Remove unused closing tag Budi Computer Science 113130001 Cita Computer Science 113130004

29 01/31/2020 XML vs JSON Use JavaScript Object Notation (JSON) { "studentinfo": { "student1": { "name": "Budi", "major": "Computer Science", "studentID": "113130001" }, "student2": { "name": "Cita", "major": "Computer Science",

"studentID": "113130004" } } } 30 01/31/2020 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 31 01/31/2020

jQuery + AJAX + JSON $.ajax( options ) $.ajax({ dataType: "json", url: url, data: data, success: success }); [selector].getJSON( url [, data ] [, success ] ) 32 01/31/2020 jQuery + AJAX + JSON 33

01/31/2020 jQuery + AJAX + JSON Simplify using .getJSON()

34 01/31/2020 jQuery + AJAX + JSON Sending data to server $.ajax( options ) $.ajax({type:'POST', url:"url.php", success:callbackFunction, error:errorFunction, dataType: 'json', data:{name1:value1, name2:value2} }); [selector].post( url [, data ] [, success ] [, dataType ] ) 35

01/31/2020 jQuery + AJAX + JSON Server-side : result.php Client side form

Enter your name and click on the button:


36 01/31/2020 jQuery + AJAX + JSON Add script to send json input data to Server 37 01/31/2020 jQuery + AJAX + JSON Simplofy using .post() 38 01/31/2020 01/31/2020 39 THANK YOU

Recently Viewed Presentations

  • National School Breakfast Week March 5-9, 2018 [Add

    National School Breakfast Week March 5-9, 2018 [Add

    Hand out brainteasers, riddles, and activity sheets to students during breakfast to wake up their brains for the day. Decorate the cafeteria with "I School Breakfast " merchandise like posters, balloons, student giveaways, and even aprons for your staff! ......
  • Scale Analysis of Internal Natural Convection Dr. Om

    Scale Analysis of Internal Natural Convection Dr. Om

    In addition to thermal layers of thickness δ. T, f, the sidewalls develop viscous (velocity) wall jets. The thickness of these jets δ v from the momentum balance (5.7) for the region of thickness x ∼ δ v outside the...
  • 1 Ophthalmologic Examination Integrated With The Functional Aspects

    1 Ophthalmologic Examination Integrated With The Functional Aspects

    Chief Ophthalmology Nemours Children's Clinic. ... Robison D Harley MD Endowed Chair of Pediatric Ophthalmology. 12 month ex 23-week premature infant with tracheostomy, h/o retinopathy of prematurity who has been recently diagnosed with cerebral palsy. ... Provide support for child's...
  • My Life in Pink and Green by Lisa Greenwald

    My Life in Pink and Green by Lisa Greenwald

    My Life in Pink and Green is all about Realistic Fiction. I know this because Lucy's family problem could totally happen. Also, it has dialogue that people would actually say. Pharmacies close down all the time today because of big-time...
  • Chapter 25 Human Geography of South Asia A Region of Contrasts

    Chapter 25 Human Geography of South Asia A Region of Contrasts

    Chapter 25 Human Geography of South Asia ... Compare the aspects of the economies of Nepal & Bhutan Mountain Kingdoms The main geographic feature of Nepal & Bhutan is their mountainous landscape The rugged mountainous landscape of Nepal & Bhutan...
  • TP_Presentation.ppt - Travelport

    TP_Presentation.ppt - Travelport

    In addition to the standard car and hotel booking functionality, Travelport features: Hotel Mapping, allowing your travelers to quickly get their bearings and effectively plan their movements and activities in an unfamiliar city Meetings Integration to extend the value of...
  • Mr. Michael MooreDirector of Staff 75 ABW

    Mr. Michael MooreDirector of Staff 75 ABW

    Air Force Sustainment Center. Geographically Distributed Command. Support Command for Readiness. AFSC Mission Set. Depot and Modification . Global Supply Chain Management and Execution
  • Çocuklarla İleti̇şi̇m

    Çocuklarla İleti̇şi̇m

    ÇOCUKLARLA İLETİŞİM ÇOCUKLA İLETİŞİM İÇİN ÖNERİLER ÇOCUK YETİŞTİRMENİN KURALLARI • Çocuklarınızı dinleyin Meşgulseniz, başınız ağrıyorsa ya da aklınız başka bir şeyle meşgulse bunu çocuğunuza ifade edin, onu dinliyor gibi yapmayın.