Warsztaty z JavaScript

Sylwia Laskowska

Szybki wstęp do JS

Skryptowy język programowania

 

Ma niewiele wspólnego z Javą

 

Najczęściej stosowany w przeglądarce, można jednak używać go również na serwerze

 

Przygotowanie środowiska pracy

 

Utwórz nowy folder

 

Stwórz w nim pliki index.html, styles.css, scripts.js

 

Pobierz kod ze strony http://htmlshell.com i wklej go do pliku index.html

Przygotowanie środowiska pracy

 

Dodaj Bootstrapa do projektu: https://getbootstrap.com/docs/4.3/getting-started/introduction/

 

Wybierz czcionkę z https://fonts.google.com

 

Dodaj plik styles.css

 

Dodaj plik scripts.js

Zmienne

po co nam zmienne?

let x = 5; 
let y = 6; 

console.log(x + y); //11

let place = document.querySelector("#place");

const z = "Sylwia"; //nie możemy zmienić tej wartości

Typy danych

TYPY PROSTE: 

number 

string

boolean

undefined

null

symbol

 

TYPY REFERENCYJNE:

array

object

regexp

 

Typy proste

let num = 5;  // prosta liczba
let str = "Sylwia" // prosty ciąg znaków
let boo = true; // prosta wartość logiczna
let n = null;  // nic

let x; //undefined - zmienna bez wartości

Typy złożone

let tablica1 = [1, 2, 3];
let tablica2 = tablica1; 

tablica2.push(4);
console.log(tablica1); //1, 2, 3, 4
console.log(tablica2); //1, 2, 3, 4

DOM i zdarzenia

//index.html
<div id="text"></div>

//scripts.js
const x = document.querySelector("#text");

x.addEventListener('click', () => {...});

Tablice

const tablica = [] // pusta tablica
const tablica2 = [1, 2, 3] // tablica z cyframi
const tablica3 = ["kot", "Basia", "drzewo"] //tablica stringów

let a = 1; 
let b = "Kasia"; 

const megaTablica = [a, b, { }, tablica3, "wino];

megaTablica[0] // 1

tablica2[1] // 2

tablica3[2] // "drzewo"

Funkcje

function nowaFunkcja() {
    console.log("Jestem sobie funkcją");
}

nowaFunkcja(); // wywołanie funkcji

function dodajDwieCyfry(a, b) {
    console.log(a + b);
}

dodajDwieCyfry(2, 3); // 5 

Obiekt Math

Math.random() // dowolna liczba z zakresu od 0 do 1

Math.floor() // zaokrągla liczbę w dół do najbliższej liczby całkowitej

Metody tablic

let arr = ["kiwi", "banan", "burak"];

arr.splice(1, 1); // ["kiwi", "burak"]

arr.forEach(x => {
    console.log(x + "zzz");
});

// "kiwizzz", "bananzzz", "burakzzz"

arr = arr.map(x => x + "x");
// ["kiwix", "bananx", "burakx"]

Operatory logiczne

Instrukcja warunkowa

if (jakiś warunek) {
    ...zrób coś
} else if (inny warunek) {
    ...zrób coś innego
} else {
    ...zrób jeszcze coś innego
}

Zadania dodatkowe

Dla chętnych ;)

Napraw licznik żyć - nie pozwalaj na minusowe życia

 

Stwórz mechanizm, który umożliwi wpisanie całego słowa, jeśli ktoś zna już odpowiedź

 

Zaimplementuj wybór nowego słowa w trakcie gry

 

Dziękuję!

Warsztaty z JavaScript

By sylwia_lask

Warsztaty z JavaScript

Code{sun}day

  • 202