Beispiele: Multimedia mit JavaScript
Das JavaScript weitaus mehr kann als nur Formulare und Popups dürfte den meisten klar sein, dass JavaScript aber auch wunderbar geeignet ist Multimedia zu steuern ist vielleicht etwas Neues.Musik abspielen
Soll die Seite noch etwas bunter werden könnte man z.B. zu musikalischer Untermalung greifen. Netscapes Navigator und Microsofts Internet Explorer unterstützen bekanntlich das embed-Element mit welchem sich problemlos eine Musikdatei einbinden läßt (bitte beachten Sie jedoch, dass dieses Element nicht HTML-konform ist). Soll die Musik dann ereignisgesteuert abgespielt brauchen wir noch etwas JavaScript . Zuerst einmal die HTML-Umsetzung:<embed src="musik.mid" hidden="true" autostart="false" loop="false"
name="musik" MASTERSOUND><br>
<a href="#" onclick="abspielen(); return false;">
Abspielen
</a><br>
<a href="#" onclick="stoppen(); return false;">
Stoppen
</a>
function stoppen() { document.musik.stop(); }
...allerdings bereitet das starten der Musik dann schon einige Probleme. Bei Netscape geht das noch relativ einfach. Nach einer kleinen Browserabfrage wird mit document.musik.play(false) losgelegt. Microsofts Browser hat jedoch das Problem, dass für .wav-Dateien die Methode Run und für .mid-Dateien (MIDI) die Methode play verwendet werden muss. Es muss hier also eine Unterscheidung vorgenommen werden, welcher Dateityp gerade verwendet wird. Sofern er nicht feststeht könnte die abspielen-Funktion wie folgt aussehen - steht er fest, kann einer der beiden Teile entsprechend weggelassen werden:function abspielen()
{
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1 &&
parseInt(navigator.appVersion) >= 4)
{
if(document.musik.src.toLowerCase().indexOf('.wav') != -1)
{document.musik.Run()}
if(document.musik.src.toLowerCase().indexOf('.mid') != -1)
{document.musik.play()}
}
else
{
document.musik.play(false)
}
}
function abspielen()
{
a = parent.musik.document;
a.open();
a.writeln('<html>');
a.writeln(<head>);
a.writeln(<bgsound src="musik.wav" loop="1">);
a.writeln(</head>);
a.writeln(<body></body>);
a.writeln(</html>);
a.close();
}
Laufschriften erzeugen
Laufschrift, also bewegte Texte, sind gern gesehen und noch lieber werden sie verwendet. Microsoft führte dazu ehemals das marquee-Element ein, mit dem es möglich ist Laufschrift zu erzeugen. Da dieses Element aber leider auch nur mit dem Internet Explorer funktioniert und außerdem nicht zum HTML-Standard gehört, muss zu einer Alternative gegriffen werden, die alle Browser beherrschen: JavaScript . Das Prinzip ist relativ einfach: Der Text wird verschoben, indem Leerzeichen vorangestellt oder Zeichen am Anfang abgeschnitten werden. Mit zunehmender Dauer werden dann mehr Zeichen angefügt bzw. abgeschnitten, wodurch der Text dann nach rechts (Leerzeichen vorangestellt) bzw. links (Zeichen abgeschnitten) wandert.Um den Text von links nach rechts laufen lassen zu können benötigen wir zunächst einen Text der in der Variablen text gespeichert wird sowie einen Zähler der uns sagt, ab welcher Stelle der Text schon sichtbar ist:
var text = 'JavaScript in der Praxis';
var zaehler = 0;
var inter = window.setInterval('anzeigen()',100);
function anzeigen()
{
zaehler++;
if(zaehler <= text.length)
{ res = text.substr(text.length-zaehler,zaehler); }
else
{
res = text;
for(i=text.length; i<= zaehler; i++){ res = ' '+res; }
}
if(zaehler > 100+text.length){zaehler = 0}
res = res.substr(0,100)
window.status = res;
}
zaehler = text.length+100;
inter = window.setInterval('anzeigen()',100);
function anzeigen()
{
zaehler--;
if(zaehler < 0){zaehler = text.length+100;}
// ... gekürzt ...
}
var text = 'JavaScript in der Praxis';
var zaehler = 0;
var inter = window.setInterval('anzeigen()',100);
var richtung = 1; //alt.: -1
function links_rechts(){ richtung = 1; }
function rechts_links(){ richtung = -1; }
function anzeigen()
{
zaehler = zaehler+richtung;
if(zaehler < 0){zaehler = text.length+100;}
if(zaehler > 100+text.length){zaehler = 0}
if(zaehler <= text.length)
{ res = text.substr(text.length-zaehler,zaehler); }
else
{
res = text;
for(i=text.length; i<= zaehler; i++){ res = ' '+res; }
}
res = res.substr(0,100)
window.status = res;
}
Farben
Farben lassen jede Seite freundlicher und ansprechender erscheinen - oder eben das Gegenteil. Mit JavaScript lassen sich nette Effekte erzeugen um z.B. das Fenster blinken zu lassen oder besondere Stimmungen zu erzeugen.Nehmen wir an der Besucher hat in einem Formular vergessen wichtige Eingaben zu hinterlassen. Anstatt ihn mit einem lästigen Alert-Fenster zu nerven könnten wir ihm auch durch ein Blinken des Feldes darauf aufmerksam machen, dass etwas nicht so ist, wie es sein sollte. Um das Feld blinken zu lassen braucht man prinzipiell nicht viel: Einige Timeouts und jeweils eine Änderung der Hintergrundfarbe. Wir wollen dazu eine kleine Funktion schreiben, die das Feld 3 mal rot blinken läßt.
Um anschließend den Normalzustand wieder herstellen zu können muss als erstes die Orginal-Farbe des Feldes gespeichert werden. Anschließend erzeugen wir 6 Timeouts in kurzen Abständen um das Blinken zu simulieren: rot normal rot normal rot normal. Die Funktion könnte dann z.B. so aussehen:
function blinke(f)
{
var orginal = 'white';
if(document.getElementById)
{
a = 'document.getElementById(''+f+'').style.backgroundColor';
org = document.getElementById(f).style.backgroundColor;
}
else if(document.all)
{
a = 'document.all.'+f+'.style.backgroundColor';
org = document.all[f].style.backgroundColor;
}
else
{
a = 'document.bgColor';
org = document.bgColor;
}
window.setTimeout(a+' = "red";',100);
window.setTimeout(a+' = "'+org+'";',300);
window.setTimeout(a+' = "red";',500);
window.setTimeout(a+' = "'+org+'";',700);
window.setTimeout(a+' = "red";',900);
window.setTimeout(a+' = "'+org+'";',1100);
}
//Formular überprüfen
if(document.form1.email.value = ''){blinke('emailfeld')}
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project