E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Allgemeines
  2. Taschenrechner
  3. Quiz

Allgemeines

In JavaScript ist es sehr wichtig kreativ zu sein und die verschiedenen Befehle und Anweisungen clever anzuwenden. Vielen Personen fällt dies sehr schwer, mit JavaScript große Skripte zu programmieren. Ein schönes Beispiel für JavaScript-Skripte ist der Taschenrechner. Im Internet findet man zu dem Taschenrechner viele Beispiele. Wir wollen Ihnen eine dieser Varianten vorstellen. Des Weiteren haben wir als 2. Beispiel ein kleines Quiz erstellt. Bitte beachten Sie, dass die Erklärungn hier etwas kurz gehalten sind, sodass Sie selbst zum Überlegen angeregt sind.


Taschenrechner

Unser Taschenrechner besteht aus insgesamt 3 Dateien: index.html, style.css und script.js Wir schreiben nun als erstes das HTML-Grundgerüst und dann die fast gleichen Angaben in dem Head-Bereich, wie bei den CSS-Beispielseiten. Nur die Zugabe des Links für die JavaScript-Datei erfolgt noch.

<!DOCTYPE HTML>
<html>
 
  <head>
  </head>
 
  <body>
  </body>
 
</html>
<title>JavaScript Beispiel</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<meta name="author" content="Benjamin Jung" />
<meta name="description" content="Dies ist eine Beispiel von 'Homepage-Webhilfe'. Dieses Beispiel soll das JavaScript programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="JavaScript, Beispiel, Homepage-Webhilfe, Programmierung" />
 
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="script.js"></script>

In das HTML-Dokument setzen wir nun einen "JavaScript deaktiviert Hinweis" und eine Überschrift. Dies sieht dann so aus:

<noscript>
<p>JavaScript muss aktiviert sein um den Taschenrechner nutzen zu können!</p>
<br />
</noscript>
 
<h1>Taschenrechner</h1>

Nun wollen wir ein paar Anweisungen für die Gestaltung festlegen. Dazu erstellen wir eine Datei mit dem Namen style.css In dieser Datei legen wir nun Werte für "body", "p", "a", "h1", ".anzeige", ".buttonC" und ".buttonR" fest. Hier die vollständige CSS-Datei:

body {
    width: 600px;
}
 
p {
    font-family: sans-serif;
    font-size: 18px;
}
 
a {
    font-family: sans-serif;
    font-size: 18px;
}
 
h1 {
    font-family: sans-serif;
    font-size: 24px;
    text-align: center;
}
 
.anzeige {
    text-align: right;
    font-size: 99%;
    width: 550px;
    margin-left: 25px;
}
 
.buttonC {
    width: 130px;
    margin-left: 10px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
}
 
.buttonR {
    width: 130px;
    margin-left: 10px;
    text-align: right;
    font-family: sans-serif;
    font-size: 18px;
}

Nun kommen wir nochmals zurück auf die HTML-Datei. In dieser HTML-Datei müssen wir für den Taschenrechner ein Formular (form) und eine bzw. mehrere Tabellen erstellen. In den einzelnen Zellen wird mit dem Attribute onclick, die Anweisung für die JavaScript-Datei durchgeführt, die dann letztendlich die Rechnungen durchführen und das Ergebnis später im Anzeigefeld wiederrum darstellen. Wie Sie aus der CSS-Datei schon sehen konnten haben wir 2 verschiedene Klassifizierungen erstellt, mit der die Buttons designed werden. Der Unterschied zwischen ".buttonR" und ".buttonC" ist die Ausrichtung des Textes. Hier nun der restliche Code der HTML-Datei:

<form name="Taschenrechner" action="" onsubmit="Ergebnis(); return flase">
<table border="0" cellpadding="12" cellspacing="0">
  <tr><td bgcolor="#969696"><input type="text" name="Anzeige" class="anzeige" /></td></tr>
  <tr>
    <td bgcolor="#D2D2D2">
      <table cellpadding="0" cellspacing="7">
        <tr>
          <td><input type="reset" class="buttonC" value="C" /></td>
          <td><input type="button" class="buttonC" value="&radic;" onclick="Sonderfunktion('sqrt')" /></td>
          <td><input type="button" class="buttonC" value="x&sup2;" onclick="Sonderfunktion('pow')" /></td>
          <td></td>
        </tr>
        <tr>
          <td><input type="button" class="buttonC" value="+" onclick="Add('+')" /></td>
          <td><input type="button" class="buttonR" value="7" onclick="Add('7')" /></td>
          <td><input type="button" class="buttonR" value="8" onclick="Add('8')" /></td>
          <td><input type="button" class="buttonR" value="9" onclick="Add('9')" /></td>
        </tr>
        <tr>
          <td><input type="button" class="buttonC" value="-" onclick="Add('-')" /></td>
          <td><input type="button" class="buttonR" value="4" onclick="Add('4')" /></td>
          <td><input type="button" class="buttonR" value="5" onclick="Add('5')" /></td>
          <td><input type="button" class="buttonR" value="6" onclick="Add('6')" /></td>
        </tr>
        <tr>
          <td><input type="button" class="buttonC" value=":" onclick="Add('/')" /></td>
          <td><input type="button" class="buttonR" value="1" onclick="Add('1')" /></td>
          <td><input type="button" class="buttonR" value="2" onclick="Add('2')" /></td>
          <td><input type="button" class="buttonR" value="3" onclick="Add('3')" /></td>
        </tr>
        <tr>
          <td><input type="button" class="buttonC" value="*" onclick="Add('*')" /></td>
          <td><input type="button" class="buttonC" value="=" onclick="Ergebnis()" /></td>
          <td><input type="button" class="buttonR" value="0" onclick="Add('0')" /></td>
          <td><input type="button" class="buttonR" value="." onclick="Add('.')" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>

Nun kommen wir zum letzten Teil: Das JavaScript-Dokument. Unsere Erklärung teilt sich in 3 Teile: Kontrolle der eingegebenen Zeichen, Ergebnis anzeigen und Zeichen hinzufügen und Sonderfunktionen. Wir beginnen mit der Zeichenkontrolle. In unserem JavaScript-Dokument benötigen wir die Funktion Zeichenkontrolle und die Variable "erlaubtezeichen". Diese Namen dürfen natürlich variieren. Das ganze sieht folgendermaßen aus:

function Zeichenkontrolle (Eingabe) {
  var erlaubtezeichen = "+-/*().0123456789";
  for (var i = 0; i < Eingabe.length; i++)
    if (erlaubtezeichen.indexOf(Eingabe.charAt(i)) < 0)
      return false;
  return true;
}

Nun wollen wir weiter machen mit der Ausgabe des Ergebnisses und das Hinzufügen von Zeichen. Die Überprüfung der eingebenen Zeichen findet erst später statt. Hier das Script dazu:

function Ergebnis () {
  var x = 0;
  if (Zeichenkontrolle(document.Taschenrechner.Anzeige.value))
    x = eval(document.Taschenrechner.Anzeige.value);
  document.Taschenrechner.Anzeige.value = x;
}
 
function Add (Zeichen) {
  document.Taschenrechner.Anzeige.value = document.Taschenrechner.Anzeige.value + Zeichen;
}

Als letzten Teil im JavaScript-Dokument benötigen wir noch die Sonderfunktionen. Unser Taschenrechner soll später eine Wurzel ziehen können und Zahlen Hochzwei (x2) rechnen können. Dazu benötigen wir weitere Anweisungen im JavaScript-Dokument. Übrigens, erfolgt innerhalb einer Abfrage (if oder else) oder bei einer Schleife nur eine Anweisung, dann können die geschweiften Klammern weggelassen werden.

function Sonderfunktion (Funktion) {
  if (Zeichenkontrolle(document.Taschenrechner.Anzeige.value)) {
    if (Funktion == "sqrt") {
      var x = 0;
      x = eval(document.Taschenrechner.Anzeige.value);
      document.Taschenrechner.Anzeige.value = Math.sqrt(x);
    }
    if (Funktion == "pow") {
      var x = 0;
      x = eval(document.Taschenrechner.Anzeige.value);
      document.Taschenrechner.Anzeige.value = x * x);
    }
  }
  else
    document.Taschenrechner.Anzeige.value = 0;
}

Nun ist unser Taschenrechner komplett fertig. Nun fügen wir für Sie den kompletten Code nochmals zusammen. Hier sehen Sie nochmal alle 3 Dateien (1. HTML, 2. CSS, 3. JavaScript):

<!DOCTYPE HTML>
<html>
 
<head>
  <title>JavaScript Beispiel</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Dies ist ein Beispiel von 'Homepage-Webhilfe'. Dieses Beispiel soll das JavaScript programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="JavaScript, Beispiel, Homepage-Webhilfe, Programmierung" />
 
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
  <link href="style.css" type="text/css" rel="stylesheet" />
  <script language="javascript" type="text/javascript" src="script.js"></script>
</head>
 
<body>
  <noscript>
  <p>JavaScript muss aktiviert sein um den Taschenrechner nutzen zu können!</p>
  <br />
  </noscript>
 
  <h1>Taschenrechner</h1>
 
  <form name="Taschenrechner" action="" onsubmit="Ergebnis(); return false">
  <table border="0" cellpadding="12" cellspacing="0">
    <tr><td bgcolor="#969696"><input type="text" name="Anzeige" class="anzeige" /></td></tr>
    <tr>
      <td bgcolor="#D2D2D2">
        <table cellpadding="0" cellspacing="7">
          <tr>
            <td><input type="reset" class="buttonC" value="C" /></td>
            <td><input type="button" class="buttonC" value="&radic;" onclick="Sonderfunktion('sqrt')" /></td>
            <td><input type="button" class="buttonC" value="x&sup2;" onclick="Sonderfunktion('pow')" /></td>
            <td></td>
          </tr>
          <tr>
            <td><input type="button" class="buttonC" value="+" onclick="Add('+')" /></td>
            <td><input type="button" class="buttonR" value="7" onclick="Add('7')" /></td>
            <td><input type="button" class="buttonR" value="8" onclick="Add('8')" /></td>
            <td><input type="button" class="buttonR" value="9" onclick="Add('9')" /></td>
          </tr>
          <tr>
            <td><input type="button" class="buttonC" value="-" onclick="Add('-')" /></td>
            <td><input type="button" class="buttonR" value="4" onclick="Add('4')" /></td>
            <td><input type="button" class="buttonR" value="5" onclick="Add('5')" /></td>
            <td><input type="button" class="buttonR" value="6" onclick="Add('6')" /></td>
          </tr>
          <tr>
            <td><input type="button" class="buttonC" value=":" onclick="Add('/')" /></td>
            <td><input type="button" class="buttonR" value="1" onclick="Add('1')" /></td>
            <td><input type="button" class="buttonR" value="2" onclick="Add('2')" /></td>
            <td><input type="button" class="buttonR" value="3" onclick="Add('3')" /></td>
          </tr>
          <tr>
            <td><input type="button" class="buttonC" value="*" onclick="Add('*')" /></td>
            <td><input type="button" class="buttonC" value="=" onclick="Ergebnis()" /></td>
            <td><input type="button" class="buttonR" value="0" onclick="Add('0')" /></td>
            <td><input type="button" class="buttonR" value="." onclick="Add('.')" /></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </form> 
</body>
 
</html>
body {
    width: 600px;
}
 
p {
    font-family: sans-serif;
    font-size: 18px;
}
 
a {
    font-family: sans-serif;
    font-size: 18px;
}
 
h1 {
    font-family: sans-serif;
    font-size: 24px;
    text-align: center;
}
 
.anzeige {
    text-align: right;
    font-size: 99%;
    width: 550px;
    margin-left: 25px;
}
 
.buttonC {
    width: 130px;
    margin-left: 10px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
}
 
.buttonR {
    width: 130px;
    margin-left: 10px;
    text-align: right;
    font-family: sans-serif;
    font-size: 18px;
}
function Zeichenkontrolle (Eingabe) {
  var erlaubtezeichen = "+-/*().0123456789";
  for (var i = 0; i < Eingabe.length; i++)
    if (erlaubtezeichen.indexOf(Eingabe.charAt(i)) < 0)
      return false;
  return true;
}
 
function Ergebnis () {
  var x = 0;
  if (Zeichenkontrolle(document.Taschenrechner.Anzeige.value))
    x = eval(document.Taschenrechner.Anzeige.value);
  document.Taschenrechner.Anzeige.value = x;
}
 
function Add (Zeichen) {
  document.Taschenrechner.Anzeige.value = document.Taschenrechner.Anzeige.value + Zeichen;
}
 
function Sonderfunktion (Funktion) {
  if (Zeichenkontrolle(document.Taschenrechner.Anzeige.value)) {
    if (Funktion == "sqrt") {
      var x = 0;
      x = eval(document.Taschenrechner.Anzeige.value);
      document.Taschenrechner.Anzeige.value = Math.sqrt(x);
    }
    if (Funktion == "pow") {
      var x = 0;
      x = eval(document.Taschenrechner.Anzeige.value);
      document.Taschenrechner.Anzeige.value = x * x);
    }
  }
  else
    document.Taschenrechner.Anzeige.value = 0;
}

Der Taschenrechner konnte hier veröffentlicht werden mit freundlicher Unterstützung von

Anzeigebeispiel
Anzeigebeispiel



Quiz

Unser Deutschland-Quiz ist ein einfaches Beispiel, wie man ein Quiz erstellt. Dieses Quiz besteht aus 5 Fragen. Alle Fragen werden auf einmal beantwortet. Wenn Sie auf den "Ergebnis prüfen"-Button klicken, werden alle Felder farbig hervorgehoben. Wir schreiben nun als erstes das HTML-Grundgerüst und dann die gleichen Angaben in den Head-Bereich, wie bei dem Taschenrechnerbeispiel:

<!DOCTYPE HTML>
<html>
 
  <head>
  </head>
 
  <body>
  </body>
 
</html>
<title>JavaScript Beispiel</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<meta name="author" content="Benjamin Jung" />
<meta name="description" content="Dies ist eine Beispiel von 'Homepage-Webhilfe'. Dieses Beispiel soll das JavaScript programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="JavaScript, Beispiel, Homepage-Webhilfe, Programmierung" />
 
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="script.js"></script>

Als nächstes erstellen wir in die HTML-Datei wieder den "JavaScript deaktiviert Hinweis" und die Überschrift.

<noscript>
<p>JavaScript muss aktiviert sein um das Quiz nutzen zu können!</p>
<br />
</noscript>
 
<h1>Deutschland Quiz</h1>

Nun wollen wir in der HTML-Datei das 1. Formular (zum Absenden) erstellen. Dazu haben wir ein großes Formular, jeweils einen Textabsatz für jede Frage, jweils 4 Radio-Buttons für jede Frage und als Trennung zwischen den Fragen immer zwei Zeilenumbrüche (br).

<form name="Quiz" action="" onsubmit="loesung(); return false">
<p>Wo befindet sich das Bundesverfassungsgericht?</p>
<span id="c11"><input type="radio" name="frage1" value="1" />Köln</span>
<br />
<span id="c12"><input type="radio" name="frage1" value="2" />Berlin</span>
<br />
<span id="c13"><input type="radio" name="frage1" value="3" />Karlsruhe</span>
<br />
<span id="c14"><input type="radio" name="frage1" value="4" />Bonn</span>
<br /><br />
<p>Wie heißt der höchste Berg Deutschlands?</p>
<span id="c21"><input type="radio" name="frage2" value="1" />Watzmann</span>
<br />
<span id="c22"><input type="radio" name="frage2" value="2" />Zugspitze</span>
<br />
<span id="c23"><input type="radio" name="frage2" value="3" />Feldberg</span>
<br />
<span id="c24"><input type="radio" name="frage2" value="4" />Hochwanner</span>
<br /><br />
<p>Welcher deutsche Autohersteller verkauft die meisten Autos?</p>
<span id="c31"><input type="radio" name="frage3" value="1" />Daimler</span>
<br />
<span id="c32"><input type="radio" name="frage3" value="2" />BMW</span>
<br />
<span id="c33"><input type="radio" name="frage3" value="3" />Ford</span>
<br />
<span id="c34"><input type="radio" name="frage3" value="4" />Volkswagen</span>
<br /><br />
<p>An welches Bundesland grenzen 3 Länder?</p>
<span id="c41"><input type="radio" name="frage4" value="1" />Sachsen</span>
<br />
<span id="c42"><input type="radio" name="frage4" value="2" />Rheinland-Pfalz</span>
<br />
<span id="c43"><input type="radio" name="frage4" value="3" />Brandenburg</span>
<br />
<span id="c44"><input type="radio" name="frage4" value="4" />Nordrhein-Westfalen</span>
<br /><br />
<p>Wie viel Einwohner hat Deutschland?</p>
<span id="c51"><input type="radio" name="frage5" value="1" />unter 60 Millionen</span>
<br />
<span id="c52"><input type="radio" name="frage5" value="2" />zwischen 60 und 70 Millionen</span>
<br />
<span id="c53"><input type="radio" name="frage5" value="3" />zwischen 70 und 80 Millionen</span>
<br />
<span id="c54"><input type="radio" name="frage5" value="4" />mehr als 80 Millionen</span>
<br /><br />
<input type="submit" name="weiter" value="Ergebnis Pr&uuml;fen" />
</form>
<br />

Als nächstes brauchen wir das 2. Formular. Mit dem 2. Formular, löscht die JavaScript-Datei die Hintergrundfarben der einzelnen Ergebnisse wieder.

<form name="QuizD" action="" onsubmit="loeschen(); return false">
<input type="submit" name="delet" value="L&ouml;schen" />
</form>

Nun beginnen wir mit der CSS-Gestaltung. Dazu geben wir den Tags body, input, br, p, a und h1 spezielle Einstellungen. Des Weiteren erstellen wir noch jede Menge ID´s (für die farbliche Hervorhebung - wird in unseren HTML-Codes durch SPAN-Elemente ID zugewiesen).

body {
    width: 600px;
}
 
input {
    width: sans-serif;
    font-size: 18px;
}
br {
    width: sans-serif;
    font-size: 20px;
}
p {
    width: sans-serif;
    font-size: 20px;
}
a {
    width: sans-serif;
    font-size: 20px;
}
h1 {
    width: sans-serif;
    font-size: 24px;
    text-align: center;
}
 
#c11 {
    background-color: #FFFFFF;
}
#c12 {
    background-color: #FFFFFF;
}
#c13 {
    background-color: #FFFFFF;
}
#c14 {
    background-color: #FFFFFF;
}
 
#c21 {
    background-color: #FFFFFF;
}
#c22 {
    background-color: #FFFFFF;
}
#c23 {
    background-color: #FFFFFF;
}
#c24 {
    background-color: #FFFFFF;
}
 
#c31 {
    background-color: #FFFFFF;
}
#c32 {
    background-color: #FFFFFF;
}
#c33 {
    background-color: #FFFFFF;
}
#c34 {
    background-color: #FFFFFF;
}
 
#c41 {
    background-color: #FFFFFF;
}
#c42 {
    background-color: #FFFFFF;
}
#c43 {
    background-color: #FFFFFF;
}
#c44 {
    background-color: #FFFFFF;
}
 
#c51 {
    background-color: #FFFFFF;
}
#c52 {
    background-color: #FFFFFF;
}
#c53 {
    background-color: #FFFFFF;
}
#c54 {
    background-color: #FFFFFF;
}

Nun kommen wir noch zur JavaScript-Datei. Diese Datei erledigen wir in 2 Schritte. Wir benötigen 2 Funktionen, jeweils 1 Funktion pro Formular (Ergebnis und Löschen). In dem ersten Formular werden die richtigen Ergebnisse grün markiert und die falschen Ergebnisse rot. Dies geschieht unabhängig von der Eingabe des Benutzers. Der Quellcode für die 1. Funktion sieht so aus:

function loesung() {
  document.getElementById("c11").style.backgroundColor = '#FF0000';
  document.getElementById("c12").style.backgroundColor = '#FF0000';
  document.getElementById("c13").style.backgroundColor = '#00FF00';
  document.getElementById("c14").style.backgroundColor = '#FF0000';
  document.getElementById("c21").style.backgroundColor = '#FF0000';
  document.getElementById("c22").style.backgroundColor = '#00FF00';
  document.getElementById("c23").style.backgroundColor = '#FF0000';
  document.getElementById("c24").style.backgroundColor = '#FF0000';
  document.getElementById("c31").style.backgroundColor = '#FF0000';
  document.getElementById("c32").style.backgroundColor = '#FF0000';
  document.getElementById("c33").style.backgroundColor = '#FF0000';
  document.getElementById("c34").style.backgroundColor = '#00FF00';
  document.getElementById("c41").style.backgroundColor = '#FF0000';
  document.getElementById("c42").style.backgroundColor = '#00FF00';
  document.getElementById("c43").style.backgroundColor = '#FF0000';
  document.getElementById("c44").style.backgroundColor = '#FF0000';
  document.getElementById("c51").style.backgroundColor = '#FF0000';
  document.getElementById("c52").style.backgroundColor = '#FF0000';
  document.getElementById("c53").style.backgroundColor = '#FF0000';
  document.getElementById("c54").style.backgroundColor = '#00FF00';
}

Nun erstellen wir noch die 2. Funktion, bei dem alle Elemente wieder auf die Farbe weiß zurückgesetzt werden.

function loeschen() {
  document.getElementById("c11").style.backgroundColor = '#FFFFFF';
  document.getElementById("c12").style.backgroundColor = '#FFFFFF';
  document.getElementById("c13").style.backgroundColor = '#FFFFFF';
  document.getElementById("c14").style.backgroundColor = '#FFFFFF';
  document.getElementById("c21").style.backgroundColor = '#FFFFFF';
  document.getElementById("c22").style.backgroundColor = '#FFFFFF';
  document.getElementById("c23").style.backgroundColor = '#FFFFFF';
  document.getElementById("c24").style.backgroundColor = '#FFFFFF';
  document.getElementById("c31").style.backgroundColor = '#FFFFFF';
  document.getElementById("c32").style.backgroundColor = '#FFFFFF';
  document.getElementById("c33").style.backgroundColor = '#FFFFFF';
  document.getElementById("c34").style.backgroundColor = '#FFFFFF';
  document.getElementById("c41").style.backgroundColor = '#FFFFFF';
  document.getElementById("c42").style.backgroundColor = '#FFFFFF';
  document.getElementById("c43").style.backgroundColor = '#FFFFFF';
  document.getElementById("c44").style.backgroundColor = '#FFFFFF';
  document.getElementById("c51").style.backgroundColor = '#FFFFFF';
  document.getElementById("c52").style.backgroundColor = '#FFFFFF';
  document.getElementById("c53").style.backgroundColor = '#FFFFFF';
  document.getElementById("c54").style.backgroundColor = '#FFFFFF';
}

Das waren nun alle Codes. Wir haben diese für Sie nochmals alle Quellcodes zusammengeführt, dass Sie sehen, wie es im gesamten aussieht (1: HTML - 2: CSS - 3: JavaScipt):

<!DOCTYPE HTML>
<html>
 
<head>
  <title>JavaScript Beispiel</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Dies ist ein Beispiel von 'Homepage-Webhilfe'. Dieses Beispiel soll das JavaScript programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="JavaScript, Beispiel, Homepage-Webhilfe, Programmierung" />
 
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
  <link href="style.css" type="text/css" rel="stylesheet" />
  <script language="javascript" type="text/javascript" src="script.js"></script>
</head>
 
<body>
  <noscript>
  <p>JavaScript muss aktiviert sein um das Quiz nutzen zu können!</p>
  <br />
  </noscript>
 
  <h1>Deutschland Quiz</h1>
  <form name="Quiz" action="" onsubmit="loesung(); return false">
    <p>Wo befindet sich das Bundesverfassungsgericht?</p>
    <span id="c11"><input type="radio" name="frage1" value="1" />Köln</span>
    <br />
    <span id="c12"><input type="radio" name="frage1" value="2" />Berlin</span>
    <br />
    <span id="c13"><input type="radio" name="frage1" value="3" />Karlsruhe</span>
    <br />
    <span id="c14"><input type="radio" name="frage1" value="4" />Bonn</span>
    <br /><br />
    <p>Wie heißt der höchste Berg Deutschlands?</p>
    <span id="c21"><input type="radio" name="frage2" value="1" />Watzmann</span>
    <br />
    <span id="c22"><input type="radio" name="frage2" value="2" />Zugspitze</span>
    <br />
    <span id="c23"><input type="radio" name="frage2" value="3" />Feldberg</span>
    <br />
    <span id="c24"><input type="radio" name="frage2" value="4" />Hochwanner</span>
    <br /><br />
    <p>Welcher deutsche Autohersteller verkauft die meisten Autos?</p>
    <span id="c31"><input type="radio" name="frage3" value="1" />Daimler</span>
    <br />
    <span id="c32"><input type="radio" name="frage3" value="2" />BMW</span>
    <br />
    <span id="c33"><input type="radio" name="frage3" value="3" />Ford</span>
    <br />
    <span id="c34"><input type="radio" name="frage3" value="4" />Volkswagen</span>
    <br /><br />
    <p>An welches Bundesland grenzen 3 Länder?</p>
    <span id="c41"><input type="radio" name="frage4" value="1" />Sachsen</span>
    <br />
    <span id="c42"><input type="radio" name="frage4" value="2" />Rheinland-Pfalz</span>
    <br />
    <span id="c43"><input type="radio" name="frage4" value="3" />Brandenburg</span>
    <br />
    <span id="c44"><input type="radio" name="frage4" value="4" />Nordrhein-Westfalen</span>
    <br /><br />
    <p>Wie viel Einwohner hat Deutschland?</p>
    <span id="c51"><input type="radio" name="frage5" value="1" />unter 60 Millionen</span>
    <br />
    <span id="c52"><input type="radio" name="frage5" value="2" />zwischen 60 und 70 Millionen</span>
    <br />
    <span id="c53"><input type="radio" name="frage5" value="3" />zwischen 70 und 80 Millionen</span>
    <br />
    <span id="c54"><input type="radio" name="frage5" value="4" />mehr als 80 Millionen</span>
    <br /><br />
    <input type="submit" name="weiter" value="Ergebnis Pr&uuml;fen" />
  </form>
  <br />
  <br />
  <form name="QuizD" action="" onsubmit="loeschen(); return false">
  <input type="submit" name="delet" value="L&ouml;schen" />
  </form>
</body>
 
</html>
body {
    width: 600px;
}
 
input {
    width: sans-serif;
    font-size: 18px;
}
br {
    width: sans-serif;
    font-size: 20px;
}
p {
    width: sans-serif;
    font-size: 20px;
}
a {
    width: sans-serif;
    font-size: 20px;
}
h1 {
    width: sans-serif;
    font-size: 24px;
    text-align: center;
}
 
#c11 {
    background-color: #FFFFFF;
}
#c12 {
    background-color: #FFFFFF;
}
#c13 {
    background-color: #FFFFFF;
}
#c14 {
    background-color: #FFFFFF;
}
 
#c21 {
    background-color: #FFFFFF;
}
#c22 {
    background-color: #FFFFFF;
}
#c23 {
    background-color: #FFFFFF;
}
#c24 {
    background-color: #FFFFFF;
}
 
#c31 {
    background-color: #FFFFFF;
}
#c32 {
    background-color: #FFFFFF;
}
#c33 {
    background-color: #FFFFFF;
}
#c34 {
    background-color: #FFFFFF;
}
 
#c41 {
    background-color: #FFFFFF;
}
#c42 {
    background-color: #FFFFFF;
}
#c43 {
    background-color: #FFFFFF;
}
#c44 {
    background-color: #FFFFFF;
}
 
#c51 {
    background-color: #FFFFFF;
}
#c52 {
    background-color: #FFFFFF;
}
#c53 {
    background-color: #FFFFFF;
}
#c54 {
    background-color: #FFFFFF;
}
function loesung() {
  document.getElementById("c11").style.backgroundColor = '#FF0000';
  document.getElementById("c12").style.backgroundColor = '#FF0000';
  document.getElementById("c13").style.backgroundColor = '#00FF00';
  document.getElementById("c14").style.backgroundColor = '#FF0000';
  document.getElementById("c21").style.backgroundColor = '#FF0000';
  document.getElementById("c22").style.backgroundColor = '#00FF00';
  document.getElementById("c23").style.backgroundColor = '#FF0000';
  document.getElementById("c24").style.backgroundColor = '#FF0000';
  document.getElementById("c31").style.backgroundColor = '#FF0000';
  document.getElementById("c32").style.backgroundColor = '#FF0000';
  document.getElementById("c33").style.backgroundColor = '#FF0000';
  document.getElementById("c34").style.backgroundColor = '#00FF00';
  document.getElementById("c41").style.backgroundColor = '#FF0000';
  document.getElementById("c42").style.backgroundColor = '#00FF00';
  document.getElementById("c43").style.backgroundColor = '#FF0000';
  document.getElementById("c44").style.backgroundColor = '#FF0000';
  document.getElementById("c51").style.backgroundColor = '#FF0000';
  document.getElementById("c52").style.backgroundColor = '#FF0000';
  document.getElementById("c53").style.backgroundColor = '#FF0000';
  document.getElementById("c54").style.backgroundColor = '#00FF00';
}
 
function loeschen() {
  document.getElementById("c11").style.backgroundColor = '#FFFFFF';
  document.getElementById("c12").style.backgroundColor = '#FFFFFF';
  document.getElementById("c13").style.backgroundColor = '#FFFFFF';
  document.getElementById("c14").style.backgroundColor = '#FFFFFF';
  document.getElementById("c21").style.backgroundColor = '#FFFFFF';
  document.getElementById("c22").style.backgroundColor = '#FFFFFF';
  document.getElementById("c23").style.backgroundColor = '#FFFFFF';
  document.getElementById("c24").style.backgroundColor = '#FFFFFF';
  document.getElementById("c31").style.backgroundColor = '#FFFFFF';
  document.getElementById("c32").style.backgroundColor = '#FFFFFF';
  document.getElementById("c33").style.backgroundColor = '#FFFFFF';
  document.getElementById("c34").style.backgroundColor = '#FFFFFF';
  document.getElementById("c41").style.backgroundColor = '#FFFFFF';
  document.getElementById("c42").style.backgroundColor = '#FFFFFF';
  document.getElementById("c43").style.backgroundColor = '#FFFFFF';
  document.getElementById("c44").style.backgroundColor = '#FFFFFF';
  document.getElementById("c51").style.backgroundColor = '#FFFFFF';
  document.getElementById("c52").style.backgroundColor = '#FFFFFF';
  document.getElementById("c53").style.backgroundColor = '#FFFFFF';
  document.getElementById("c54").style.backgroundColor = '#FFFFFF';
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de