October 1
JavaScript è un linguaggio di scripting lato client che può essere utilizzato dagli sviluppatori Web per eseguire una serie di operazioni di interfaccia utente dinamica. manipolazioni interfaccia utente può variare da risposte semplici (come scatole di allarme) a complesse interazioni. Ad esempio, molte pagine web hanno campi di testo di input o in cui gli utenti digitano informazioni. Utilizzando JavaScript, gli sviluppatori web possono manipolare il testo alla posizione del cursore, codifica tasti che inseriscono stringhe di caratteri (ad esempio un indirizzo e-mail), evidenziare il testo o copiare il testo da utilizzare in altre parti del programma.
1 Aprire un editor di testo e creare un nuovo file chiamato cursorInsert.html. Aggiungere alcuni tag HTML per il file che compongono una pagina Web di base. Questi tag sono <html>, <head>, </ head>, <body>, </ body> e </ html>.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Aggiungere un tag <script> aperta e una stretta </ script> tag <head> della cursorInsert.html. Assegnare il tag <script> l'attributo di tipo text / javascript. Questo attributo indica che qualsiasi testo inserito tra l'apertura e <script> tag di chiusura è il codice JavaScript.
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Creare una funzione denominata insertAtCursor tra i tag <SCRIPT> di apertura e chiusura. La funzione insertAtCursor prende due argomenti di valore variabile: textArea e il testo. La variabile textArea dice funzione l'insertAtCursor l'identità del campo di testo che verrà manipolato, e la variabile di testo è il carattere che verrà posizionato il cursore all'interno textArea. Utilizzare una parentesi graffa aperta ({) e una stretta parentesi graffa (}) per tenere il posto per il codice della funzione.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Aggiungere un if ... else if condizionale tra parentesi graffe di apertura e chiusura della funzione insertAtCursor. La condizione che il codice corrispondente è valido uso del metodo setSelectionRange riferimento al campo textArea. Aggiungere un aperto e una stretta parentesi graffa dopo l'if ... else if per indicare il codice da eseguire se la condizione è vera.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
if (textArea.setSelectionRange) {}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Aggiungere codice tra parentesi graffe di apertura e chiusura della istruzione condizionale che inserisce il testo memorizzato nella variabile di testo alla posizione del cursore posto in textArea. Utilizzare un comando stringa JavaScript () per creare la stringa da utilizzare per aggiornare il testo. Questa stringa utilizza la prima parte della stringa (fino al cursore), aggiunge il valore memorizzato nella variabile di testo, aggiunge alcun valore tra le posizioni iniziale e finale del cursore e aggiunge tutti i valori memorizzati dopo il cursore.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + testo + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
6 Aggiungere il codice condizionale altro se dopo la se ... altrimenti se vicino parentesi graffa di istruzione condizionale. La condizione che il codice corrisponde è l'esistenza del document.selection e oggetti document.selection.createRange. Aggiungere un aperto e una stretta parentesi graffa dopo l'else if per indicare dove il codice condizionale dovrebbe essere posto. Questo codice fornisce il supporto per tutti i browser che non capiscono il metodo setSelectionRange.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + testo + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
7 Aggiungere codice tra l'altro, se le parentesi graffe di apertura e chiusura di istruzione condizionale. I set di codici concentrano al campo di testo textArea, utilizza l'oggetto document.selection.createRange () per recuperare il testo nel campo textArea e imposta il campo di testo per il valore di testo aggiunto al valore Range.Text.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + testo + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
textArea.focus ();
gamma var = document.selection.createRange ();
Range.Text = text + Range.Text;
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
8 Aggiungere un HTML tag <form> tra i tag <body> di apertura e chiusura. Inoltre, aggiungere un tag <input> con i seguenti attributi: type = "button", value = "Clicca qui" e un onClick () evento insertAtCursor (this.form.textArea, 'ciao'). Aggiungere un tag <textarea> con i seguenti attributi: rows = "7", cols = "30" e il nome = "textArea". Chiudere il tag <textarea> e il tag <form>.
<Html>
<Head>
<Script type = "text / javascript">
Funzione insertAtCursor (textArea, testo) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + testo + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
textArea.focus ();
gamma var = document.selection.createRange ();
Range.Text = text + Range.Text;
}
}
</ Script>
</ Head>
<Body>
<Form>
<Input type = valore "pulsante" = "Clicca qui" onclick = "insertAtCursor (this.form.textArea, 'ciao')">
<Textarea righe = "7" cols = "30" name = "textArea"> </ textarea>
</ Form>
</ Body>
</ Html>
9 Aprire cursorInsert.html in un browser Web. Fare clic sul pulsante "clicca qui" per inserire il testo "ciao" nella posizione del cursore. Aggiungere del testo al campo di input e verificare che facendo clic sul pulsante "clicca qui" inserisce il testo in corrispondenza del cursore.