JavaScript-virheet Kokeile Catch Throwia

Sisällysluettelo

    Näytä sisällysluettelo

heittää ja kokeile...saappaa...vihdoin

try-käsky määrittää suoritettavan (yritettävän) koodilohkon.

catch-käsky määrittää koodilohkon, joka käsittelee virheitä.

lopulta-käsky määrittää koodilohkon, joka suoritetaan tuloksesta riippumatta.

throw-lause määrittää mukautetun virheen.

Virheitä tapahtuu!

JavaScript-koodia suoritettaessa voi tapahtua erilaisia virheitä esiintyä.

Virheet voivat olla ohjelmoijan tekemiä koodausvirheitä tai virheistä johtuvia virheitä syötteitä ja muita odottamattomia asioita.

Esimerkki

Tässä esimerkissä kirjoitimme väärin sanan "varoitus" muodossa "adddlert" tuottaaksemme tarkoituksella virheen:

<p id="demo"></p>
<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  
document.getElementById("demo").innerHTML = err.message;
}
</script>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>How to use <b>catch</b> to display an error.</p>

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript havaitsee adddlertin virheeksi ja suorittaa sen saaliskoodi käsittele sitä.

try ... catch

try-käskyn avulla voit määrittää koodilohkon testataan virheiden varalta, kun sitä suoritetaan.

catch-käskyn avulla voit määrittää koodilohkon suoritetaan, jos try-lohkossa tapahtuu virhe.

JavaScript-lauseet yrittää ja saattaa tule pareittain:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

JavaScript heittää virheitä

Kun virhe tapahtuu, JavaScript tekee sen normaalisti pysähtyy ja tuottaa virheilmoituksen.

Tekninen termi tälle on: JavaScript heittää an poikkeus (heita virhe).

JavaScript luo itse asiassa Virheobjektin, jossa on kaksi ominaisuutta: nimi ja viesti.

heitto-lausunto

throw-käskyn avulla voit luoda mukautetun virheen.

Teknisesti voit heittää poikkeuksen (heittää virheen).

Poikkeus voi olla JavaScript merkkijono, numero, Boolean tai objekti:

throw "Too big";    // throw a text
throw 500;          // throw a number

Jos käytät heittä- ja kokeile- ja saappaa, voit hallita ohjelmaa virtaa ja luoda mukautettuja virheilmoituksia.

Esimerkki syötteen vahvistamisesta

Tämä esimerkki tarkastelee syötettä. Jos arvo on väärä, poikkeus (err) heitetään.

Catch-lause havaitsee poikkeuksen (err), ja näyttöön tulee mukautettu virheviesti:

<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" 
onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    if(x.trim() == "") throw "empty";
      
 if(isNaN(x)) throw "not a number";
    
 x = Number(x);
    if(x < 5) throw 
 "too low";
    if(x > 10) throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>
</body>
</html>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5)  throw "too low";
    if(x > 10)   throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>

</body>
</html>

HTML-tarkistus

Yllä oleva koodi on vain esimerkki.

Nykyaikaiset selaimet käyttävät usein JavaScriptin ja sisäänrakennetun HTML:n yhdistelmää validointi käyttämällä ennalta määritettyjä vahvistussääntöjä, jotka on määritetty HTML-attribuuteissa:

<input id="demo" type="number" min="5" max="10" step="1">

Voit lukea lisää lomakkeiden validoinnista tämän opetusohjelman myöhemmässä luvussa.

Lausunto lopulta

lopulta-käskyn avulla voit suorittaa koodin, kun olet yrittänyt ja saalis tuloksesta riippumatta:

Syntaksi

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

Esimerkki

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    
if(x.trim() == "") throw "is empty";
    if(isNaN(x)) 
throw "is not a number";
    
    x = Number(x);
    if(x > 
10) throw "is too high";
    if(x < 5) throw "is too low";
  }
  catch(err) 
{
    message.innerHTML = "Error: " + 
err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
    }
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10)   throw "is too high";
    if(x < 5)  throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

Virheobjekti

JavaScriptissä on sisäänrakennettu virheobjekti, joka antaa virhetiedot milloin tapahtuu virhe.

Virheobjekti tarjoaa kaksi hyödyllistä ominaisuutta: nimi ja viesti.

Virheobjektin ominaisuudet

name

Asettaa tai palauttaa virheen nimen

message

Asettaa tai palauttaa virheilmoituksen (merkkijonon)

Virhenimi Arvot

Virhenimi-ominaisuuden avulla voidaan palauttaa kuusi eri arvoa:

EvalError

Eval()-funktiossa on tapahtunut virhe

RangeError

Numero "alueen ulkopuolella" on tapahtunut

ReferenceError

Laiton viittaus on tapahtunut

SyntaxError

Tapahtui syntaksivirhe

TypeError

Tapahtui tyyppivirhe

URIError

Virhe encodeURI():ssa

Kuusi eri arvoa kuvataan alla.

Eval Error

EvalError osoittaa virheen eval()-funktiossa.

JavaScriptin uudemmat versiot eivät tuota EvalErroria. Käytä sen sijaan SyntaxErroria.

Aluevirhe

RangeError annetaan, jos käytät numeroa, joka on ulkopuolella juridisten arvojen vaihteluväli.

Esimerkiksi: Et voi asettaa luvun merkitsevien numeroiden määrää arvoon 500.

Esimerkki

let num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
let num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Viitevirhe

ReferenceError heitetään, jos käytät (viittausta) muuttujaa jota ei ole ilmoitettu:

Esimerkki

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

<p id="demo"></p>

<script>
let x = 5;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Syntaksivirhe

SyntaxError heitetään, jos yrität arvioida koodia syntaksivirhe.

Esimerkki

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

<p id="demo"></p>

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Tyyppivirhe

TypeError heitetään, jos käytät arvoa, joka ei ole valikoima odotettuja tyyppejä:

Esimerkki

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

<p id="demo"></p>

<script>
let num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

URI (Uniform Resource Identifier) -virhe

URIerror annetaan, jos käytät laittomia merkkejä URI-funktiossa:

Esimerkki

try {
    decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

<p id="demo"></p>

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Ei-standardivirheobjektin ominaisuudet

Mozilla ja Microsoft määrittävät joitain epätyypillisiä virheobjektin ominaisuuksia:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Älä käytä näitä ominaisuuksia julkisilla verkkosivuilla. Ne eivät toimi kaikissa selaimissa.

Täydellinen virheviittaus

Täydellisen Error-objektin viittauksen löydät kohdasta Complete JavaScript-virheen viite.