Wstęp do JavaScript

Karta pracy 2017/2018

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 pliki szablonów, 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 alert2 obiektu window

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ąć.
  3. Metoda <script>document.write() - Zapisuje argument w obiekcie dokumentu.
  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 wartości dowolnego elementu, metoda e.innerHTML3

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.

Wgrywanie plików na serwer

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 = - operator przypisania. Wartość z lewej strony operatora przpisywana jest do wartości po stronie prawej.
  3. Metoda <script>element.innerHTML - ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.
  4. Metoda <script>prompt() - Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie tekstu.