Webes alkalmazásfejlesztés 1. – JavaScript ZH

2016. április 7.

Tudnivalók

Töltsd le a keretprogramot!
A keret mappát nevezd el a Neptun kódoddal.
Ebben már elő van készítve a HTML és CSS rész, és be vannak linkelve a szükséges JavaScript állományok. A feladatok megoldása során csupán az egyes JavaScript állományokba kell dolgozni.
A részfeladatok is értékelésre kerülnek.
A feladatokat nem kell sorrendben elvégezni.
Az értékelés során elsősorban a működés számít, a kód minősége, alkalmazott programozási minták csak ott számítanak, ahol ez jelezve van.
A feladatokat – amelyik igényli – jQuery segítségével oldd meg.
Nem kell JSLint-en átmennie a kódnak.
Bármilyen – nem humán – segédanyag használható.
A zh végeztével tömörítsd be a fájlokat tartalmazó mappát, az állomány neve legyen a Neptun kódod, és töltsd fel a megoldást a beadó felületen!

Feladatok

1. Multihalmaz

Készíts egy multihalmaz objektumot generáló gyárfüggvényt! A megoldást a multihalmaz.js állományba készítsd el!
A multihalmaz tárolja az elemeket (szűkítsük le számokra) és azok multiplicitását. A következő metódusok legyenek elérhetőek a generált objektum publikus interfészében:
1. empty() – Törli a halmaz elemeit
2. insert(e) – berakja az elemet a halmazba; ha már volt, növeli a multiplicitását
3. erase(e) – kiveszi az elemet a halmazból; ha már volt, csökkenti a multiplicitását
4. count(e) – visszaadja az elem multiplicitását
5. serialize(nev) – sorosítja a halmazt: egy szöveget ad vissza "nev=ertek" formában, ahol az ertek az elemeket tároló adatszerkezet JSON reprezentánsa (JSON.stringify(adat)).

Próbáld ki a következő kódrészlettel:

var h = multiset.create();
h.insert(1);
h.insert(2);
h.insert(1);
console.log(h.serialize('halmaz'));
console.log(h.count(1));

Tedd az empty, insert, erase metódusokat láncolhatóvá, hogy működjön az alábbi kódrészlet is:

var h2 = multiset.create();
h2.insert(10).insert(20).insert(30).insert(20);
console.log(h2.serialize('h'));
h2.erase(10).erase(20);
console.log(h2.serialize('h'));

Tedd priváttá az elemeket tároló adatszerkezetet!

2. Értesítő

Elvárt működés

A megoldást az ertesito.js állományba készítsd el!
Felfedő modul minta segítségével készíts olyan objektumot, ami értesítő üzeneteket jelenít meg az oldalon. Az üzenetek HTML reprezentánsa egy ertesitesek azonosítójú ul elemben lévő listaelemek. Az értesítő objektum publikus interfészén az alábbi műveletek legyenek:
1. add(ms, msg) – Az msg üzenetet megjeleníti az oldalon és ms ezredmásodpercig a képernyőn tartja, ezt követően elhalványodással eltünteti.
Első lépésként hozd létre az ertesitesek azonosítójú ul listát, és ezt csatold a main azonosítójú div első gyerekeként.
Egy üzenet hozzáadásakor egy új listaelemet kell létrehozni, és azt az előbb létrehozott lista gyerekelemei közé kell felvenni. Gondoskodni kell róla, hogy ms ezredmásodperc múlva a lista elem elhalványodjon és a dokumentumból törlődjön.

Próbáld ki a következő kódrészlettel:

ertesito.add(1000, 'Uzenet1');
ertesito.add(2500, 'Uzenet2');
ertesito.add(5000, 'Uzenet3');

Bővítsd az add metódust egy auto paraméterrel. Ennek igaz értéke esetén az üzenet automatikusan eltűnik, hamis érték esetén viszont addig marad az oldalon, amíg rá nem kattintunk. Az üzenet szövegének végére vegyünk fel egy div elemet, amelyben erről értesítjük a felhasználót (“kattints a bezáráshoz”).

Próbáld ki a következő kódrészlettel:

ertesito.add(true, 1000, 'Uzenet1');
ertesito.add(false, 2500, 'Uzenet2');
ertesito.add(false, 5000, 'Uzenet3');

A curry programozási minta (vagy parciális függvény) segítségével készítsd el az ertAuto1s függvényt, amely a paraméterül megkapott szöveget egy másodpercig jeleníti meg. Próbáld ki:
```
ertAuto1s("OK");
```
Az uzenet_gomb azonosítójú gombra kattintva jelenjen meg üzenetként az uzenet azonosítójú szöveges beviteli mező tartalma.

3. Megjegyzések

Szeretnénk egy weboldal részeihez megjegyzéseket fűzni. Az oldalra kattintva a kattintott elem bal-felső sarkán egy szám jelenik meg, alatta pedig egy űrlap, amelyen keresztül új megjegyzés vihető fel. Ha már egy meglévő szám fölé visszük az egeret, akkor megjelennek az eddigi megjegyzések, rákattintva újabb megjegyzés adható hozzá. A megoldást a megjegyzes.js fájlba készítsd!
Felfedő modul mintával hozz létre egy olyan objektumot, ami a fenti funkcionalitásért felel. Az így létrehozott objektum start() metódusával lehet a funkcionalitást aktiválni:
```
megjegyzesek.start();
```
Az oldalon bármilyen elemre kattintva tároljuk el annak CSS szelektorát. Minden újabb elemnél egy számlálót is növeljünk, ami az adott elemhez tartozó megjegyzés azonosítójaként szolgál. Írjuk ki a konzolra minden kattintáskor a tárolt azonosító-szelektor párosokat! Egy elem CSS szelektorát a következő függvénnyel tudjuk meghatározni:
```
function getSelectorForElement($element) {
    return $element
        .parentsUntil('body')
        .andSelf()
        .map(function() {
            return this.nodeName + ':eq(' + $(this).index() + ')';
        }).get().join('>');
}
```
Egy elemre kattintáskor a kattintott elem bal-felső sarkánál jelenjen meg egy szám, az adott elemhez tartozó azonosító. Ehhez egy number stílusosztályú div-et kell generálni, és az adott elemhez pozícionálni. Ehhez érdemes a jQuery offset() függvényét használni.
Ugyanekkor jelenjen meg egy űrlap is, amelyen keresztül megjegyzés vihető fel az adott elemhez. Az űrlap sablonja az oldalon már megtalálható. Ezt az űrlapot kell az elem alá pozícionálni. A gombra kattintva a beírt megjegyzést tároljuk el az adott elemhez tartozó struktúrában!
Egy szám fölé víve az egeret jelenjen meg felsorolásként egy lista az adott elemnél. Ehhez használhatjuk a list stílusosztályt.
A számra kattintva legyen lehetőség új megjegyzést felvinni!