Høgskolen i Oslo Webprogrammering Introduksjon til Java-scripting.

Presentasjon om: "Høgskolen i Oslo Webprogrammering Introduksjon til Java-scripting."— Utskrift av presentasjonen:

1 Høgskolen i Oslo Webprogrammering Introduksjon til Java-scripting

2 I dag l Introduksjon til Javascript l Gjennomgang av kode l Oppgaveløsning på lab –Ingen ukeoppgave nå. –Oblig 2 leveres til søndag. –Start på prosjektet.

3 Popularitet av språk l Ref: TIOBE Programming Community Index for March 2011 l Basert på antall ”chatt” på internett

4 Popularitet av språk 2 Lastet opp av prog i 2009

5 Klientsideprogrammering med JavaScript l Et JavaScript er et lite program som blir utført ”i en nettside”. l JavaScript kan brukes for å lage interaktive nettsider. l Noen anvendelser: –Inndatavalidering –Utføre beregninger –Menyer –Visuelle effekter l Inndatavalidering –Kontroll på klienten gir umiddelbar tilbakemelding til bruker. –Visse kontroller vil bli gjentatt på tjenersiden

6 Samspillet klient / tjener Hent http:://localhost/index.php C://…/index.php Svar : Kildekode i form av HTML 1) 2) PHP Tolker ”; ?> document.write( ”Hei Java" ); Hei PHP document.write( ”Hei Java" ); 3) Hei PHP Hei Java Java Script Tolker

7 Bruke JavaScript i nettsider l Elementet rammer inn kode. Datoen nå: document.write(" " + Date() + " " " ); Her kommer det vanlig HTML igjen. l Metoden document.write skriver til det aktive dokumentet (nettsiden).

8 Håndtere hendelser l Hendelse: –et tastetrykk, et museklikk, at musmarkøren beveger seg, at nettsiden blir lastet, … l Til en hendelse kan man knytte en aksjon: function show_alert() { alert("Hei!"); // viser en popup box med teksten. }

9 Variable og datatyper l En variabel har en datatype: Integer, Float, String, Boolean. var tall = 10; var navn = ”Ole”; var gammelNok = false; tall = tall + 1; navn1 = navn + ”Hansen”; (ikke. som i php)  Kan utelate var som i PHP.

10 Valgsetninger l Hvis alder er under 16 eller over 70 blir det halv pris. var pris = 50; var alder = 73; if ( alder 70 ) { pris = pris/2; } document.write( "Billettpris: " + pris ); Objekt sin metode (php ->) som ECHO! Sette sammen to stringer (php.)

11 Løkker document.write( "Tallene fra 1 til 10: " ); for ( teller=1; teller<=10; teller++ ) { document.write( teller ); document.write( " " ); }

12 Brukerdefinerte funksjoner l Legger inn funksjonsdefinisjonen i dokumenthodet ( ): function velkommen() { alert( "Velkommen!" ); } l Lenger ned bruker vi den (her blir den utført ved lasting av siden):

13 Objekthierarkiet i JavaScript  Avlese og endre innholdet av tekstboksen txtBoks 1 i skjemaet form 1 : var navn = document.form1.txtBoks1.Value; document.form1.txtBoks1.Value = " Hei " + navn; Ole txtBoks 1 Hei Ole txtBoks 1 Form 1

14 Bruk av div i JavaScript l Endre innholdet av en div med ID = divFelt document.getElementFromId(”divFelt”). InnerHTML = document.form1.txtBoks1.Value; Ole txtBoks 1 form 1 _ Ole

15 Sjekk av input  skjema 1. En tekstboks med navn kontroll 1. l I form-elementet : onsubmit=”return sjekk()” function sjekk() { x = document.skjema1.kontroll1.value if ( x < 100 ) { alert("FEILMELDING"); return false; } return true; }

16 Inndatavalidering l I skjemaet kalles funksjonen: function sjekk() { x = document.skjema1.kontroll1.value if ( x < 100 ) { alert("FEILMELDING"); return false; } return true; }

17 function sjekk() { if (document.skjema.input.value <= 100 ) { alert("Feil, tallet må være større enn 100"); return false; } return true; } Skriv inn et tall over 100 : <input type="submit" value="Sjekk tall" name="knapp" onClick = "return sjekk()" /> l Valideringsfeil: Funksjonen: return = false l Går ikke videre til neste side

18 function sjekk() { x = document.skjema.input.value; if ( x <= 100 ) { alert("Feil, tallet må være større enn 100"); return false; } return true; } <form action="neste.php" method="GET" name="skjema” onSubmit = "return sjekk()"> Skriv inn et tall over 100 : l Samme funksjon som forrige (trigger lagt på form istedenfor knapp)

19 Sjekke når feltet endres l function sjekk() { x = document.skjema.input.value; if ( x <= 100 ) { alert("Feil, tallet må være større enn 100"); return false; } return true; }

20 Confirm boks (Ok/Cancel) function bekreftelse() { r=confirm("Trykk en knapp"); if (r==true) { document.write("Du trykte OK"); } else { document.write("Du trykte Cancel"); } }

21 Andre ”triggere” l onMouseOver l onMouseOut l onFocus l onBlur (mister fokus) l onLoad (før siden vises)

22 Endre teksten på en knapp l l Litt mer komplisert å bytte farge og tekst på en knapp: –Må bygge opp knappen som en hypertekstreferanse –Ha to forskjellige bilder for å vise disse ved onMouseOver og onMouseOut.

23 Bytte bilde i en knapp l Bilde1 og Bilde2 byttes ved å flytte musen over. l Trykkes linken (bildet) : neste.php <a href="neste.php" onmouseover="document.home.src=’bilde1.jpg'" onmouseout="document.home.src=’bilde2.jpg'"> <img src=”bilde1.jpg" name="home" border ="0" height="30" width="60"/>

24 Ny side fra Javascript function neste_side () { window.location = ”Neste.php”; }