Dag 7: Javascript Screen-broadcast – gå til - Indtast mødenummer - Vælg html-viewer - Klik Join sessionwww.123beam.com Php-opsamling (php-warning i kommentar-program) Javascript-sætninger Events og event-handlers Billedgalleri 1

Php-opsamling: funktionen isset <?php $tekst = file_get_contents("kommentarfil.html"); $dato = date("j:M:H:i", time()); $navn = $_POST["navn"]; $kommentar= $_POST["kommentar"]; $tekst = $dato. ": ". $navn." : ". $kommentar." ".$tekst; file_put_contents("kommentarfil.html", $tekst); ?> <?php $tekst = file_get_contents("kommentarfil.html"); $dato = date("j:M:H:i", time()); if (isset($_POST["navn"]) && $_POST["navn"]!="" && $_POST["kommentar"]!=""){ $navn = $_POST["navn"]; $kommentar= $_POST["kommentar"]; $tekst = $dato. ": ". $navn." : ". $kommentar." ".$tekst; file_put_contents("kommentarfil.html", $tekst); } ?>

Javascript - alert-sætning alert("hej") alert("hej") Nederst i filen – efter Øvelse: Opret en html-fil med alert-scriptet, og test det (husk: det kan testes lokalt)

Javascript - eventhandler … div {height:100px; width:100px} #red{background-color:red} #blue {background-color:blue} … Øvelse: prøv at køre programmet onclick="alert('du klikkede rød') "> onclick="alert('du klikkede blå') ">

Javascript – flere events Brugers mus rører et element: onmouseover Brugers mus har været over et element, men kommer nu udenfor: onmouseout Brugeres mus har været klikket ned og slippes nu: onmouseup Bruger kommer ind på en side: onload (på body-tag) Bruger lukker eller forlader siden: onunload (på body-tag) Bruger ændrer størrelsen på sit browservindue: onresize (på body-tag) Bruger ændrer indholdet i et input-element: onchange En form submit-knap klikkes: onsubmit (på form-tag) Øvelse: lav en ændring af scriptet fra før, så der alertes ”mus berører Rød boks”, ved mouseover på den røde div-boks, og så der alertes: ”Nu ændrer du på vinduets størrelse!”, når brugeren resizer sit browservindue

Javascript – flere sætninger location.href=' document.getElementById('red'). style.backgroundColor='green' document.getElementById('red'). style.width='20px' document.getElementById('red').style.display='none' document.getElementById('red').style.display='block' document.getElementById('red'). innerHTML= 'Nyt indhold til den røde boks' Øvelse: Gør den røde boks til et link, som fører til keas webside. Hvis man klikker på den blå boks, skal den røde boks forsvinde. Ved mouse-over på røde boks, skal der stå ”musen rørte ved rød boks” i den blå boks.

Javascript – billedgalleri 1 div {cursor:pointer} div img {width:50px} #vis img{width:500px} …