Middels nivå Javascript Tutorial
Javascript, gang en enkel skriptspråk for å legge minimal interaksjon til websider, har blitt et fullverdig språk i seg selv, og har ballong inn i en omfattende tema som berører nesten alle aspekter av webutvikling. For utbygger som har mestret det grunnleggende Javascript, Document Object Model, eller DOM, og validering med regulære uttrykk gjøre gode studieretninger.
Bruksanvisning
Samhandle med DOM
1 Lag en webside ved hjelp av koden:
<Html>
<Head>
<Script type = \ "text / javascript \">
fungere domExample ()
{
var x = document.getElementById (\ "textToChange \")
GÅ
x.innerHTML = \ "Knappen har blitt klikket \"
}
</ Script>
</ Head>
<Body>
<Div id = \ "textToChange \"> Knappen nedenfor ikke har blitt klikket </ div>
<Input type = \ "-knappen \" onclick = \ "domExample () \" width = \ "100 \" height = \ "50 \" value = \ "Klikk denne \" />
</ Body>
</ Html>
Lagre siden som \ "dom.html. \"
2 Bla til filen \ "dom.html \" fra nettleseren. Klikk på \ "Klikk Denne \" knappen. Klikket Arrangementet vil fyre av en Javascript-funksjon som endrer innholdet i teksten over knappen.
3 Utforsk Javascript-kode fra prøven. Den bruker document.getElementById funksjon kombinert med innerhtml eiendommen. Den getElementById metoden søker DOM for elementer som har en bestemt id som et attributt. Innerhtml Eiendommen holder html finnes kodene av et element. Ved å få et element med id og endre innerhtml verdien av dette elementet, kan du endre innholdet som vises på siden.
Validere med regulære uttrykk
4 Lag en webside som inneholder følgende kode:
<Html>
<Head>
<Script>
fungere validateOnA ()
{
Var regExpression = / a /
Var testString = \ "eple \"
if (testString.search (regExpression) == -1)
{
alert (\ "streng inneholder 'a' \")
} else
{
alert (\ "streng inneholder en 'a' \")
}
}
</ Script>
<Body onload = \ "validateOnA () \">
Regular Expression Test
</ Body>
Lagre siden som \ "regEx.html. \"
5 Bla til \ "regEx.html \" fra nettleseren. Når du laster siden, vil den validateOnA funksjon teste variabelen testString for å se om det inneholder bokstaven \ "en. \"
6 Se over Javascript. Den bruker en enkel vanlig uttrykk som er omgitt av den \ "/ \" karakter og slett kamper på noen tegn du leverer den.
7 Endre verdien for testString til \ "frukt \" og oppdater siden for å se hva som skjer.
8 Bruk rømt tegn i regulære uttrykk. Rømt tegn innledes med en omvendt skråstrek (\ "\\") og tillater deg å matche på kategorier av tegn. For eksempel \ d passer på alle tallene i en gitt streng. Opprett en side som inneholder følgende kode:
<Html>
<Head>
<Script>
funksjons validateDigits ()
{
Var regExpressionDigits = / \ d /
testString = \ "A123 \"
if (testString.search (regExpressionDigits)! = -1)
{
alert (\ "string inneholder sifre \")
}
ellers
{
alert (\ "string inneholder ingen tall \")
}
}
</ Script>
<Body onload = \ "validateDigits () \">
Regular Expression Test
</ Body>
Lagre siden som \ "regExpEscape.html \"
9 Bla til \ "regExpEscape.html \" fra nettleseren. Koden vil teste strengen \ "123 \" for å se om den inneholder sifre.
10 Endre verdien for testString til \ "apple \" og se hva som skjer. Prøv å endre testString til \ "apple1. \"
11 Prøv en virkelig verden eksempel. Regulære uttrykk er svært kraftige og et enkelt uttrykk kan inneholde en god del streng som passer informasjon. Det vanlige uttrykket nedenfor validerer telefonnumre som er sju eller 10 sifre og bruke parenteser, bindestrek eller mellomrom som skilletegn. Det gjør at selv utvidelser.
^(?:(?:\+?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\.?|extension)\s (\d+))?$