Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript intro • Wat is JavaScript? – Voegt interactiviteit toe aan pagina's – JavaScript is een scripttaal – Scripttaal = lichtgewicht programmeertaal – Meestal rechtstreeks opgenomen in de pagina's – JavaScript wordt geïnterpreteerd geen compilatie nodig! – Licentievrij
JavaScript intro • JavaScript =/ Java! – Verschillen in opzet en design – Java = volwaardige, complexe programmeertaal
JavaScript intro • Wat doet JavaScript? – Geeft HTML designers een programmeermogelijkheid – Dynamische tekst op een pagina invoegen – Reageren op events – HTML elementen lezen en schrijven – Data validatie – Gebruikersinformatie vergaren – Cookies aanmaken
JavaScript intro • Cookies – Waarden opslaan op de client PC – Wordt meeverstuurd bij aanvraag van de pagina – Kunnen aangemaakt + ingelezen worden worden met JavaScript – Voorbeeld cookies: • naam • paswoord • datum – http://www.w3schools.com/js/js_cookies.asp
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript invoegen • Hoe invoegen: <script type="text/javascript"> document.write("Hello World!");
JavaScript
JavaScript invoegen • Hoe invoegen: script begint <script type="text/javascript"> document.write("Hello World!");
script eindigt
script inhoud
JavaScript invoegen • Hoe invoegen: – document.write( ... ); • Schrijft inhoud naar het scherm • Wordt uitgevoerd bij het passeren – Herinner je: van boven naar onder en van links naar rechts
<script type="text/javascript"> document.write( "Hello World!" );
inhoud (van dit statement)
kommapunt = regeleinde
JavaScript invoegen • Hoe invoegen: – Eén regel = één statement – Kommapunt sluit de regel af – Als je meerdere statements op één regel wilt: • Altijd kommapunt gebruiken • Maar best: gewoon altijd kommapunt gebruiken! <script type="text/javascript"> document.write( regel_1 ); document.write( regel_2 ); document.write( regel_3 ); //...
JavaScript invoegen • Waar plaatsen – JavaScript wordt uitgevoerd wanneer gelezen door browser • Niet altijd gewenst • Bv. een functie controleerFormulier()
– Oplossing: scripts in head en body secties
JavaScript invoegen • Waar plaatsen – head - sectie: • Algemene functies plaatsen die overal op de pagina beschikbaar zijn • Functies zijn op elk moment beschikbaar • Bv. reageren op een event <script type="text/javascript"> //...
JavaScript invoegen • Waar plaatsen – body - sectie: • Scripts om uit te voeren wanneer de browser ze bereikt • Bv. generatie van inhoud
<script type="text/javascript"> //...
JavaScript invoegen • Waar plaatsen – Aantal scripts: • Het aantal scripts te plaatsen in de head of body is onbeperkt <script type="text/javascript"> //.. <script type="text/javascript"> //...
JavaScript invoegen • Waar plaatsen – Extern script • Zelfde principes als bij een extern CSS: – Herbruikbaar – Scheiding inhoud en scripting – Een extern script mag de <script> tag niet bevatten!
• .JS extentie Bv. mijnscript.js • Scriptregel plaatsen waar je anders de inhoud zou zetten
JavaScript invoegen • Waar plaatsen – Extern script • Zelfde principes als bij een extern CSS
JavaScript invoegen • Waar plaatsen – Extern script <script src="mijnScript.js"> ...
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript statements • JavaScript = reeks van uit te voeren statements <script type="text/javascript"> document.write( "Eerste regel" ); document.write( "Tweede regel" ); document.write( "Derde regel" ); //document.write( "ONzichtbare regel" ); //...
volgorde
JavaScript statements • JavaScript = reeks van uit te voeren statements <script type="text/javascript"> document.write( "Eerste regel" ); document.write( "Tweede regel" ); document.write( "Derde regel" ); //document.write( "ONzichtbare regel" ); //...
commentaar inhoud wordt geïnterpreteerd als HTML
één statement
JavaScript statements • JavaScript = reeks van uit te voeren statements • JavaScript is hoofdletter gevoelig • Zoek de fout: document.write( "Dit is een test" );
document.Write( "Dit is EEN TEST" );
JavaScript statements • JavaScript = reeks van uit te voeren statements • JavaScript is hoofdlettergevoelig • Zoek de fout: document.write( "Dit is een test" ); verschillend, maar correct! document.Write( "Dit is EEN TEST" );
fout!
JavaScript statements • Oefening 1: – Maak volgende pagina door enkel JavaScript te gebruiken
JavaScript statements • Browser security:
1
JavaScript statements • Browser security:
2 3
JavaScript statements • Browser security: – Reden: we werken met een "dynamische" pagina nu – Elke keer opnieuw bevestigen – Niet als pagina online staat (gelukkig)
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript popup berichten • 3 soorten beschikbaar: – alert box
medeling tonen – confirm box bevestiging vragen – prompt box input vragen
• Standaard boxen: – Lelijk – Taalafhankelijk van de client PC
JavaScript popup berichten • 3 soorten beschikbaar: – alert: medeling tonen • Handig om naar fouten te zoeken • De gebruiker moet OK klikken om verder te kunnen <script type="text/javascript"> alert("Klik OK om door te gaan...");
JavaScript popup berichten • 3 soorten beschikbaar: – confirm box: bevestiging vragen • Enkel ja/nee antwoord <script type="text/javascript"> var antwoord = confirm( "Ga je akkoord met deze statement?" );
JavaScript popup berichten • 3 soorten beschikbaar: – prompt box: input vragen • Oude manier om invoer te vragen • Beter: via formulieren (zie les 1) <script type="text/javascript"> var antwoord = prompt( "Geef je voornaam in:" );
JavaScript popup berichten • Terugkeerwaarde: – Geeft terug wat de gebruiker ingevoerd heeft <script type="text/javascript"> var antwoord = confirm( "Klik OK om door te gaan..." );
toekenning
<script type="text/javascript"> var antwoord = prompt( "Geef je voornaam in:" );
naam v/d variabele
functie
– Een functie werkt ~ een wiskunde formule: • Som = a + b
– "De variabele 'antwoord' krijgt de waarde van de functie 'prompt()' "
JavaScript popup berichten • Oefening 2: – Maak een scherm dat: • • • •
De voornaam van de gebruiker vraagt De familienaam van de gebruiker vraagt Dit uitschrijft op het scherm Een bericht toont "bedankt"
– Tips: • Maak gebruik van de vorige slide • Maak gebruik van de slide van "document.write( ... )"
– Gebruik een intern JavaScript
JavaScript popup berichten • Oefening 2:
1 3
2
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript functies • Bevat code die niet onmiddellijk uitgevoerd moet worden • Bevat code voor een event of functie - aanroep • Mogen van overal aangeroepen worden • Afspraak: plaatsen in sectie • Voorbeeldfunctie: controleerFormulier() <script type="text/javascript"> function controleerFormulier() { //... }
JavaScript functies • Wordt enkel uitgevoerd bij aanroep uitzondering op het boven - onder- links- rechts principe <script> function controleerFormulier() { //... }
pas uitgevoerd bij aanroep
alert( "Hallo daar" );
wordt onmiddellijk uitgevoerd
Webbuilding gevorderden – les 3 • • • • • • •
JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML
JavaScript events • Event = gebeurtenis opgemerkt door JavaScript • Elk element heeft van deze events • Voorbeeld gebeurtenissen: – muisklik – pagina laden – formulier submit
onmouseclick onpageload onsubmit
JavaScript events • Voorbeeld gebeurtenis: – formulier submit
onsubmit
<script> function controleerFormulier() { //... }
functie die opgeroepen wordt bij het "onsubmit" event
