Workshop #4

Koło Naukowe Tworzenia Aplikacji Webowych

http://monterail.com/pwr/

http://knatw.slack.com

  • Jak do strony dodać JavaScript?
  • Czym jest jQuery i jak go używać?
  • Dodajemy modal
  • Dodajemy galerię

Krzysztof Jung

Dodanie JavaScrypt

  • tag <script>
  • skrypty w dokumencie vs skrypty w plikach
  • odpalanie skryptów

Tag <script>

  • zawiera w sobie kod skryptu
  • zawiera link do pliku ze skryptem
  • interpretacja skryptów jest synchroniczna
  • w trakcie wykonania skryptów parsowanie dokumentu jest wstrzymane
  • dobra praktyka: obszerne skrypty na koniec dokumentu (body)

<script> 

  • zawiera w sobie kod skryptu
  • zawiera link do pliku ze skryptem
  • interpretacja skryptów jest synchroniczna
  • w trakcie wykonania skryptów parsowanie dokumentu jest wstrzymane
  • dobra praktyka: obszerne skrypty na koniec dokumentu (body)

dokument vs pliki

  • małe skrypty lub prototyp - dokument
  • biblioteki - pliki
  • logika aplikacji - pliki
  • widgety/snippety/service'y - zależy

Jak uruchamiać?

  • same skrypty - podczas parsowania
  • często najpierw chcemy poczekać na dokument
  • DOMContentReady - event
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

Jak uruchamiać?

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM.
</script>

jQuery

  • krótka historia
  • główne zastosowania
  • obecne trendy

jQuery - historia

  • przeglądarki - różnice w DOM API
  • polyfille - Dojo, GWT, Prototype
  • jQuery boom
  • HTML5

jQuery - zastosowania

  • praca z DOM (CSS selectors)
  • praca z eventami
  • Ajax
  • widgets

jQuery - trendy

  • HTML5 + JS (ES6) vs jQuery
  • nowe frameworki
  • jakość widgetów
  • czy używać jQuery?

jQuery - abc

<script>
  $( document ).ready(function() {
    console.log( "ready!" );
  });

  $(function() {
    console.log( "ready!" );
  });
</script>
$('.top-bar').hide();

$('.top-bar').fadeIn();

$('.top-bar').slideUp();

$('.top-bar').slideDown();

W konsoli:

jQuery - abc

<script>
  $( 'button' ).click(function(event) {
    console.log( "click!" );
  });

  $('button').toggle();

  $('button').css('')
</script>

jQuery plugins

  • jak używać
  • jak konfigurować
  • dodajemy modal i galerię

jQuery plugins - użycie

  • plik .js + .css
  • skopiowanie do projektu (lub CDN)
  • $('#id_miejsca').runWidget(options)

jQuery plugins - konfiguracja

  • najczęściej komenda tworząca przyjmuje opcje
  • przyjmują one postać obiektu JS
  • najczęściej większość opcji ma wartość domyślną
  • część funkcjonalności wywołujemy komendami
  • $(widgetSelector).doSomething()

jQuery modal - Avground

jQuery galeria - nanoGallery

Made with Slides.com