Programovanie v JavaScripte

Pre úplných začiatočníkov

Čo budeme preberať

Počiatky webu
HTTP
HTML
CSS
Vznik Javascriptu
Úvod do programovania
Algoritmizácia
Robot Karel
Funkcie
Premenné
Cykly

Počiatky webu

Tim Berners-Lee
CERN
1989

Web != internet

Počiatky webu

Všetko je obyčajný text

HTTP

HyperText Transfer Protocol

Protokol pre prenos hypertextu

HyperText:

Text obsahujúci linky na iný text

Tento text nemusí byť nutne lineárny

HTTP

GET /praca/bratislava HTTP/1.1
Host: www.profesia.sk

HTTP/1.1 200 OK
Date: Tue, 04 Dec 2018 09:00:00 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 1024
Connection: close

<html>
<head>
  <title>Profesia</title>
</head>
<body>
  Zoznam inzerátov
</body>
</html>

HTML

HyperText Markup Language

Značkovací jazyk hypertextu

HTML

Dokument v HTML je kódovaný ako čistý text
Ako označíme linku na iný dokument?
Vymyslíme špeciálnu značku a obalíme ju

Toto je hypertextový dokument.
Obsahuje linku na iný dokument.

Toto je hypertextový dokument.
Obsahuje linku na <a href="iny-dokument.html">iný dokument.</a>

HTML

Značkám sa hovorí tagy alebo elementy
Sú uzatvorené v ostrých zátvorkách: < a >
Sú párové a nepárové

Otvárací párový tag alebo nepárový tag:

<názov>

<názov prípadné="atribúty">

Uzatvárací párový tag:

</názov>

HTML

Párové tagy	Nepárové tagy
<b>tučné písmo</b>	<br> - nový riadok
<i>kurzíva</i>	<img src="cesta"> - obrázok
<a href="adresa">linka</a>	<input> - formulárový prvok
<h1>Nadpis</h1>
<p>odstavec textu</p>
<span>"vyznačenie" textu</span>
<div>blok</div>
<form>formulár</form>
<table>tabuľka</table>
<button>tlačidlo</button>

HTML

Blokové tagy

Správajú sa ako štvoruholníkový blok. Spôsobujú zalomenie riadku.

Neblokové tagy

Nezalamujú riadok

<form>, <div>, <table>, <h1>, <p>...

<a>, <b>, <i>, <span>...

HTML dokument

<!doctype html>
<html>
    <head>
        <title>Titulok stránky v prehliadači</title>
        <meta
            name="description"
            content="Popis stránky pre vyhľadávače"
        >
        <link rel="stylesheet" href="css/style.css">
        <script src="javascript/foo.js"></script>
    </head>
    <body>
        <h1>Hlavný nadpis</h1>
        <img src="images/main.jpg">
        <p>Odstavec textu</p>
    </body>
</html>

Úloha:

Vytvorte nový HTML dokument so základnými informáciami o človeku:

v titulku pre prehliadač bude meno osoby
v hlavnom nadpise meno osoby
odstavec textu napríklad o tom, kde pracuje, odkiaľ pochádza
obrázok osoby
podnadpis druhej úrovne s textom "Záľuby"
odstavec textu so zoznamom záľub
v samostatnom <div> elemente podnapis "Kontakt" ľubovoľnej úrovne
formulár s priestorom pre text a tlačidlom

data-* atribúty

Ku každému elementu je možné pridať jeden alebo viac atribútov, ktorých meno začína na data- a pokračovanie je ľubovoľné.

Viete si tak vytvárať úplne vlastné atribúty a odkazovať sa na ne v CSS alebo Javascripte

Pre cypress.io sa napr. odporúča pridávať vlastné data-cy-* atribúty

Viac info o HTML:

www.jakpsatweb.cz

developer.mozilla.org

CSS

Cascading Style Sheets

Kaskádové štýly

Jazyk, ktorým sa popisuje výzor HTML (alebo XML) dokumentu

CSS

Syntax

skupina selektorov {
    zoznam deklarácií
}

vlastnosť: hodnota;
vlastnosť2: hodnota;

* {
    color: black;
    font-size: 14px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    color: blue;
}

p {
    font-style: italic;
}

Zoznam deklarácií:

Pravidlá:

CSS

Syntax

CSS

Jednoduché selektory

univerzálny	*
element (tag)	div
triedny	.active
id	#main-title

Viete aj kombinovať:

li.active { /* ... */ }
div#menu { /*... */ }
div#menu.hidden { /* ... */ }

CSS

Atribútové selektory

[attribút]	[data-cy]
[atribút="hodnota"]	[data-cy="button"]
atribút~="hodnota"	[data-cy~="button"]

<input type="submit" data-cy="button" value="Odoslať">

<input type="submit" data-cy="cv-form button" value="Odoslať">

<input type="submit" data-cy="button cv-form" value="Odoslať">

CSS

Pseudo triedy

:focus	element má fokus
:hover	nad elementom je myš
:nth-child(N)	N-tý prvok
a veľa ďalších

Pridávajú sa na koniec iného selectoru

input:focus { /* Input má fokus (píše sa doň) */ }

a:hover { /* nad linkou je myš */ }

tr:nth-child(2) { /* druhý riadok tabuľky */ }

tr:nth-child(2n) { /* každý druhý riadok tabuľky */}

CSS

Pseudo elementy

::before	pred elementom
::after	po elemente
:nth-child(N)	N-tý prvok
a veľa ďalších

Pridávajú sa na koniec iného selectoru a každý má špecifické správanie

a::before { content: 'text pred'; }
a::after { content: 'text po'; }

CSS

Kombinácie selektorov

A, B	A alebo B
A B	Každé B, ktoré je potomkom A
A > B	Každé B, ktoré je priamym potomkom A
A + B	Každé B, ktoré má priamo pred sebou A (A aj B majú spoločného rodiča)
A ~ B	Každé B, ktoré má pred sebou A (A aj B majú spoločného rodiča)

Úloha

https://bitbucket.org/perungrad/robot-karel-js/downloads/test-selektorov.html

Precvičte si selektory

CSS

Viac info

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

http://jecas.cz/css-selektory

JavaScript

História

Netscape
Prvá vojna browserov
5/1995 - prototyp jazyka Mocha/LiveScript hotový za 10 dní
9/1995 - premenovaný na JavaScript a vložený do Netscape Navigator 2
1996 - JScript v Internet Explorer 3
6/1997 - ECMAScript

Autor: Brendan Eich

JavaScript vyzerá podobne ako iné jazyky

Ale len vyzerá

Je ľahké v ňom začať

Ale je ťažšie ho pochopiť a ovládnuť

Úvod do programovania

Počítač neurobí to, čo chceš.

Urobí to, čo mu povieš.

Presnosť

Programovací jazyk nie je ako prirodzený jazyk.

Vyjadrovať sa treba presne.

Syntax treba dodržiavať na 100%

99.9% nie je good enough.

Hello World

<!doctype html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Môj prvý JS program</h1>

    <div id="content"></div>

    <script>
        console.log('Hello World');

        var element = document.querySelector('#content');

        element.innerHTML = 'Hello World!';
    </script>
</body>
</html>

Algoritmus

Predpísané poradie krokov, ktoré sú potrebné na splnenie úlohy.

Recept

Ale v prípade programovania super presný.

Algoritmizácia

Rozloženie problému na menšie časti (a ich popísanie algoritmom)

Z vajec, múky a cukru upečieme piškótové cesto
Uvaríme plnku zo zlatého klasu, mlieka, cukru a múky
Cesto prekrojíme, stred naplníme plnkou s jahodami
Okraje potrieme plnkou
Na vrch torty natrieme lekvár, oukladáme jahody a zalejeme želé

Upečieme jahodovú tortu