JavaScript - Wprowadzenie

    
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">

</script>

    
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    alert('Witaj, świecie!');
</script>

    
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
    </body>
</html>
<script src="navigation.js"></script>
<script>
    alert('Witaj, świecie!');
</script>


    document.write('Witaj, świecie!');


    console.log("Witaj, świecie!");

Typy danych

Liczby

    
    var x1 = 34.00;     // Written with decimals
    var x2 = 34;        // Written without decimals
    var y = 123e5;      // 12300000
    var z = 123e-5;     // 0.00123

Łańcuchy znaków

    
    var carName = "Volvo XC60";   // Using double quotes
    var carName = 'Volvo XC60';   // Using single quotes
    var answer = "It's alright";             // Single quote inside double quotes
    var answer = "He is called 'Johnny'";    // Single quotes inside double quotes
    var answer = 'He is called "Johnny"';    // Double quotes inside single quotes

Wartości logiczne

    
    var x = true;
    var y = false;

Używanie typów danych i zmiennych

Podstawowe operacje matematyczne

    
        var a=2;
        var b=4;
        a+b;
        a-b;
        a*b;
        b/a;

Łączenie łańcuchów znaków

    
    var firstName = 'Jan';
    var lastName = 'Kowalski';
    var fullName = firstName + ' ' + lastName;
    console.log(fullName);

Łączenie liczb i łańcuchów znaków

    
    var numOfVisits = 101;
    var message = 'Liczba odwiedzin: ' + numOfVisits + ' razy.';

    
    var numOfShoes = '2';
    var numOfSocks = 4;
    var totalItems = numOfShoes + numOfSocks;

    
    var numOfShoes = '2';
    var numOfSocks = 4;
    var totalItems = +numOfShoes + numOfSocks;

Przykład — pobieranie informacji

    
    var name = prompt('Jak masz na imię?', '');
    document.write('Witaj, ' + name + '');

Tablice

    
    var cars1 = ["Saab", "Volvo", "BMW"];
    var cars2 = new Array("Saab", "Volvo", "BMW");

    
    var cars = ["Saab", "Volvo", "BMW"];
    cars[3]="Toyota";
    console.log(cars.length);
    cars.push("Syrena");
    cars.unshift("Fiat");
    cars.pop();
    cars.shift();

Instrukcje warunkowe

    
if (score > 100) {
  alert('Wygrałeś!');
}

    
    if ( warunek ) {
      // Tu operacje.
    }

Operator porównywania

==
!=
===
!==
>
<
>=
<=

    
    if (answer == 31) {
      alert('Prawidłowa odpowiedź. Saturn ma 31 księżyców.');
      numCorrect = numCorrect + 1;
    } else {
      alert("Błąd! Liczba księżyców Saturna jest inna.");
    }

    
    if (warunek) {
      // Bramka 1.
    } else if (warunek2) {
      // Bramka 2.
    } else {
      // Bramka 3.
    }

    
    var fridayCash = prompt('Ile chcesz wydać?', '');
    if (fridayCash >= 100) {
      alert('Możesz iść na kolację i do kina.');
    } else if (fridayCash >= 50) {
      alert('Możesz iść na dobrą kolację.');
    } else if (fridayCash >= 25) {
      alert('Możesz iść do kina.');
    } else {
      alert('Spędzisz wieczór przed telewizorem.');
    }

    
    if (a < 10 && a > 1) {
      // Wartość pomiędzy 1 a 10.
      alert("Wartość " + a + " jest większa od 1 i mniejsza od 10.");
    }

    
    if (gas <= 0 || time <= 0 || cars <= 0) {
      // Koniec gry.
    }

    
    switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
    }

    
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
}

    
    if (! valid) {
      // Wyświetlanie błędów i blokowanie przesyłania formularza.
    }

Pętle

Pętle while

    
    while (warunek) {
      // Powtarzany kod JavaScript.
    }

    
    var num = 1;
    while (num <= 5) {
      document.write('Liczba ' + num + '
');
      num += 1;
    }

Pętle do while

    
    do {
    code block to be executed
    }
    while (condition);

    
   do {
    text += "The number is " + i;
    i++;
    }
    while (i < 10);

Pętle for

    
    for (statement 1; statement 2; statement 3) {
        code block to be executed
    }

    
       for (i = 0; i < 5; i++) {
        text += "The number is " + i + "
";
        console.log(text);
        }

    
    var person = ["John", "Doe", 25];

    var text = "";
    var x;
    for (x in person) {
        console.log(person[x]);
    }

Funkcje

    
    function nazwaFunkcji(parametr) {
      // Uruchamiany kod JavaScript.
    }

    
    function toCelsius(fahrenheit) {
        return (5/9) * (fahrenheit-32);
    }
    console.log(toCelsius(100));

    
    function nazwaFunkcji(parametr1, parametr2) {
      // Uruchamiany kod JavaScript.
      return wartość;
    }

    
    var TAX = .23; // 8-procentowy podatek od sprzedaży.
    function calculateTotal(quantity, price) {
      var total = quantity * price * (1 + TAX);
      var formattedTotal = total.toFixed(2);
      return formattedTotal;
    }

    
    var message = 'Poza funkcją';
    function warning(message) {
      alert(message);
    }
    warning('W funkcji'); // 'W funkcji'
    alert(message); // 'Poza funkcją'

    
    var message = 'Poza funkcją';
    function warning() {
      var message = 'W funkcji';
      alert( message );
    }
    warning(); // 'W funkcji'
    alert( message ); // 'Poza funkcją'

    
    var message = 'Zmienna globalna';
    function warning() {
      alert( message );
    }
    warning(); // 'Zmienna globalna'

Test

Napisz prosty test w którym będą 3 pytania. Za prawidłową odpowiedź przyznaj 1 punkt za błędną brak. Wyświetl na końcu wynik testu.