Ce poți face cu javascript. Pentru ce este Javascript și ce face?

În această notă am vrut să vorbesc despre de ce este nevoie de Javascript și despre ce puteți face cu el.

Ca orice limbaj de programare, sarcina principală a Javascript este de a crea o secvență de acțiuni care va duce la un rezultat specific.

Acestea pot fi condiții „dacă-atunci”, bucle care creează o anumită secvență de acțiuni, calcule matematice etc.

Cel mai important lucru este că toate aceste operațiuni pot fi efectuate pe pagini web, într-o fereastră de browser. Mai mult, javascript poate funcționa fără o conexiune la internet.

Deci, să ne uităm la o serie de exemple care demonstrează capacitățile care pot fi obținute folosind Javascript. Le-am sortat condiționat în mai multe grupuri, astfel încât să aveți o anumită înțelegere a ceea ce face Javascript și de ce este necesar.

1) Operatii matematice

Pe paginile web, de multe ori este nevoie de a face anumite calcule.

De exemplu, există două câmpuri de text și trebuie să afișați în al treilea câmp de text suma a două numere care sunt introduse în primele două.

Folosind Javascript, puteți crea un calculator și îl puteți plasa pe o pagină web.

Iată un exemplu de astfel de calculator:

O altă situație, să luăm o linie de text pe o pagină web, trebuie să creștem dimensiunea acesteia de 1,5 ori. Acest lucru se poate face și folosind calcule matematice, prin înmulțirea mărimii curente cu un factor de 1,5.

Există o mulțime de sarcini care necesită calcule în practică. Javascript vă permite să faceți toate acestea.

2) Prelucrarea datelor în formulare HTML fără conexiune la Internet și fără a utiliza limbaje de programare pe server.

Javascript vă permite să verificați dacă toate câmpurile obligatorii sunt completate și dacă datele pe care le conțin se potrivesc cu formatul cerut (de exemplu, dacă sunt necesare numere, atunci ar trebui să existe doar cifre și fără litere).

Înainte de a trimite date către server, acestea sunt pre-verificate în Javascript. Acest lucru reduce sarcina pe server.

3) Interacțiuni și evenimente cu utilizatorul

Pe o pagină web pot apărea diferite efecte, în funcție de acțiunile pe care le efectuează utilizatorul.

Meniu derulant de pe site atunci când treceți cursorul mouse-ului.

Când faceți clic pe un buton, ascundeți sau afișați un element de pe pagină.

O fereastră pop-up apare când cursorul mouse-ului se deplasează în afara ferestrei browserului.

Efectele de estompare a fundalului și de atenuare a elementelor sunt implementate în Javascript.

4) Interacționați cu elementele HTML de pe pagină și manipulați conținutul și stilurile acestora.

Când are loc un anumit eveniment (de exemplu, un clic de mouse sau oricare altul), puteți modifica aspectul (stiluri CSS) elementelor din pagină.

Toate acestea se fac programatic.

De asemenea, le puteți adăuga câteva etichete sau atribute HTML, de asemenea, atunci când are loc un anumit eveniment.

5) Adăugarea de animație și diferite efecte grafice pe paginile web.

Căderea și mișcarea obiectelor

Aspect neted și ascunderea obiectelor

Cronometru cu numărătoare inversă

Și alte efecte sunt implementate în Javascript

Am enumerat aici doar o mică listă de caracteristici Javascript. Pentru a putea vedea totul clar și cu exemple reale, iată o listă de site-uri unde sunt publicate exemple de lucru în javascript:

Capacitățile și domeniul de aplicare al Javascript sunt de fapt foarte extinse. Totul va fi limitat doar de imaginația și creativitatea ta.

Utilizatorii care vizitează diverse resurse web întâlnesc adesea soluții interesante non-standard și doresc să facă același lucru pe site-urile lor. Cel mai adesea, astfel de soluții implică utilizarea JavaScript.

În acest articol, vă voi spune despre JavaScript, un limbaj de scripting conceput pentru crearea de pagini web interactive și despre ce puteți face cu JS. Vom analiza exemple de utilizare a JavaScript și vom vedea cum ne poate ajuta.

Ce poți face folosind JavaScript?

Editați pagina, scrieți text pe ea, adăugați și eliminați etichete, schimbați stilurile elementelor.

Reacționează la evenimente: scriptul poate aștepta să se întâmple ceva (clic/pasarea mouse-ului, pagina se termină de încărcat) și poate răspunde executând o funcție.
De exemplu, atunci când treceți mouse-ul peste un link sau o imagine, puteți afișa un sfat explicativ. Făcând clic cu mouse-ul, puteți comuta conținutul blocului. Când pagina se încarcă, afișați o fereastră pop-up de publicitate. Puteți modifica aspectul paginii în funcție de ora din zi.

JavaScript. Pornire rapidă

Efectuați solicitări către server și încărcați datele fără a reîncărca pagina.
De exemplu, dacă un utilizator a lăsat un comentariu pe un site web sau într-o carte de oaspeți, atunci acest comentariu va fi afișat imediat fără a reîncărca pagina. De asemenea, puteți încărca fișiere pe server, arătând progresul descărcării ca procent.

Setați și citiți cookie-uri, validați datele, afișați mesaje și multe altele.
De exemplu, atunci când vizitați un site pentru prima dată, utilizatorului i se arată o fereastră pop-up și este setat un cookie. Și la vizitele ulterioare la această resursă, fereastra pop-up nu este afișată deoarece cookie-urile sunt deja setate.
De asemenea, puteți verifica corectitudinea e-mailului introdus, verificați numărul de telefon introdus pentru conformitate cu formatul cerut și afișați imediat un mesaj despre corectitudinea sau incorectitudinea datelor introduse.

Exemple de utilizare a JavaScript

Utilizarea JavaScript este atât de largă și variată încât pot fi date mii de exemple de utilizare și totuși lista nu va fi completă, deoarece se scriu noi scripturi în fiecare zi. Sunt sigur că ați întâlnit multe dintre exemplele de mai jos pe diferite site-uri. Și toate acestea sunt implementate folosind JavaScript.

Desigur, galeria prezentată în exemplu nu este singura. Existau sute de galerii similare, ca orice altceva, care puteau fi imaginate. Și pentru a nu umfla lista la infinit, am dat un exemplu din cele mai populare grupuri de scripturi.

Ce ne oferă asta?

1. Navigare convenabilă pe mai multe niveluri

Utilizarea JavaScript vă permite să faceți meniuri cu mai multe niveluri și navigare pe mai multe niveluri în barele laterale compacte. Subelementele din meniu se deschid fie făcând clic, fie trecând cu mouse-ul.

Multe magazine online au o bară laterală de navigare verticală. Să luăm shop.by ca exemplu. Imaginați-vă cât de mult s-ar întinde dacă subelementele nu s-ar opri la trecerea cu mouse-ul sau la clic, ci ar fi vizibile toate odată!

2. Utilizarea galeriilor și glisantelor ne oferă posibilitatea de a arăta fotografii, imagini cu tipuri suplimentare de produse și de a aranja în mod convenabil și compact portofoliul fotografului.

JavaScript. Pornire rapidă

Aflați elementele de bază ale JavaScript cu un exemplu practic despre cum să creați o aplicație web

Galeriile sunt deosebit de relevante pentru vizualizarea detaliată a produselor din magazinele online, atunci când trebuie să afișați diferite tipuri de mărfuri. Cu ajutorul lor, putem arăta utilizatorului toate imaginile dintr-un bloc mic simultan, oferind atât imagini mici, cât și imagini mărite pentru vizualizare.

Cât spațiu ar fi nevoie pentru galeria prezentată în imaginea de mai jos?

3. În ultimul timp, în coloanele laterale ale site-urilor au fost afișate o mulțime de widget-uri. Acestea sunt widget-uri pentru rețele sociale populare, categorii, arhive de postări, calendare, ultimele comentarii pe blog, postări populare și multe altele.

Trebuie remarcat faptul că pe multe site-uri, unele widget-uri pot fi pur și simplu șterse, deoarece nu au sens și ocupă spațiu.

Dar ce se întâmplă dacă totuși trebuie să potriviți compact o mulțime de widget-uri?

Aici vine în ajutor o soluție JavaScript cu „file”.

Cu ajutorul lor, puteți încadra bine toate widget-urile în coloanele laterale ale site-ului. Pentru o percepție mai bună, puteți grupa widget-urile în „file”.

De exemplu, puteți plasa widget-uri de rețele sociale într-o „filă”, categorii și arhive în a doua etc. Acest lucru va economisi spațiu și va face site-ul mai convenabil de utilizat.

4. Folosind JavaScript, puteți îmbunătăți semnificativ și pagina de contact pentru site-ul dvs. sau site-urile clienților dvs.

încorporați sfaturi cu instrumente în câmpurile de formular;

verificați datele introduse în câmpurile formularului și afișați mesajele de eroare;

trimiteți datele formularului fără a reîncărca pagina;

plasați o hartă cu traseul.

5. Pentru cei care plasează date tabulare pe site, va fi foarte util să folosească sortarea datelor în tabel.

6. Cei care postează orice statistică pe site sub formă de grafice și diagrame vor găsi foarte utilă capacitatea de a crea diagrame și grafice interactive în JavaScript.

De asemenea, folosind JavaScript, puteți crea tot felul de efecte pe site - cum ar fi alunecarea lină a elementelor, mișcarea acestora, apariția și dispariția treptată și tot ceea ce poate face imaginația ta.

Toate acestea pot face site-ul mai convenabil pentru vizitatori, mai interactiv și mai avansat tehnologic.

Concluzie

După cum puteți vedea, domeniul JavaScript este foarte larg. Acestea includ galerii, glisoare, file, tot felul de elemente interactive, hărți, grafice, lucru cu formulare și multe, multe altele.

Cred că toată lumea poate găsi utilizări utile pentru JavaScript și să-l folosească pe propriile site-uri sau pe site-urile clienților săi.

Sper că v-a plăcut articolul și ați învățat din el despre noile funcții care pot fi implementate datorită JS.

Utilizați JavaScript pe site-urile dvs. web? Care sunt principalele dvs. provocări atunci când utilizați JavaScript?

Povestește-ne despre asta în comentariile articolului.

JavaScript. Pornire rapidă

Aflați elementele de bază ale JavaScript cu un exemplu practic despre cum să creați o aplicație web

Aplicații client

JavaScript poate fi folosit pentru a dezvolta o aplicație client completă. Deși JavaScript nu este un limbaj la fel de cuprinzător ca Java, are capacități semnificative atunci când lucrează cu etichete HTML și obiectele asociate acestora. Una dintre cele mai cunoscute aplicații JavaScript, ColorCenter de la hJdaho Design (http://v.e-du.ru/?http://www.hidaho.com/c3), este prezentată în Fig. 1.12. Această aplicație este utilizată pentru a selecta culorile elementelor, vizibile în browser, cu posibilitatea de a le previzualiza într-un cadru separat. Crearea unei aplicații similare folosind Java este asociată cu o complexitate mult mai mare asociată cu necesitatea de a interacționa cu HTML cadru aproape ideal pentru dezvoltarea aplicațiilor.

Data validarii

JavaScript oferă dezvoltatorilor web posibilitatea de a valida datele introduse de utilizator fără a fi nevoie să contacteze serverul. În interiorul codului JavaScript, puteți determina dacă valorile introduse de utilizator sunt corecte sau, să zicem, dacă corespund formatului solicitat. Este mult mai eficient să efectuați validarea datelor în JavaScript decât să transmiteți date incomplete către server. Acest tip de abordare este eficient nu numai pentru utilizatorul care introduce datele, ci și pentru server. În același timp, există încredere că datele transmise către server pentru prelucrare sunt complet corecte.

Crearea formularelor interactive

JavaScript este, de asemenea, folosit pentru a da viață formularelor HTML. Una dintre sarcinile revitalizării este legată de verificarea fiabilității datelor. Un altul implică implementarea unor caracteristici suplimentare care nu sunt disponibile în HTML, cum ar fi suportul pentru informații din bara de stare, deschiderea unei a doua ferestre de browser pentru a afișa, să spunem, informații de ajutor etc.

Tabelele de căutare a clienților

Pe lângă validarea datelor, o modalitate de a reduce nevoia de acces la server este utilizarea JavaScript pentru a genera și menține tabele de căutare la nivelul clientului. Trebuie amintit că, în acest caz, datele trebuie să fie încorporate în documentul HTML propriu-zis, astfel încât utilizarea tabelelor de căutare ar trebui să fie limitată la baze de date mici de informații doar în citire.

Sprijin de stat

Într-un mediu web care nu acceptă conceptul de stare, JavaScript este folosit pentru a menține starea în comunicațiile dintre server și client. Calea principală

Asistența de stat este asociată cu utilizarea seturilor de cookie-uri (informații stocate de browser pe partea clientului). JavaScript gestionează atât căutarea, cât și stocarea cookie-urilor din partea clientului.

Lucrul cu applet-uri Java, controale ActiveX și plug-in-uri

Pe măsură ce JavaScript evoluează, crește capacitatea de a lucra cu extensii la nivelul clientului, inclusiv applet-uri Java, controale ActiveX și plug-in-uri Netscape. Este ușor să accesați proprietățile obiectelor Java și ActiveX, precum și să invocați metodele acestora. De asemenea, nu este dificil să se determine dacă un anumit plug-in este instalat. Cu această capacitate, JavaScript devine lipiciul care ține împreună HTML, applet-urile și extensiile client.

Sursa „JavaScript în exemple”

Există milioane de pagini web pe Internet, găzduite pe site-uri care servesc diferite scopuri. Unele dintre ele sunt atractive, iar altele nu.

Cele care arată bine, sunt ușor de utilizat și sunt suficient de interactive pentru a vă menține implicat pentru o lungă perioadă de timp sunt cele care folosesc JavaScript. Pentru ce este? Să aflăm.

Este un limbaj cu mai multe paradigme, ceea ce înseamnă că acceptă programarea orientată pe obiecte, funcțională și imperativă. Deși numele său sugerează Java, sintaxa sa este derivată din limbajul C.

Majoritatea paginilor web sunt construite în format de cod HTML. Este un limbaj foarte simplu care vă permite să adăugați diferite elemente la o pagină web care o face atractivă și îi îmbunătățește lizibilitatea. Codul HTML vă permite să utilizați imagini, culori și animații de bază pentru pagini web, îmbunătățind astfel aspectul acestora. Utilizarea CSS (Cascading Style Sheets) oferă o mai mare flexibilitate și reduce cantitatea totală de cod și complexitatea paginilor web. Acest lucru facilitează prezentarea conținutului paginii pe diferite dispozitive, cum ar fi telefoane mobile, tablete și computere desktop. JavaScript este folosit în principal pentru a adăuga elemente interactive paginilor web, făcându-le mai ușor de utilizat și mai atractive. Să vedem ce poate face și cum se folosește.

Ce este JavaScript?

Este un limbaj de programare executat de obicei pe partea clientului. Este folosit pentru interacțiunea cu utilizatorul. De asemenea, este folosit în dezvoltarea de jocuri, aplicații desktop și mobile, crearea de documente pdf și widget-uri desktop. Browserele web au suport încorporat pentru această limbă.

Exemplul 1

Primul exemplu este destul de simplu și este folosit de obicei în elementele de meniu. Dacă mutați mouse-ul peste un anumit link sau un buton de meniu, acesta își schimbă culoarea. Această schimbare de culoare bazată pe acțiunile utilizatorului poate fi utilizată pentru diferite efecte vizuale și, de asemenea, poate îmbunătăți aspectul unei pagini web. În exemplul de mai jos, plasați cursorul peste butonul la alegere și vedeți cum își schimbă culoarea.

Roșu Verde Albastru funcția culoare(el, culoare) ( el.style.color = "#FFFFFF"; el.style.backgroundColor = culoare; ) funcția uncolor(el) ( el.style.color = "#000000"; el. style.backgroundColor = "#E6E6E6" ;

Exemplul 2

Acesta este un exemplu perfect de eveniment. Am văzut ceva asemănător pe mai multe pagini web. Când apăsați butonul, pe afișaj apare un mesaj. Vă poate spune ce să faceți în continuare sau ceva util. În exemplul de mai jos, când se face clic pe butonul, este afișat un mesaj simplu.

Buton

Deși JavaScript este utilizat pe scară largă, utilizatorul nu ar trebui să fie complet dependent de acesta. Are anumite probleme de securitate, deoarece oricine poate duplica codul. Diferitele browsere îl interpretează diferit în funcție de motoarele lor de randare, ceea ce poate duce la inconsecvențe pe afișaj. Cu toate acestea, în ciuda preocupărilor ca acestea, JavaScript este foarte popular și utilizat pe scară largă pe internet.

Rezumat: Prelegerea discută dezavantajele și avantajele JavaScript. Utilizări comune ale limbajului. . Utilizări moderne ale JavaScript.

Introducere

Acum că te-ai familiarizat cu conceptele de bază ale programarii, trebuie să faci un pas înapoi față de detalii și să încerci să-ți faci o idee generală despre ce poți face de fapt cu JavaScript - de ce să-ți petreci timp învățând astfel de subiect complex și folosirea lui pe paginile Web?

Ne aflăm acum într-un moment în care utilizarea JavaScript s-a mutat în ultimii câțiva ani de la marginile cunoștințelor la setul de instrumente de dezvoltare web. Acum este dificil să obții un loc de muncă ca dezvoltator web fără cunoștințe și capacitatea de a folosi JavaScript.

Să mergem înainte - această prelegere are următoarea structură:

• Cum m-am îndrăgostit de JavaScript
• Dezavantajele JavaScript
• Ce poate face JavaScript
• Utilizări comune ale JavaScript
  • Introducere în DOM Scripting
• Concluzie

Cum m-am îndrăgostit de JavaScript

Când am întâlnit prima dată JavaScript, computerele erau lente, browserele nu îl interpretau bine și mi s-a părut o idee proastă. Vin din lumea dezvoltării pe partea de server - acceptă toate funcțiile din Perl și vei fi în siguranță.

Pe de altă parte, viteza internetului a fost foarte lentă, iar costul procesării și stocării fișierelor pe server a fost foarte mare, iar aici JavaScript a intrat în locul său. Limbajul rula pe computerele utilizatorilor finali și tot ceea ce se putea face în JavaScript nu crea nicio încărcare suplimentară de procesare pe server. Acest lucru a făcut site-urile mai rapide pentru utilizatorul final și mai puțin costisitoare pentru proprietar în ceea ce privește traficul pe server.

Avanză rapid până astăzi, iar browserele au devenit mai bune la manipularea JavaScript, iar computerele au devenit mai rapide, iar lățimea de bandă este mult mai ieftină, așa că majoritatea deficiențelor sunt acum mai puțin critice. Cu toate acestea, reducerea cantității de comunicare înainte și înapoi cu serverul atunci când utilizați JavaScript are ca rezultat aplicații Web cu performanțe mai rapide și o experiență de utilizator îmbunătățită a site-ului.

Dezavantajele JavaScript

Chiar și cu toate îmbunătățirile recente, există încă o capcană: JavaScript este imprevizibil. Nu limbajul în sine, ci mediul în care este implementat. Nu există nicio modalitate de a prezice ce fel de computer are un utilizator care solicită o pagină Web, nicio modalitate de a ști cât de ocupat este computerul cu alte sarcini și nicio modalitate de a ști dacă un alt script JavaScript deschis într-o altă filă de browser îl determină. macina până la oprire. Până când browserele încep în general să dedice resurse de calcul separate pentru diferite file și ferestre (cunoscute sub numele de fire), aceasta va continua să fie o problemă. Cu toate acestea, multithreading-ul a devenit disponibil într-o oarecare măsură în HTML5 prin intermediul lucrătorilor web și are un anumit suport în browsere.

În plus, JavaScript este adesea dezactivat în browsere din motive de securitate sau pentru că JavaScript este adesea folosit pentru a deranja utilizatorii în mod inutil, mai degrabă decât pentru a îmbunătăți experiența. De exemplu, puteți găsi în continuare multe site-uri care încearcă să deschidă ferestre noi împotriva dorințelor utilizatorului sau să acopere conținutul site-ului cu publicitate până când utilizatorul dă clic pe un link pentru a scăpa de el.

Ce poate face JavaScript

Să facem un pas înapoi și să enumeram beneficiile JavaScript:

• JavaScript este foarte ușor de implementat. Trebuie doar să puneți codul într-un document HTML și să spuneți browserului că este JavaScript.
• JavaScript rulează pe computerele utilizatorilor web - chiar și atunci când aceștia sunt offline!
• JavaScript vă permite să creați interfețe receptive care îmbunătățesc experiența utilizatorului și oferă funcționalitate dinamică fără a aștepta ca serverul să răspundă și să ofere o altă pagină.
• JavaScript poate încărca conținut într-un document atunci când și dacă utilizatorul îl solicită, fără a reîncărca întreaga pagină - ceea ce se numește în mod obișnuit Ajax.
• JavaScript poate verifica ce se poate face în browser și poate răspunde în consecință - aceasta se numește Principii JavaScript discrete (vezi Principiile JavaScript discrete) sau uneori scripting sigur.
• JavaScript poate ajuta la remedierea problemelor de browser sau la eliminarea lacunelor în compatibilitatea browserului - de exemplu, remedierea problemelor de aspect CSS în unele browsere.

Acest lucru este deja mult pentru un limbaj care până de curând era ridiculizat de programatori care erau adepți ai „limbajelor de programare de nivel superior”. Unul dintre motivele renașterii JavaScript este că astăzi sunt create aplicații Web din ce în ce mai complexe, iar interactivitatea ridicată necesită utilizarea Flash (sau a altor plugin-uri) sau scripting. JavaScript este poate cea mai bună modalitate, deoarece este standard pentru Web, este suportat nativ de diverse browsere (mai mult sau mai puțin - unele lucruri diferă între browsere, iar aceste diferențe sunt acoperite în locurile potrivite în prelegerile ulterioare) și este compatibil cu alte standarde web open source.

Utilizări comune ale JavaScript

Domeniul de aplicare al JavaScript s-a schimbat de-a lungul anilor în care a fost utilizat. La început, interacțiunea JavaScript cu un site s-a limitat în mare parte la interacțiunea cu formularele, oferirea de feedback utilizatorilor și urmărirea când au făcut anumite lucruri. Funcțiile utilizate au fost alert() pentru a notifica utilizatorul despre ceva (vezi Figura 2.1), confirm() pentru a cere permisiunea de a efectua o acțiune și prompt() sau un câmp de formular pentru a primi intrarea utilizatorului.

Orez. 2.1.

Acest lucru a dus în principal la scripturi de validare care împiedicau utilizatorul să trimită un formular la server cu erori și convertoare și calculatoare simple. În plus, a fost, de asemenea, posibil să se creeze lucruri complet inutile, de exemplu, să solicite utilizatorului să-și introducă numele și să-l afișeze imediat după aceea.

În plus, funcția document.write() a fost folosită pentru a adăuga conținut documentului. Am lucrat, de asemenea, cu ferestre pop-up și rame și am cheltuit o mulțime de nervi și ne-am smuls mult păr încercând să-i facem să comunice între ei. Doar gândirea la majoritatea acestor tehnologii ar trebui să-l facă pe orice dezvoltator să mormăie „lasă-i să plece” dezgustat, așa că să nu ne oprim pe astfel de lucruri - există modalități mai bune de a folosi JavaScript!

Introducere în DOM Scripting

Pe măsură ce browserele au început să sprijine și să implementeze Document Object Model (DOM) (http://www.w3.org/DOM/), care permite o interacțiune mult mai avansată cu paginile Web, JavaScript a început să devină mai interesant.

DOM este reprezentarea obiectului unui document. Paragraful anterior, de exemplu, în limbajul DOM ar fi un element nod al cărui nodeName ar fi p . Conține trei noduri copil - un nod text care conține „Când browserele au început să suporte și să implementeze” și valoarea sa nodeValue, un nod element cu nodeName egal cu a și un alt nod text cu nodeValue egal cu „care permite o interacțiune mult mai avansată cu Web-ul. pagini ,JavaScript a început să devină mai interesant." Un nod copil are, de asemenea, un nod de atribut numit href cu valoarea „http://www.w3.org/DOM/” și un nod copil care este un nod text cu nodeValue egal cu „Document Object Model - DOM”.

Acest paragraf poate fi prezentat și vizual folosind diagrama arborescentă prezentată în Figura 2.2.

În limbajul uman, putem spune că DOM explică tipurile, valorile și ierarhia întregului document - nu trebuie să știți altceva în acest moment. DOM va fi discutat mai detaliat în „Navigarea în DOM”, Introducere generală în DOM, al acestui curs.

Cu DOM puteți:

• Accesați orice element dintr-un document și modificați-i aspectul, conținutul și atributele.
• Creați elemente și conținut noi și introduceți-le în document când și dacă aveți nevoie de ele.

Aceasta înseamnă că nu mai trebuie să utilizați ferestre, cadre, formulare sau acele mesaje de avertizare temute și că puteți livra răspunsul utilizatorului la document într-un mod bine formatat, așa cum se arată în Figura 2.3.

Împreună cu gestionarea evenimentelor, aceasta devine un arsenal puternic pentru crearea de interfețe interactive și captivante.

Gestionarea evenimentelor înseamnă că codul reacționează la evenimentele care au loc în browser. Acestea pot fi evenimente care au loc automat - cum ar fi pagina care se termină încărcarea - dar de cele mai multe ori răspunsul se referă la ceea ce face utilizatorul în browser.

Utilizatorii pot redimensiona fereastra, pot derula pagina, pot apăsa taste specifice sau pot face clic pe linkuri, butoane și elemente folosind mouse-ul. Cu gestionarea evenimentelor, puteți aștepta ca aceste evenimente să apară și puteți instrui pagina web să răspundă la aceste acțiuni în modul dorit. În timp ce, în trecut, făcând clic pe orice link ducea vizitatorul site-ului către un alt document, acum este posibil să înlocuiți aceste acțiuni și să faceți ceva diferit, cum ar fi afișarea și ascunderea unui panou sau extragerea informațiilor dintr-un link și utilizarea acesteia pentru a vă conecta la Serviciu web.

Evenimentele sunt tratate în detaliu în „Manipularea evenimentelor cu JavaScript”, Gestionarea evenimentelor în JavaScript, mai târziu în acest curs.

Alte utilizări moderne ale JavaScript

Practic asta fac oamenii cu JavaScript astăzi. Îmbunătățește interfețele Web vechi, încercate și adevărate - clic pe linkuri, introducerea de informații și trimiterea formularelor etc. - să răspundă mai rapid la solicitările utilizatorilor finali. De exemplu:

• Formularul de înregistrare poate verifica pe măsură ce tastați dacă numele de utilizator este disponibil, evitând frustrarea frustrantă a reîncărcării paginii.
• Câmpul de căutare poate oferi sugestii în timp ce tastați, pe baza a ceea ce a fost deja introdus (de exemplu, tastarea „bi” poate aduce sugestii pentru cuvinte care conțin acel șir, cum ar fi „pasăre”, „mare” și „bicicletă”) . Acest model de utilizare se numește completare automată.
• Informațiile care se schimbă constant pot fi descărcate periodic fără a fi nevoie de interacțiunea utilizatorului, cum ar fi rezultatele unui meci sportiv sau cotațiile bursiere.
• Informațiile care ar fi bine să le aveți și care riscă să fie redundante pentru unii utilizatori pot fi descărcate atunci când și dacă utilizatorul decide să le acceseze. De exemplu, un meniu de navigare pe un site poate avea 6 link-uri, dar va oferi link-uri către pagini mai profunde, la cerere, atunci când utilizatorul activează elementul de meniu.
• JavaScript poate rezolva problemele de aspect. Folosind JavaScript, puteți găsi poziția și zona oricărui element de pe pagină, precum și dimensiunile ferestrei browserului. Folosind aceste informații, puteți preveni suprapunerea elementelor și alte probleme similare. Să presupunem, de exemplu, că aveți un meniu cu mai multe niveluri, verificând înainte de a afișa că există spațiu pentru a prezenta submeniuri, puteți evita barele de derulare sau suprapunerea elementelor de meniu.
• JavaScript poate îmbunătăți interfețele pe care le oferă HTML. Deși este convenabil să aveți un câmp de introducere a textului, este și mai bine să aveți un câmp de introducere care vă permite să alegeți dintr-o listă de valori predefinite sau să le introduceți pe ale dvs. Folosind JavaScript, puteți îmbunătăți un câmp obișnuit de introducere în consecință.
• JavaScript poate fi folosit pentru a anima elemente dintr-o pagină - de exemplu, pentru a afișa și a ascunde informații sau pentru a evidenția anumite secțiuni ale unei pagini - acest lucru se poate face pentru a crea o interfață de utilizator și mai simplă și mai bogată. Pentru mai multe informații despre aceste caracteristici, consultați „Animarea în JavaScript”, Animație JavaScript, mai târziu în acest curs.

Utilizați JavaScript în mod înțelept și responsabil

Nu există multe lucruri pe care să nu le poți face cu JavaScript - mai ales atunci când este combinat cu alte tehnologii precum Canvas sau SVG. Cu toate acestea, cu o mare oportunitate vine o mare responsabilitate și ar trebui să țineți întotdeauna cont de următoarele atunci când utilizați JavaScript.

• JavaScript poate să nu fie disponibil - acest lucru este ușor de verificat, așa că nu este o problemă. Cu toate acestea, lucrurile care depind de JavaScript trebuie să fie construite având în vedere JavaScript și trebuie avut grijă ca site-ul să nu înceteze să funcționeze (adică funcționalitatea de bază devine indisponibilă) dacă JavaScript nu este disponibil.
• Dacă utilizarea JavaScript nu ajută utilizatorul să-și atingă obiectivul mai rapid și mai eficient, atunci probabil că nu este utilizat corect.
• Utilizarea JavaScript încalcă adesea convențiile cu care oamenii s-au obișnuit de-a lungul anilor de utilizare a Web-ului (de exemplu, făcând clic pe un link pentru a merge la o altă pagină și pictograma coș mic care înseamnă „coș de cumpărături”). În timp ce aceste modele de utilizare pot fi depășite și ineficiente, schimbarea lor forțează totuși utilizatorul să-și schimbe obiceiurile - și acest lucru îi face pe oameni să se simtă neliniștiți. Ne place să avem controlul și, odată ce ne-am dat seama de ceva, uneori poate fi dificil să facem față schimbării. Soluțiile JavaScript ar trebui să se simtă în mod natural mai bune decât experiența anterioară, dar nu atât de diferite încât utilizatorul să nu le poată percepe prin experiența anterioară. Dacă puteți face un vizitator al site-ului să spună: „Aha, asta înseamnă că nu trebuie să aștept” sau „Genial - acum nu trebuie să fac acel pas suplimentar enervant” - ați găsit o utilizare excelentă pentru JavaScript .
CSS. Cu ajutorul suplimentelor adecvate de browser (cum ar fi Google Gears sau Yahoo Browser Plus), puteți chiar să utilizați JavaScript pentru a face sistemele online accesibile offline și sincronizate automat atunci când computerul dvs. este online.

JavaScript nu se limitează nici la browsere. Viteza JavaScript și cerințele reduse de memorie în comparație cu alte limbaje de programare îi permit să fie folosit în moduri din ce în ce mai noi, de la automatizarea sarcinilor repetitive în programe precum Illustrator până la utilizarea lui ca limbaj pe partea de server cu un parser autonom. Viitorul este larg deschis; Indiferent ce veți face ca dezvoltator web în viitorul apropiat, sunt destul de sigur că va trebui să lucrați cu JavaScript mai devreme sau mai târziu.

Despre autor

Chris Hileman este un dezvoltator web de zece ani, de când a părăsit jurnalismul radio. Funcționează pentru Yahoo! în Marea Britanie ca trainer și dezvoltator principal, supraveghend calitatea codului front-end pentru Europa și Asia.

Chris menține un blog pe site-ul Wait till I come (http://wait-till-i.com/) și este disponibil pe multe rețele sociale sub porecla „codepo8”.

Fotografie prin amabilitatea: Bluesmoon (