Pierwsze kroki - konsola JavaScript

Witaj w laboratorium genetycznym Parku Jurajskiego! Tak jak naukowcy parku potrzebowali specjalistycznego sprzętu do badania DNA dinozaurów, my również potrzebujemy narzędzia do eksperymentowania z kodem JavaScript. To narzędzie to konsola JavaScript - nasze własne laboratorium do testowania i eksperymentowania z językiem.

Czym jest konsola JavaScript?

Konsola JavaScript to interaktywne środowisko, które pozwala na wykonywanie kodu JavaScript w czasie rzeczywistym i natychmiastowe obserwowanie wyników. To jak mikroskop genetyka - pozwala dokładnie obserwować, jak zachowuje się nasz kod.

Jak uzyskać dostęp do konsoli JavaScript?

W przeglądarce

Każda nowoczesna przeglądarka ma wbudowaną konsolę JavaScript, dostępną przez narzędzia deweloperskie. Oto jak uzyskać do niej dostęp:

1. Chrome, Edge, Firefox, Safari:

   • Naciśnij F12 lub Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
   • Alternatywnie, kliknij prawym przyciskiem myszy na stronie i wybierz "Zbadaj element" lub "Narzędzia deweloperskie"
   • Przejdź do zakładki "Console" / "Konsola"

2. Skrót bezpośredni do konsoli:

   • Ctrl+Shift+J (Windows/Linux)
   • Cmd+Option+J (Mac)

W Node.js

Jeśli masz zainstalowane Node.js, możesz uzyskać dostęp do konsoli JavaScript, wpisując po prostu node w terminalu:

1node
2> console.log("Witaj w świecie dinozaurów!");
3Witaj w świecie dinozaurów!

Używanie konsoli do eksperymentów

Podstawowe operacje

Konsola JavaScript to idealne miejsce do eksperymentowania z prostymi wyrażeniami i operacjami. Podobnie jak laboratorium genetyczne w Parku Jurajskim pozwalało na eksperymenty z DNA, konsola pozwala na testowanie funkcji języka:

1// Proste operacje matematyczne
22 + 3     // 5
310 * 5    // 50
42 ** 8    // 256 (2 do potęgi 8)
5
6// Operacje na ciągach znaków
7"Tyranno" + "saurus" // "Tyrannosaurus"
8"Veloci".toUpperCase() // "VELOCI"
9
10// Operacje logiczne
11true && false // false
12true || false // true
13!true         // false

Używanie console.log()

Metoda console.log() to jeden z najważniejszych narzędzi podczas nauki i debugowania JavaScript - to jak kamera monitorująca w Parku Jurajskim, pozwalająca obserwować, co dzieje się w naszym kodzie:

1console.log("Witaj w Parku Jurajskim!");
2
3const dinozaur = {
4  gatunek: "Velociraptor",
5  wysokosc: 0.5, // metry
6  szybkosc: 40, // km/h
7  niebezpieczny: true
8};
9
10console.log(dinozaur);

Inne przydatne metody obiektu console

Konsola oferuje więcej niż tylko log(). Podobnie jak różne rodzaje sprzętu w laboratorium, każda metoda ma swoje zastosowanie:

1// Ostrzeżenia
2console.warn("Uwaga! Ogrodzenie z Velociraptorami zostało uszkodzone!");
3
4// Błędy
5console.error("KRYTYCZNY BŁĄD: System bezpieczeństwa Parku wyłączony!");
6
7// Informacje
8console.info("Wykluwanie nowego T-Rexa zaplanowane na 15:30");
9
10// Grupowanie logów
11console.group("Status dinozaurów");
12console.log("T-Rex: W klatce");
13console.log("Velociraptory: !!! BRAK DANYCH !!!");
14console.log("Triceratops: W zagrodzie");
15console.groupEnd();
16
17// Mierzenie czasu wykonania
18console.time("Sekwencjonowanie DNA");
19// ... kod, którego czas wykonania chcemy zmierzyć
20console.timeEnd("Sekwencjonowanie DNA");
21
22// Tabele
23console.table([
24  { gatunek: "T-Rex", status: "W klatce", niebezpieczny: true },
25  { gatunek: "Triceratops", status: "W zagrodzie", niebezpieczny: false },
26  { gatunek: "Velociraptor", status: "UCIEKŁ!", niebezpieczny: true }
27]);

Debugowanie z console.assert()

Metoda console.assert() pozwala testować warunki i wyświetla komunikat tylko wtedy, gdy warunek jest fałszywy. To jak system bezpieczeństwa w Parku Jurajskim, który alarmuje tylko gdy coś idzie nie tak:

1const dino = { gatunek: "Velociraptor", zagroda: 7 };
2console.assert(dino.zagroda === 7, "Dinozaur w niewłaściwej zagrodzie!");  // Nic się nie wyświetli
3console.assert(dino.gatunek === "T-Rex", "Nieprawidłowy gatunek!");  // Wyświetli błąd z komunikatem

Wieloliniowe komendy w konsoli

W konsoli przeglądarki możesz również pisać kod na wielu liniach. Użyj Shift+Enter, aby przejść do nowej linii bez wykonywania kodu:

1// Naciśnij Shift+Enter po każdej linii oprócz ostatniej
2function analizaDNA(gatunek) {
3  console.log("Analizowanie DNA dla gatunku: " + gatunek);
4  return `DNA ${gatunek} zawiera sekwencje genetyczne żab`;
5}
6
7analizaDNA("Dilofozaur"); // Naciśnij Enter, aby wykonać funkcję

Automatyczne uzupełnianie i historia komend

Większość konsoli JavaScript oferuje przydatne funkcje, które przyspieszają pracę:

• Automatyczne uzupełnianie - po wpisaniu części nazwy zmiennej lub metody, naciśnij Tab, aby konsola automatycznie uzupełniła nazwę
• Historia komend - użyj strzałek w górę i w dół, aby przeglądać poprzednio wpisane komendy

Przydatne skróty i wskazówki

1. $0 - odniesienie do aktualnie zaznaczonego elementu w zakładce Elements
2. $ - skrót dla document.querySelector(), np. $('div') zwróci pierwszy element div na stronie, a $$ - skrót dla document.querySelectorAll(), np. $$('div') zwróci wszystkie elementy div (jako tablicę)
3. $_ - zawiera wartość ostatniego wykonanego wyrażenia

1Math.random()  // np. 0.7589453290389485
2$_             // zwraca ten sam wynik: 0.7589453290389485

Czyszczenie konsoli

Gdy twoje "laboratorium" staje się zbyt zagracone, możesz wyczyścić konsolę na kilka sposobów:

1. Naciśnij Ctrl+L (Windows/Linux/Mac)
2. Wpisz console.clear()
3. Kliknij ikonę kosza w konsoli przeglądarki

Inne typy konsoli przydatne do nauki JavaScript

Poza konsolą przeglądarki i Node.js, istnieją inne środowiska, które ułatwiają eksperymenty z JavaScript:

1. JSFiddle, CodePen, CodeSandbox - platformy online pozwalające na pisanie i testowanie kodu JavaScript wraz z HTML i CSS
2. RunJS - aplikacja desktopowa funkcjonująca jako notatnik JavaScript z natychmiastową ewaluacją
3. Quokka.js - rozszerzenie do edytorów kodu, umożliwiające podgląd wyników w czasie rzeczywistym

Ćwiczenie praktyczne

Czas na własne eksperymenty! Otwórz konsolę JavaScript w swojej przeglądarce i wypróbuj poniższe przykłady:

1. Utwórz obiekt reprezentujący dinozaura z różnymi właściwościami

   1const trex = {
   2  nazwa: "Tyrannosaurus Rex",
   3  wysokosc: 5.6,
   4  waga: 8000,
   5  prędkość: 27,
   6  dietaMięsna: true
   7};

2. Wypróbuj różne metody wyświetlania informacji o dinozaurze

   1console.log(trex);
   2console.table(trex);
   3console.log(`${trex.nazwa} waży ${trex.waga} kg i biega z prędkością ${trex.prędkość} km/h`);

3. Stwórz tablicę dinozaurów i przefiltruj ją, aby znaleźć wszystkie mięsożerne dinozaury

   1const dinozaury = [
   2  { nazwa: "T-Rex", dietaMięsna: true, waga: 8000 },
   3  { nazwa: "Velociraptor", dietaMięsna: true, waga: 15 },
   4  { nazwa: "Triceratops", dietaMięsna: false, waga: 9000 },
   5  { nazwa: "Brachiosaurus", dietaMięsna: false, waga: 50000 }
   6];
   7
   8const miesozerne = dinozaury.filter(dino => dino.dietaMięsna);
   9console.table(miesozerne);

Podsumowanie

Konsola JavaScript to twoje osobiste laboratorium do eksperymentowania z kodem. Podobnie jak naukowcy w Parku Jurajskim musieli najpierw testować swoje teorie w laboratorium, zanim zastosowali je na żywych dinozaurach, tak i ty powinieneś używać konsoli do eksperymentowania z JavaScript, zanim zaimplementujesz kod w prawdziwych aplikacjach.

W następnych lekcjach będziemy często korzystać z konsoli do testowania nowych koncepcji i funkcji JavaScript. Im więcej eksperymentujesz, tym lepiej rozumiesz działanie języka - podobnie jak dr Henry Wu, główny genetyk Parku Jurajskiego, który poprzez ciągłe eksperymenty stał się ekspertem od DNA dinozaurów.

Pamiętaj: w przeciwieństwie do eksperymentów w Parku Jurajskim, eksperymenty w konsoli JavaScript są całkowicie bezpieczne - żaden T-Rex nie ucieknie z twojej przeglądarki!

1// Laboratorium DNA - Katalogowanie Typów Danych
2// Ćwiczenie: Praca z różnymi typami danych
3
4// String - tekst
5const dinoName = "Tyrannosaurus Rex";
6console.log("Gatunek (string):", dinoName, typeof dinoName);
7
8// Number - liczba
9const dinoAge = 68000000;
10console.log("Wiek (number):", dinoAge, typeof dinoAge);
11
12// Boolean - wartość logiczna
13const isDangerous = true;
14console.log("Niebezpieczny (boolean):", isDangerous, typeof isDangerous);
15
16// null i undefined
17const unknownDNA = null;
18let pendingSample;
19console.log("Nieznane DNA (null):", unknownDNA, typeof unknownDNA);
20console.log("Oczekująca próbka (undefined):", pendingSample, typeof pendingSample);
21
22// Twoje zadanie:
23// 1. Stwórz zmienne różnych typów dla profilu dinozaura
24// 2. Użyj typeof do sprawdzenia typów
25// 3. Wyświetl wszystkie dane w konsoli
26
27// Twój kod tutaj:
28