Web building gevorderden: CSS & JavaScript. Karel Nijs 2008/11

Transcriptie

1 Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11

2 Webbuilding gevorderden les 3 JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript events DHTML

3 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

4 JavaScript intro JavaScript =/ Java! Verschillen in opzet en design Java = volwaardige, complexe programmeertaal

5 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

6 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

8 JavaScript invoegen Hoe invoegen: <html> <body> <script type="text/javascript"> document.write("hello World!"); JavaScript </html> </body> </script>

9 JavaScript invoegen Hoe invoegen: <html> <body> <script type="text/javascript"> script begint script inhoud document.write("hello World!"); </html> </body> </script> script eindigt

10 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!" ); </script> inhoud (van dit statement) kommapunt = regeleinde

11 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 ); //... </script>

12 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

13 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 <html> <head> </head> </html> <script type="text/javascript"> //... </script>

14 JavaScript invoegen Waar plaatsen body- sectie: Scripts om uit te voeren wanneer de browser ze bereikt Bv. generatie van inhoud <html> <head> </head> <body> </body> </html> <script type="text/javascript"> //... </script>

15 JavaScript invoegen Waar plaatsen Aantal scripts: Het aantal scripts te plaatsen in de head of body is onbeperkt <html> <head> </head> <script type="text/javascript"> //.. </script> </html> <body> </body> <script type="text/javascript"> //... </script>

16 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

17 JavaScript invoegen Waar plaatsen Extern script Zelfde principes als bij een extern CSS

18 JavaScript invoegen Waar plaatsen Extern script <html> <head> </head> <script src="mijnscript.js"></script> <body> </body> </html>...

20 JavaScript statements JavaScript = reeks van uit te voeren statements <script type="text/javascript"> </script> document.write( "Eerste regel" ); document.write( "Tweede regel" ); document.write( "Derde regel" ); //document.write( "ONzichtbare regel" ); //... volgorde

21 JavaScript statements JavaScript = reeks van uit te voeren statements <script type="text/javascript"> </script> document.write( "Eerste regel" ); document.write( "Tweede regel" ); document.write( "Derde regel" ); //document.write( "ONzichtbare regel" ); //... één statement commentaar inhoud wordt geïnterpreteerd als HTML

22 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" );

23 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!

24 JavaScript statements Oefening 1: Maak volgende pagina door enkel JavaScript te gebruiken

25 JavaScript statements Browser security: 1

26 JavaScript statements Browser security: 2 3

27 JavaScript statements Browser security: Reden: we werken met een "dynamische" pagina nu Elke keer opnieuw bevestigen Niet als pagina online staat (gelukkig)

29 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

30 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..."); </script>

31 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?" ); </script>

32 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:" ); </script>

33 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> <script type="text/javascript"> var antwoord = prompt( "Geef je voornaam in:" ); </script> naam v/d variabele functie Een functie werkt ~ een wiskunde formule: Som = a + b "De variabele 'antwoord' krijgt de waarde van de functie 'prompt()' "

34 JavaScript popup berichten Oefening 2: Maak een scherm dat: Tips: De voornaam van de gebruiker vraagt De familienaam van de gebruiker vraagt Dit uitschrijft op het scherm Een bericht toont "bedankt" Maak gebruik van de vorige slide Maak gebruik van de slide van "document.write(... )" Gebruik een intern JavaScript

35 JavaScript popup berichten Oefening 2: 1 3 2

37 JavaScript functies Bevat code die niet onmiddellijk uitgevoerd moet worden Bevat code voor een event of functie- Mogen van overal aangeroepen worden Afspraak: plaatsen in <head> sectie Voorbeeldfunctie: controleerformulier() aanroep <head> </head> <script type="text/javascript"> function controleerformulier() { //... } </script>

38 JavaScript functies Wordt enkel uitgevoerd bij aanroep uitzondering op het boven- onder- links- rechts principe <body> <script> function controleerformulier() { //... } pas uitgevoerd bij aanroep </body> alert( "Hallo daar" ); </script> wordt onmiddellijk uitgevoerd

40 JavaScript events Event = gebeurtenis opgemerkt door JavaScript Elk element heeft van deze events Voorbeeld gebeurtenissen: muisklik onmouseclick pagina laden onpageload formulier submit onsubmit

41 JavaScript events Voorbeeld gebeurtenis: formulier submit onsubmit <head> </head> <body> <script> function controleerformulier() { //... } </script> functie die opgeroepen wordt bij het "onsubmit" event <form action="..." method="post" onsubmit="controleerformulier()" </body> </form <! > normale formulierinhoud

42 JavaScript events JavaScript is de lijm tussen gebeurtenissen en de afhandeling ervan

43 JavaScript events Oefening 3: Zoek uit welke events volgend element heeft: <input type="button" > Tip: vergeet ook niet de algemene events op te zoeken! Voer volgende functie uit bij een klik op een knop: earthquake() Voeg volgend extern JavaScript in: g_les3_oef3.js

44 JavaScript events Oefening 3:

46 DHTML Dynamic HTML is géén aparte taal DHTML is een term gebruikt om dynamische en interactieve websites te beschrijven DHTML combineert: HTML CSS JavaScript DOM (Document Object Model)

47 Bedankt voor jullie aandacht!