10 Vanlige JavaScript-feil og hvordan du unngår dem - dummies

Selv de beste JavaScript-programmørene gjør feil. Noen ganger forårsaker disse feilene at programmet ikke produserer resultatene du ønsket, og noen ganger fører de til at programmet ikke løper i det hele tatt. Her er ti vanlige feil som JavaScript-programmerere på alle nivåer ofte gjør.

Likestillingsforvirring

Har x lik y ? Er x sant? Spørsmålene om likestilling er sentrale for JavaScript og kan virke ganske forvirrende. De dreier seg om tre områder i JavaScript: nemlig betingede setninger og operatører (hvis, &&, og så videre), likestillingsoperatøren (==) og den strenge likestillingsoperatøren (===).

For å komplisere kodingen enda mer, ser oppdragsoperatøren (=) ut som hva folk flest kaller et like tegn på. Ikke la deg lure!

Unngå misbruk av oppdrag

Oppdragsoperatøren tilordner operand til høyre til operand til venstre. For eksempel:

var a = 3;

Denne setningen gir den nye variabelen, kalt a, verdien av 3.

En operand er noe i et program. Tenk på det som ligner et substantiv i-språk, mens operatører (+, -, *, / og så videre) er som verb.

Oppdragsoperatører kan også ha uttrykk på høyre side, som evalueres og tilordnes til variabelen til venstre.

En vanlig feil som nybegynnere til språket gjør, er å feile oppgaven til sammenligning - for eksempel:

hvis (a = 4) {…}

Denne koden vil ikke løpe som forventet hvis det du forventet er å sammenligne verdien av a til nummer 4.

Dodging de samme fallgruvene

Likestillingsoperatøren (==) og sin onde tvilling, ikke likeverdige operatør (! =), Kan være ganske fleksibel, men også ganske farlig. Bruk det så lite som mulig, hvis i det hele tatt. Her er hvorfor:

0 == '0'

Alle som har brukt tidsprogrammering vet at et nummer inne i anførselstegn egentlig ikke er et tall. Men == operatøren vurderer at de er de samme, fordi det vil gjøre de to verdiene av samme type før de sammenlignes. Dette kan føre til alle slags problemer som er vanskelig å spore opp.

Hvis du vil sammenligne en streng med et tall og få et resultat av ekte hvis de ser det samme, er det mye sikrere å gjøre dette eksplisitt som følger:

parseInt (0) = == parseInt ("0")

Denne setningen evaluerer også til sann, men det er ingen voodoo magi involvert. Strenge likeverdige (===) og de strenge ikke likeverdige (! ==) vil gjøre akkurat det du forventer.

0 === '0'

De to operandene er tydelig forskjellige typer, og resultatet er feil.

Avstemmede parenteser

Når et program blir mer komplisert, og spesielt når du jobber med JavaScript-objekter, begynner brakettene å hoppe opp. Her er et JavaScript-objekt med feilparameter:

{"status": "OK", "resultater": [{"id": 12, "tittel": "Koding JavaScript For Dummies", "Forfatter": "Chris Minnick og "Eva", "publication_date": "", "summary_short": "", "link": {"type": "review", "url": "", "link_text": "Les New York Times Review 

av koding av JavaScript for dummies "}," utmerkelser ": [{" type ":" Nobelprisen "," url ":" ",}]}

Kan du se problemene her? Når dette skjer, kan en god kodeditor være uvurderlig! Sublime Text har en funksjon som vil vise deg en parentes samsvarer når du plasserer markøren ved siden av enten en start eller slutt brakett.

Utheving matchende braketter i Sublime Text.

Avvikende anførselstegn

JavaScript lar deg bruke enten enkle anførselstegn eller dobbelte anførselstegn for å definere strenger. Men JavaScript er ikke i det hele tatt fleksibelt med regelen om at du må avslutte din streng med samme type sitat du startet med. Også, se etter sitater og apostrofer i strenger som er de samme tegnene som sitatene som omgir strengen! For eksempel:

var movieName = "Popeye '; // feil! var welcomeMessage = 'Takk,' + firstName + ', la oss lære JavaScript! '// feil!

Manglende parenteser

Denne feilen oppstår ofte i betingede setninger, spesielt de der det er flere forhold. Vurder dette eksempelet:

hvis (x> y) && (y <1000) {…}

Det du vil gjøre her, er å kontrollere at begge forholdene er sanne. Men det er faktisk tre forhold på jobben her, og de trenger alle parenteser. Det som mangler i foregående eksempel er parentesene rundt den store && tilstanden, som sier at begge de andre forholdene må være sanne for å kunne fortsette med koden mellom parentesene.

For å være riktig, bør denne setningen lese som følger:

hvis ((x> y) && (y <1000)) {…}

Manglende semikolon

JavaScript-setninger bør alltid ende med et semikolon. Men hvis du setter hver setning på egen linje og legger av semikolonene, vil koden fortsatt løpe som om semikolonene er der. Selv om koden fortsatt kjører, kan det føre til problemer når du omarrangerer koden eller når to setninger ender opp på samme linje.

Den beste måten å unngå denne feilen er å alltid bruke et halvt kolon på slutten av en uttalelse.

Kapitaliseringsfeil

JavaScript er bokstavsfølsomt. Dette betyr at variablene du lager, må kapitaliseres nøyaktig det samme hver gang du bruker dem. Det betyr også at funksjoner må kapitaliseres riktig for å kunne fungere.

Et av de vanligste stedene for å se denne feilen, skjer med GetElementByld-metoden i dokumentobjektet.Du tror at det ville bli stavet getElementBylD fordi det ville gjøre mer grammatisk forstand, men det er ikke riktig!

Henvisningskode før den er lastet

JavaScript-kode laster vanligvis og kjører i den rekkefølgen den vises i et dokument. Dette kan skape problemer hvis du refererer til HTML som er plassert senere i dokumentet fra et skript som ligger i dokumentets hode.

Henvisning til HTML før den lastes opp resulterer i en feil.

dokumentet. getElementById (“myDiv”). innerHTML = "Denne div er min div"; Denne div er din div.

Denne koden vil resultere i en feil, fordi når JavaScript kjøres, vet nettleseren ennå ikke om diven med id = "myDiv" som kommer senere på nettsiden.

For å unngå dette problemet har du et par alternativer:

• Plasser JavaScript på bunnen av HTML-filen din, rett før

• Sett JavaScript-koden inn i en funksjon. Deretter kan du ringe funksjonen ved hjelp av et onload-hendelsesattributt i startkroppen.

Problemet ble løst her ved hjelp av den andre metoden.

Vent til HTML-filen er lastet før du kjører skriptet.

funksjonsnavnMyDiv () {dokument. getElementById (“myDiv”). innerHTML = "Denne div er min div";} Denne div er din div

Dårlige variabelnavn

En spesielt vanskelig å spore regelen er forbudet mot å bruke reserverte ord som variable navn.

Interessant, JavaScript har over 60 reserverte ord og mange andre som du bare ikke bør bruke som variable navn. I stedet for å huske alle de reserverte ordene, er den beste måten å unngå disse typer navngivningsfeil, bare å komme opp med et mer beskrivende navngivningssystem som svært lite sannsynlig vil krysse stier med et reservert ord.

For eksempel er ordetavnet et av JavaScript-reserverte ord. Hvis du blir vant til å være spesifikk med det du navngir, vil du navngi variabler for lagring av ting, for eksempel fornavn, etternavn, hundenavn og navnOfTheWind; dermed helt unngår konflikter med reserverte ord.

Omfangsfeil

JavaScript har funksjonsomfang og globalt omfang. Hvis du erklærer en variabel uten å bruke var nøkkelordet, vil variabelen ha et globalt omfang, og det kan brukes hvor som helst i programmet. Resultatene kan være skadelige for programmet ditt. For å unngå omfangs feil må du alltid bruke var-søkeordet for å opprette nye variabler.

Manglende parametere i funksjonsanrop

Når du oppretter en funksjon, erklærer du antall parametere som skal sendes til den funksjonen når den kalles. Å ringe feil antall funksjoner vil ikke alltid resultere i en feil i JavaScript, men det kan gi uventede resultater hvis koden i funksjonen krever parametere som ikke er tilstede.

Pass på å gi parametrene beskrivende navn når du lager en funksjon og dobbeltsjekker hver gang en funksjon kalles for å sikre at riktig antall parametere er bestått.

Tellefeil: Å glemme at JavaScript teller fra 0

Hvis du teller til 10 i et JavaScript-array, har du faktisk 11 elementer. Glem aldri at det første elementet i en matrise har en indeks på 0.

Å glemme at JavaScript-teller fra 0 kan føre til uventede resultater.

var myArray = new Array (); myArray [10] = "Liste over 10 vanlige feil"; myArray. lengde; // produserer 11!