Einführung in JavaScript

Kurzanleitung zum Programmieren mit JavaScript :

JavaScript ist eine Programmiersprache, mit welcher man innerhalb von HTML-Seiten programmieren kann und welche von den modernen WWW-Browsern von Netscape oder Microsoft interpretiert (nicht compiliert) wird.

1. JavaScript-Bereich in HTML ( HyperText Markup Language ) festlegen

Der JavaScript-Bereich befindet sich zwischen den Tags <script> und </script>. Um bei Browsern, die kein Javascript beherrschen, das Anzeigen des Programmtextes zu verhindern, dient .

Beispiel 1 :

<html>
  <head>
    <title>Javascript</title>
  </head>
  <body>
    <SCRIPT LANGUAGE="Javascript1.3">
     <!-- 
     document.write(" Mein erstes Javaprogramm <br>");
     document.write(" Browser unterstützt Javascript1.3");
     //-->
    </SCRIPT>  
    <BR>Hier steht der normale Text.
  </body>
</html>

Die Anweisungen können auch in einer externen Script-Datei mit dem Namen "name.js" enthalten sein.

Beispiel 2 :

<html>
  <head>
    <title>Javascript</title>
  </head>
  <body>
    <SCRIPT LANGUAGE="Javascript1.3" SCR="name.js">
    </SCRIPT>  
  </body>
</html>

2. Ausgabe in einem Hinweis-, Bestätigungs- und Eingabefenster

Beispiel 3 :

<html>
  <head>
    <title>Javascript</title>
  </head>
  <body>
   Hinweis-, Bestätigungs- und Eingabefenster :
    <SCRIPT LANGUAGE="Javascript1.3">
      alert(" Text für das Hinweisfenster ");
      confirm(" Weitermachen ? ");
      window.prompt(" Was kostet es ? ","100 EUR");
    </SCRIPT>  
  </body>
</html>

3. Funktionen definieren und aufrufen

Eine Funktion wird innerhalb des Script-Bereiches festgelegt und man bestimmt selbst, nach welchem Ereignis die Funktion aufgerufen wird. JavaScript-Anweisungen, welche nicht innerhalb einer Funktion stehen, werden beim Start der HTML-Datei sofort ausgeführt. Zum Aufrufen von Funktionen eignen sich "Aktions-Button" sehr gut. Sie stehen innerhalb des "normalen" HTML-Bereiches.

Beispiel 4 :

<html>
  <head>
    <title>Javascript</title>
  </head>
  <body>
    <SCRIPT LANGUAGE="Javascript1.3">
      function Quadrat(Zahl)
       { 
         Ergebnis=Zahl * Zahl;
         alert("Das Quadrat von "+Zahl+" = "+Ergebnis);
       }
    </SCRIPT>
    <H4>Überschrift</H4>
	Text usw.
	<input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)">
	<input type=button value="Quadrat von 7 errechnen" onClick="Quadrat(7)">
	<input type=button value="Quadrat von 8 errechnen" onClick="Quadrat(8)">
	<input type=button value="Quadrat von 9 errechnen" onClick="Quadrat(9)">
  </body>
</html>

3. Variablen

Name der Variablen:    Erstes Zeichen muß ein Buchstabe oder "_" sein, 
                       sonst dürfen Buchstaben, Ziffern und "_" vorkommen.
Numerische Variablen:  Pi=3.14159  oder Nullpunkt=-273
Zeichenketten:         Antwort="It's my way"
Boolesche Variablen :  Ist123einePrimzahl="false"

4. Operatoren

Rechenoperatoren:
+     Addition          a=23+45
-     Subtraktion       b=17-4
*     Multiplikation    c=2*Pi
/     Division          d=150/30
%     Modulo  	        r=12%5
-     Negation          e=-a  

Es gilt "Punkt vor Strich"

a++   statt a=a+1
a--   statt a=a-1

Boolesche Operatoren:

&&  und			||     oder		!      Negation

Vergleichsoperatoren:

== gleich		!=  ungleich		>  größer
<   kleiner		>= größer oder gleich	<= kleiner oder gleich

Stringoperatoren:

var name=vorname+" "+nachname       Verkettung
Zeichenkette.length                 Anzahl der Zeichen
Zeichenkette.charAt(x)              Zeichen an der Position x
Zeichenkette.substring(start,ende)  Teilstring von start bis ende

5. Einzeilige Eingabe- und Ausgabefelder

Mit "<input TYPE="number" NAME="a">" wird sowohl ein einzeiliges Eingabefeld als auch einzeiliges Ausgabefeld definiert, in welches man Zahlen eingeben oder auch ausgeben kann. Der Wert wird in der Variablen mit dem Namen "a" abgelegt, welcher dann an eine Funktion übergeben werden kann und nach Verarbeitung wieder an das Eingabe- und Ausgabefeld zurück gegeben werden kann.

Beispiel 5 :

<html>
  <head>
    <title>Wahlauswertung</title>
  </head>
  <body bgcolor=#C0C0C0>
    <SCRIPT LANGUAGE="Javascript1.3">
      function berechne(a,b,c,ap,bp,cp) 
		{ 
		   var d = eval(a.value)+eval(b.value)+eval(c.value);
		   ap.value = Math.round((a.value/d)*1000)/10;	
		   bp.value = Math.round((b.value/d)*1000)/10;	
		   cp.value = Math.round((c.value/d)*1000)/10;	
		}
    </SCRIPT>
    <BLOCKQUOTE>
      <H4>Wahlauswertung</H4>
      <tt>
        (Anzahl der Stimmen pro Kandidat eingeben.)
        <br>
        <br>Kandidat1..........: <input TYPE="number" NAME="a">
        <br>Kandidat2..........: <input TYPE="number" NAME="b">
        <br>Kandidat3..........: <input TYPE="number" NAME="c">
   
        <br><input TYPE="BUTTON" VALUE="        auswerten         " 
	    onClick="berechne(a,b,c,ap,bp,cp)"> 

        <br>Kandidat1...(in%)..: <input TYPE="number" NAME="ap">
        <br>Kandidat2...(in%)..: <input TYPE="number" NAME="bp">
        <br>Kandidat3...(in%)..: <input TYPE="number" NAME="cp">
      </tt>
    </BLOCKQUOTE>
  </body>
</html>

6. Verzweigungen (mit Radio-Button)

Beispiel 6 :

<html>
  <head>
   <title>Umrechnungen</title>
     <script language=JavaScript>
         function Rechne(ein,aus)  
		  {	
		    if (u1[0].checked)
			  {aus.value=(Math.round(100*ein.value/1.95583))/100  }
		    if (u1[1].checked)	
			  {aus.value=(Math.round(100*ein.value*1.95583))/100  }
		  }
     </script>
  </head>
  <body bgcolor=#C0C0C0>
    <CENTER><h1><u>Euro-DM-Rechner</u></h1></CENTER>
    <CENTER>
	   Eingabe   : <input TYPE="text" size="20" NAME="ein">
      <p><input TYPE="radio" NAME="u1" >von DM in Euro
      <br><input TYPE="radio" NAME="u1" >von Euro in DM
      <p><input type="button" name="B1" value="                Berechne               "
                     onclick="Rechne(ein,aus)">
      <p>Ausgabe   : <input TYPE="text" size="20" NAME="aus">
    </CENTER>
  </body>
</html>

7. Wiederholungsstrukturen

Zählschleifen mit der Schrittweite 1 lassen sich mit " for ( i=Anfang; i<= Ende; ++i ) { Anweisungen } " programmieren:
Zur Ausgabe eignet sich ein mehrzeiliger Textbereich sehr gut , welcher mit "<TEXTAREA cols=40 name=S1 readonly rows=15>Ergebnis :</TEXTAREA> " festgelegt wird.

Beispiel 7 :

<html>
  <head>
    <title>Funktionswerte</title> 
  </head>
  <script language="JavaScript">
    function fktw() 
      { with (document.form1)  
		{ var a = parseFloat(a_feld.value);
		  var b = parseFloat(b_feld.value);
		  var c = parseFloat(c_feld.value);
		  var d = parseFloat(d_feld.value);
		  var e = parseFloat(e_feld.value);
		  var f = parseFloat(f_feld.value);
		  S1.value = "";
		  for ( i=e; i<= f; ++i ) 
		  { y = a*i*i*i + b*i*i + c*i + d;
		  S1.value = S1.value + i + "   \t" + y +"\n";
      }		} }
  </script>

  <body bgcolor=#C0C0C0>  
    <tt><u><font size=+2>Funktionswerte der Funktion</font></u>
    <form name="form1"><font size=+2><br>
	f(x) = <input type="number" size=4 name=a_feld>· x<sup>3</sup> + 
           <input type="number" size=4 name=b_feld>· x<sup>2</sup> + 
           <input type="number" size=4 name=c_feld>· x + 
           <input type="number" size=4 name=d_feld><br><br><br>
           von.........: <input TYPE="number" size=10 NAME="e_feld"><br>
           bis.........: <input TYPE="number" size=10 NAME="f_feld"></font><br><br><br>
           <input TYPE="BUTTON" VALUE="  Funktionswerte berechnen  " onClick="fktw()"><br><br>
       <TEXTAREA cols=40 name=S1 readonly rows=15>Ergebnis :</TEXTAREA>
    </form></tt>
  </body>
</html>