1 / 16

CS 371 Web Application Programming

CS 371 Web Application Programming. jQuery. Frameworks. Most programmers "box up" code that is repeated (libraries) Sometimes programmers write code that is clever and general other programmers want to share it open source or third party products

zeph-larson
Download Presentation

CS 371 Web Application Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS 371 Web Application Programming jQuery CS 371 Web Application Programming

  2. Frameworks • Most programmers "box up" code that is repeated (libraries) • Sometimes programmers write code that is clever and general • other programmers want to share it • open source or third party products • for the web, can be client side or server side frameworks CS 371 Web Application Programming

  3. Frameworks • often provide • templates • caching • security • database access • scaffolding • url mapping • ajax • can enforce structure such as MVC or 3 tiered • can also be a content management system (CMS) CS 371 Web Application Programming

  4. jQuery • collection of javaScript functions • does not really enforce any models or provide content management • just a very useful javaScript library • used by over 55% of the 10,000 most visited websites • jQuery and jQuery UI CS 371 Web Application Programming

  5. jQuery – general concepts • small size • include it like any javaScript code • library can be copied to server or • use the google API site • example <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> • goal is to separate structure (html) from behavior (js) CS 371 Web Application Programming

  6. jQuery - basics • place code within script tags alongside any javaScript code • basically select objects and then use jQuery functions • $(select something).doSomething • examples • $(document).ready(handler) • $('img').attr("src") • $('#special').addClass("hairy") CS 371 Web Application Programming

  7. jQuery - selecting • uses a combination of css selection and xpath • examples • $('#spec' > li) // li that are children of spec id • $('.new td') // td's within class "new" tags • $('li:even') //even rows of li tags • ready function (when page is loaded) • $(document).ready(handler) • $(handler) • example: $(function(){alert("it's loaded")}); CS 371 Web Application Programming

  8. jQuery - basics • can work with the DOM like in javaScript, but with much less code • many effects like fading and animate • manipulation like changing class, content and positioning • event handling • AJAX CS 371 Web Application Programming

  9. Attributes • class: • $('#someId').addClass("highlight"); • $('li').removeClass("oldClass"); • $('#myID').toggleClass("classA");// remove if exists – add it otherwise • content: • use val() to get or val(data) to set controls • use html(), html(data) to get/set html code • attr("name") or attr("name","val") CS 371 Web Application Programming

  10. Traversal • relations: • $('table').children() • parent, parents, parentsUntil, siblings… • location: • $('li').first() • last, next, nextAll, nextUntil, prev, etc. • filter: • $("div").css("background", "#c8ebcc")            .filter(".middle")            .css("border-color", "red"); • etc. CS 371 Web Application Programming

  11. Manipulation • class and content (already covered) • positioning (innerWidth, outerWidth, width, height, scrollLeft, etc. • manipulating elements – clone, detach, empty, appendTo, insertAfter, remove, replaceAll, etc. CS 371 Web Application Programming

  12. Events • $('td.hey').click(function(){//code here }); • click, dblclick, change, blur, focus, hover • load • mouseup, mousedown • mouseover, mouseout • keydown, keyup, keypress • off CS 371 Web Application Programming

  13. Effects • hide, show • fadeIn, fadeOut, fadeTo • slideDown, slideUp, slideToggle • queue, dequeue, clearQueue • animate • $("#go").click(function(){  $("#block").animate({    width: "70%",    borderWidth: "10px"  }, 1500 );}); CS 371 Web Application Programming

  14. AJAX • var menuId = $("ul.nav").first().attr("id");var request = $.ajax({  url: "script.php",  type: "POST",  data: {id : menuId},  dataType: "html"});request.done(function(msg) {  $("#log").html( msg );});request.fail(function(jqXHR, textStatus) {  alert( "Request failed: " + textStatus );}); CS 371 Web Application Programming

  15. jQuery UI • make web apps more like desktop • menus • tabs • dialogs • themes • controls • datepicker • sliders • progressbar, etc. CS 371 Web Application Programming

  16. Plugins • slidesJS – slideshow • Jcrop – add cropping to app • jqGrid – grid boxes • Tablesorter – makes html table sortable • many, many more CS 371 Web Application Programming

More Related