Første
Mere Browser serie, Planche nr. 18
Kursus Indhold

Udskrift af : Mere Browser

Planche 1 : Mere Browser

Udover de basale objekter og deres attributter, er der en række browser objekter, metoder, funktioner og attributter, der gør det nemt at anvende JavaScript i en browser

Planche 2 : Reflektion

Standard-objekterne i Client-Side Java defineres af HTML-definitionerne.

Da det sker oppefra og nedefter, kendes kun objekter, der er defineret, når JavaScript-koden findes.

Planche 3 : Reflektion eksempel

En formular defineres således
<FORM NAME="statform">
<INPUT TYPE = "text" name = "userName" size = 20>
<INPUT TYPE = "text" name = "Age" size = 3>
I et følgende script, kan man referer objekterne således:
<SCRIPT>
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>
Hvis det blev gjort inden FORM-definitionen, ville man få en fejl.

Planche 4 : Nøgleobjekter

De grundlæggende objekter (jvf. introduktionen)

Planche 5 : Visning m.m.

Hvis en simpel HTML-side
<HTML>
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>
Ses den "normalt" i en browser, fås
Hello, there.
Hvis man bruger menu -> View -> Page Source
<HTML>
<BODY>
Hello,
 there.
</BODY>
</HTML>
Men hvis man stiller 'view-source:' foran adressen får man:
<HTML>
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>

Planche 6 : Dynamiske sider?

Når en side med HTML og JavaScript er dannet, er den statisk. Der er dog 3 undtagelser:

Planche 7 : Prædefinereder Navigator Arrays

Her er en liste over de Arrays, der er defineret som properties på 'navigator' objektet.
Object Property Description
document
anchors

Reflects a document's <A> tags that contain a NAME attribute in source order

applets

Reflects a document's <APPLET> tags in source order

embeds

Reflects a document's <EMBED> tags in source order

forms

Reflects a document's <FORM> tags in source order

images

Reflects a document's <IMG> tags in source order (images created with the Image() constructor are not included in the images array)

links

Reflects a document's <AREA HREF="..."> tags, <A HREF=""> tags, and Link objects created with the link method in source order

Function
arguments

Reflects the arguments to a function

Form
elements

Reflects a form's elements (such as Checkbox, Radio, and Text objects) in source order

navigator
mimeTypes

Reflects all the MIME types supported by the client (either internally, via helper applications, or by plug-ins)

plugins

Reflects all the plug-ins installed on the client in source order

select
options

Reflects the options in a Select object (<OPTION> tags) in source order

window
frames

Reflects all the <FRAME> tags in a window containing a <FRAMESET> tag in source order

history

Reflects a window's history entries

Planche 8 : Et Array-eksempel

Array-elementer kan udpeges ved numerisk værdi, eller navn, svarende til NAME-attributten i HTML Den 2. formular i det dokument startede således:

Planche 9 : Window og Frame

Window og Frame giver udstrakt kontrol over hvordan brugerens vindue ser ud. Med dem kan man: Der er en meget god gennemgang i kapitel 12 i JavaScript Guide'en.

Planche 10 : Øvelse

Prøv at lave eksemplet med FRAME-set: "Using FRAMESET"

De 4 html-filer, der er nævnt til sidst

findes allerede i js-folderen...

Planche 11 : Andre specielle browser-ting

Det er

Planche 12 : JavaScript-URL'er

JavaScript kan direkte sættes ind istedet for en link, med protokolnavnet "javascript:" Værdien af udtrykket efter ":" betragtes som en rigtig URL, medmindre det er "undefined".

Planche 13 : Image maps

Man kan også lægge javascript ind i html MAP's

På klienten kunne det være:

<MAP NAME="buttonbar">
<AREA SHAPE="RECT" COORDS="0,0,16,14"
   HREF ="javascript:top.close(); window.location = newnav.html">
<AREA SHAPE="RECT" COORDS="0,0,85,46"
   HREF="contents.html" target="javascript:alert(`Loading
   Contents.'); top.location = contents.html">
</MAP>

på server-side image maps, der er defineret som

<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
sender browseren uden videre:
URL?x,y
når bruger klikker på positionen x,y over billedet

Normalt vil serveren have en lokal matrix, der svarer til billedet og returnere en side, der svarer til x,y.

Det kan man også gøre lokalt ved et javascript:

<H1>Click on the image</H1>
<P>
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
   document.write("<P>No coordinates specified.")
else {
   commaloc = str.indexOf(",") // the location of the comma
   document.write("<P>The x value is " + str.substring(1, commaloc))
   document.write("<P>The y value is " +
      str.substring(commaloc+1, str.length))
}
</SCRIPT>

Planche 14 : Statuslinien

Der er to properties til window-objektet, der er statuslinien: Eksempel (hjælpetekst styret af mus)
<A HREF="contents.html"
   onMouseOver="window.status='Klik for at vise indhold';return true">
Contents
</A>

Planche 15 : Småkager (Cookies)

Cookies kan sættes eller læses via windows-objektets cookie property. Eksempel-kode:
// Sets cookie values. Expiration date is optional
//
function setCookie(name, value, expire) {
   document.cookie = name + "=" + escape(value)
   + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}
Cookies kan læses af:
function getCookie(Name) {
   var search = Name + "="
   if (document.cookie.length > 0) { // if there are any cookies
      offset = document.cookie.indexOf(search)
      if (offset != -1) { // if cookie exists
         offset += search.length
         // set index of beginning of value
         end = document.cookie.indexOf(";", offset)
         // set index of end of cookie value
         if (end == -1)
            end = document.cookie.length
         return unescape(document.cookie.substring(offset, end))
      }
   }
}

Planche 16 : Login-registrering

Normalt kan man registrere sig på en webside ved hjælp af CGI. Men hvis man ikke har mulighed for det, så kan man bruge cookies, jvf. følgende eksempel fra JavaScript Guide:

Udover de forrige funktioner, skal man have endnu en:

function register(name) {
   var today = new Date()
   var expires = new Date()
   expires.setTime(today.getTime() + 1000*60*60*24*365)
   setCookie("TheCoolJavaScriptPage", name, expires)
}
her indholdet i HTML-filen (BODY-delen...)
<BODY>
<H1>Register Your Name with the Cookie-Meister</H1>
<P>
<SCRIPT>
var yourname = getCookie("TheCoolJavaScriptPage")
if (yourname != null)
   document.write("<P>Welcome Back, ", yourname)
else
   document.write("<P>You haven't been here in the last year...")
</SCRIPT>
<P> Enter your name. When you return to this page within a year, you will be greeted with a personalized greeting. 
<BR>
<FORM onSubmit="return false">
Enter your name: <INPUT TYPE="text" NAME="username" SIZE= 10><BR>
<INPUT TYPE="button" value="Register"
   onClick="register(this.form.username.value); history.go(0)">
</FORM>

Planche 17 : Øvelse

Sammel de to forrige plancher i en HTML-fil

Oversæt teksterne til dansk

og lav din egen login-side.

Prøv at se, hvordan indholdet i Cookien ser ud, når det bliver gemt på disken.

Planche 18 : Plug-ins

Man kan få oplysninger om browserens konfiguration mht. til MIME-muligheder og plugins. Properties på 'navigator' er Arrays af objekter, med navnene: mimeTypes-objektet har properties plugin-objektet:


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