Utilizziamo i cookie per migliorare la tua esperienza sul sito
Informativa sulla Privacy
OK
CodeWorlds

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.querySelectorAll(), np. $('div') zwróci wszystkie elementy div na stronie
  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!

Vai a CodeWorlds→