mgr inż. Wacław Libront * Bobowa 2017-2019

ZSO Bobowa, ul. Długoszowskich 1, 38-350 Bobowa, tel: 0183514009, fax: 0183530221, email: sekretariat@zsobobowa.eu, www: zsobobowa.eu

Lekcja 0

Wstęp do JavaScript

wstęp
abecadło
plotkarka.eu
konsola

Wstęp
JavaScript jest językiem programowania stosowanym najczęściej na stronach internetowych. Służy głównie do zapewnienia interakcji poprzez reagowanie na zdarzenia (np. użytkownik przesuwa myszką lub klika w przycisk), do sprawdzania poprawności danych wprowadzanych za pomocą formularzy lub tworzenia złożonych efektów wizualnych, jak reklamy i gry komputerowe.

Do nauki języka nie jest potrzebna specjalistyczne i płatne oprogramowanie. Wystarczy dowolna przeglądarka internetowa (np. Chrome lub Mozilla) i systemowy Notatnik (choć wygodniej jest posługiwać się bardziej zaawansowanym edytorem tekstu, np. Notepad++).

Cel scenariuszy - nauczyć podstaw programowania za pomocą JavaScript.

Scenariusze wykorzystywane są na lekcjach informatyki rozszerzonej, w szkole policealnej w zawodzie technik informatyk, oraz na zajęciach pozalekcyjnych dla uczniów szczególnie uzdolnionych. Scenariusze są wstępem do programowania i praktycznie „od zera” i „krok po kroku” prowadzą przez typowe algorytmiczne zagadnienia: stałe i zmienne, tablice, instrukcje warunkowe, pętle iteracyjne i logiczne, funkcje, rekurencję, animację aż po programowanie obiektowe i tworzenie interaktywnych animacji i gier z zastosowaniem kodu HTML i CSS oraz grafiki rastrowej i wektorowej SVG.

Większość poradników i scenariuszy lekcji dotyczących nauki programowania opiera się głównie na rozwiązywaniu typowych zadań matematycznych. Prezentowane tutaj podejście od samego początku stawia na grafikę i rysowanie na ekranie różnego rodzaju geometrycznych figur. Autor wychodzi z założenia, że „kolorowe obrazki” bardziej przemawiają do wyobraźni typowego ucznia. Wszelakie matematyczne obliczenia nie są celem „samym w sobie” ale służą realizacji konkretnych zadań (np. animacji kolorowych obiektów w oknie przeglądarki).

Każda z 20 lekcji, przeznaczona jest na 1-2 godziny lekcyjne i składa się krótkiego wprowadzenia i omówienia gotowych wierszy kodu źródłowego, które można wkleić i przetestować na swoim komputerze.

Do każdego scenariusza autor przygotował zestaw praktycznych sprawdzianów. Zadaniem ucznia jest zawsze napisać krótki program w JavaScript, którego wynikiem jest kolorowy rysunek lub animacja w przeglądarce internetowej. Sprawdziany są pomyślane w ten sposób aby doprowadzić w efekcie do napisania własnej gry komputerowej. Wszystkie scenariusze, rysunki, gotowe animacje dostępne są w internecie, na szkolnej stronie www, skąd można je w dowolnej chwili pobrać i przetestować.

Abecadło HTML i JS
Kilka informacji tych, którzy zupełnie "pierwszy raz", aby jako rozpocząć naukę

strona internetowa, to zwykły plik tekstowy, który można przygotować za pomocą systemowego Notatnika (chociaż lepiej stosować bardziej zaawansowane, jak np. Notepad++)
aby przeglądarka internetowa "rozpoznała" nasz plik tekstowy, jako stronę internetową, musi mieć rozszerzenie HTM lub HTML
nazwy plików mogą być dowolne, choć nazwy nie powinny zawierać dużych znaków, polskich diakrytycznych i lepiej tworzyć nazwy jednowyrazowe
wszystkie skrypty umieszczamy pomiędzy znacznikami <script> </script>
choć prawdziwa strona internetowa ma swoją strukturę składającą się ze znaczników, to wystarczy wklejać przykłady z ramek (minimum prawdziwej strony WWW w ramce)

Widok typowej strony WWW z umieszczonym pustym skryptem JS

<html>
<head>
</head>
<body>

<script>
    alert("to jest skrypt");
</script>

</body>

Skrypty JS umieszczamy w dowolnym miejscu strony internetowej, pomiędzy znacznikami: <script> … </script>
Przy wyborze miejsca wstawienia skryptu kieruj się dwoma zasadami: użytkownik powinien najpierw zobaczyć stronę internetową, a dodatki (JS) w drugiej kolejności; elementy strony (przyciski, formularze, itp.) powinny się najpierw wczytać, aby można było je obsługiwać.
Skrypty można (i powinno się jednak) umieszczać w oddzielnych plikach, które ładujemy za pomocą instrukcji src. Pliki takie mają rozszerzenie js (przykład skryptu minimum w ramce). Standardowo instrukcję wczytania pliku JS umieszcza się w nagłówku strony WWW.

// plik "test.js"
function skrypt(){
    alert("to jest skrypt");
}

<html>
<head>
    <script src="test.js"> </script>
</head>
<body>

<script>
    skrypt();
</script>

</body>

plotkarka.eu
Stron, które uczą programowania w JS jest bez liku. Mnie najbardziej przypadła do gustu plotkarka.eu, która zawiera zestaw interaktywnych plansz oraz bardzo pomocne narzędzie: m.in. kodujący stwór (http://plotkarka.eu/CM), który uczy od postaw, krok po kroku zasad programowania. Moje scenariusze oparte są w dużej części na przykładach opisywanych przez kodującego stwora.

Konsola
Przeglądarki posiadają bardzo rozbudowane debuggery (odpluskwiacze), który służy do sprawdzania błędów w skryptach, podglądania zmiennych i badania elementów na stronie WWW. Aby uruchomić debugger naciskamy klawisz F12.