dag 7 javascript n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Dag 7 : Javascript PowerPoint Presentation
Download Presentation
Dag 7 : Javascript

Loading in 2 Seconds...

  share
play fullscreen
1 / 7
justus

Dag 7 : Javascript - PowerPoint PPT Presentation

97 Views
Download Presentation
Dag 7 : Javascript
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. 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 . ": <b>". $navn ."</b>: <br />". $kommentar."<br /><hr /><br />" .$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 . ": <b>". $navn ."</b>: <br />". $kommentar."<br /><hr /><br />" .$tekst;file_put_contents("kommentarfil.html", $tekst); }?>

  3. Javascript - alert-sætning alert("hej") <script type="text/javascript"> alert("hej") </script> Nederst i filen – efter </html> Øvelse: Opret en html-fil med alert-scriptet, og test det (husk: det kan testes lokalt)

  4. Javascript - eventhandler … <style type="text/css"> div {height:100px; width:100px} #red{background-color:red} #blue {background-color:blue} </style> <body> <div id="red"></div> <divid="blue"></div> … Øvelse: prøv at køre programmet onclick="alert('du klikkede rød') "></div> onclick="alert('du klikkede blå') "></div>

  5. 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 sitbrowservindue

  6. Javascript – flere sætninger • location.href='http://google.dk' • 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 <u>røde</u> 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.

  7. Javascript – billedgalleri 1 http://helf.monline.dk/galleri1.html <style type="text/css"> div {cursor:pointer} divimg {width:50px} #vis img{width:500px} </style> … <divonclick="document.getElementById('vis').innerHTML=this.innerHTML" > <imgsrc="bil1.jpg" alt="billede1" /> </div> <divonclick="document.getElementById('vis').innerHTML=this.innerHTML" > <imgsrc="bil2.jpg" alt="billede2" /> </div> <divonclick="document.getElementById('vis').innerHTML=this.innerHTML" > <imgsrc="bil3.jpg" alt="billede3" /> </div> <divonclick="document.getElementById('vis').innerHTML=this.innerHTML" > <imgsrc="bil4.jpg" alt="billede4" /> </div> <div id="vis"></div>