javascriptcursus/hoofdstuk_3.php

<?php // Includes: require_once 'php/bookpage.php'; // Page: // H3 $page = new bookpage(3); $page->addContent('<p>Statements zijn de basis van een programmeertaal. Een heel script bestaat enkel uit statements. In dit hoofdstuk wordt je uitgelegd wat het precies zijn.</p>'); // H3.1 $page->nextSubChapter(); $page->addContent('<p>Statements zijn simpelweg de opdrachten die je aan de browser geeft. Normaliter gebruik je &eacute;&eacute;n statement (opdracht) per regel, ze worden dus gescheiden door een enter:</p>'); $page->addJS('Opdracht_1 Opdracht_2 Opdracht_3', false, false); $page->addContent('<p>Als je toch meerdere statements achter elkaar wil op 1 regel, dan kun je ze scheiden met een puntkomma:</p>'); $page->addJS('Opdracht_1; Opdracht_2; Opdracht_3', false, false); $page->addContent('<p>Het is een goede gewoonte, zelfs als je maar &eacute;&eacute;n statement per regel schrijft, om altijd een puntkomma achter een statement te zetten:</p>'); $page->addJS('Opdracht_1; Opdracht_2; Opdracht_3;', false, false); $page->addContent('<p>Dit is overzichtelijker, en je kan het nooit fout doen. Bedenk wel: &eacute;&eacute;n statement betekent niet dat er ook maar &eacute;&eacute;n ding gebeurt. Er kan een heleboel gebeuren in een statement.</p>'); // H3.2 $page->nextSubChapter(); $page->addContent('<p>Je wil heel vaak iets aan de gebruiker laten zien. Dit kan onder andere met '.$page->inlineJS('document.write()').'. Waarbij tussen de haakjes de tekst komt te staan die je wil laten zien:</p>'); $page->addJS('document.write("Hello world!");'); $page->addContent('<p>Wat <i>document</i> precies betekent kom later in deze cursus ('.$page->generateLinkToH(10, 3).'). Het enige wat dit stukje code doet is de tekst <i>Hello world!</i> op het scherm zetten. De aanhalingstekens (") betekenen dat de computer dat wat ertussen staat als tekst moet zien en niet als code.</p>'); $page->addContent('<p>Dat noem je dan een zogeheten <i>string</i> (= reeks van tekens), daarover meer in '.$page->generateLinkToH(4, 5).'. Het enige wat je nu moet weten, is dat als je letterlijke tekst wil laten zien dit tussen dubbele aanhalingstekens (") of enkele aanhalingstekens (\') moet staan. Een mix daarvan mag niet.<br />Als je gewoon een getal wil schrijven hoef je geen aanhalingstekens te gebruiken. Dit komt omdat een getal geen letterlijke tekst is, maar ook werkelijk betekenis heeft voor de computer:</p>'); $page->addJS('document.write(42); document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven document.write(\'42\'); // Geeft ook dezelfde uitvoer '); $page->addContent('<p>Zoals je ziet zijn er dus meerdere manieren om hetzelfde te bereiken. In dit geval kun je 42 als getal schrijven of als letterlijke tekst, voor de uitvoer maakt dat niks uit.</p>'); $page->addContent('<p>Bij het schrijven van getallen moet je er rekening mee houden dat bij cijfers \'achter de komma\' er geen komma gebruikt wordt maar een punt. Dus niet: 1,5. Maar wel: 1.5.</p>'); $page->addContent('<p>Met '.$page->inlineJS('document.write()').' laat je dus iets aan de gebruiker zien. Wat je laat zien is in HTML, dus je kan ook schrijven:</p>'); $page->addJS('document.write("<b>Hello world!</b>");'); $page->addContent('<p>Nu zul je dus als uitvoer de tekst <i>Hello world!</i> vetgedrukt op het scherm krijgen.</p>'); // H3.3 $page->nextSubChapter(); $page->addContent('<p>In de vorige paragraaf stond dit stukje code:</p>'); $page->addJS('document.write(42); document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven document.write(\'42\'); // Geeft ook dezelfde uitvoer'); $page->addContent('<p>Er is echter nog niet uitgelegd wat die twee slashes betekenen. Met twee slashes kun je aangeven dat de rest van die regel commentaar is. Dus vanaf de // tot aan het einde van de regel wordt alles door de browser genegeerd. Dit is erg handig om uitleg bij je code te geven, zodat je later als je wat wil veranderen beter begrijpt wat dat stukje code doet.</p>'); $page->addContent('<p>Behalve commentaar met // is er ook commentaar met /* */. Bij die laatste variant kun je meerdere regels commentaar invoegen. Daarbij begint het commentaar namelijk bij /* en het eindigt bij */. Net zoals in CSS dus. Daardoor kan je ook binnen &eacute;&eacute;n regel commentaar geven dat nog voor het einde van die regel ophoudt:</p>'); $page->addJS('document.write("Hello world!"); // Commentaar // document.write("Hoi wereld!"); <-- Let op! // De bovenstaande regel is nu geheel commentaar. // De tekst "Hoi wereld!" zal dus niet op het scherm verschijnen! document.write("<br />"); // Een enter document.write(/* En nu in het latijn: */"Ave munde!"); /* Dit zijn meerdere regels commentaar. Het bovenstaande statement zal de tekst "Ave munde!" laten zien. */'); // H3.4 $page->nextSubChapter(); $page->addContent('<p>Je kan al tekst op het scherm laten verschijnen, maar soms wil je zeker weten dat je de aandacht van de gebruiker krijgt. Dan wil je dus eigenlijk een pop-up venstertje weergeven. Dat kan met '.$page->inlineJS('alert()').', die werkt hetzelfde als '.$page->inlineJS('document.write()').' alleen komt het dan niet simpelweg op het scherm te staan maar krijg je een pop-up venstertje:</p>'); $page->addJS('alert("Dit is een alert-box...");'); $page->addContent('<p>Heeft dus als resultaat:<br /><img src="img/screenshots/h3.4-alert.png" alt="Alert box" /></p>'); $page->addContent('<p>Tussen de haakjes kun je alles invullen dat je ook bij '.$page->inlineJS('document.write()').' kan invullen. Alleen werkt HTML daar niet:</p>'); $page->addJS('alert("Letterlijke tekst"); alert(42); // Laat een getal zien alert("<b>Jammer genoeg niet vetgedrukt</b>");'); $page->addContent('<p>Hierbij zal je dus achtereenvolgens 3 pop-up venstertjes krijgen die de teksten <i>Letterlijke tekst</i>, <i>42</i> en <i>&lt;b&gt;Jammer genoeg niet vetgedrukt&lt;/b&gt;</i> laten zien. Waarbij je bij de laatste dus de &lt;b&gt; en &lt;/b&gt; gewoon ziet staan en het dus niet vetgedrukt wordt.</p>'); // H3.5 (opdrachten) $page->nextSubChapter(); $page->addAssignments(3); $page->printAll(); ?>

Resultaat

Made by Thijs Aarnoudse