Når du bruker bryteren Statement til Program HTML med JavaScript - dummies

Selv om if-setningen ofte brukes til enkle valg i JavaScript, brukes bryteretningen til å håndtere en rekke valg. En bryter gir en elegant måte å håndtere variabel data på. Det er to former for bryteretning.

Den første gir midler til å jobbe med et forhåndsdefinert utvalg av valg, og det andre gir midler for å jobbe med data som kan inneholde uventet informasjon. Denne andre form gjør bryteroppstillingen spesielt nyttig fordi brukere er uforutsigbare, og denne andre form kan ta hensyn til slike brukere.

Slik oppretter du en grunnleggende bryter i JavaScript

Mange utviklere foretrekker bytteopplysninger over nestede om setninger fordi bryteretningene er enklere å forstå. En svarserklæring krever også mindre typing for å oppnå det samme resultatet.

funksjon CheckChoice (tilleggsutstyr) {// Kontroller at inngangen er et tall. hvis (typeof (alternativ)! = "nummer") {// Vis en feildialog. varsling ("Vennligst oppgi numerisk inngang!"); // Tilbake uten å gjøre noe mer. return;} // Sørg for at alternativet egentlig er et heltall. Var Velg = Matematikk. runde (opsjon); // Kontroller at inngangen er innenfor rekkevidde. hvis ((velg 3)) {// Vis en feildialog. varsling ("Den oppgitte verdien er utenfor rekkevidde!"); // Tilbake uten å gjøre noe mer. returnere;} // Lag et valg. bytt (velg) {sak 1: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element A."; gå i stykker; sak 2: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element B."; gå i stykker; sak 3: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element C."; pause;}}

Enten du bruker en bryteretning eller nestet hvis setning, må du gi logikk for å sikre at inngangen er riktig, ellers vil søknaden din mest sannsynlig mislykkes. I dette tilfellet svarer feilen til applikasjonen i det hele tatt, men begrepet feil er det samme. Kontroller alltid dine innganger for riktige verdier.

Noen mennesker har det vanskelig å forstå hvor sannhetsverdien ligger i bryteretningen. Bryteroppstillingen krever en variabel, som er Velg i dette tilfellet. Hver enkelt sakklausul utfører en sammenligning mot variabelen. Følgelig kan du se den første sakklausulen som sagt, sak Velg == 1.

Når du arbeider med bryterklæringer, må du også inkludere en pauseoppgave på slutten av hvert behandlingssegment. Pauseerklæringen sier bare at saken er evaluert og håndtert.

Hvis du forlater break statementet, fortsetter koden med neste kjørbare setning i det neste tilfellet.Denne tilstanden er kjent som gjennomgående, , og noen utviklere bruker den som en programmeringsteknikk for å kombinere oppgaver og redusere mengden kode som kreves. Bruke denne teknikken er farlig fordi andre utviklere kanskje ikke skjønner at nedgangen er nødvendig og derfor kan legge til en pauseoppgave for deg.

Slik bruker du JavaScripts standardvalg

Bryteroppstillingen inneholder et annet punkt, standardklausulen. Standardklausulen er som ellers klausulen for if-setningen. Når ingen av saksbestemmelsene er sanne, utfører koden koden i standardklausulen. Følgende eksempel bruker standardklausulen til å endre måten som eksemplet fungerer på.

funksjon MakeAChoice () {// Be brukeren å gi innspill. var Selection = prompt ("Skriv inn et menyalternativ."); // Konverter strengen til et nummer. var IntSelect = parseInt (utvalg); // Bekreft at brukeren har oppgitt et nummer. hvis (isNaN (IntSelect)) {// Vis en feildialog. varsling ("Vennligst oppgi numerisk inngang!"); // Tilbake uten å gjøre noe mer. returnere;} // Ring valgfunksjonen. CheckChoice (IntSelect);}

I stedet for å gi utallige knapper, er dette eksemplet avhengig av dialogboksen () () for å få innspill fra brukeren. Resultatet er renere grensesnitt. Når brukeren klikker på Velg et menyelement, viser programmet et spørsmålstegn (), der brukeren kan skrive inn en verdi.

Du kan tro at dette er en oppskrift på katastrofe, men søknaden utfører de samme kontrollene for inngangs validitet som før, men det bruker en annen teknikk.

I dette tilfellet bruker programmet partInt () for å verifisere at inngangen er et tall og å konvertere nummeret til et heltall. Når inngangen er feil, er IntSelect satt til Ikke et nummer (NaN). Eksemplet oppdager dette problemet ved å bruke funksjonen isNaN (). Når en bruker oppgir en numerisk inngang, kaller programmet CheckChoice (), som vises i følgende kode:

funksjon CheckChoice (valg) {// Lag et valg. bytte (alternativ) {sak 1: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element A."; gå i stykker; sak 2: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element B."; gå i stykker; sak 3: dokument. getElementById ("Resultat"). innerHTML = "Du valgte element C."; gå i stykker; standard: // Vis en feildialog. varsling ("Den oppgitte verdien er utenfor rekkevidde!"); pause;}}

Du lurer kanskje på hvor resten av koden er, men dette er alt du trenger. Bryteroppstillingen kontrollerer verdiene 1, 2 eller 3. Når verdiene ligger utenfor dette området, bruker koden standardklausulen, som inneholder feilmeldingen utenfor feilområdet. Som du kan se, gjør disse to funksjonene arbeidsoppgaver med menyen mye enklere for både utvikler og bruker.