JavaScript – Wprowadzenie

CZY UCZYĆ SIĘ JAVASCRIPT?

Tak! 🙂 JavaScript jest jednym z trzech języków, które powinni znać web deveoperzy, UX developerzy czy UI developerzy.

1. HTML5 określa treść, która jest wyświetlana na stronie,
2. CSS3 definiuje wygląd strony (layout),
3. JavaScript określa zachowanie/działania/interakcje na stronie.

Oczywiście można stworzyć stronę bez znajomości JavaScript, ale dziś interakcje na stronach są na wagę złota. Era statycznych stron minęła. Czy bezpowrotnie? To się okaże.

JAVASCRIPT – JAK ZACZĄĆ?

Kod JavaScript umieszcza się w tagach <script> </script>.
Java Script jest domyślnym językiem skryptowym w HTML, dlatego nie ma już konieczności używania atrybutu type : <script type="text/javascript">.
W kodzie można umieszczać wiele skryptów, mogą znajdować się zarówno w head jak i w body pomiędzy wspomnianymi już znacznikami <script> a także wewnątrz np. buttona po onclick="" np.

<span> 5 + 6 = </span> <span id="sum">?</span>
<button onclick="document.getElementById('sum').innerHTML = (5 + 6)"> Wykonaj dzialanie </button>

5 + 6 = ?
Wykonaj dzialanie

JAVASCRIPT W PLIKU ZEWNĘTRZNYM

Rekomenduje się przechowywanie kodu JavaScript w plikach zewnętrznych po to, aby oddzielić od siebie kody. Pomaga to w utrzymaniu porządku, łatwiej się czyta taki kod i poprawia. Co najważniejsze, strona wczytuje się szybciej w takim przypadku. Link do kodu umieszczamy w taki sposób (używając atrybutu src):

<script src="mojwlasnyskrypt.js"></script>

W pliku „mojwlasnyskrypt.js” nie używamy już tagów <script> </script>.
Jeżeli decydujemy się na pisanie skryptów w dokumencie HTML, należy umieścić je na dole strony, przed znacznikiem </body>.

WYŚWIETLANIE DANYCH W JAVASCRIPT

W JavaScript jest kilka opcji wyświetlania danych. Najważniejsze to:

1. innerHTML – podmienia tekst, atrybut, style dowolnego taga HTML
2. window.alert() – wyświetla box z alertem

INNERHTML – PRZYKŁAD UŻYCIA

Omówmy poniższy przykład. Mamy dwa tagi span, jeden bez id, drugi z id=”summary”. Niżej znajduje się button, w którym jest onclick. Dzięki niemu możemy określić co stanie się na stronie po kliknięciu tego buttona. Aby uzyskać dostęp do danego taga (w tym przypadku do span o id=”summary”) używamy metody document.getElementById(id). W nawiasie piszemy nazwę id w cudzysłowu. Dzięki innerHTML określamy zawartość zdefiniowanego wcześniej taga. Po znaku równości (=) w nawiasie możemy wpisać działanie (5-3) lub tekst w cudzysłowu (‚Martyna’). Nie ma znaczenia czy będzie to ('Martyna') czy ("Martyna") – JavaScript akceptuje obydwie wersje.

<span> 5 + 6 = </span> <span id="summary">?</span>
<button onclick="document.getElementById('summary').innerHTML = (5 + 6)"> Wykonaj dzialanie </button>

5 + 6 = ?
Wykonaj dzialanie

ALERT

Aby wyświetlić alert, korzystamy z poniższego kodu.

<script>
	window.alert(5 + 6);
</script>

<!-- lub -->

<script>
	window.alert('Witaj na mojej stronie');
</script>

ZMIENNE W JAVASCRIPT

Pojemniki przechowujące wartości. np. var x = 5 . W tym przypadku x jest pojemnikiem/zmienną przechowującą wartość 5.
var y = 2 – y przechowuje wartość 2.
var z = x + y – z przechowuje sumę wartości x i y.

Zmiennymi i wartościami mogą być liczby i litery.

<script>
	var x = "Martyna Rejkowicz";
	var y = "pochodzi z Mieroszowa";
	document.getElementById("demo").innerHTML = x + " "  + y;
</script>

UWAGA! ten znak = nie służy do porównywania lecz do przypisania wartości do zmiennej.
Operator porównania w JavaScript to == .

OPERATORY JAVASCRIPT

OPERATORY ARYTMETYCZNE – JAK W ALGEBRZE

• = – przypisuje wartości do zmiennych
• + – dodaje zmienne
• * – mnoży numery
• / – dzieli numery
• % – reszta z dzielenia (modulo)
• ++ – inkrementacja (dodajemy 1) i++ to to samo co i=i+1
• -- – dzieli numery (odejmujemy 1)

POZOSTAŁE OPERATORY (PRZYPISUJĄCE WARTOŚCI)

Operator	Przykład	Co oznacza
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

PODSUMOWANIE

Z takimi podstawami można już pisać pierwsze funkcje w JavaScript. O funkcjach i ich składni, napiszę w kolejnym artykule.