JavaScript (Einführung) Was meint ECMAScript?

Dies ist eine JavaScript-Einführung für Programmier-Neulinge. JavaScript wird bei dynamischen Webseiten und Web-Apps verwendet. Es werden einführende Prinzipien gezeigt ( sieh z.B. de.wikipedia JavaScript ( Übersicht ), JavaScript-cheat-sheet .pdf ( .pdf Kurzreferenz zum Programmieren ) JavaScript-cheat-sheet ( html-Kurzreferenz zum Programmieren ), w3schools.com JavaScript ( and HTML DOM Reference ) ).

JavaScript ( einführend ) Wie gehts los?

Wie kann JavaScript gelernt werden? Ein Weg ist die Verwendung eines Browsers, der eine HTML-Seite anzeigt. In diese Seite kann JavaScript-Code eingebettet werden, etwa

<!DOCTYPE html>
<html lang="de">
<head>
<title> *** HTML5- Grundgerüst mit extern-CSS </title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>

<h1> *** Seiten-Überschrift </h1>

<p> 
 Schreibe an dieser Stelle HTML-Text in das Dokument mit ...
</p> 
<script>
  document.write("Halle Welt");
</script>


<p> 
 Zeige alert Box an:
</p> 
<script>
  alert("Teste alert-Box von JavaScript ....");
</script>

</body>
</html>

Was sind Funktionen? Wie geht das?

Funktionn sind ein mächtiges Mittel, um Programmier-Code-Stücke vielseitig und wiederholg einzusetzen.

<script>
function show_string1() {  
  var s;
       s = "Halle Welt"; 
  alert(s);
}
</script>

function get_string1() { 
  var s;
        s = "Halle Welt";;
  return s;
}
</script>

function show_string2( str ) { 
  var s;
       s = str;
  alert(s);
}
</script>

function get_string2( str ) { 
  var s;
        s = str;
  return s;
}
</script>

<a href="javascript:show_string1()">ausführen</a> von        show_string11() 
<a href="javascript:alert( get_string1() )">ausführen</a> von alert( get_string1() )

<a href="javascript:show_string2( 'Hello' )">ausführen</a> von       show_string2( 'Hello' ) 
<a href="javascript: alert( get_string2( 'Hello' ) )">ausführen</a> von alert( get_string2( 'Hello' ) )
</pre>

Sinus-Werte-Tabelle berechnen und anzeigen

Wie kann einen Sinus-Werte-Tabelle berechnet und angezeigt werden? Hier das Prinzip:

<script>
function show_sinus_tab(von, bis, dif) { var w, si, str = "";
  for (w = von; w <= bis; w += dif) {
    si = Math.sin(w * Math.PI / 180);
    str += "sin(" + w.toFixed(2) + ") = " + si;
    str += "<br />";
  } document.write("<pre>" + str + "<\/pre>");
} 

show_sinus_tab(0, 90, 7.5);
</script>

Sinus-Werte-Tabelle per JavaScript

Farbwähler rgb(r,g,b)

Bei dem Style rgb(r,g,b) können die HTML-Farben r, g, b die dezimalen Werte

r = 0, 1, ..., 255
g = 0, 1, ..., 255
b = 0, 1, ..., 255

annehemen. Mit Hilfe von <span style='background-color:rgb(r,g,b);'>r,g,b<span>", können die span-Tags eingefärbt werden. Programm etwa:

<script> 
function farbwaehler(r1,r2,dr,  g1,g2,dg,  b1,b2,db) {
  var r, g, b, i, cr, cg, cb, rgb, col, br = "<br style='clear:left;' />";
  span1 = "<span style='float:left;width:50px;margin:1px;padding:4px;" +
          "font:9px/10px monospace;color:#fff;background-color:rgb(",
  span2 = "<\/span>", s = "";
  for (r = r1; r < r2; r += dr) {  s += br;
    for (g = g1; g < g2; g += dg) {s += br;
      for (b = b1; b < b2; b += db) {
        col =  r + "," + g + "," + b;
        s += span1 + col  + ");'>" + col + span2;
      }
    }
  } return s;
}
document.write(farbwaehler( 0, 256,51, 0, 256,51, 0, 256,51));
</script>

JavaScript (Einführung) Was meint ECMAScript?

Sinus-Werte-Tabelle per JavaScript

Farbwähler per JavaScript