instrukcje wyjścia

W języku JavaScript wykorzystujemy następujące pojecenia umożliwiające wyświetlanie danych na ekranie:

• wyświetlenie bezpośrednio na ekran document.write()
  użycie

  	<script>
  		document.write(1+2);
  	</script>

  Wykonanie powyższego kodu spowoduje wyświetlenie liczby 3.
  Wyświetlanie tekstu omówiłem w dziale rrogacz.pl/js-teksty

  Uwaga!
  Użycie instrukcji po innych poleceniach powoduje kasowanie poprzednich zapisów.
• wyświetlenie w oknie alertu window.alert()
  użycie

  W JavaScript obiekt window jest globalny, możemy zatem go pominąć przy zapisie kodu.
  Poprawny jest zapis:

  	<script>
  		alert(1+2);
  	</script>

  Wykonanie powyższego kodu spowoduje wyświetlenie liczby 3 w oknie alertu bezpośrednio po uruchomieniu skryptu strony.

  Wywołanie okna zdecydowanie częściej przypisywane jest jako obsługa zdarzenia kliknięcia na wybranym obiekcie, np. przycisku.

  	<button onclick="alert(1+2);"> przykład </button>

  Uwaga!
  Styl okna zależny jest od przeglądarki.

  przykład
• zapis do elementu HTML: innerHTML lub innerText
  Uwaga!
  Znaczniki innerHTML interpretuje znaczniki HTML.
  Znaczniki innerText "traktuje" cały zapis jako zwykły tekst.
  użycie

  Aby uzyskać dostęp do elementu HTML należy użyć metody: document.getElementById(id).
  Atrybut id definiuje element HTML.

  ---

  Właściwość innerHTML:

  	<p id="demo"></p>								
  	<script>
  		document.getElementById("demo").innerHTML = "wynik działania <b>2 + 1 = 3</b>";
  	</script>

  Wykonanie powyższego kodu spowoduje przypisanie kodu do znacznika p i wyświetlenie:

  wynik działania 2 + 1 = 3

  ---

  Właściwość innerText:

  	<p id="demo"></p>								
  	<script>
  		document.getElementById("demo").innerText = "wynik działania <b>2 + 1 = 3</b>";
  	</script>

  Wykonanie powyższego kodu spowoduje przypisanie kodu jako tekstu do znacznika p i wyświetlenie:

  wynik działania <b>2 + 1 = 3</b>

• zmiana stylu elementu HTML: style
  użycie

  Ponownie korzystamy z metody: document.getElementById(id).
  Atrybut id definiuje element HTML.

  ---

  Pełen zapis wymaga użycia pola style oraz pola będącego właściwością CSS.
  Pamiętać należy, że nazwy oddzielone myślnikiem łączymy, drugą część zapisując wielką literą, np. dla zmiany koloru tła (background-color) zapisujemy: document.getElementById(id).style.backgroundColor = 'red';

  	<p id="demo"></p>								
  	<script>
  		document.getElementById("demo").style.backgroundColor = "red";
  	</script>

  Wykonanie powyższego kodu spowoduje zmianę koloru tła znacznika p na czerwony.

• wyświetlenie w konsoli (F12) console.log()
  użycie

  					
  	<script>
  		console.log(1+2);
  	</script>

  Metody używa się w celu debugowania.
  W przeglądarkach aktywuje się naciskając F12 następnie wycieramy [console]

• drukowanie strony: window.print()

  Podobnie, jak dla okna alertu, metoda wywołwana jest po kliknięciu na przycisku:.

  <button onclick="window.print(1+2);"> drukuj zawartość strony </button>

pobieranie danych od użytkownika

• podstawowa metoda pobierania danych: prompt(pytanie, wartość domyślna)
  użycie

  W JavaScript używamy jako obsługi kliknięcia.
  Metoda zwraca wartość wprowadzoną przez użykownika w postaci łańcucha znaków (strng), którą należy przypisać do zmiennej, następnie np. wyświetlić:

  	<p id="imie">Imię użytkownika</p>
  	<button onclick="document.getElementById('imie').innerHTML = prompt('podaj imię', 'Ryszard');"> wprowadź imię </button>

  Imię użytkownika

  wprowadź imię
• potwierdzanie wykonania operacji: confirm(pytanie)
  użycie

  W JavaScript używamy jako obsługi kliknięcia.
  Metoda zwraca wartość true lub false.

  	<button onclick="confirm('Czy skasować wszystkie dane na dysku?');"> potwierdź operację </button>

  potwierdź operację

  Uwaga!
  Metoda wywoływana jest w instrukcjach warunkowych.