Vývoj webových aplikací - JavaScript

Oprava domácího úkolu (JavaScript)

• Pokud byste chtěli dostat nějakou hodnotu současného datumu, lze využít new Date()
• new Date().getFullYear()
• použít jen jeden způsob deklarace funkce

const add = () => {}; // preferovaný
//vs 
function add() {}

• nešetřit s názvy proměnných stylem S, V, ... ale area, volume, ...
• nezapomenout na ukončení příkazu pomocí středníku
• nezapomenout na vrácení výsledku z funkce pro další použití jinde (úlohy 9 a 10)
• vždy používat === pro porovnávání hodnot
• naformátovat kód
• pokud funkce vrátí true/false, je možné vynechat === true
• názvy proměnných i funkcí v angličtině a podle doporučené konvence
• kontrola číselných argumentů isNaN, typeof
• if { return ...} pak netreba else
• var nepouzivat, nezapomenout na let, const
• přepoužít funkci
• camelCase vs PascalCase

Obsah

• String operations and methods
• DOM manipulation
• JavaScript events
• Formulář: button a input
• DEMO: todo list/pokedex
• Domácí úkol

String operations and methods

const str = 'Barrack Obama';
str.length           === 13;
str.indexOf('k')     === 6;
str.lastIndexOf('a') === 12;
str.search('Oba')    === 8;
str.slice(2, 4)      === 'rr';
str.slice(8)         === 'Obama';
str.slice(-5)        === 'Obama';

str.replace('rack', 'rock') === 'Barrock Obama';
str.replace(/a/g, e)        === 'Berreck Obeme;
str.toUpperCase()           === 'BARRACK OBAMA';
str.toLowerCase()           === 'barrack obama';
str.charAt(0)               === 'B';
str.split(' ').join(' ')    === ['Barrack', 'Obama'].join(' ');

const str2 = '  extrra  spaces   ';
str2.trim() === 'extrra  spaces';

DOM manipulation

document.querySelector()
document.querySelectorAll()
element.innerHTML
element.innerText
element.classList // .add(), .remove(), .contains(), .toggle()
element.style

document.createElement('li');
element.classList.add('selected');
element.addEventListener('submit', (e) => {
  e.preventDefault();
});
element.addEventListener('click', () => {
});
parentElement.appendChild(childElement);
childElement.remove();

JavaScript events

element.addEventListener('click',     () => {});
element.addEventListener('change',    () => {});
element.addEventListener('mouseover', () => {});
element.addEventListener('mouseout',  () => {});
element.addEventListener('keydown',   () => {});
element.addEventListener('submit',    () => {});

Demo: todo list/pokedex

• Create a TODO list
  • Create new todo items with custom names
  • Show item name after clicking on an item
  • Highlight the clicked item
  • Remove individual items
  • Remove all items
  • https://github.com/nvbach91/4IZ268-2022-2023-ZS/tree/master/www/nguv03/cv09x/pokedex

Domácí úkol

• Vyřešte následující úlohu a nahrajte řešení na server eso tak, aby bylo dostupné přes odkaz (doplňte xname) https://eso.vse.cz/~xname/cv09/homework/ + odevzdat přes GitHub PullRequest - návod
• Zadání: https://github.com/nvbach91/4IZ268-2022-2023-ZS/tree/master/www/nguv03/cv09x/homework
• Termín odevzdání příští Čt 23:59:59

Příště

• jQuery
• JSON, AJAX
• API služby