Kurz Úvod do programování

Lekce 5

Teorie:

Faktury.
Opakování lekce 4.
HTML - nejpoužívanější značky
HTML - předdefinované atributy značek, např. id, title
HTML - uživatelské atributy data-
HTML - nejpoužívanější entity
Javascript - komentáře
Javascript - proměnné a scope (viditelnost)
Javascript - alert(), prompt()
Javascript - představení událostí

Cvičení:

FTP přístup na testovací hosting zaslán emailem: https://webftp.pipni.cz/
Sdílené stránky: http://www.frajerx.com/pub/uvod_prog

HTML stránky s javascriptem viz teorie.
Cvičení bude probíhat zároveň s výkladem teorie pomocí editoru Visual Studio Code a WWW prohlížeče.

5.1 HTML - nejpoužívanější značky

Níže je soupis nejčastěji používaných HTML značek. Později bude doplněn o novinky HTML5.
Doporučuji psát značky párově, i když to není vyžadováno. Např. <b> tučné </b> případně <br/> HTML dokument je pak zároveň platným, XML dokumentem, což se může hodit (později).


<h1> - nadpis první úrovně, další úrovně h2, ..., h6 
<br/> - zalomení řádku 
<hr/> - vodorovná linka 
<div>, <p> - blok, odstavec - oba blokové elementy  
<b>, <i>, <sup>, <sub> - tučné písmo, písmo kurzívou, horní a dolní index 
<!-- zakomentovano -->  - komentář 
<img src="url"> - obrázek, atributy alt, width, height 
<ul>, <ol> - seznam netříděný a tříděný, položky pomocí <li>
<a href="url"> - odkaz do webu,
                 url může být relativní odkaz na soubor, nebo odkaz do internetu pomocí http:/https:,
                 nebo např. poslání emailu pomocí mailto: ap.,
                 atribut name="kotva" pro kotvy v dokumentu href="#kotva", viz https://www.w3schools.com/tags/att_a_name.asp
                 atribut target - viz https://www.w3schools.com/html/html_links.asp

    <a href="http://www.seznam.cz" target="okno1">Odkaz na seznam.cz</a>
    <a href="mailto:nekdo@seznam.cz">Poslat email adresatovi nekdo@seznam.cz</a>
  
<button> - tlačítko  
<table border="1"> - tabulky, řádky pomocí <tr>, buňky pomocí <td> - později
<form> - formuláře, později

Odkazy:
základní kostra HTML dokumentu
https://www.w3schools.com/html/default.asp

5.2 HTML - nejčastější atributy, entity

Předdefinované atributy značek

HTML značky mají předdefinované atributy, např. src u značky img. Každá značka může mít def. atrinut id="xxx", kde xxx je unikátní hodnota v rámci celého HTML dokumentu. Např. <img id="obr1" />
Do atrinutu title="napoveda" lze psát text nápovědných bublin o najetí myší.

Uživatelské atributy značek

Kromě předdef. atributů může uživatel v HTML5 doplnit atributy data-xxx, např. <img src="opice.png" data-animal="yes"/>

nejpoužívanější entity

& & (apostrof)
< < (mensitko)
> > (vetsitko)
  nezalomitelná mezera
– – pomlcka

5.3 Javascript - pokračování

Javascript - komentáře

Pomocí // se píší jednořádkové komentáře, pomocí /* a */ víceřádkové.
Např.

// zprava uzivateli alert("ahoj"); /* a toto je viceradkovy komentar */

Javascript - proměnné a scope (viditelnost)

Proměnná se v javascriptu (JS) definuje pomocí klíčového slova var, za nímž následuje název proměnné, poté rovnítko a poté hodnota proměnné (číslo, řetězec).
JS je netypový jazyk, tj. není nutné uvádět dopředu jestli jde o číslo, nebo řetězec ap.

// do proměnné name hodnota "Harry Potter" var name = "Harry Potter";

Různé programovací jazyky se chovají k platnosti proměnných různě. Např. jazyk C má platnost (scope, viditelnost) proměnné uvnitř bloku, ve kterém se nachází.
V javascriptu je to jednodušší - existují jen globální a lokální platnost. Lokální plastnost má proměnná pokud je def. uvnitř funkce, tj. po opuštění funkce proměnná zanikne. Totéž platí pro parametry, které funkce přebírá.
Pokud je proměnná definovaná vně funkce, pak má platnost globální, tj. v rámci celé HTML stránky.

// globalni promenna var name1 = "Harry Potter"; function f1() { // lokalni promenna, po skonceni funkce zanikne var name2 = "Petr"; } function f2() { alert(name1); // ok alert(name2); // neni def. }

Odkazy:
https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/
https://www.w3schools.com/js/js_scope.asp

Javascript - alert(), prompt()

Vestavěná funkce alert() slouží k zobrazení zprávy uživateli.
Vestavěná funkce prompt() slouží k načtení uživatelského vstupu.

// do proměnné name načteme uživ. vstup var name = prompt("Zadej své jméno", "Harry Potter"); // pokud zadáno jméno, pozdravíme uživatele if (name != null) { alert("Ahoj " + name + "! Jak se dnes máš?"); }

Javascript - představení událostí

Do elementů je možné zapsat atributy, které určují jak se budou zpracovávat události s elementem spojené. Např. onclick - Uživatel kliknul na HTML element.

<button onclick="helloWorld()">Klikni</button> <script> function helloWorld() { alert('Hello'); } </script>

Odkazy:
priklad z prednasky
zarovka zhasnuta
zarovka rozsvicena
https://www.w3schools.com/js/default.asp
https://www.w3schools.com/js/js_intro.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb