2015 van PSD naar JavaScript F. Vonk versie 2 19-9-2015
inhoudsopgave 1. inleiding... - 2-2. ontwikkelomgeving... - 3-3. programmeerconcepten... - 4 - statement... - 4 - sequentie... - 4 - variabele en toekenning... - 6 - selectie... - 7 - herhaling... - 9-4. wat heb je geleerd... - 14 - Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding NietCommercieel GelijkDelen 3.0 Unported licentie De afbeelding op het voorblad is verkregen via INFOwrs. Copyright 2010 INFOwrs Serviços em informatica. - 1 -
1. inleiding In de PSD module heb je leren werken met Structorizer en heb je een aantal zeer eenvoudige programmeerproblemen gezien en opgelost. Welkom bij de van PSD naar JavaScript module. In deze module maak je kennis met de taal JavaScript. JavaScript is een tekstuele programmeertaal die veel gebruikt wordt in websites. Deze module bouwt voort op de PSD module. Ze gaat ervan uit, dat je de concepten uit die module en programmastructuur snapt. Alleen dan kun je je in deze module volledig richten op de taal JavaScript. Het leren van JavaScript is de voorbereiding op het leren van andere tekstuele scripttalen zoals PHP. In deze module kom je opgaves tegen die je moet maken om de lesstof te verwerken. De antwoorden kunnen in de les besproken worden. opgave Opgaves in blauw moet je maken. Let op, links in dit document hebben een rode kleur. Veel plezier en succes. - 2 -
2. ontwikkelomgeving Om JavaScript code te schrijven, heb je een editor (tekstverwerker) nodig. Hiervoor gebruiken we op school Notepad++. Deze editor is, als het goed is, standaard geïnstalleerd op je computer. Verder hebben we een webbrowser nodig om de code te runnen. Hiervoor gaan we Google Chrome gebruiken omdat deze redelijke debug mogelijkheden heeft. Als je niets ziet in je webbrowser kun je via F12 kijken waar de fout in je programma zit. Je gaat de opgaves maken en testen via een HTML pagina. Als je een opgave af hebt, dan kopieer je de gemaakte code in een MS Word of Open Office Writer document en bewaart deze. opgave 2.1 Zet de volgende code in een HTML bestand. <script> document.write("hello World!"); </script> Open het HTML bestand in Chrome en kijk wat er gebeurt. Je kunt de code aanpassen en op F5 in de browser drukken om veranderingen in je HTML bestand te zien. Zo, je hebt je eerste JavaScript programma gerund (uitgevoerd). Het is geen bijzonder programma en het levert geen mooie webpagina op, maar op deze manier kun je alles wat je voor deze module nodig hebt. De stukken tekst <script> en </script> zijn de HTML tags om aan te geven dat alles wat ertussen staat JavaScript code is. De hier gebruikte HTML syntax is niet helemaal netjes, maar voor nu goed genoeg. In de module JavaScript leer je hoe je deze tag volledig gebruikt. Ook Notepad++ herkent deze stukken tekst en maakt ze blauw. Dit feature van Notepad++ noemen we syntax highlighting. Eén van de manieren om iets af te drukken in JavaScript is document.write. De dubbele quote (") herinner je je hopelijk nog uit de PSD module. Deze gaf aan dat er een string (willekeurig stuk tekst) tussen staat. Je mag ook de enkele quote (') gebruiken zoals in de PSD module gedaan werd. - 3 -
3. programmeerconcepten In de module PSD heb je een aantal programmeerconcepten gezien. Deze gaan we in deze module vertalen naar JavaScript. We gaan naar de volgende concepten kijken: statement/instructie sequentie variabele toekenning selectie conditie (if) herhaling (lussen) statement Het eerste programmeerconcept is het statement, oftewel instructie. In het vorige hoofdstuk hebben we al een statement gezien namelijk document.write("hello World!"); Simpel gezegd, is in JavaScript een statement gewoon een regel code. Je hoeft in JavaScript een statement niet af te sluiten met een puntkomma (;), maar het wordt wel sterk aangeraden. Het is eigenlijk niet anders, dan dat we in het Nederlands zinnen afsluiten met een punt. sequentie Net als bij een PSD, maak je in JavaScript een sequentie door meerdere statements achter elkaar te zetten. Bij een PSD gebruikten we het keyword schrijf om uitvoer in een popup venster te laten zien. Zoals je hiervoor al hebt gezien gebruiken we hiervoor in JavaScript document.write. - 4 -
opgave 3.1 Bekijk het volgende PSD, vertaal het naar JavaScript, zet het in een HTML bestand en test het in je webbrowser. Als je nog nooit met JavaScript hebt gewerkt, dan zie je in je webbrowser waarschijnlijk dat alle cijfers achter elkaar afgedrukt zijn. Dat is niet echt overzichtelijk. Wat je later uitgebreider zult leren moet je nu even als trucje gebruiken. Je kunt een nieuwe regel forceren door JavaScript een stukje HTML tekst te laten afdrukken. Hiervoor gebruiken we typisch de <BR> tag uit HTML. We schrijven dan bijvoorbeeld niet document.write("hello World!"); maar document.write("hello World!<BR>"); De <BR> tag is, voor JavaScript, een willekeurig stuk tekst (string) en moet daarom tussen de begin en eind quote. opgave 3.2 Pas de code die je voor opgave 3.1 hebt gemaakt aan, zodat alle cijfers op een aparte regel komen te staan. Bedenk wat je in de PSD module geleerd hebt over strings. Mag je van een cijfer ook een string maken? - 5 -
variabele en toekenning In een PSD gebruikten we variabelen om iets te onthouden, zoals bijvoorbeeld de invoer van de gebruiker maar ook tussenresultaten. In JavaScript is dit niet anders. Alleen noteren we een variabele anders dan in een PSD. In JavaScript zetten we, de eerste keer dat we iets met een variabele doen, het speciale woord (keyword) var voor de naam van de variabele. Dit noemen we het declareren van een variabele. Op deze manier weet JavaScript, dat de gebruikte naam de aanduiding van een variabele is. Het gebruik van het keyword var is niet verplicht in alle browsers, maar het wordt wel sterk aangeraden om het keyword altijd te gebruiken. Als we bijvoorbeeld invoer van de gebruiker willen lezen, dan kan dat op de volgende manier. var leeftijd = prompt("voer uw leeftijd in"); Hier is leeftijd dus een variabele. Er gebeurt een toekenning aan de variabele leeftijd. In een PSD gebruikten we als toekenningsoperator de :=. In JavaScript gebruiken we hiervoor het isteken (=). En daarmee komen we direct bij een nieuwe uitdaging. Als we het isteken gebruiken voor toekenning, wat gebruiken we dan om gelijkheid te testen? In een PSD gebruikten we het isteken als gelijkheidsoperator. In JavaScript kan dat dus niet want daar gebruiken we het isteken al voor toekenning. De gelijkheidsoperator in JavaScript is een dubbel of driedubbel isteken (== of ===). Dit is een bekende valkuil, zelfs voor ervaren programmeurs. Dus let hier expliciet op telkens als je in een conditie op gelijkheid wilt testen. opgave 3.3 Zet de volgende code in een HTML bestand en test het. <script> var leeftijd = prompt("voer uw leeftijd in"); document.write("de ingevoerde leeftijd is ", leeftijd, ".<BR>"); </script> Als het goed is zie je nu in de webbrowser de volgende boodschap. de ingevoerde leeftijd is... - 6 -
Je kunt de code opnieuw uitvoeren door op F5 in de browser drukken. De browser vraagt je dan om nieuwe gebruikersinvoer. selectie De selectie, die je bij een PSD hebt gezien, wordt als volgt naar JavaScript vertaald. In JavaScript ziet er dit als volgt uit. <script> var koffergewicht = prompt("voer gewicht van koffer in"); if (koffergewicht > 20) { document.write("bijbetalen<br>"); } else { document.write("niet bijbetalen<br>"); } </script> We noemen dit een if-else constructie. Hierbij wordt of de code in het "if"-pad of de code in het "else"-pad doorlopen, nooit beide paden. Het "if"-pad komt overeen met het "ja"-pad in een PSD, het "else"-pad met het "nee"-pad van een PSD. Dus als de conditie waar is wordt het "if"-pad uitgevoerd en anders (else) het "else"-pad. Bij JavaScript moet de conditie achter de if altijd tussen ronde haken staan. Stel je vergeet bijvoorbeeld de ronde haken na de if en je hebt het debug venster onder in je browser aan staan (F12), dan zie je het volgende. - 7 -
opgave 3.4 Zet de voorgaande vertaling van het PSD in een HTML bestand en test het in je webbrowser. Nu ga je zelf een aantal keer een selectie in een PSD vertalen naar JavaScript. opgave 3.5 a) Vertaal het volgende PSD naar JavaScript. - 8 -
b) Vertaal het volgende PSD naar JavaScript. c) Vertaal het volgende PSD naar JavaScript. Zoals je in de uitwerking van opgave 3.2 kunt zien, kun je in JavaScript in een document.write twee strings los van elkaar afdrukken door ze te scheiden door een komma (,). Dit hebben we nodig om de inhoud van een variabele af te drukken. herhaling In JavaScript bestaat de totdat-lus niet. De zolang-lus (while-loop) en for-loop bestaan wel. De while-loop, die je bij een PSD hebt gezien, wordt als volgt vertaald naar JavaScript. - 9 -
In JavaScript ziet er dit als volgt uit. <script> var teller = 1; while (teller <= 10) { document.write(teller, "<BR>"); teller = teller + 1; } document.write("klaar!"); </script> Het verrast je hopelijk niet, dat het keyword voor deze lus while is. De lus-code staat tussen accolades ({ en }). We gebruiken altijd accolades, ook al bestaat de lus-code slechts uit 1 statement. Dus alle code tussen de accolades wordt uitgevoerd, zolang de conditie van de lus waar (true) is. Bij JavaScript moet de conditie achter de while altijd tussen ronde haken staan. In een PSD moesten we echt op schrijven teller := teller + 1. In JavaScript hebben we daar een afkorting voor. Als we de waarde van een variabele met 1 willen verhogen dan mogen we schrijven teller++;. De code ziet er dan als volgt uit. <script> var teller = 1; while (teller <= 10) { document.write(teller, "<BR>"); teller++; } document.write("klaar!"); </script> Deze verkorte schrijfwijze is met name handig als je de for-loop gaat gebruiken. Maar je gaat eerst met de while-loop oefenen. - 10 -
opgave 3.6 a) Vertaal het volgende PSD naar JavaScript. b) Vertaal het volgende PSD naar JavaScript. c) Vertaal het volgende PSD naar JavaScript. - 11 -
De for-loop, die je bij een PSD hebt gezien, wordt als volgt naar JavaScript vertaald. In JavaScript ziet er dit als volgt uit. <script> for (var teller = 1; teller <= 10; teller++) { document.write(teller, "<BR>"); } document.write("klaar!"); </script> Het verrast je hopelijk niet dat het keyword voor deze lus for is. De lus-code staat tussen accolades ({ en }). We gebruiken altijd accolades, ook al bestaat de luscode slechts uit 1 statement, zoals in het voorbeeld. Dus alle code tussen de accolades wordt uitgevoerd, zolang de conditie van de lus waar (true) is. De conditie van de for-loop is het middelste statement. Bij JavaScript moeten alle statements achter het keyword for altijd tussen ronde haken staan. Je ziet hier, dat achter het keyword for meerdere statements staan. Deze zijn achter elkaar opgeschreven. De for-loop is de enige plek waar we doorgaans in onze code statements achter elkaar in plaats van onder elkaar schrijven. De statements worden gescheiden door een, intussen hopelijk welbekende, puntkomma. Alleen achter het laatste statement mag nooit een puntkomma staan bij een forloop. - 12 -
opgave 3.7 a) Vertaal het volgende PSD naar JavaScript. - 13 -
4. wat heb je geleerd Je hebt nu een herhaling gehad van de basis programmeerconcepten en ze leren vertalen van de PSD notatie naar JavaScript code. Daarbij heb je geoefend met de syntax (spelling) van JavaScript en het uitvoeren en debuggen van JavaScript programma's in een webbrowser. Je hebt ook al iets geleerd over hoe je gebruikersinvoer in een JavaScript programma kunt inlezen. - 14 -