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

Vývoj webových aplikací - JavaScript

Obsah

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

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');
<!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

image

image

image

image

image

image

  • 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

image

image

  • 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** ⚠️