LAB06 - nvbach91/4IZ268-2024-2025-ZS GitHub Wiki

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()
  • const year = 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 const S, const V, ... ale const area, const 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.textContent
element.classList // .add(), .remove(), .contains(), .toggle()
element.style
const element = document.createElement('li');
element.classList.add('selected');
element.addEventListener('click', () => {
  // do something when the element is clicked
});

const form = document.querySelector('#my-form');
form.addEventListener('submit', (e) => {
  // prevent form submission
  e.preventDefault();
});

// select a container where the new element will be displayed
const parentElement = document.querySelector('#parent');
// show the new element in the parentElement
parentElement.append(element);
// remove the new element
element.remove();

JavaScript events

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

Formuláře a formulářová data

  • Create a registration form and use JavaScript to get user data and show it on the page
<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>Name</label>
    <input name="name" placeholder="Your n"ame>
  </div>
  <div class="form-row">
    <label>Password</label>
    <input type="password" name="password" placeholder="Your password">
  </div>
  <button>Submit</button>
</form>
const registrationForm = document.querySelector('#registration-form');
registrationForm.addEventListener('submit', () => {
  const formData = new FormData(registrationForm);
  const data = Object.fromEntries(formData);
  console.log(data);
});
// {
//   email: '...',
//   name: '...',
//   password: '...',
// }

Demo: todo list/pokedex

Domácí úkol

Termín odevzdání

  • 23:59:59 před dalším cvičením

Způsob odevzdání

  • Vypracovaný úkol nahrajte na server eso a na GitHub přes Pull Request - Návod

Příště

  • jQuery
  • JSON, AJAX
  • API služby
⚠️ **GitHub.com Fallback** ⚠️