JavaScript podstawy dla Java developera

Dlaczego Java developer powinien znać JavaScript?

Jako Java developer pracujesz głównie na backendzie, ale coraz częściej musisz rozumieć frontend. JavaScript jest językiem przeglądarek – każda aplikacja webowa go używa. Dodatkowo Node.js pozwala pisać backend w JS, więc warto znać podstawy żeby rozumieć całą aplikację.

Współczesne aplikacje to nie tylko Spring Boot + REST API. Frontend w Angular, React czy Vue.js komunikuje się z twoim backendem przez AJAX, a ty musisz rozumieć jak działają te zapytania i jakie dane frontend oczekuje.

JavaScript vs Java – pierwsze wrażenia

Porównajmy prosty kod:

public class User {
    private String name;
    
    public User(String name) {
        this.name = name;
    }
    
    public void sayHello() {
        System.out.println("Hello " + name);
    }
}

function User(name) {
    this.name = name;
}

User.prototype.sayHello = function() {
    console.log("Hello " + this.name);
}

// Lub w ES6 (2015):
class User {
    constructor(name) {
        this.name = name;
    }
    
    sayHello() {
        console.log("Hello " + this.name);
    }
}

Typy danych – największa różnica

W Javie wszystko ma typ określony w compile time. JavaScript ma typy, ale są dynamiczne:

// JavaScript - typy dynamiczne
var message = "Hello";        // string
message = 42;                 // teraz number
message = true;               // teraz boolean
message = null;               // teraz null
message = undefined;          // teraz undefined

// Podstawowe typy w JS:
var text = "Hello World";     // string
var number = 42;              // number (nie ma int/double)
var isActive = true;          // boolean
var nothing = null;           // null
var notDefined;               // undefined
var user = {name: "Jan"};     // object
var numbers = [1, 2, 3];      // object (array)

Porównanie typów:

Funkcje – obiekty pierwszej klasy

To największa różnica dla Java developera. W JavaScript funkcje to obiekty – możesz je przypisywać do zmiennych, przekazywać jako parametry, zwracać z innych funkcji:

// Funkcja jako zmienna
var greet = function(name) {
    return "Hello " + name;
};

// Funkcja jako parametr (callback)
function processUser(user, callback) {
    console.log("Processing: " + user.name);
    callback(user);
}

processUser({name: "Jan"}, function(user) {
    console.log("Finished processing " + user.name);
});

// Arrow functions (ES6) - jak lambda w Java 8
var multiply = (a, b) => a * b;
var users = [{name: "Jan"}, {name: "Anna"}];
var names = users.map(user => user.name); // ["Jan", "Anna"]

Obiektowość – prototypy vs klasy

Java ma dziedziczenie klasowe, JavaScript ma dziedziczenie prototypowe:

// Prototype-based inheritance (tradycyjny JS)
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name + " makes a sound");
};

function Dog(name, breed) {
    Animal.call(this, name);  // Super constructor
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(this.name + " barks");
};

var dog = new Dog("Burek", "Labrador");
dog.speak(); // "Burek barks"

Zmienne i scope – var, let, const

JavaScript ma trzy sposoby deklarowania zmiennych (w 2016 roku):

// var - function scope, hoisting
var x = 1;
function test() {
    var x = 2;  // Nowa zmienna lokalna
    console.log(x); // 2
}
test();
console.log(x); // 1

// let - block scope (ES6)
let y = 1;
if (true) {
    let y = 2;  // Nowa zmienna w bloku
    console.log(y); // 2
}
console.log(y); // 1

// const - stała (ES6)
const PI = 3.14159;
// PI = 3.14; // Error!

const user = {name: "Jan"};
user.name = "Anna"; // OK - można modyfikować właściwości
// user = {}; // Error - nie można przepisać referencji

JSON i komunikacja z backendem

JavaScript Object Notation (JSON) to naturalny format dla JS:

// JavaScript object
var user = {
    id: 1,
    name: "Jan Kowalski",
    email: "jan@example.com",
    active: true
};

// Konwersja do JSON string
var jsonString = JSON.stringify(user);
console.log(jsonString); 
// {"id":1,"name":"Jan Kowalski","email":"jan@example.com","active":true}

// Parsowanie JSON string do object
var parsed = JSON.parse(jsonString);
console.log(parsed.name); // "Jan Kowalski"

// AJAX request do backend API
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users/1');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var user = JSON.parse(xhr.responseText);
        console.log('User name: ' + user.name);
    }
};
xhr.send();

Różnice w błędach i debugowaniu

Java ma compile-time errors, JavaScript ma tylko runtime errors:

// Ten kod się "skompiluje" ale wywali błąd w runtime
function calculateTotal(price, tax) {
    return price * tax.rate; // Co jeśli tax jest null?
}

calculateTotal(100, null); // TypeError: Cannot read property 'rate' of null

// Defensive programming jak w Javie
function calculateTotalSafe(price, tax) {
    if (!price || !tax || typeof tax.rate !== 'number') {
        throw new Error('Invalid parameters');
    }
    return price * tax.rate;
}

// Try-catch działa podobnie jak w Javie
try {
    var total = calculateTotalSafe(100, null);
} catch (error) {
    console.error('Error: ' + error.message);
}

Podstawy DOM – manipulacja HTML

JavaScript w przeglądarce może modyfikować HTML:

// Znajdź element po ID
var button = document.getElementById('myButton');

// Dodaj event listener
button.addEventListener('click', function() {
    alert('Button clicked!');
});

// Modyfikuj treść elementu
var heading = document.querySelector('h1');
heading.textContent = 'New heading text';

// Dodaj nowy element
var newDiv = document.createElement('div');
newDiv.innerHTML = '
New paragraph
';
document.body.appendChild(newDiv);

// Pobierz dane z formularza
var form = document.forms['userForm'];
var username = form.elements['username'].value;
console.log('Username: ' + username);

Asynchroniczność – callbacks i promises

JavaScript jest single-threaded ale asynchroniczny:

// Callback pattern
function loadUser(userId, callback) {
    setTimeout(function() {
        // Symulacja AJAX request
        var user = {id: userId, name: 'Jan Kowalski'};
        callback(user);
    }, 1000);
}

loadUser(1, function(user) {
    console.log('Loaded user: ' + user.name);
});

// Promises (ES6) - lepsze niż callbacks
function loadUserPromise(userId) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            if (userId > 0) {
                resolve({id: userId, name: 'Jan Kowalski'});
            } else {
                reject(new Error('Invalid user ID'));
            }
        }, 1000);
    });
}

loadUserPromise(1)
    .then(function(user) {
        console.log('Loaded user: ' + user.name);
    })
    .catch(function(error) {
        console.error('Error: ' + error.message);
    });

Przydatne zasoby:

• MDN JavaScript Documentation
• ECMAScript 6 Specification
• JSHint – JavaScript code quality tool

Jakie są twoje pierwsze wrażenia z JavaScript? Czy składnia rzeczywiście przypomina Javę, czy różnice w semantyce są zbyt duże? Podziel się swoimi doświadczeniami z przejściem z Javy na JS!