Webfejlesztés 2.

1. Bevezetés, követelmények, JavaScript nyelvi alapok

Horváth Győző
Egyetemi adjunktus
1117 Budapest, Pázmány Péter sétány 1/c., 2.408-as szoba
Tel: (1) 372-2500/8469
horvath.gyozo@inf.elte.hu

Az előadás követhető:

webprogramozas.inf.elte.hu

• –> Webfejlesztés 2.
• –> 1. előadás

Dinamikus webprogramozás

Statikus vs dinamikus

Eddigi ismeretek

• Statikus weblapok készítése
• Webfejlesztés 1.
  • HTML 4.01
  • XHTML
  • HTML5
  • CSS 1, 2, 3
  • Alapvető HTTP ismeretek

Kliens-szerver architektúra

Statikus oldalak

• Szerver szempontjából statikus
  • Kérés pillanatában a szerveren megtalálható az a tartalom, amely leküldésre kerül a válaszban
  • Fájlkiszolgálás
• Kliens szempontjából statikus
  • A letöltött és a létrejött tartalom az oldal élettartamának a végéig ugyanaz
  • Nem változik meg sem a böngésző állapota, sem a betöltött dokumentum szerkezete
  • Nem fut le benne programkód, leíró nyelv, deklaratív

Dinamikus oldalak

• Szerver szempontjából dinamikus
  • A válaszként leküldött tartalmat program állítja elő
  • A kérés pillanatában a válasz még nem létezik a szerveren
• Kliens szempontjából dinamikus
  • A letöltött tartalomban programkód fut le
  • Ez megváltoztathatja a böngésző állapotát és a dokumentum szerkezetét
• → programozás

Miről lesz szó?

• Dinamikus weblapkészítés
• Dinamikus webprogramozás
• Kliens-szerver architektúra mindkét oldalán
  • Kliensoldalon: JavaScript
  • Szerveroldalon: PHP
• Alapvető ismeretek, bevezetés
  • Új nyelvek
  • Új technológiák
  • Új programozási modellek

Félév felépítése

• Első felében a kliens oldali dinamikus webprogramozás alapjaival ismerkedünk meg
  • JavaScript
• Második felében a szerver oldali dinamikus webprogramozás alapjai következnek
  • PHP

Motiváció

Cél

• Összetettebb alkalmazás készítése
  • Grafilogikai feladat (admin/admin)
  • Vízvezetékes feladat (admin/admin)
  • Labirintus
  • Sárkányharcos

Követelmények

Tárgy honlapja

http://webprogramozas.inf.elte.hu/#!/subjects/webfejl2-pti

Általános információk

• Óraszám: 1 előadás + 2 gyakorlat
• Előfeltétel: Webfejlesztés 1.
• Számonkérés: folyamatos számonkérésű tárgy

Követelmények

• Előadásra nagyon ajánlott bejárni
  • Csak a diasor alapján nem biztos, hogy megérthető
• Gyakorlatokra kötelező bejárni
  • Legfeljebb 3 hiányzás
• Két beadandó
  • JavaScript
  • PHP
• Évfolyam zh
  • PHP és JavaScript

Követelmények

• Beadandó
  • Értékelés: -0,5; 0; 0,5
  • Online felületen kell beadni
• Évfolyam zh
  • 1-től 5-ig
  • 4 részfeladat megoldása
  • Részfeladatonként 1-1 jegy
• Plágiumellenőrzés
  • másolás esetén nincs jegy

Követelmények

• Jegyszerzés feltételei
  • Részvétel a gyakorlatok legalább 75%-án (maximum 3 hiányzás)
  • Két elfogadott beadandó
  • Megírt évfolyam zh
• Értékelés
  • Évfolyam zh + JS beadandó + PHP beadandó
  • A 2-es érdemjegyhez legalább 2-esre megírt évfolyam zh szükséges.

Határidők

• JavaScript beadandó
  • 2019. március vége, április eleje
• PHP beadandó
  • 2019. május közepe
• Évfolyam zh
  • 2019. május 29. szerda, 9-12, Lovarda
• Pótzh
  • 2019. június 5. szerda, 9-12, Lovarda

JavaScript története

JavaScript születése, a böngészők háborúja

A kezdet

Név és szabvány

• Elnevezések
  • LiveScript
  • JavaScript: marketing miatt a Java programozók átcsábítására (web Visual Basic-je)
• Szabvány: ECMAScript
  • Európai Informatikai és Kommunikációs Rendszerek Szabványosítási Szövetsége (ECMA)
• Microsoft
  • JScript

Böngészők háborúja

• 1996-1999: Böngészők háborúja
  • Netscape Navigator vs. Microsoft Internet Explorer
  • Más-más irányba mennek, kölcsönösen nem fogadják el egymás javaslatait
  • Nyelv és böngészők gyors fejlődése, CSS
  • Szabványosítás elmaradt → inkompatibilitási problémákhoz vezet
• 1999: Sötét középkor
  • Szerveroldali technológiák fejlődése
• 2006: JavaScript újrafelfedezése (AJAX)

ECMAScript verziók

• 1997: 1. verzió
• 1999: 3. verzió
• 2009: 5. verzió (ES5)
  • hibajavítás
  • apróbb fejlesztések
• 2015: 6. verzió (ES6, ECMAScript 2015)
  • nagyobb fejlesztések
  • modern nyelvi tulajdonságok
• 2016: 7. verzió (ES7, ECMAScript 2016)
• 2017: 8. verzió (ES8, ECMAScript 2017)
• Stages: 0, 1, 2, 3, 4 –> szabvány

Fejlesztőeszközök

Szerkesztők, böngészők, eszköztárak, dokumentáció

Szerkesztők

• Tetszőleges modern kódszerkesztő használható
• Text editorok
  • Notepad++
  • Sublime Text 3
  • Atom
  • Visual Studio Code
• Integrált fejlesztőkörnyezetek
  • Netbeans IDE
  • Visual Studio
  • Webstorm

Böngészők

Webfejlesztési eszközök

• Webfejlesztő eszköztár (F12)
  • Elemek
  • JavaScript konzol (console.log())
  • Debugger
  • Erőforrások
  • Hálózati forgalom
  • Teljesítményprofilozás
• Parancssori eszközök

Dokumentáció

• Hivatalos dokumentáció az ECMAScript szabvány
• Mozilla Developer Network JavaScript része
  • főoldal
  • JavaScript referencia
  • JavaScript guide
  • Ezekben sok Firefox specifikus dolog van, de ezt a dokumentáció megfelelően jelzi

Futtató környezet

Futási környezet

• A JavaScriptnek szüksége van egy futtató környezetre
  • Böngésző
  • Parancssor (node.js)

Hova írhatjuk a kódot?

• JavaScript konzolba (böngésző)
  • Az adott oldal kontextusában értelmezésre kerül
  • Kipróbálásra jó
• HTML kódba (böngésző)
  • Inline szkript, <script> tag, bárhova rakhatjuk
  • Külső állományba, <script> tag src attribútumával töltjük be
• Parancssori értelmezőbe (parancssor)

JavaScript kód helye

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webfejlesztés 2.</title>
    <script type="text/javascript">
      //JavaScript kód helye
    </script>
    <script type="text/javascript" src="jskod.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      //JavaScript kód helye
    </script>
    <p>Hello világ!</p>
    <script type="text/javascript" src="jskod2.js"></script>
  </body>
</html>

JavaScript nyelvi alapok

C++ → JavaScript

Felépítés

Mintaként szolgáló nyelvek

• Sokféle minta → sokoldalúság
• Megismerés útja: C++ → JavaScript (hasonlóság).
• Később: különbségek

C++ vs JavaScript

Gyengén típusos

• Dinamikusan tipizált nyelv
• A változók típusa a benne tárolt érték típusától függ
• Vagy másképp: a típusok az értékekhez tartoznak, nem a változókhoz.
• Sok automatikus típuskonverzió kifejezésekben, összehasonlításokban
  • Szövegből szám
  • Bármiből szöveg
  • Stb, stb.

a = 'alma';
a = 12;
a == '12'; //true

Interpretált

• A böngészőben futó értelmező értelmezi a JavaScript kódsorokat sorról sorra
• Nincs fordítási fázis, nem a lefordított kód fut
• Minimális előfeldolgozás történik
• A kód a hibáig lefut, ott elakad
  • Az adott <script> blokk futása megáll
  • A <script> blokk után folytatódik az oldal betöltése.

Oldalbetöltési szekvencia

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>Paragrafus 1.</p>
    <script type="text/javascript">
      console.log('1');
    </script>
    <p>Paragrafus 2.</p>
</body>
</html>

Betöltés hiba esetén

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>Paragrafus 1.</p>
    <script type="text/javascript">
      console.log('1. szkript blokk eleje');
      alma.szin = 'piros';
      console.log('1. szkript blokk vége');
    </script>
    <p>Paragrafus 2.</p>
    <script type="text/javascript">
      console.log('2. szkript blokk');
    </script>
    <p>Paragrafus 3.</p>
  </body>
</html>

További jellemzők

• Kis és nagybetűk különböznek
• Nincs főprogram (main)
• Nincs input/output
• Nincs fájlkezelés
• Objektumorientált
• Prototípusos
• Automatikus pontosvessző beszúrás

Típusok

• Egyszerű típusok
  • Szám
  • Szöveg
  • Logikai
  • null
  • undefined
• Összetett típusok
  • Tömb
  • Objektum

Literálformák

Adott típus megjelenési formája

// Logikai literál
true
false

// Szám literál
12
12.34

// Szöveg literál
'Szöveg'
"Szöveg"
'Idézőjelben "így" macsakörmölök'
"Macskakörömben 'így' idézek"
'Idézőjelben \' idézőjel'
"Macskakörömben \" macskaköröm"
'Escape: \t \n \\ '
`Tetszőleges ${kifejezés}`

Változók

• var, let, const kulcsszóval deklarálunk új változót
• ezek elhagyásával → globális változó – KERÜLENDŐ!!!
• 'use strict;' – strict mode
• Ha nincs kezdőérték → undefined

let nev = 'Győző';
let masik;  //undefined

Operátorok

• Aritmetikai operátorok
  • +, -, *, /, %, ++, --, unáris -, unáris +
• Értékadás operátorai
  • =, *=, /=, %=, +=, -=, stb.
• Összehasonlító operátor
  • ==, !=, ===, !==, >, >=, <, <=
  • == és != érték szerint vizsgál (automatikus konverziók)
  • === és !== érték és típus szerint

12 ==  '12'  // true
12 === '12'  // false

Operátorok

• Logikai operátorok
  • &&, ||, !
• Szövegösszefűzés operátorai
  • +, +=
• Bitenkénti operátorok
  • &, |, ^, ~, <<, >>, >>>
• Speciális operátorok
  • ? : feltételes operátor
  • , több kifejezés végrehajtása egy utasításban, visszatérési értéke az utolsó kifejezés

Vezérlési szerkezetek

• Teljesen hasonló a C++-ban megismertekhez

// Elágazások
if (felt) {
  utasítások
}

if (felt) {
  utasítások
} else {
  utasítások
}

// Többirányú elágazás
switch(kifejezés) {
  case érték1:
    utasítások
    break;
  case érték2:
    utasítások
    break;
  default:
    utasítások 
}

// Ciklusok
while (felt) {
  utasítások
}

do {
  utasítások
} while (felt);

for (let i = 1; i <= n; i++) {
  utasítások
}

Tömbök

Literálforma: []

//Létrehozás és hivatkozás
const uresTomb = [];
const tomb = [12, 'alma', true];
tomb[0]; // => 12;
tomb[1]; // => 'alma';
tomb[2]; // => true;
tomb.length // => 3

//Módosítás
tomb[0] = 13;
tomb[0]; // => 13

//Bővítés
tomb[tomb.length] = 'uj';
tomb[100] = 'messze';
tomb.length; // => 101
tomb[99]; // => undefined

//Törlés (méret nem változik)
delete tomb[1];
tomb[1]; // => undefined
tomb.length; // => 101

//Mátrix
const m = [[1, 2, 3], [4, 5, 6]];
m[1][2]; // => 6

Tömbök

const gyumolcsok = [
  'alma',
  'korte',
  'szilva'
];

//A gyümölcsök kiírása a konzolra
for (let i = 0; i < gyumolcsok.length; i++) {
  console.log(gyumolcsok[i]);
}

// for..of ciklus (ES6)
for (const gyumolcs of gyumolcsok) {
  console.log(gyumolcs);
}

Objektumok

• Objektum
  • Kulcs-érték párok gyűjteménye
  • Asszociatív tömbhöz hasonlít (hash)
  • Rekord, osztálypéldány szimulálható
• JavaScriptben nagyon fontos szerepük van
• Majdnem minden objektum
• Literálforma: { }
• Ha az érték függvény → metódus

Objektumok

//Létrehozás
const uresObj = {};
const obj = {
  mezo1: 12,
  'mezo2': 'alma'
};

//Hivatkozás
obj.mezo1;      // => 12
obj['mezo1'];   // => 12

//Módosítás
obj.mezo2 = 'korte';

//Bővítés
obj.mezo3 = true;

//Törlés
delete obj.mezo1;
obj.mezo1; // => undefined

//Metódus
obj.metodus = function () {
  console.log('Meghívtak');
}
obj.metodus(); // => Meghívtak

Objektumok

//Tömb az objektumban
const zsofi = {
  kor: 7,
  kedvencEtelek: [
    'krumplipüré',
    'rántott hús',
    'tejberizs'
  ]
};
//Elem elérése
zsofi.kedvencEtelek[1]; 
// => 'rántott hús'

//Objektum az objektumban
const david = {
  kor: 4,
  cim: {
    iranyitoszam: '1241',
    varos: 'Budapest',
    utca: 'Egyszervolt utca',
    hazszam: 63
  }
};
//Elem elérése
david.cim.utca; 
// => 'Egyszervolt utca'

Objektumok

const matyi = {
  kor: 1.5,
  fiu: true,
  cuki: true
}

//Feldolgozás a for..in ciklussal
for (const i in matyi) {
  console.log(i, matyi[i]);
}
// Eredmény
// => kor 1.5
// => fiu true
// => cuki true

Adatszerkezetek modellezése

//C++ vector --> JavaScript tömb
const kutyuk = [
  'telefon',
  'fülhallgató',
  'pendrive',
  'e-könyv olvasó'
];

//C++ struct --> JavaScript objektum
const hallgato = {
  nev: 'Mosolygó Napsugár',
  neptun: 'kod123',
  szak: 'Informatika BSc'
};

//Rekordok tömbje
const hallgatok = [
  {
    nev: 'Mosolygó Napsugár',
    neptun: 'kod123',
    szak: 'Informatika BSc'
  },
  {
    nev: 'Kék Ibolya',
    neptun: 'kod456',
    szak: 'Informatika BSc'
  }
];

Adatszerkezetek modellezése

~ JavaScript Object Notation (JSON)

//Tömböt tartalmazó rekordok tömbje
const hallgatok = [
  {
    nev: 'Mosolygó Napsugár',
    neptun: 'kod123',
    szak: 'Informatika BSc',
    targyak: [
      'Programozás',
      'Webfejlesztés 2.',
      'Számítógépes alapismeretek'
    ]
  },
  {
    nev: 'Kék Ibolya',
    neptun: 'kod456',
    szak: 'Informatika BSc',
    targyak: [
      'Programozás',
      'Webfejlesztés 2.',
      'Diszkrét matematika',
      'Testnevelés'
    ]
  }
];

Függvények

//Függvény általános formája
function fvnev(par1, par2) {
  const valt; //lokális változó
  //függvénytörzs
  return visszatérési_érték;
}

//Például
function osszead(a, b) {
  return a + b;
}

• Visszatérési érték tetszőleges elemi vagy összetett érték
• Ha nincs return → undefined a visszatérési érték

Tétel példa

Konzolba vagy HTML-be helyezve

function osszegzes(tomb) {
  let s = 0;
  for (let i = 0; i < tomb.length; i++) {
    s = s + tomb[i];
  }
  return s;
}

const x = [1, 3, -2, 8];
console.log('Az összeg: ' + osszegzes(x));

Egyelőre ennyi :)

Alapvető kommunikáció

Beolvasás, kiírás

Kommunikáció – input, output

• Beépített felugró ablakokkal
  • alert(szöveg) – kiírás
  • confirm(szöveg) – beolvasás: logikai érték
  • prompt([szöveg, [érték]]) – beolvasás: szöveges érték
• HTML dokumentumon keresztül
  • Űrlapelemek – beolvasás (következő előadás)
  • HTML elemek – kiírás (következő előadás)
• Konzol
  • console.log(szöveg)

Kommunikáció példák

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webfejlesztés 2.</title>
  </head>
  <body>
    <script type="text/javascript">
      alert('Hello világ!');

      const kerdes = confirm('Szereted a csokit?');

      // const nev = prompt('Mi a neved?');
      const nev = prompt('Mi a neved?', 'Senki bácsi');

      console.log(`Helló ${nev}!`);
    </script>
  </body>
</html>

Összefoglalás

• C++ → JavaScript
• Adatszerkezetek
  • elemi
  • összetett: tömb, objektum
  • JSON
• Programozási tételek függvényekben
• Ld. gyakorlat