Podstawy pracy z DOM w JavaScript

W poprzednich lekcjach uczyliśmy się podstawowych możliwości języka JavaScript. Począwszy od tej lekcji zajmiemy się tym, do czego właściwie JavaScript jest przeznaczony - będziemy zmieniać elementy strony HTML i reagować na działania użytkownika. Nasze skrypty staną się bardziej widowiskowe i użyteczne.

We wszystkich następnych lekcjach twój kod JavaScript powinien być umieszczony poniżej kodu HTML, do którego się odnosi. To znaczy struktura twojego kodu powinna wyglądać następująco:

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		twoje znaczniki html
		
		<script>
			twój kod JavaScript
		</script>
	</body>
</html>

Lub następująco, jeśli piszesz kod JavaScript w oddzielnym pliku:

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		twoje znaczniki html
		
		<script src="index.js"></script>
	</body>
</html>

W dalszej części dla zwięzłości nie będę przytaczał pełnego kodu, a będę po prostu wskazywać, co trzeba pisać w części HTML, a co - w części JavaScript.

Utwórz plik z podaną strukturą kodu.