Kurs MVC - jQuery

Prelekcja połączona z praktyką dotyczące jQuery przedstawiona podczas kursu MVC .NET organizowanego przez PGS-Software na Politechnice Wrocławskiej

Transcript

1. 04.04.2017
   Kurs MVC - jQuery
   

   View Slide

2. • Software Developer w PGS Software
   • Microsoft Student Partner
   • Prezes koła naukowego EKA.NET
   • Studentka I roku Informatyki (II stopień)
   Gdzie mnie znaleźć?
   • @j_skurzynska
   • www.jskurzynska.com
   Wstęp do ASP.NET MVC 03.04.2017
   Kilka słów o mnie
   2
   

   View Slide

3. • Software Developer w PGS Software
   • .NET’owiec z wyboru
   • JS’owiec z zamiłowania
   Gdzie mnie znaleźć?
   • SzymczakK na i
   • www.rakaz.pl
   04.04.2017
   I kilka o mnie
   

   View Slide

4. jQuery – do czego to w
   ogóle mi potrzebne?
   • Manipulacja DOM’em
   • Łatwiejszy kod JS
   • Kompatybilność z przeglądarkami (od IE 6.0, FF 2+, Safari 3.0+,
   Opera 9.0+, Chrome)
   • Łatwość rozszerzenie o pluginy
   Kurs MVC - jQuery 04.04.2017 4
   

   View Slide

5. Jak zacząć z jQuery?
   • Ściągnięcie na dysk
   • CDN
   Kurs MVC - jQuery 04.04.2017 5
   

   View Slide

6. jQuery('div.class') lub $('div.class')
   oraz
   jQuery.each() lub $.each()
   Kurs MVC - jQuery 04.04.2017
   jQuery. , $. , jQuery(), $()
   6
   

   View Slide

7. Zmienne jQuery zaczyna się od znaku $ np.:
   $yellowInputs = $('input')
   Kurs MVC - jQuery 04.04.2017
   Konwencja nazewnicza
   7
   

   View Slide

8. $('input.passowrd').hide('slow').css({background: 'red'}).show(4000);
   //lub w wielu liniach
   $('input.passowrd')
   .hide('slow')
   .css({background: 'red'})
   .show(4000);
   Kurs MVC - jQuery 04.04.2017
   Składnia łańcuchowa
   8
   

   View Slide

9. $('input.red') - inputy z klasą red
   $('div .red') - wszystko z klasą red w divach
   $('div#password > input') - inputy w div'ach z ID password
   $('input').is(':visible') - inputy z atrybutem visible (czyli aktualnie
   widoczne)
   $('.blue ~ input') - wszystkie inputy które następują po jakimkolwiek
   elemencie z klasą blue
   $('input#password[disabled]') - input z ID password i atrybutem
   disabled
   Kurs MVC - jQuery 04.04.2017
   Selektory CSS
   9
   

   View Slide

10. var $inputs = $('input');
    $inputs.filter(':hidden').show(); //pokaż ukryte inputy
    var $divs = $('div');
    $divs.filter(function(){
    return $(this).children('input').length > 5 ? true : false;
    }).hide(); //ukryj div’y które posiadają ponad 5 inputów
    Kurs MVC - jQuery 04.04.2017
    $.filter()
    10
    

    View Slide

11. Przykład użycia
    selektorów
    Kurs MVC - jQuery 04.04.2017 11
    

    View Slide

12. //stara metoda
    $('button.submit').click(function(event){
    //tutaj kod JS do wykonania
    });
    //nowa metoda
    $('button.submit').on('click', function(event){
    //tutaj kod JS do wykonania
    });
    Kurs MVC - jQuery 04.04.2017
    Zdarzenia w jQuery (event)
    12
    

    View Slide

13. $('button.submit').on({
    'click': function(event){
    //kod js do wykonania
    },
    'mouseover': function(event){
    //kod js do wykonania
    }
    });
    Kurs MVC - jQuery 04.04.2017
    Zdarzenia w jQuery (event) cdn.
    13
    

    View Slide

14. $('button.submit').off();
    $('button.submit').off(blur');
    $('button.submit').off('focus’, funkcjaWykonywanaNaEvent);
    Kurs MVC - jQuery 04.04.2017
    Zdarzenia w jQuery (event)
    14
    

    View Slide

15. Przykład użycia eventów
    Kurs MVC - jQuery 04.04.2017 15
    

    View Slide

16. $(document).ready(function(){
    //tutaj wstaw swój kod JS
    })
    lub
    $(function(){
    //tutaj wstaw swój kod JS
    });
    Kurs MVC - jQuery 04.04.2017
    $(document).ready, $()
    16
    

    View Slide

17. $('button.submit').click();
    $('button.submit').blur();
    $('button.submit').focus();
    Kurs MVC - jQuery 04.04.2017
    Wywoływanie zdarzeń w jQuery (event)
    17
    

    View Slide

18. $('#password').show();
    $('#password').hide(500, function(){
    // kod do wykonania po zakończeniu urkywania
    });
    $('#password').fadeIn();
    $('#password').fadeOut();
    Kurs MVC - jQuery 04.04.2017
    Pokazywanie/ukrywanie elementów
    18
    

    View Slide

19. • Asyncronous JavaScript and Xml
    • Sposób na komunikację z serwerem „w tle”
    Kurs MVC - jQuery 04.04.2017
    Czym jest Ajax?
    19
    

    View Slide

20. $.ajax({
    type : "POST",
    url : "AddCard",
    data : {
    CardId : 7,
    CardName : 'Point'
    },
    success: function(data) {
    },
    error: function(jqXHR, errorText, errorThrown) {
    }
    });
    Kurs MVC - jQuery 04.04.2017
    $.ajax()
    20
    

    View Slide

21. $.get("GetCard", {cardId: card.Id},
    function(data){
    alert(data);
    }
    );
    $.post("SaveCard", {cardId: id,
    cardName: name}, function(data){
    if(data.success){
    alert("data saved");
    }
    };
    Kurs MVC - jQuery 04.04.2017
    $.get(), $.post()
    21
    

    View Slide

22. Let’s code ’litte
    Kurs MVC - jQuery 04.04.2017 22
    

    View Slide

23. Dzięki bardzo za uwagę!
    

    View Slide

24. PGS Software S.A.
    Tel.: +48 71 79 82 692
    Fax: +48 71 79 82 690
    E-mail: pgs-soft@pgs-soft.com
    www.pgs-soft.com
    

    View Slide