edusi.pl Portal edukacyjny

Temat 1: Podstawy JavaScript – rola, składnia i osadzanie

📘 Teoria

🔹 Charakterystyka JavaScript

  • Język skryptowy wykonywany po stronie klienta (przeglądarka)
  • Nie wymaga kompilacji – interpretowany w czasie działania
  • Służy do tworzenia interaktywnych stron WWW

🔹 Zastosowania JavaScript

  • modyfikacja zawartości strony (DOM)
  • obsługa zdarzeń użytkownika
  • walidacja formularzy
  • obsługa daty i czasu
  • okna dialogowe

🔹 JavaScript vs Java

  • JS – interpretowany, działa w przeglądarce
  • Java – kompilowana, działa na JVM
  • JS – dynamiczne typowanie
  • Java – typowanie statyczne

🔹 Osadzanie JavaScript

W dokumencie HTML:

<script>
console.log("Hello");
</script>

Plik zewnętrzny:

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

🔹 Atrybuty script

  • async – skrypt ładowany równolegle i wykonywany natychmiast
  • defer – wykonywany po załadowaniu HTML
<script src="app.js" defer></script>

🔹 Konsola i debugowanie

  • console.log() – wypisywanie danych
  • Konsola przeglądarki (F12)

🔹 Komentarze

// komentarz jednoliniowy

/* komentarz
wieloliniowy */

🧠 Ćwiczenia praktyczne

  1. Utwórz plik HTML i dodaj alert
  2. Podłącz plik JS zewnętrzny
  3. Wyświetl tekst w konsoli
  4. Dodaj komentarze do kodu
  5. Użyj atrybutu defer
<script src="app.js" defer></script>

// app.js
console.log("Test");

📊 Zadania

  1. Wyjaśnij różnicę między JS a Java
  2. Podaj 3 zastosowania JavaScript
  3. Co robi console.log()?
  4. Do czego służy defer?
  5. Dlaczego nie zaleca się inline JS?

📝 Test (10 pytań)

1. JavaScript działa:

2. JS jest językiem:

3. console.log służy do:

4. defer oznacza:

5. async oznacza:

6. komentarz w JS:

7. JS służy do:

8. script src oznacza:

9. JS może:

10. Konsola to:

👨‍🏫 Dla nauczyciela

Warto przeprowadzić lekcję w trybie live coding. Uczniowie powinni samodzielnie używać konsoli przeglądarki i analizować działanie skryptów.