JS wstęp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wstęp do JavaScript</title>
    <style>
        #przykladowyDiv {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
        }
    </style>
</head>
<body>
    Wstęp do JavaScript

    <div id="przykladowyDiv">
    </div>

    <script>
        // kod JavaScript piszemy wewnątrz tagu script

        // funkcja alert wyświetla okienko z wiadomością w przeglądarce
        alert("witamy w JavaScript");
        alert("druga wiadomość");

        // console.log wyświetla wiadomość w konsoli przeglądarki (w Chrome można ją otworzyć za pomocą F12 ablo ctrl+shift+i)
        console.log("witamy w konsoli JavaScript");
        console.log('inna przykładowa wiadomość która zawiera """ .');

        var zmienna = 5; // definicja zmiennej
        console.log(zmienna);
        console.log("nasza zmienna ma wartość: " + zmienna);

        zmienna = 42; // przypisanie wartości do zmiennej
        console.log("teraz nasza zmienna ma wartość: " + zmienna);

        // operacje matematyczne
        var a = 3;
        var b = 8;
        var suma = a + b;
        console.log("suma wynosi " + suma);
        console.log(a - b);
        console.log(a * b);
        console.log(a / b);

        var c = 10;
        var d = 3;
        console.log(c % d); // 10 / 3 = 3 r. 1; operator % nazywa się modulo i zwraca resztę z dzieleniad
        console.log(1 + 10 * 2 * 3 / 5 + 123123 - 123231 + (1 - 4 * (2 + 3)));
        console.log(1.23 + 4.56);

        var napis1 = "Ala ma ";
        var napis2 = "kota.";

        console.log(napis1);
        console.log(napis2);
        console.log(napis1 + napis2); // łączenie napisów (to się mądrze nazywa konkatenacja)
        console.log(napis1 - napis2); // to nie działa (zwraca NaN - Not a Number - nie-liczba)
        console.log(napis1 * napis2); // to nie działa (zwraca NaN - Not a Number - nie-liczba)
        console.log(napis1 / napis2); // to nie działa (zwraca NaN - Not a Number - nie-liczba)

        console.log(2 + "2"); // jeżeli dodajemy liczbę do napisu to JS zamienia obie rzeczy na napisy i je ze sobą skleja
        console.log(2 - "2"); // jeżeli dodajemy liczbę do napisu to JS zamienia obie rzeczy na liczby i je odejmuje
        console.log(2 - "asdf"); // jeżeli dodajemy liczbę do napisu to JS zamienia obie rzeczy na liczby i je odejmuje -> tu wychodzi NaN bo "asdf" nie da się zamienić na liczbę

        // zmienne logiczne
        var prawda = true;
        var falsz = false;

        console.log(prawda);
        console.log(falsz);

        // operacje logiczne
        console.log(false || true); // operator || to spójnik logiczny "lub" (alternatywa)
        console.log(false && true); // operator && to spójnik logiczny "i" (koninkcja)

        console.log(!false); // operator ! to spójnik logiczny "nie" (negacja)
        console.log(!true); // operator ! to spójnik logiczny "nie" (negacja)

        var x;
        console.log(x); // zmienna x w tym miejscu ma specjalną wartość undefined - jest niezdefiniowana

        x = 56;
        console.log(x);
        x = 23;
        console.log(x);

        var y = 10;
        y = y + 5;
        console.log(y);

        var z = 10;
        z += 5; // operator += to przypisanie złożone i oznacza tyle samo co z = z + 5;
        console.log(z);
        // istnieje też -= *= /= %=

        var i = 3;
        i++; // inkrementacja (++) zwiększa wartość o 1
        console.log(i); // tu wychodzi 4

        var j = 3;
        j--; // inkrementacja (--) zmienjsza wartość o 1
        console.log(j); // tu wychodzi 2

        // operacje na elementach HTML strony
        var mojDiv = document.getElementById("przykladowyDiv"); // pobranie elementu HTML po jego ID
        console.log(mojDiv);

        mojDiv.innerHTML = "<p>jakiś tekst</p>"; // wstawiamy kod HTML do elementu
        mojDiv.style.fontSize = "30px"; // zwróć uwagę na pisownię fontSize w JavaScript (dla prównania w CSS było font-size)

        // prosty kalkulator
        var odp = prompt("podaj liczbę 1");
        var odpLiczba = +odp; // plus przed zmienną zamienia wartość na liczbę (jeżeli się nie da to wychodzi NaN)
        console.log(odpLiczba);

        var odp2 = prompt("podaj liczbę 2");
        var odp2Liczba = +odp2;
        console.log(odp2Liczba);

        var wynik = odpLiczba + odp2Liczba;

        alert("Suma wynosi " + wynik);

        // if to instrukcja warunkowa
        if (wynik > 100) { // mamy operatory porównania > < >= <= == != (zachęcam poeksperymentować z nimi)
            alert("wynik jest duży !!!"); // to wykona się tylko jeśli warunek jest prawdziwy (jeśli wynik będzie większy niż 100)
        } else {
            alert("podaj większe liczby"); // to wykona się jeśli warunek jest fałszywy
        }
    </script>
</body>
</html>