jQuery for designers
      4 februari 2010
HTML
CSS
Javascript?
WTF?
Doel van deze presentatie:


Van WTF? naar Aha!
  *ping* *genius*
1
The Setup
TextMate Syntax support

                     GetBundles
$ cd ~/Library/Application Support/TextMate/Bundles
$ svn co http...
Download jQuery syntax:
Maak een testproject aan
met een HTML file, jQuery
 included, en een scripts
   file om in te werken
2
Showdown
Something cool:

$(document).ready(function() {

      var test = '<div class="test"></div>'

      function appendTo() {
...
3
Your turn
Document ready
     Haal default slice van
        project server
$(document).ready(function() {
    // Code here
});
alert(); and prompt();

$(document).ready(function() {
    alert('hello!');
});


$(document).ready(function()
{
    promp...
css(‘property’, ‘value’);



$(document).ready(function() {
    $('body').css('background', 'red');
});
Real world
                                   example!
      select(); onclick event


$(document).ready(function() {

   ...
events: hover event

$(document).ready(function() {

      $('body').hover(function() {
          // Stuff to do when the ...
Real world
                                                    example!

                 addClass();
         :last-child...
Real world
                                           example!
events: hover event
  :hover on any element in IE6


$(docu...
Real world
                                               example!
 focus event + addClass();
          Add :focus support...
4
JS in the wild
AB: tooltip
Tagger.fm: tagbox
Vorst Nationaal: websites in settings
+
Supertip
?
Vragen
Thx!
jQuery for designers
jQuery for designers
jQuery for designers
jQuery for designers
jQuery for designers
Upcoming SlideShare
Loading in...5
×

jQuery for designers

2,528

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,528
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • jQuery for designers / first version 2010-02-02
  • Jullie weten heel goed wat HTML is.
  • Jullie weten heel goed wat CSS is.
  • Maar Javascript is een beetje een mysterieus beestje. Wat is deze code?
  • Bij het zien van deze code bekruipt je waarschijnlijk een groot WTF-gevoel.
  • Het doel van deze presentatie is dat jullie de rol van Javascript en de mogelijkheden begrijpen. En dat jullie kleine dingen zelf kunnen.
  • Dit wordt een praktische presentatie [neem laptops];
    we beginnen met een werkomgeving op te zetten waar je vlot in kan werken.
  • Om jQuery specifieke syntax support in TextMate te voorzien haal je best de jQuery bundle op. Er bestaat een pakket voor TextMate genaamd GetBundles om gemakkelijk nieuwe bundles op te halen. Indien je dit niet heb, installeer het zo [code]
  • Als je GetBundles opent en zoekt naar jQuery kan je gemakkelijk de jQuery bundle installeren. Deze voorziet de juiste syntax coloring en enkele handige shortcuts.
  • We gaan werken in een tesproject, met de laatste versie van jQuery. Dit is op moment van schrijven 1.4.1
  • Eerst tonen wat er allemaal mogelijk is met relatief eenvoudige &amp;#x2018;designer&amp;#x2019; javascript.
  • Deze code resulteert in:
  • Dit is iets simpels dat ik geschreven heb voor deze presentatie...
  • De eerste stap naar een applicatie zoals fontstruct.
  • Javascript opent de weg naar goed interactiedesign...
    van rich text editors
  • Tot online video.
  • Maar goed; dat terzijde. We gaan de basis leren van Javascript, met specifieke aandacht voor designer taken.
  • [uitleg wat document ready is]
    jQuery object: $
    document: selector
    ready(): functie
    function() anonieme functie
  • Twee functies: alert(); om boodschappen te tonen, prompt(); om te vragen voor user input.
  • css() functie om CSS te manipuleren
  • [uitleg]
  • [uitleg]
  • [uitleg]
  • [uitleg]
  • [uitleg]
  • Javascript op Netlash websites
  • Het boek waar ik javascript door geleerd heb is DOM scripting
    De grote boeken van O&amp;#x2019;Reilley: niet aan beginnen, deze zijn al lang pass&amp;#xE9; en niet praktisch genoeg.
  • Bedankt!
  • jQuery for designers

    1. 1. jQuery for designers 4 februari 2010
    2. 2. HTML
    3. 3. CSS
    4. 4. Javascript?
    5. 5. WTF?
    6. 6. Doel van deze presentatie: Van WTF? naar Aha! *ping* *genius*
    7. 7. 1 The Setup
    8. 8. TextMate Syntax support GetBundles $ cd ~/Library/Application Support/TextMate/Bundles $ svn co http://svn.textmate.org/trunk/Review/Bundles/ GetBundles.tmbundle/ Reload bundles:
    9. 9. Download jQuery syntax:
    10. 10. Maak een testproject aan met een HTML file, jQuery included, en een scripts file om in te werken
    11. 11. 2 Showdown
    12. 12. Something cool: $(document).ready(function() { var test = '<div class="test"></div>' function appendTo() { $('#container').append(test); } for (i = 0; i <= 767; i++) { appendTo(); } $('.test').hover(function() { $(this).animate({ opacity: 0.1, }, 250, function() { // Animation compete $(this).animate({ opacity: 0.75, }, 250, function() { $(this).css('background', '#FFFF00'); }); }); }); });
    13. 13. 3 Your turn
    14. 14. Document ready Haal default slice van project server $(document).ready(function() { // Code here });
    15. 15. alert(); and prompt(); $(document).ready(function() { alert('hello!'); }); $(document).ready(function() { prompt(); });
    16. 16. css(‘property’, ‘value’); $(document).ready(function() { $('body').css('background', 'red'); });
    17. 17. Real world example! select(); onclick event $(document).ready(function() { $('#email').click(function() { $(this).select(); }); });
    18. 18. events: hover event $(document).ready(function() { $('body').hover(function() { // Stuff to do when the mouse enters the element; $(this).css('background', 'red'); }, function() { // Stuff to do when the mouse leaves the element; $(this).css('background', 'blue'); }); });
    19. 19. Real world example! addClass(); :last-child support for IE6/IE7/IE8 $(document).ready(function() { $('#categories ul li:last-child').addClass('lastChild'); });
    20. 20. Real world example! events: hover event :hover on any element in IE6 $(document).ready(function() { $('ul li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); });
    21. 21. Real world example! focus event + addClass(); Add :focus support for IE6 $(document).ready(function() { $('input').bind({ focus: function(event) { $(this).addClass('focus'); }, blur: function(event) { $(this).removeClass('focus'); } }); });
    22. 22. 4 JS in the wild
    23. 23. AB: tooltip
    24. 24. Tagger.fm: tagbox
    25. 25. Vorst Nationaal: websites in settings
    26. 26. + Supertip
    27. 27. ? Vragen
    28. 28. Thx!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×