Írta: César Krall

Az aprenderaprogramar.com kódolása: CU01139E

BELSŐ JAVASCRIPT -EL MEGOLDOTT GYAKORLAT

A tanfolyam előző részében láthattuk a belső HTML szintaxisát és alapvető használatát a JavaScript-ben. Most javaslatot teszünk és megoldást adunk egy gyakorlatra, amelynek során megpróbáljuk fejlettebben használni a belsőHTML-t. Pontosabban, egy táblázatot adva, megnézzük, hogyan lehet az adatokat szerkeszthetővé tenni.

GYAKORLATI NYILATKOZAT

Ezzel a gyakorlattal egyrészt szeretnénk felhasználni a tanfolyam során megszerzett ismereteket, másrészt megszokni azt a gondolatot, hogy mindig további információkat kell keresnünk néhány olyan kérdés megoldásához, amelyeket nem ismerünk eleve . A webfejlesztés során lehetetlen megismerni az összes szintaxist és a lehetséges utasításokat, tulajdonságokat stb. és ezért könyvekhez, folyóiratokhoz vagy weboldalakhoz kell fordulni további információk megszerzése érdekében.

A gyakorlat megállapítása a következő:

Egy weboldal betölti az élelmiszerek tápértékére vonatkozó adatokat tartalmazó táblázatot, az alábbiak szerint:


100 g élelmiszer tápértéke. Élelmiszer kalóriák (kCal) Zsír (g) Fehérje (g) Szénhidrátok (g) Műveletek
Áfonya 49 0.2 0.4 12.7 Szerkesztés
Főzőbanán 90 0,3 1.0 23.5 Szerkesztés
Cseresznye 46 0.4 0.9 10.9 Szerkesztés
Eper 37 0.5 0.8 8.3 Szerkesztés

Ha a Műveletek oszlopban található Szerkesztés gombra kattint, a következőket kívánja elérni:

a) Az oszlop szövege, amely> kék színnel jelenik meg, helyébe a> szürke vagy fekete szöveg lép.

b) A megfelelő sor adatai válnak szerkeszthető szövegmezők hogy a felhasználó módosítsa az adott sor adatait.

c) A szövegnek a táblázat alján kell megjelennie: és két gomb: Elfogadás és Mégse, amelyekre a felhasználó kattintva elfogadhatja a módosításokat vagy törölheti.

Ha a felhasználó az Elfogadás gombra kattint, a szerkesztendő sor adatait a get metódussal el kell küldeni a cél URL-re. Például, ha a cél URL az aprenderaprogramar.com, és mi az Epernek megfelelő sort szerkesztjük, és megnyomjuk az Elfogadás gombot, a böngészőnek el kell küldenie egy ilyen URL-re:

Figyelem: az adatok, amelyeket el kell küldeni a cél URL-re a felhasználó által szerkesztett adatok, nem az eredeti táblázatadatokat.

Ha a felhasználó a Mégse gombra kattint, az eredeti táblázat újratöltésre kerül (így a szerkesztésben nem lesz sor).

Ha egy sor szerkesztése közben a felhasználó egy másik sorban az Edit gombra kattint, megjelenik egy üzenet, amely a következőket mondja: „Csak egy sort lehet szerkeszteni. Töltse be újra az oldalt egy másik szerkesztéséhez ".

A következő kép azt az elképzelést tükrözi, hogy mit szeretne elérni:

javascript

Ebben a gyakorlatban feltételezzük, hogy a táblázat adatokat tölt be egy adatbázisból, de mivel nem az a célunk, hogy adatbázisokat vagy nyelveket kezeljünk a szerver oldalon, hanem hogy lássuk a JavaScript alkalmazásokat, arra korlátozódunk, hogy a táblázatot manuálisan hozzuk létre a szükséges HTML kódot.

MEGOLDÁSI ÚTMUTATÓK: 1. LÉPÉS

Próbálja meg megoldani a gyakorlatot a tanfolyam során megszerzett ismeretekkel, és tegyen néhány további kérdést az interneten. Jó, ha megpróbálja önmagában kezelni a problémákat, és megpróbálja saját maga megoldani őket, mivel ez elősegíti a programozóként való tanulást. Ne feledje, hogy ennek a gyakorlatnak nem biztos, hogy egyedi megoldása van, de különböző módon lehet feltenni és különböző módon megoldani. Próbáljon létrehozni saját megoldást, majd hasonlítsa össze azzal a megoldással, amelyet jelezni fogunk, és megpróbálja meglátni a probléma megoldásának mindkét módjának előnyeit és hátrányait.

MEGOLDÁSI ÚTMUTATÓK: 2. LÉPÉS

Ha útmutatásra van szüksége, itt nagyjából meg fogjuk jelölni a megoldást (egészítse ki ezeket a jelzéseket azáltal, hogy az interneten keresi, amire szüksége lehet), amelyet azért hoztunk létre, hogy Ön maga is megpróbálja megvalósítani. A következő lépéseket kell követni:

1) Hozzon létre egy testEdicionTablas.html nevű html fájlt, ahol meg van a táblázat HTML-kódja, úgy, hogy a szerkesztés szövege olyan span címkékben legyen, amelyek válaszolnak az onclick = "transformEnEditable (this)" eseményre. A táblázat alatt adjon meg egy üres div-t. Az üres div hozzáadja azt, amit meg kell jeleníteni, amikor a felhasználó egy szerkesztés gombra kattint.

2) Hozzon létre egy cs.fájlt, amely a styles.css nevet tartalmazza, ahol megadhatja a táblázat és a span címkék stílusát a Szerkesztés, gombok stb.

3) Hozzon létre egy js fájlt, amelynek neve: functions.js, ahol rendelkezik egy> nevű globális változóval és logikai típussal, amely lehetővé teszi, hogy megtudja, van-e sor szerkesztés alatt vagy sem.

4) Hozzon létre egy olyan funkciót>, amelynek feladata egy sor adatainak átalakítása szerkeszthetővé, és címkékben definiálni őket ... belsőHTML használatával. Hozzá kell adnia a> szöveget és a két gombot is: Elfogadás és Mégse. Ha már volt sor szerkesztése, akkor a> üzenetet

5) Hozzon létre egy> függvényt úgy, hogy amikor a felhasználó az OK gombra kattint, egy űrlap jön létre a rejtett adatokkal, amelyeket a szerkesztett sor celláiból rögzítenek, és a get metódussal elküldenek a cél URL-re. Hozzáadja az űrlapot belsőHTML-vel, és a beküldés a javascript utasítással végezhető el a document.formname.submit ();

6) Hozzon létre egy felülbírálási funkciót, amely újratölti az eredeti oldalt, amikor a felhasználó a Mégse gombra kattint. Ezt a JavaScript window.location.reload () utasítással teheti meg;

JAVASOLT MEGOLDÁS

Az alábbiakban feltüntetjük a javasolt megoldás kódját. Ne feledje, hogy ezt nem kell az egyetlen megoldásnak vagy a legjobb megoldásnak tekinteni. Lehet, hogy ennél jobb megoldást definiált. Hasonlítsa össze megoldását a javaslattal, és próbálja meglátni mindegyik előnyeit és hátrányait.

Webportál - aprenderaprogramar.com

100 g élelmiszer tápértéke.

Fehérje (g) Szénhidrátok (g) Opciók