Wstęp do JavaScript

Karta pracy 2020/2021

Adres:
http://plotkarka.eu/KP/wstep_do_javascript.html
Autor:
Radosław Kowaluk

Umieszczanie skryptów

 

W swoim folderze roboczym utwórz dokument wstep_do_javascript.html (wykorzystaj metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>Wstęp do JavaScript</title>
 </head>
 <body>

 </body>
</html>

Elementy script1, metoda window.alert()2

W elemencie head dopisz kod:

<script type="text/javascript">
window.alert("Witaj świecie 1.");
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Uwaga: atrybut type można pominąć

W elemencie head zmień kod:

<script>
window.alert("Witaj świecie 1.");
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Uwaga: nazwę obiektu window można pominąć

W elemencie head zmień kod:

<script>
alert("Witaj świecie 1.");
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Uwaga: średnik na końcu linii można pominąć

W elemencie head zmień kod:

<script>
alert("Witaj świecie 1.")
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Elementy metoda document.write3

W elemencie body dopisz kod:

<script>
document.write("Witaj świecie 2.")
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Atrybut src 4 elementu script

W pliku skrypt.js wpisz kod: 

document.write("Witaj świecie 3.")

W elemencie head lub body dopisz kod:

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

Zapisz dokument. Sprawdź działanie skryptu.

Atrybuty zdarzeń elementu5 (np. kliknęcie6)

W elemencie head lub body dopisz kod:

<button onclick="alert('Witaj świecie 4.')">
Kliknij
</button>

Zapisz dokument. Sprawdź działanie skryptu.

Uwaga: instrukcje oddzielamy średnikiem

W znaczniku button zmień kod:

<button onclick="alert('Witaj');alert('świecie 4.')">
Kliknij
</button>

Zapisz dokument. Sprawdź działanie skryptu.

  1. Element <script> - zawiera kod lub odwołanie do pliku z kodem skryptu. (UWAGA: W języku JavaScript wielkość liter ma znaczenie.)
  2. Metoda <script>alert() - Wyświetla okno ostrzegawcze z podanym argumentem. Nazwę obiektu <script>window można pominąć. 
    window.alert(wiadomość);
    wiadomość to ciąg znaków, który zostanie wyświetlony w oknie.
  3. Metoda <script>document.write() - Zapisuje argument w obiekcie dokumentu. 
    document.write(tekst);
    tekst jest ciągiem znaków preznaczonym do zapisania w dokumencie.
  4. Atrybut src - definiuje nazwę pliku z kodem skryptu.
  5. Atrybuty zdarzeń elementu - definiują reakcję na zaistniałe zdarzenie w kodzie skryptu lub nazwę funkcji (metody).
  6. Atrybut onclick - definiuje zdarzenie kliknięcia na element.

Zapis i odczyt zawartości elementu

Odczyt wartości elementu input 1

W elemencie body dopisz kod:

<input type="text" value="test1" id="input1"/>
<script>
document.write(input1.value)
</script>

Zapisz dokument. Sprawdź działanie skryptu.

Zapis wartości elementu input, przypisanie 2

W elemencie script dopisz kod:

input1.value=test2

Zapisz dokument. Sprawdź działanie skryptu.

Odczyt i zapis zawartości dowolnego elementu, metoda element.innerHTML()3

W elemencie body dopisz kod:

<p id="p1">
test2
</p>

W elemencie script dopisz kod:

alert(p1.innerHTML)

Zapisz dokument. Sprawdź działanie skryptu.

Metoda prompt()4

W elemencie script dopisz kod:

p1.innerHTML=prompt("Wpisz tekst")

Zapisz dokument. Sprawdź działanie skryptu.

Konsola5

W elemencie script dopisz kod:

console.log("Witaj świecie!");

Zapisz dokument. Sprawdź działanie skryptu. Naciśnij klawisz F12 na klawiaturze, aby wyświetlić wiadomość w widoku konsoli.

Umieść pliki ćwiczeniowe na na serwerze.

  1. Element <input> - pole zależne od atrybutu type. Atrybut type="text" - definiuje pole tekstowe. Atrybut value="" definiuje wartość domyślną (dane znakowe).
  2. Symbol = to operator przypisania. Wartość z lewej strony operatora przpisywana jest do wartości po stronie prawej. 
    wartość = argument;
  3. Własność <script>element.innerHTML - ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich zawartością. 
    znacznik = element.innerHTML;
    element.innerHTML = znacznik;
    znacznik to ciąg znaków z zawartością elementu (w tym elementami potomnymi) jako zwykły HTML. Na przykład: "<p>Jakiś tekst</p>".
  4. Metoda <script>prompt() - Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie tekstu. 
    rezultat = window.prompt(tekst,wartość);
    rezultat jest łańcuchem znaków, który zawiera tekst wprowadzony przez użytkownika lub wartość null.
    tekst jest łańcuchem znaków określającym tekst, jaki ma zostać wyświetlony użytkownikowi.
    wartość jest łańcuchem znaków zawierającym domyślną wartość w polu wprowadzania tekstu. Jest to opcjonalny parametr.
  5. Metoda <script>console.log() obiektu console przeglądarki - Wyświetla tekst w konsoli przeglądarki. 
    console.log();