• Artykuł

          

Kurs JavaScript - Kod - wyrażenia  Udostępnij na: Facebook

Autor: Bożena Jurczyk

Opublikowano: 2011-12-09

Wyrażeniem w języku JavaScript możesz nazwać dowolny zbiór zmiennych i operatorów, które mogą ewaluować do pojedynczej wartości, czyli do liczby, ciągu znaków lub wartości logicznej. Mówiąc o wyrażeniach, możesz mieć na myśli takie, które zostają przypisane do zmiennej oraz takie, które dają w rezultacie pewną wartość.

Przed wykonaniem zadań powinieneś wiedzieć:

  • Jak tworzyć strony internetowe
  • Jak wyświetlić pop-up w JavaScript

Po wykonaniu zadań nauczysz się:

  • operować na prostych wyrażeniach w języku JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, w jaki sposób posługiwać się wyrażeniami w języku JavaScript.

Operowanie na liczbach i znakach

Jednym z najczęściej spotykanych wyrażeń są takie, które operują na liczbach i znakach, bądź ciągach znaków. Więcej informacji o operatorach znajdziesz w Kod – operatory oraz w samouczku Kod JavaScript – operatory.

Informacja
Warto zwrócić uwagę na nazwy, które będą nadawane zmiennym. Pamiętaj, aby były one proste i zrozumiałe – mają bowiem pomóc zrozumieć, co dzieje się w prezentowanym kodzie.
  1. Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
  2. W pojawiającym się oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:
(24+44*6)/12-15;

Rys. 1. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

  1. Wciśnij Enter lub przycisk Run Script.
  2. Na ekranie konsoli (oznaczonym 3 na Rys. 1.) powinien pojawić się wynik o wartości 9 (Rys. 2.).

Rys. 2. Ekran konsoli.

Wartości liczbowe, wprowadzane przez użytkownika

Wartości, wprowadzane przez użytkownika (np. pobierane z pól tekstowych), nie są automatycznie konwertowane do wartości liczbowych. Aby się o tym przekonać, wykonaj następujące zadanie:

  1. Znajdź pole tekstowe na stronie jTest.html i wpisz liczbę 12.
  2. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:
val1 = document.getElementById("myText").value;
val2 = val1+val1;
Informacja
Alternatywną funkcją do document.getElementById() jest funkcja document.getElementsByName(), która pełni podobną rolę, z tą tylko różnicą, że zamiast atrybutu id wykorzystuje atrybut name, a w wyniku daje kolekcję elementów o danej nazwie. Więcej przeczytasz w encyklopedii pod hasłem Jak uzyskać dostęp do elementu strony w JavaScript.
  1. Wciśnij Enter.
  2. W oknie konsoli powinien pojawić się wynik "1212".
Informacja

Prawdopodobnie spodziewałeś się wyniku 16? Zatem skąd wynik "1212"? Otóż język JavaScript jest językiem skryptowym. W związku z tym przeglądarka nie wie, czy wpisywaną wartością jest liczba 12, czy ciąg znaków "12". Aby uzyskać działanie na liczbach, a nie na ciągach znaków, dopisz przed wartościami zmiennych znak "+" w następujący sposób:

val2 = +val1 + +val1;
  1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:
val1 = document.getElementById("mojTekst").value;
val2 = +val1 + +val1;
  1. Wciśnij Enter.
  2. W oknie konsoli powinien pojawić się wynik 22.
  3. Sprawdź wynik działania następujących operacji:
val2 = 2*val1;
val2 = val1*val1;
Informacja
W przypadku mnożenia nie ma wątpliwości, jakiego typu zmienne są podane.

Łączenie i dodawanie

  1. Znajdź pole tekstowe na stronie jTest.html i wpisz liczbę 12.
  2. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:
val1 = document.getElementById("mojTekst").value;
val2 = 14;
val3 = 5;
val4 = val1 + val2 * val3;
  1. Wciśnij Enter.
  2. W oknie konsoli powinien pojawić się wynik "1270".

Przetestuj również następujące wyrażenia (każde sprawdzaj oddzielnie):

  1. val5 = val2 * val3 + val1;
  2. val6 = val2 + val3;
  3. val7 = val2 + val3 + "";
  4. val8 = "" + val2 + val3;
Informacja

Wyniki, jakie otrzymasz to kolejno: "7012", 19, "19", "145". Tylko w punkcie 2. otrzymałeś wartość liczbową. W pozostałych, otrzymanym wynikiem był ciąg znaków, którego wartość zależała od użytego operatora i jeżeli było to dodawanie, to również od miejsca wystąpienia dowolnego ciągu znaków w wyrażeniu (ciąg "" jest pustym ciągiem znaków). Przyczyną takiego działania jest to, że przy łączeniu zmiennych różnego typu i zmiennych znakowych, za pomocą znaku "=", pozostałe zmienne zamieniane są również na ciągi znaków.

Więcej informacji o operatorach znajdziesz w encyklopedii pod hasłem Jak działają operatory w JavaScript.

Wyrażenia warunkowe

Wynikiem wyrażeń warunkowych jest zawsze jedna z dwóch wartości, otrzymana na podstawie spełnienia warunku, który zwróci prawdę (true) lub fałsz (false). Więcej na ten temat przeczytasz w samouczku Instrukcje warunkowe – if. Ogólny schemat wyrażenia warunkowego, który jest uproszczeniem instrukcji warunkowych to:

(warunek) ? val1 : val2

co oznacza że, jeśli warunek jest spełniony, to wynikiem wyrażenia będzie val1, w przeciwnym przypadku będzie wybrana wartość val2.

  1. Znajdź pole tekstowe na stronie jTest.html i wpisz liczbę 128.
  2. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:
val1 = document.getElementById("mojTekst").value;
(val1%2 == 0) ? alert(val1 + " jest liczbą parzystą") : alert(val1 + " nie jest liczbą parzystą")
  1. Wciśnij Enter.
  2. Na ekranie powinno pojawić się okno:

Informacja
Wyrażenie warunkowe sprawdza, czy wprowadzona liczba jest liczbą parzystą. Jeśli warunek jest spełniony, to alert wyświetla odpowiednią informację.

Podsumowanie

W tym samouczku dowiedziałeś się, czym są wyrażenia w JavaScript i jak je używać w skryptach.

W kolejnym samouczku nauczysz się, jak stosować komentarze, Kod JavaScript – komentarze.

Dodatkowo zobacz: