Inleiding tot programmeren: Javascript Een definitie JavaScript is een scripttaal met objectgeoriënteerde mogelijkheden. Deze geïnterpreteerde programmeertaal is vooral gericht op het gebruik in webpagina s. Javascript wordt dus veel gebruikt om webpagina s op te fleuren en om het de gebruiker gemakkelijker te maken om een pagina naar zijn eigen wens aan te passen, data in te voeren enz Het is een vrij eenvoudige programmeertaal die je eigenlijk net zo goed in kladblok kan intikken. Er bestaan ook speciale programma s die dienen om webpagina s te ontwerpen waarin je Javascript kan schrijven. Verwar Javascript dus zeker niet met het ingewikkelde Java, dát is pas een programmeertaal om Ú tegen te zeggen. Ten opzichte van Java is Javascript ongelooflijk eenvoudig en toch zo veelzijdig. Een eerste pagina Javascript moet altijd binnen een HTML-pagina worden geprogrammeerd. Om de browser (zoals Internet Explorer, Firefox, ) te laten weten dat het over HTML gaat, moeten er code-tags worden geplaatst. //Hier komt de code Op deze manier weet de browser al dat het over een HTML-pagina gaat, nu moeten we hem nog duidelijk maken dat we met Javascript gaan programmeren. De uiteindelijke code ziet er dan als volgt uit: //Hier komt de Javascriptcode Maak een bestandje aan met Kladblok, typ de bovenstaande code over, sla het op als stramien.html zodat je steeds met dat bestand kan beginnen. Open het bestand stramien.html in kladblok. LET OP: Open stramien.html NIET door er op te dubbelklikken, gebruik de rechtermuisknop, Openen met, Kladblok. Op die manier kan je het bewerken in Kladblok Voeg tussen de SCRIPT-tags de volgende code toe en sla het op als eerstepagina.html: document.write("hallo, wereld!") Philip De Vos Inleiding tot programmeren: Basis Javascript 1
Je bekomt het volgende documentje: document.write("hallo, wereld!") Open het bestand eerstepagina.html nu in je browser door er op te dubbelklikken. Wat zie je? Proficiat! Je hebt je eerste webpagina met Javascript gemaakt. Programmeren in Javascript Nu we onze eerste webpagina in Javascript hebben gemaakt, kunnen we meer Javscriptcode aanleren om een echt programma te maken. Eerst leren we je enkele basiscommando s die nodig zijn om te kunnen starten met programmeren. Struktograaf Javascript SCHRIJF Dit is een bericht alert("dit is een bericht") document.write("dit is een bericht") LEES lengte lengte = prompt("geef de lengte in:") + + * * oppervlakte := breedte * lengte oppervlakte = breedte * lengte Test het verschil uit tussen alert("tekst") en document.write("tekst"). Wat is het verschil? Philip De Vos Inleiding tot programmeren: Basis Javascript 2
Een eerste programma Probleemstelling We willen een klein programmaatje maken voor onze jongere broer die sommetjes wil controleren van zijn huiswerk. Hij geeft 2 getallen in, er wordt vervolgens automatisch op het scherm getoond wat de oplossing van de som is. Probleemanalyse Welke stappen zullen er moeten ondernomen worden? Gegeven: Geen, de gegevens worden door de gebruiker ingevoerd. Invoer: Verwerking: Uitvoer: Algoritme Maak in Struktograaf een PSD (Programma Structuur Diagram), genaamd som en test het uit. Programma Vertaal de code naar Javascript. In de tabel hierboven staat vermeld welke code in Struktograaf omgezet wordt naar welke Javascriptcode. Gebruik het bestand stramien.html om van te starten. De code zou er als volgt moeten uitzien: getal1 = prompt("voer getal 1 in: ") getal2 = prompt("voer getal 2 in: ") som = getal1 + getal2 document.write("de som is: ", som) Sla het bestand op als som.html Testen Open het bestand som.html en voer de volgende getallen in: Getal 1 : 5 Getal 2 : 7 Philip De Vos Inleiding tot programmeren: Basis Javascript 3
Wat komt er op het scherm? De opdracht prompt slaat de waarde die je ingeeft op als tekst, en dus niet als getal. Men kan er niet mee rekenen. Om dat te verhelpen moet je het converteren/omzetten naar een Integer (= een type getal). Dit gebeurt met het volgende commando: parseint(invoer). parseint(invoer) zet de ingevoerde waarde van het type tekst om naar het type getal Pas de code aan zodat hij nu wel de getallen optelt. Wat heb je veranderd in de code? Wat komt er nu op het scherm? Test het uitgebreid met verschillende getallen, controleer of de som klopt en of het programmaatje doet wat er van verwacht wordt (zie probleemstelling). Documenteren Plaats documentatie om te laten zien wat het programma juist doet. Commentaar/documentatie plaats je door twee schuine strepen of slash te typen, en daar vlak achter de tekst. De tekst zal genegeerd worden door de browser. //Commentaar en of documentatie Plaats de volgende commentaar op de juiste plaats in het programma. //Invoer getal 1 //Invoer getal 2 //Schrijf de som op het scherm Sla het bestand op. Extra Breidt de vorige oefening uit zodat er op het scherm de volgende tekst komt te staan: 5 + 7 = 12 in plaats van De som is: 12. Sla dit bestand op als som2.html. Noteer hieronder met welke code je dit op het scherm laat zien: Philip De Vos Inleiding tot programmeren: Basis Javascript 4
Disclaimer Deze cursus is gratis en vrij beschikbaar. Hij mag vrij gebruikt, gekopieerd en verspreid worden voor niet-commerciële doeleinden. Bij commercieel gebruik van de volledige of een gedeelte van de cursus moet de auteur (Philip De Vos) voorafgaande schriftelijke toestemming geven. Hij is bereikbaar op de site die op elke pagina vermeld staat. U bent steeds verplicht de auteur en zijn website te vermelden. Alle informatie is op zorgvuldige wijze samengesteld. Toch kan het voorkomen dat de inhoud fouten bevat. De auteur is niet aansprakelijk voor foutieve informatie. De auteur is ook niet aansprakelijk voor het volgen van een cursus, en indien van toepassing, voor het incorrect opvolgen van deze. Philip De Vos Inleiding tot programmeren: Basis Javascript 5