Bună, în ultimul articol ne-am uitat la sintaxă limbaj JavaScript. Am învățat ce sunt buclele, variabilele, tablourile, operatori logici, funcții și așa mai departe.

Toate aceste operațiuni au loc în interiorul paginii și nu sunt afișate în niciun fel. Astăzi vom învăța cum să afișam datele necesare pe ecran. Vom afișa o variabilă numerică obișnuită folosind ActionScript într-o varietate de moduri.

Pentru a folosi toate metodele care vor fi indicate mai jos, trebuie să accesăm obiectul document. Acesta este un element separat al limbajului JavaScript care este conceput pentru a funcționa cu site-uri web.

Metoda unu: funcția writeln

Pentru a afișa o variabilă în acest fel, trebuie să o creăm. Să scriem următoarea linie: var mesaj = „Bună lume!”

Acum să vorbim despre funcția writeln. Cel mai bine este folosit doar la încărcarea versiunii originale a paginii, astfel încât conținutul intern va fi modificat.

Folosind funcții precum writeln puteți crea o pagină scrisă în întregime în JavaScript. În plus, această funcție poate fi utilă atunci când este necesar să se reducă numărul de solicitări de la server.

Pentru a folosi această funcție scriem comanda document.writeln, în paranteze scriem numele variabilei noastre, care va fi apoi afișată pe ecran.

Fiţi atenți! Majoritatea instrucțiunilor pentru lucrul cu o pagină web sunt componente ale spațiului de nume document, așa că trebuie introduse înaintea funcției în sine, separate printr-un punct.

A doua cale: funcția de alertă

Nu este inclus în spațiul de nume al documentului, cum ar fi writeln, deci nu este necesar să fie inclus. Alerta poate fi excelentă pentru depanarea codului paginii web. Poate fi folosit și pentru interacțiunea cu utilizatorul, dar acest lucru nu este recomandat.

Alerta are sintaxa standard a oricărei funcții JavaScript. Mai întâi scriem comanda alertă, în paranteze scriem valoarea sau variabila.

După aceasta, în partea de sus a paginii va apărea o fereastră cu un mesaj pentru utilizator, care conține un buton „OK”.

Această caracteristică poate avea multe utilizări, dar nu ar trebui să o folosiți excesiv atunci când lucrați pe un site web, deoarece ferestrele pop-up pot irita utilizatorul. În plus, unele pluginuri blochează funcții precum alertă.

JAVA

var mesaj = „Bună lume!”; document.writeln(„mesaj”); alert("mesaj"); document.getElementById("hl").innerHTML = "mesaj"

Copie

A treia cale: funcția getElementById

Acesta este cel mai complex și cel mai popular mod de a afișa informații pe ecran. Cu acesta puteți modifica conținutul text al paginii dvs. HTML.

După cum știm - totul Etichete HTML poate avea identificatori. Lor li se adresează funcția noastră. GetElementById găsește un element după ID-ul său, modifică conținutul etichetei după cum doriți, lăsând restul conținutului neschimbat.

Această funcție face parte din spațiul de nume al documentului, care necesită să fie specificată înaintea funcției în sine.

După cum probabil ați observat, pe lângă getElementById există o comandă innerHTML de neînțeles, urmată de un semn egal și șir de text. Deci, această comandă, împreună cu semnul egal, găsește o etichetă specifică și „echivalează” conținutul acesteia cu șirul citat.

Această metodă este cea mai potrivită pentru inserarea de text prin JavaScript, deoarece are o serie de avantaje:

Fără ferestre pop-up când funcția rulează.

Funcția funcționează numai cu elemente HTML.

Textul citat poate fi împachetat în etichete. În acest fel, puteți scrie o pagină JavaScript de la zero.

Concluzie

În acest articol v-am vorbit despre cum să afișați informațiile pe ecran. Acest lucru se poate face prin mesaje, precum și prin modificarea conținutului intern al paginii web. Am zgâriat doar suprafața spațiului de nume al documentului, care are o serie de funcții pentru lucrul cu o pagină web. În următoarele lecții ne vom familiariza cu ele în detaliu.

Puteți experimenta singur cu funcțiile descrise mai sus sau puteți descărca sursele noastre. Distreaza-te invatand!

În unele cazuri, poate fi necesar să transmiteți variabile globale PHP unui script JavaScript. În acest articol, voi explica cum să utilizați variabilele PHP în JavaScript și voi da câteva exemple.

Variabile PHP în JavaScript

Există o serie de scenarii care vă pot cere să includeți variabile PHP în codul JavaScript. De exemplu, când o pagină de site este solicitată de un utilizator, modul PHP pe server generează pagina efectuând calcule și afișând toate variabilele paginii în fereastra browserului.

Odată ce pagina s-a terminat de încărcat, nu mai aveți control asupra acesteia (cu excepția cazului în care aveți un server bazat pe timp). Dar dacă treceți variabile PHP la codul JavaScript atunci când pagina se încarcă, puteți continua să le utilizați în scripturile JS și să controlați randarea și comportamentul dinamic al paginii.

Acum să vedem cum puteți trece variabile din JavaScript în PHP sau invers.

Cum să transferați variabile PHP la JavaScript inline

Există două metode principale pentru includerea codului JavaScript într-o pagină HTML. Primul este că plasăm codul pe aceeași pagină, într-o secțiune sau în . Să presupunem că avem cod JS inline într-o secțiune și dorim să transmitem o variabilă de nume de utilizator PHP către JavaScript. În acest caz, trebuie să folosim următorul cod:

var nume de utilizator = "";

alert(nume utilizator);

...

Am definit o nouă variabilă în JS și am numit-o nume de utilizator. Apoi a atribuit această variabilă JS PHP variabilei $username, repetând-o. Desigur, variabila $username trebuie să fi fost definită mai devreme pe pagina de deasupra acestui rând.

Rețineți că în jurul codului PHP care afișează $username, am folosit ghilimele duble (" ) la fel ca atunci când declaram o variabilă în JS. Dacă variabila PHP este un număr, atunci nu trebuie să utilizați ghilimele. Dar asigurați-vă că utilizați corect ghilimele, deoarece șirul de ieșire poate conține și ghilimele și va rupe codul JS. Cum să transferați variabile PHP către JavaScript extern De asemenea, codul JS poate fi stocat într-un fișier extern (de exemplu, script.js) asociat cu

Pagina HTML

. De exemplu, dacă doriți să transmiteți valoarea unei variabile de timp (în secunde) unui cronometru JS, puteți utiliza următorul cod:

var secunde = ;

... Cod în fișierul JS extern (script.js): setTimeout(function() ( window.location.href = "/"; ), secunde * 1000); În codul de mai sus, inițializam mai întâi Valoarea PHP

variabilă $secunde variabilă JS secunde . Variabila este apoi disponibilă în DOM și scriptul pluginului (script.js) o poate folosi. În exemplul de mai sus, utilizatorul este redirecționat către

Și apoi ne-am uitat la cum să gestionăm evenimentele utilizatorului. De data aceasta, ne vom uita la cum să luăm unele informații ale utilizatorului și să le combinăm cu altele pentru a le face pagina simpla, te salut.

exemple/js/pure_js_greating.html

Hello World Prenume: Nume: Spune salut!

funcția say_hi() ( var fname = document.getElementById ("first_name").value; var lname = document.getElementById ("last_name").value; var html = "Bună ziua " + fname + " " + lname; document.getElementById ("rezultat").innerHTML = html; document.getElementById("spune").addEventListener("click", say_hi);

Încerca!

În acest exemplu avem puțin mai mult HTML decât înainte. Pe lângă butonul și div unde ne vom afișa rezultatele, avem și două elemente de intrare. Fiecare cu propriul ID.

În codul JavaScript avem funcția say_hi. Folosește metoda getElementById pe care am analizat-o mai devreme pentru a obține elementul DOM care reprezintă intrarea cu id first_name. Obiectul returnat are o metodă de valori care va returna textul introdus de utilizator în acel câmp.

Folosim această metodă pentru a obține conținutul ambelor elemente de intrare și pentru a atribui valorile rezultate la două variabile: fname și lname .

Apoi, folosind aceste variabile, creăm un fragment HTML și îl atribuim unei noi variabile html.

Apoi setăm atributul innerHTML (cum am făcut înainte) pentru a afișa HTML-ul generat. Rezultatul ar putea arăta astfel: Creare HTML greoaie Chiar și în asta

HTML simplu trebuie să folosim + de mai multe ori, iar codul se dovedește a fi destul de ilizibil. Imaginați-vă ce s-ar întâmpla dacă am dori să creăm o aplicație mai complexă în care am fi vrut să generăm liste de elemente sau chiar tabele. Generarea HTML din mers și inserarea lui în DOM ar fi destul de dureroasă.În backend-urile scrise în Perl, Python sau Ruby, oamenii s-au confruntat cu aceleași probleme. Soluția a fost crearea diferitelor motoare de șabloane. Practic, un șablon este un fragment HTML cu niște substituenți (cuvinte cheie), o anumită funcție primește acest fragment HTML (șablon) ca parametru, precum și mai multe perechi cheie-valoare. Funcția revine apoi

HTML nou

un fragment în care substituenții sunt înlocuiți cu valorile obținute ale cheilor adecvate.

Variabilele din JavaScript sunt containere pentru stocarea diferitelor informații.

Fiecare variabilă JavaScript trebuie să aibă propriul nume unic, care poate începe cu o literă latină sau simbolul „_”.

Vă rugăm să rețineți: numele variabilelor din JavaScript nu pot începe cu numere.

Vă rugăm să rețineți: deoarece JavaScript este sensibil la majuscule și minuscule, variabilele cu aceleași nume scrise în majuscule diferite (de exemplu, var și VAR) vor fi variabile diferite.

Crearea variabilelor

Crearea de variabile în JavaScript este adesea numită "anunţ" variabile.

Variabilele în JavaScript sunt declarate folosind comanda var.

//Creează o variabilă numită ex1 var ex1; //Creează o variabilă numită ex2 var ex2;

Variabilele create mai sus vor fi goale, adică am creat containere, dar nu am încărcat nicio valoare în ele.

Valorile pot fi încărcate și în containere chiar în momentul creării, ca în exemplul de mai jos:

//Creează o variabilă numită ex1 care conține valoarea 4 var ex1=4; //Creează o variabilă numită ex2 care conține valoarea 5 var ex2=5;

Pentru a extrage o valoare dintr-o variabilă creată anterior, trebuie să vă referiți la numele acesteia.

În exemplul următor, vom extrage conținutul variabilelor și le vom scoate imediat în pagină folosind comanda document.write.

//Scrieți numărul 4 în variabila ex1 var ex1=4; //Scrieți numărul 5 în variabila ex2 var ex2=5; //Trimite conținutul variabilei ex1 în pagina document.write(ex1+"
"); //Afișează conținutul variabilei ex2 document.write(ex2+"
"); //Schimbă conținutul variabilei ex2 ex2=200; //Afișează noul conținut al variabilei ex2 document.write(ex2);

Vizualizare rapidă

Variabile șir

Pe lângă numere, puteți stoca text arbitrar în variabile. Variabilele care stochează text se numesc variabile șir.

Când scrieți text într-o variabilă, asigurați-vă că o includeți în dublu ("") sau ghilimele simple (").

//Scrieți șirul „Salut tuturor!” în variabila ex var ex="Bună ziua tuturor!"; //Trimite valoarea variabilei ex în pagina document.write(ex);

Vizualizare rapidă

Definirea variabilelor cu și fără var

În JavaScript, puteți defini variabile cu sau fără var.

//Creează o nouă variabilă cu var var ex=123; //Creează o nouă variabilă fără var ex2=20;

S-ar putea să credeți că declararea variabilelor cu și fără var va produce întotdeauna același rezultat, dar acest lucru este adevărat numai atunci când declarația are loc într-un context global (adică în afara tuturor funcțiilor).

Dacă declarația are loc într-un context local (adică, în corpul unei funcții), o declarație cu var creează o variabilă locală (adică, o variabilă care va fi disponibilă numai în corpul acestei funcții și va fi distrusă după funcție. este executată), o declarație fără var creează o variabilă globală (adică o variabilă care va fi disponibilă pentru alte funcții dintr-un script dat).

Rețineți că vom vorbi mai multe despre variabilele locale și globale mai târziu în acest tutorial.

Despre ștergerea și redefinirea variabilelor

Prin redefinirea variabilelor, nu ștergeți valoarea care este stocată în ele.

Var ex=123; var ex; document.write(ex); // Tipărește 123

Dacă doriți să ștergeți o variabilă în JavaScript și nu a fost declarată cu var, puteți utiliza operatorul de ștergere.

Ex=123; șterge ex;

Operatorul de ștergere nu poate șterge variabilele declarate cu var, deci dacă o variabilă a fost declarată cu var, atunci singura modalitate de a o șterge este să o alocați valoare nulă sau nedefinit.

Var ex=123; ex=null; // sau ex=nedefinit

Fă-o singur

Sarcina 1. Corectați erorile din codul de mai jos:

Sarcina 1

var 33var=33; document.write(33var); document.write("
"); var str1=Salut tuturor!; document.write(str1); document.write("
"); var vaR = 288; document.write(var); document.write("
");

Sarcina 2. Fișierul extern secred1.js conține variabilele sec1, sec2, sec3 și sec4, care conțin literele cuvântului de cod (nu în ordine). Conectați un fișier extern și aflați cuvântul de cod afișând valori variabile pe pagină.

În procesul de dezvoltare a site-ului web, este adesea nevoie să se transmită o anumită valoare (variabilă, matrice) javascriptului, în astfel de cazuri, de obicei, sfătuiesc ceva de genul

var variabila = alert(variable);

Javascript scris inline provoacă sentimente amestecate.

În primul rând, acest lucru nu este aproape întotdeauna conform stilului de cod.

În al doilea rând, este dificil de depanat.

În al treilea rând, un astfel de cod nu este stocat în cache de browser.

Atenție, dragă cititor, exemplul de mai sus este mai mult decât complet incorect, ceea ce vă avertizez imediat, și exact așa nu ar trebui să o faceți, dar puteți citi mai jos despre cum să o faceți corect, atent și atent.

Dar dacă, de exemplu, nu ești o persoană cu principii morale înalte, poți să copiați în siguranță și să faceți tot ce doriți cu ea, nu v-am sfătuit să faceți acest lucru și, în plus, chiar v-am descurajat.

Sunt convins că javascript ar trebui să fie stocat exclusiv în fișiere,
html pentru a asigura stocarea în cache normală de către browsere și pentru a facilita găsirea acestui script în proiectul dumneavoastră.

Dar cum putem trece valoarea din PHP și, în același timp, păstrăm un cod frumos?

Răspunsul este să folosiți eval() în Javascript.

Să ne uităm la un exemplu cu conexiune google maps.

Mai întâi, să conectăm Google Maps (biblioteca)

inițializam începutul desenului hărților imediat după încărcarea DOM-ului

Var $ = jQuery.noConflict(); $(document).ready(function () ( if ($("#map-canvas").length) ( function initialize() ( var place = eval($("#map-canvas")).attr("data -place")); var pos = new google.maps.LatLng(place, place); var mapOptions = ( centru: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: ( stil: google. maps.MapTypeControlStyle.DROPDOWN_MENU ), scrollwheel: false, rotateControl: true ); var map = new google.maps.Map(document.getElementById("map-canvas"), map.setTilt(45); new google.maps.Marker (( poziție: poziție, hartă: hartă ));

Să creăm elementele html necesare

O explicație a acestei magie străzii

în js suntem interesați de linia:

Var loc = eval($("#map-canvas").attr("data-place");

$("#map-canvas").attr("data-place")

Obține atributul data-place al elementului cu id map-canvas după care eval() convertește șirul în cod js, mai precis într-o matrice, deoarece sunt paranteze drepte.

Conform specificației HTML5, browserele omit atributele etichetelor începând cu date - acest atribut nu va afecta redarea, dar valoarea sa poate fi folosită în javascript.

Codul html poate fi modificat: