Første
JavaScript i HTML serie, Planche nr. 16
Kursus Indhold

Udskrift af : JavaScript i HTML

??? from here until ???END lines may have been inserted/deleted

Planche 1 : JavaScript i HTML

JavaScript er indlejret ("embedded") i HTML. Ved hjælp af: JavaScript er case-sensitiv!

Planche 2 : SCRIPT-tags

JavaScript-sætninger lægges ind imellem SCRIPT-tags
<SCRIPT>
   JavaScript statements...
</SCRIPT>
Man kan angive versionsnumre:
<SCRIPT LANGUAGE="JavaScript1.2">

Planche 3 : Pre-JavaScript browsere

Man bør insætte HTML-kommentarer omkring sætningerne for at gamle browsere ikke viser koden...
<SCRIPT>
<!-- Begin to hide script contents from old browsers.
JavaScript statements...
// End the hiding here. -->
</SCRIPT>

Planche 4 : Et første script

Her er et simpelt javascript

Virker det?

Planche 5 : Javascript fra filer

Attributten SRC i SCRIPT læser fra fil/url
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT SRC="common.js">
...
</SCRIPT>
</HEAD>
<BODY>
...
slut-tag er påkrævet og evt. kode/HTML foran udføres ved læsefejl Hentes SRC fra server, skal denne sende mimetype:

Planche 6 : Javascript som attributter

JavaScript-udtryk kan indsættes som værdier i HTML-parametre. Eksempel:
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
Udtrykket starter med "&" og slutter med ";"

Planche 7 : NOSCRIPT-tags

Eksempel
<NOSCRIPT>
<B>This page uses JavaScript, so you need to get Netscape Navigator 2.0
or later!
<BR>
<A HREF="http://home.netscape.com/comprod/mirror/index.html">
<IMG SRC="NSNow.gif"></A>
If you are using Navigator 2.0 or later, and you see this message,
you should enable JavaScript by on the Advanced page of the
Preferences dialog box.
</NOSCRIPT>
...

Planche 8 : En lille øvelse

Skriv en HTML-fil med indbygget javascript som i tidligere planche.

Kør den - Prøv at skrive HTML-tags (H1 o.a.) for at få udskrift fra scriptet til at stå tydeligere.

Planche 9 : Event handlers

JavaScript Event Handlers

Se total liste

Generel syntaks:

<TAG eventHandler="JavaScript Code">
Eller
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

Planche 10 : Navigator Objekter

I en Netscape Navigater er der følgende objekter i javascript:

Planche 11 : Objekter i JavaScript

Javascript er objekt-orienteret

Objekter har et navn (variabel) og en række "properties" og "functions".

Objekter hænger sammen i et hieraki.

(JavaScript har IKKE klasser i java-forstand)

Planche 12 : Eksempel

Her er et eksempel med en formular...
<HEAD><TITLE>A Simple Document</TITLE>
<SCRIPT>
function update(form) {
   alert("Form being updated")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >Enter a value:
<INPUT TYPE="text" NAME="text1" VALUE="blahblah" SIZE=20 >
Check if you want:
<INPUT TYPE="checkbox" NAME="Check1" CHECKED    
   onClick="update(this.form)"> Option #1
<P>
<INPUT TYPE="button" NAME="button1" VALUE="Press Me"
   onClick="update(this.form)">
</FORM>
</BODY>
Eksempler på objektproperties:
Property Value
document.title
 "A Simple Document"
document.fgColor
 #000000
document.bgColor
 #ffffff
location.href

"http://www.royalairways.com/samples/simple.html"
history.length
 7

Planche 13 : Vigtige Objekter

De 2 vigtigste Navigatorobjekter er:

Planche 14 : Window-objektet

window har bl.a. følgende, vigtige metoder Vigtige properties

Planche 15 : Document-objektet

Metoden write skriver til browseren Eksempel:
<HEAD> 
<SCRIPT>
<!--- Hide script from old browsers
// This function displays a horizontal bar of specified width
function bar(widthPct) {
   document.write("<HR ALIGN='left' WIDTH=" + widthPct + "%>");
}
// This
function displays a heading of specified level and some text
function output(headLevel, headText, text) {
   document.write("<H", headLevel, ">", headText, "</H",
      headLevel, "><P>", text)
}
// end script hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!--- hide script from old browsers
bar(25)
output(2, "JavaScript Rules!", "Using JavaScript is easy...")
// end script hiding from old browsers -->
</SCRIPT>
<P> This is some standard HTML, unlike the above that is generated.
</BODY>
(Ovennævnte er et eksempel på kode, der er klippe-klistret - og det kan være farligt med javascript. Prøv at gemme i en html-fil og debug det med javascript-konsolen. Koden ER allerede gemt i 'defekt.htm')

Planche 16 : Event handler i praksis

Eksempel

<HEAD>
<SCRIPT>
<!--- Hide script from old browsers
function compute(f) {
   if (confirm("Are you sure?"))
      f.result.value = eval(f.expr.value)
   else
      alert("Please come back again.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>


© 1999 BLA*net - Leif E. Andersen, leander@blanet.dk