Gata JavaScript pentru completarea formularului. JavaScript expresiv: formulare și câmpuri de formulare. Formular simplu cu validare

Sunt într-o plimbare savantă zilele astea
Îți voi câștiga încrederea prin serviciul meu,
Îmi scrii un bilet la ordin,
Ca să nu am nicio îndoială cu privire la plată.

Mefistofel, în Faust de Goethe

Formularele au fost introduse pe scurt în capitolul anterior ca o modalitate de a transmite informațiile introduse de utilizator prin HTTP. Ele au fost dezvoltate pe web înainte de apariția JavaScript, cu așteptarea ca interacțiunea cu serverul să aibă loc atunci când treceți pe o altă pagină.

Dar elementele lor fac parte din DOM, ca și restul paginii, iar elementele DOM care reprezintă câmpuri de formular acceptă mai multe proprietăți și evenimente pe care alte elemente nu le fac. Acest lucru face posibilă vizualizarea și manipularea câmpurilor de intrare din programele JavaScript și adăugarea de funcționalități la formularele clasice sau utilizarea formularelor și câmpurilor ca bază pentru construirea unei aplicații.

Câmpuri Un formular web constă din orice număr de câmpuri de intrare înconjurate de o etichetă. HTML oferă multe câmpuri diferite, de la simple casete de selectare pornit/dezactivat până la liste derulante și câmpuri de introducere a textului. Această carte nu va discuta în detaliu toate tipurile de domenii, dar vom oferi o scurtă prezentare generală a acestora.

Multe tipuri de câmpuri de introducere folosesc o etichetă. Atributul său de tip este utilizat pentru a selecta stilul câmpului. Iată câteva tipuri comune:

câmp text text pe o singură linie
parola este aceeași cu textul, dar ascunde introducerea
caseta de selectare pornire/oprire
radio parte a câmpului cu posibilitatea de a alege dintre mai multe opțiuni
fișierul permite utilizatorului să selecteze un fișier pe computerul său

Câmpurile de formular nu trebuie să apară în interiorul unei etichete. Ele pot fi plasate oriunde pe pagină. Informațiile din astfel de câmpuri nu pot fi transmise serverului (acest lucru este posibil doar pentru întregul formular), dar atunci când facem câmpuri pe care le procesează JavaScript, de obicei nu trebuie să transmitem informații din câmpuri prin trimitere.

(text)

(parola)

(Caseta de bifat)

(radio)

(fişier)

Interfața JavaScript pentru astfel de elemente variază în funcție de tip. Ne vom uita la fiecare dintre ele puțin mai târziu.

Câmpurile de text cu mai multe rânduri au propria etichetă. Eticheta trebuie să aibă o etichetă de închidere și să folosească textul din interiorul acelor etichete în loc să folosească atributul value.

unu, doi, trei

Și eticheta este folosită pentru a crea un câmp care permite utilizatorului să selecteze una dintre opțiunile date.
Clatite Caserola Inghetata

Când valoarea unui câmp se modifică, evenimentul „modificare” este declanșat.

Focus Spre deosebire de majoritatea elementelor document HTML, câmpurile de formular pot primi focalizarea de la tastatură. Când faceți clic pe ele sau selectați în alt mod, acestea devin active, adică. receptorii principali de intrare de la tastatură.

Dacă documentul are un câmp de text, atunci textul pe care îl tastați va apărea în el numai dacă câmpul are focus de intrare. Alte câmpuri răspund diferit la tastatură. De exemplu, încearcă să treacă la o opțiune care conține text pe care îl introduce utilizatorul și, de asemenea, răspunde la tastele săgeți deplasând selecția opțiunii în sus și în jos.

Puteți controla focalizarea din JavaScript folosind metodele de focalizare și estompare. Primul mută focalizarea către elementul DOM de la care este numit, iar al doilea elimină focalizarea. Valoarea document.activeElement corespunde elementului curent care primește focus.

document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → CORP

Unele pagini solicită utilizatorului să înceapă imediat să lucreze la unul dintre câmpurile formularului. La Ajutor JavaScript Este posibil să se concentreze acest câmp atunci când documentul este încărcat, dar HTML are și un atribut de focalizare automată care obține același rezultat, dar spune browserului care sunt intențiile noastre. În acest caz, browserul poate suprascrie acest comportament în cazuri adecvate, cum ar fi atunci când utilizatorul a mutat focalizarea în altă parte.

Browserele permit în mod tradițional utilizatorului să mute focusul Tasta Tab. Putem influența ordinea de navigare prin atributul tabindex. În exemplu, documentul va schimba focalizarea de la câmp de text la butonul OK, în loc să parcurgeți mai întâi linkul de ajutor.

(ajutor) OK

În mod implicit, majoritatea tipurilor elemente HTML nu te concentra. Dar adăugând tabindex la element veți face posibil de primit mă concentrez.

Câmpuri dezactivate Toate câmpurile pot fi dezactivate cu atributul dezactivat, care există și ca proprietate a elementului obiect DOM.

Sunt bine, sunt leșinat

Câmpurile dezactivate nu acceptă focalizarea sau modificarea și, spre deosebire de câmpurile active, de obicei apar gri și estompate.

Când un program este în proces de procesare a unui clic pe un buton sau alt element, care poate necesita comunicarea cu serverul și poate dura mult timp, este o idee bună să dezactivați elementul până la finalizarea acțiunii. În acest caz, atunci când utilizatorul își pierde răbdarea și dă din nou clic pe element, acțiunea nu se va mai repeta.

Întregul formular Când un câmp este conținut într-un element, elementul său DOM va avea o proprietate de formular care se referă la formular. Elementul, la rândul său, are o proprietate elemente care conține o colecție de câmpuri asemănătoare matricei.

Atributul nume al unui câmp specifică modul în care va fi determinată valoarea acestui câmp atunci când este trimis către server. Poate fi folosit și ca nume de proprietate atunci când accesați proprietatea elementelor formularului, care acționează atât ca un obiect asemănător matricei (accesat prin număr) cât și ca hartă (accesat după nume).

Nume:
Parola:
Autentificare var form = document.querySelector("form"); console.log(form.elements.type); // → parola console.log(form.elements.password.type); // → parola console.log(form.elements.name.form == form); // → adevărat

Un buton cu un atribut de tip egal cu trimiterea trimite formularul atunci când este făcut clic. Presare Introduceți cheileîn interiorul unui câmp de formular are același efect.

Trimiterea unui formular înseamnă de obicei că browserul merge la pagina indicată de atribut forme de acţiune folosind fie GET, fie Solicitare POST. Dar înainte de asta, proprietatea „submit” este dezactivată. Poate fi gestionat în JavaScript, iar handlerul poate preveni comportamentul implicit apelând evenimentul preventDefault pe obiect.

Valoare: Save var form = document.querySelector("form"); form.addEventListener("submit", function(event) ( console.log("Salvarea valorii", form.elements.value.value); event.preventDefault(); ));

Interceptarea evenimentelor „trimite” este utilă în mai multe cazuri. Putem scrie cod care verifică validitatea valorilor introduse și afișează imediat o eroare în loc să transmitem datele din formular. Sau putem dezactiva trimiterea implicită a formularului și lăsăm programul să se ocupe de intrarea în sine, de exemplu folosind XMLHttpRequest pentru a trimite date către server fără a reîncărca pagina.

Câmpuri de text Câmpurile cu etichete și tipuri de text și parolă, precum și etichete, au interfata comuna. Elementele lor DOM au o proprietate de valoare care conține conținutul lor curent ca șir de text. Setarea acestei proprietăți la o valoare modifică conținutul câmpului.

Proprietățile câmpului text selectStart și selectionEnd conțin informații despre poziția cursorului și selecția textului. Când nu este selectat nimic, valoarea lor este aceeași și este egală cu poziția cursorului. De exemplu, 0 indică începutul textului, 10 indică faptul că cursorul se află la al 10-lea caracter. Când este selectată o parte a unui câmp, proprietățile sunt sensuri diferite, și anume începutul și sfârșitul textului selectat. De asemenea, puteți introduce o valoare în aceste câmpuri.

De exemplu, imaginați-vă că scrieți un articol despre Khasekhemwy, dar aveți probleme cu ortografia corectă a numelui lui. Următorul cod atribuie un handler de evenimente etichetei care, atunci când este apăsat F2, inserează șirul „Khasekhemwy”.

var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) ( // Codul tastei pentru F2 se întâmplă să fie 113 dacă (event.keyCode == 113) ( replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); ) )); funcția replaceSelection(câmp, cuvânt) ( var de la = field.selectionStart, la = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Pune cursorul după cuvântul field.selectionStart = field.selectionEnd = din + cuvânt.lungime);

Funcția înlocuireSelectare înlocuiește textul selectat curent cu cuvântul specificat și mută cursorul într-o poziție după acel cuvânt, astfel încât să puteți continua să tastați.

Evenimentul „modificare” pentru un câmp de text nu se declanșează de fiecare dată când este introdus un singur caracter. Se declanșează după ce câmpul își pierde focalizarea și valoarea sa a fost modificată. Pentru a răspunde instantaneu la modificările dintr-un câmp de text, trebuie să înregistrați un eveniment „de intrare”, care se declanșează de fiecare dată când introduceți un caracter, ștergeți text sau manipulați în alt mod conținutul câmpului.

În exemplul următor, vedem un câmp de text și un contor care arată lungimea curentă a textului introdus.

lungime: 0 var text = document.querySelector("input"); var output = document.querySelector("#lungime"); text.addEventListener("input", function() ( output.textContent = text.value.length; ));

Casete de selectare și butoane radio Caseta de selectare este un simplu buton radio binar. Valoarea sa poate fi preluată sau modificată prin proprietatea verificată, care conține o valoare booleană.

Faceți pagina violet var checkbox = document.querySelector("#purple"); checkbox.addEventListener("schimbare", function() ( document.body.style.background = checkbox.checked ? "mediumpurple" : ""; ));

O etichetă este folosită pentru a asocia o bucată de text cu un câmp de introducere. Atributul for trebuie să se potrivească cu id-ul câmpului. Făcând clic pe etichetă, se activează câmpul de introducere, acesta primește focus și schimbă valoarea - dacă este o bifă sau un buton radio.

Un buton radio este similar cu o bifă, dar este legat de alte butoane radio cu același nume, astfel încât doar unul dintre ele poate fi selectat.

Culoare: Violet Verde Albastru var butoane = document.getElementsByName("culoare"); funcția setColor(event) ( document.body.style.background = event.target.value; ) pentru (var i = 0; i< buttons.length; i++) buttons[i].addEventListener("change", setColor);

Metoda document.getElementsByName returnează toate elementele cu date atributul numelui. Exemplul iterează prin ele (prin modul obișnuit pentru buclă mai degrabă decât forEach, deoarece colecția returnată nu este o matrice reală) și înregistrează un handler de evenimente pentru fiecare element. Rețineți că obiectele eveniment au o proprietate țintă care se referă la elementul care a declanșat evenimentul. Acest lucru este util pentru a crea handlere de evenimente - handlerul nostru poate fi apelat de diferite elemente și trebuie să aibă o modalitate de a accesa elementul curent care l-a numit.

Selectați câmpuri Câmpurile selectate sunt similare cu butoanele radio - vă permit, de asemenea, să selectați dintre mai multe opțiuni. Dar dacă butoanele radio ne permit să controlăm aspectul opțiunilor, atunci tipul de câmp este determinat de browser.

Câmpurile selectate au o opțiune care seamănă mai mult cu o listă de casete de selectare decât cu butoane radio. Dacă atributul multiplu este prezent, eticheta vă va permite să selectați orice număr de opțiuni, nu doar una.

Clatite Caserola Inghetata

În majoritatea browserelor aspect câmpurile vor fi diferite de un câmp cu alegere unică, care de obicei arată ca un meniu derulant.

Atributul dimensiune al etichetei este folosit pentru a seta numărul de opțiuni care sunt vizibile simultan - în acest fel puteți influența aspectul abandonului. De exemplu, atribuind dimensiunea 3, veți vedea trei linii simultan, indiferent dacă opțiunea multiplă este prezentă.

Fiecare etichetă are o semnificație. Poate fi definit prin atributul value, dar dacă nu este specificat, atunci valoarea etichetei determină textul aflat în interiorul etichetei... Proprietatea de valoare a elementului reflectă opțiunea selectată în prezent. Pentru un câmp cu capacitatea de a selecta mai multe opțiuni, această proprietate nu este deosebit de necesară, deoarece va conține doar una dintre mai multe opțiuni selectate.

Eticheta de câmp poate fi accesată ca obiect asemănător matricei prin proprietatea opțiuni. Fiecare opțiune are o proprietate selectată care indică dacă opțiunea este selectată în prezent. Proprietatea poate fi, de asemenea, modificată pentru a face opțiunea selectată sau deselectată.

Următorul exemplu preia valorile selectate dintr-un câmp selectat și le folosește pentru a crea număr binar din biți. Apăsați Ctrl (sau Command pe un Mac) pentru a selecta mai multe valori simultan.

0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("schimbare", function() ( var number = 0; for (var i = 0; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; });

Câmp fișier Câmpul fișier a fost inițial destinat încărcării fișierelor de pe un computer printr-un formular. În browserele moderne, acestea vă permit, de asemenea, să citiți fișiere din JavaScript. Câmpul acționează ca paznic pentru dosare. Scriptul nu poate prelua și deschide pur și simplu un fișier de pe computerul utilizatorului, dar dacă utilizatorul selectează un fișier în acest câmp, browserul permite scriptului să înceapă să citească fișierul.

Câmpul fișierului arată de obicei ca un buton etichetat cu ceva de genul „Selectați fișierul”, cu informații despre fișierul selectat lângă el.

var input = document.querySelector("input"); input.addEventListener(„schimbare”, function() ( if (input.files.length > 0) ( var file = input.files; console.log(„Ați ales”, file.name); if (file.type) console.log(„Are tip”, fișier.tip);

Proprietatea fișierelor elementului este un obiect asemănător matricei (nu o matrice reală) care conține o listă de fișiere selectate. Initial este gol. Elementul nu are proprietate simpla fișier deoarece utilizatorul poate selecta mai multe fișiere simultan atunci când atributul multiplu este activat.

Obiectele din proprietatea fișiere au proprietățile nume (numele fișierului), dimensiunea (dimensiunea fișierului în octeți) și tipul (tipul fișierului în sensul tipului media - text/plat sau imagine/jpeg).

Ceea ce nu are este o proprietate care conține conținutul fișierului. Trebuie să încercați din greu să obțineți conținutul. Deoarece citirea unui fișier de pe disc durează mult, interfața trebuie să fie asincronă, astfel încât documentul să nu înghețe. Vă puteți gândi la constructorul FileReader ca la un constructor XMLHttpRequest, dar pentru fișiere.

var input = document.querySelector("input"); input.addEventListener("schimbare", function() ( Array.prototype.forEach.call(input.files, function(file)) ( var reader = new FileReader(); reader.addEventListener("load", function() (consola .log(„Fișier”, fișier.nume, „începe cu”, reader.result.slice(0, 20));

Citirea unui fișier are loc prin crearea unui obiect FileReader, înregistrarea unui eveniment „încărcare” pentru acesta și apelarea metodei sale readAsText, pasând fișierul către volum. Când descărcarea este completă, conținutul fișierului este stocat în proprietatea rezultat.

Exemplul folosește Array.prototype.forEach pentru a itera prin matrice, deoarece într-o buclă normală ar fi incomod de a primi obiectele necesare fișier și cititor din handlerul de evenimente. Variabilele ar fi comune tuturor iterațiilor buclei.

FileReaders are, de asemenea, un eveniment de „eroare” atunci când citirea unui fișier eșuează. obiect de eroare va fi salvat în proprietatea de eroare. Dacă nu vrei să-ți deranjezi capul cu un alt inconvenient circuit asincron, îl puteți încheia într-o promisiune (vezi capitolul 17):

Funcția readFile(fișier) ( return new Promise(funcție (reușită, eșuată) ( var reader = new FileReader(); reader.addEventListener("încărcare", function() (succeed(reader.result); )); reader.addEventListener ("eroare", function() ( fail(reader.error); )); reader.readAsText(fișier));

Stocarea datelor pe partea clientului Paginile HTML simple cu adăugarea de JavaScript poate fi o bază excelentă pentru mini-aplicații - mici programe de sprijin, automatizarea sarcinilor zilnice. Atașând handlere de evenimente la câmpurile de formular, puteți face totul, de la conversia Fahrenheit în Celsius până la generarea parolelor din parola principală și numele site-ului web.

Când o astfel de aplicație trebuie să salveze informații între sesiuni, variabilele JavaScript nu pot fi utilizate - valorile lor sunt aruncate de fiecare dată când pagina este închisă. Puteți configura un server, îl puteți conecta la Internet, iar apoi aplicația ar stoca datele dvs. acolo. Ne vom uita la asta în capitolul 20. Dar vă adaugă muncă și complexitate. Uneori este suficient să stocați date în browser. Dar cum?

Puteți stoca date șir, astfel încât să supraviețuiască reîncărcărilor paginii - pentru a face acest lucru, trebuie să le puneți într-un obiect localStorage. Permite stocarea datelor șirurilor sub nume (care sunt și șiruri), ca în acest exemplu:

LocalStorage.setItem("nume utilizator", "marijn"); console.log(localStorage.getItem(„nume utilizator”); // → marijn localStorage.removeItem("nume utilizator");

Variabila este stocată în localStorage până când este suprascrisă, ștearsă folosind removeItem sau utilizatorul șterge spațiul de stocare local.

Site-urile din domenii diferite au secțiuni diferite în acest spațiu de stocare. Adică, datele salvate de pe un site web în localStorage pot fi citite sau suprascrise numai de scripturi de pe același site.

Browserele limitează, de asemenea, cantitatea de date pe care o pot stoca, de obicei câțiva megaocteți. Această limitare, cuplată cu faptul că notarea hard disk-uri nu aduce profit oamenilor, împiedică consumarea spațiului pe disc.

Următorul cod implementează un program simplu pentru a lua notițe. Stochează notele ca obiect, asociind titluri cu conținut. Este codificat în JSON și stocat în localStorage. Utilizatorul poate selecta o notă prin câmp și poate modifica textul acesteia. O intrare este adăugată făcând clic pe un buton.

Note: nou
var list = document.querySelector("#list"); function addToList(name) ( var option = document.createElement("option"); option.textContent = name; list.appendChild(option); ) // Luați lista din stocarea locală var notes = JSON.parse(localStorage.getItem ("note")) || ("ce sa cumpar": "");

pentru (nume var în note) if (note.hasOwnProperty(nume)) addToList(nume); function saveToStorage() ( localStorage.setItem("note", JSON.stringify(note)); ) var curent = document.querySelector("#currentnote"); curent.valoare = note; list.addEventListener("schimbare", function() ( current.value = note; )); current.addEventListener("schimbare", function() (note = current.value; saveToStorage(); )); funcția addNote() ( var name = prompt("Numele notă", ""); if (!name) return; if (!notes.hasOwnProperty(name)) (note = ""; addToList(name); saveToStorage() ) list.value = nume curent.valoare = note)

Scriptul inițializează variabila note cu valoarea din localStorage, iar dacă nu este acolo, cu un obiect simplu cu o singură intrare „ce să cumpere”. O încercare de a citi un câmp lipsă din localStorage va returna null. Transmițând null la JSON.parse, vom primi null înapoi. Prin urmare, puteți utiliza operatorul ||. . Când datele din notă se modifică (adăugați intrare nouă

sau se modifică cea actuală), funcția saveToStorage este apelată pentru a actualiza câmpul stocat. Dacă ne-am aștepta să stocăm mii de înregistrări, ar fi prea scump și ar trebui să venim cu o procedură de stocare mai complexă - de exemplu, un câmp separat pentru fiecare înregistrare.

Când utilizatorul adaugă o înregistrare, codul trebuie să actualizeze câmpul de text, chiar dacă câmpul are un handler de „modificare”. Acest lucru este necesar deoarece evenimentul „schimbare” are loc numai atunci când utilizatorul modifică valoarea câmpului, și nu atunci când o face scriptul.

Există un alt obiect similar cu localStorage numit sessionStorage. Diferența dintre ele este că conținutul sessionStorage este uitat la sfârșitul sesiunii, ceea ce pentru majoritatea browserelor înseamnă momentul închiderii. Rezumatul HTML oferă multe tipuri variate

Puteți obține valoarea și manipula aceste câmpuri din JavaScript. La schimbare, ele declanșează evenimentul „modificare”, la intrarea de la tastatură – „intrare” și multe alte evenimente diferite de la tastatură. Ele ne ajută să surprindem momentul în care utilizatorul interacționează cu câmpul de introducere. Proprietăți precum valoare (pentru câmpurile de text și selectare) sau bifate (pentru casete de selectare și butoane radio) sunt folosite pentru a citi și scrie conținutul câmpurilor.

Când trimiteți un formular, are loc evenimentul „trimitere”. Managerul JavaScript poate apela apoi preventDefault la acest eveniment pentru a opri transferul datelor. Elementele de formular nu trebuie să fie incluse în etichete.

Când utilizatorul a selectat un fișier cu hard disk Prin câmpul de selecție a fișierelor, interfața FileReader ne va permite să accesăm conținutul fișierului dintr-un program JavaScript.

Obiectele localStorage și sessionStorage pot fi folosite pentru a stoca informații într-un mod care va supraviețui reîncărcărilor paginii. Primul salvează datele pentru totdeauna (sau până când utilizatorul le șterge în mod specific), iar al doilea – până când browserul este închis.

ExercițiiJavaScript Workbench Creați o interfață care vă permite să scrieți și să executați fragmente de cod JavaScript.

Faceți un buton lângă acesta, atunci când faceți clic, constructorul Funcție din capitolul 10 va împacheta textul introdus într-o funcție și o va apela. Convertiți valoarea returnată a funcției sau oricare dintre erorile acesteia într-un șir și imprimați-o după câmpul de text.

returnează „bună”; Să mergem // Codul tău.

Completare automată Completați un câmp de text astfel încât, atunci când introduceți text, sub acesta să apară o listă de opțiuni. Ai o matrice opțiuni posibile, și trebuie să le afișați pe cele care încep cu textul introdus. Când utilizatorul face clic pe o opțiune sugerată, acesta schimbă conținutul câmpului în acea opțiune.

// Construiește o matrice de nume de variabile globale, // cum ar fi „alerta”, „document” și „scrollTo” var termeni = ; pentru (nume var în fereastră) terms.push(nume); // Codul tau.

Conway’s Game of Life Aceasta este o simplă simulare a vieții pe o grilă dreptunghiulară, fiecare element fiind viu sau nu. Pentru fiecare generație (pas de joc) se aplică următoarele reguli:

Fiecare celulă vie al cărei număr de vecini este mai mic de doi sau mai mult de trei moare
- fiecare celulă vie care are doi-trei vecini trăiește până la următoarea mutare
- fiecare celulă moartă care are exact trei vecini prinde viață

Vecinii unei celule sunt toate celulele adiacente acesteia pe orizontală, verticală și diagonală, 8 în total.

Vă rugăm să rețineți că regulile se aplică întregii grile în același timp și nu fiecărei celule pe rând. Adică numărul de vecini se numără cu un moment înainte urmatorul pas, iar modificările care apar în celulele învecinate nu afectează noua stare a celulei.

Implementați jocul folosind orice structuri adecvate. Utilizați Math.random pentru a crea populații inițiale aleatoare. Afișați câmpul ca o grilă de bifă cu un buton „treceți la pasul următor”. Când utilizatorul activează sau dezactivează casetele de selectare, aceste modificări trebuie luate în considerare la calcularea generației următoare.

Următoarea generație // Codul dvs.

La fel ca mulți dezvoltatori web, petrec mult timp testând interfața cu utilizatorul site-urile la care lucrez.

Testarea automată este, desigur, un bun ajutor în acest proces, dar „punctele dure” din interfață sunt adesea imposibil de identificat în alt mod decât prin utilizarea site-ului. Iar si iar. Acest proces poate deveni plictisitor foarte repede. Mai ales completarea formularelor.

M-am confruntat eu cu această situație acum câteva luni, când adăugam lira sterlină la monedele acceptate atunci când facem check-out în Wufoo.

Pentru verificare, a fost necesar să se completeze multe câmpuri cu nume, adrese, numere de card de credit și tot ceea ce este implicat în procesul de calcul. Desigur, o parte semnificativă a acestor date nu ar fi trebuit repetată:

Până la urmă am făcut un bookmarklet pentru umplere rapidă formulare cu date de testare. (Bookmarklet este un program JavaScript conceput ca marcaj într-un browser, un hibrid al cuvintelor englezești „bookmark” - bookmark și „applet” - aplicație mică. - Traducere)

Am ales formularul bookmarklet deoarece:

este ușor de transmis utilizatorului;
este ușor de actualizat fără intervenția utilizatorului;
ruleaza pe orice platforma fara modificari.

Puteți face cu ușurință un bookmarklet creând un nou „pen” pe CodePen și punând ceva de genul acesta în HTML:

Utilizatorul trebuie doar să trageți linkul rezultat în zona de marcaje a browserului său. Făcând clic pe un marcaj, codul va rula pe pagina curentă.

Pentru acest proiect, m-am bazat pe jQuery pentru a face codul cât mai ușor de citit și compatibil între browsere. Dacă cineva are nevoie de o versiune JavaScript pură, lasă-mi un comentariu și voi încerca să-mi dau seama ceva.

Pentru a crea date aleatorii am folosit minunata bibliotecă Faker. Implementarea sa JavaScript poate fi găsită aici.

Bazele bookmarkletului

Putem pune tot codul direct în link. Dar această opțiune va fi incomod de citit și întreținut. În plus, am vrut să pot face modificări codului fără a forța utilizatorii să actualizeze marcajul. Deci, este mai bine să lăsați un link în bookmarklet către fișier extern.

Bookmarklet-ul în sine arată astfel:

Bookmarklet-ul meu

În el încărcăm scriptul în corpul paginii și adăugăm acolo un link către fișierul JavaScript extern. Trebuie remarcat faptul că, dacă bookmarklet-ul este folosit pentru a testa o pagină încărcată prin https, atunci fișierul JS extern trebuie să fie servit și prin https, altfel browserul va arunca o eroare de securitate.

Este foarte posibil ca atunci când dezvoltați un bookmarklet să doriți să îl utilizați server local. În acest caz, asigurați-vă că înlocuiți adresa din link cu adresa serverului real atunci când distribuiți scriptul.

Completarea câmpurilor

Acum că am terminat cu marcajul care ne încarcă scriptul, putem trece la scriptul în sine.

Cea mai importantă sarcină pentru noi va fi să nu spargem nimic din pagina pe care scriptul nostru o va testa.

Așa că îl vom include într-o funcție anonimă care rulează automat. Acest lucru va limita în consecință domeniul de aplicare al funcțiilor și variabilelor noastre:

Îmi place foarte mult funcția de generator de numere pseudo-aleatorie oferită de Chris Coyler în acest articol. Să-l folosim după cum este necesar:

var _rand = function(min, max) ( return Math.floor(Math.random() * (max - min + 1)) + min; )

Acum să descarcăm FakerJS. Deoarece scriptul nostru depinde de jQuery, putem folosi mecanismul său de încărcare leneră folosind funcția $.getScript:

Acum că ni s-a promis accesul la Faker, putem folosi metodele sale pentru a genera o varietate de nume plauzibile, locuri, adrese și alte date de testare.

Următorul constructor ne va oferi reutilizarea datelor generate:

var FormData = function(faker) ( this.faker = fals; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100.9999); // setați această valoare la specificațiile dvs. this.password = "pass1234" = faker.Name.findName(); br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" numărul real al cardului de credit this.cc = "4242 4242 4242 4242"; this.exp1 = _rand(1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999);

Ar fi o idee bună să testați și casetele de selectare și butoanele radio de pe site-ul nostru, selectându-le în ordine aleatorie. Pentru a face acest lucru, va trebui să extindem ușor funcționalitatea constructorului nostru:

// Selectează aleatoriu meniul drop-down FormData.prototype.randomizeSelect = function(el) ( var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop(„selectat”, false) .eq(_rand(1,len + 1)) .prop(„selectat”, adevărat); // Selectați aleatoriu butonul radio FormData.prototype.randomizeRadio = function(radios) ( radios.not(""); var len = radios.length; radios .prop("verificat", false) .eq(_rand(0, len - 1)).prop ("verificat", adevărat); // Adăugați niște text lorem pentru zonele de text FormData.prototype.randomizeParagraph = function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Randomizează toate câmpurile casetei de selectare FormData.prototype.randomizeCheckbox = function(el) ( var $el = $(el); $el.prop("bifat", false); if (_rand(0,1) === 0 ) ( $el.prop("verificat", adevărat); )); FormData.prototype.randomizeEmail = function(el) ( // daca vrem email-uri diferite pentru toate campurile de email, putem modifica acest $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );

În cele din urmă, trebuie să mapam datele generate la diferitele câmpuri ale formularelor pe care le testăm. Vom extrage toate câmpurile formularului din pagina noastră și le vom completa cu date în funcție de tipul lor și de clasa S CS.

În această formă, scriptul nostru implementează perfect separarea dintre mecanismul de generare a datelor și mecanismul de utilizare:

var fillForm = function() ( data = new FormData(window.Faker); $("#name").val(data.name); $("#username").val(data.username); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(data.cvv); $("#adresa").val(data.adresa1); $("#oraș").val(data.oraș); $("#state").val (data.state); $("#zip").val(data.zip); $("#pw").val(data.password); parola); data.randomizeRadio($("")); // Randomize toate casetele de selectare $("select").each(function() ( data.randomizeSelect(this); )); „intrare) găsită = adevărat; ) dacă (!găsit) ok = fals; ) returnează ok; ) funcția test(intrare) ( dacă (!verifica(intrare, „1”, „2”, „3”, „4" , "5", "6", "7", "8", "9", "0", "/", "-", " ")) ( alert("Intrarea nu este ok."); ) else ( alert("Input ok!"); ) ) // --> Telefon: Funcția test() determină care dintre caracterele introduse sunt considerate corecte.

Furnizarea de informații introduse într-un formular

Ce opțiuni există pentru a comunica informațiile introduse în formular? Cel mai simplu mod este să trimiteți datele formularului prin e-mail(vom analiza această metodă mai detaliat).
Dacă doriți ca datele introduse în formular să fie monitorizate de server, atunci trebuie să utilizați interfața CGI (Common Gateway Interface). Acesta din urmă vă permite să procesați automat datele. De exemplu, serverul ar putea crea o bază de date de informații care este accesibilă unora dintre clienți. Un alt exemplu sunt paginile de căutare, cum ar fi Yahoo. De obicei, ele oferă un formular care vă permite să creați o interogare pentru a căuta în propria bază de date. Drept urmare, utilizatorul primește un răspuns la scurt timp după ce a făcut clic pe butonul corespunzător. Nu trebuie să aștepte până când persoanele responsabile cu întreținerea acestui server citesc datele pe care le-a specificat și găsesc informațiile solicitate. Toate acestea sunt realizate automat de serverul însuși. JavaScript nu vă permite să faceți astfel de lucruri.
Nu veți putea crea o carte de recenzii ale cititorilor folosind JavaScript, deoarece JavaScript nu poate scrie date în niciun fișier de pe server. Puteți face acest lucru doar prin interfața CGI. Desigur, puteți crea o carte de recenzii pentru care utilizatorii trimit informații prin e-mail. Cu toate acestea, în acest caz, trebuie să introduceți recenzii manual. Acest lucru se poate face dacă nu vă așteptați să primiți 1000 de recenzii în fiecare zi.
Scriptul corespunzător va fi în text simplu HTML. Și nu este nevoie de nicio programare JavaScript aici! Bineînțeles, cu excepția cazului în care trebuie să verificați datele introduse în formular înainte de a-l trimite - și aici chiar aveți nevoie de JavaScript. Ar trebui doar să adaug că comanda mailto nu funcționează peste tot - de exemplu, nu există suport pentru ea în Microsoft Internet Explorer 3.0.

Iti place aceasta pagina? Deloc.
Pierdere de timp.
Cel mai prost site de pe web.
Parametru enctype="text/plain" folosit pentru a trimite doar text simplu, fără părți codificate. Acest lucru face ca astfel de e-mailuri să fie mult mai ușor de citit.

Dacă doriți să validați un formular înainte de a fi trimis în rețea, puteți utiliza handlerul de evenimente onSubmit pentru a face acest lucru. Trebuie să puneți apelul la acest program într-o etichetă. De exemplu:

Funcția validate() ( // verifica dacă intrarea este ok // ... dacă (inputOK) returnează adevărat, altfel returnează fals; ) ... ... Un formular compilat în acest fel nu va fi trimis pe Internet dacă sunt intrări incorecte date realizate.

Selecţie element specific forme

Folosind metoda focus() vă puteți face formularul mai ușor de utilizat. Deci, puteți alege ce element va fi evidențiat primul. Sau puteți spune browserului să evidențieze formularul în care au fost introduse date incorecte. Adică browserul însuși va plasa cursorul pe elementul de formular pe care îl specificați, astfel încât utilizatorul să nu fie nevoit să dea clic pe formular înainte de a introduce ceva acolo. Puteți face acest lucru folosind următorul fragment de script:

Funcția setfocus() ( document.first.text1.focus(); )

Sunt într-o plimbare savantă zilele astea
Îți voi câștiga încrederea prin serviciul meu,
Îmi scrii un bilet la ordin,
Ca să nu am nicio îndoială cu privire la plată.

Mefistofel, în Faust de Goethe

Câmpuri

Un formular web constă din orice număr de câmpuri de intrare înconjurate de o etichetă. HTML oferă multe câmpuri diferite, de la simple casete de selectare pornit/dezactivat până la liste derulante și câmpuri de introducere a textului. Această carte nu va discuta în detaliu toate tipurile de domenii, dar vom oferi o scurtă prezentare generală a acestora.

Multe tipuri de câmpuri de intrare folosesc . Atributul său de tip este utilizat pentru a selecta stilul câmpului. Iată câteva tipuri comune:

text o parolă pentru un câmp de text cu o linie este aceeași cu textul, dar ascunde caseta de selectare de intrare comutator pornit/oprit. Partea radio a câmpului cu fișier cu opțiuni multiple permite utilizatorului să selecteze un fișier pe computerul său

Câmpurile de formular nu trebuie să apară în interiorul unui . Ele pot fi plasate oriunde pe pagină. Informațiile din astfel de câmpuri nu pot fi transmise serverului (acest lucru este posibil doar pentru întregul formular), dar atunci când facem câmpuri pe care le procesează JavaScript, de obicei nu trebuie să transmitem informații din câmpuri prin trimitere.

(text) (parolă) (căsuță de selectare) (radio) (fișier)

Interfața JavaScript pentru astfel de elemente variază în funcție de tip. Ne vom uita la fiecare dintre ele puțin mai târziu.

unu, doi, trei

Și eticheta este folosită pentru a crea un câmp care permite utilizatorului să selecteze una dintre opțiunile date.

Clatite Caserola Inghetata

Când valoarea unui câmp se modifică, evenimentul „modificare” este declanșat.

Concentrează-te

Spre deosebire de majoritatea elementelor de document HTML, câmpurile de formular pot primi focalizare de la tastatură. Când faceți clic pe ele sau selectați în alt mod, acestea devin active, adică. receptorii principali de intrare de la tastatură.

document .querySelector("input" ).focus(); console .log(document .activeElement.tagName); // → INPUT document .querySelector("input" ).blur(); console .log(document .activeElement.tagName); // → CORP

Unele pagini solicită utilizatorului să înceapă imediat să lucreze la unul dintre câmpurile formularului. Folosind JavaScript, putem acorda acestui câmp focus atunci când documentul este încărcat, dar HTML are și un atribut de focalizare automată care obține același rezultat, dar spune browserului care sunt intențiile noastre. În acest caz, browserul poate suprascrie acest comportament în cazuri adecvate, cum ar fi atunci când utilizatorul a mutat focalizarea în altă parte.

Browserele permit în mod tradițional utilizatorului să mute focus folosind tasta Tab. Putem influența ordinea de navigare prin atributul tabindex. În exemplu, documentul va muta focalizarea din câmpul de text la butonul OK, în loc să parcurgă mai întâi linkul de ajutor.

(ajutor) OK

În mod implicit, majoritatea tipurilor de elemente HTML nu primesc focalizare. Dar adăugarea unui tabindex la un element face posibil ca acesta să primească focalizare.

Câmpuri dezactivate

Toate câmpurile pot fi dezactivate cu atributul disabled, care există și ca proprietate a elementului obiect DOM.

Sunt bine, sunt leșinat

Câmpurile dezactivate nu acceptă focalizarea sau modificarea și, spre deosebire de câmpurile active, de obicei apar gri și estompate.

Forma generală

Când un câmp este conținut într-un element, elementul său DOM va avea o proprietate de formular care se referă la formular. Elementul, la rândul său, are o proprietate elemente care conține o colecție de câmpuri asemănătoare matricei.

Nume: Parolă: Autentificare var form = document .querySelector("form" ); console .log(form.elements.type); // → consola de parole .log(form.elements.password.type); // → consola de parole .log(form.elements.name.form == form); // → adevărat

Un buton cu un atribut de tip egal cu trimiterea trimite formularul atunci când este făcut clic. Apăsarea Enter în interiorul unui câmp de formular are același efect.

Trimiterea unui formular înseamnă de obicei că browserul navighează la pagina desemnată în atributul de acțiune al formularului, folosind fie o solicitare GET, fie o solicitare POST. Dar înainte de asta, proprietatea „submit” este dezactivată. Poate fi gestionat în JavaScript, iar handlerul poate preveni comportamentul implicit apelând evenimentul preventDefault pe obiect.

Valoare: Save var form = document .querySelector("form" ); form.addEventListener(„trimite”, funcție (eveniment) ( console .log(„Salvarea valorii” , form.elements.value.value); event.preventDefault(); ));

Câmpuri de text

Câmpurile cu etichete și tipuri de text și parolă, precum și etichete, au o interfață comună. Elementele lor DOM au o proprietate de valoare care conține conținutul lor curent ca șir de text. Setarea acestei proprietăți la o valoare modifică conținutul câmpului.

Proprietățile câmpului text selectStart și selectionEnd conțin informații despre poziția cursorului și selecția textului. Când nu este selectat nimic, valoarea lor este aceeași și este egală cu poziția cursorului. De exemplu, 0 indică începutul textului, 10 indică faptul că cursorul se află la al 10-lea caracter. Când este selectată o parte a unui câmp, proprietățile au valori diferite, și anume începutul și sfârșitul textului selectat. De asemenea, puteți introduce o valoare în aceste câmpuri.

var textarea = document .querySelector("textarea" ); textarea.addEventListener("keydown" , function (event ) ( // Codul tastei pentru F2 se întâmplă să fie 113 if (event.keyCode == 113 ) ( replaceSelection(textarea, "Khasekhemwy" ); event.preventDefault(); ) )); funcția replaceSelection (câmp, cuvânt) ( var de la = field.selectionStart, la = field.selectionEnd; field.value = field.value.slice(0 , from ) + word + field.value.slice(to); // Pune cursorul după cuvântul field.selectionStart = field.selectionEnd = din + cuvânt.lungime);

Funcția înlocuireSelectare înlocuiește textul selectat curent cu cuvântul specificat și mută cursorul într-o poziție după acel cuvânt, astfel încât să puteți continua să tastați.

În exemplul următor, vedem un câmp de text și un contor care arată lungimea curentă a textului introdus.

lungime: 0 var text = document .querySelector("input" ); var output = document .querySelector("#lungime" ); text.addEventListener("input" , function () ( output.textContent = text.value.length; )); Bifă și butoane radio

Caseta de selectare este un simplu comutator binar. Valoarea sa poate fi preluată sau modificată prin proprietatea verificată, care conține o valoare booleană.

Faceți pagina purple var caseta de selectare = document .querySelector("#purple" ); checkbox.addEventListener("schimbare" , funcția () ( document .body.style.background = checkbox.checked ? "mediumpurple" : "" ; ));

Un buton radio este similar cu o bifă, dar este legat de alte butoane radio cu același nume, astfel încât doar unul dintre ele poate fi selectat.

Culoare: Violet Verde Albastru var butoane = document .getElementsByName("culoare" ); funcția setColor (eveniment ) ( document .body.style.background = event.target.value; ) pentru (var i = 0 ; i< buttons.length; i++) buttons[i].addEventListener("change" , setColor);

Metoda document.getElementsByName returnează toate elementele cu atributul nume dat. Exemplul iterează prin ele (prin o buclă for obișnuită, nu o forEach, deoarece colecția returnată nu este o matrice reală) și înregistrează un handler de evenimente pentru fiecare element. Rețineți că obiectele eveniment au o proprietate țintă care se referă la elementul care a declanșat evenimentul. Acest lucru este util pentru a crea handlere de evenimente - handlerul nostru poate fi apelat de diferite elemente și trebuie să aibă o modalitate de a accesa elementul curent care l-a numit.

Selectați câmpuri

Câmpurile de selectare sunt similare cu butoanele radio - vă permit, de asemenea, să selectați dintre mai multe opțiuni. Dar dacă butoanele radio ne permit să controlăm aspectul opțiunilor, atunci tipul de câmp este determinat de browser.

Clatite Caserola Inghetata

În majoritatea browserelor, aspectul câmpului va fi diferit de un câmp cu o singură alegere, care de obicei arată ca un meniu derulant.

Fiecare etichetă are o semnificație. Poate fi definit prin atributul value, dar dacă nu este specificat, atunci valoarea etichetei este determinată de textul din interiorul etichetei ... Proprietatea de valoare a elementului reflectă opțiunea selectată în prezent. Pentru un câmp cu capacitatea de a selecta mai multe opțiuni, această proprietate nu este deosebit de necesară, deoarece va conține doar una dintre mai multe opțiuni selectate.

Următorul exemplu extrage valorile selectate din câmpul de selectare și le folosește pentru a crea un număr binar din biți. Apăsați Ctrl (sau Command pe un Mac) pentru a selecta mai multe valori simultan.

0001 0010 0100 1000 = 0 var select = document .querySelector("select" ); var output = document .querySelector("#output" ); select.addEventListener("schimbare", funcția () ( var number = 0 ; for (var i = 0 ; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number (option.value); } output.textContent = number; }); Câmp de fișier

Câmpul de fișier a fost inițial destinat încărcării fișierelor de pe un computer printr-un formular. În browserele moderne, acestea vă permit, de asemenea, să citiți fișiere din JavaScript. Câmpul acționează ca paznic pentru dosare. Scriptul nu poate prelua și deschide pur și simplu un fișier de pe computerul utilizatorului, dar dacă utilizatorul selectează un fișier în acest câmp, browserul permite scriptului să înceapă să citească fișierul.

Câmpul fișierului arată de obicei ca un buton etichetat cu ceva de genul „Selectați fișierul”, cu informații despre fișierul selectat lângă el.

funcția () ( if (input.files.length > 0 ) ( var fișier = input.files; console .log(„Ați ales” , file.name); if (file.type) console .log(„Are tip " , tip fișier); ) ));

Proprietatea fișierelor elementului este un obiect asemănător matricei (nu o matrice reală) care conține o listă de fișiere selectate. Initial este gol. Elementul nu are o proprietate simplă de fișier deoarece utilizatorul poate selecta mai multe fișiere simultan cu atributul multiplu activat.

var input = document .querySelector("input" ); input.addEventListener(„schimbare” , funcția () ( Array .prototype.forEach.call(input.files, function (fișier ) funcția () ( console .log(„Fișier” , fișier.nume, „începe cu” , cititor) .result.slice(0 , 20 )); reader.readAsText(fișier)); ));

Exemplul folosește Array.prototype.forEach pentru a itera prin matrice, deoarece într-o buclă normală ar fi incomod să obțineți fișierul și obiectele de citire necesare de la handler-ul de evenimente. Variabilele ar fi comune tuturor iterațiilor buclei.

FileReaders are, de asemenea, un eveniment de „eroare” atunci când citirea unui fișier eșuează. Obiectul de eroare va fi stocat în proprietatea eroare. Dacă nu doriți să vă faceți griji cu privire la o altă schemă asincronă incomodă, o puteți încheia într-o promisiune (vezi capitolul 17):

funcția readFile (fișier) ( return new Promise (funcție (reușită, eșec) ( var reader = new FileReader(); reader.addEventListener("încărcare", funcția () (succeed(reader.result); )); reader.addEventListener ("eroare" , funcția () ( fail(reader.error); )); reader.readAsText(fișier)); Stocarea datelor pe partea clientului

Paginile HTML simple cu adăugarea de JavaScript pot fi o bază excelentă pentru mini-aplicații - mici programe auxiliare care automatizează sarcinile zilnice. Atașând handlere de evenimente la câmpurile de formular, puteți face totul, de la conversia Fahrenheit în Celsius până la generarea parolelor din parola principală și numele site-ului web.

LocalStorage.setItem("nume utilizator" , "marijn" ); console .log(localStorage.getItem(„nume utilizator” )); // → marijn localStorage.removeItem("nume utilizator" );

Variabila este stocată în localStorage până când este suprascrisă, ștearsă folosind removeItem sau utilizatorul șterge spațiul de stocare local.

Browserele limitează, de asemenea, cantitatea de date pe care o pot stoca, de obicei câțiva megaocteți. Această limitare, împreună cu faptul că înfundarea hard disk-urilor oamenilor nu este profitabilă, împiedică consumarea spațiului pe disc.

Următorul cod implementează un program simplu de luare de note. Stochează notele ca obiect, asociind titluri cu conținut. Este codificat în JSON și stocat în localStorage. Utilizatorul poate selecta o notă prin câmp și poate modifica textul acesteia în . O intrare este adăugată făcând clic pe un buton.

Note: listă nouă var = document .querySelector("#list" ); function addToList (name) ( var option = document .createElement("option" ); option.textContent = name; list.appendChild(option); ) // Obțineți lista din stocarea locală var notes = JSON .parse(localStorage.getItem ("note")) || ("ce sa cumpar" : "" );

Când datele din notă se modifică (se adaugă o înregistrare nouă sau se modifică cea actuală), funcția saveToStorage este apelată pentru a actualiza câmpul stocat. Dacă ne-am aștepta să stocăm mii de înregistrări, ar fi prea scump și ar trebui să venim cu o procedură de stocare mai complexă - de exemplu, un câmp separat pentru fiecare înregistrare.

Concluzie

HTML oferă multe tipuri diferite de câmpuri de formular - text, casete de selectare, alegere multiplă, selecție de fișiere.

Când utilizatorul a selectat un fișier de pe hard disk prin câmpul de selecție a fișierelor, interfața FileReader ne va permite să accesăm conținutul fișierului dintr-un program JavaScript.

Exerciții Banc de lucru JavaScript

Creați o interfață care vă permite să scrieți și să executați bucăți de cod JavaScript.

Faceți un buton lângă , care, atunci când este apăsat, va face ca constructorul Function din Capitolul 10 să încapsuleze textul introdus într-o funcție și să o apeleze. Convertiți valoarea returnată a funcției sau oricare dintre erorile acesteia într-un șir și imprimați-o după câmpul de text.

returnează „bună”; Să mergem // Codul tău. Completare automată

Completați câmpul de text astfel încât, atunci când introduceți text, sub acesta să apară o listă de opțiuni. Aveți o serie de opțiuni posibile și trebuie să le afișați pe cele care încep cu textul introdus. Când utilizatorul face clic pe o opțiune sugerată, acesta schimbă conținutul câmpului în acea opțiune.

// Construiește o matrice de nume de variabile globale, // cum ar fi „alerta”, „document” și „scrollTo” var termeni = ; pentru (nume var în fereastră) termeni.push(nume); // Codul tau. Jocul vieții al lui Conway

Aceasta este o simplă simulare a vieții pe o grilă dreptunghiulară, fiecare element fiind viu sau nu. Pentru fiecare generație (pas de joc) se aplică următoarele reguli:

- fiecare celulă vie, al cărei număr de vecini este mai mic de doi sau mai mult de trei, moare - fiecare celulă vie, care are de la doi până la trei vecini, trăiește până la rândul următor - fiecare celulă moartă, care are exact trei vecini, prinde viață

Vecinii unei celule sunt toate celulele adiacente acesteia pe orizontală, verticală și diagonală, 8 în total.

Vă rugăm să rețineți că regulile se aplică întregii grile în același timp și nu fiecărei celule pe rând. Adică, numărarea numărului de vecini are loc la un moment înainte de pasul următor, iar modificările care apar pe celulele învecinate nu afectează noua stare a celulei.

Următoarea generație // Codul dvs.