|
Multimediakurs Leinfelder: Inhalt/ B:Fortgeschrittene/Modul 7 "JavaScript by hand"/Modul 7.2 "JS-Level 1", Anlage |
| (© copyright) Letzte Änderungen: |
Hier einige JavaScript-Beispiele für Level 1-Benutzer. Gehen Sie vor wie im entsprechenden Kursteil beschrieben. Der zu kopierende Quellcode ist jeweils in Teletext gesetzt.
Wichtig: Kopieren Sie die Skripte direkt von der html-Seite, gehen Sie in diesem Fall nicht in den Quellcode. Der zu kopierende Code muss dann aber in den Quellcode Ihrer Seiten eingesetzt werden.
Beispiel: ein neues Fenster soll in bestimmter Größe, ohne Menuleiste ect. aufgemacht werden. Von Ihnen veränderbar sind die rot markierten Werte. Statt eines absoluten Links kann auch ein relativer Link angegeben werden. Versuchen Sie auch no durch yes zu ersetzen und sehen die Unterschiede.
<html>
<head>
<title>fenster öffnen</title>
<script language = "JavaScript">
function neufenster()
{window.open('http://ihrlink.de/seite.html','fenstername','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=500');
}
</script> </head>
<body>
<a href="#" onclick="neufenster()">neuesFenster aufmachen</A>
</body>
</html>
Alternative: einfach im Body angeben (sie können nur no oder yes verwenden):
<a href="#" onclick="window.open('pfad/dateiname.html','fenstername','toolbar=no/yes,location=no/yes,directories=no/yes,status=no/yes,menubar=no/yes,scrollbars=yes/no/auto,resizable=yes/no,width=pixel,height=5pixel');">öffnen.</A>
Beispiel: ein Fenster wieder schließen
Im Head-Teil:
<script language="JavaScript">
function schliessen()
{
window.close();
}
</script>
Im Body-Teil:
Aufruf als Link:
<a href="#" onclick="schliessen()">ok, close window</a>
Variante: Aufruf durch Drücken eines Formularknopfes
<form> <input type="button" name="closeMyWin" value="ok, close window" onclick="schliessen()"></form>
-------
Alternative: kein Script im Head-Teil, dafür JavaScript-Anweisung direkt direkt im Body:
<form> <input type="button" name="closeMyWin" value="ok, close window" onclick="window.close();"></form>
Das Script ist in das zu schließende Fenster einzubauen. Funktioniert je nach Browser nur, wenn das Fenster mit der window.open-Methode geöffnet wurde (s.o.).
Beispiel: Linkinfo in Statusleiste:
direkt im Body eintragen:
<a href="pfad/dateiname.html" onmouseover="window.status='hier müssen Sie einfach klicken, das ist superinteressant'; return true">hier klicken</a>
vielleicht auch durch mouseout?
<a href="pfad/dateiname.html" onmouseout="status.window='warum haben Sie nicht geklickt?'; return true">hier klicken</a>
auch die Kombination ist möglich:
<a href="pfad/dateiname.html" onmouseover="status.window='hier sollten Sie einfach klicken, das ist superinteressant'; return true" onmouseout="status.window='warum haben Sie nicht geklickt?'; return true">hier klicken</a>
Beispiel: Hinweisfenster (alert-Hinweis)
alert-Hinweis beim Laden:
Head-Teil
<html>
<title>mein erstes Skript</title>
<script language="JavaScript">
<!--
function willkommen()
{
alert ("Klasse, dies ist mein erstes Skript");
}
-->
</script>
</head>
body-Teil
<body onload="willkommen()">
Siehe auch Variationen hierzu im Kursmodul 7.2
------
Alternative: Anweisung direkt im onload-Handler
<body onload="window.alert('Willkommen auf dieser Seite');">
im body
<script language="JavaScript">
<!--
document.write(navigator.userAgent);
-->
</script>
Beispiel: mit einem Linkklick zwei neue Seiten (z.B. für Frames) aufrufen:
im Body:
<a href="frage2.html" target="frageframe" onmouseup="parent.antwortframe.location.href='hinweis.html'" >die nächste Frage</a>
frage2.html und hinweis.html sind die beiden zu ladenden Dateien, die im ersten Fall in den Frame mit Namen frageframe, im zweiten Fall in den Frame mit namen antwortframe geladen werden. Es gibt noch viele weitere Möglichkeiten, mehrere Seiten gleichzeitig aufzurufen (vgl. Level 2 und 3).
Beispiel: zurück zur letzten Seite:
im Head:
<script language="JavaScript">
<!--
function goback()
{
history.go (-1);
}
// -->
</script>
im Body z.B.
<a href="#" onclick="goback()">zurück zur letzten Seite</a>
Hinweis: Der Effekt ist derselbe wie das Drücken des Knopfes Rückwärts im Browser.
Tipp: Sie können oben unter history.go auch -2 einfügen, dann führt das Skript zur vorletzten Seite zurück.
Das Skript ist sinnvoll, wenn Sie z.B. ein Glossary aufbauen, welches von verschiedensten Seiten angesprungen werden kann. Sie kommen damit immer zum Ausgangspunkt zurück. Geht Ihre Glossary-Erklärung z.B. über 2 html-Seiten, können Sie history.go(-2) verwenden.
Beispiel: Window-Shaker (recht unnütz, aber ganz nett; evtl. in einem Antwortfenster bei einer falschen Antwort verwendbar?) Code nur unverändert kopieren!
In den Head-Teil einfügen. Eventhandler nicht notwendig.
<script language="JavaScript">
<!--
//Dieses Skript stammt von Michael Mailer´s JavaScripts
//URL: http://www.webaid.de/js -- eMail: mm@webaid.de
//Bitte entfernen Sie diesen Vermerk nicht !
function shake(n) {
if (self.moveBy){
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
shake(3);
//-->
</script>
Durchforsten Sie für weitere Skripte einfach das Web anhand der in Kursmodul 7.2 angegebenen Links. Münchner Kursteilnehmer können auch hier noch weiter suchen (mit p_w). Weitere, bzgl. der JavaScript-Syntax kommentierte Beispiele finden Sie in Level 2 und 3 sowie in den Kursmodulen 8 (Animationen) und 9 (interaktive Webseiten). Eine Gesamtzusammenstellung aller im Kurs verwendeten JavaScripte finden Sie im Anhang zu Modul 7.