Kihagyás

1. előadás

Előzmények

Webfejlesztés tárgy: HTML, CSS

Kliens-szerver architektúra

  • Webes architektúra = Kliens-szerver kommunikációja
  • HTTP: a kommunikáció protokolja
  • URL: erőforrások azonosítója

Oldalak

Statikus oldalak

  • Szerver szempontjából: A kérés pillanatában a kért tartalom már létezik a szerveren (fájl kiszolgálás)
  • Kliens szempontjából: Nem fut le benne programkód

Dinamikus oldalak

  • Szerver szempontjából: A kérés pillanatában a válasz még nem létezik a szerveren
  • Kliens szempontjából: Programkód fut le, ez megváltoztatja a böngésző állapotát és a dokumentum szerkezetét

Miről lesz szó a tárgyon?

  • Platformspecifikus programozás
  • Dinamikus webprogramozás
  • Kliensoldalon: JavaScript
  • Szerveroldalon: PHP

Kliens oldali webprogramozás: JavaScript

  • Fejlesztő környezet: VS Code
  • Fejlesztési eszközök a böngészőben: (vizsgálat -> ) console és társai
  • Dokumentáció
  • Futtatási környzete: bönglsző
    • Van már parancssori is: Node.js

Hova írhatjuk a kódot?

  • Böngésző konzol: kipróbálásra jó
  • HTML kódba
    • Inline script: script taggel HTML-en belül (spagetti)
    • Külső állomány: script src attribútuma (ezt preferáljuk)

Jellemzők

(Zárójeles megjegyzés: van egy típusos kiegészítése a nyelvnek: TypeScript)

  • Dinamikus típusozás (a típusok az értékekhez tartoznak)
  • Szkriptnyelv

  • Interpretált (nincs fordítás, hibáig fut)

  • Case sensitive

  • Nem kötelező kirakni a végére ;-t
  • Objektumorientált
  • Nincs főprogram (main)
  • Input, output, fájlkezelés: csak API-n keresztül

Típusok

  • Primitív értékek:
    • null
    • undefined
  • Egyszerű típusok:
    • boolean
    • number
    • string
  • Összetett típusok:
    • object
    • array
    • function

Változók

  • let, const kulcsszóval deklarálunk változót
  • ezek nélkül: globális változó
  • Ha nincs kezdő érték: undefined

Operátorok

  • C, C++, C# jellegű
  • Egyenlőség vizsgálat:
    • ==: érték szerinti egyenlőség
    • ===: típus és érték szerinti egyenlőség (ezt ajánlott használni)

Vezérlési szerkezetek

Lásd: gyak jegyzet

Függvények

function fuggveny(n)
{

}

Létrehozási formák

// function declaration
function add(a, b) {
  return a + b;
}

// function expression
const add = function (a, b) {
  return a + b;
}

// fat arrow
const add = (a, b) => {
  return a + b;
}

const add = (a, b) => a + b;

Tömb

Literálforma: []

// létrehozás
const tomb = [12, 'alma', true];

// referencia
tomb[0]; // => 12

// hossz
tomb.length; // => 3

// új elem
tomb.push(e);

// törlés (marad a méret)
delete tomb[1];

// indexe (keresés)
tomb.indexOf(elem)

// eldöntés
tomb.includes(elem)

// szöveget csinál a tömbből
tomb.join()

Mátrix = tömbök tömbje

const m = [
  [1, 2, 3], 
  [4, 5, 6],
];

Tömbfüggvények

A programozási tételek meg vannak csinálva és be vannak építve a nyelvbe. (Magasabbrendűként használva.)

  • forEach: általános ciklus
  • some: eldöntés
  • every: optimista eldöntés
  • map: másolás
  • filter: kiválogatás
  • reduce: összegzés (sorozatszámítás)
  • find: keresés (elem)
  • findIndex: keresés (index)

Objektum

Kulcs-érték párok gyűjteménye

Literálforma: { }

// creation
const uresObj = {};
const obj = {
  mezo1: 12,
  'mezo2': 'alma',
};

// referencing
obj.mezo1;      // => 12
obj['mezo1'];   // => 12