HTML-Editor

Einfacher HTML-EDITOR

Version 6.2

Zeile: Spalte: Open:

<!DOCTYPE html>
<html>
<head>
<title>Zahlen raten</title>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Paukert Herbert">
<meta name="description" content="Zahlen raten">

function fnew() {
    var diff = max - min;
    zahl = Math.floor(diff * Math.random()) + min;
    count = 0;
    text = '';
    document.getElementById("erg").value = text;
    document.getElementById("aus").value = 0;
    document.getElementById("ein").value = '';
    document.getElementById("ein").focus();
    run = true;
  }

<body>
<form name="MyForm">
<br>
<h2>Einfaches Zahlenraten</h2> 
<p>
Der Zufall erzeugt eine Zahl zwischen 0 und 100.<br>
Diese soll schnell erraten werden . . .<br>
</p>
<input type="button" name="btn1" value="Neues Spiel" class="btn" onclick="fnew()"><br>
Zahl eingeben: <input type="text" name="ein" value="0" size="5" id="ein" class="tex">
<input type="button" name="btn2" value="Zahl testen" class="btn" onclick="fplay()">
<br><br>
<fieldset id="box">
<br>
Ergebnis: <input type="text" name="ergebnis" value="0" size="18" id="erg" class="tex" readonly>
<br><br>
Eingaben: <input type="text" name="aus" value="0" size="5" id="aus" class="tex" readonly>
<br><br>
</fieldset>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Grafik</title>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=0.1">
  <meta name="author" content="Herbert Paukert">
  <meta name="description" content="Grafik">

var a = 1;          // Erster Funktions-Parameter
    var b = 1;          // Zweiter Funktions-Parameter
    var fNum = 0;       // Funktions-Nummer
    var lastNum = 0;    // Letzte Funktions-Nummer (wird immer gespeichert)
    var fSign = 1;      // Funktions-Vorzeichen
    var xMin = -kw;     // Startpunkt der Funktion
    var xMax = kw;      // Endpunkt der Funktion
    var xStep = 1/100;  // Schrittweite der Funktion
    var fCol = 'red';   // Farbe der Funktion
    var fText = ' ';    // Name der Funktion
    var fMax = 10;      // Maximalanzahl der Funktionen
    var fArr = new Array(fMax);  // Array der Funktionen

var anz;            // eingegebene Anzahl der Array-Punkte
    var max = 5;        // maximale Anzahl der Array-Punkte
    var Points = new Array(max);           // Array der Punkte
    for (i = 1; i <= max; i++) { Points[i] = '0,0'; }

var smallWidth = 800;
    var scrWidth = window.screen.width;
    var smallScr = false;
    if (scrWidth <= smallWidth) { smallScr = true; }

function round2(x) { return Math.round(100*x)/100 }

function TPoint(tx,ty) {
    // Konstruktor fuer das Punkt-Objekt (zweidimensional)
    this.x = tx;
    this.y = ty;
    this.len = function() {
       z = Math.sqrt(this.x*this.x + this.y*this.y); 
       return z.toFixed(2);
     }
  }

function w2p(W,kw,kb) {
    // WeltzuBild-Transformation von Weltpunkt W auf Bildpunkt P
    P = new TPoint;
    P.x = round2((W.x + kw) * kb / (2*kw));
    P.y = round2(kb - (W.y + kw) * kb / (2*kw));
    return P;
  }

function p2w(P,kw,kb) {
    // BildzuWelt-Transformation von Bildpunkt P auf Weltpunkt W
    // Inverse Transformation zu "w2p(W,kw,kb)"
    W = new TPoint;
    W.x = round2(P.x*2*kw/kb - kw);
    W.y = round2((kb - P.y)*2*kw/kb - kw);
    return W;
  }

function WtoP() {
    // Weltpunkt W eingeben und zu Bildpunkt P transformieren
    var W = new TPoint;
    W.x = 1*document.MyForm.aus1.value;
    W.y = 1*document.MyForm.aus2.value;
    var P = new TPoint;
    P = w2p(W,kw,kb);
    document.MyForm.aus3.value = P.x.toFixed(0);
    document.MyForm.aus4.value = P.y.toFixed(0);
    drawPoint("P",W);
    if (smallScr) { document.getElementById("dc").scrollIntoView(); }
  }

function PtoW() {
    // Bildpunkt P eingeben und zu Weltpunkt W transformieren
    var P = new TPoint;
    P.x = 1*document.MyForm.aus3.value;
    P.y = 1*document.MyForm.aus4.value;
    var W = new TPoint;
    W = p2w(P,kw,kb);
    document.MyForm.aus1.value = W.x.toFixed(0);
    document.MyForm.aus2.value = W.y.toFixed(0);
    drawPoint("P",W);
    if (smallScr) { document.getElementById("dc").scrollIntoView(); }
  }

function changeKS() {
    // Aenderung der Halbbreite kw des Welt-Koordinatensystems
    var x = 1*document.MyForm.aus0.value;
    kw = x;
    xMin = -kw;
    xMax = kw;
    initCanvas();    
  }
   
  function initCanvas() {
    // Canvas initialisieren
    canvas = document.getElementById('MyCanvas');
    ctx = canvas.getContext('2d');
    ctx.lineWidth = 2;
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,kb,kb);
    ctx.strokeStyle = "black";
    ctx.strokeRect(0,0,kb,kb);
    drawCoord2(kw,kb); 
    document.getElementById('aus9').value = '';
  }

function drawCoord2(kw,kb) {
    // Koordinatensystem zeichnen (2-dimensional)
    var g,h;
    ctx.strokeStyle = "black";
    ctx.strokeRect(0,0,kb,kb);     
    ctx.font = '10pt Arial';
    ctx.beginPath();
    g = kb / 2; 
    ctx.lineWidth = 1;
    ctx.strokeStyle = "blue";
    ctx.moveTo(0,g);
    ctx.lineTo(2*g,g);
    ctx.moveTo(g,0);
    ctx.lineTo(g,2*g);
    ctx.stroke();
    h = g / kw;
    ctx.fillStyle = "blue";
    ctx.fillText('0',g+2,g+10);
    ctx.fillText('1',g+h,g+10);
    ctx.fillText(-kw,5,g+10);
    ctx.fillText(kw,2*g-20,g+10);
    ctx.fillText(kw,g+5,15);
    ctx.fillText(-kw,g+5,2*g-10);
    ctx.strokeStyle = "black";
  }

function drawPoint(tex,P) {
    // Punkt P zeichnen und mit tex beschriften
    var Q = new TPoint;
    Q = w2p(P,kw,kb);
    var r = 3;
    ctx.font = 'bold 14px Arial';
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(Q.x,Q.y,r,0,2*Math.PI);
    ctx.fill();
    drawPosText(P.x,P.y,tex)
}

function drawPosText(x,y,tex) {
  // Text positioniert ausgeben
    ctx.font = 'bold 13pt Arial';
    var P = new TPoint;
    P.x = x;
    P.y = y;
    P = w2p(P,kw,kb);
    ctx.fillStyle = "red";
    ctx.fillText(tex,P.x+5,P.y+10);
  }

function drawLine(P,Q) {
    //  Strecke durch die Punkte P und Q zeichnen
    var U = new TPoint;
    var V = new TPoint;
    U = P;
    V = Q;
    U = w2p(U,kw,kb);
    V = w2p(V,kw,kb);
    ctx.strokeStyle = "black"
    ctx.beginPath();
    ctx.moveTo(U.x,U.y);
    ctx.lineTo(V.x,V.y);
    ctx.stroke();
  }

function drawCircle(M,r) {
    // Kreis mit Mittelpunkt M und Radius r
    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    var M1 = new TPoint;
    var P1 = new TPoint;
    var r1;
    M1 = M;   
    M1 = w2p(M1,kw,kb);
    P1.x = r;
    P1.y = 0;   
    P1 = w2p(P1,kw,kb);
    r1 = Math.abs(P1.x - kb/2);  
    ctx.beginPath();
    ctx.arc(M1.x,M1.y,r1,0,2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    drawPoint('M',M);
  }

function WtoCirc() {
    // Kreis-Parameter M und r eingeben und Kreis zeichnen
    var M = new TPoint;
    M.x = 1*document.MyForm.aus6.value;
    M.y = 1*document.MyForm.aus7.value;
    r = 1*document.MyForm.aus8.value;
    drawCircle(M,r);
    if (smallScr) { document.getElementById("dc").scrollIntoView(); }
  }

function drawRect(x1,y1,x2,y2,farbe) {
    // Rechteck (Schriftbereich) in der Grafik lÃ¶schen
    var W1 = new TPoint;
    var W2 = new TPoint;
    var P1 = new TPoint;
    var P2 = new TPoint;
    W1.x = x1;
    W1.y = y1;
    W2.x = x2;
    W2.y = y2;
    P1 = w2p(W1,kw,kb);
    P2 = w2p(W2,kw,kb);
    ctx.fillStyle = farbe;
    ctx.fillRect(P1.x,P1.y,P2.x,P2.y);
  }

function showPos(ev) {
    // Angeklickte Koordinaten anzeigen
    var P = new TPoint;
    var cRect = document.getElementById("dc").getBoundingClientRect();
    var cTop  = cRect.top;
    var cLeft = cRect.left;
    P.x = (ev.clientX - cLeft);
    P.y = (ev.clientY - cTop);
    var W = new TPoint;
    W = p2w(P,kw,kb);
    var info = round2(W.x) + '  /  ' + round2(W.y);
    document.MyForm.aus9.value = info;
  }

function resetForm() {
    // Formular initialisieren
    document.MyForm.reset();
    kw = 10;
    xMin = -kw;
    xMax = kw;
    fNum = 0;
    lastNum = 0;
    initCanvas(); 
    window.scrollTo(0,0);
  }
</script>
</head>

<body id="body" onload = "initCanvas();">
<div id='dc' style="position:absolute; top:80px; left:500px">  
  <canvas id='MyCanvas' width='600' height='600' onmousedown='showPos(event);'></canvas>
</div>
<form name="MyForm">
<fieldset id="fs">
<p id="titel">Grafik und Koordinatensysteme</p>
KS-Halbbreite = <input id="aus0" type="text" value="10" size="3" class="ctex">  
<input type="button" value="<= KS" class="cbtn" onClick="changeKS()"><br>
<br>
Weltpunkt (hier eingeben):<br> 
W.x = <input id="aus1" type="text" value="0" size="3" class="ctex">  
W.y = <input id="aus2" type="text" value="0" size="3" class="ctex">  
<input type="button" value="WeltZuBild" class="cbtn" onClick="WtoP()"><br>
<br>
Bildpunkt (hier eingeben):<br> 
P.x = <input id="aus3" type="text" value="300" size="3" class="ctex">  
P.y = <input id="aus4" type="text" value="300" size="3" class="ctex">  
<input type="button" value="BildZuWelt" class="cbtn" onClick="PtoW()"><br>
<br>
n-Punkte: <input id="aus5" type="text" value="3" size="4" class="ctex">  
<input type="button" value="Polygon" class="cbtn" onClick="WtoPoly()"><br>
(nur 2 bis 5 Punkte)<br><br>
Kreis (Mittelpunkt M,Radius r):<br>
M.x = <input id="aus6" type="text" value="0" size="4" class="ctex"><br>
M.y = <input id="aus7" type="text" value="0" size="4" class="ctex"><br>
r = <input id="aus8" type="text" value="5" size="4" class="ctex">  
<input type="button" value="Kreis" class="cbtn" onClick="WtoCirc()"><br>
<br>
Funktionsparameter a = <input id="ausA" type="text" value="1" size="4" class="ctex"><br>
Funktionsparameter b = <input id="ausB" type="text" value="1" size="4" class="ctex">   
<input type="button" value="Funktion" class="cbtn" onClick="plotFun()"><br>
<br>
<input type="button" value="ClearCanvas" class="cbtn" onClick="initCanvas()"> 
<input type="button" value="ResetForm" class="cbtn" onClick="resetForm()"><br>
<br>
Mausklick-Position = <input id="aus9" type="text" value=" " size="18" class="ctex">
</fieldset>
</form>
</body>
<script> smart(); </script>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Paukert Herbert">
<meta name="description" content="Functions">
</head>
<body>
  
<script>

// ----------------------------------------------------------------
  alert("FOR-Schleifen");
  var s = 0;
  var max = 10;
  for (let i = 1; i <= max; i++) { 
    s = s + i; 
  } 
  alert(s);

// ----------------------------------------------------------------   
  alert("WHILE-Schleifen");  
  s = 0;
  max = 10;
  var i = 0;
  while (i <= max) { 
    s = s + i; 
    i++; 
  } 
  alert(s);

// ----------------------------------------------------------------
  alert("DO-Schleifen");
  s = 0;
  max = 10;
  var i = 0;
  do { 
    s = s + i; 
    i++; 
  } while (i <= max); 
  alert(s);

// ----------------------------------------------------------------
  alert("Standard-Funktionen");
  function add(z1,z2) { 
    return z1 + z2; 
  }
  var sum = add(2,5); 
  alert(sum);

// ----------------------------------------------------------------
  alert("Rekursive Funktionen");
  function ggt(x,y)  { 
    if (y == 0) { return x; } 
    else { return ggt(y, (x % y)); } 
  } 
  
  var result = ggt(9,6); 
  alert("GGT(9,6) = " + result);

// ----------------------------------------------------------------
  alert("Anonyme Funktionen");
  sum = function(z1,z2) { 
    return z1 + z2; 
  }
  alert(sum(3,4));

alert("Arrow-Funktionen");
  sum = (z1,z2) => { return z1 + z2; } 
  alert(sum(6,5));

// ----------------------------------------------------------------
  alert("Selbsausloesende Funktionen");
  var a = 2; 
  var b = 3; 
  (function() { 
     var sum = a + b; 
     alert(sum); 
  }) (a,b);

// ----------------------------------------------------------------
  alert("Array-Funktionen");
  var sum = 0; 
  var arr0 = [0,1,2,3,4,5,6,7,8,9]; 
  alert(arr0); 
  var arr1 = arr0.filter((value,index,arr0) => value % 2 === 0); 
  alert(arr1); 
  var arr2 = arr1.map((value,index,arr1) => value * value); 
  alert(arr2); 
  arr2.forEach((value,index,arr2) => { sum += value; }); 
  alert("Quadratsumme der geraden Ziffern = " + sum); 
 
  var such = prompt("Array-Element suchen",5); 
  var gefunden = arr0.includes(parseInt(such)); 
  if (gefunden) { 
     let position = arr0.indexOf(parseInt(such)); 
     alert(such + " in [" + arr0 + "] gefunden an Position " + position); 
   } 
  else { alert(such + " in [" + arr0 + "] NICHT gefunden!"); }

// ----------------------------------------------------------------
  alert("Restparameter in Funktionen");
  function addAll(...numbers) { 
    let result = 0; 
    for (let i = 0; i < numbers.length; i++) { 
       result += numbers[i]; 
    } 
    return result; 
  } 
  alert(addAll(1,2)); 
  alert(addAll(1,2,3));

// ----------------------------------------------------------------
  alert("Callback-Funktionen");
  function afunc(x,y,bfunc) { 
    var sum = x + y; 
    bfunc(sum); 
  } 
  afunc(2,3,function(sum) {alert(sum); })

// ----------------------------------------------------------------
  alert("Event-Handler");
  var count = 0; 
  function Counter() { 
    count++; 
    alert("Mausklicks: " + count); 
  } 
  
  document.addEventListener("click", function() { 
    document.querySelector("body").onclick = Counter();
  });

// ----------------------------------------------------------------
  alert("Funktionen im Array");
  function addit(x,y)  { return 1*x + 1*y; } 
  function subtra(x,y) { return x - y; } 
  function multip(x,y) { return x * y; } 
  function divid(x,y)  { return x / y; } 
  
  function ggt(x,y) { 
    if (y == 0) { return x; } 
    else { return ggt(y, (x % y)); }
  } 
  
  function kgv(x,y) { 
    z = ggt(x,y); 
    return x*y/z; 
  } 
  
  var z = "9,6"; 
  z = prompt("Zwei ganze Zahlen eingeben",z); 
  var zxy = z.split(","); 
  var z1 = parseInt(zxy[0]); 
  var z2 = parseInt(zxy[1]); 
  
  var operations = [ 
    addit, 
    subtra, 
    multip, 
    divid, 
    ggt, 
    kgv 
  ]; 
  
  var txt, funk; 
  for (let i = 0; i < operations.length; i++) { 
    switch(i) { 
      case 0: txt = z1 + " + " + z2 + " = "; break; 
      case 1: txt = z1 + " - " + z2 + " = "; break; 
      case 2: txt = z1 + " * " + z2 + " = "; break; 
      case 3: txt = z1 + " / " + z2 + " = "; break; 
      case 4: txt = "GGT(" + z1 + "," + z2 + ") = "; break; 
      case 5: txt = "KGV(" + z1 + "," + z2 + ") = "; break; 
    } 
    funk = operations[i]; 
    let result = funk(z1,z2); 
    alert(txt + result); 
  }

// ----------------------------------------------------------------
  alert("String-Funktionen");
  var s = "Adam, Eva und Susi"; 
  alert("Stringlaenge von (" + s + ") = " + s.length); 
  var such = prompt("String-Element suchen","Eva"); 
  var gefunden = s.includes(such); 
  if (gefunden) { 
     let position = s.indexOf(such); 
     alert(such + " in (" + s + ") gefunden an Position " + position); 
  } 
  else { alert(such + " in (" + s + ") NICHT gefunden!"); } 
  var z1 = s.charAt(0); 
  var z2 = s.charAt(s.length-1); 
  alert("Erstes und letztes Zeichen von (" + s + ") sind: " + z1 + " und " + z2); 
  
  var t = s.substr(6,3); 
  alert("3 Zeichen in (" + s + ") ab Position 6 = " + t);

// ----------------------------------------------------------------
 alert("Mathematik-Funktionen");
 function rad(x) { return x * Math.PI / 180; } 
 function deg(x) { return x * 180 / Math.PI; } 
 function rnd(x,n) { 
   let z = Math.pow(10,n); 
   let y = Math.round(z*x) / z; 
   return y; 
 } 
  
 var w = prompt("Winkel in Graden: ", 30); 
 var b = rad(1*w); 
 alert("Sinus (" + w + ") = " + rnd(Math.sin(b),4)); 
 alert("Tangens (" + w + ") = " + rnd(Math.tan(b),4)); 
  
 var y = prompt("Winkelfunktions-Wert: ", 1); 
 var sin = deg(Math.asin(y)); 
 var tan = deg(Math.atan(y)); 
 alert("ArcSinus (" + y + ") = " + rnd(sin,4)); 
 alert("ArcTangens (" + y + ") = " + rnd(tan,4)); 
 function zufza(nn,ug,og) { 
    for (i = 0; i < nn; i++) { 
    arr[i] = Math.floor(1*(og-ug+1) * Math.random()) + 1*ug; 
   } 
 } 
  
 var z = "10,3,7"; 
 z = prompt("Datenanzahl, Minimum, Maximum", z); 
 var xyz = z.split(","); 
 var anz = xyz[0]; 
 var min = xyz[1]; 
 var max = xyz[2]; 
 alert("Datenanzahl = " + anz + "\nMinimum = " + min + "\nMaximun = " + max); 
  
 arr = new Array(anz); 
 zufza(anz,min,max); 
 alert("Unsortierte Zufallszahlen: " + arr); 
 arr.sort(); 
 alert("Sortierte Zufallszahlen: " + arr); 
  
 var sum = 0; 
 var qsum = 0; 
 arr.forEach((value,indx,arr) => { sum += value; }); 
 arr.forEach((value,indx,arr) => { qsum += value * value; }); 
 var mwt = sum / anz; 
 var str = Math.sqrt(qsum/anz); 
 alert("Anzahl = " + anz + "\nDatensumme = " + sum + "\nMittelwert = " + mwt); 
 alert("Anzahl = " + anz + "\nQuadratsumme = " + qsum + "\nStreuung = " + rnd(str,2));

var inf = "Ende der Beispielsammlung\n" +
           "Jetzt in den Bildschirm klicken\n" +
           "(Maus-Event)";
 alert(inf);
 // ----------------------------------------------------------------
</script>
  
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Promises</title>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Paukert Herbert">
<meta name="description" content="Promises">
</head>

function sqrt(x) {
  // Funktion mit Promise-Objekt beim Return
    if (x >= 0) { return Promise.resolve("sqrt(" + x + ") = " + Math.sqrt(x)); }
    if (x < 0)  { return Promise.resolve("sqrt(" + x + ") = nicht reell"); }
  }

var input = '';
  var inp1 = 25;
  input = prompt('Eine Zahl eingeben', inp1);
  var z = 1 * input;
  sqrt(z).then(alert);
  sqrt(-z).then(alert);

function sleep(msec) {
  // Wartefunktion in Millisekunden
     return new Promise(resolve => setTimeout(resolve,msec));
  }

async function run(n,t) {
  // Asynchrone Funktion
    for (var x = 0; x <= n; x++) {
      await sleep(t);
      let y = Math.pow(x,2);
      let z = 'Das Quadrat von ' + x + ' ist ' + y + '<br>';
      document.write(z);
    }
  }

var inp2 = '10,1000'
  input =  prompt('Elemente-Anzahl, Wartezeit-MSec eingeben', inp2);
  var arr = input.split(',');
  var anz  = 1 * arr[0]; 
  var zeit = 1 * arr[1];
  run(anz,zeit);

</script>
</body>
</html>