In questa lezione impareremo a conoscere i metodi dell'oggetto finestra: alert() , prompt() e confirm() .
metodo alert()Il metodo alert() ha lo scopo di visualizzare una finestra di dialogo di avviso con il messaggio specificato e un pulsante OK sullo schermo dell'utente. Può essere utilizzato per trasmettere informazioni importanti all'utente.
window.alert(Parametro_1);
Il metodo alert() ha un parametro obbligatorio, che è il testo del messaggio visualizzato nella finestra di dialogo. Questo metodo non restituisce nulla come risultato della sua esecuzione.
Ad esempio, mostriamo una finestra di dialogo di avviso per un visitatore del sito quando fa clic su un collegamento: Vai al sito
var resultConfirm = confirm(Parameter_1);
Questo metodo ha un parametro: il testo del messaggio che verrà visualizzato nella finestra di dialogo.
Il metodo confirm() restituisce uno dei due valori come risultato (resultConfirm) della sua esecuzione:
Ad esempio, visualizziamo nell'elemento p con id="resultConfirm" il risultato del clic dell'utente sul pulsante "OK" nella finestra di dialogo:
var resultActionUser = confirm("Utente, fare clic su OK."); if (resultActionUser) ( document.getElementById("resultConfirm").innerHTML = "Utente, grazie per aver fatto clic su OK"; ) else ( document.getElementById("resultConfirm").innerHTML = "Utente, siamo delusi dalla tua risposta "; )
Il metodo prompt() è progettato per visualizzare una finestra di dialogo con un messaggio, un campo di testo per l'inserimento dei dati e i pulsanti "OK" e "Annulla" sullo schermo dell'utente. Ha lo scopo di richiedere dati all'utente.
var resultPrompt = prompt(Parametro_1, Parametro_2);
Questo metodo ha due parametri:
A seconda delle azioni dell'utente, il metodo prompt() può restituire i seguenti dati:
Nota: la finestra di dialogo che appare come risultato dell'esecuzione di uno dei metodi alert() , confirm() o prompt() è modale, cioè blocca l'accesso dell'utente all'applicazione padre (browser) finché l'utente non chiude la finestra di dialogo.
Ad esempio, chiederemo all'utente un nome e, a seconda del risultato, visualizzeremo il testo nell'elemento c id="nameUser" :
var nameUser = prompt("Vuoi il tuo nome?"); if (nameUser) ( document.getElementById("nameUser").innerHTML = nameUser +", benvenuto nel sito!"; ) else ( document.getElementById("nameUser").innerHTML = "Ospite, benvenuto nel sito!" ;)
Ad esempio, chiediamo all'utente di indovinare il numero 8:
function indovinaNumero() ( var trovaNumero = prompt ("Indovina un numero compreso tra 1 e 10?"); switch (trovaNumero) ( case "6": alert("Si sta facendo più caldo!"); break; case "7": alert ("Fa caldo!"); break; case "8": alert("Hai indovinato! Sono le 8."); break; case "9": alert("Si sta facendo più caldo!"); break; default: alert ("Fa freddo!"); break; ) ) ... Indovina il numero
In questo articolo esploreremo tre metodi interessanti, vale a dire i metodi alert() , confirm() e prompt() . Sono tutti progettati per l'interazione dell'utente.
Tutti e tre questi metodi appartengono all'oggetto finestra. E possono essere chiamati così: window.method_name(); Ma JavaScript ci consente di non specificare questo oggetto finestra, ma semplicemente di scrivere il nome del metodo.
Inizieremo con il metodo alert(). Questo metodo visualizza il messaggio specificato nella finestra del browser dell'utente. Questa casella verrà visualizzata in cima all'intera pagina e fino a quando l'utente non fa clic sul pulsante OK, non si chiuderà.
Per dimostrarlo, visualizziamo un messaggio usando il metodo alert().
var today_is = "lunedì"; alert("Oggi è " + oggi_è);
All'interno del metodo, possiamo specificare qualsiasi stringa, solo senza tag html. Non vengono elaborati qui, ma visualizzati così come sono.
Se la stringa che vogliamo specificare è molto lunga e vogliamo effettuare una transizione a una nuova riga, allora ecco il tag html
non funzionerà. Qui devi usare il carattere "\n".
Alert("Looooooooong \nStringgggggg");
Questo metodo viene spesso utilizzato per trovare errori nel codice.
Il processo di elaborazione del codice va dall'alto verso il basso, quindi per rilevare un errore, scriviamo semplicemente il metodo alert () nell'area prevista in cui si trova l'errore. E se alert() ha funzionato, non ci sono errori fino alla riga in cui è scritto.
Successivamente, devi spostarlo di una riga o più sotto. Salviamo le modifiche, aggiorniamo nuovamente la pagina nel browser e vediamo se alert () ha funzionato, quindi non ci sono errori prima della riga in cui si trova, altrimenti, se non ha funzionato, l'errore è nella riga sopra dove è adesso. In questo modo, puoi trovare un errore nel codice.
metodo confirm()Questo metodo viene utilizzato per confermare la risposta ad alcune domande. Ci sono solo due opzioni di risposta, sì (OK) o no (Annulla / Annulla). Se l'utente risponde sì, il metodo restituisce true, altrimenti restituisce false.
Ad esempio, visualizzeremo una finestra utilizzando il metodo confirm(), dove chiederemo all'utente "Sei sicuro di voler lasciare la pagina?". Se l'utente risponde di sì, allora attraverso il metodo alert() mostreremo un messaggio del genere "L'utente vuole lasciare la pagina", altrimenti mostreremo un altro messaggio "L'utente NON vuole lasciare la pagina".
Var user_answer = confirm("Sei sicuro di voler lasciare la pagina?"); if(user_answer) alert("L'utente vuole abbandonare la pagina"); else alert("L'utente NON vuole \nabbandonare la pagina");
Ecco come funziona il metodo confirm(). Può essere utilizzato in diverse occasioni. Ad esempio, prima di eliminare qualcosa dal sito, è consuetudine chiedere all'utente se è sicuro delle proprie azioni. Oppure, prima di inviare il modulo, puoi anche chiedere all'utente "Hai compilato tutto correttamente?" Se risponde di sì, allora il modulo verrà inviato, altrimenti non verrà inviato.
metodo prompt()E l'ultimo metodo che impareremo è il metodo prompt(). Questo metodo viene utilizzato meno frequentemente rispetto agli altri due metodi. Ti consente di ottenere alcune informazioni dall'utente, che inserirà nel campo di testo.
Di conseguenza, il metodo prompt() restituisce la stringa di input se l'utente ha fatto clic sul pulsante OK oppure null se l'utente ha fatto clic sul pulsante Annulla.
Come parametro, cioè tra parentesi questo metodo possiamo scrivere un prompt o una domanda per far sapere all'utente quali informazioni inserire.
Ad esempio, chiediamo all'utente di rispondere alla domanda "Come ti chiami?". Il nome inserito dall'utente verrà visualizzato sullo schermo utilizzando il metodo alert().
Varname = prompt("Come ti chiami?"); alert("Il tuo nome è " + nome);
Salva e apri la pagina nel browser.
Naturalmente, qualsiasi informazione può essere inserita nel campo di testo dal metodo prompt(). Questa informazione verrà restituita sotto forma di stringa, anche nel caso di numeri o altri caratteri speciali.
Ad esempio, chiediamo all'utente di inserire due numeri per poterli moltiplicare successivamente. Ci sarà una calcolatrice per moltiplicare i numeri.
Var x = prompt("Inserisci il primo numero:"); var y = prompt("Inserisci il secondo numero:"); //Converte i numeri immessi dal tipo stringa al tipo numerico x = Number(x); y = numero(y); documento.write(x + " * " + y + " = " + (x * y));
I numeri immessi sono stringhe, quindi per il risultato corretto della moltiplicazione, questi numeri devono essere passati attraverso la funzione Number(), che li converte dal tipo stringa ai numeri normali.
Bene, questo è tutto. Ora conosci altri tre metodi: alert(), confirm() e prompt() . Che puoi tranquillamente usare nella pratica.
Quindi, oggetti del browser. E prima di tutto - il più antico di loro, l'oggetto finestra.
Ecco i metodi principali dell'oggetto finestra (ce ne sono altri oltre a loro, ma servono a poco, e per non ingombrare il cervello con informazioni inutili, li rimanderò alla terza serie).
Metodo |
Descrizione |
Aprire e chiudere le finestre del browser; è possibile determinare la dimensione della finestra, il suo contenuto, nonché la presenza di una tastiera, di un campo indirizzo e di altri attributi. |
|
Aspetto di una finestra di dialogo di allarme con un messaggio corrispondente. |
|
Aspetto di una finestra di dialogo di conferma con i pulsanti "OK" e "Annulla". |
|
L'aspetto di una finestra di dialogo di richiesta con un campo di immissione testo. |
|
Imposta o rimuovi lo stato attivo per una finestra. |
|
Scorre il contenuto di una finestra fino a un punto specifico. |
|
Impostazione dell'intervallo di tempo tra una chiamata di funzione e la valutazione dell'espressione. |
|
Impostazione di un intervallo di tempo prima di una chiamata di funzione o di una valutazione di espressione. |
Sappiamo già che la finestra è spesso implicita ma non scritta.
Richiamo di varie finestre di dialogoLe finestre di dialogo vengono utilizzate nei programmi per interagire con l'utente.
metodo alert()
L'abbiamo analizzato all'inizio dei nostri studi. Crea una semplice finestra di dialogo con un messaggio e un pulsante OK. Tutta la sua interazione è limitata al fatto che l'utente, premendo questo singolo pulsante, può inviare questa finestra da qualche parte lontano (e grazie per questo).
metodo confirm()
Il metodo confirm() consente già all'utente di prendere la decisione "booleana" più semplice: dire "sì" o "no".
Ad esempio, fai clic su questo pulsante:
Scusa per il piccolo scherzo. Spero che tu sappia come usare il pulsante Indietro.
Come è tutto organizzato? Ovviamente hai visto che ho questo metodo combinato con gli avvisi. E questo viene fatto con l'aiuto di una funzione inserita in .
Il metodo restituisce due valori: true (se OK) e false (se annullato).
Se vero, lo inviamo alla pagina corrispondente (href property oggetto posizione) e genera il corrispondente alert() . Altrimenti (cioè false ) emettiamo semplicemente un altro alert() .
E nel pulsante chiamiamo la funzione nell'evento onClick:
E poi devi chiamare questa funzione dal gestore di eventi onSubmit del tag, ad esempio:
Qui, ad esempio, puoi scrivermi sulla "soap" tutto ciò che pensi delle mie lezioni. Se all'improvviso ti sei emozionato e hai premuto il pulsante, e poi in qualche modo è diventato imbarazzante, si aprirà una finestra di dialogo e ti riprenderai sobrio.
Se stai facendo pop-up, è buona norma avvisare l'utente e dargli la possibilità di aprire o meno la finestra. Per fare ciò, prima di caricare la finestra, è necessario rilasciare il "parlamentare" - la finestra di dialogo di conferma(). Qui la funzione viene chiamata da . Ne parleremo molto presto quando passeremo alla creazione di finestre con il metodo open().
metodo prompt()
Questo metodo richiede già all'utente dati specifici. Viene visualizzata una finestra di dialogo con un campo di immissione. Il metodo restituisce i dati che l'utente ha inserito in questo campo e consente al programma di lavorare con questi dati.
Il metodo prompt() ha due argomenti: una domanda (che appare sopra il campo di input) e una risposta (il testo nel campo di input):
Se vuoi che il campo di input appaia pulito, inserisci virgolette vuote come secondo argomento:
| richiesta(" testo della domanda","") |
Vediamolo in azione. Premi il pulsante, non aver paura.
Quindi, hai inserito (o non hai inserito) i dati e hai ricevuto una risposta dal computer basata su questi dati (o sulla loro mancanza).
Ecco una versione semplice di questa funzione:
La proprietà innerHTML, che permette di controllare il contenuto del tag, l'abbiamo incontrata nella Lezione 10, quando abbiamo programmato i titoli sotto le immagini.
Ed ecco il codice per il pulsante e il paragrafo vuoto per il saluto.
|
|
Ma se sei risultato essere il mio omonimo, hai visto che la funzione ha reagito anche a questo.
Come farlo nella versione "approssimativa", puoi già indovinare da solo. Devi controllare la variabile user_name non solo per le virgolette vuote, ma anche per " Andrea", e nidifica un altro se con il testo appropriato (puoi esercitarti da solo).
Ma se digiti " Andrea", "Andryusha", "Andryushka", "Andryukha", "Andreika", "Andrey Ivanovich", ecc., quindi il risultato sarà simile, anche se non ho esaminato esplicitamente tutti questi valori, ma sono riuscito a gestire solo cinque righe: " Andrè", "Andrea", "Andrea", "Andreiche" E " Andreich"(gli ultimi tre - per escludere Andreev, Andreichenko e Andreichuk dagli omonimi, pur mantenendo Andreichik negli omonimi).
Cioè, puoi indovinare che la funzione controlla la variabile user_name per i primi 5, 6 o 8 caratteri.
Ma di questo parleremo un po' più avanti, quando passeremo agli oggetti stringa e ai loro metodi. Voglio solo che tu immagini in anticipo i compiti che dobbiamo risolvere (in particolare, tutti i tipi di suddivisione delle stringhe in sottostringhe). Allora le decisioni stesse sembreranno più chiare. Ma se non puoi aspettare, puoi "copiare" la funzione dal codice e "tagliarla come una noce". Per i curiosi, ho scritto un commento lì.
Il metodo prompt() può essere utilizzato anche per inserire una password.
Questa non è la fine della lezione!
Facciamo un po' "gioco a fare la spia" per finire di leggere questo capitolo. Innanzitutto, prova a premere il pulsante e a digitare qualcosa.
Ah, questo è tutto! Ma guarda, c'è un altro pulsante! Dai...
Parola d'ordine:
Premi di nuovo il primo pulsante e inserisci la password corretta.
Tutto questo divertimento, forse, fa effetto, ma in realtà la password si trova premendo bottone giusto e guardandolo in codice. Alcuni potrebbero ingenuamente pensare che sia sufficiente inserire il codice in un file .js separato. Ma nel codice della pagina ci sarà un collegamento a questo file con l'indirizzo. E se lo componi barra degli indirizzi, si aprirà un file con codice JavaScript :)
È possibile crittografare la password in codice? Puoi, ma anche questo richiede la manipolazione delle stringhe insieme all'uso di alcuni metodi matematici. Quando arriveremo a tutto questo, studieremo anche lo script della password "reale". Ma la tecnica di interazione con l'utente sarà sempre la stessa: il metodo prompt(). (È possibile "crackare" una password crittografata? Ahimè, non c'è limite alla perfezione degli hacker ...)
Allo stesso modo in cui abbiamo "catturato" il nome o la sua assenza, cattureremo la password con la funzione.
Se inserisci una password errata o non inserisci nulla, la linea
document.getElementById("no").style.display = "blocco"
apre il blocco con il secondo pulsante
E se viene inserita la password corretta, l'azione viene trasferita alla stringa
document.getElementById("yes").style.display = "blocco" ,
che apre il blocco successivo
Fermati, cosa sono quei kryakozubry? Questo è un semplice cifrario, spiegherò presto.
Nel frattempo riporto il codice di questi blocchi (per chiarezza ometto la tabella con i frame, che ho racchiuso nell'ultimo blocco):
|
Ah, questo è tutto! Ma guarda, c'è un altro pulsante! Dai... Parola d'ordine: Premi di nuovo il primo pulsante e inserisci la password corretta. Ora leggiamo oltre. . . . . . . . . . . |
Quindi, sulla crittografia. Lei è molto infelice. Chiunque conosca le funzioni escape() e unescape() lo risolverà in men che non si dica.
La funzione escape("inserisci stringa qui") converte i caratteri nei loro valori esadecimali.
La funzione unescape("insert quark-aurochs here") fa l'opposto.
Per crittografare la password in questo modo, devi eseguirla tramite escape() a casa, copiare il risultato e incollarlo in unescape() . Ma questo, ripeto, non è grave.
Bene, per il set completo - la funzione per il secondo pulsante:
Per uscita standard finestre di dialogo JavaScript ha solo tre metodi che abbiamo imparato oggi. Sebbene questi metodi non accadano molto spesso, la capacità di usarli con sicurezza è estremamente utile. Sono semplici, ma allo stesso tempo rimandano, per così dire, alla programmazione “pura”. Sono molto bravi a riempirti la mano nella padronanza di un linguaggio di programmazione. E ti consiglio di sperimentarli in ogni modo possibile, anche se senza meta da un punto di vista pragmatico. Una buona programmazione è un gioco entusiasmante, come del resto qualsiasi creatività.
In JavaScript, ce ne sono tre operazioni di base, che consentono di ricevere dati dall'utente per un'ulteriore elaborazione negli script. Questi sono alert, prompt e conferma. A cosa servono, come usarli e altre sfumature saranno discusse più avanti in questo articolo.
mettere in guardiaViene utilizzato per visualizzare una finestra modale sullo schermo del browser (ciò significa che l'utente non può fare clic su nulla sulla pagina finché non chiude questa finestra. In questo esempio, finché non fa clic su "OK" nella finestra).
Dopo aver visualizzato il messaggio contenuto nell'avviso, l'esecuzione dello script viene sospesa e ripresa dopo la chiusura della finestra modale.
Se si compila il campo e si fa clic su OK, lo script restituirà le informazioni immesse dall'utente.
La sintassi di questo comando è leggermente più complicata del precedente, poiché consente di impostare il testo della richiesta dell'utente e il contenuto del campo di input, che verrà visualizzato per impostazione predefinita: result = prompt(title, default ) ; , Dove
var myTest = prompt("Qualsiasi informazione" , """);
Un piccolo esempio di utilizzo di prompt:
var year = prompt("In che anno ti sei laureato?" , 2008 ); alert("Sei laureato di " + anno + " dell'anno!" );
Generalmente dato comando viene utilizzato per raccogliere dati dagli utenti di cui lo script ha bisogno per continuare a lavorare ulteriormente.
ConfermareRappresenta anche finestra modale. Poiché non è difficile indovinare dal nome, di solito viene utilizzato per concordare qualcosa con l'utente.
Questo è ciò per cui è reso più nitido: per l'interazione, fornisce all'utente i pulsanti OK e CANCEL, che restituiscono valori booleani allo script VERO e false rispettivamente Valutazioni: 4 (media 4 su 5 )
L'organizzazione di un dialogo con un visitatore di una risorsa web può essere eseguita in vari modi, tra cui l'uso Funzioni javascript alert() è l'opzione più semplice e veloce. Questa opzione è particolarmente utile per scopi di test, ma su molte risorse viene utilizzata come funzionalità naturale.
La funzione JavaScript alert() consente di ottenere una risposta affermativa. In effetti, non è la risposta che è importante, ma il fatto stesso dell'output delle informazioni. Inoltre, la risorsa web cessa di funzionare fino a quando l'utente non risponde. La risposta all'avviso è sempre la stessa: questa è la risposta!
Per scopi di debug, JavaScript alert() è lo strumento perfetto per ottenere rapidamente informazioni aggiornate, prendere una decisione e andare avanti con il proprio lavoro. Ma ai fini del normale funzionamento del sito, presenta anche una discreta quantità di vantaggi.
Catturare l'attenzione del visitatore"Allarme" - come nella vita, forma un evento che non può essere ignorato. Ma questo evento può verificarsi o meno..
Uno sviluppatore raro è a conoscenza di questa circostanza e fa il debugging dolorosamente lungo del suo sito sul lato client. Allo stesso tempo, pochi sviluppatori non lo sanno: spesso è così difficile trovare un errore nel client, cioè nel browser, che:
E non c'è risultato. Né i debugger aiutano, né le parole, né gli strumenti di debug integrati in ogni browser. Nel frattempo, il baule si apre sempre e basta: la chiave giusta è importante.
Una semplice regola di codice correttoPrima di tutto, i cookie sono diventati il componente più richiesto di un sito web moderno. Non dovresti mai dimenticare:
I cookie sono una funzionalità interessante da ricordare nelle profondità del browser su ciascun client, ma non dovresti attribuire importanza a questo nella sessione corrente. La principale preoccupazione dei cookies è quella di rimanere nella "memoria" del browser nel contenuto che aveva nel momento in cui il visitatore è uscito.
Sotto tutti gli altri aspetti, il codice dello script nelle viscere del browser dipende solo da se stesso e dagli eventi che elabora.
In questo contesto, e questo contesto è l'ideale qui, il codice non può non funzionare se è scritto correttamente. Questa è la regola ideale per un codice corretto. Se il browser mostra una schermata vuota o fa qualcosa di sbagliato, c'è motivo di presumere che ci sia un errore.
Più facile da applicare:
Il miglior debugger o debugger è un evento che deve accadere ma non succede.
Spostando questa costruzione da zero a un fastidioso crimine nel codice, puoi trovare il punto dopo il quale non funziona. L'errore verrà trovato. JavaScript alert() è finestra modale. Non può essere aggirato in alcun modo e non accadrà nulla fino a quando lo sviluppatore/visitatore non chiuderà questa finestra.
Se la finestra non si apre, o è indicata nel codice in modo errato o tutto ciò che viene prima contiene un errore.
Situazione difficile in cui l'avviso JavaScript non sembra funzionareCiò riguarda principalmente gli algoritmi AJAX per lo scambio di informazioni con il server. Non è sempre possibile utilizzare qui i classici strumenti di debug e quando un sistema di oggetti a più livelli opera sul lato client, il debug si trasforma generalmente nella mente dello sviluppatore e nessun debugger può aiutare.
L'opzione migliore per un avviso nella procedura di comunicazione con il server è un div (div), in cui è inserito il protocollo per comunicare con il server utilizzando il metodo innerHTML: sarà sempre chiaro in quale fase si verifica il problema.
Il div statico che è sempre visibile sulla pagina non è un modale di avviso JavaScript. La finestra potrebbe non apparire e potrebbero esserci molte ragioni per questo e sono sintatticamente corrette. La lingua del browser ha una disposizione estremamente calma e non intraprenderà mai alcuna azione se non ha analizzato e capito qualcosa.
La staticità di qualsiasi Etichetta HTML - buon fattore. Rimuovere tutto il codice e aggiungerlo in porzioni fino alla ricomparsa dell'errore non è la tecnologia più veloce per eseguire il debug. Scrivere correttamente è un consiglio popolare, richiesto, ma non pratico.
Il linguaggio del browser è guidato dagli eventi, la sua preoccupazione principale non è il codice sequenziale, ma l'esecuzione di funzionalità assegnate ai tag della pagina e alla gestione degli eventi.
Regola aggiuntiva a una regola sempliceSe la finestra da JavaScript alert("Finora tutto è scritto correttamente") non è apparsa nel browser, significa che la sintassi fino al punto in cui è scritta questa costruzione non solleva dubbi nel browser e viene eseguita correttamente.
La logica dello stile di scrittura moderno ha un difetto significativo. Tutti i file di pagina vengono uniti insieme (con la loro essenza e tipi) in un tutt'uno, dopodiché viene creato il DOM. L'ordine in cui i file sono collegati è spesso significativo.
È meglio quando lo sviluppatore non attribuisce importanza al principio dell'evento di organizzare l'esecuzione delle funzioni assegnate agli eventi, ma organizza tutte le funzioni nella sequenza della loro applicazione e assegnazione ai tag e agli eventi della pagina.
L'ordine è sempre la cosa più importante. JavaScript capirà il resto da solo: cosa e quando chiamare. La programmazione moderna in generale e nel contesto di qualsiasi metodo, in particolare qualsiasi approccio orientato agli oggetti altamente organizzato, è sempre coerente. sono sempre combinati in sequenza come sono descritti.
Se qualcosa non accade, significa: non da qualche parte qualcosa non va, ma solo davanti a questo posto.
