JavaScript

Super Testumgebung für HTLL, CSS, Javascript

http://www.rolandgeyer.at/kurse/german/javasrc/js001.html

http://www.w3schools.com/js/

http://www.html-seminar.de/javascript.htm

http://comsci.liu.edu/~murali/js/example1.htm

http://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and-forms.html

http://www.tutorialspoint.com/javascript

http://homepage.uni-trier.de/schay/javascript-kurs-ss-12

http://www.rhirte.de/javascript/home.htm

http://gwydir.demon.co.uk/jo/javascript/inout.htm

for.html
<!DOCTYPE html>
<html>
<body>
 
<script type="text/javascript">
<!--
var n;
for(n = 0; n < 10; n++){
  document.write(n);
  document.write("<br />");
}
//-->
</script>
 
<p>Set the variable to different value and then try...</p>
</body>
</html>
while.html
<html>
<body>
 
<script type="text/javascript">
<!--
var x = 1;
while (x < 20)
{
  if (x == 15){ 
     break;  // breaks out of loop completely
  }
  x = x + 1;
  document.write( x + "<br />");
}
//-->
</script>
<br />
Ende!
</body>
</html>
do_while.html
<!DOCTYPE html>
<html>
  <body>
    <script type="text/javascript">
      var i=0
      do {
           document.write("The number is " + i)
           document.write("<br />")
           i=i+1
         }
      while (i<10)
    </script>
  </body>
</html>
rechteck.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Testseite</title>
<script type="text/javascript">
function rechnen() {
// Die Laengen als Zeichenketten vom Benutzer einlesen
var strLaenge = prompt("Geben Sie die Länge des Rechtecks ein","0");
var strBreite = prompt("Geben Sie die Breite des Rechtecks ein","0");
// Die Laengen in Zahlen umwandeln
var laenge = parseFloat(strLaenge);
var breite = parseFloat(strBreite);
// Die Flaeche ausrechnen
var flaeche = laenge * breite
// die Flaeche ausgeben
alert( "Das Rechteck hat eine Flaeche von " + flaeche);
}
</script>
</head>
<body>
<form>
<input type="button" name="Rechnen" value="Rechnen" onclick="rechnen()">
</form>
</body>
</html>
turm.html
<!DOCTYPE html>
<html>
  <head>
    <title>Turmrechnung</title>
  </head>
  <body>
    <h1><i><font color="#FF0000">Turmrechnung</font></i></h1>
    <form name="Formular" action="">
      <input type="text" name="Eingabe" value="" size="3">
      <input type="button" value="Turm berechnen" onclick="testResults(this.form)">
    </form>
 
    <script>
    function testResults (form) {
      var num = document.Formular.Eingabe.value;
      var result = num;
      document.write("<h3>Turm mit der Zahl "+num+"</h3><br/>");
      for (i=2; i<=9; i++) {
        result = num * i;
        document.write(num+" * "+i+"<br/>");
        num = result;
      }
      for (i=2; i<=9; i++) {
        result = num / i;
        document.write(num+" / "+i+"<br/>");
        num = result;
      }
      document.write(num+"<br/>");
    }
    </script>
  </body>
</html>
turm2.html
<!DOCTYPE html>
<html>
  <head>
    <title>Turmrechnung</title>
  </head>
  <body>
    <h1><i><font color="#FF0000">Turmrechnung</font></i></h1>
    <form name="Formular" action="">
      <input type="text" name="Eingabe" value="" size="3">
      <input type="button" value="Turm berechnen" onclick="testResults(this.form)">
    </form>
 
    <script>
    function testResults (form) {
      var num = document.Formular.Eingabe.value;
      var result = num;
      document.write("<h3>Turmrechnung</h3><br/>");
      document.write('<table border="0" cellspacing="1" cellpadding="1">')
      for (i=2; i<=9; i++) {
        result = num * i;
        document.write("<tr><td width='250' align='right'>" + num + " * " + i + "</td></tr>");
        num = result;
      }
      for (i=2; i<=9; i++) {
        result = num / i;
        document.write("<tr><td width='250' align='right'>" + num + " / " + i + "</td></tr>");
        num = result;
      }
        document.write("<tr><td width='250' align='right'>" + num + "&nbsp&nbsp&nbsp&nbsp&nbsp</td></tr>");
    }
    </script>
  </body>
</html>
quadrat.html
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  <script type="text/javascript">
 
  function Quadrat() {
    var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
    alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
  }
 
  </script>
  </head>
  <body>
    <form name="Formular" action="">
      <input type="text" name="Eingabe" size="3">
      <input type="button" value="Quadrat berechnen" onclick="Quadrat()">
    </form>
  </body>
</html>
formular1.html
<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Test Input</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function testResults (form) {
    var TestVar = form.inputbox.value;
    alert ("You typed: " + TestVar);
  }
  </SCRIPT>
  </HEAD>
  <BODY>
    <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
      <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
      <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
    </FORM>
  </BODY>
</HTML>
formular2.html
<!DOCTYPE html>
<HTML>
 <HEAD>
   <TITLE>Test Input </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
    function readText (form) {
      TestVar =form.inputbox.value;
      alert ("You typed: " + TestVar);
    }
 
    function writeText (form) {
      form.inputbox.value = "Have a nice day!" 
    }
  </SCRIPT>
  </HEAD>
  <BODY>
    <FORM NAME="myform" ACTION="" METHOD="GET"> Enter something in the box: <BR>
      <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
      <INPUT TYPE="button" NAME="button1" Value="Read" onClick="readText(form)">
      <INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(form)">
     </FORM>
  </BODY>
</HTML>

</code>

tabelle_eingabe.html
<!DOCTYPE html>
<html>
  <body>
 
 
    <table id="login">
      <tr>
        <td><label>User Name</label></td>
      </tr>
      <tr>
        <td colspan="2"><input class="textBox" id="fName" type="text" maxlength="30"    required/></td>
      </tr>
      <tr>
        <td id="passw"><label>Password</label></td>
      <tr>
        <td colspan="2"><input class="textBox" id="pass" type="text" maxlength="30" required/></td>
      </tr>
      <tr>
        <td><input type="button" class="loginButtons" value="Login" onclick="submit();"/>&nbsp&nbsp&nbsp
        <input type="button" class="loginButtons" value="Cancel"/></td>
    </table>
 
    <script>
      var userPass = document.getElementById('pass');
      var userName = document.getElementById('fName');
      function submit(){
        alert(userPass.value);
      }
    </script>
  </body>
</html>

Umwandlung von Text in Zahlen

Achtung: alle Zahleneingaben werden als Text interpretiert!

Lösung1: a=1*a ⇒ a damit wird a eine Zahl
Lösung2: var laenge = parseFloat(strLaenge);

  1. Erstelle ein Javascript, das deinen Namen im Browserfenster ausgibt.
  2. Erstelle ein Javascript, das das Produkt zweier Zahlen im Browserfenster ausgibt.
  3. Erstelle ein Javascript, das die Eingabe von zwei Zahlen im Browser ermöglicht und die Summe dieser Zahlen im Browserfenster ausgibt.
  4. Erstelle ein Javascript, das die Eingabe von zwei Zahlen im Browser ermöglicht und das die prozentuelle Änderung dieser Zahlen im Browserfenster ausgibt.
  5. Erstelle ein Javascript, das die Zahlen 1 bis 20 und deren Kubikzahlen im Browserfenster ausgibt.
  6. Erstelle ein Javascript, das die Zahlen 1 bis 20 und deren Kubikzahlen in einer Tabelle im Browserfenster ausgibt.

#5 und #6 als Hausübung bis 17.11.2014

Funktionen