: Retur til startside

: Retur til javaScript-startside

Forkursus i JavaScript

: Generelt

: Aflusning

: Skriv en meddelelse

: Indlejring af kode i HTML

: Kode i script

: Kode i Event-handler

: Kode i <A Href= ...

Generelt om javaScript

JavaScript er et programmeringssprog beregnet til udførelse i forbindelse med HTML-filer. Det er en simplificeret udgave af C++ og Java, og ligesom disse sprog er det objekt-orienteret og skelner mellem store og små bogstaver. Det forudsættes, at du har et elementært kendskab til programmering. Desuden går jeg ud fra, at du kender til HTML-koder.
Variable kan valgfrit erklæres, men ikke tildeles type, og somme tider kan man komme ud for at det ikke lige får den type man forventede; hvis f.eks a=2 så kan 3+a somme tider give 32 i stedet for 5, se eksempel

.
Koden skrives gerne i et <script>-afsnit. I script-erklæringen skriver man gerne at her kommer JavaScript:
   <script language=JavaScript>
       document.write("document.write skriver til skærmen")
   </script>
Her prøves koden så af i praksis:
Da der indtil videre ikke er andre muligheder er det ikke nødvendigt at specificere sproget med language=javaScript.

AFLUSNING

Man skal være en stor blærerøv for at påstå, at man skriver koden fejlfrit første gang, og det passer i hvert fald ikke. Som altid skal man kontrollere om ens kode virker, og det både med Netscape og Internet Explorer. Af grunde jeg straks vil forklare anbefales det først at afluse i Netscape.
Netscapes afluser: Ved grovere fejl skrives der i statuslinien:
"Java Script error. type javaScript: into location for details"
Ofte overskrives statuslinien straks efter, men prøv at skrive ordet javaScript: i den rubruk foroven der hedder "location", ved fejl får du givet linienummer og en foreløbig diagnose. Tøm altid med "clear console".
InternetExplorers afluser: Ved fejl skrives "der opstod en fejl på siden". Fejlmeddelelsen er så intetsigende at jeg opfatter det som en fornærmelse, I.E. mener tydeligvis at javaScript skal man holde sig fra selv at programmere.
Men hvis man bare véd det, så indeholder I.E. (og Netscape) en pointer windows.onerror til browserens fejlprocedure, som man kan flytte så den peger på ens egen fejlprocedure, klik

for detaljeret beskrivelse.

Man kan også få teksten til at springe frem i en lille ramme:

:	alert("meddelelse") skriver "meddelelse" i en advarselsbox
:	confirm("meddelelse"). hvis man laver en variabel v = confirm("..") bliver v = true hvis der klikkes OK
:	prompt("meddelelse","svar") skriver "meddelelse" og forventer et svar Svaret kan opfanges i en variabel (her minVar, se ovendor), eller man kan bruge det direkte med f.eks:
:	window.status=prompt("Dette er skrevet med promt","Skriv til statuslinien her")
:	Eller du kan lave et <script> der opretter et nyt vindue til teksten, og skriver en hel HTML-fil i vinduet. Klik for mere detaljeret forklaring. Denne metode giver flest muligheder, omend den er lidt besværlig.

Indlejring af JavaScript kode i HTML

det kan gøres på følgende måder:

: <script> kode.. </script>

: <input type=button onClick="kode.. "> Event-handler i object

: <A Href=hinfil.htm onClick="kode.. "> Event-handler i Href

: <script SRC=MINFUNC.js></script> I en særlig fil til formålet

Kode i script:

Denne kode virker ligesom om teksten blev skrevet direkte til HTML-en uden videre dikkedarer. Man har dog visse extra muligheder, således variablen location.href som viser den aktuelle adresse:
<script language=JavaScript>
    document.write("dette dokument har adressen "+location.href)
</script>
TEST:
NB: Hvis man skriver to skråstreger // bliver resten af linien til en kommentar
       Hvis man skriver /* noget mellem skråstreg* og *skråstreg */ bliver noget til en kommentar, og må gerne fylde flere linier.
Hvis browseren ikke forstår JavaScript, så kan man skjule koden som en kommentar:
<script language="JavaScript"> 
</script>
TEST:
Jeg synes ikke det er en god idé, hvis der er noget galt kan jeg godt lide at man kan se at der er noget galt. Hvis teksten skjules, så bør man nok lave en java-script afprøver på indgangssiden:

<script language="JavaScript">
  // Din browser forstår ikke JavaScript.
  // <B>SE AT FÅ ANSKAFFET DIG EN NY BROWSER !!</B>
  </script>
TEST:
TEST, hvor ordet "script" er stavet forkert:
// Din browser forstår ikke JavaScript (det passer ikke, det er kun en prøve).
// SE AT FÅ ANSKAFFET DIG EN NY BROWSER !!

Et alternativ metode er med <NoScript>-kode i HTML

JavaScript versionsnummeret kan tilføjes, eksempel:
<script>var vernr=1.0;</script>
<script language='JavaScript1.1'>vernr=1.1</script>
<script language='JavaScript1.2'>vernr=1.2</script>
<script language='JavaScript1.3'>vernr=1.3</script>
<script language='JavaScript1.4'>vernr=1.4</script>
<script language='JavaScript1.5'>vernr=1.5</script>
<script language='JavaScript1.6'>vernr=1.6</script>
<script language='JavaScript1.7'>vernr=1.7</script>
<script>document.write ("Jeg, din browser, forstår JavaScript version "+vernr)</script>

Funktionskald
JavaScript-koden kan være defineret i en funktion.
Funktioner skrives gerne i et script i <HEAD>-afsnittet, men kan placeres hvorsomhelst i HTML-filen, bare funktionen er defineret inden den skal bruges.

Man kan også importere scriptet fra en extern fil, i <HEAD>-afsnittet (eller andetsteds) skriv    <script SRC=MINFUNC.js></script>

Filen MINFUNC.js bliver så sat ind mellem <script>og</script> i HTM-filen.
Metoden anbefales, fordi forskellige HTM-filer kan importere den samme js-fil og således have identiske funktioner til rådighed, også selvom man ændrer funktionerne. Filnavn-endelsen .js bruges gerne, regnes for god programmeringsskik, men den er valgfri.

: Klik for mere om hvordan funktionerne ser ud i JavaScript.

Kode i EventHandler

BUTTON (knap) i en <FORM>: en FORM er altid i filens BODY-afsnit :
<form>
<input type="button" value="Klik mig" onClick="alert('Goddaws do\'')">
</form>

TEST: I onClick skal der - af hensyn til HTML-en - gåseøjne omkring alert() da der er et mellemrumstegn. JavaScript kræver gåseøjne omkring en tekststreng - eller også skal det være navnet på en variabel defineret andetsteds.
Problemet er her løst ved at bruge "dobbelte" til HTML og 'enkelte' til JavaScript (det kunne lige så godt være omvendt). Efter do har jeg skrevet \' , backslash'en skrives ikke i JavaScript, og signalerer at det første af de to enkelt gåseøjne bagved ikke er et gåseøjne-slut tegn, men skal udskrives. Tilsvarende bruges \" , hvis man vil skrive dobbelte gåseøjne, og endelig kunne der her have været brugt ansitegn nr. 146, ’ som ligner enkelt gåseøjne.
Vi har set i eksemplet hvordan man i et object (her "Button") kan have en event-handler (her "onClick"). De forskellige objekter i object-hirakiet kan have tilknyttet forskellige event-handlere, og hvilke det drejer sig om står i detajlbeskrivelsen af objekterne. De har "sigende" navne, måske undtagen "onBlur" der er det modsatte af "onFocus".
Event-handlerne til "dette vindue" kan skrives i HTML-filens <body>-afsnitskode, skriver man f.eks.
<body onLoad=minFunc()>
så vil funktionen minFunc() blive kaldt straks efter at HTML-koden er indlæst.

: Klik for mere om referencer til objekter som f.eks. en knap

: Klik for mere om kode fra eventHandler i <A HRef=...

Kaldet til en funktion kan også laves fra en <A Href=... reference

<A Href=javascript:minfunc("pølse")>

javascript-koden kan osse være en standardfunktion:
<A Href='javascript:alert("2 pølser")'>

Man kan tit også bruge en eventHandler af typen onMouseXxx
<A Href=# onMouseOver="window.status='Klik ikke her';return true"
              onMouseOut="window.status=''">Klik mig ej</a>
TEST: Klik mig ej

Når musen er over den klikbare tekst står der    Klik ikke her    i statuslinien.
return true: det er nødvendigt for at undertrykke det der ellers ville blive vist på statuslinien (URL til denne side + #-tegn). Href=# skulle forhindre, at browseren gør et ærligt forsøg på at hoppe til et ankerpunkt; det virker med Internet Explorer men ikke med Netscape.   En bedre måde at undgå hoppet på er at lave en eventHandler til at opfange museklikket:
<A Href=A onMouseOver="return true" onClick="return false" >
onClick returnerer   false   for at undertrykke det der ellers ville ske ved museklik. Alt i alt sker der ingenting.

Her en udbygget variant, der stiller statuslinien tilbage når musen forlader området:

<script language="JavaScript">
var huskmuseover="";

function Musseover(streng){
  if (streng != huskmuseover){
    if ((streng != huskmuseover) && (window.status!=null)) huskmuseover=window.status;
  window.status=streng;
}
function Musseud(){
  window.status=huskmuseover
}
</script>

<A Href=# onClick="return false"
          onMouseOver="Musseover('Klik aldrig her');return true;"
          onMouseOut="Musseud()">Klik mig ej</a>

TEST:    Klik mig ej       Klik ikke, jeg er statusliniefoder Href kan lægges udenom et billede, og med en eventHandler i Href kommer det til at virke lige så godt som hvis eventHandleren kunne indbygges i billedet (det kan den desværre ikke - object images mangler muse-eventHandlere).

Her en yderst brugervenlig konstruktion - - Når musen er på plads over det klikbare billede, skifter farven til rød:
<a href=NIV3OBJ.HTM#link
  onMouseOver="document.tilStdObj.src='../TEGNBIL/BALLROED.GIF'";
  onMouseOut ="document.tilStdObj.src='../TEGNBIL/BALLGREE.GIF'
  "><img src=../TEGNBIL/BALLGREE.GIF name=tilStdObj border=0 Width=10 Height=10
     Alt="Oversigt over LINK-objektet"></a>

NB: Angiv Width og Height hvis billederne ikke er lige store, ellers ser det forskelligt ud med Netscape og Internet Explorer.

I knapper (button) i en formular virker denne metode ret dårligt. Klik

for en alternativ metode.

: Til toppen af siden