07. JavaScript

Czym jest JavaScript?

JavaScript (JS) jest obiektowym językiem skryptowym wykorzystywanym w sieci. Często wykorzystuje się go w celu zapewnienia różnych funkcjonalności stron internetowych. Atutem przy zastosowaniu JS jest zwiększenie poziomu interaktywności stron poprzez wprowadzenie dynamicznych elementów, których "zachowanie" zmienia się w zależności od akcji podejmowanych przez użytkownika.

Podstawowa składania

Skrypty w JS umieszczamy w zasięgu znacznika <script>:
Musimy zdefiniować wykorzystywany przez nas język przy pomocy atrybutu type — javascript jest jednym z wielu możliwych języków skryptowych używanych w stronach internetowych.

<script>
    document.write("Mój pierwszy skrypt");
</script>

Skrypty umieszczamy w dokumencie HTML w części body i/lub head, przy czym definicje funkcji zaleca się umieszczać w head.

<html>
    <head>
    </head>
    <body>
 
    <script>
        document.write("Mój pierwszy skrypt");
    </script>
 
    </body>
</html>
<html>
    <head>
 
    <script>
        document.write("<title>A tytuł jego "+(11*4)+"</title>");
    </script>
 
    </head>
    <body>
        Jakaś niezwykle zajmująca treść.
    </body>
</html>

Nasz skrypt jest interpretowany, uruchamiany oraz wykonywany przez przeglądarkę. Oznacza to, że możemy "testować" naszą stronę bez potrzeby wrzucania jej na serwer. :)

Zmienne

Zmienne deklarujemy przy pomocy wyrażenia var, np.:

var x;
var i = 0;

Funkcje definiujemy w sposób następujący:

<script>
 
    function moja_funkcja() {
 
        kod;
 
    }
 
</script>

Podczas nauki pisania skryptów bardzo przydatna jest konsola błędów przeglądarki Firefox (w menu "Tools"). Istnieją też świetne plugin'y do Firefoxa wspomagające eksperymentowanie i znajdowanie błędów w HTML, CSS i JS — jednym z nich jest Firebug.

Obiekty

JavaScript jest językiem obiektowym, co oznacza, że w trakcie korzystania z niego posługujemy się obiektami, a także mamy możliwość tworzenia nowych obiektów. Na zajęciach nie będziemy zajmowali się tworzeniem obiektów, natomiast zapoznamy się z kilkoma gotowymi obiektami.

Mówiąc ogólnie, obiekty charakteryzują się tym, że mają swoje właściwości (properties) i metody (methods).

Przykład wykorzystania właściwości (w tym przypadku length obiektu typu Array):

<script>
 
    var moi_przyjaciele = new Array();
    moi_przyjaciele[0] = "Jan";
    moi_przyjaciele[1] = "Eustachy";
    moi_przyjaciele[2] = "Teofania";
 
    document.write("Tylu mam przyjaciół: " + moi_przyjaciele.length);
 
</script>

Przykład wykorzystania metody (random() obiektu typu Math):

document.write(Math.random());

Korzystanie z języka

W JS standardowo wykorzystujemy wyrażenia, które znamy już z zajęć z programowania, np: if if-else, pętle: for, while, operatory: +, -, etc.

Korzystamy również z predefiniowanych obiektów, tj. String, Array, Math, Boolean i wielu innych.

Aby zwiększyć interaktywność naszych stron, posługujemy się możliwością wykrywania działań (actions) użytkownika przy pomocy obiektów typu Event. Ogólnie rzecz biorąc:

<html>
    <head>
    <script>
         function pokaz() {
             alert("Już pokazuje")
         }
    </script>
    </head>
 
    <body>
 
        <button onclick="pokaz()">Pokaż</button>
 
    </body>
</html>

Działanie dotyczy tu kliknięcia na przycisk — onclick.

Komentarze

Źródło: tłumaczenie z https://en.wikipedia.org/wiki/JavaScript_syntax#Comments

// krótki, jednolinijkowy
 
/* To jest nieco dłuższy, wielolinijkowy
     komentarz. Niech ten dzień będzie
     dobrym dniem. */
 
/* Komentarze /* nie mogą być zagnieżdżone, wtedy otrzymamy: */ Syntax error */

Przykładowe skrypty

Zliczanie kliknięć na określonym elemencie graficznym. Przydatne: onclick="…", document.getElementById("id").

Różne powitania na wybrane pory dnia (można zastosować if…else… lub switch (poniżej podane ze swich). Przydatne: get.Hours - metoda obiektu Date.

Pokaz slajdów - obrazki na stronie zmieniające się na kliknięcie.

Liczenie czasu pomiędzy kliknięciami na dwa przyciski. Przydatne: setTimeout, clearTimeout (metody Window, zastosowane poniżej), lub timeStamp (metoda Event).

Przydatne linki:

Kurs JavaScript: http://www.w3schools.com/js w tym:


Zadanie 07

Zadanie to polega na umieszczeniu na stronie dwóch skryptów JavaScript autorskich o podobnym stopniu skomplikowania, co przykłady podane na końcu materiałów na tej stronie. Przykładowo mogą to być:

  • pokaz slajdów (jeśli na stronie jest dużo obrazków),
  • link odsyłający (losowo) do różnych stron,
  • mierzenie czasów pomiędzy kliknięciami i wyciąganie średniej,*# różne powitania na różne dni tygodnia,
  • wyświetlanie daty i czasu na str. startowej,
  • poprawienie formularza tak, by wysłanie danych było możliwe dopiero po udzieleniu odpowiedzi na wszystkie pytania.

Po wykonaniu zadania należy oczywiście wysłać do prowadzącego email ze swoim imieniem i nazwiskiem oraz adresem strony. W emailu należy napisać też, gdzie znajdują się skrypty i co powinny robić (ułatwi to prowadzącemu odnalezienie ich jeśli ich działanie nie jest oczywiste).

Punktacja — w sumie punktów 3:

  • 1 punkt — pierwsza funkcja JS;
  • 1 punkt — druga funkcja JS;
  • 1 punkt — ostateczny wygląd strony, jej czytelność, użytkowość.

Terminy:

  • grupy poniedziałkowe: niedziela (03.12), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z wtorku na środę oznaczać będzie brak punktów.
  • grupy czwartkowe: środa (29.12), godzina 23:59 (północ z środy na czwartek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z piątku na sobotę oznaczać będzie brak punktów.
  • Punkty: 3
Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy