JavaScript
Hva er JavaScript?
JavaScript er et programmeringsspråk.
JavaScript-koden inkluderes i html-dokumentet og kan kjøres av
nettleseren. Mer presist: Koden kompileres og kjøres på klientsiden.
JavaScript kan brukes til å gi html-dokumenter økt funksjonalitet.
(Eksempler følger snart.)
JavaScript ble oppfunnet av Netscape, men støttes også av andre
nettlesere enn Netscape, bl.a. Internet Explorer. Microsoft har utviklet Jscript,
som likner svært på JavaScript.
Anvendelse: Bruk av hendelsesbehandler til å åpne varselvindu
[Kap. 11.1.4]
I dette eksempelet blir et lite varsel-vindu med tekst åpnet dersom musmarkøren
føres over et skjemaelement.
Eksempel
Kommentarer til dette eksempelet:
- "ONMOUSEOVER" er et eksempel på en Javascript-hendelsesbehandler
(eng.: event handler). Hendelsesbehandlere er attributter i
html-elementer. En hendelsesbehandler detekterer når en viss hendelse
(eng.: event) har inntruffet og kaller eller utfører en Javascript-funksjon.
- "alert" er et eksempel på en innebygd Javascript-funksjon.
(Du kan bruke dine egen-konstruerte funksjoner også, som illustrert i
eksempler nedenfor.)
- Funksjonen som skal kalles, her "alert", angis som verdien
av hendelsesbehandler-attributten, som her er ONMOUSEOVER.
- "alert"-funksjonen har et kall-argument eller
inn-argument. Kall-argumentet er her teksten 'Her er teksten i
varsel-vinduet.'.
Anvendelse: Omadressering til et annet Html-dokument
[Kap. 11.1.8 i Webteknikk]
Enkelt med hendelsbehandleren onload anvendt på BODY-elementet
(dokumentet kan ellers være tomt).
Syntaks:
<BODY onload='window.open("nytt_dok.htm","_self")'>
Eksempel:
Dette dokumentet har adressen http://www.techteach.no/fag/kurs850/leksjon6/omadr_javascript.htm,
men du sparkes videre til HiTs hjemmeside (http://www.hit.no).
En annen løsning er å bruke et META-element inne i HEAD-elementet, som følger
(sparkes videre til HiTs hjemmeside etter 3 sekunder):
<HEAD>
<META HTTP-EQUIV =
"Refresh" Content="3;
URL=http://www.hit.no">
</HEAD>
Anvendelse: Skjemasjekk
[Kap. 11.1.10]
Et
hjemmelaget eksempel.
I ovennevnte eksempel er det sjekk av bare ett element vha. (den hjemmelagde)
JavaScript-funksjonen. Hvis du vil bruke samme JavaScript-funksjon til å sjekke
to (og tilsvarende dersom det er flere enn to) flere tekstlinjeelementer i
skjemaet, kan du skrive som her:
onSubmit="return
sjekk(this.tekstfelt1.value) && sjekk(this.tekstfelt2.value);">
i stedet for bare
onSubmit="return
sjekk(this.tekstfelt1.value);">
Det fins mange ferdige JavaScript-skript for skjemasjekk-skript på web. Her
er et eksempel: Email
Address Validation, som sjekker at e-postadressen er korrekt utfylt med
lovlig syntaks.
Eller hva med dette,
som sjekker at alle elementer i et skjema er fylt ut eller valgt.
Anvendelse: Åpne flere dokumenter i hver sine nettleservinduer, samtidig
Dette
eksempelet illustrerer hvordan vi kan bruke JavaScript til å åpne flere
dokumenter i hver sine nettleservinduer, samtidig.
Kommentarer til dette eksempelet:
- Hendelsesbehandleren ONCLICK="aapne_nye_vinduer()" er attributt
til IMG-elementet.
- Funksjonen "aapne_nye_vinduer()", som altså kalles ved
aktivering av hendelsesbehandleren ONCLICK, åpner 4 ulike nettleservinduer:
- I de tre første vinduene åpnes eksisterende html-dokumenter
(dok1.htm osv.).
- Vindu 4 viser den formatterte html-koden definert i funksjonen
"aapne_nye_vinduer()".
- Vindu 3 har ikke verktøyfelt (toolbar) for menyer og
funksjonsknapper. Verktøyfeltet er fjernet vha. argumentet "toolbar=no"
i JavaScript-koden
window.open("dok3.htm","vindu3","toolbar=no")
En rekke andre argumenter kan brukes for å bestemme hvordan det
nye vinduet skal se ut.
- I eksempelet inngår window.open-metoden(e) i den egenutviklede
JavaScript-funksjonen "aapne_nye_vinduer()". Alternativt kan window.openangis
direkte i hendelsesbehandleren, slik: onclick='window.open(...)'.
Anvendelse: Hendelsstyrt visning av grafikk
[Kap. 11.1.9 i Webteknikk]
Realiseres med hendelsesbehandlerne onmouseover og onmouseuout.
Eksempel
Anvendelse: Matematiske beregning o.l. Ikke pensum
[Kap. 11.1.7]
I dette eksempelet
blir en timeverdi (oppgitt i et skjema-element) omregnet til en tilsvarende
minuttverdi (og vist i et annet skjemafelt i det samme dokumentet).
Kommentarer til eksempelet:
- Funksjonen "beregn_minutter_fra_timer" kalles ved å klikke på
Beregn-knappen. Dette er realisert ved at hendelsesbehandleren ONCLICK, som
er en attributt til dette INPUT-elementet, kaller funksjonen.
- Tilsvarende vil et klikk på Nullstill-knappen kalle funksjonen "nullstill_feltene".
- Begge de to ovennevnte funksjonene har ett inngangsargument (som
her er et form-objekt (eng.: object)). Generelt defineres
inngangsargumenter i funksjonsdefinisjonen i SCRIPT-elementet. Et
inngangsargument overføres til og benyttes av funksjonen når den gjør sin
jobb.
- Når de to funksjonene kalles (av de respektive
hendelsesbehandlerene ONCLICK), gjøres det med inngangsargumentet "this.form".
- Generelt er alle elementer i et html-dokument JavaScript-objekter.
En oversikt over objektene er vist på websiden http://www.stars.com/Authoring/JavaScript/Tutorial/objects.html.
- Se "form.timer.value" i funksjonen "beregn_minutter_fra_timer".
Her er "form" et objekt. Også "timer", som
angir NAME-attributten for BUTTON-elementet, er et objekt. "value"
er imidlertid en såkalt egenskap (eng.: property). JavaScript-terminologien
er altså: Objekter kan ha egenskaper!
- Se funksjonen "beregn_minutter_fra_timer". Funksjonen inneholder
variabelen "faktor", hvis verdi er 60.0.
- Se funksjonen "beregn_minutter_fra_timer". Funksjonen inneholder
programstruktur-setningen if ... else, som brukes for å lage et strukturert
program. JavaScript tilbyr mange andre strukturer, bl.a. såkalte for-løkker
og while-løkker.
 |
|
Anvendelse: Dynamiske stiler Ikke pensum
[Står ikke i boka]
Eksempel
(før markøren over Bø)
Kildekoden for eksempelet ovenfor viser hvordan stilegenskaper angis i denne
forbindelse. Merk: I stilegenskaper som inneholder en bindestrek, skal
bindestreken fjernes, og første bokstav i ord nr. 2 i stilegenskapen skal
skrives med stor bokstav. Eksempel: font-size skal skrives som fontSize
i JavaScript-uttrykket.
Her en
demo laget av Ole-Andreas Aas-Hansen, som fulgte faget Websideutvikling høsten-00.
JavaScript-ressurser på web
Et kjent eksempel på et JavaScript-websted er The
JavaScript Source.
Dokumentasjon
av JavaScript fins hos Netscape.
[Kursets hjemmeside] [Framdriftsplanen]
