11.3.12) Unsere Scripts

Reines Javascript

javascript0.js
var summe = 0,
max = 100,
i = 1;
while (i <= max) {
  summe = summe + i;
  i++;
}
console.log(summe);

JavaScript in HTML

Ausgabe auf der Console

javascript1.html
<html>
<head>
<title>JavaScript in Aktion</title>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<script type="text/javascript">
var summe=0,max=100,i=1;
while (i<=max){
    summe+=i;
    i++;
}
console.log(summe);
</script>
</body>
</html>

Ein- und Ausgabe mittels Prompt und Alert

javascript2.html
<html>
<head>
<title>JavaScript in Aktion</title>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<script type="text/javascript">
var summe=0,max,i=1;
max=prompt("Zahl, bis zu der summiert werden soll: ","200");
while (i<=max){
    summe+=i;
    i++;
}
alert("Die Summe von 1 bis "+max+" ist: "+summe);
</script>
</body>
</html>

Ausgabe mittels document.write

javascript3.html
<html>
<head>
<title>JavaScript in Aktion</title>
</head>
<body>
<h1>JavaScript in Aktion</h1>
Die Summe von 1 bis 100 ist 
<script type="text/javascript">
var summe=0,max=100,i=1;
while (i<=max){
    summe+=i;
    i++;
}
document.write("der Wert "+summe);
</script>
</body>
</html>

Interaktion mittels Zugriff auf HTML-Elemente

javascript4.html
<html>
<head>
<title>JavaScript in Aktion</title>
<script type="text/javascript">
function summieren(){
  var max=Number(document.getElementById("eingabe").value);
  alert(max);
  if (isNaN(max) || max==0) {
     document.getElementById("ausgabe").innerHTML="?";
  }   
  else {
     var summe=0,i=1;  
     while (i<=max){
         summe+=i;
         i++;
     }
     document.getElementById("ausgabe").innerHTML=summe;
  }
}  
</script>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<hr>
Die Summe von 1 bis <input type="text" id="eingabe" size="3" maxlength="6" onkeyup="summieren()"></input> ist <span id="ausgabe"></span>    
</body>
</html>
button.html
<html>
<head>
<title>JavaScript in Aktion</title>
<script type="text/javascript">
summe=0;
function summiere(){
  summe+=parseInt(document.getElementById("eingabe").value);
  document.getElementById("ausgabe").innerHTML=summe;
}  
</script>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<hr>
Zahl <input type="text" id="eingabe" size="3"></input>  
Summe: <span id="ausgabe"></span>    
<br><br>
<button onclick="summiere()">Zahl addieren</button>
<br><br>
<a href="javascript:summiere()" >Zahl addieren</a>
</body>
</html>

Typkonvertierung

Eingabeabsicherung

javascript5.html
<html>
<head>
<title>JavaScript in Aktion</title>
<script type="text/javascript">
function summieren(){
  var max=Number(document.getElementById("eingabe").value);
  if (isNaN(max) || max==0) {
     document.getElementById("ausgabe").innerHTML="?";
  }   
  else {
     var summe=0,i=1;  
     while (i<=max){
         summe+=i;
         i++;
     }
     document.getElementById("ausgabe").innerHTML=summe;
  }
}  
</script>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<hr>
Die Summe von 1 bis <input type="text" id="eingabe" size="3" maxlength="6" onkeyup="summieren()"></input> ist <span id="ausgabe"></span>    
 
</body>
</html>

Event mit Eventhandler behandeln

javascript6.html
<!doctype html>   //wir entwickeln für HTML 5
<html lang="de">
<head>
<meta charset="utf-8">     //damit der Browser weiß, dass unser File in UTF-8 gespeichert ist, damit sollten Umlaute richtig angezeigt werden.
<title>JavaScript in Aktion</title>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<hr>
Der Kreis mit Radius <input type="text" id="eingabe" size="3"></input>  
besitzt die Fläche <span id="ausgabe"></span>    
 
//Das ganze Script kann auch in eine eigene Datei gegeben werden.
<script>       //Es ist nicht mehr nötig, JavaScript anzugeben, da JavaScript die Standardsprache für jeden Browser ist.
var eingabe=document.getElementById("eingabe");     //Eingabeobjekt
var ausgabe=document.getElementById("ausgabe");     //Ausgabeobjekt
eingabe.addEventListener('keyup', kreisflaeche);    //EventListener wird an das Objekt 'eingabe' gebunden, wenn dort ein 'keyup' auftritt, soll etwas gemacht werden
                                                    //bei 'kreisflaeche' sind keine runden Klammern nötig, da kreisflaeche selber ein Objekt ist.
                                                    //EventListener darf erst nach dem Element 'eingabe' aufgerufen werden!
function kreisflaeche() {
  var radius=parseFloat(eingabe.value);
  var flaeche=Math.PI*Math.pow(radius,2);
  flaeche=flaeche.toFixed(2);                //rundet auf 2 Stellen
  ausgabe.innerHTML=flaeche;
}  
</script>
 
</body>
</html>

besser:

Event mit Eventhandler behandeln

javascript6a.html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8"> 
<title>JavaScript in Aktion</title>
</head>
<body>
<h1>JavaScript in Aktion</h1>
<hr>
Der Kreis mit Radius <input type="text" id="eingabe" size="3"></input>  
besitzt die Fläche <span id="ausgabe"></span>    
</body>
<script scr="ourscript.js"></script>
</html>
ourscript.js
var eingabe=document.getElementById("eingabe");
var ausgabe=document.getElementById("ausgabe")
eingabe.addEventListener('keyup', kreisflaeche);
 
function kreisflaeche() {
  var radius=parseFloat(eingabe.value);
  var flaeche=Math.PI*Math.pow(radius,2);
  flaeche=flaeche.toFixed(2);
  ausgabe.innerHTML=flaeche;
}