• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CT presentatie JQuery 7.12.11

CT presentatie JQuery 7.12.11






Total Views
Views on SlideShare
Embed Views



1 Embed 34

https://intranet.virtualsciences.nl 34



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    CT presentatie JQuery 7.12.11 CT presentatie JQuery 7.12.11 Presentation Transcript

    • jQueryGo With The Hype And KillYour Project
    • Overview• Building Rich Internet Applications• ChoosingjQuery• Making a mess of your project• Questions
    • Rich Internet Applications• 1995 is history• Customers want interactive, easy-to-use web applications• HTML falls short• HTML5 is not the answer
    • Rich Internet Applications• Gratuitousexample #1: data entry
    • Rich Internet Applications• Gratuitousexample #2: data manipulation
    • Rich Internet Applications• Gratuitousexample #3: data navigation
    • Technical InterludeThe theory is verysimple: – HTML forstructure – CSS fordesign – JavaScriptforinteractivity
    • JavaScript :’-(• Itsucks:textMenu.getStyle = function(name){ 
if(document.getElementById) return document.getElementById(name).style;
elseif(document.all) return document.all[name].style; 
}• Use a Framework!
    • JavaScript Frameworks Cappucino Dojo Toolkit Echo Ext Foobar.js FUEL Glow Google Closure Library Joose jQuery Jwee Javascript Toolkit MS AJAX Library Midori Mochikit Mootools Prototype Script.aculo.us SmartClient Spark YUI
    • JavaScript FrameworksClick MUCH MUCH MORE to continue... Or just make a choice
    • jQuery• Gooddocumentation – http://api.jquery.com• Large community• No-nonsense API• Open-ended• jQueryPlugins• jQuery UI• Sounds nice?
    • Oneminuteintroduction• jQueryworks on sets of DOM nodes: $(“selectorpattern”)• This set (the “matched set”) canbetraversed: $(“input[type=„submit‟]”).closest(“form”);• The contents canbemanipulated: $(“div.notification”).fadeOut(“slow”);
    • Oneminuteintroduction• Easy eventhandling: $(“a.do-not-click”).bind(“click”, function(e) { alert(“I warnedyou...”); e.preventDefault(); });• Easy to extend: $.fn.coolNewFunction = function() { $(this).bind(“hover”, function() { ... }); };
    • ReminderThe theory is verysimple: – HTML forstructure – CSS fordesign – JavaScriptforinteractivity
    • The twobasicproblems• HTML – Usedforstructure – Alsoused to do what CSS can’t do – Alsoused to implement complex JS widgets• Classes and IDs – Usedfor CSS – Usedfor JS Selectors
    • The art of unmaintainable code
    • Somehorridexamples$(“span.button”).click(function() {document.location.href = http://www.important-page.com; return false;});• I should click on a span?• Important information is onlydisclosedthroughJavaScript?
    • Somehorridexamples$(“div#outernavdiv a:not(span)”).css(“color”, “#ff77ff”);• Document structuredeterminesmatched set?• We’redoing CSS?
    • Somehorridexamples$(“span.blue-button”).click(function() { $(this).append($(“<divclass=„omgbbq‟>clicked</div>”)) .fade(“slow”);});• Non-semanticclassforselector?• Where is this HTML coming from?
    • Thinkbeforeyou program This is notspecific to usingjQuery
    • Someniceexamples$(“input.datepicker”).datepicker({language: „nl‟,showYear: false});• Using a semanticclass to improve UX
    • Someniceexamples$(“table.tabular-data”).datatables();• Did I mentionsemantic classes?
    • Someniceexamples$(“input.auto-complete”).each(function() { $(this).autocomplete({datasource: $(this).attr(“data-autocomplete-options”) });})• I lovesemantic classes• Onceagain: progressiveenhancement• Using HTML(5) customattributes to fine-tunebehavior
    • Someniceexamples$(“a.show-message”).click(function(evt) {evt.preventDefault(); var href = $(this).attr(“href”); $.ajaxGet(href, {success: function(msg) { $.template(“show-message”).tmpl(msg).dialog(); } });})• Progressiveenhancement• Usessemantic data whereavailable• HTML from external template
    • Wrapping up• Nothing wrong withjQuery• Separate styling classes frominteraction classes• Usesemanticswherepossible• Use templates
    • More tips• Useplugins• Createplugins• LearnrealJavaScript – Scoping and closures – Prototyping and OOP – Eventbubbling and propagation