0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over te vinden op het Internet en ook veel voorbeeld scripts. Aangezien jullie allemaal een moderne browser geïnstalleerd hebben, kunnen jullie allemaal JavaScript uitvoeren en dit gebeurt ook dagelijks wanneer jullie op het Internet browsen. Om zelf in JavaScript te leren programmeren, gaan we gebruik maken van de webruimte. 1.1 - JavaScript toevoegen Voordat we écht beginnen met programmeren, moeten we een HTML bestand maken waarin we het gaan programmeren. Maak een bestand in de webruimte genaamd javascript1.htm en plaats deze niet in de map js, maar gewoon bij je andere HTML bestanden. Plaats in dit HTML bestand de standaard <html> en <body> tags op de juiste plaatsen voordat je verder gaat. Om in JavaScript te werken, maken we gebruik van de <script>-tag. Zorg dat je in de body van je pagina een <script> tag en een </script> tag na elkaar neerzet (dit mag op afzonderlijke regels). Hiertussen gaan we JavaScript programmeren!
1.2 Hello World Een standaard manier om kennis te maken met een programmeertaal is om de computer het berichtje Hello World! aan je te laten zien. Dit gaan we nu dus ook doen. Typ tussen de <script> en </script> tag de volgende code: alert('hello World!'); Je pagina zal er dan als volgt uitzien in de editor: Mocht dit niet het geval zijn, zoek dan uit waar het fout is gegaan. Het is namelijk belangrijk dat je dit goed doet, want bij de volgende opdrachten wordt dit niet verder weergegeven. Sla je gemaakte pagina op en klik op Preview. Wat gebeurt er? Had je verwacht dat dit zou gebeuren?
2.1 - Input Om een interactief programma te maken, willen we natuurlijk ook input vragen aan de gebruiker. Maak een nieuw bestand in de webruimte, genaamd: javascript1.htm en zet hierin weer de juiste <html>, <body> en <script> structuur op. Tussen de <script>-tags schrijf je de volgende code: prompt('wat is je naam?'); Wat verwacht je dat deze code doet? De code ziet er vergelijkbaar uit met de alert van opdracht 1.2. Sla je pagina op en Preview deze. Gebeurt er wat je had verwacht? Zoals bij Scratch is het niet heel nuttig om een vraag te stellen en vervolgens niets te doen met het antwoord. We willen het antwoord opslaan in een variabele zodat we er vervolgens leuke dingen mee kunnen doen. Pas je huidige code aan tot: naam = prompt('wat is je naam?'); Zo simpel is het om een variabele aan te maken in JavaScript. Het lijkt erg op het oranje Maak [variabele] [waarde] -blok uit Scratch, maar dan zelf getypt. Voer deze code weer uit door op de Preview knop te drukken. Het klopt dat de code eigenlijk niets anders lijkt te doen dan voorheen.
2.2 - Input interactie In deze paar simpele opdrachtjes heb je al een heleboel geleerd: 1. Hoe je JavaScript in HTML kunt zetten (tussen <script>-tags) 2. Twee JavaScript functies: a. De alert functie, welke een popupje weergeeft b. De prompt functie, welke een invulvakje weergeeft 3. Hoe je een regel JavaScript eindigt (met een puntkomma) 4. Hoe je teksten typt in JavaScript (tussen aanhalingstekens) 5. Hoe je variabelen maakt in JavaScript (variabelenaam = waarde). Tussen de <script>-tags kun je meerdere regels JavaScript typen. Iedere regel sluit je af met een puntkomma. Tips! Je kunt eenvoudig met de + meerdere teksten aan elkaar knopen. Probeer het maar eens uit! In deze opdracht ga je zelf op onderzoek uit hoe je in JavaScript werkt met de dingen die je al hebt geleerd. Zorg er dus voor dat je alles uit bovenstaand lijstje snapt. Je mag altijd omhoog scrollen naar voorgaande opdrachten. De opdracht bestaat uit verschillende kleine opdrachtjes. Probeer de volgende dingen te programmeren in javascript2.htm : 1. Vraag de gebruiker om zijn/haar naam en geef hierna een popup weer met de ingevoerde naam. 2. Vraag de gebruiker om zijn/haar naam en geef hierna één popup weer waarin Hoi, gevolgd door de ingevoerde naam (in dezelfde popup dus!)
3. Zoek uit hoe je in prompt een standaardwaarde weer kunt laten geven. Hiervoor zul je misschien even moeten Googlen. Het gewenste resultaat is: 4. Maak een programma met twee prompts. Een om de voornaam te vragen van de gebruiker en een om de achternaam van de gebruiker te vragen. Plak deze twee waardes aan elkaar en geef ze weer in een popup.
3.1 - jquery Standaard JavaScript is leuk, maar steeds opnieuw het wiel uitvinden is niet zo spannend. Om het allemaal sneller en leuker te maken, gaan we gebruik maken van jquery. jquery is een JavaScript bibliotheek welke allerlei handige functies bevat om het programmeren in JavaScript te vergemakkelijken. Zo schrijf je sneller, met minder code hele ingewikkelde dingen. Voordat we jquery kunnen gebruiken op onze pagina, moeten we de webbrowser laten weten waar hij jquery kan vinden. Dit doen we door een extra <script>-tag toe te voegen. Aangezien de gebruiker de jquery niet hoeft te zien, plaatsen we dit niet in de body. We maken hiervoor een extra element aan in onze <html>-tag genaamd <head>. De head van een pagina bevat informatie welke de webbrowser kan gebruiken, maar de gebruiker niet hoeft te zien. Zorg ervoor dat je de volgende pagina-structuur opzet in een bestand genaamd jquery1.html welke je bij al je andere html-bestanden neerzet: <html> <head> <script src="http://smcaccent.nl/jquery" type="text/javascript"></script> </head> <body> <h1>mijn jquery pagina</h1> </body> </html>
3.2 - jquery knoppen De pagina van de vorige opdracht doet nog vrij weinig, maar hier gaan we nu verandering in brengen. We gaan namelijk interactieve knoppen toevoegen aan de pagina. Begin met het toevoegen van een knop onder de h1-kop. Dit doe je door middel van de volgende HTML: <button id="mijnknop">klik op mij!</button> De knop heeft een id attribuut gekregen zodat we er later naar kunnen verwijzen. Sla de pagina op en kijk hoe de knop eruit ziet. Als je op de knop klikt, gebeurt er nog niets. Dit gaan we veranderen met jquery.
Maak onder je knop een <script>-tag en plaats hierin de volgende code; $('#mijnknop').click(function() { alert('hello World!'); }); De code bestaat uit een aantal delen: - We beginnen met een dollar-teken ($) om aan te geven dat we met jquery gaan werken. - Tussen de haakjes geven we aan welk element we een speciale actie mee willen geven. In dit geval is dat onze knop. Aangezien we onze knop het id mijnknop gegeven hebben, kunnen we ernaar verwijzen door gebruik te maken van #mijnknop. - De.click( ); die erachteraan komt, geeft aan dat we de klikactie functionaliteit willen gaan geven. Tussen de haken van de.click( ); bouwen we wat we willen dat er gebeurt. - De function() { } is een formaliteit. Neem deze gewoon over. Tussen de accolades, { en }, zet je vervolgens je werkelijke actie. - Deze actie is bekend, namelijk de Hello World example van 1.2. Probeer nu zelf meerdere knoppen te maken en ze allemaal een afzonderlijke actie te geven. Ga als volgt te werk: - Maak drie knoppen met verschillende teksten erop (bijvoorbeeld knop1, knop2, knop3). - Geef iedere knop een uniek id als id-attribuut (belangrijk!). - Geef zodra er op de knop wordt gedrukt een tekst weer. De tekst verschilt per knop (bijvoorbeeld Hoi, Hallo, Doei ).
4 - jquery code mengen jquery is nog steeds gewoon JavaScript en we kunnen de codes welke we geleerd hebben in de eerste opdrachten dus ook prima mengen met jquery. In deze opdracht ga je zelf proberen aan de hand van de voorgaande kennis een aantal interactieve knoppen te maken. Deze opdracht maak je in een nieuw bestand genaamd jquery2.html. Maak drie knoppen aan met de volgende teksten en oriëntaties: Gebruik hiervoor paragrafen. Zorg ervoor dat de volgende acties uitgevoerd worden per knop: Voornaam: Als er op deze knop gedrukt wordt, moet er om je voornaam worden gevraagd. Deze moet worden opgeslagen in een variabele ( voornaam ) Achternaam: Als er op deze knop gedrukt wordt, moet er om je achternaam worden gevraagd. Deze moet worden opgeslagen in een variabele ( achternaam ) Toon: Als er op deze knop gedrukt wordt, moet er een alert weergegeven worden met je Hoi <voornaam> <achternaam>!. Waarbij de variabelen dus gebruikt moeten worden. Uitbreiding: Als je nogmaals op de voornaam-knop klikt, moet als standaard-waarde de eerder ingevulde naam worden weergegeven.