Základy programovania v JavaScripte
Milan Herda, 01/2020
Čo nás čaká
Programmers Credo:
We do these things not because, they are easy,
but because we thought they were going to be easy
O čom budeme hovoriť
- Programovanie
- Algoritmus
- Algoritmizácia
- Rýchlokurz HTTP a HTML
- JavaScript
- Nainštalujeme si nástroje
- Hello World
Programovanie
Prevod inštrukcií
z jazyka ľudského
do jazyka programovacieho
odkiaľ sú prevádzané do ďalšieho jazyka,
ktorému "rozumie" počítač
Programovanie
Počítač neurobí to, čo chceš.
Urobí to, čo mu povieš.
Programovanie
Programovanie
Programovací jazyk nie je ako prirodzený jazyk.
Vyjadrovať sa treba presne.
Syntax treba dodržiavať na 100%
99.9% nie je good enough
Programovanie
Prevod inštrukcií
Inštrukcie sú postupom riešenia
"Postup riešenia" sa múdrym slovom povie
Algoritmus
Algoritmizácia
Vytváranie algoritmu
Vytváranie zoznamu krokov na "vyriešenie problému"
Algoritmizácia
Najdôležitejšou súčasťou je:
opakované rozkladanie problému na menšie a jednoduchšie časti
Programovanie
- pochopenie špecifikácie
- rozklad špecifikácie na menšie celky
- vytvorenie presného zoznamu krokov
- prepis tohto zoznamu do programovacieho jazyka
JavaScript
- pochopenie špecifikácie
- rozklad špecifikácie na menšie celky
- vytvorenie presného zoznamu krokov
- prepis tohto zoznamu do programovacieho jazyka
Rýchlokurz HTTP a HTML
Inštalácia potrebných nástrojov
Editor kódu
Vyberte si
Počiatky webu
Web != internet
- Tim Berners-Lee
- CERN
- 1989
Počiatky webu
Všetko je obyčajný text
HTTP
HyperText Transfer Protocol
Protokol pre prenos hypertextu
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 ňou text, ktorý má slúžiť ako linka
Toto je hypertextový dokument.
Obsahuje linku na iný dokument.
Toto je hypertextový dokument.
Obsahuje <a href="iny-dokument.html">linku</a> na iný dokument.
HTML
- Značkám sa hovorí tagy alebo elementy
- Sú uzatvorené v ostrých zátvorkách: <, >
- Sú párové a nepárové
<párový>obsah uzavretý v párovom tagu</párový>
<nepárový>
Nepárový tag nemusí mať ukončovaciu značku
HTML - stručný prehľad
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</p> | |
<span>vyznačenie</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 a spôsobujú zalomenie riadku.
Neblokové tagy
<form>, <div>, <table>, <h1>, <p>...
Nezalamujú riadok
<a>, <b>, <i>, <span>...
HTML dokument
<!doctype html>
<html>
<head>
<title>Titulok stránky v prehliadači</title>
<meta charset="UTF-8">
<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 bude meno osoby
- odstavec textu o tom, kde osoba pracuje
- obrázok osoby
- podnadpis druhej úrovne s textom "Záľuby"
- odstavec textu so zoznamom záľub
- v samostatnom <div> elemente podnadpis "Kontakt" ľubovoľnej úrovne
- formulár s priestorom pre text a tlačidlom
Viac info o HTML:
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ť
JavaScript
Kde sa používa?
- webový prehliadač
- webový server
- mobilné aplikácie (Messenger...)
- aplikácie pre počítač (Slack...)
- "inteligentné" zariadenia do domácnosti
Inštalácia potrebných nástrojov
- webový prehliadač
- Node.js
- Cypress
Webový prehliadač
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Programovanie
Prevod inštrukcií
z jazyka ľudského
do jazyka programovacieho
odkiaľ sú prevádzané do ďalšieho jazyka,
ktorému "rozumie" počítač
Tento "prevod" robí nástroj, ktorému sa hovorí:
- prekladač
- prípadne interpreter
- pre JS aj engine
Node.js
Node.js je teda prostredie, ktoré prekladá JS do jazyka, ktorému rozumie počítač a v ktorom potom výsledný kód beží.
Budeme to potrebovať na to, aby sme vedeli JS spúšťať aj mimo prehliadača.
Node.js
Stiahnite a nainštalujte
Cypress
Nástroj na automatické testovanie webstránok
Ale... viete ho použiť aj na tvorbu botov do webových hier :)
Cypress
Inštalácia:
-
vytvorte si niekde adresár js-hello
-
otvorte si v tomto adresári konzolu a napíšte:
npm init
npm install cypress --save-dev
Hello World
Prvý program v konzole
console.log('Hello World v konzole');
Vytvorte súbor nazvaný napr. hello.js
s obsahom:
- uložte
- otvorte konzolu v adresári s týmto súborom
- napíšte do konzoly príkaz a odošlite <ENTER>
node hello.js
Prvý program v browseri
- Vytvorte súbor s názvom napr. hello.html
- Toto je vaša webová stránka
- Otvorte súbor v prehliadači (napr. cez CTRL-O)
- Odpisujte do súboru kód z ďalšieho slajdu a refreshujte stránku v prehliadači
Prvý program v browseri
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Môj prvý js program</h1>
<p id="foo">Tu je text, ktorý nahradíme</p>
<script>
console.log('Hello World v konzole');
// var element = document.querySelector('#foo');
// element.innerHTML = 'Hello World v HTML';
</script>
</body>
</html>
Prvý Cypress test
Cypress pri prvom spustení vytvorí adresár cypress s príkladmi
npx cypress open
Odtiaľ spustíme cypress
Spustite konzolu v adresári js-hello
Prvý Cypress test
V adresári cypress/integration vytvorte nový súbor hello-cypress.js
describe("Môj prvý cypress test", function () {
it("napíše Hello", function () {
cy.visit("https://www.profesia.sk/");
cy.get(
"#CybotCookiebotDialogBodyButtonDecline"
).click();
cy.get(
'#offerCriteriaSuggesterInputId'
).type(
'Hello World'
);
});
});
Otázky?
Školenie JS 2020 - lekcia 01
By Milan Herda
Školenie JS 2020 - lekcia 01
- 682