• Save
Unobtrusive javascript with jQuery
Upcoming SlideShare
Loading in...5
×
 

Unobtrusive javascript with jQuery

on

  • 2,584 views

 

Statistics

Views

Total Views
2,584
Views on SlideShare
2,568
Embed Views
16

Actions

Likes
2
Downloads
0
Comments
0

4 Embeds 16

http://www.slideshare.net 10
http://onwebdev.blogspot.com 3
http://blog.gabrieleromanato.com 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    Unobtrusive javascript with jQuery Unobtrusive javascript with jQuery Presentation Transcript

    • Unobtrusive Javascript with jQuery
      PresentationbyAngel Ruiz Calvo
    • Summary
      Javascript frameworks
      jQuery introduction
      Unobtrusive Javascript
      Lessons learned
      Working examples
      Thanks & Acknowledgements.
    • Why areJavascript frameworks needed?
    • Why areJavascript frameworks needed?
      Because this is how Javascript is seen by the browser:
    • Javascript frameworks
      Their main aim is to present a solid and usable API on top of Javascript while at the same time it hides painful browser particularities and incompatibilities.
      Essential to make “cross-browser” web applications.
      Makes programming Javascript easier and simpler.
      There are a few available.
    • Javascript frameworks
      Their main aim is to present a solid and usable API on top of Javascript while at the same time it hides painful browser particularities and incompatibilities.
      Essential to make “cross-browser” web applications.
      Makes programming Javascript easier and simpler.
      There are a few available.
    • jQuerysuccess
      is about ...
    • jQuerysuccess
      is about ...
      Plugins
    • jQuerysuccess
      is about ...
      Plugins
      Big community
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
      Lightweight
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
      Lightweight
      Speed
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
      Lightweight
      Speed
      Well documented
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
      Lightweight
      Speed
      Well documented
      Support
    • jQuerysuccess
      is about ...
      Plugins
      Big community
      Industry support
      ...
      Lightweight
      Speed
      Well documented
      Support
      Open/Free license
    • jQuery core philosophy
      Simplify iteration between HTML and Javascript
      Find HTML
    • jQuery core philosophy
      Simplify iteration between HTML and Javascript
      Find HTML
      Do something to it
    • jQuery core philosophy
      Simplify iteration between HTML and Javascript
      Find HTML
      Do something to it
      • Example
      <HTML>
      <BODY>
      <DIV>This is</DIV>
      <DIV>and example</DIV>
      </BODY>
      </HTML>
    • jQuery core philosophy
      Simplify iteration between HTML and Javascript
      Find HTML
      Do something to it
      • Example
      Find all divs
      $(“DIV”);
      <HTML>
      <BODY>
      <DIV>This is</DIV>
      <DIV>and example</DIV>
      </BODY>
      </HTML>
    • jQuery core philosophy
      Simplify iteration between HTML and Javascript
      Find HTML
      Do something to it
      • Example
      Find all divs
      Add class “foo” to all of them
      $(“DIV”).addClass(“foo”);
      <HTML>
      <BODY>
      <DIV class=“foo”>This is</DIV>
      <DIV class=“foo”>and example</DIV>
      </BODY>
      </HTML>
    • jQuery factory method $()
      Its argument is always a CSS selector (CSS3 support for 1.4+ versions).
      Examples:
      $(“#myID”);// get element with id=“myID”
      $(“.myClass”);// get elements with class name=“myClass”
    • jQuery factory method $()
      Its argument is always a CSS selector (CSS3 support for 1.4+ versions).
      Examples:
      $(“#myID”);// get element with id=“myID”
      $(“.myClass”);// get elements with class name=“myClass”
      $(“li:first”);// get first list item
      $(“tr:odd”);// get odd table rows
    • jQuery factory method $()
      Its argument is always a CSS selector (CSS3 support for 1.4+ versions).
      Examples:
      $(“#myID”);// get element with id=“myID”
      $(“.myClass”);// get elements with class name=“myClass”
      $(“li:first”);// get first list item
      $(“tr:odd”);// get odd table rows
      $(“a[target=_blank]”);// get all links whose target is “_blank”
      $(“form[id^=step]”);// get all forms whose id begins with // “step”
    • jQuery factory method $()
      Its argument is always a CSS selector (CSS3 support for 1.4+ versions).
      Examples:
      $(“#myID”);// get element with id=“myID”
      $(“.myClass”);// get elements with class name=“myClass”
      $(“li:first”);// get first list item
      $(“tr:odd”);// get odd table rows
      $(“a[target=_blank]”);// get all links whose target is “_blank”
      $(“form[id^=step]”);// get all forms whose id begins with // “step”
      Or you can combine them:
      $(“#myID, .myClass, table”);
    • jQuery factory method $()
      Its argument is always a CSS selector (CSS3 support for 1.4+ versions).
      Examples:
      $(“#myID”);// get element with id=“myID”
      $(“.myClass”);// get elements with class name=“myClass”
      $(“li:first”);// get first list item
      $(“tr:odd”);// get odd table rows
      $(“a[target=_blank]”);// get all links whose target is “_blank”
      $(“form[id^=step]”);// get all forms whose id begins with // “step”
      Or you can combine them:
      $(“#myID, .myClass, table”);
      More examples:
      http://codylindley.com/jqueryselectors/
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
      Events
      bind(), trigger(), unbind(), live(), click(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
      Events
      bind(), trigger(), unbind(), live(), click(), ...
      Effects
      show(), fadeOut(), toogle(), animate(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
      Events
      bind(), trigger(), unbind(), live(), click(), ...
      Effects
      show(), fadeOut(), toogle(), animate(), ...
      Traversing
      find(), is(), prevAll(), next(), hasClass(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
      Events
      bind(), trigger(), unbind(), live(), click(), ...
      Effects
      show(), fadeOut(), toogle(), animate(), ...
      Traversing
      find(), is(), prevAll(), next(), hasClass(), ...
      Ajax
      get(), getJSON(), post(), ajax(), load(), ...
    • jQuery API groups
      Moving elements
      before(), after(), appendTo(), append(), ...
      Attributes
      css(), attr(), html(), val(), addClass(), ...
      Events
      bind(), trigger(), unbind(), live(), click(), ...
      Effects
      show(), fadeOut(), toogle(), animate(), ...
      Traversing
      find(), is(), prevAll(), next(), hasClass(), ...
      Ajax
      get(), getJSON(), post(), ajax(), load(), ...
      More...
    • jQuery Plug-ins
      Here you can find everything you need:
      http://plugins.jquery.com/
    • jQuery Plug-ins
      Here you can find everything you need:
      http://plugins.jquery.com/
      Well known plug-in libraries:
      http://flowplayer.org/tools/index.html
      http://jqueryui.com/
    • jQuery references
      The main documentation site is the best reference:
      http://docs.jquery.com
    • jQuery references
      The main documentation site is the best reference:
      http://docs.jquery.com
      To get up to speed we have purchased this book:
    • Unobtrusive Javascript
      It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:
    • Unobtrusive Javascript
      It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:
      Separate behaviour from structure (mark-up).
    • Unobtrusive Javascript
      It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:
      Separate behaviour from structure (mark-up).
      Follow best practises to avoid each browser particular issues.
    • Unobtrusive Javascript
      It is a design paradigm for the web presentation layer (DHTML = HTML + CSS + Javascript) whose basic principles are:
      Separate behaviour from structure (mark-up).
      Follow best practises to avoid each browser particular issues.
      “Progressive Enhancement” instead of “Graceful degradation”.
    • Separate behaviour from structure (mark-up).
      Before:
      <HTML>
      <BODY>
      <INPUT type=“button” onclick=“alert(‘Hello World’);”>
      </BODY>
      </HTML>
    • Separate behaviour from structure (mark-up).
      Before:
      After:
      <HTML>
      <BODY>
      <INPUT type=“button” onclick=“alert(‘Hello World’);”>
      </BODY>
      </HTML>
      <HTML>
      <BODY>
      <INPUT type=“button”>
      </BODY>
      <script type=“text/javascript”>
      $(“INPUT”).click(function(){alert(‘Hello World’);});
      </script>
      </HTML>
    • Separate behaviour from structure (mark-up).
      Before:
      After:
      <HTML>
      <BODY>
      <INPUT type=“button” onclick=“alert(‘Hello World’);”>
      </BODY>
      </HTML>
      Don’t worry!!
      Experience will show you that
      IT GETS BETTER THAN THAT!!!
      <HTML>
      <BODY>
      <INPUT type=“button”>
      </BODY>
      <script type=“text/javascript”>
      $(“INPUT”).click(function(){alert(‘Hello World’);});
      </script>
      </HTML>
    • Follow best practises to avoid each browser particularaties.
      Basically use jQuery for your javascript.
    • Follow best practises to avoid each browser particularaties.
      Basically use jQuery for your javascript.
      But do not forget about CSS frameworks!!!
    • Follow best practises to avoid each browser particularaties.
      Basically use jQuery for your javascript.
      But do not forget about CSS frameworks!!!
      Why?
    • Follow best practises to avoid each browser particularaties.
      Basically use jQuery for your javascript.
      But do not forget about CSS frameworks!!!
      Why?
    • Follow best practises to avoid each browser particularaties.
      Basically use jQuery for your javascript.
      But do not forget about CSS frameworks!!!
      Why?
      Good examples of CSS frameworks:
      YAML:http://www.yaml.de/en/
      Blueprint: http://www.blueprintcss.org/
    • “Graceful Degradation”
      e.g. Date Picker
      Renders both input field and button
      If javascript is disabled
      the button will not work
    • “Progressive Enhancement”
      e.g. Date Picker
      Renders both input field and hides button
      If javascript is enabled
      the button will be shown
    • Lessons learned
      Css at the top.
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
      Or remember:
      $(function (){
      //code will execute after page load
      }),
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
      Or remember:
      which is equivalent to:
      $(function (){
      //code will execute after page load
      }),
      $(document).ready(function (){});
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
      Or remember:
      which is equivalent to:
      , , your “best friend”.
      $(function (){
      //code will execute after page load
      }),
      $(document).ready(function (){});
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
      Or remember:
      which is equivalent to:
      , , your “best friend”.
      Group, minify and gzip these static resources:
      $(function (){
      //code will execute after page load
      }),
      $(document).ready(function (){});
    • Lessons learned
      Css at the top.
      Javascript at the bottom (not always, e.g. jQuery import).
      Or remember:
      which is equivalent to:
      , , your “best friend”.
      Group, minify and gzip these static resources:
      Asses your page using Yslow
      You do not need to score 100.
      Try to follow the suggested best practices as much as possible.
      $(function (){
      //code will execute after page load
      }),
      $(document).ready(function (){});
    • Any questions before showing working examples?
    • Thanks for listening
      The author
      • Angel Ruiz is an IT Senior Consultant at SRA IT (Australia)
      Acknowledgments
      • Ignacio Coloma from ExtremaSistemas (Spain)