JavaScript, una volta un semplice linguaggio di script per l'aggiunta di un'interazione minima a pagine Web, è diventata una vera e propria lingua a sé stante ed è gonfiato in un soggetto di ampio respiro che tocca quasi ogni aspetto dello sviluppo Web. Per lo sviluppatore che ha imparato le nozioni di base di JavaScript, il document object model, o DOM e convalida con le espressioni regolari rendono eccellenti aree di studio.

Istruzioni

Interagire con il DOM

1

Creare una pagina Web utilizzando il codice:

< html >
< head >
< script tipo = \ "testo/javascript\" >
funzione domExample()
{
var x = document.getElementById(\"textToChange\")
VAI
x.innerHTML = \"The è stato clicked\ pulsante"
}
< / script >
< / head >
< corpo >
< div id = \ "textToChange\" > il pulsante qui sotto non è stato fatto clic < / div >
< tipo input = \ "button" onclick = \ "domExample () \" larghezza = \ "100 \" altezza = \ "50" valore = \ "Fare clic su This\" / >
< / body >
< / html >

Salvare la pagina come \"dom.html.\"

2

Individuare il file \"dom.html\" dal tuo browser Web. Scegliere il \"Click This\" pulsante. L'evento click verrà generato fuori una funzione JavaScript che altera il contenuto del testo sopra il pulsante.

3

Esplorare il codice JavaScript dal campione. Utilizza la funzione document. getElementById combinata con la proprietà innerHTML. Il metodo getElementById ricerche DOM per gli elementi che hanno un particolare id come attributo. La proprietà innerHTML detiene il html contenute all'interno dei tag di un elemento. Ottenere un elemento con il relativo id e modificando il valore di innerHTML dell'elemento, è possibile modificare il contenuto visualizzato nella pagina.

Convalidare con espressioni regolari

4

Creare una pagina Web che contiene il codice riportato di seguito:

< html >
< head >
< script >
funzione validateOnA()
{
var regExpression = /a/
var testString = \"apple\"
if(testString.search(regExpression) = = -1)
{
avviso (non contiene \"string 'a' \")
} else
{
avviso (\"string contiene una 'a' \")
}
}
< / script >
< onload del corpo = \ "validateOnA \ ()" >
Test dell'espressione regolare
< / body >

Salvare la pagina come \"regEx.html.\"

5

Sfoglia per \"regEx.html\" dal tuo browser Web. Quando si carica la pagina, la funzione di validateOnA metterà alla prova la variabile testString per vedere se esso comprende la lettera \"a.\"

6

Guardare oltre il JavaScript. Utilizza una semplice espressione regolare che è circondata dal \ "/ \" carattere e semplicemente partite su tutti i caratteri è fornire.

7

Modificare il valore di testString in \"fruit\" e ricaricare la pagina per vedere cosa succede.

8

Utilizzare caratteri di escape nelle espressioni regolari. Caratteri di escape sono preceduti da una barra rovesciata (\ "\ \") e consentono di abbinare sulle categorie di caratteri. Per esempio \d corrisponde su tutte le cifre in un oggetto string specificato. Creare una pagina contenente il seguente codice:

< html >
< head >
< script >
funzione validateDigits()
{
var regExpressionDigits = /\d/
testString = \"a123\"
if(testString.search(regExpressionDigits)! = -1)
{
avviso (\"string contiene digits\")
}
altro
{
avviso (\"string non contiene nessun digits\")
}

}
< / script >
< onload del corpo = \ "validateDigits \ ()" >
Test dell'espressione regolare
< / body >

Salvare la pagina come \"regExpEscape.html\"

9

Sfoglia per \"regExpEscape.html\" dal tuo browser Web. Il codice metterà alla prova la stringa \"123\" per vedere se contiene cifre.

10

Modificare il valore di testString in \"apple\" e vedere cosa succede. Provare a modificare testString \"apple1.\"

11

Prova un esempio reale. Le espressioni regolari sono molto potenti e un'unica espressione può contenere una grande quantità di stringa informazioni corrispondenti. L'espressione regolare seguente convalida i numeri di telefono che sono sette o 10 cifre lunghe e utilizzano le parentesi, trattini o spazi come delimitatori. Esso consente anche di estensioni.

^(?:(?:\ +?1\s(?:[.-]\s)?)? (?:\ (\s([2-9] 1 [02-9] | [ 2-9] [02-8] 1 | [2-9] [02-8] [02-9]) \s\)| ([2-9] 1 [02-9] | [2-9] [02-8] 1 | [2-9] [02-8] [02-9])) \s(?:[.-]\s)?)? ([2-9] 1 [02-9] | [2-9] [02-9] 1 | [2-9] [02-9] {2}) \s(?:[.-]\s)? ([0-9] {4}) (?:\ s(?:#|x\.?| ext\.? | \s estensione)(\d+))?$