programmera.net -> javascript -> normal     för utskrift      info@programmera.net

JavaScript

1. Vad används JavaScript till?
2. Hur använder jag exempelscripten?
3. Byta bild
4. Skicka Formulär
5. Händelsen ONCLICK
6. Händelsen ONCHANGE
7. Sätta Cookies
8. Starta javascript från en karta

1. Vad används JavaScript till?

JavaScript används för att köra script i browsern. Den mesta koden körs vanligtvis på servern med något scriptspråk som t. ex. PHP,ASP eller JSP, men ofta vill man lösa problem direkt i browsern, utan att surfaren måste vänta på att ladda en ny sida. Nedan listar jag några problem som bäst löses med javascript:

  • Byta ut en bild när musen rör sig över den för att förtydliga att det är en länk.
  • Kontrollera ifyllda data innan ett formulär skickas till servern.
  • Öppna/stänga ett nytt fönster med speciellt utseende.

2. Hur använder jag exempelscripten?

Du använder exempelscripten som listas här genom att klicka i webbsidan med vänster musknapp och välja Visa källa (MS Internet Explorer) eller Visa sidkod (Netscape). Då kommer HTML-koden att visas i ett eget fönster. Inbakat i HTML-koden finns javascripten, och kan kopieras rakt av. Det är fullt tillåtet att kopiera mina javascript.

3. Byta bild

Ofta vill man byta en bild när musen rör sig över den. Såhär gör man:

4. Skicka Formulär

Webbprogrammering bygger på att användaren interagerar med formulär. Ofta vill man stoppa skickandet av ett formulär om man med javascript kan hitta felaktigheter direkt.

5. Händelsen ONCLICK

Javascript används ofta för att reagera på vad du gör med webbsidan. En vanlig händelse är att du klickar på något, och med ONCLICK kan man fånga upp ett klick. I HTML-taggen skriver man alltså ONCLICK och namnet på den JavaScriptsfunktion man vill ska starta då klicket inträffar. I och med JavaScript1.2 kan ONCLICK kopplas till alla HTML-element. Nedan listas de HTML-element som man oftast klickar på:

  • INPUT TYPE=button ONCLICK=foo()
  • INPUT TYPE=checkbox ONCLICK=foo()
  • INPUT TYPE=radio ONCLICK=foo()
  • INPUT TYPE=reset ONCLICK=foo()
  • INPUT TYPE=submit ONCLICK=foo()
  • INPUT TYPE=image ONCLICK=foo()
  • A ONCLICK=foo()
Ett exempel på hur händelserna fångas upp:

6. Händelsen ONCHANGE

Ibland vill man att textfält ska reagera på när texten förändras och att selectboxar ska reagera på när man väljer ett nytt alternativ. Med ONCHANGE kan man fånga en sådan förändring. Följande formulärselemet är de enda som kan använda ONCHANGE:

  • INPUT TYPE=text ONCHANGE=foo()
  • INPUT TYPE=password ONCHANGE=foo()
  • INPUT TYPE=file ONCHANGE=foo()
  • TEXTAREA ONCHANGE=foo()
  • SELECT ONCHANGE=foo()
Varför vill man att browsern ska reagera på när en text förändras? När man ändrar en textarea vill man kanske varna surfaren att texten är för lång. Vid filuppladdning vill man kanske kontrollera att filnamnet har rätt ändelse. Eller vid select kanske man vill visa en bild eller text som beskriver det senaste valet. Ett exempel på hur händelserna fångas upp:

7. Sätta Cookies

I t. ex. PHP sätter man en kaka med funktionen setcookie(). Men man kan också sätta kakor med javascript.

8. Starta javascript från en karta

Ofta vill man att olika områden i en bild ska starta javascript eller fungera som länkar om man klickar på dem. Anledningen till att man inte använder flera små bilder är att de olika områdena kanske inte är rektangulära. För att åstakomma detta använder man HTMLtaggen MAP på följande sätt: 
<IMG SRC="a.txt" USEMAP="#min_karta" >
<MAP NAME="min_karta" >
<AREA SHAPE="POLY" COORDS="250,346,250,208,271,344,271,344,249,346" 
onMouseOver="popup('Friday')" onMouseOut="popout()">
<AREA SHAPE="POLY" COORDS="229,344,250,208,250,346,249,346,228,344" 
onMouseOver="popup('Saturday')" onMouseOut="popout()">
</MAP>
Taggen AREA bestämmer vilka koordinater som avgränsar ett område.