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ę!
Kod: https://github.com/sylwia-lask/code-sunday-hangman
Mój email: sylwia_lask@wp.pl
Jak wrzucić projekt na GitHuba?
https://www.flynerd.pl/2018/02/github-dla-zielonych-pierwsze-repozytorium.html
Warsztaty z JavaScript
By sylwia_lask
Warsztaty z JavaScript
Code{sun}day
- 202