Tipps und Tricks

Hier sollen Lösungen zu kleinen Problemen gesammelt werden, die bei der Arbeit auftreten.

Problem 1: Javascript-Code soll über einen Link gestartet werden.

<a href="javascript: meineFunktion()">
  Funktionsaufruf von meineFunktion()
</a>

Problem 2: Validator macht Ärger bei Youtube Links. Hier gibt es die Lösung!

var url = "http://www.youtube.com/watch?v=bWcnfKz9cYs&feature=g-logo&context=G249c64bFOAAAAAAATAA";
Lösung? Siehe
https://www.tutorials.de/threads/durch-amp-ersetzen.340019/
http://htmlhelp.com/tools/validator/problems.html und weitere Fehler, welche bei der Prüfung auftreten können (mit Lösungen), z.B. <\/p>

Der fehlerfreie HTML-Code der URL sieht nach der Korrektur dann wie folgt aus:
var url = "http://www.youtube.com/watch?v=bWcnfKz9cYs&amp;feature=g-logo&amp;context=G249c64bFOAAAAAAATAA";

Problem 3: Einbinden von variablen Anteilen in beliebige Zeichenketten

Generell:
var irgendwas;    // hier steht irgendetwas drin, was sich ändern kann
var gesamt = "fester Anteil 1 " + irgendwas + " fester Anteil 2";
 
....innerHTML = gesamt;   // bitte entsprechend eigenen Wünschen ergänzen
 
Testen des Zusammenbaus von Youtube-Links aus festen und variablen Bestandteilen:
<!DOCTYPE html>
<html>
 
<head>
 
  <title>Zusammenbau einer URL aus festen und variablen Bestandteilen</title>
  <meta charset="utf-8">
 
  <script>
 
     var fest1    = "http://www.youtube.com/watch?v=";
     var variabel = "bWcnfKz9cYs";
     var fest2    = "&amp;feature=g-logo&amp;";
 
     // In der folgenden Anweisung werden die obigen
     // Bestandteile zusammengefügt zu einer vollständigen URL
     // und diese dann aufgerufen.
     window.location = fest1 + variabel + fest2;
 
  </script>
 
</head>
 
<body>
   <!-- hier steht nichts, weil die Seite sowieso sofort verlassen wird -->
</body>
 
</html>

Problem 4: Wie adressiere ich in HTML Dateien, welche auf meinem Rechner liegen?

  • Ein Punkt am Anfang eines Datei-Bezeichners sagt aus, dass die Datei im gleichen Verzeichnis liegt, wie die HTML-Datei selbst.
  • Eine Datei namens example.mp3, welche im gleichen Verzeichnis liegt wie die eigene HTML-Datei, lässt sich also dann z.B. ansprechen mit dem Link ./example.mp3.
  • Liegt die Datei in einem Unterverzeichnis namens musik, dann lautet der vollständige Link ./musik/example.mp3.
  <a href="./">Wohin der wohl f&uuml;hren mag?</a>
  <a href="./example.mp3">Ein Beispiel mit einer MP3-Datei im gleichen Verzeichnis wie die HTML Datei selbst</a>
  <a href="./musik/example.mp3">Ein Beispiel mit einer Datei im Unterverzeichnis</a>
  <a href="file:///C:/Dokumente%20und%20Einstellungen/test.test">Und der hier?</a>
 

Problem 5: Wie kann ich einen Button selbst gestalten, d.h. mit einem eigenen Bild?

Mit dem Tag div geht das ganz besonders gut, wie das folgende Beispiel zeigt:
...
  <style>
    .button
    {
       background: url(http://3.bp.blogspot.com/_DAq16d6xn-Q/TH5G51d71_I/AAAAAAAAApQ/OrWjLhsURc8/s1600/smilie.jpg) right no-repeat;
       height:     400px;
    }
  </style>
...
  <div class="button" onclick="sagHallo()"></div>
...
 

Problem 6: Wie spielt man eine Musik- oder Video-Datei auf der eigenen Seite ab?

Es gibt verschiedene Möglichkeiten zum Abspielen von Dateien im Browser.
Es kommt darauf an, welche Art von Dateien man abspielen möchte (MP3, Midi, ...) und wie komfortabel das
eigene Programm werden soll. Folgende Beispiele zeigen, wie man es machen kann.
Nehmen Sie sich nicht zu viel vor! Es macht Sinn, sich auf einen Typ von Dateien zu beschränken (z.B. nur MIDI-Files), da
es sonst schwierig wird, mit einem Quelltext alle Arten von Dateien richtig zu behandeln.

Beispiel 1: Starten einer Helper Application durch den Browser

Dieses ist sicherlich die einfachste Art und Weise, Dateien abzuspielen, aber auch die unkomfortabelste für den Nutzer
einer Website. Der Nutzer möchte sicher gerne auf der Seite bleiben und nicht sichtbar zusätzliche Anwendungen starten, welche
möglicherweise sogar noch zusätzlich manuell installiert werden müssen.
<a href="song.mp3">Play the song</a>

Beispiel 2: Embed

Das funktioniert für MIDI-Files recht gut und geht mit dem Tag embed,
wie es auf der Seite http://de.selfhtml.org/javascript/objekte/embeds.htm beschrieben steht, z.B. so:
 <!-- http://www.free-midi.org/ Hier gibt es viele neue Midi Files -->
 
 <embed
   src="http://www.free-midi.org/midi1/b/beyonce love_on_top.mid">
 </embed>

Beispiel 3: Yahoo Webplayer

siehe http://webplayer.yahoo.com/
Durch das Einfügen der folgenden Zeile in die eigene Datei erhält man einen Player von Yahoo, welchen man zum Abspielen von MP3- und Video-Dateien verwenden kann. Der Player ist in Flash programmiert und es treten in diesem Zusammenhang einige zu lösende Flash Probleme auf.
<script src="http://webplayer.yahooapis.com/player.js"></script>
Die eigenen Dateien (Youtube Videos und MP3 Dateien) werden dann über Links adressiert für das Abpielen, z.B. wie folgt
<a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a>
 
Weitere Tipps:
http://www.w3schools.com/html/html_sounds.asp
http://www.makeuseof.com/tag/embed-mp3-player-website/

Beispiel 4: Integrieren des Embed Quellcodes von Youtube

Wenn man sich auf das Abspielen von Youtube-Videos konzentriert, dann macht auch das Einbinden des von Youtube selbst erzeugten Quelltextes Sinn. Diesen erhält man, wenn man mit der rechten Maustaste auf ein Youtube-Video klickt. Dann kann man durch die Auswahl des Menüpunkts "Einbettungscode kopieren" den Quelltext erhalten (siehe Erläuterungen unter Youtube) und in seiner eigenen Seite verwenden.

Beispiel 5: Integrieren der Videos mit IFrame

http://support.google.com/youtube/bin/answer.py?hl=de&answer=171780 iframe für Youtube-Videos und Playlists

Beispiel 6: Die Javascript Youtube API


Problem 7: Ich brauche ein transparentes Ausgabefeld!

siehe hier:
http://www.w3schools.com/css/css_image_transparency.asp
Funktioniert sehr schön! :-)
und hier gibt es auch noch was:
http://www.html.de/javascript-ajax-und-dhtml/14359-hintergrundfarbe-eines-div-zu-60-transparent-machen.html

Problem 8: Buttons verstecken und wieder anzeigen

Das Grundprinzip für alle Objekte sieht wie folgt aus im Quelltext:
// verstecken
document.getElementById('x').style.visibility='hidden';
 
// anzeigen
document.getElementById('x').style.visibility='visible';
Ausführlichere Darstellungen siehe hier:
http://www.webdeveloper.com/forum/archive/index.php/t-84153.html
http://www.universalwebservices.net/web-programming-resources/javascript/show-hide-elements-with-javascript

Problem 9: Wie schreibe ich am einfachsten meine Arrays?

So!
var stadt = new Array("berlin","stuttgart","münchen","hamburg");
Tipp: Die Länge lässt mit stadt.length abfragen, so dass das Array eine beliebige Länge haben kann!

Problem 10: Arrays als eigene Javascript-Dateien in die Seite einbinden

Wozu soll das gut sein?
Beispiel: Ich habe mehrere Listen von sortierten Musikvideos, z.B. Rock, Pop, Jazz.
Diese kann man als separate Dateien pflegen. Es hat den Vorteil, dass ich nicht aus Versehen
mein Programm durch falsches Editieren kaputt machen kann, wenn ich nur mal ein paar Musikstücke austauschen möchte.
Solch eine Datei heißt dann vielleicht pl-top.js (für playlist top songs in javascript) und sieht z.B. wie folgt aus:
var top = new Array(
     "CaX_2o8ioec",    // Kraftklub - Songs für Liam
     "P9UOHg8tLUE",    // Marilyn Manson feat. Rammstein - The Beautiful People ECHO 2012 [HQ]
     "T0l56t82tiw"     // Elif Demirezer - Nichts tut für immer weh ( in High Definition )
                    );
 
Das ist bereits alles, was man tun muss, um eine Playlist zusammenzustellen.
Einbinden läßt sich der Quelltext für das Array dann wie folgt im Header der eigenen HTML-Seite:
<script src="pl-top.js"></script>
Wenn man das Array im eigenen Quelltext verwenden möchte, dann kann man das jetzt über den Namen des globalen Arrays tun.
Wie heisst das oben angelegte Array? (top ist richtig!)

Problem 11: Wie kann man ein bestimmtes Datum auswählen? (z.B. für die Entwicklung einer Horoskop-Seite)

Am einfachsten ist es, ein kleines Formular zu entwerfen wie z.B. dieses:
<form>
   <input type="text" name="tag" size="2"> Tag (1-31)<br>
   <input type="text" name="monat" size="2"> Monat (1-12)<br>
   <input type="text" name="jahr" size="4"> Jahr (z. B. 1970)
</form>
 
Die eingetragenen Werte müssen dann zuerst einmal mit Javascript überprüft und gewandelt werden (isNaN(), parseInt), ggf. ist eine erneute Eingabe notwendig.
Verschiedene Lösungen zum Thema Zeit finden Sie hier:

Problem 12: 60 Sekunden Zeitbegrenzung in Javascript? (Aufgabe: Quiz)

Folgendes Beispiel zeigt die Verwendung der Zeit in eigenen Javascript-Programmen.
<!DOCTYPE html>
<html>
<head>
 
  <title>Zeit</title>
  <meta charset="utf-8">
 
  <style>
 
    #Zeit
    {
      position:       absolute;
      top:            80px;
      left:           80px;
      width:          12em;
      height:         2em;
      text-align:     center;
      color:          blue;
      background:     #aaaaaa;
      border-width:   2px;
      font-size:      3em;
      border-color:   #000000;
      border-style:   solid;
    }
 
  </style>
 
  <script>
 
    function zeitausgabe()
    {
      var jetzt = new Date();
 
      var Tag   = jetzt.getDate();
      var Monat = jetzt.getMonth();
      var Jahr  = jetzt.getFullYear();
 
      var Std   = jetzt.getHours();
      var Min   = jetzt.getMinutes();
      var Sek   = jetzt.getSeconds();
 
      var StdAusgabe = ((Std < 10) ? "0" + Std : Std);
      var MinAusgabe = ((Min < 10) ? "0" + Min : Min);
      var SekAusgabe = ((Sek < 10) ? "0" + Sek : Sek);
 
      document.getElementById("Zeit").innerHTML = Tag + "." + (Monat+1) + "." + Jahr + "  " + StdAusgabe + "." + MinAusgabe + "." + SekAusgabe + " Uhr";
    }
 
  </script>
 
 
</head>
<body onLoad="javascript:setInterval('zeitausgabe()', 1000);">
 
   <div id="Zeit"></div>
 
   <script>
     zeitausgabe();
   </script>
 
</body>
 
</html>

Problem 13: Ich möchte mehrere Videos nacheinander anzeigen. Wie geht das?

Das folgende Beispiel einer Slideshow sollte Ihnen dabei helfen, eine eigene Lösung zu entwickeln für die Anzeige mehrerer aufeinander folgender Videos.
<!DOCTYPE html>
<html>
 
<head>
  <title>Slideshow</title>
  <meta charset="utf-8">
 
  <style>
 
    body
    {
      position:      absolute;
      top:           80px;
      left:          80px;
      width:         500px;
      height:        333px;
      background:    #aaaaaa;
      border-width:  1px;
      border-color:  #000000;
      border-style:  solid;
    }
 
  </style>
 
  <script>
 
    // slideshow image counter
    var i = 0;
 
    // set up list of images
    fernseher = new Array()
 
    fernseher[0]="http://display-magazin.net/editor/knowledge/125/large.jpg";
    fernseher[1]="http://www.grossstadtsurvivor.de/wp-content/fernseher.jpg";
    fernseher[2]="http://www.fernsehervergleich.com/wp-content/uploads/fernseher-vergleich.jpg";
    fernseher[3]="http://bilder.baur.de/pool/formata/4733230.jpg";
    fernseher[4]="http://www.kidsgo.de/images/cms/969728_kinder-fernsehen.jpg";
 
    function slideShow()
    {
      // load image
      document.images[0].src=fernseher[i];
 
      // increment counter
      i=i+1;
 
      // when at the end, start again
      if(i==5)
      {
        i=0;
      }
    }
 
  </script>
 
</head>
 
<body onLoad="javascript:setInterval('slideShow()',2000);">
 
    <img src="" name="bild" alt="TV">
 
    <!-- Jetzt ist die Seite fast komplett geladen und
         das Bild des obigen <img>-Elements kann jetzt
         auch gesetzt werden -->
 
    <script>
      document.bild.src=fernseher[0];
    </script>
 
</body>
 
</html>
 

Problem 14: Ich möchte herausfinden, welche Flash-Version installiert ist!

Quellcode siehe hier:
http://www.billbo.de/detect.htm

Problem 15: Wie kann man fremde Inhalte komplett in eigene Seiten übernehmen?

Mit dem Tag iframe funktioniert das ganz prima. Um eine gute Note zu bekommen, ist es jedoch weniger gut geeignet! ;-)
...
 
  <!-- Mit iframe kann man fremde Inhalte direkt in eigene
       Seiten einbinden, z.B. wie folgt ... -->
  <iframe src="http://www.songlab.de/"
          width="300"
          height="200"
          marginwidth="0"
          marginheight="0"
          frameborder="0"
          scrolling="no">
  </iframe>
 
...
 

Problem 16: Wie kann ich Text in meinen Arrays suchen?

Das folgende Script tut so etwas, siehe Javascript Funktion indexOf()
<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>Suche!</title>
 
  <meta charset="utf-8">
 
  <script>
 
    var songs = new Array( "Stevie Wonder, Sir Duke",
                           "David Bowie, Heroes",
                           "AC/DC, Highway to hell");
 
    function suche( was )
    {
      // Falls nichts gefunden wird, dann steht der Wert der Variable
      // gefunden auch nach Durchführung der Suche immer noch auf false
      // und eine entsprechende Meldung wird ausgegegeben.
      var gefunden = false;
 
      for(var i=0; i<songs.length; i++)
      {
        // Für den Vergleich wird die Gross-/Kleinschreibung ignoriert
        // beide Zeichenketten werden in Kleinbuchstaben gewandelt
        // siehe Javascript Funktionen indexOf() und toLowerCase()
        if( -1 != ( songs[i].toLowerCase() ).indexOf( was.toLowerCase() ) )
        {
          alert( "gefunden: " + songs[i] );
          gefunden = true;
        }
      }
      if( gefunden == false )
      {
        alert("nichts gefunden");
      }
 
    }
 
  </script>
</head>
 
<body>
  <h1>Suche nach Text in meinem Array</h1>
 
  <form name="meineForm" action="">
   <input type="text" name="irgendwas" size="20">
   <input type="button" value="suche" onclick="suche(document.meineForm.irgendwas.value)">
  </form>
 
  <h3>
  Tipp: Für die erfolgreiche Suche können Sie alle Teile der folgenden Zeichenketten angeben:
  "Stevie Wonder, Sir Duke", "David Bowie, Heroes" und "AC/DC, Highway to hell".
  </h3>
 
  <div id="ausgabe"></div>
 
</body>
 
</html>

Problem 17: Wie kann man Vokabeln vergleichen?

So! :-)
<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>Vokabeln pruefen!</title>
 
  <meta charset="utf-8">
 
  <script>
 
    // G L O B A L E  V A R I A B L E N
 
    var deutsch = new Array( "Baum","Pferd","Haus" );
    var englisch = new Array( "tree","horse","house" );
    var zufallindex = -1;
 
    document.meineForm.irgendwas.value = "";
 
    // F U N K T I O N E N
 
    // Welcher Text soll übersetzt werden?
    function auswahl()
    {
      // Zufaellig den Index eines Array-Elements bestimmen
      zufallindex = Math.floor( deutsch.length * Math.random() );
 
      // Text im Array auslesen
      var vokabel = deutsch[ zufallindex ];
 
      // und in der Seite sichtbar machen
      document.getElementById("voc").innerHTML = vokabel;
    }
 
    function pruefe()
    {
      var was = document.meineForm.irgendwas.value;
 
      alert( was.length );
      alert( englisch[zufallindex].length );
 
      if( englisch[zufallindex] == was )
      {
        alert("Supertalent");
      }
      else
      {
        alert("das war nichts");
      }
    }
 
  </script>
</head>
 
<body>
 
  <div id="voc"></div>
 
  <form name="meineForm" action="">
   <input type="text" name="irgendwas" size="20">
   <input type="button" value="pruefen" onclick="pruefe()">
   <input type="button" value="neue Vokabel" onclick="auswahl()">
  </form>
 
  <div id="ausgabe"></div>
 
</body>
</html>

Problem 18: Wie bekomme ich mit Javascript ein Bild in einem div-Tag angezeigt?

<!DOCTYPE html>
<html>
<head>
  <title>Bild in DIV</title>
  <meta charset="utf-8">
  <style>
    #bloed
    {
      position:       absolute;
      top:            80px;
      left:           80px;
      width:          12em;
      text-align:     center;
      color:          blue;
      background:     #aaaaaa;
      border-width:   0px;
      font-size:      3em;
      border-color:   #000000;
      border-style:   solid;
    }
  </style>
 
  <script>
 
   function bildanzeige()
   {
     document.getElementById("bloed").innerHTML
       = "<img src=\"http://www.mediakg.de/products/1x-amp/jukebox.jpg\" alt=\"jukebox\">";
   }
 
  </script>
 
</head>
 
<body>
  <form name="bildform" action="">
    <input type="button" value="Bild anzeigen" onclick="bildanzeige()">
  </form>
  <div id="bloed"></div>
</body>
 
</html>

Problem 19: Wie kann ich ein Bild auswechseln in einem HTML-Element?

<!DOCTYPE html>
<html>
<head>
 
    <title>Bild austauschen</title>
    <meta charset="utf-8">
 
    <style>
       body
       {
         font-size: 2em;
       }
    </style>
 
    <script>
      function lala()
      {
        document.getElementById('bild').src=
              "bild"+(Math.floor(Math.random()*2)+1)+".jpg";
      }
    </script>
 
</head>
<body>
 
    <h1>Klick auf das Bild!</h1>
 
    <img
      src="bild1.jpg"
      id="bild"
      alt="bild1"
      onclick="document.getElementById('bild').src='bild2.jpg'">
 
    <div onclick="document.getElementById('bild').src='bild1.jpg'">
      Oder hierher
    </div>
 
    <p onclick="lala()">
      Nein hierher mehrfach ;-)
    </p>
 
</body>
</html>

Problem 20: Beispiel für die Aufteilung von Geldsummen für den Quiz?

<!DOCTYPE html>
<html>
<head>
 
  <title>Geld</title>
  <meta charset="utf-8">
 
  <style>
    #geldanzeige
    {
      position:       absolute;
      top:            80px;
      left:           40px;
      width:          12em;
      height:         100px;
      text-align:     center;
      color:          blue;
      background:     #aaaaaa;
      border-width:   2px;
      font-size:      3em;
      border-color:   #000000;
      border-style:   solid;
    }
  </style>
 
  <script>
 
   var betrag=0;
   var teilbetraege=new Array(4);
 
   function geldaddieren(teilbetrag)
   {
     betrag += parseFloat( teilbetrag );
     document.getElementById("geldanzeige").innerHTML =
       "Kontostand: " + betrag;
   }
 
   function uebernehmen( summe )
   {
     betrag = parseFloat( summe );
     document.getElementById("geldanzeige").innerHTML =
       "Kontostand: " + betrag;
   }
 
   function gesamtsummeaufteilen( eins, zwei, drei, vier )
   {
     document.getElementById("teil1").innerHTML = eins;
     document.getElementById("teil2").innerHTML = zwei;
     document.getElementById("teil3").innerHTML = drei;
     document.getElementById("teil4").innerHTML = vier;
 
     betrag -= (eins+zwei+drei+vier);
     document.getElementById("geldanzeige").innerHTML =
       "Kontostand: " + betrag;
   }
 
  </script>
 
</head>
 
<body>
  <form name="geldform" action="">
    <input type="text" name="geldeingabe" value="0">
    <input type="button" value="Buchen" onclick="geldaddieren(document.geldform.geldeingabe.value)">
    <input type="button" value="Setzen" onclick="uebernehmen(document.geldform.geldeingabe.value)">
    <input type="button" value="Geldaufteilen 10 20 30 40" onclick="gesamtsummeaufteilen(10,20,30,40)">
  </form>
 
  <div id="geldanzeige"></div>
  <div id="teil1"></div>
  <div id="teil2"></div>
  <div id="teil3"></div>
  <div id="teil4"></div>
 
</body>
 
</html>

Problem 21: Woher weiss ich, wann Youtube mit dem Spielen eines Videos fertig ist?

siehe hier:
http://www.humbug.in/stackoverflow/de/how-can-i-play-two-youtube-videos-without-linking-to-a-playlist--4950837.html

Problem 22: Wie kann man ein neues Fenster öffnen für eine Hilfeseite?

siehe z.B. hier: http://javascript-array.com/scripts/window_open/
<!DOCTYPE html>
 
 <!-- dieses Script zeigt, wie man mit
       Javascript ein neues Fenster öffnet -->
 
<html>
 
<head>
 
  <title>Hilfe-Fenster öffnen</title>
  <meta charset="utf-8">
 
  <script>
 
    function launchHelp()
    {
      var winHelp;  /* hier merke ich mir, ob das Fenster bereits geoeffnet wurde! */
 
      if ( (winHelp == null) || (winHelp.closed) )
      {
         winHelp = window.open( 'http://www.mathe-online.at/rechner/rechnerhelp.html'
                              , 'Hilfe'
                              , "width=390, height=365, resizable=1, status=0, menubar=1, scrollbars=0, location=0"
                              );
         winHelp.opener = top;
      }
 
      winHelp.focus();
    }
 
  </script>
 
</head>
 
<body>
 
  <form action="">
  <!-- z.B. ein Button zwecks Aufruf der Hilfe -->
 
  <input type    = "button"
         value   = "Hilfe!"
         onclick = "launchHelp()">
 
   </form>
 
</body>
 
</html>
 

Problem 23: Wie kann ich eine Uhr programmieren?

// Die folgenden Code-Fragmente müssen Sie noch
// vervollständigen, so dass eine richtige HTML-Datei
// daraus wird!
 
// HTML-Code:
 
<div id="uhr">
 
 
// CSS-Code:
 
#uhr
{
    font-family: sans-serif;
    font-size:   2em;
}
 
 
// Javascript-Code:
 
function clock()
{
  var tag=new Date();
  var zeit=tag.toLocaleTimeString();
  document.getElementById("uhr").innerHTML=zeit;
}
 
var int=self.setInterval( function(){clock();}, 1000);

Problem 24: Objekt ermitteln, welches gerade den Fokus hat

var last_focus    = false;
 
function focustest()
{
   if( last_focus )
   {
     alert(last_focus.name);
   }
}
 
// Funktion für die Eingabe eines beliebigen Zeichens in
// das Feld, im dem sich gerade der Fokus befindet (Eingabe-Cursor)
 
function eingabe( zeichen )
{
  last_focus.value += zeichen;
}
 
 
// Textfelder
...
<input type="text" ... onfocus="last_focus=this"></input>
<input type="text" ... onfocus="last_focus=this"></input>
 
// Button zur Eingabe der Zahl 1
<input type="button" value="1" onclick="eingabe(1)"></input>
 
// Button zum Testen des Fokus
<input type="button" ... onclick="focustest()"></input>
 
// Feld, in das keine Zeichen per Buttonklick geschrieben werden sollen
<input ... onfocus="last_focus=false"></input>
...

Problem 25: Wie kann man die Position eines Images mit einem Intervall-Timer gesteuert verändern?

z.B. wie folgt:
...
    <style>
 
      #geldschein
      {
        position: absolute;
      }
 
      #ausgabefeld
      {
        position:    absolute;
        top:         250px;
        left:        300px;
        font-size:   2em;
        font-family: Arial, sans-serif;
      }
 
    </style>
 
    <script>
 
      var x=-300;
 
      function ausgabe()
      {
       if( x>0 )
       {
         x=(x+25)%1400;
       }
       else
         x=x+25;
 
       if( x > 1300 )
       {
         x=-300;
       }
 
       document.getElementById("geldschein").style.left = x + "px";
       document.getElementById("ausgabefeld").innerHTML=x;
    }
 
    </script>
 
</head>
 
<body onload="window.setInterval('ausgabe()',40);">
 
  <img id="geldschein" src="100.jpg">
  <div id="ausgabefeld"></div>
 
...
 

Problem 26: Wie kann man Bildschirm-Größen in Javascript abfragen?

z.B. so ...
(siehe auch http://www.w3schools.com/html/html5_video.asp)
    function ausgabe( x )
    {
      document.getElementById("out").innerHTML += x;
    }
 
    function test()
    {
      ausgabe( "screen.width: " + screen.width + "<br>" );
      ausgabe( "screen.height: " + screen.height + "<br>" );
      ausgabe( "screen.availWidth: " + screen.availWidth + "<br>" );
      ausgabe( "screen.availHeight: " + screen.availHeight + "<br>" );
      ausgabe( "document.body.clientWidth: " + document.body.clientWidth + "<br>" );
      ausgabe( "document.body.clientHeight: " + document.body.clientHeight + "<br>" );
      ausgabe( "window.innerWidth: " + window.innerWidth + "<br>" );
      ausgabe( "window.innerHeight: " + window.innerHeight + "<br>" );
 
      if (screen.width <= 800)
      {
        ausgabe('<link rel="stylesheet" type="text/css" href="800.css">');
        ausgabe("StyleSheet für 800 x 600 wird geladen.<br>");
      }
      else
      {
        if (screen.width <= 1024)
        {
          ausgabe('<link rel="stylesheet" type="text/css" href="1024.css">');
          ausgabe("StyleSheet für 1024 x 768 wird geladen.<br>");
        }
        else
        {
          ausgabe('<link rel="stylesheet" type="text/css" href="1280.css">');
          ausgabe("StyleSheet für 1280 x 960 wird geladen.<br>");
        }
      }
      ausgabe("<hr>");
    }
 

Problem 27: Wie bindet man einen eigenen Editor in seine Seite ein?

Man kann auch einen Editor in Javascript schreiben, siehe folgende Links zum Beispiel CKEditor!
Dieser Editor steht zur freien Nutzung zur Verfügung.

Das folgende einfache Anwendungsbeispiel funktioniert auf Anhieb,
wenn Sie den CKEditor in ein Unterverzeichnis namens "ck" speichern.
<!DOCTYPE html>
<html>
 
<head>
  <script src="ck/ckeditor.js"></script>
</head>
 
<body>
  <form name="edit">
    <textarea class="ckeditor" name="editor1"></textarea>
  </form>
</body>
 
</html>
 

Problem 28: Wie lagert man Javascript-Quelltext in eine separate Datei aus?

siehe z.B. http://www.web-toolbox.net/webtoolbox/java/javascript-externe-datei.htm
Gründe:
  • bessere Übersicht über das Projekt bei viel Quelltext
  • unabhängiges Arbeiten an verschiedenen Teilen eines Projekts (z.B. bei mehreren Entwicklern)
  • Fehlersuche einfacher, wenn immer nur an Teilen eines Projekts gearbeitet wird
  • ...

Auslagerungs-Syntax

<script src="hallo.js"></script>

Beispiel

In der ausgelagerten Datei steht der Quelltext wie gehabt, z.B. enthält die Datei hallo.js nur die Zeile alert("Hallo") in einer Funktion namens hallo().

HTML-Datei hallo.html:

<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>Hallo!</title>
  <meta charset="utf-8">
  <script src="hallo.js"></script>
 
</head>
 
<body>
 
  <script>
    hallo();
  </script>
 
</body>
 
</html>

Javascript-Datei hallo.js:

function hallo()
{
  alert("Hallo");
}