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

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

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

Programovanie v Javascripte

By Milan Herda

Programovanie v Javascripte

  • 834

More from Milan Herda