Første |
|
Mere Browser serie, Planche nr. 18 |
![]() |
Udskrift af : Mere Browser |
Da det sker oppefra og nedefter, kendes kun objekter, der er defineret, når JavaScript-koden findes.
<FORM NAME="statform">I et følgende script, kan man referer objekterne således:
<INPUT TYPE = "text" name = "userName" size = 20>
<INPUT TYPE = "text" name = "Age" size = 3>
<SCRIPT>Hvis det blev gjort inden FORM-definitionen, ville man få en fejl.
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>
<HTML>Ses den "normalt" i en browser, fås
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>
Hello, there.Hvis man bruger menu -> View -> Page Source
<HTML>Men hvis man stiller 'view-source:' foran adressen får man:
<BODY>
Hello,
there.
</BODY>
</HTML>
<HTML>
<BODY>
Hello,
<SCRIPT>document.write(" there.")</SCRIPT>
</BODY>
</HTML>
De 4 html-filer, der er nævnt til sidst
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,ynå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>
<A HREF="contents.html"
onMouseOver="window.status='Klik for at vise indhold';return true">
Contents
</A>
// Sets cookie values. Expiration date is optionalCookies kan læses af:
//
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}
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))
}
}
}
Udover de forrige funktioner, skal man have endnu en:
function register(name) {her indholdet i HTML-filen (BODY-delen...)
var today = new Date()
var expires = new Date()
expires.setTime(today.getTime() + 1000*60*60*24*365)
setCookie("TheCoolJavaScriptPage", name, expires)
}
<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>
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.