JavaScript

Czym jest JavaScript?

JavaScript 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>Ten tytul strony wpisal skrypt i obliczyl, że 33*7="+(33*7)+"</title>");
</script>
 
</head>
<body>
</body>
</html>

Chcemy, żeby strony które tworzymy działały w przewidywalny sposób u wszystkich użytkowników internetu, jednak nie mamy pewności czy przeglądarka, której używa użytkownik, rozumie język skryptowy w jakim piszemy fragment strony (pamiętajmy, że to przeglądarka interpretuje, uruchamia i wykonuje nasz skrypt!). Dlatego używa się tricku "komentarzowego". Ten trick powoduje, że przeglądarki wspierające język javascript "widzą" stronę ze skryptem, a te które go nie rozumieją — "widzą" skrypt zakomentowany. W tym celu stosujemy zawsze następujący zapis:

<html>
<body>
<script>
<!--
document.write("Nie każda przeglądarka to napisze...");
//-->
</script>
</body>
</html>

Prześledź powyższy przykład z punktu widzenia przeglądarki rozumiejącej tag <script type="text/javascript"> oraz takiej, która go nie rozumie (tj. nie wie, że dalej jest skrypt w podanym języku).

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 ognistego liska 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] = "Komputer";
moi_przyjaciele[2] = "Ania";
 
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.

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 6

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

  1. pokaz slajdów (jeśli na stronie jest dużo obrazków),
  2. link odsyłający (losowo) do różnych stron,
  3. mierzenie czasów pomiędzy kliknięciami i wyciąganie średniej,
  4. różne powitania na różne dni tygodnia,
  5. wyświetlanie daty i czasu na str. startowej,
  6. 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 mail ze swoim imieniem i nazwiskiem oraz adresem strony. W mailu należy napisać też, gdzie znajdują się skrypty i co powinny robić.

punkty: 4

termin: 23.11 (niedziela) godzina 23:59

Spóźnienie warte jest -1 pkt/dzień.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy