Ce este alertă în javascript. Cazuri de utilizare pentru JavaScript alert(). Programe pentru căutarea și scanarea vulnerabilităților XSS

• metode obiect fereastră;
• metoda alert(): scurt rezumat;
• metoda confirm() - scrie scrisori;
• metoda prompt() - hai sa ne prezentam, eu sunt Stirlitz.

Deci, obiecte browser. Și în primul rând - cel mai vechi dintre ei, obiectul fereastră.

Iată principalele metode ale obiectului fereastră (pe lângă ele, mai sunt și altele, dar sunt rar folosite, iar pentru a nu-mi aglomera creierul cu informații inutile, le voi amâna până la a treia serie).

Metodă	Descriere
	Deschiderea și închiderea ferestrelor browserului; Este posibil să se determine dimensiunea ferestrei, conținutul acesteia, precum și prezența unui panou de butoane, câmp de adresă și alte atribute.
	Apare o casetă de dialog de alarmă cu un mesaj corespunzător.
	Apare o casetă de dialog de confirmare cu butoanele „OK” și „Anulare”.
	Apare o casetă de dialog cu indicații cu un câmp de introducere a textului.
	Setați sau eliminați focalizarea pentru o fereastră.
	Derulează conținutul unei ferestre la un anumit punct.
	Setarea intervalului de timp dintre un apel de funcție și evaluarea expresiei.
	Setează un interval de timp unic înainte de un apel de funcție sau de evaluare a expresiei.

Știm deja că fereastra este adesea implicită, dar nu scrisă.

Apelarea diferitelor ferestre de dialog

Ferestrele de dialog sunt folosite în programe pentru a interacționa cu utilizatorul.

metoda alert().

Ne-am uitat la asta chiar la începutul studiilor noastre. Acesta creează o casetă de dialog simplă cu un mesaj și un buton OK. Toată interacțiunea sa se limitează la faptul că utilizatorul, prin apăsarea acestui singur buton, poate trimite această fereastră undeva departe (și mulțumesc pentru asta).

metoda confirm().

Metoda confirm() permite deja utilizatorului să ia o decizie simplă „booleană”: spune „da” sau „nu”.

De exemplu, faceți clic pe acest buton:

Scuze pentru mica farsa. Sper că știi să folosești butonul înapoi.

Cum funcționează totul? Desigur, ați văzut că am combinat această metodă cu alerte. Și acest lucru se face folosind o funcție care este inserată în .

Metoda returnează două valori: true (dacă este OK) și false (dacă anulați).

Când se setează la true, îl trimitem la pagina corespunzătoare (proprietatea href a obiectului locație) și tipărim alerta () corespunzătoare. În caz contrar (adică false) pur și simplu imprimăm o altă alertă() .

Și în buton numim funcția din evenimentul onClick:

Și apoi trebuie să apelați această funcție din handlerul de evenimente onSubmit al etichetei, de exemplu:

Aici, de exemplu, îmi puteți trimite prin e-mail tot ce credeți despre lecțiile mele. Dacă te-ai entuziasmat brusc și ai apăsat un buton, iar apoi a devenit cumva ciudat, va apărea o fereastră de dialog și te va trezi.

Dacă faceți ferestre pop-up, atunci este o practică bună să avertizați utilizatorul despre acest lucru și să-i oferiți o alegere - să deschidă fereastra sau să nu o deschidă. Pentru a face acest lucru, înainte de a încărca fereastra, trebuie să eliberați „parlamentarul” - dialogul de confirmare (). Aici funcția este apelată de la . Vom vorbi despre asta foarte curând când vom trece la crearea ferestrelor folosind metoda open().

metoda prompt().

Această metodă solicită deja date specifice de la utilizator. Apare o casetă de dialog cu un câmp de introducere. Metoda returnează datele pe care utilizatorul le-a introdus în acest câmp și permite programului să lucreze cu aceste date.

Metoda prompt() are două argumente: o întrebare (care apare deasupra câmpului de introducere) și un răspuns (textul din câmpul de introducere):

Dacă doriți ca câmpul de introducere să apară gol, puneți ghilimele goale ca al doilea argument:

prompt(" textul întrebării","")

Să vedem asta în acțiune. Apăsați butonul, nu vă fie teamă.

Deci, ați introdus (sau nu ați introdus) date și ați primit un răspuns de la computer pe baza acestor date (sau a lipsei acestora).

Iată o versiune simplă a acestei funcții:

Proprietatea innerHTML, care ne permite să controlăm conținutul unei etichete, a fost întâlnită în lecția 10, când am programat nume sub imagini.

Și aici este codul pentru buton și un paragraf gol pentru salut.

Dar dacă se întâmplă să fii omonim meu, ai văzut că și funcția a răspuns la asta.

Cum să faceți acest lucru într-o versiune „aspră”, puteți deja să ghiciți singur. Trebuie să verificați variabila user_name nu numai pentru ghilimele goale, ci și pentru „ Andrei", și introduceți altul dacă cu textul corespunzător (puteți exersa singur).

Dar dacă tastezi „ Andrei", "Andryusha", "Andryushka", "Andryukha", "Andreyka", "Andrei Ivanovici" etc., atunci rezultatul va fi similar, deși nu am trecut în mod explicit prin toate aceste valori, ci m-am descurcat cu doar cinci rânduri: " Andre", "Andrew", "Andrei", "Andrejce" Și " Andreich„(ultimele trei - pentru a exclude pe Andreev, Andreichenko și Andreychuk din omonimii lor, păstrând în același timp pe Andreychik ca omonimi).

Adică, puteți ghici că funcția verifică variabila user_name pentru primele 5, 6 sau 8 caractere.

Dar despre asta vom vorbi puțin mai târziu, când vom trece la obiectele șiruri și metodele lor. Vreau doar să vă imaginați dinainte problemele pe care trebuie să le rezolvăm (în special, tot felul de împărțire a șirurilor în subșiruri). Atunci deciziile în sine vor părea mai clare. Dar dacă nu poți aștepta, poți „copia” funcția din cod și „o tai ca o nucă”. Pentru cei curioși, am scris un comentariu acolo.

Metoda prompt() poate fi folosită și pentru a introduce o parolă.

Acesta nu este sfârșitul lecției!

Să ne „jucăm de spion” puțin, ca să putem citi acest capitol până la sfârșit. Mai întâi încercați să apăsați butonul și să introduceți ceva.

Ah, asta e! Dar uite, există un alt buton! Haide...

Parola:

Apăsați din nou primul buton și introduceți parola corectă.

Toată această distracție, poate, are efect, dar de fapt poți afla parola apăsând butonul din dreapta și uitându-te la ea în cod. Unii pot crede naiv că este suficient să puneți codul într-un fișier .js separat. Dar în codul paginii va exista un link către acest fișier care indică adresa. Și dacă îl tastați în bara de adrese, se va deschide un fișier cu cod JavaScript :)

Este posibil să criptezi o parolă în cod? Este posibil, dar acest lucru necesită din nou manipularea șirurilor împreună cu utilizarea unor metode matematice. Când ajungem la toate acestea, vom studia și scriptul pentru parola „reala”. Dar tehnica de interacțiune cu utilizatorul va fi în continuare aceeași: metoda prompt(). (Este posibil să „spargi” o parolă criptată? Din păcate, nu există limite pentru perfecțiunea hackerilor...)

Așa cum am „prins” numele sau absența acestuia, vom prinde și parola cu funcția.

Dacă introduceți parola greșită sau nu introduceți nimic, linia

document.getElementById("nu").style.display = "blocare"

va deschide un bloc cu un al doilea buton

Și dacă este introdusă parola corectă, acțiunea este transferată pe linie

document.getElementById("da").style.display = "blocare" ,

care deschide blocul următor

Stai, ce fel de zimbri noduși sunt aceștia? Acesta este un cod de criptare simplu, îl voi explica în curând.

Între timp, dau codul pentru aceste blocuri (pentru claritate, omit tabelul cu cadre, pe care l-am inclus în ultimul bloc):

Ah, asta e! Dar uite, există un alt buton! Haide... Parola: document.write(unscape( „%u043C%u043E%u044F%20%u043F%u0440%u0435%u043A% u0440%u0430%u0441%u043D%u0430%u044F%20%u043B%u0435%u0434%u0438")) Apăsați din nou primul buton și introduceți parola corectă. Acum citiți mai departe. . . . . . . . . . .

Deci, despre criptare. E destul de mizerabilă. Oricine cunoaște funcțiile escape() și unescape() le poate sparge imediat.

Funcția escape(„introduceți șirul aici”) convertește caracterele în valorile lor hexazecimale.

Funcția unescape(„introduceți aici bizonul care trosnește”) face opusul.

Pentru a cripta o parolă în acest fel, trebuie să o rulați prin escape() acasă, să copiați rezultatul și să-l lipiți în unescape() . Dar asta, repet, nu este grav.

Ei bine, pentru setul complet - o funcție pentru al doilea buton:

Pentru a ieși standard casete de dialog JavaScript are doar trei metode, pe care le-am învățat astăzi. Deși aceste metode nu sunt folosite foarte des, abilitatea de a le folosi cu încredere este extrem de utilă. Sunt simple, dar în același timp aparțin, ca să spunem așa, programării „pure”. Sunt foarte bune pentru a învăța un limbaj de programare. Și vă sfătuiesc să experimentați cu ele în toate felurile posibile, chiar dacă fără scop din punct de vedere pragmatic. Programarea bună este un joc distractiv, la fel ca orice activitate creativă.

Există trei operațiuni de bază în JavaScript care vă permit să primiți date de la utilizator pentru prelucrare ulterioară în scripturi. Acestea sunt alerte, prompte și confirmate. Pentru ce sunt folosite, cum să le folosiți și alte nuanțe vor fi discutate mai târziu în acest articol.

alerta

Folosit pentru a afișa o fereastră modală pe ecranul browserului (aceasta înseamnă că utilizatorul nu poate face clic pe nimic din pagină până când nu închide această fereastră. În acest exemplu, până când face clic pe „OK” în fereastră).

După ce mesajul conținut în alertă este afișat, execuția scriptului este suspendată și reluată după ce fereastra modală este închisă.

Dacă câmpul este completat și se face clic pe OK, informațiile introduse de utilizator vor fi returnate în script.

Sintaxa acestei comenzi este ceva mai complicată decât cea anterioară, deoarece vă permite să setați textul mesajului către utilizator și conținutul câmpului pentru introducerea informațiilor, care vor fi afișate implicit: rezultat = prompt(title , Mod implicit ) ; , Unde

• titlu – un mesaj care va fi afișat utilizatorului într-o fereastră modală. Argumentul este necesar.
• implicit – ceea ce va fi afișat implicit în câmpul de introducere a textului. De asemenea, este necesar, deoarece dacă nu este specificat, poate duce la erori în unele browsere. Dacă doriți să lăsați câmpul de introducere a informațiilor gol, atunci pur și simplu setați solicitarea după cum urmează:

  var myTest = prompt("Orice informații" , """);

Un mic exemplu de utilizare a promptului:

var year = prompt(„În ce an ai absolvit facultatea?”, 2008); alert("Sunteți absolvent de " + an + " an!" ) ;

De obicei această comandă folosit pentru a colecta date de la utilizatori de care scriptul are nevoie pentru a continua lucrările.

a confirma

De asemenea, reprezintă fereastra modală. După cum ați putea ghici din nume, este de obicei folosit pentru a coordona ceva cu utilizatorul.

Acesta este motivul pentru care este conceput pentru interacțiune, oferă utilizatorului butoanele OK și CANCEL, care returnează valorile booleene adevărate și, respectiv, false la script.Evaluări: 4 (media 4 din 5)

Și din nou, vă urez bun venit la un alt subiect dedicat limbajului JavaScript, în care vom analiza metodele alert, prompt, confrim. Aceste metode sunt încorporate Limbajul Javascriptși ne ajută să interacționăm cu utilizatorul.
Alerta afișează o fereastră pe ecranul browserului cu anumite informații, care întrerupe scriptul până când utilizatorul dă clic pe OK.
Prompt afișează de obicei o fereastră care pune utilizatorului o întrebare la care trebuie să răspundă într-un anumit câmp de text înainte de a face clic pe OK. De asemenea, utilizatorul nu poate introduce nimic apăsând tasta Anulare.
Confirmare afișează, de asemenea, o fereastră în care utilizatorul nu mai poate introduce nimic în câmpul de text, ci poate doar să facă clic pe OK sau să anuleze.
Și acum, după o scurtă introducere, să trecem la luarea în considerare a tuturor celor de mai sus în practică.

alerta, prompt, confirma



alert("Bună, dragă utilizator!");
var nameUser = prompt(„Numele tău?” , „nume” );
var userAnswer = confirm("Sunteți sigur că doriți să părăsiți site-ul?");

Ca urmare, atunci când reîmprospătăm pagina browserului, vom vedea o fereastră de întâmpinare a utilizatorului. După ce faceți clic pe OK, va apărea următoarea fereastră care vă cere numele. Această metodă are doi parametri, primul este obligatoriu și este responsabil pentru titlul care va fi afișat, în cazul nostru este o întrebare cu numele de utilizator. Iar al doilea parametru este responsabil pentru valoarea care va fi afișată implicit în câmpul de text. Dacă introduceți numele dvs. și faceți clic pe OK, numele dvs. va fi plasat în variabila nameUser. Dacă faceți clic pe butonul de anulare, null va fi scris în variabilă.
Și în sfârșit, o fereastră care întreabă utilizatorul dacă dorește să părăsească site-ul nostru sau nu. În caz de consimțământ, valoarea booleană true va fi plasată în variabilă, iar în caz de refuz, falsă corespunzător. Atât trebuie să știi despre aceste metode, ne vedem în lecțiile următoare!

În acest articol, vom învăța trei metode interesante, și anume metodele alert(), confirm() și prompt(). Toate sunt concepute pentru a interacționa cu utilizatorul.

Toate aceste trei metode aparțin obiectului fereastră (Fereastra browserului). Și pot fi numite astfel: window.method_name(); Dar JavaScript ne permite să nu specificăm acest obiect fereastră, ci să scriem pur și simplu numele metodei.

Vom începe cu metoda alert(). Această metodă afișează mesajul specificat în fereastra browserului utilizatorului. Această fereastră va apărea în partea de sus a întregii pagini, iar până când utilizatorul face clic pe butonul OK, nu se va închide.

Pentru a demonstra, să afișăm un mesaj folosind metoda alert().

Var today_is = "luni"; alert("Astăzi" + azi_este);

În cadrul metodei putem specifica orice șir, doar fără etichete html. Ele nu sunt procesate aici, ci sunt afișate așa cum sunt.

Dacă șirul pe care vrem să-l specificăm este foarte lung și vrem să sărim linie nouă, atunci aici este eticheta html
nu va funcționa. Aici trebuie să utilizați caracterul „\n”.

Alert("Loooooooooong \nStringgggggg");

Această metodă este adesea folosită pentru a găsi erori în cod.

Procesul de procesare a codului merge de sus în jos, așa că pentru a detecta o eroare, pur și simplu scriem metoda alert() în zona așteptată în care se află eroarea. Și dacă alert() a funcționat, atunci nu există erori până la linia în care este scris.

Apoi, trebuie să-l mutați cu o linie sau mai jos. Salvăm modificările, reîmprospătăm pagina în browser și vedem dacă alerta() a funcționat, atunci nu există erori până la linia în care se află, altfel, dacă nu a funcționat, eroarea este localizată în linie deasupra liniei unde se află în prezent . Acesta este modul în care puteți găsi o eroare în cod.

metoda confirm().

Această metodă este folosită pentru a confirma răspunsul la o întrebare. Există doar două opțiuni de răspuns, da (OK) sau nu (Anulare). Dacă utilizatorul răspunde da, atunci metoda returnează true, în caz contrar returnează false.

De exemplu, vom afișa o fereastră folosind metoda confirm(), unde vom întreba utilizatorul „Sunteți sigur că doriți să părăsiți pagina?” Dacă utilizatorul răspunde da, atunci prin metoda alert() vom afișa următorul mesaj „Utilizatorul dorește să părăsească pagina”, în caz contrar vom afișa un alt mesaj „Utilizatorul NU dorește să părăsească pagina”.

Var user_answer = confirm("Sunteți sigur că doriți să părăsiți pagina?"); if(user_answer) alert("Utilizatorul dorește să părăsească pagina"); else alert("Utilizatorul NU dorește să \npărăsească pagina");

Acesta este modul în care funcționează metoda confirm(). Poate fi folosit în cazuri diferite. De exemplu, înainte de a elimina ceva de pe un site, se obișnuiește să întrebați utilizatorul dacă are încredere în acțiunile sale. Sau, înainte de a trimite formularul, puteți întreba și utilizatorul „Ați completat totul corect?” Dacă acesta răspunde da, atunci formularul va fi trimis, altfel nu va fi trimis.

metoda prompt().

Ultima metodă pe care o vom învăța este metoda prompt(). Această metodă este utilizată mai rar decât celelalte două metode. Vă permite să primiți câteva informații de la utilizator, pe care le va introduce într-un câmp de text.

Ca rezultat, metoda prompt() returnează fie șirul introdus dacă utilizatorul a făcut clic pe butonul OK, fie null dacă utilizatorul a făcut clic pe butonul de anulare.

Ca parametru, adică în interiorul parantezelor aceasta metoda putem scrie un ghid sau o întrebare pentru a informa utilizatorul ce informații trebuie introduse.

De exemplu, să-i cerem utilizatorului să răspundă la întrebarea „Cum te cheamă?” Numele introdus de utilizator va fi afișat pe ecran folosind metoda alert().

Var name = prompt("Care este numele tău?"); alert("Numele tău este " + nume);

Salvați și deschideți pagina în browser.

Desigur, puteți introduce orice informație în câmpul text din metoda prompt(). Aceste informații vor fi returnate ca șir, chiar și în cazul numerelor sau al altor caractere speciale.

De exemplu, să cerem utilizatorului să introducă două numere și apoi să le înmulțească. Va exista un fel de calculator pentru înmulțirea numerelor.

Var x = prompt("Introduceți primul număr:"); var y = prompt("Introduceți al doilea număr:"); //Conversia numerelor introduse dintr-un tip șir într-un tip numeric x = Number(x); y = Număr(y); document.write(x + " * " + y + " = " + (x * y));

Numerele introduse sunt șiruri, așa că pentru rezultatul corect al înmulțirii, aceste numere trebuie trecute prin funcția Number(), care le convertește din tipul șirului în numere normale.

Ei bine, asta-i tot. Acum știi încă trei metode: alert(), confirm() și prompt(). Pe care îl puteți folosi în siguranță în practică.

Se poate organiza un dialog cu un vizitator al unei resurse web căi diferite, dintre care utilizarea funcției JavaScript alert() este cea mai simplă și varianta rapida. Această opțiune este deosebit de bună în scopuri de testare, dar pe multe resurse este folosită ca o funcționalitate naturală.

Funcția JavaScript alert() vă permite să obțineți un răspuns afirmativ. De fapt, nu răspunsul este important, ci faptul că informațiile sunt afișate. Mai mult, resursa web nu mai funcționează până când utilizatorul răspunde. Răspunsul la o alertă este întotdeauna același - acesta este răspunsul!

Pentru a Depanare JavaScript alert() este un instrument ideal care vă permite să obțineți rapid informații actualizate, să luați o decizie și să continuați să lucrați. Dar, în scopul funcționării normale a site-ului, acesta are și o serie de avantaje.

Captarea atenției vizitatorilor

„Alerta” - ca în viață, formează un eveniment pe care nu îl poți ignora. Dar acest eveniment poate să nu se întâmple.

Puțini dezvoltatori știu despre acest fapt și petrec un timp dureros de lung depanând site-ul lor în partea de client. În același timp, puțini dezvoltatori nu știu: găsirea unei erori în client, adică în browser, este adesea atât de dificilă încât:

• Ore de timp prețios sunt pierdute fără scop;
• Sunt cheltuite transformări incredibile de cod;
• o mulțime de scripturi sunt lopate, în cuvinte, merg atât la browser, cât și la server.

Dar încă nu există niciun rezultat. Nici depanatoarele nu ajută, nici cuvintele, nici instrumentele de depanare încorporate în fiecare browser. Între timp, sicriul se deschide întotdeauna cu ușurință - cheia potrivită este importantă.

O regulă simplă pentru codul corect

În primul rând, cookie-urile au devenit cea mai populară componentă a unui site web modern. Nu trebuie să uiți niciodată:

• Alertă JavaScript și cookie de document
• „aici și acum” și „în general sau într-o zi”.

Cookie-urile sunt o modalitate grozavă de a vă aminti fiecare client în profunzimea browserului, dar nu ar trebui să-i acordați importanță în sesiunea curentă. Principala preocupare a cookie-urilor este aceea de a rămâne în „memoria” browserului cu conținutul pe care îl avea în momentul în care vizitatorul a plecat.

În toate celelalte privințe, codul de script din măruntaiele browserului depinde doar de el însuși și de evenimentele pe care le procesează.

În acest context, și acest context este ideal, codul nu poate să nu funcționeze dacă este scris corect. Aceasta este regula ideală pentru codul corect. Dacă browserul afișează un ecran gol sau face ceva greșit, există motive să presupunem că există o eroare.

Este la fel de ușor ca o plăcintă de aplicat:

• JavaScript alert(„Totul a fost corect până acum!”).

Cel mai bun depanator sau depanator este un eveniment care trebuie să se întâmple, dar nu se întâmplă.

Mutând această construcție în jos de la zero la o infracțiune enervantă în cod, puteți găsi locul după care nu funcționează. Eroarea va fi găsită. JavaScript alert() este fereastra modală. Nu există nicio modalitate de a o ocoli și nu se va întâmpla nimic mai departe până când dezvoltatorul/vizitatorul închide această fereastră.

Dacă fereastra nu apare, înseamnă că fie este indicată în cod incorect, fie tot ce apare înainte conține o eroare.

O situație dificilă în care JavaScript de alertă nu pare să funcționeze

Aceasta se referă în principal la algoritmii AJAX pentru schimbul de informații cu serverul. Aici nu este întotdeauna permisă utilizarea instrumentelor clasice de depanare, iar atunci când un sistem de obiecte cu mai multe niveluri operează pe partea clientului, atunci depanarea este în general transformată în conștiința dezvoltatorului și niciun depanator nu poate ajuta.

Cea mai bună opțiune pentru o alertă în procedura de comunicare cu serverul este un div în care protocolul de comunicare cu serverul este plasat folosind metoda innerHTML - va fi întotdeauna clar în ce stadiu apare problema.

Un div static care este întotdeauna vizibil pe pagină nu este o fereastră modală dintr-o alertă JavaScript. Este posibil ca fereastra să nu apară și pot exista multe motive pentru aceasta și sunt formatate sintactic corect. Limbajul browserului are o dispoziție extrem de calmă și nu va lua niciodată nicio acțiune decât dacă înțelege și analizează ceva.

Staticitatea oricărui Etichetă HTML- un factor bun. Eliminarea întregului cod și adăugarea lui în bucăți până când eroarea apare din nou nu este cea mai rapidă tehnică de depanare. A scrie corect este un sfat popular și căutat, dar nu practic.

Limbajul browser-ului este determinat de evenimente, principala sa preocupare nu este codul secvenţial, ci execuţia funcţionalităţii atribuite etichetelor paginii şi gestionarea evenimentelor.

Regulă suplimentară la o regulă simplă

Dacă fereastra de alertă JavaScript („Totul este scris corect până acum”) nu apare în browser, înseamnă că sintaxa până la locul unde este scrisă această construcție nu ridică îndoieli în browser și este executată corect.

Logica stilului modern de scriere are un defect semnificativ. Toate fișierele de pagină sunt îmbinate (cu esența și tipurile lor) într-un singur întreg, iar după aceea este construit DOM-ul. Ordinea în care fișierele sunt conectate este adesea semnificativă.

Cel mai bine este atunci când dezvoltatorul nu acordă importanță principiului bazat pe evenimente de organizare a execuției funcțiilor alocate evenimentelor, ci plasează toate funcțiile în succesiunea aplicării lor și atribuirii etichetelor și evenimentelor de pagină.

Ordinea este întotdeauna cea mai importantă. JavaScript își va da seama de restul de unul singur: ce să suni și când. Programarea modernă în general și în contextul oricărei metode, în special orice abordare foarte organizată orientată pe obiecte, este întotdeauna consecventă. Ele sunt, de asemenea, întotdeauna combinate secvențial, așa cum sunt descrise.

Dacă ceva nu se întâmplă, înseamnă că ceva nu este în neregulă undeva, ci doar în fața acestui loc.