LAB08 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki

Vývoj webových aplikací - JavaScript

Obsah

  • Formulářové prvky
  • JavaScript - úvod
  • JavaScript - jak ho použít
  • Základy programování v JS
  • Domácí úkol, způsob odevzdání kódu

Formulář: form, input, button

<form id="registration-form">
  <div class="form-row">
    <label>E-mail</label>
    <input type="email" name="email" placeholder="Your email">
  </div>
  <div class="form-row">
    <label>E-mail</label>
    <input type="password" name="password" placeholder="Your password">
  </div>
  <button class="submit-button">Submit</button>
</form>

JavaScript - úvod

  • programovací jazyk, který může být spuštěn přímo v browseru (tip: také na serveru)
  • dynamicky typovaný = typ proměnné se může měnit a vyhodnocuje se za běhu (protiklad je staticky typovaný jazyk, např. Java)
  • 100% podpora v moderních prohlížečích
  • pomocí JS lze:
    • dynamicky manipulovat s HTML elementy, atributy, texty, apod.,
    • ovládat některé funkcionality prohlížeče,
    • volat HTTP požadavky pro získávání dat ze serveru, ...
  • verze JS: ECMASCript 6 (2015) - http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  • compatibility table: https://kangax.github.io/compat-table/es6/
  • ECMAScript 6 features: http://es6-features.org/
  • JavaScript není Java. Nenechte se zmást tím názvem. Většina syntaxí a konvence psaní kódu není stejná.
  • budeme se učit:
    • syntax, data types, variables
    • strings, arrays, objects, methods
    • loops, conditionals, functions
    • DOM, Events, Form validation
    • Browser API, AJAX...

JavaScript v prohlížeči - jak ho použít

  • v konzoli - hlavně pro manuální testování přes výstupy a ladění chyb
  • vkládáním skriptu do HTML - tím se skript spustí při načtení stránky
  • způsoby
    • inline - do určitých atributů, např. onclick="..." - není povoleno ve studentských pracích
    • head - do tagu <script> v headu - není povoleno ve studentských pracích
    • body - do tagu <script> v body - není povoleno ve studentských pracích
    • external - odkaz na JS soubor pomocí tagu <script src="...">, který se dává na konci tagu <body>
  • příklad:
// soubor ./js/main.js  <-- tenhle řádek je komentář
console.log('Ahoj světe');                               // vypsat Ahoj světe na konzoli

/* příklad manipulace s elementem na stránce */
const headingElement = document.querySelector('h1');     // vybrat existující element ze stránky a uložit do proměnné
const newText = 'barrack obama rulez';                   // vytvořit text a uložit do proměnné
headingElement.innerText = newText;                      // vytvořený text zobrazit v elementu

/* příklad vytvoření elementu s funkcí */
const sayHello = () => {                                 // definovat funkci a uložit do proměnné
  console.log('Hello');
};
const buttonSayHello = document.createElement('button'); // vytvořit element button a uložit do proměnné
buttonSayHello.innerText = 'Say Hello';                  // nastavit text v elementu button
buttonSayHello.addEventListener('click', sayHello);      // nastavit událost click, která spustí funkci sayHello

/* příklad umístění nově vytvořeného elementu na stránku */
const body = document.querySelector('body');             // vybrat element pro umístění elementu button
body.appendChild(buttonSayHello);                        // umístit element button do vybraného elementu
<!DOCTYPE html>
<html lang="en">
<head>
  <title>One-punch example</title>
</head>
<body>
  <h1>One-punch page</h1>
  <p>One-punch paragraph</p>
  <script src="./js/main.js"></script>
</body>
</html>

Základy programování v JS

Komentáře

// one-line comment
/*
multiline comment
multiline comment
*/

Primitivní datové typy, pole a objekty

true, false                            // Boolean     - typeof -> 'boolean'
1, 2, 3, 3.14, 2.718                   // Number      - typeof -> 'number'
'1', '2', 'Yu-Gi-Oh!', 'hakuma matata' // String      - typeof -> 'string'
undefined                              // undefined   - typeof -> 'undefined'
null                                   // null object - typeof -> 'object'
{}, { name: 'Adam' }                   // object      - typeof -> 'object'
[], ['one', 'two', 'three']            // object      - typeof -> 'object'

Statement / příkaz

const language = 'JavaScript'; // statement 1
const level = 9999;            // statement 2

Deklarace proměnných

keyword scope update re-declare hoisting default value initialization
var global/function yes yes to top undefined optional
let block yes no to top undefined optional
const block no no to top must init mandatory 
// camelCase!
const isVisible = true;
const isVisible = true;

Konvence psaní názvů proměnných

const person = undefined;               // Letters
const car1 = undefined;                 // Numbers
const PEDO_BEAR = undefined;            // Underscore
const gummy_bear = undefined;           // Underscore
const _ember = undefined;               // Underscore
const $computer = undefined;            // Dollar Sign
const myFirstVariable = undefined;      // camelCase - preferovaný styl v JavaScriptu
const MyAwesomeClass = undefined;       // PascalCase - pro třídy a funkční komponenty

Funkce

const add = (a, b) => {
  const result = a + b;
  return result;
};
const addResult = add(10, 20);

Arrays

const friends = ['Jim', 'Beam', 'Jack', 'Daniels'];

Objects

const book = {
  title: 'Harry Potter',
  price: '250.00',
  currency: 'CZK',
};

Operátory

x = 42; y = 8; a = true; b = false;               // assignment
x === 42; x > 40; x >= 42; x < 50; x <= 42        // comparison
z = x + y; w = x * y; v = y / x; x++; y--;        // arithmetic
a && b; a || b; !a && !b;                         // logical
'Hello' + ' ' + 'world'; `${'Hello'} ${'world'}`; // string
a ? b : c                                         // conditional

Čtení vlastností objektu

const cat = {
  name: 'Tom',
  speed: 9000,
  neow: () => {
    alert('Mewtwo!');
  };
};
cat.name;
cat.speed;
cat.meow();
  • https://hackernoon.com/the-art-of-naming-variables-52f44de00aad
  • Práce na cvičení:
    • vytvořte soubor main.js a nalinkujte ho na stránku index.html
    • vyzkoušejte si deklaraci všech zmíněných datových typů společně s vytvořením proměnných
    • pro kontrolu datového typu vypište na konzoli hodnoty všech deklarovaných proměnných včetně názvů jejich typů (pomocí typeof)
    • vytvořte si funkci, která dokáže vynásobit 3 čísla a, b, a c (pokud to jde) a vrátit výsledek
    • sepište si sezam alespoň 5 ovocí, zvířat nebo měst, a uložte je do pole pod odpovídající proměnnou
    • vytvořte si objekt s informacemi o nějakém prodejním artiklu (kniha, auto, mobil, rohlík, ...), tj. bude obsahovat např. následující údaje: název, cena, měna, hmotnost, měrná jednotka, počet skladem, dostupnost, ...
    • vypište na konzoli výsledek porovnávání dvou číselných hodnot, zda jsou si rovny, nebo jedna je menší/větší než druhá
    • vypište na konzoli výsledek porovnávání dvou retězcových hodnot
    • vytvořte funkci, která dokáže vypsat na konzoli smysluplnou oznamovací větu o Vašem jménu, věku, kde a co studujete, přičemž Tyto informace budou předány do parametru této funkce v podobě objektu

Podmínky

if (a) {
  doThis();
} else {
  doThat();
}

Čtení pole

const things = [1, '1', { name: 'Joe' }, undefined, ['apple', 'pear'], true, null];
consooe.log(things[0]); // 1
consooe.log(things[1]); // '1'
consooe.log(things[2]); // { name: 'Joe' }

Cykly

for (let i = 0; i < things.length; i++) {
  console.log(things[i]);
}
things.forEach((thing) => {
  console.log(thing);
});

Metody pole

things.push(5);
things.unshift(1);
things.slice(0, 5);
things.pop();
things.map(() => {});
things.filter(() => {});
  • Práce na cvičení:
    • vytvořte funkci, která vypíše kategorii věku člověka podle zadaného věku v argumentu funkce. https://www.statcan.gc.ca/eng/concepts/definitions/age2
    • vytvořte funkci, která vypíše na konzoli pod sebou všechny položky pole, které dostane na argumentu
    • vytvořte funkci, která odebere první a poslední prvek z pole, a toto změněné pole vrátí

Domácí úkol

Příště

  • operace nad řetězci (string)
  • dokumentový objekt DOM
  • event handlery
  • browser API, globální objekty a funkce
  • manipulace s elementy v DOM
  • formuláře a jejich prvky
⚠️ **GitHub.com Fallback** ⚠️