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

  • PRESENTATION NAME - Pages

    PRESENTATION NAME - Pages

    Inception & Design. In 1999, ODOT undertook a replacement project study, which was furthered with four corridor options for the construction of a new bridge. ... The towers measure 216.22 feet from their top to their base at the deck....
  • Bell Ringer  Do you believe torture is a

    Bell Ringer Do you believe torture is a

    Council of Trent. 1545 to 1563, 25 sessions, 40 clergymen. Emphasis on reforms and clarification . Transubstantiation . Indulgences. Scripture. Marriage . Gregorian ...
  • Chapter 30 Induction and Inductance Key contents Faradays

    Chapter 30 Induction and Inductance Key contents Faradays

    The inductance of the inductor is then The SI unit of inductance is the tesla-square meter per ampere (T m2/A). We call this the henry (H), after American physicist Joseph Henry. Inductance of a Solenoid: Consider a long solenoid of...
  • Habits, Patterns, and Thoughts That Go Bump in the Night

    Habits, Patterns, and Thoughts That Go Bump in the Night

    Adventures in Thinking. about complaint-free. Habits, Patterns, and Thoughts That Go Bump in the Night. To paraphrase: "It's the thinking, stupid."
  • September 6, 2019 - cpuc.ca.gov

    September 6, 2019 - cpuc.ca.gov

    BTM resources. supply-side resource with ELCC values (BTM PV only, other resources such as AAEE remain load-modifiers) supply-side resource with ELCC values (BTM PV only, other resources such as AAEE remain load-modifiers) BTM PV not given QC value - on...
  • EXECUTIVE POLICY GROUP Enterprise Risk Management Campus Safety

    EXECUTIVE POLICY GROUP Enterprise Risk Management Campus Safety

    Enterprise Risk Management Campus Safety Security & Business Continuity Enterprise Risk Management www.utdallas.edu EXECUTIVE POLICY GROUP Enterprise Risk Management (ERM) ERM forms an important element of organizational management and provisioning of consolidated services.
  • EDUCATIONAL DEVELOPMENT CENTRE Dr. Morgan Rooney Educational Developer

    EDUCATIONAL DEVELOPMENT CENTRE Dr. Morgan Rooney Educational Developer

    Inkshedding. Think/Pair/Share* Intermediate: Small Group Questions. Presentations. Fishbowls* Debates. Complex: Jigsaws* Worksheets (Fill in the Blank, Matrix*, Concept Map*, Venn Diagram*) Games (Tic-Tac-Toe, Bingo, Who Wants to be a Millionaire?, Relay Race*, Headbands, Jeopardy) 2. ACTIVITES ...
  • Introduction - Clarkson University

    Introduction - Clarkson University

    Job specifications The worker-oriented characteristics required for the job Based on work performed in the job What knowledge, skills, abilities, or other competencies are required for a person to do these things?