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

  1. wstęp
  2. abecadło
  3. plotkarka.eu
  4. 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ę

Widok typowej strony WWW z umieszczonym pustym skryptem JS

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

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

</body>

// 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.