CS 371 Web Application Programming

jQuery CS 371 Web Application Programming CS 371 Web Application Programming

CS 371 Web Application Programming 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 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 jQuery • collection of javaScript functions • does not really enforce any models or provide content management • just a very useful javaScript library • used by over 80% of the 10,000 most visited websites • jQuery and jQuery UI

CS 371 Web Application Programming 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 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 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 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 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 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 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 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 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 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 jQuery UI • make web apps more like desktop • menus • tabs • dialogs • themes • controls • datepicker • sliders • progressbar, etc.

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

CS 371 Web Application Programming