WEBFEJLESZTÉS 2. HTML5 JAVASCRIPT APIK FELHASZNÁLÓI OBJEKTUMOK

WEBFEJLESZTÉS 2. – HTML5 JAVASCRIPT APIK FELHASZNÁLÓI OBJEKTUMOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816

2

Ismétlés

Ismétlés 3



      

JavaScript nyelvi elemei JavaScript és HTML kapcsolata Eseménykezelés részletei JavaScript beépített objektumok DOM és HTML DOM: űrlapok, képek, táblázatok BOM Névtelen függvények, reguláris kifejezések Stílusok, animációk

4

JSON

JSON 5







JavaScript Object Notation A JavaScript literálformáira épülő adatleírási formátum Központ eleme  objektum:  tömb:

  

{}

[]

Elterjedt JSON.stringify() JSON.parse()

JSON példa 6



Szótáras feladat [ { { { {

]

"angol": "angol": "angol": "angol":

"apple", "pear", "plum", "peach",

"magyar": "magyar": "magyar": "magyar":

"alma" "korte" "szilva" "barack"

}, }, }, }

7

Tárolás

Tárolás 8



 

Változók (Süti) HTML 5 Storage (Web Storage)  localStorage

 sessionStorage  



Web SQL Database (részben támogatott) Indexed Database (IndexedDB) File API (bináris állományok tárolása)

localStorage 9



Kulcs-érték párok gyűjteménye  Objektum //Tárolás localStorage.alma = 'piros'; localStorage['bármi'] = 42; //Elővétel (akár újratöltés után) console.log(localStorage.alma); console.log(localStorage['bármi']); //Összetett adatszerkezetek tárolás var x = [1, 3, 5, 7]; localStorage.setItem('adat', JSON.stringify(x)); var x2 = JSON.parse( localStorage.getItem('adat') );

10

Média

Audio 11





Hangállományok lejátszása HTML