Learning Log #6: Java vs JavaScript – zaczynam drugi język programowania
Poniedziałek, 1 lipca 2026. Otwieram nowy projekt w VS Code. Nie IntelliJ (Java IDE). VS Code.
Tworzę plik: index.html. Potem script.js. Nie .java.
Zaczynam naukę JavaScript.
Po 6 miesiącach z Javą (styczeń-czerwiec 2026) postanowiłam dodać drugi język. Dlaczego JavaScript? Dlaczego teraz? Czy Java mi pomoże czy przeszkodzi?
Trzy tygodnie później (dziś) mogę powiedzieć: nauka drugiego języka programowania jest ZUPEŁNIE inna niż nauki pierwszego. Masz fundamenty (zmienne, pętle, funkcje), ale szczegóły są diametralnie różne. To jak uczyć się francuskiego po hiszpańskim – podobne, ale gwarantowany chaos w głowie.
Dziś w Learning Log #6 opowiem Wam dlaczego wybrałam JavaScript, jak zaczynałam, co jest podobne do Javy (więcej niż myślałam!), co kompletnie inne (WTF momenty!), i jakie zasoby do nauki wykorzystuję.
Dlaczego JavaScript? Decyzja strategiczna
Opcje, które rozważałam po zakończeniu podstaw Java:
1: Spring Framework (kontynuacja Java)
- Zalety: Naturalna progresja, rozwój zaplecza, rynek pracy
- Wady: Ciężkie przy dzieciach, wymaga dużo czasu
2: Python
- Zalety: Łatwy, wszechstronny, data science, automatyzacja
- Wady: Zero synergii z WordPressem
3: JavaScript
- Zalety: OGROMNA synergia z WordPress, umiejętności front-endowe, natychmiastowe wykorzystanie, lżejszy niż Spring
- Wady: „Dziwny język” (słyszałam), może mylące po Javie
Wybrałam JavaScript. Dlaczego:
1. Synergia z WordPressem
Aktualnie: Robię strony WordPress z page builderami (Elementor)
- Mało custom kodu
- Ograniczone możliwości
- Nie mogę zrobić custom funkcjonalności, które bym chciała
Z JavaScriptem: Mogę dodawać:
- Niestandardowe interakcje (animacje, efekty)
- Formularze zaawansowane (walidacja, multi-step)
- Kalkulatory (cenniki dynamiczne)
- Niestandardowa funkcjonalność (cokolwiek wymyślę)
2. Natychmiastowe praktyczne zastosowanie
Java projekt: Therapy Manager – używam tylko ja
JavaScript: Mogę użyć w KAŻDYM projekcie dla każdego od jutra
Motywacja: Widzę natychmiastowy rezultat = łatwiej się uczyć
3. Łatwiejszy balans życie/nauka niż Spring
Spring: Wymaga 20-30h tygodniowo, żeby ogarnąć (backend, bazy danych, API, deployment)
JavaScript: Mogę uczyć się 1h dziennie i widzieć progres
Z dziećmi: JavaScript = realistyczne, Spring = przytłaczający
4. Umiejętności frontendowe można sprzedać
Backend (Java/Spring): Duża konkurencja, wymaga doświadczenia
Frontend (JS/React): Też konkurencja, ale łatwiej pokazać portfolio (strony działają w przeglądarce)
Perspektywa freelancera: Frontend łatwiej „sprzedać” klientom (widzą efekt natychmiast)
Pierwsze kroki – od czego zaczęłam
Tydzień 1 (1-7 lipca): Setup i podstawy składni
Narzędzia, które zainstalowałam:
1. VS Code (zamiast IntelliJ)
- Lekki, szybki
- Rozszerzenia: ESLint, Prettier, Live Server
- Czas setup: 30 minut
2. Node.js
- Do uruchamiania JS poza przeglądarką
- Package manager (npm) – jak Maven dla Javy
- Instalacja: 10 minut
3. Chrome DevTools
- Już miałam (przeglądarka)
- Konsola do testowania kodu
- Debugger
Total setup: 1 godzina (vs Java było 3 godziny – IntelliJ, JDK, Maven)
Pierwszy program – Hello World:
Java (dla porównania):
java
`public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}`JavaScript:
javascript
console.log("Hello World");Reakcja: „WAIT, to wszystko?! Gdzie klasa? Gdzie main?”
Welcome to JavaScript – język bez szablonów.
Mój plan nauki JavaScript:
1. Fundamenty (lipiec):
- Składnia (zmienne, typy, operatory)
- Funkcje i scope
- Tablice i obiekty
- DOM manipulation (zmiana HTML/CSS przez JS)
2. Średniozaawansowany (sierpień):
- ES6+ funkcje (funkcje strzałkowe, destrukturyzacja, promises)
- Asynchroniczność (async/await, fetch API)
- Events i event handling
3. Framework (wrzesień – może):
- React basics
- Albo zostać przy vanilla JS (czystym JS) i opanować dobrze
Źródła nauki:
- FreeCodeCamp (darmowy kurs online) – główne
- JavaScript.info (dokumentacja) – odniesienie
- YouTube: Traversy Media, Web Dev Simplified
- Praktyka: Projekty WordPress
Czas: 1h dziennie (vs Java było 1.5h) = lżejsze podejście
Co jest PODOBNE do Javy – zaskakujący!
1. Fundamenty programowania (koncepcje)
Zmienne:
Java:
java
int age = 30;
String name = "Anna";
boolean isActive = true;JavaScript:
javascript
let age = 30;
let name = "Anna";
let isActive = true;Podobne: Koncept zmiennej, przechowywanie wartości
Różne: let zamiast typu (int, String), JS = dynamicznie typowane
Pętle:
Java:
java
`for (int i = 0; i < 5; i++) {
System.out.println(i);
}`JavaScript:
javascript
`for (let i = 0; i < 5; i++) {
console.log(i);
}`Identyczne! (prawie – let zamiast int)
Warunki:
Java:
java
`if (age > 18) {
System.out.println("Adult");
} else {
System.out.println("Minor");
}`JavaScript:
javascript
`if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}`Identyczne! (prawie – console.log zamiast System.out.println)
Spostrzeżenia: Fundamenty są takie same. Java nauczyła mnie myślenia programistycznego – to przenosi się 1:1 do JS.
2. Funkcje (podobne, ale…)
Java (metoda):
java
`public int add(int a, int b) {
return a + b;
}`JavaScript (funkcja):
javascript
`function add(a, b) {
return a + b;
}`Podobne:
- Słowo kluczowe
function(vspublic intw Javie) - Instrukcja: Return
- Parametry
Różne:
- Brak typów (a, b – nie wiesz czy int, string, object)
- Brak modyfikatory dostępu (public, private)
3. Tablice (arrays)
Java:
java
`int[] numbers = {1, 2, 3, 4, 5};
System.out.println(numbers[0]); // 1`JavaScript:
javascript
`let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1`Prawie identyczne!
Różnica: JS arrays są bardziej elastyczne (możesz mix typów)
javascript
`let mixed = [1, "two", true, {name: "Anna"}]; // OK w JS
// W Javie: BŁĄD (tablica musi mieć jeden typ)`4. Obiekty vs Klasy
Java (klasa):
java
`public class Person {
private String name;
private int age;
public Person(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
}
Person person = new Person("Anna", 30);`JavaScript (obiekt):
javascript
`const person = {
name: "Anna",
age: 30,
getName: function() {
return this.name;
}
};`Podobne: Koncept „obiektu” (dane + metody)
Różne: JS nie wymaga klasy! (można tworzyć obiekty dosłownie)
JavaScript ma też klasy (ES6):
javascript
`class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
const person = new Person("Anna", 30);`To wygląda prawie jak Java! Ale pod spodem JS działa inaczej (prototypy, nie prawdziwe klasy).
Co jest KOMPLETNIE RÓŻNE – WTF momenty
1. Typy dynamiczne (loosely typed)
Java: Statycznie typowane
java
`int number = 5;
number = "Hello"; // BŁĄD kompilacji!`JavaScript: Dynamicznie typowane
javascript
`let number = 5;
number = "Hello"; // OK! 😱
console.log(number); // "Hello"`WTF moment #1: „Czekaj, mogę zmienić typ zmiennej w trakcie?!”
Plusy Elastyczność, mniej kodu
Minusy: Błędy runtime (nie kompilacji), trudniejszy debugging
Moja reakcja: Początkowo mylące. Teraz doceniam elastyczność, ale brakuje bezpieczeństwa typu Java.
2. == vs === (porównywanie)
Java:
java
`int a = 5;
int b = 5;
if (a == b) { } // true`JavaScript:
javascript
`let a = 5;
let b = "5";
console.log(a == b); // true 😱 (porównuje wartość, konwertuje typy)
console.log(a === b); // false (porównuje wartość I typ)`WTF moment #2: „Czemu jest DWA operatory porównania?!”
Zasada: W JS ZAWSZE używaj === (ścisła równość), nigdy == (luźna równość)
Przykład dlaczego:
javascript
`console.log(0 == false); // true 😱
console.log(0 === false); // false (poprawnie!)`3. var vs let vs const (szaleństwo zakresów)
Java: Wszystko ma zakres bloku
java
`{
int x = 5;
}
System.out.println(x); // BŁĄD - x nie istnieje poza blokiem`JavaScript: var ma zakres funkcji (WTF), let/const mają zakres bloku
javascript
`// VAR (stary sposób - unikaj!)
function test() {
if (true) {
var x = 5;
}
console.log(x); // 5 😱 (x istnieje poza if!)
}
// LET (nowy sposób - używaj!)
function test() {
if (true) {
let y = 5;
}
console.log(y); // ERROR (jak w Javie - dobrze!)
}`WTF moment #3: „Czemu var działa inaczej niż w normalnym języku?!”
Zasada: Nigdy nie używaj var. Zawsze let (zmienne) lub const (stałe).
4. Hoisting (podnoszenie deklaracji)
Java: Musisz zadeklarować zmienną PRZED użyciem
java
`System.out.println(x); // BŁĄD - x nie istnieje
int x = 5;`JavaScript: Deklaracje są „podnoszone” na górę
javascript
`console.log(x); // undefined (nie błąd!) 😱
var x = 5;`Co się dzieje:
javascript
`// JS interpretuje to jako:
var x; // deklaracja "podniesiona"
console.log(x); // undefined
x = 5; // przypisanie`WTF moment #4: „Jak to możliwe, że kod działa, ale źle?!”
Z let jest lepiej:
javascript
console.log(y); // ERROR (jak w Javie)
let y = 5;Zasada: Używaj let/const, unikaj var = unikasz problemy z podnoszeniem.
5. Funkcje są „first-class citizens” (obiekty pierwszej klasy)
Java: Funkcje (metody) należą do klas. Nie możesz przekazać metody jak zmienną.
JavaScript: Funkcje można przypisać do zmiennej, przekazać jako argument, zwrócić z funkcji
javascript
`// Funkcja w zmiennej
const sayHello = function() {
console.log("Hello");
};
// Przekazanie funkcji jako argument
function greet(name, callback) {
console.log("Hi " + name);
callback();
}
greet("Anna", sayHello);
// Output:
// Hi Anna
// Hello`WTF moment #5: „Funkcja w zmiennej?! Funkcja jako parametr?!”
Java odpowiednik (rodzaj):
java
`// Java 8+ lambda
Runnable sayHello = () -> System.out.println("Hello");
sayHello.run();`Podobne: Java lambdy, ale w JS to jest główna funkcja, w Javie dodane później.
6. undefined vs null (dwa „nic”)
Java: null (tylko jeden „brak wartości”)
JavaScript: undefined I null (dwa różne „nic”)
javascript
`let a; // zadeklarowana, nie przypisana
console.log(a); // undefined
let b = null; // explicite "brak wartości"
console.log(b); // null
console.log(typeof a); // "undefined"
console.log(typeof b); // "object" 😱 (JS bug od początku języka)`WTF moment #6: „Czemu DWA rodzaje 'nic’?! I czemu typeof null to 'object’?!”
Zasada:
undefined= JS default (zmienna istnieje, nie ma wartości)null= programista wyraźnie mówi „tutaj jest nic”
7. Brak TypeScript (ale mogę użyć później)
Java: Kompilator sprawdza typy PRZED uruchomieniem
java
int x = "Hello"; // BŁĄD kompilacjiJavaScript: Błędy widoczne DOPIERO w runtime
javascript
let x = 5;
x.toUpperCase(); // ERROR runtime! (number nie ma toUpperCase)Problem: Łatwo zrobić błąd, który widzisz dopiero, gdy uruchamiasz.
Rozwiązanie: TypeScript (JavaScript + typy)
typescript
let x: number = 5;
x = "Hello"; // BŁĄD kompilacji (jak Java!)Mój plan: Najpierw opanuję vanilla JS, potem może TypeScript (wrzesień-październik).
Pierwszy mini-projekt w JavaScript – Kalkulator interaktywny
Po tygodniu nauki (7.07) zrobiłam pierwszy mini-projekt.
Co: Kalkulator terapii – użytkownik wpisuje liczbę sesji i koszt, dostaje podsumowanie
Technologie:
- HTML (struktura)
- CSS (wygląd)
- JavaScript (logika)
HTML:
html
`<!DOCTYPE html>
<html>
<head>
<title>Therapy Cost Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<h1>Kalkulator Kosztów Terapii</h1>
<label>Liczba sesji miesięcznie:</label>
<input type="number" id="sessions" placeholder="np. 8">
<label>Koszt jednej sesji (zł):</label>
<input type="number" id="costPerSession" placeholder="np. 75">
<button onclick="calculateTotal()">Oblicz</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>`JavaScript (script.js):
javascript
`function calculateTotal() {
// Pobierz wartości z inputów
const sessions = document.getElementById('sessions').value;
const costPerSession = document.getElementById('costPerSession').value;
// Walidacja
if (!sessions || !costPerSession) {
alert('Wypełnij oba pola!');
return;
}
if (sessions <= 0 || costPerSession <= 0) {
alert('Liczby muszą być większe od zera!');
return;
}
// Kalkulacja
const total = sessions * costPerSession;
// Wyświetl wynik
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h2>Wynik:</h2>
<p><strong>Sesji:</strong> ${sessions}</p>
<p><strong>Koszt sesji:</strong> ${costPerSession} zł</p>
<p class="total"><strong>TOTAL:</strong> ${total} zł/miesiąc</p>
`;
}
Co się nauczyłam:
✅ Manipulacja DOM – `document.getElementById()`
✅ Obsługa zdarzeń – `onclick=”calculateTotal()”`
✅Walidacja danych wejściowych – sprawdzanie czy pola wypełnione
✅ Szablony literałów – „ `${variable}` „ (lepsze niż konkatenacja)
✅ Debugging – Chrome DevTools console
Czas: 2 godziny od zera do działającego projektu
Porównanie z Javą:
– Java projekt (Therapy Manager): 55 godzin
– JS projekt (Kalkulator): 2 godziny
Różnica: JS =natychmiastowa gratyfikacja (widzisz w przeglądarce od razu), Java = długi proces, ale solidniejszy fundament.
Zasoby nauki JavaScript – co NAPRAWDĘ używam
1. FreeCodeCamp (★★★★★)
Link: freecodecamp.org
Co: Darmowy kurs "JavaScript Algorithms and Data Structures"
Format:
- Krótkie lekcje (5-10 min)
- Wyzwania (zadania do rozwiązania)
- Projekty na końcu sekcji
Dlaczego działa:
- Interaktywny (piszesz kod w przeglądarce)
- Natychmiastowa informacja zwrotna(widzisz czy poprawnie)
- Darmowe (100%)
Mój progres: 30% kursu (3 tygodnie)
Czas: 1h dziennie2. JavaScript.info (★★★★★)
Link: javascript.info
Co: Dokumentacja/tutorial JavaScript - od podstaw do zaawansowanych
Format:
- Artykuły (szczegółowe wyjaśnienia)
- Przykłady kodu
- Zadania na końcu rozdziałów
Dlaczego używam:
- Wyczerpujący (wszystko w jednym miejscu)
- Dobrze wyjaśnia "dlaczego", nie tylko "jak"
- Darmowe
Jak używam: Odniesienie, gdy czegoś nie rozumiem z FreeCodeCamp3. YouTube – Traversy Media (★★★★☆)
Kanał: Traversy Media
Co: Tutoriale JavaScript, projekty, web development
Format: Video tutorials (30-60 min)
Ulubione video:
- "JavaScript Crash Course For Beginners" - 1h 40min
- "Build a Calculator with JavaScript" - projekt
- "DOM Crash Course" - manipulation HTML/CSS
Dlaczego: Widzę jak ktoś pisze kod (łatwiej zapamiętać)
Jak używam: Wieczory (21:00-22:00,) gdy dzieci śpią 4. MDN Web Docs (★★★★☆)
Link: developer.mozilla.org
Co: Oficjalna dokumentacja webowe technologie(HTML, CSS, JS)
Format: Dokumentacja referencyjna
Jak używam:
- Gdy potrzebuję szczegółów konkretnej funkcji/metody
- "JavaScript Array methods" - pełna lista
- Przykłady użycia
Nie dla początkujących: Sucha dokumentacja, lepsze jako odniesienie niż zasób edukacyjny.
5. ChatGPT (★★★★★)
Jak używam:
Wyjaśnianie pojęć:
Ja: "Wyjaśnij mi hoisting w JavaScript jak dla 5-latka"
ChatGPT: [proste wyjaśnienie z przykładami]
Debugging:
Ja: "Czemu ten kod nie działa? [wklejam kod]"
ChatGPT: "Błąd w linii 5 - używasz var zamiast let, to powoduje..."
Code review:
Ja: "Czy ten kod jest OK? Jak mogę go ulepszyć?"
ChatGPT: [sugestie, najlepsze praktyki]
Zalety: Natychmiastowe odpowiedzi, nieograniczone pytania, dostępne 24/7
Wady: Czasem się myli, trzeba weryfikowaćJava vs JavaScript – podsumowanie pierwszych 3 tygodni
Co jest ŁATWIEJSZE w JS niż w Javie:
✅ Setup – 1h vs 3h (Java)
✅ Szablon – prawie zero (vs dużo w Javie)
✅ Natychmiastowa informacja zwrotna – odświeżenie przeglądarki vs kompilacja
✅ Krzywa uczenia się – szybszy start (widzisz efekty od razu)
✅ Projekty – 2h mini-projekt vs 55h w Javie
Co jest TRUDNIEJSZE w JS niż w Javie:
❌ Typ bezpieczeństwa – brak (łatwo zrobić błąd)
❌ Dziwactwa języka – == vs ===, podnoszenie, var zakres
❌ Debugging – błędy run-time (nie czas kompilacji)
❌ Konsekwencja – wiele sposobów na to samo (mylące!)
❌ Asynchroniczność – callbacks, promises, async/await (jeszcze przed mną, ale słyszałam że trudne)
Co się przenosi z Javy 1:1:
✅ Pętle (for, while)
✅ Warunki (if/else, switch)
✅ Funkcje (koncept)
✅ Tablice (koncept, podobna składnia)
✅ Obiekty/klasy (trochę inne, ale koncept ten sam)
✅ Myślenie programistyczne – algorytmy, rozwiązywanie problemów
Czy Java pomogła w nauce JS?
TAK, ogromnie.
Bez Javy:
- Musiałabym uczyć się fundamentów (pętle, warunki, funkcje) od zera
- Nie rozumiałabym OOP
- Nie wiedziałabym jak projektować kod
Z Javą:
- Fundamenty mam (przeskoczyłam 50% kursu JS)
- Rozumiem klasy w JS (bo znam z Javy)
- Myślę algorytmicznie (transfer skill)
Ale:
- Java-owe nawyki czasem przeszkadzają (próbuję deklarować typy, których JS nie ma)
- Muszę „oduczyć się” od Java ścisłość
Werdykt: Java była świetnym pierwszym językiem. JavaScript jako drugi = łatwiejszy, niż gdyby był pierwszy.
Plany na sierpień – co dalej z JS
Tydzień 1-2 sierpnia:
- Dokończenie FreeCodeCamp „Basic JavaScript” (50% pozostało)
- Praktyka: 3-4 mini-projekty (todo list, quiz, countdown timer)
Tydzień 3-4 sierpnia:
- ES6 funkcje (arrow functions, destructuring, spread operator)
- Zaawansowana manipulacja DOM
- Pierwszy projekt dla klienta WordPress (walidacja formularza niestandardowego)
Wrzesień:
- Asynchronous JS (promises, async/await, fetch API)
- Może React basics (jeśli czuję się ready)
- Większy projekt (może blog z fetch API)
Cel: Do końca sierpnia czuć się komfortowo z vanilla JavaScript.
Realistycznie: Nie zostanę ekspertem w miesiąc. Ale będę mogła używać JS w projektach klientów.
FAQ – nauka drugiego języka programowania
Czy powinnam kończyć Java całkowicie przed JS?
NIE.
Nie musisz być ekspertem Javy, żeby zacząć JS.
Wystarczy:
- Rozumieć podstawy (zmienne, pętle, funkcje, obiekty)
- Zbudować 1-2 projekty
Reszta: Nauczysz się w trakcie lub później.
Jak nie pomieszać Java i JS w głowie?
Początkowo: Mieszam. Piszę System.out.println zamiast console.log.
Pomaga:
- Używanie różnych IDE (IntelliJ dla Java, VS Code dla JS)
- Projekty w jednym języku naraz (nie przełączać co godzinę)
- Praktyka (mózg się przyzwyczaja)
Po 3 tygodniach: Już rzadziej mieszam.
Czy TypeScript zamiast JavaScriptu?
TypeScript = JavaScript + typy (jak Java)
Argument ZA: Jeśli znasz Javę, TypeScript będzie bardziej podobny
Argument PRZECIW: Nauka TypeScriptu = nauka JS + nauka TypeScript w działaniu (więcej naraz)
Moja decyzja: Vanilla JS najpierw. TypeScript może później (wrzesień-październik).
Ile czasu dziennie poświęcam?
JavaScript: 1h dziennie (vs Java było 1.5h)
Rozłożenie:
- Rano: 30 min (FreeCodeCamp wyzwania)
- Wieczór: 30 min (projekt/praktyka)
Weekendy: 2-3h (większe projekty)
Dlaczego mniej niż Java: Wakacje, dzieci, jestem zmęczona. 1h = zrównoważony.
Czy warto uczyć się wielu języków naraz?
Moim zdaniem: NIE.
1 język na raz. Opanuj podstawy, potem dodaj drugi.
Dlaczego:
- Mylące (mieszasz składnie)
- Przytłaczający (dwa razy więcej nauki)
- Powolny postęp (rozmywasz czas)
Lepiej:
- 6 miesięcy Java (solidnie)
- Potem JavaScript (z fundamentami z Javy)
Podsumowanie – Learning Log #6
Nauka drugiego języka programowania:
- Łatwiejsza niż pierwszego (fundamenty mam)
- Trudniejsza niż myślałam (dziwactwa, różnice, mieszanie)
- Wartościowe – widzę konkretny benefit (projekty WordPress)
Java vs JavaScript:
- Podobne: Fundamenty (pętle, warunki, funkcje)
- Różne: Typy, scope, dziwactwa, filozofia języka
- Werdykt: Java pomogła ogromnie, ale JS wymaga „oduczyć się” od ścisłość
Progres po 3 tygodniach:
- 30% FreeCodeCamp kursu
- 1 mini-projekt (calculator)
- Rozumiem podstawy
- Czuję się komfortowo z kodem
Cel sierpień:
- 80% FreeCodeCamp
- 5-7 mini-projektów
- Pierwszy większy projekt (custom JS w WordPress)
Najważniejsza lekcja:
„Drugi język ≠ zaczynać od zera. Masz fundamenty. Użyj ich.”
Java nauczyła mnie programowania. JavaScript uczy mnie praktyczności i elastyczności.
Oba są potrzebne. Oba mają miejsce w moim portfolio.
Od osoby, która się uczy do osoby, która buduje – teraz w DWÓCH językach.
PS: Też uczysz się drugiego języka programowania? Z czego na co przeszłaś/przeszedłeś? Co było najtrudniejsze? Zostaw komentarz – ciekawa jestem Waszych doświadczeń!
