Konsola JavaScript przeglądarki

workshop: #js1-ws1-console.html

Warsztat #1: Konsola JavaScript

Przygotowanie

Otwórz narzędzia deweloperskie przeglądarki
Przejdź na zakładkę Konsola (console)
Wykonuj tam polecenia / instrukcje z poniższych przykładów

1. Praca w Konsoli

Pracując w konsoli deweloperskiej:

aby wyświetlić zmienną nie jest wymagane użycie instrukcji console.log()
by przejść do nowego wiersza bez wykonywania kodu naciśnij przyciski: SHIFT oraz ENTER
można przywołać poprzednio wykonywaną instrukcję przy użyciu strzałek klawiatury: ↑ oraz ↓ nawet po odświeżeniu strony

2. Komentarze w skrypcie oraz wyświetlanie danych w Konsoli

// ko.men=ta,rz jednoliniowy
/* komentarz
blokowy */
console.log('załadowanie dokumentu');
console.table('Hej! To ja, Twój skrypt');
console.warn('Uwaga');
console.error('Co TY robisz?!');

3. Praca na żywo bez skryptu

≫ var var1 = 'test';
≫ var1; // w konsoli nie jest wymagane użycie console.log();
≫ var var1 = 'nadpisz';
≫ var1;
≫ var2;
≫ var var2 = var1;
≫ var2;
≫ let use = 'one time';
≫ use;
≫ let use = 'second';
≫ use = 'second';
≫ v2;
≫ v2; // naciśnij przyciski: SHIFT oraz ENTER by przejść do nowego wiersza bez wykonywania kodu
let v2 = 'fly';
≫ v2;
≫ const pi = 3.14;
pi
≫ pi = 9.81;
≫ const pi = 9.81;
≫ var grav = '9.81';

4. Załączanie skryptu do dokumentu HTML

Szablon dokumentu HTML

<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS-1 - warsztat #1</title>
    <script>
    </script>
  </head>
  <body>
    Strona TWOJE_NAZWISKO_IMIE_KLASA
    <script>
    </script>
  </body>
</html>

Zamieszczanie skryptu wewnatrz dokumentu HTML

<script>
  console.log('W tym wierszu można wstawiać instrukcje JS');
</script>

Zamieszczanie skryptu w zewnetrznym pliku JS i załączanie go do dokumentu HTML

<script src="w_tym_pliku_umieść_instrukcje.js"></script>

5. Zadanie praktyczne

Użyj szablonu dokumentu z punktu #4 i zapisz go jako plik pod nazwą js1-ws1.html
Uzupełnij znacnziki SCRIPT kodem JavaScript z punktu #2 uwzględniając, że...
- ... instrukcja *.log() zostanie umieszczona w części nagłówkowej dokumentu...
- ... a pozostałe instrukcje console.*() zostaną umieszczone w części ciała strony.
Kod z punktu #3 umieść w zewnętrznym pliku i załącz go przed zamknięciem znacznika BODY.
Napraw powstałe błędy wyświetlane w konsoli

Zasoby lekcji

Przygotowanie

Szablon dokumentu HTML

Zamieszczanie skryptu wewnatrz dokumentu HTML

Zamieszczanie skryptu w zewnetrznym pliku JS i załączanie go do dokumentu HTML