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

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 ň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:

www.jakpsatweb.cz

developer.mozilla.org

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

https://nodejs.org/

Stiahnite a nainštalujte

Cypress

Nástroj na automatické testovanie webstránok

https://www.cypress.io

Ale... viete ho použiť aj na tvorbu botov do webových hier :)

Cypress

Inštalácia:

  1. vytvorte si niekde adresár js-hello

  2. 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?