Ciao, nell'ultimo articolo abbiamo esaminato la sintassi Linguaggio JavaScript. Abbiamo imparato cosa sono i loop, le variabili, gli array, operatori logici, funzioni e così via.

Tutte queste operazioni avvengono all'interno della pagina e non vengono visualizzate in alcun modo. Oggi impareremo come visualizzare i dati necessari sullo schermo. Visualizzeremo una variabile numerica regolare utilizzando ActionScript in vari modi.

Per poter utilizzare tutti i metodi che verranno indicati di seguito, dobbiamo accedere all'oggetto documento. Questo è un elemento separato del linguaggio JavaScript progettato per funzionare con i siti Web.

Metodo uno: funzione writeln

Per visualizzare una variabile in questo modo, dobbiamo crearla. Scriviamo la seguente riga: var message = “Hello World!”

Ora parliamo della funzione writeln. È meglio utilizzarlo solo quando si carica la versione originale della pagina, quindi il contenuto interno verrà modificato.

Usando funzioni come writeln puoi creare una pagina scritta interamente in JavaScript. Inoltre questa funzione può essere utile quando è necessario ridurre il numero di richieste provenienti dal server.

Per poter utilizzare questa funzione scriviamo il comando document.writeln, tra parentesi scriviamo il nome della nostra variabile, che verrà poi mostrata sullo schermo.

Fai attenzione! La maggior parte delle istruzioni per lavorare con una pagina web sono componenti dello spazio dei nomi del documento, quindi devono essere inserite prima della funzione stessa, separate da un punto.

Secondo modo: funzione di avviso

Non è incluso nello spazio dei nomi del documento come writeln, quindi non è necessario includerlo. Alert può essere ottimo per eseguire il debug del codice della pagina web. Può essere utilizzato anche per l'interazione con l'utente, ma ciò non è consigliato.

Alert ha la sintassi standard di qualsiasi funzione JavaScript. Per prima cosa scriviamo il comando alert, tra parentesi scriviamo il valore o la variabile.

Successivamente, nella parte superiore della pagina verrà visualizzata una finestra con un messaggio per l'utente, che contiene un pulsante "OK".

Questa funzionalità può avere molti usi, ma non dovresti abusarne quando lavori su un sito web, poiché i popup possono irritare l'utente. Inoltre, alcuni plugin bloccano funzioni come alert.

GIAVA

var messaggio = "Ciao mondo!"; document.writeln("messaggio"); avviso("messaggio"); document.getElementById("hl").innerHTML = "messaggio"

Copia

Terzo modo: funzione getElementById

Questo è il modo più complesso e più diffuso di visualizzare le informazioni sullo schermo. Con esso puoi modificare il contenuto testuale della tua pagina HTML.

Come sappiamo, tutto Tag HTML possono avere identificatori. È a loro che si rivolge la nostra funzione. GetElementById trova un elemento in base al suo ID, modifica il contenuto del tag come desiderato, lasciando invariato il resto del contenuto.

Questa funzione fa parte dello spazio dei nomi del documento, che richiede che venga specificata prima della funzione stessa.

Come avrai notato, oltre a getElementById c'è un comando innerHTML incomprensibile, seguito da un segno di uguale e stringa di testo. Quindi, questo comando, insieme al segno uguale, trova un tag specifico e "equipara" il suo contenuto alla stringa tra virgolette.

Questo metodo è più adatto per inserire testo tramite JavaScript perché presenta numerosi vantaggi:

Nessuna finestra popup quando la funzione è in esecuzione.

La funzione funziona solo con elementi HTML.

Il testo citato può essere racchiuso nei tag. In questo modo puoi scrivere una pagina JavaScript da zero.

Conclusione

In questo articolo ti abbiamo parlato di come visualizzare le informazioni sullo schermo. Questo può essere fatto tramite messaggi, nonché modificando il contenuto interno della pagina web. Abbiamo solo scalfito la superficie dello spazio dei nomi del documento, che ha una serie di funzioni per lavorare con una pagina web. Nelle lezioni seguenti li conosceremo in dettaglio.

Puoi sperimentare tu stesso le funzioni sopra descritte o scaricare i nostri sorgenti. Divertiti imparando!

In alcuni casi, potrebbe essere necessario passare variabili globali PHP a uno script JavaScript. In questo articolo spiegherò come utilizzare le variabili PHP in JavaScript e fornirò alcuni esempi.

Variabili PHP in JavaScript

Esistono diversi scenari che potrebbero richiedere l'inclusione di variabili PHP nel codice JavaScript. Ad esempio, quando una pagina del sito viene richiesta da un utente, modulo PHP sul server genera la pagina eseguendo calcoli e visualizzando tutte le variabili della pagina nella finestra del browser.

Una volta terminato il caricamento della pagina, non ne hai più il controllo (a meno che tu non disponga di un server basato sul tempo). Ma se passi le variabili PHP al codice JavaScript quando la pagina viene caricata, puoi continuare a utilizzarle all'interno degli script JS e controllare il rendering e il comportamento dinamico della pagina.

Ora diamo un'occhiata a come passare variabili da JavaScript a PHP o viceversa.

Come passare le variabili PHP al JavaScript in linea

Esistono due metodi principali per includere il codice JavaScript in una pagina HTML. Il primo è che posizioniamo il codice nella stessa pagina, in una sezione o in . Diciamo che abbiamo del codice JS in linea in una sezione e vogliamo passare una variabile nome utente PHP a JavaScript. In questo caso dobbiamo utilizzare il seguente codice:

var nome utente = "";

avviso(nome utente);

...

Abbiamo definito una nuova variabile in JS e l'abbiamo chiamata nome utente. Quindi assegna questa variabile JS PHP alla variabile $username, ripetendola. Naturalmente, la variabile $username deve essere stata definita in precedenza nella pagina sopra questa riga.

Tieni presente che attorno al codice PHP che stampa $nomeutente, abbiamo utilizzato le virgolette doppie (" ) proprio come quando dichiariamo una variabile in JS. Se la variabile PHP è un numero, non è necessario utilizzare le virgolette. Ma assicurati di utilizzare le virgolette correttamente perché la stringa di output potrebbe contenere anche virgolette e interromperà il codice JS. Come passare variabili PHP a JavaScript esterno Anche il codice JS può essere archiviato in un file esterno (ad esempio script.js) associato a

Pagina HTML

. Ad esempio, se desideri passare il valore di una variabile temporale (in secondi) a un timer JS, puoi utilizzare il seguente codice:

var secondi = ;

... Codice nel file JS esterno (script.js): setTimeout(function() ( window.location.href = "/"; ), secondi * 1000); Nel codice sopra, inizializziamo prima Valore PHP

variabile $secondi variabile JS secondi . La variabile è quindi disponibile nel DOM e lo script plugin (script.js) può utilizzarla. Nell'esempio precedente l'utente viene reindirizzato a

Poi abbiamo esaminato come gestire gli eventi utente. Questa volta vedremo come prendere alcuni input dell'utente e combinarli con altri per crearli pagina semplice, ti saluto.

esempi/js/pure_js_greating.html

Ciao mondo Nome: Cognome: Salutami!

function say_hi() ( var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Ciao " + fname + " " + lname; document.getElementById ("risultato").innerHTML = html; ) document.getElementById("say").addEventListener("click", say_hi);

Tentativo!

In questo esempio abbiamo un po' più di HTML rispetto a prima. Oltre al pulsante e al div in cui visualizzeremo i nostri risultati, abbiamo anche due elementi di input. Ognuno con il proprio documento d'identità.

Nel codice JavaScript abbiamo la funzione say_hi. Utilizza il metodo getElementById che abbiamo visto in precedenza per ottenere l'elemento DOM che rappresenta l'input con id first_name. L'oggetto restituito ha un metodo valore che restituirà il testo immesso dall'utente in quel campo.

Usiamo questo metodo per ottenere il contenuto di entrambi gli elementi di input e assegnare i valori risultanti a due variabili: fname e lname .

Quindi, utilizzando queste variabili, creiamo uno snippet HTML e lo assegniamo a una nuova variabile html.

Quindi impostiamo l'attributo innerHTML (come abbiamo fatto prima) per mostrare l'HTML generato. Il risultato potrebbe assomigliare a questo: Creazione HTML complessa Anche in questo

HTML semplice dobbiamo usare + più volte e il codice risulta essere abbastanza illeggibile. Immagina cosa accadrebbe se volessimo creare un'applicazione più complessa in cui volessimo generare elenchi di elementi o anche tabelle. Generare HTML al volo e inserirlo nel DOM sarebbe una vera seccatura. Nei backend scritti in Perl, Python o Ruby, le persone hanno riscontrato gli stessi problemi. La soluzione era creare vari motori di template. Fondamentalmente un modello è uno snippet HTML con alcuni segnaposto (parole chiave), una determinata funzione riceve questo snippet HTML (modello) come parametro, oltre a diverse coppie di valori-chiave. La funzione quindi ritorna

nuovo HTML

uno snippet in cui i segnaposto vengono sostituiti con i valori ottenuti dalle chiavi adeguate.

Le variabili in JavaScript sono contenitori per la memorizzazione di varie informazioni.

Ogni Variabile JavaScript deve avere un proprio nome univoco, che può iniziare con una lettera latina o con il simbolo "_".

Nota: i nomi delle variabili in JavaScript non possono iniziare con numeri.

Nota: poiché JavaScript distingue tra maiuscole e minuscole, le variabili con gli stessi nomi scritti in maiuscole e minuscole diverse (ad esempio, var e VAR) saranno variabili diverse.

Creazione di variabili

La creazione di variabili in JavaScript viene spesso chiamata "annuncio" variabili.

Le variabili in JavaScript vengono dichiarate utilizzando il comando var.

//Crea una variabile denominata ex1 var ex1; //Crea una variabile denominata ex2 var ex2;

Le variabili create sopra saranno vuote, ovvero abbiamo creato contenitori, ma non abbiamo caricato alcun valore al loro interno.

I valori possono anche essere caricati nei contenitori proprio al momento della creazione, come nell'esempio seguente:

//Crea una variabile denominata ex1 contenente il valore 4 var ex1=4; //Crea una variabile denominata ex2 contenente il valore 5 var ex2=5;

Per estrarre un valore da una variabile creata in precedenza è necessario fare riferimento al suo nome.

Nell'esempio seguente, estrarremo il contenuto delle variabili e lo pubblicheremo immediatamente nella pagina utilizzando il comando document.write.

//Scrivo il numero 4 nella variabile ex1 var ex1=4; //Scrivo il numero 5 nella variabile ex2 var ex2=5; //Emette il contenuto della variabile ex1 nella pagina document.write(ex1+"
"); //Emette in output il contenuto della variabile ex2 document.write(ex2+"
"); //Cambia il contenuto della variabile ex2 ex2=200; //Emetti il ​​nuovo contenuto della variabile ex2 document.write(ex2);

Visualizzazione rapida

Variabili stringa

Oltre ai numeri, puoi memorizzare testo arbitrario in variabili. Le variabili che memorizzano testo sono chiamate variabili stringa.

Quando scrivi del testo su una variabile, assicurati di racchiuderlo tra doppie (") o virgolette singole (").

//Scrivi la stringa "Ciao a tutti!" nella variabile ex var ex="Ciao a tutti!"; //Emette il valore della variabile ex nella pagina document.write(ex);

Visualizzazione rapida

Definizione di variabili con e senza var

In JavaScript è possibile definire variabili con o senza var.

//Crea una nuova variabile con var var ex=123; //Crea una nuova variabile senza var ex2=20;

Potresti pensare che dichiarare variabili con e senza var produrrà sempre lo stesso risultato, ma questo è vero solo quando la dichiarazione avviene in un contesto globale (cioè al di fuori di tutte le funzioni).

Se la dichiarazione avviene in un contesto locale (cioè nel corpo di una funzione), una dichiarazione con var crea una variabile locale (cioè una variabile che sarà disponibile solo nel corpo di questa funzione e verrà distrutta dopo la funzione viene eseguita), una dichiarazione senza var crea una variabile globale (ovvero una variabile che sarà disponibile per altre funzioni all'interno di un dato script).

Tieni presente che parleremo più approfonditamente delle variabili locali e globali più avanti in questo tutorial.

Informazioni sull'eliminazione e la ridefinizione delle variabili

Ridefinendo le variabili, non si cancella il valore in esse memorizzato.

Variabile ex=123; var ex; documento.write(ex); // Stampa 123

Se desideri eliminare una variabile in JavaScript e non è stata dichiarata con var, puoi utilizzare l'operatore delete.

Es=123; eliminare ex;

L'operatore delete non può eliminare le variabili dichiarate con var, quindi se una variabile è stata dichiarata con var, l'unico modo per eliminarla è assegnarla valore nullo o indefinito.

Variabile ex=123; ex=nullo; // o ex=non definito

Fallo da solo

Compito 1. Correggere gli errori nel codice seguente:

Compito 1

var33var=33; documento.write(33var); documento.write("
"); var str1=Ciao a tutti!; document.write(str1); document.write("
"); var vaR = 288; document.write(var); document.write("
");

Compito 2. Il file esterno secred1.js contiene le variabili sec1, sec2, sec3 e sec4, che contengono le lettere della parola in codice (non in ordine). Collega un file esterno e scopri la parola in codice visualizzando i valori delle variabili sulla pagina.

Nel processo di sviluppo del sito web, spesso è necessario passare qualche valore (variabile, array) a Javascript, in questi casi di solito consigliano qualcosa come

var variabile = alert(variabile);

Javascript scritto in linea provoca sentimenti contrastanti.

In primo luogo, questo non avviene quasi sempre secondo lo stile del codice.

In secondo luogo, è difficile eseguire il debug.

In terzo luogo, tale codice non viene memorizzato nella cache del browser.

Attenzione, caro lettore, l'esempio sopra è più che completamente sbagliato, cosa che ti avverto subito, ed è esattamente così che non dovresti farlo, ma puoi leggere come farlo correttamente, con attenzione e attenzione, di seguito.

Ma se tu, ad esempio, non sei una persona di alti principi morali, puoi tranquillamente copiarlo e farne quello che vuoi, non ti ho consigliato di farlo e, inoltre, ti ho addirittura dissuaso.

Sono convinto che JavaScript dovrebbe essere archiviato esclusivamente in file,
html al fine di garantire la normale memorizzazione nella cache da parte dei browser e rendere più semplice la ricerca di questo stesso script nel tuo progetto.

Ma come possiamo trasferire il valore da PHP e allo stesso tempo preservare un bel codice?

La risposta è usare eval() in Javascript.

Diamo un'occhiata ad un esempio con connessione mappe di google.

Per prima cosa colleghiamo Google Maps (biblioteca)

inizializziamo l'inizio del disegno delle mappe subito dopo aver caricato il DOM

Var $ = jQuery.noConflect(); $(document).ready(funzione () ( if ($("#map-canvas").lunghezza) ( funzione inizializza() ( var place = eval($("#map-canvas").attr("data -place")); var pos = new google.maps.LatLng(luogo, luogo); var mapOptions = ( center: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: ( style: google. maps.MapTypeControlStyle.DROPDOWN_MENU ), rotella di scorrimento: false, rotateControl: true ); var map = new google.maps.Map(document.getElementById("map-canvas"), map.setTilt(45); nuovo google.maps.Marker (( posizione: pos, mappa: mappa )); google.maps.event.addDomListener(finestra, "carica", inizializza));

Creiamo gli elementi html necessari

Una spiegazione di questa magia di strada

in js siamo interessati alla riga:

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

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

Ottiene l'attributo data-place dell'elemento con ID map-canvas dopo il quale eval() converte la stringa in codice js, più specificamente in un array perché ci sono le parentesi quadre.

Secondo le specifiche HTML5, i browser saltano gli attributi dei tag che iniziano con data: questo attributo non influirà sul rendering, ma il suo valore può essere utilizzato in javascript.

Il codice html può essere modificato: