Høgskolen i Oslo Webprogrammering Introduksjon til Java-scripting

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.

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

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

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

Samspillet klient / tjener Hent 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

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).

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. }

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.

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.)

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

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):

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

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

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; }

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

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

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)

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; }

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

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

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.

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"/>

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