jQuery

Biblioteka (czyli dołączany z zewnątrz skrypt) jQuery nie wchodzi w skład definicji JavaScript, ale jest tak powszechnie używana, że można ją traktować jako standard. Dobre wprowadzenie do tej biblioteki można znaleźć na stronie: http://shebang.pl/kursy/podstawy-jquery/r3/

Do przećwiczenia przykładów możemy użyć serwisu jsbin.com.

Najważniejszą ideą jest całkowite oczyszczenie kodu HTML ze skryptów. Zamiast tego – po załadowaniu strony modyfikujemy drzewo DOM dodając w razie potrzeby obsługę zdarzeń.

Odwołanie do węzłów drzewa zwraca nam funkcja o nazwie $.

Zobaczmy to na prostym przykładzie .

Przykład 4a (bez jQuery):

<html>
  <head>
  <script>
    function zaladowalem() {
     document.getElementById("kolorowy1").style.color="green";
    }
  </script>
  </head>
  <body onload="zaladowalem()">.
    <p>Tekst <span id="kolorowy1" style="color:red">kolorowy</span></p>
 </body>
</html>

Serwis jsbin oozwala wyłączyć javascript – po prawej. Włączając lub wyłączając możemy zobaczyć tekst czerwony lub zielony.

Ten sam przykład z użycie jQuery (kod dołączenia z https://code.jquery.com):

Przykład 4b (z jQuery):

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  function zaladowalem() {
    kolorowy1 = $("#kolorowy1");
    if (kolorowy1) {
    kolorowy1.css('color', 'green');
    }
  }
  $(document).ready(
     zaladowalem
  );
  </script>
</head>
<body>.
  <p>Tekst <span id="kolorowy1" style="color:red">kolorowy</span></p>
</body>
</html>

Znacznik <script>z atrybutem src powala dołączać zewnętrzne pliki skryptów. Warto zapamiętać, że nie jest dopuszczalny skrócony zapis typu <script src="..." /> (bez znacznika kończącego).

Należy zwrócić uwagę na użycie # - tak jak w CSS. Tekst został specjalnie napisany tak, aby był łatwy do debugowania. Debugger (odpluskwiacz) pozwala na wykonywanie programu krok po kroku. Dla JavaScript dobrym debugger ma Firefox (narzędzia dla programistów –https://developer.mozilla.org/pl/docs/Narz%C4%99dzia/Debugger).

Powyższy przykład można uprościć używając funkcji anonimowych (tam gdzie parametrem może być funkcja, można także wpisać jej definicję – a nie nazwę jak w powyższym przykładzie):

<html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  $(document).ready(
    function() {
      $("#kolorowy1").css('color', 'green').
           css('font-weight', 'bold');
    }
  );
  </script>
  </head>
  <body>.
  <p>Tekst
  <span id="kolorowy1" style="color:red">kolorowy</span>
  </p>
  </body>
  </html>

Objaśnienie:

  1. Funkcja może nie mieć identyfikatora – jeśli wywołujemy ją tylko raz. Jest to tak zwana funkcja anonimowa.

  2. Rezygnujemy ze sprawdzenia, czy obiekt kolorowy1 istnieje. Jeśli go nie ma – nie będzie błędu, tylko .css się nie wykona. To jedna z fajnych rzeczy w jQuery.

  3. Wynikiem funkcji $ jest obiekt - ale nie obiekt drzewa DOM – dlatego nie odwołujemy się do własności style, tylko wywołujemy metodę css.

  4. Tak samo obiektem jest wynik każdej metody wywoływanej na rzecz przetwarzanego obiektu. Dlatego możemy po kropce łączyć następne wywołania: $("#kolorowy1").css('color', 'green').css('font-weight', 'bold');

Dynamiczne budowanie strony w JavaScript

Podobnie jak metoda css zmienia styl, metoda html tworzy nowe fragmenty strony:

<html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  $(document).ready(function() {
  $("#kwadracik").html("<ul>dowolny fragment</u>
  strony").css('border', 'solid 1px green');
  });
  </script>
  </head>
  <body>.
  <div id="kwadracik"></div>
  </body>
  </html>

Jeśli parametrem funkcji $ nie jest selektor wyboru obiektów (np. identyfikator) ale HTML, to funkcja tworzy nowy obiekt. Można go później dołączyć w dowolne miejsce strony:

 <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
  var nowy = $('<div>drugi</div>');
  $(document).ready(function() {

  $("#kwadracik").html("<ul>dowolny fragment</u>  strony").css('border', 'solid 1px green');
  nowy.appendTo('#kwadracik');
  });
  </script>
  </head>
  <body>.
  <div id="kwadracik"></div>
  </body>
  </html>