JS - FUNCTIES

Koppelingen
Voorbeelden bij dit hoofdstuk

HOOFDSTUKKEN

Algemeen
Declareren van functies
Aanroepen van functies
Anonieme functies
Parameters overdragen
Parameters variabel overdragen
Return statements
Globale en lokale variabelen
Recursieve functies
Het object Function
Standaardfuncties



Algemeen

Terug naar de top

 

Scripts worden veelal uitgevoerd als een pagina wordt geladen. Als men dat niet wenst, dan kan men deze scripts opnemen in een functie.

Een functie (function) is een blok opdrachten, die pas wordt uitgevoerd bij een speciale gebeurtenis (event) of wanneer de functie wordt aangeroepen (call). Daarnaast kunnen functies ook meerdere malen in het script worden aangeroepen en kan ook weer worden gebruikt in andere scripts. Met behulp van functies kunnen programma's in deeltjes worden geschreven. Elke functie kan de oplossing zijn van een deelprobleem.
Functies kunnen op drie plaatsen worden opgeslagen:
1. In het <body>-deel van het document
2. In het <head>-deel van het document
3. In een aparte bibliotheek (met een koppeling in het <head>-deel.
Om er zeker van te zijn, dat een functie wordt gelezen voordat deze wordt aangeroepen, is het verstandig deze in het <head>-deel of in een aparte bibliotheek te plaatsen. Om fouten te voorkomen cq beter op te sporen maakt men zonodig gebruik van meerdere kleine functies.

Een scripttaal ontleent zijn kracht aan het feit dat de gebruiker het kan aanpassen aan zijn eigen wensen en eisen. Standaard beschikt een script-taal over een hele reeks interne commando's die kunnen worden aangeroepen. Een voorbeeld hiervan is de verzameling data- en tijdfuncties in JavaScript. Alleen met deze interne functies is het mogelijk om geavanceerde scripts te schrijven die voldoen aan uw eigen wensen.

Declareren van functies

Terug naar de top

 

Een functie bestaat uit een naam en een aantal regels code (tussen accolades) die samen een speciale taak uitvoeren.

Schrijfwijze:

<SCRIPT language="JavaScript">
function naam(parameters)
{
...code voor de functie.....
}
</SCRIPT>

Met functionwordt de functie gedeclareerd. Vervolgens wordt een naam aan de functie gegeven. Deze dient duidelijk te zijn, bijvoorbeeld: "ToonDezeTekst". Vervolgens kunnen één of meerdere parameters, variabelen of argumenten meegegeven worden aan de functie, waarna met de eigenlijke code wordt begonnen. Deze code staat tussen accolades, waarmee wordt aangegeven dat een blok code begint of eindigt. Let daarbij op drie dingen.

  1. Ten eerste moeten de haakjes altijd blijven staan, ook als er geen parameters worden gebruikt. Daarmee kunnen er later parameters toegevoegd worden.
  2. Ten tweede moet rekening worden gehouden met de naamgeving. JavaScript is hoofdlettergevoelig, wat inhoudt dat "woord" niet hetzelfde is als "Woord".
  3. Ten derde dient aan het einde van een command een punt-komma geplaatst te worden. Dit is optioneel. Plaatsing is verplicht als er meerdere commando's na elkaar staan volgen.

 

Aanroepen van functies

Terug naar de top

 

Stel dat de volgende functie gemaakt is:

<SCRIPT language="JavaScript">
function LaatZien() {
alert("Deze functie werkt!");
}
</SCRIPT>

Op zich gebeurt er nu niets. De functie is wel beschreven, maar om de functie uit te voeren moet deze ergens anders in de pagina worden aangeroepen. Dit kan op twee manieren. In het script of door de functie te koppelen aan een HTML-element.
NB. Tijdens de oproep worden eventuele parameters, etc. overgedragen.

Voorbeeld 1 - Starten door plaatsing in het script

<HTML>
<HEAD>
<TITLE>Functies aanroepen in het script.</TITLE>
<SCRIPT Language="JavaScript">
<!--
function LaatZien() {
alert("Deze functie werkt!");
}
LaatZien()
//-->
</SCRIPT>
</HEAD>
<BODY>
Dit is de eerste manier.
</BODY>
</HTML>

Op deze manier (plaatsing in het script) treedt de functie in werking als het script wordt geladen. De gebruiker hoeft hier niets voor te doen. Dit moet hij wel als de functie wordt gekoppeld aan een knop. We praten dan over een event-handler.

Voorbeeld 2 - Starten door gebruik van een event-handler

<HTML>
<HEAD>
<TITLE>Functies aanroepen door middel van een event handler</TITLE>
<SCRIPT language="JavaScript">
<!--
function LaatZien() {
alert("Deze functie werkt!");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="Klik hier op" onClick=LaatZien()>
</FORM>
<BR>
Dit is de tweede manier
</BODY>
</HTML>

Anonieme functies

Terug naar de top

 

Anonieme functies zijn ook mogelijk.

Schrijfwijze:

<SCRIPT language="JavaScript">
var fn = function (parameters)
{
statements;
retourneer expressie;
}
</SCRIPT>

Voorbeeld:
Euclides originele algoritme voor het vinden van de grootste gemene deler.

<SCRIPT language="JavaScript">
function gcd(segmentA, segmentB) {
while (segmentA != segmentB) {
if (segmentA > segmentB)
segmentA -= segmentB;
else
segmentB -= segmentA;
}
return segmentA;
}
</SCRIPT>

Het aantal argumenten dat gegeven wordt als een functie wordt aangeroepen komt niet noodzakelijkerwijs overeen met het aantal argumenten dat in de functie-definitie staat opgenomen. Een benoemd argument in de functie-definitie die geen tegenhanger heeft in de oproep, krijgt als waarde undifined. Binnen een functie kunnen argumenten ook toegankelijk gemaakt worden via een argumentenlijst.

Parameters overdragen

Terug naar de top

 

Functies worden pas echt interessant als ze steeds weer voor verschillende situaties gebruikt kunnen worden. Dan moeten ze allereerst zo algemeen mogelijk worden gehouden en ten tweede moet er gewerkt worden met overdrachtswaarden.

Parameters toewijzen aan een functie is zeer eenvoudig, maar vooral erg handig. Stel, u heeft 30 leerlingen in de klas. Nu wilt u een aantal gegevens van deze leerlingen publiceren op het web. Allereerst kiest u ervoor om de namen bekend te maken. De manier om dit zonder parameters te doen zou er als volgt uit komen te zien:

<SCRIPT language--"JavaScript">
<!--
function SchrijfNaam() {
document.write("De naam van de student is:");
document.write("Willem");
document.close()
}
//-->
</SCRIPT>

Vervolgens zou u deze functie aanroepen door op een knop te klikken:

<FORM>
<INPUT type="button" value="Klik hier" onClick=SchrijfNaam()>
</FORM>

Als u in deze situatie de naam wilt veranderen, moet u de functie opnieuw schrijven. Daarnaast moet er een extra regel worden toegevoegd als u een tweede kenmerk van die leerling wil tonen. In dit geval zijn parameters een uitkomst, want daarmee voorkomt u dat u de hele functie moet aanpassen. Het volgende voorbeeld maakt gebruik van drie parameters. De eerste is Naam, de tweede is Vak en de derde is Cijfer.

<HTML>
<HEAD>
<TITLE>Parameters gebruiken</TITLE>
<SCRIPT language="JavaScript">
<!--
function SchrijfNaam(Naam,Vak,Cijfer) {
document.write("De naam van de student is:" + Naam + "<BR>");
document.write("Het vak is" + Vak + "<BR>");
document.write("Het behaalde cijfer is: " + Cijfer + "<BR>");
document.close()
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="Klik hier" onClick=SchrijfNaam('Marlin', `geschiedenis', '9')>
</FORM>
</BODY>
</HTML>

Deze functie hoeft niet meer herschreven te worden. Het enige wat u hoeft te veranderen zijn de parameters bij het onClick event.
U kunt de gegevens ook invoeren door middel van pop-up boxen. Op die manier maakt u als het ware een programmaatje waarmee u al de gegevens kunt invoeren. In het volgende voorbeeld is het vorige script als uitgangspunt genomen.

<HTML>
<HEAD>
<TITLE>Gegevens invoeren door pop-up boxen</TITLE>
<SCRIPT language="JavaScript">
//<--
Naam=this.Naam
Vak=this.Vak
Cijfer=this.Cijfer
function Interactief() {
this.Naam=prompt("Vul de naam van de student in.", "Naam");
this.Vak=prompt("Vul het vak in." , "Vak");
this.Cijfer=prompt("Vul het cijfer in." , "Cijfer");
SchrijfNaam()
Doorgaan()
}
function SchrijfNaam() {
document.write("<B>De naam van de student is: </B>" + Naam + "<BR>");
document.write("<B>Het vak is: </B>" + Vak + "<BR>");
document.write("<B>Het behaalde cijfer is: </B>" + Cijfer + "<BR><BR>");
}
function Doorgaan() {
<!--
if (confirm("Wilt u nog een student toevoegen?")) { Interactief() }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
//<--
<SCRIPT language="JavaScript">
Interactief()
//-->
</SCRIPT>
</BODY>
</HTML>

De naam van de student is: Willem
Het vak is: Nederlands
Het behaalde cijfer is: 8

De naam van de student is: Rory
Het vak is: Engels
Het behaalde cijfer is: 8

Allereerst hebben we ervoor gezorgd dat de ingevoerde gegevens aan verschillende variabelen worden gekoppeld. Daarvoor wordt er gebruik gemaakt van het sleutelwoord "this". In dit voorbeeld ziet u dat de ingevoerde naam van de student wordt gekoppeld aan this.Naam en dat this.Naam weer wordt gekoppeld aan de variabele Naam. Deze variabel, vragen we op in de functie SchrijfNaam().
Als er verder niets aan het script zouden worden toegevoegd, kan er maar één leerling per keer worden toegevoegd. Omdat dat niet handig is, is er nog een extra functie gecreërd, die in het voorbeeld Doorgaan() is genoemd. Deze functie zorgt ervoor dat iedere keer wanneer een leerling is toegevoegd een dialoog-box verschijnt met de vraag of er nog een student moet worden toegevoegd. Wordt er op OK geklikt dan wordt de functie Interactief() weer aangeroepen, terwijl als er op CANCEL wordt geklikt het script ten einde is.

Parameters variabel overdragen

Terug naar de top

 

JavaScript biedt bij functies de mogelijkheid om parameters variabel over te dragen. Daarbij wordt de argumentseigenschap van het object function gebruikt. Deze heeft betrekking op een array, die alle parameters bevat die aan de functie worden overgedragen.
In het volgende voorbeeld wordt een postcode pas overgedragen als er zes tekens zijn ingevoerd:

<HTML>
<HEAD>
<TITLE>arguments[]-array</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function argFunc(postcode) {
var plaatsen =
(!argFunc.arguments[1]) ? 6 : argFunc.arguments[1];
if (pc.length != plaatsen)
alert("Voer een geldige postcode in.");
else alert("Dank u voor uw gegevens.");
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM NAME="geheim">
Cijfers van postcode: <INPUT TYPE="Text" NAME="postcode">
<INPUT TYPE="Button" VALUE="OK"
onClick="argFunc(this.form.postcode.value)">
</FORM>
</BODY>
</HTML>

Return statements

Terug naar de top

 

Het return statement wordt gebruikt om waarden vast te stellen die door de functie geretourneerd worden. Dit kunnen uitkomsten van berekeningen zijn, maar ook de naam van de bezoeker. Bij het aanroepen van de functie (bijvoorbeeld bij het openen van een pagina) wordt de bezoeker gevraagd gegevens in te voeren (getallen, een naam). Vervolgens wordt daar op enigerlei wijze gebruik van gemaakt (bij name welkom heten).

Voorbeeld
De functie hieronder geeft het product van twee getallen (a en b) terug:

function prod(a,b)
{
x=a*b
return x
}

Als je de functie hierboven oproept, moet je twee parameters invoeren:

product=prod(2,3)

 

De waarde die teruggegeven wordt door de prod() functie is 6. Deze wordt opgeslagen in de variabele genaamd product.

Globale en lokale variabelen

Terug naar de top

 

Lokale variabelen worden met het woord var gedefinieerd; globale variabelen zonder dit woord. Binnen function is dit van belang, daar woorden met var alleen binnen de functie geldig zijn. In het volgende voorbeeld loopt dat fout:

function lokalevar() {
var jaar=2007;
}
function melding() {
alert("wij schrijven het jaar " +jaar+ ".");
}

De variabele jaar is lokaal gedeclareerd en daarom niet algemeen beschikbaar. De functie melding() roept dus een variabele aan die voor haar niet beschikbaar is.

In het volgende voorbeeld wordt een globale variabele binnen een functie gedeclareerd (var is nu weggelaten):

function lokalevar() {
jaar=2007;
}
function melding() {
alert("wij schrijven het jaar " +jaar+ ".");
}

Dit loopt niet lekker.

De oplossing is een binnen een functie gedeclareerde globale variabele buiten deze functie opnieuw te declareren (hij neemt de reeds gekregen waarde dan mee):

function lokalevar() {
jaar=2007;
}
lokalevar();
function melding() {
alert("wij schrijven het jaar " +jaar+ ".");
}

De hier gedeclareerde globale variabel kan zonder problemen overal gebruikt worden.

Recursieve functies

Terug naar de top

 

Een recursieve functie is een functie die zichzelf oproept. Voorbeelden van recursieve functies zijn het berekenen van faculteiten (5-faculteit of 5!=5*4*3*2*1); hier wordt een rekenkundige handeling (vermenigvuldigen) een aantal malen herhaald; of het verwachten van het juiste antwoord op een gestelde vraag; hier gaat het vragen door tot het goede antwoord is gegeven. In recursieve functies zitten gevaren. De handeling zou wel eens heel lang kunnen duren (berekenen 100!, of de vraag is te moeilijk) of zelfs oneindig kunnen zijn. NB. Hetzelfde probleem kan zich voordoen bij het loop-statement.
Voorbeeld van een vraag:

<HTML>
<HEAD>
<TITLE>Een recursieve functie</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function test(x) {
var juist = "<H2>Juist! Een week telt "+
"zeven dagen :-)</H2>";
var vraag = prompt("Hoeveel dagen telt een week?","");
return (vraag == 7) ? juist : test();
}

// -->
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(test());
// -->
</SCRIPT>

</BODY>
</HTML>

Deze vraag gaat door tot het juiste antwoord gegeven is.

In het volgende voorbeeld wordt een limiet gesteld aan het aantal keren dat de vraag gesteld wordt.

<HTML>
<HEAD>
<TITLE>Een eenvoudige functie</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function test(pogingen) {
var juist = "<H2>Juist! Een week telt "+
"zeven dagen :-)</H2>";
var fout = "<H2>Dit is helaas het verkeerde antwoord :-(</H2>";
var vraag = prompt("Hoeveel dagen telt een week?","");

if (pogingen > 1)
return (vraag == 7) ? juist : test(pogingen -1);
else
return (vraag == 7) ? juist : fout;
}

// -->
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(test(5));
// -->
</SCRIPT>

</BODY>
</HTML>

Deze vraag gaat door tot het juiste antwoord gegeven is of tot de vraag vijf keer gesteld is. Mocht dan nog steeds niet het goede antwoord gegeven zijn, dan wordt dat ook gemeld.

 

Het object Function

Terug naar de top

 

Het object function compileert een string die een JavaScript-code toont bij een functie. Voor het maken van een instance van het object function wordt het woord new gebruikt en wordt er een geschikte naam voor gegeven. Hierbij kan het gaan om een variabele of om een reeds bestaand object. Daarnaast kan men de overeenkomstige functie toewijzen aan een object, gevolgd door een event handler.
Aan de op deze wijze gdeclareerde functie kunnen willekeurige parameters worden overgedragen, die weer door de eigenlijke instructies van de functie, worden uitgevoerd. Meerdere instructies dienen door middel van een puntkomma van elkaar gescheiden worden.

Gebruik
Het object function kent diverse toepassingsmogelijkheden. Het object function is vooral handig als aan een object een event handler moet worden toegewezen. Zeer interessant is de toepassing waarbij <ONMOUSEOVER< b>en onmouseout gekoppeld kunnen worden aan een formulierknop. Op een andere wijze lukt dat niet.

Voorbeeld 1 - Wijzigen achtergrondkleur met button-onClick

<HTML>
<HEAD>
<TITLE>Function()</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var kleur = new Function("bg","document.bgColor=bg");

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM>
<INPUT TYPE="Button" VALUE="BgColor" onClick="kleur('blue')">
</FORM>

</BODY>
</HTML>

Als parameter wordt aan de functie kleur() de gewenste kleurwaarde voor de achtergrond overgegeven. De oproep gebeurt (evenals bij een normale functie) via een event handler.

Voorbeeld 2 - Wijzigen achtergrondkleur met form-onClick

<HTML>
<HEAD>
<TITLE>Function()</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM name="form1">
<INPUT NAME="kleur" TYPE="Button" VALUE="Achtergrondkleur wijzigen">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.form1.kleur.onclick =
new Function("document.bgColor='antiquewhite'")
// -->
</SCRIPT>

</BODY>
</HTML>

Het script dient pas geinitialiseerd te worden wanneer het object dat moet worden gemanipuleerd is geladen. Anders volgt een foutmelding, omdat aan object alleen eigenschappen kunnen worden toegewezen als het reeds bestaat. Dit geldt ook voor de toewijzingen van een function object bij een event handler.

 

Voorbeeld 3 - Buttons met onmouseover en onmouseout

<HTML>
<HEAD>
<TITLE>Function()</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM name="form1">
<INPUT NAME="button1" TYPE="button"
VALUE="Loop over mij heen en open mij!">
<INPUT NAME="button2" TYPE="button"
VALUE="Niet over lopen a.u.b.!">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.form1.button1.onmouseover =
new Function("venster=window.open"+
"('about:blank','test','width=200,height=200')");
document.form1.button2.onmouseover =
new Function("document.form1.button2."+
"value='A U .... !';window.status"+
"='Kunt u niet lezen?'");
document.form1.button2.onmouseout =
new Function("document.form1.button2.value="+
"'Niet over lopen a.u.b.!';window.status='Weg met jou!'");
// -->
</SCRIPT>

</BODY>
</HTML>

Zodra met de muis over de eerste knop gelopen wordt, wordt een nieuw venster geopend (met enige vertraging). In dat venster zou bijvoorbeeld een hulptekst kunnen worden geplaatst. Zodra over de tweede knop gelopen wordt, verandert de omschrijving en wordt een tekst in de statusbalk weergegeven Tijdens het verlaten van de knop wordt de begintoestand weer hersteld. Klikken op de knoppen leidt (hier) tot niets daar in de form aan de knop geen onClick event is toegevoegd.

 

Standaardfuncties en properties

Terug naar de top

 

JavaScript kent vele functies. Daarvan zijn een aantal object onafhankelijk. Dat houdt in dat ze vooraf in JavaScript gedefinieerd zijn en op elk gewenst moment opgeroepen kunnen worden. Daarnaast kent JavaScript een aantal top-level properties:
FF: Firefox, N: Netscape, IE: Internet Explorer

FunctieBeschrijvingFFNIE
eval() De functie eval() verwacht als overdrachtswaarde een string, die elke willekeurige JavaScript-expressie kan bevatten. Met behulp van eval() wordt de overgedragen string geanalyseerd en als JavaScript-broncode geinterpreteerd. Een rekenkundige expressie wordt als zodanig geinterpreteerd en niet als tekst. 1 2 3
escape()
unescape()
escape() wordt gebruikt om een string die verboden speciale telkens als trema's en umlauts bevat te coderen. Speciale tekens zijn bijvoorbeeld in url's niet toegestaan. Gecodeerde speciale tekens bestaan uit wel toegestane tekens. ë wordt daarbij bijvoorbeeld omgezet in %EB.
unescape() zet de gecodeerde tekens weer om in normale vorm.
escape() codeert niet: * @ - _ + . /
1 - 3
parseFloat() parseFloat() zet een string om in een getal met drijvende komma (floating point). De ingevoerde string moet daarbij wel beginnen met een getal met daarin breukwaarden voorafgegaan door een punt. Een komma of tekst (euro) stopt de handeling. 1 2 3
parseInt() parseInt() zet een string die aan het begin een getal bevat om in een heel getal (integer). Met andere woorden; het deel achter de komma wordt afgekapt. 1 2 3
encodeURI()
decodeURI()
codeert een string als een URI cq decodeert een gecodeerde URI.
, / ? : @ & = + $ #.
1 4 5.5
encodeURIComponent()
decodeURIComponent()
codeert een string als een URI component cq decodeert een gecodeerde URI component.
encodeURIComponent() wordt gebruikt om tekens als , / ? : @ & = + $ # te coderen.
1 4 5.5
isFinite() controleert of een getal een eindig getal is 1 4 4
isNaN() isNaN() controleert of de waarde geen getal (Not a Number) is. Deze functie wordt vaak gebruikt in combinatie met parseInt() en parseFloat(). 1 2 3
Number() Number() converteert de inhoud van een object naar een getal en retourneert het getal. Wordt vooral gebruikt in combinatie met het object Date. Als de parameter een Date object is, retourneert de Number() function het aantal milliseconds sinds middernacht 1 january 1970 UTC. 1    
String() String() converteert de inhoud van een object naar een tekenreeks. Eveneens vooral te gebruiken met het object Date. 1    

 

PropertyBeschrijvingFFNIE
Infinity een numerieke waarde die een positieve or negatieve oneindige waarde vertegenwoordigt. Infinity wordt weergegeven als een getal groter is dan 1.7976931348623157E+10308, en -Infinity als het getal kleiner is dan -1.7976931348623157E+10308. Alles wat gedeeld wordt door Infinity is 0 en alles wat vermenivuldigd wordt met Infinity is Infinity. 1 4 4
NaN geeft aan dat een waarde geen getal is "Not a Number" 1 4 4
undefined geeft aan dat een variabele geen waarde bevat 1 4 5.5

 

Function - Voorbeelden

eval()

<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write("<br />")
document.write(eval("2+2"))
document.write("<br />")
var x=10
document.write(eval(x+17))
document.write("<br />")
</script>

Resultaten:

200
4
27

escape() / unescape()

<script type="text/javascript">
document.write(escape("?!=()#%&"))
</script>

Resultaten:

%3F%21%3D%28%29%23%25%26

 

<script type="text/javascript">
var test1="Visit W3Schools!"

test1=escape(test1)
document.write (test1 + "<br />")

test1=unescape(test1)
document.write(test1 + "<br />")

</script>

Resultaten:

Visit%20W3Schools%21
Visit W3Schools!

parseFloat()

<script type="text/javascript">
document.write(parseFloat("10") + "<br />")
document.write(parseFloat("10.00") + "<br />")
document.write(parseFloat("10.33") + "<br />")
document.write(parseFloat("34 45 66") + "<br />")
document.write(parseFloat(" 60 ") + "<br />")
document.write(parseFloat("40 years") + "<br />")
document.write(parseFloat("He was 40") + "<br />")
</script>

Resultaten:

10
10
10.33
34
60
40
NaN

parseInt()

Schrijfwijze

parseInt(string, radix)

 

De parseInt() function bekijkt een string and retourneert een integer.
De radix parameter wordt gebruikt om aan te geven welk numeriek systeem wordt gehanteerd bijvoorbeel, een radix van 16 (hexadecimal) geeft aan dat het getal in de string omgezet moet worden van een hexadecimaal naar een decimaal getal.
Als er geen radix parameter is topegevoegd neemt JavaScript het volgende aan:

  • Als de string begint met "0x", de radix is 16 (hexadecimaal)
  • Als de string begint met "0", de radix is 8 (octaal). Deze toepassing is verouderd
  • Als de string begint met elke andere waarde is de radix 10 (decimaal)

 

<script type="text/javascript">
document.write(parseInt("10") + "<br />")
document.write(parseInt("10.00") + "<br />")
document.write(parseInt("10.33") + "<br />")
document.write(parseInt("34 45 66") + "<br />")
document.write(parseInt(" 60 ") + "<br />")
document.write(parseInt("40 years") + "<br />")
document.write(parseInt("He was 40") + "<br />")

document.write("<br />")

document.write(parseInt("10")+ "<br />")
document.write(parseInt("10",10)+ "<br />")

document.write(parseInt("010")+ "<br />")
document.write(parseInt("10",8)+ "<br />")

document.write(parseInt("0x10")+ "<br />")
document.write(parseInt("10",16)+ "<br />")
</script>

Resultaten:

10
10
10
34
60
40
NaN

10
10
8
8
16
16

encodeURI() / decodeURI()

<script type="text/javascript">
document.write(encodeURI("http://www.w3schools.com")+ "<br />")
document.write(encodeURI("http://www.w3schools.com/My first/"))
document.write(encodeURI(",/?:@&=+$#"))
</script>

Resultaat:

http://www.w3schools.com
http://www.w3schools.com/My%20first/
,/?:@&=+$#

 

<script type="text/javascript">
var test1="http://www.w3schools.com/My first/"
document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))
</script>

Resultaat:

http://www.w3schools.com/My%20first/
http://www.w3schools.com/My first/

encodeURIComponent() / decodeURIComponent()

<script type="text/javascript">
document.write(encodeURIComponent("http://www.w3schools.com"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3schools.com/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
</script>

Resultaten:

http%3A%2F%2Fwww.w3schools.com
http%3A%2F%2Fwww.w3schools.com%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

 

<script type="text/javascript">
var test1="http://www.w3schools.com/My first/"
document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1))
</script>

Resultaten:

http%3A%2F%2Fwww.w3schools.com%2FMy%20first%2F
http://www.w3schools.com/My first/

isFinite()

<script type="text/javascript">
document.write(isFinite(123)+ "<br />")
document.write(isFinite(-1.23)+ "<br />")
document.write(isFinite(5-2)+ "<br />")
document.write(isFinite(0)+ "<br />")
document.write(isFinite("Hello")+ "<br />")
document.write(isFinite("2005/12/12")+ "<br />")
</script>

Resultaten:

true
true
true
true
false
false

JavaScript isNaN() Function

<script type="text/javascript">
document.write(isNaN(123)+ "<br />")
document.write(isNaN(-1.23)+ "<br />")
document.write(isNaN(5-2)+ "<br />")
document.write(isNaN(0)+ "<br />")
document.write(isNaN("Hello")+ "<br />")
document.write(isNaN("2005/12/12")+ "<br />")
</script>

Resultaten:

false
false
false
false
true
true

Number()

<script type="text/javascript">
var test1= new Boolean(true)
var test2= new Boolean(false)
var test3= new Date()
var test4= new String("999")
var test5= new String("999 888")

document.write(Number(test1)+ "<br />")
document.write(Number(test2)+ "<br />")
document.write(Number(test3)+ "<br />")
document.write(Number(test4)+ "<br />")
document.write(Number(test5)+ "<br />")
</script>

Resultaten:

1
0
1334333065110
999
NaN

String()

<script type="text/javascript">
var test1= new Boolean(1)
var test2= new Boolean(0) var test3= new Boolean(true)
var test4= new Boolean(false)
var test5= new Date()
var test6= new String("999 888")
var test7=12345

document.write(String(test1)+ "<br />")
document.write(String(test2)+ "<br />")
document.write(String(test3)+ "<br />")
document.write(String(test4)+ "<br />")
document.write(String(test5)+ "<br />")
document.write(String(test6)+ "<br />")
document.write(String(test7)+ "<br />")
</script>

Resultaten:
true
false
true
false
Fri Apr 13 18:04:25 UTC+0200 2012
999 888
12345

Infinity property

<script type="text/javascript">
var t1=1.7976931348623157E+10308
document.write(t1)
document.write("<br />")
var t2=-1.7976931348623157E+10308
document.write(t2)
</script>

Resultaten:

Infinity
-Infinity

NaN property

<script type="text/javascript">
var test1="300"
var test2="Hallo Wereld!"
document.write(Number(test1)+ "<br />")
document.write(Number(test2)+ "<br />")
document.write(isNaN(test1)+ "<br />")
document.write(isNaN(test2))
</script>

Resultaten:
300
NaN
false
true

undefined property

<script type="text/javascript">
var t1=""
var t2
if (t1==undefined) {document.write("t1 is undefined")}
if (t2==undefined) {document.write("t2 is undefined")}
</script>

Resultaten:

t2 is undefined


Terug naar de top