Kurz Úvod do programování

< Zpět

Lekce 4

Teorie:
Faktury, příjmové doklady.
Opakování lekce 3.
Představení internetu a webového prohlížeče
Deklarativní jazyk HTML - úvod
Javascript a HTML - úvod

Cvičení:
Dokončení projektu v jazyce Karel.
Editor Visual Studio Code
Jednoduchá HTML5 stránka s javascriptem (dokončení v příštích lekcích).

4.1 Představení internetu a webového prohlížeče

Internet je dnes světová síť postavená na technologii armární sítě ARPANET (USA). Při výpadku uzlů síť stále funguje, dokud existuje aspoň jedna cesta.
Je postaven na technologii klient-server. Klient je nejčastěji webový prohlížeč, server je nejčastěji linuxový server provozující webový server apache. V takovém případě spolu komunikují protokolem http (Hyper Text Transfer Protocol).
WWW prohlížeč vznese požadavek v podobě URL ( Uniform Request Locator - specifikace cíle odkazu např. adresa ve webovém prohlížeči jako http://www.google.com), poté dojde k nasměrování na server na dané adrese. Server převezme požadavek, něco udělá a nakonec vrátí prohlížeči HTML stránku. Tu prohlížeč zobrazí.

Z toho všeho nás v tomto kurzu bude zajímat jen ta webová html stránka vrácená prohlížeči. Přesněji - server vynecháme a podstrčíme ji prohlížeči sami jako lokální soubor.

tabule - internet a role webového prohlížeče


4.2 Deklarativní jazyk HTML5 - úvod

HTML - Hyper Text Markup Language (značkovací jazyk s odkazy do WWW).
WWW - World Wide Web, světová pavučina.
Deklarativní semantický jazyk popisující webovou stánku.
Je o popis semantiky (kde je nadpis, odstavce, ...), ne vzhledu (písmo, barvy, layouty, ...)! Na to je CSS (později).
Používá značky (tagy) uzavřené mezi < a >, např. <b> pro bold (tučné písmo). Vývoj od html4, xhtml (xml verze - párové značky) až k pragmatickému html5 (snaha teoretiků prosadit xhtml2 se neprosadila).

Základní kostra html5 (viz soubor template.html):
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<title>Title of the document</title>
<script>
// TODO: javascript code
</script>
</head>

<body>
Content of the document......
</body>
</html> 


Odkazy:
https://www.w3schools.com/Html/default.asp
https://www.w3schools.com/Html/html_blocks.asp
https://www.itnetwork.cz/html-css/webove-stranky/jak-psat-moderni-web-html-tutorial-uvod-do-html

4.3 Javascript a HTML - úvod

Javascript je skriptovací jazyk, C-like syntaxe, procedurální (funkce), často používaný ve spojení s webovými technologiemi (např. v html stránkách).

Odkazy:
https://www.w3schools.com/js/default.asp

Funkce v javascriptu a html dokumentu:
</script>

function helloWorld()
{
    alert("Hello");
}

function helloWorld2(name)
{
    alert("Hello" + name);
}

// vrati a+b
function sum(a, b)
{
    return a+b;
}

</script>

4.4 Cvičení

xKarel - řešení projektu vysbírání cihel
Odkazy:
WEB - editor, html, javascript
Odkazy:
  • Editor Visual Studio Code
    Editor Visual Studio Code - zdrojový kód na github
    FW Electron - běh webových technologií na desktopu
  • HTML5 intro