Scris de César Krall

Codificare aprenderaprogramar.com: CU01139E

EXERCITIU REZOLVAT CU JAVASCRIPT INTERIOR

În versiunea anterioară a cursului am văzut sintaxa și utilizarea de bază a innerHTML în JavaScript. Acum vom propune și vom da soluția unui exercițiu în care încercăm să folosim mai avansat innerHTML. Mai exact, având în vedere un tabel cu date, vom vedea cum putem face datele editabile.

DECLARAȚIE DE EXERCITARE

Cu acest exercițiu dorim, pe de o parte, să folosim cunoștințele dobândite de-a lungul cursului și, pe de altă parte, să ne obișnuim cu ideea că va trebui întotdeauna să căutăm informații suplimentare pentru a rezolva unele întrebări pe care nu le cunoaștem. a priori. Când lucrați în dezvoltarea web, este imposibil să cunoașteți toată sintaxa și instrucțiunile posibile, proprietățile etc. și, prin urmare, este necesar să consultăm cărți, reviste sau pagini web pentru a obține informații suplimentare la cunoștința noastră.

Declarația exercițiului este următoarea:

O pagină web încarcă un tabel cu date privind conținutul nutrițional al alimentelor, după cum se arată mai jos:


Conținut nutrițional la 100 g de alimente. Calorii alimentare (kCal) Grăsimi (g) Proteine ​​(g) Glucide (g) Acțiuni
Coacăze 49 0,2 0,4 12.7 Editați | ×
Pătlagină 90 0,3 1.0 23.5 Editați | ×
cireașă 46 0,4 0,9 10.9 Editați | ×
căpșună 37 0,5 0,8 8.3 Editați | ×

Când faceți clic pe Editați textul din coloana Acțiuni, se doresc următoarele:

a) Textul acelei coloane care pune> în albastru, va fi înlocuit cu textul> în gri sau negru.

b) Datele din rândul corespunzător vor deveni casete de text editabile astfel încât utilizatorul să poată modifica datele din acel rând.

c) Textul ar trebui să apară în partea de jos a tabelului: și două butoane: Acceptați și Anulați, pe care utilizatorul poate face clic pentru a accepta modificările sau pentru a anula.

Dacă utilizatorul dă clic pe butonul Acceptă, datele rândului care se editează trebuie trimise către o adresă URL de destinație prin metoda get. De exemplu, dacă adresa URL de destinație este aprenderaprogramar.com și edităm rândul corespunzător căpșunii și apăsăm pe accept, browserul ar trebui să ne trimită la o adresă URL ca aceasta:

Atenție: datele care trebuie trimise la adresa URL de destinație sunt datele editate de utilizator, nu datele din tabelul original.

Dacă utilizatorul face clic pe Anulare, tabelul original va fi reîncărcat (astfel încât să nu existe niciun rând în editare).

Dacă utilizatorul face clic pe Editare într-un alt rând în timp ce un rând este selectat, va fi afișat un mesaj care va indica următoarele: „Se poate edita o singură linie. Reîncărcați pagina pentru a edita alta ".

Următoarea imagine reflectă ideea a ceea ce doriți să realizați:

javascript

În acest exercițiu presupunem că tabelul va încărca date dintr-o bază de date, dar din moment ce obiectivul nostru nu este să gestionăm baze de date sau limbi pe partea serverului, ci să vedem aplicații JavaScript, ne vom limita la crearea tabelului manual cu codul HTML necesar.

LINII DIRECTIVE DE SOLUȚIE: PASUL 1

Încercați să rezolvați exercițiul cu cunoștințele dobândite de-a lungul cursului și făcând câteva întrebări suplimentare pe internet. Este bine să încercați să vă confruntați cu probleme pe cont propriu și să încercați să le rezolvați singur, deoarece favorizează învățarea ca programatori. Rețineți că este posibil ca acest exercițiu să nu aibă o singură soluție, dar există diferite moduri de a-l prezenta și modalități diferite de a o rezolva. Încercați să creați propria soluție și apoi comparați-o cu cea pe care o vom indica încercând să vedeți avantajele și dezavantajele ambelor moduri de a rezolva problema.

GHIDURI DE SOLUȚIE: PASUL 2

Dacă aveți nevoie de îndrumare, aici vom schița soluția (completăm aceste instrucțiuni căutând pe internet ceea ce s-ar putea să aveți nevoie) pe care am creat-o, astfel încât să puteți încerca să o implementați singur. Pașii de urmat ar fi următorii:

1) Creați un fișier html numit testEdicionTablas.html în care aveți codul HTML al tabelului, astfel încât textul de editare să se afle în etichetele span care răspund la eveniment onclick = "transformEnEditable (this)". Sub tabel adăugați un div. Diviziunea goală va servi pentru a adăuga ceea ce trebuie afișat atunci când utilizatorul face clic pe un buton de editare.

2) Creați un fișier css numit styles.css în care aveți stilurile pentru tabel și pentru etichetele span cu textul Edit, butoane etc.

3) Creați un fișier js numit functions.js unde aveți o variabilă globală numită> și tip boolean care vă permite să știți dacă vreun rând este în curs de editare sau nu.

4) Creați o funcție> care ar trebui să fie însărcinată cu transformarea datelor unui rând în editabile, definindu-le în etichete ... folosind innerHTML. De asemenea, trebuie să adăugați textul> și cele două butoane: Acceptați și Anulați. Dacă a existat deja un rând în curs de editare, mesajul>

5) Creați o funcție> astfel încât atunci când utilizatorul face clic pe butonul OK, se creează un formular cu date ascunse (ascunse) capturate din celulele rândului care sunt editate și trimise la adresa URL de destinație prin metoda get. Veți adăuga formularul cu innerHTML și trimiterea se poate face cu declarația javascript document.formname.submit ();

6) Creați funcția de suprascriere care reîncarcă pagina originală atunci când utilizatorul face clic pe butonul de anulare. Puteți face acest lucru cu declarația JavaScript window.location.reload ();

SOLUȚIA PROPUSĂ

Mai jos indicăm codul soluției propuse. Rețineți că aceasta nu trebuie considerată singura soluție sau cea mai bună soluție. Este posibil să fi definit o soluție mai bună decât aceasta. Comparați soluția cu propunerea și încercați să vedeți avantajele și dezavantajele fiecăreia dintre ele.

Portal web - aprenderaprogramar.com

Conținut nutrițional la 100 g de alimente.

Proteine ​​(g) Glucide (g) Opțiuni