Deutsch
Springe zu
Impressum
Dein Feedback:
Hat die Seite Deine Erwartung erfüllt? vote3 Ja
vote2 Teilweise
vote1 Nein
Noch ein Kommentar?

Nur falls, Du eine Antwort erwartest, Deine E-Mailadresse

Gegebenenfalls noch Dein Name

Do not change this:
Feedback
Suchen

JavaScript

Einige Notizen und kleine Beispiele zu JavaScript. Wenn man auch der Suche nach einer richtigen Einführung ist, siehe aufgelistet Links und Quellen, besonders das Buch von Stefan Koch "JavaScript: Einführung, Programmierung und Referenz inklusive Ajax".
04-03-2010 20.40

Links und Quellen

Einige Links zu und über JavaScript
25-03-2013 02.15

Versionsgeschichte

Java Script Versionsgeschichte Mittlerweile sind große Teile sind JavaScript über den ECMAScript Standard standadisiert.

BrowserJavaScript Version
Firefox 1.5JavaScript 1.6
Firefox 1.8JavaScript 1.8
InternetExplorer 6.0Jscript 5.6
InternetExplorer 7.0Jscript 5.7
InternetExplorer 8.0Jscript 6.0
04-03-2010 20.40

JavaScript einbinden


So kann man JavaScript so einbinden, dass es sowohl in Browsern funktioniert die es unterstützen, als auch in solchen die es nicht unterstützen:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
      <title>JavaScript Demo</title>
    </head>
  <body>
  
   <div>
    HTML.<br />

   <script type="text/javascript">
    <!--
    alert("JavaScript 4*3="+(4*3));
    // -->
   </script>
   <noscript>
    No Script
   </noscript>
  
  </body>
 </html>

Sauberer ist es aber, eine eigene Datei mit dem JavaScript Code zu importieren

FIXME, angeblich ist das darüber kein valides XHTML?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
      <title>JavaScript Demo</title>
    </head>
  <body>

   <script type="text/javascript" src="myJavaScriptFile.js" />
   <noscript>
    JavaScript is not supported in your browser.
   </noscript>
  
  </body>
 </html>
04-03-2010 20.40

Funktionen

Parameter in Funktionen sind Call by Value für Basistypen und Call by Reference für Objekte. Benötigt man Call by Reference muss man die Basistypen in Objekte packen. Es ist möglich, Funktionen mit einer dynamischen Anzahl an Parametern zu haben:
    function myConcat()
    {
     var result="";
     for (var i=0; i<myConcat.arguments.length; i++)
     {
      result+=myConcat.arguments[i];
     }
     return result;
    }

   // ab
   alert(myConcat('a', 'b'));

   // Hallo Welt
   alert(myConcat('Hallo', ' ', 'Welt'));

Variablen

Globale / Lokale Variablen
Bei globalen Variablen ist var optional. Innerhalb von Funktion muss var benutzt werden, sonst wird die Variable global. Nutzt man in einer Funktion let statt var, wird eine mögliche globale Variable gleichen Namens nicht überschrieben.

String nach int

Beim Umwandeln von String nach Int sollte immer das Zahlensysten angegeben werden:
var i=parseInt("09", 10);

Array

Join, sort, und zur Demonstration ein eigener Comperator
    function myReverseComperator(a, b)
    {
     if(a>b) return -1;
     if(a<b) return +1;
     return 0;
    }

    var myArray = new Array();
    myArray[0] = "Foo";
    myArray[1] = "Bar";
    myArray[2] = "Dog";
    myArray[3] = "Cat";

    myArray.sort();
    // Bar - Cat - Dog - Foo 
    alert(myArray.join(" - "));

    //myArray.reverse();
    myArray.sort(myReverseComperator);
    // Foo; Dog; Cat; Bar
    alert(myArray.join("; "));
04-03-2010 20.40

Objekte

Date

Erzeuge den 12.2.2010 als Datumsobjekt. Achtung, der Monat beginnt bei 0, nicht bei 1!
var d=new Date(2010, 1, 12);

Nicht 
Date.getYear()
nutzen (das liefert ja nach Browser mal ein zwei oder ein vierstelliges Datum) sondern 
Date.getFullYear();
(immer vierstellig).

Prototyp / Vererbung

JavaScript ist prototypenbasiert

  1. Mein schreibt einen Konstruktor, es gibt private und public Variablen und Methoden
  2. Man legt den Namen fest unter der eine Methode erreichbar ist und welche function unter diesem Namen ausgeführt werden soll
  3. Ein Objekt wird mit dem Konstruktor erzeugt
  4. Man kann jederzeit dem Objekt Attribute (von außen!) hinzufügen
  5. Auch Methoden kann man von außen hinzufügen oder vorhanden Methoden neu definieren.
  6. Dann hat man allerdings keinen Zugriff mehr auf private Attribute (wie hier price)
  7. Ein anderer Konstruktor, der auch Objekte erzeugt. Diese Objekte "erben" alle Eigenschaften von einer anderen Klasse, die als Prototyp dient.
  8. Wir überschreiben eine Methode und rufen dabei die alte, im Protypen auf

// 1
function TransportVehicle(pName, pPrice)
{
 // public
 this.name=pName;

 // private
 var price=pPrice;

 // public // 2
 this.getName=function() 
 {
  return this.name;
 }

 // private
 function getPrice()
 {
  return price; /> }

 // public
 this.isPriceBelow100=function()
 {
  return price<100.0;
 }

 this.getStrg=function()
 {
  return "Name: "+this.name+", Price: "+price;
 }

}

// 3
var t=new TransportVehicle("Boat", 100.2);

// Name: Boat, Price: 100.2
alert(t.getStrg());

// 4
t.description="General transport vehicle";

// 5
t.getStrg=function()
{
  // 6
  return "Name: "+this.name+", Desc: "+this.description+", PriceInfo: "+this.isPriceBelow100();
}

// Name: Boat, Desc: General transport vehicle, PriceInfo: false
alert(t.getStrg());
  
// 7
function WheelBased(pName, pPrice, pNrOfWheels)
{
 this.prototype=new TransportVehicle(pName, pPrice);
 this.nrOfWheels=pNrOfWheels;
 // 8
 this.getStrg=function()
 {
	     return this.prototype.getStrg()+", NrOfWheels: "+pNrOfWheels;
 }
}
  
var w=new WheelBased("Car", 65100.0, 4);

// Name: Car, Price: 65100, NrOfWheels: 4
alert(w.getStrg());

JavaScript Object Natation (JSON)

Eine Kurzschreibweise für JavaObjekte
var deposit= { currency:"EUR",
               value:"120,12",
               getString:function() { return this.value+"("+this.currency+")"; }
             }

Wichtige Objekte

ObjektAnwendung
windowz.B. window.alert();
documentZugriff auf die Webseite
locationZugriff auf die URL der aktuellen Seite
04-03-2010 20.40

JavaScript, CSS, Objekte bewegen

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
      <title>JavaScript Demo</title>

      <style type="text/css">
	#d1 { color:red;  position:fixed; top:10px;  left:10px; }
	#d2 { color:blue; position:fixed; top:100px; left:100px; }
      </style>
    </head>
  <body>

   <div id="d1">Foo</div>
   <div id="d2">Bar</div>

   <script type="text/javascript">

    var o1=document.getElementById("d1")
    var o2=document.getElementById("d2")

    var myCounter=0;

    function moveIt()
    {
      o1.style.left=10+myCounter+'px';
      o2.innerHTML='Value: '+myCounter;
      myCounter++;
      if(myCounter>100) clearInterval(myInterval);
    }
  
    var myInterval=setInterval("moveIt()", 20);

   </script>
  
  </body>
 </html>
04-03-2010 20.40

DOM

Firefox DOM Inspector

DOM Level 0

Es gibt für einige Objekte Arrays (u.a. für Links und Bilder). Zum Beispiel
document.links[i];

DOM Level 2

Für alle Objekte in der HTML Seite gibt es ein Objekt.

   <div id="d1">
    First
    <div id="d2">
     Second
     <ul id="d3">
      <li>A</li><li>B</li>
      <li>C</li>
     </ul>
    </div>
    <span id="d4"><a href="http://www.example.com">third</a></span>
   </div>

   <br /><hr /><br />

   <div id="result">Result:</div>

   <script type="text/javascript">

    var o1=document.getElementById("d1");
    var o2=document.getElementById("d2");
    var o3=document.getElementById("d3");
    var o4=document.getElementById("d4");
    
    var result=document.getElementById("result").childNodes[0];

    // First
    result.nodeValue+=" "+o1.childNodes[0].nodeValue;

    // Second
    result.nodeValue+=" "+o2.childNodes[0].nodeValue;

    // ul
    for(var i=0; i<o3.childNodes.length; i++)
    {
      if("object"===typeof o3.childNodes[i].childNodes[0])
      {
	result.nodeValue+=i+": "+o3.childNodes[i].childNodes[0].nodeValue+" ";
      }
    }

    // a href
    var ol=o4.childNodes[0];
    result.nodeValue+=ol.childNodes[0].nodeValue;
    result.nodeValue+=" -> "+ol.getAttribute('href')

    // other possibility
    result.nodeValue+="; "+o3.innerHTML;
   </script>
04-03-2010 20.40

Events

Liste wichtiger Events, siehe auch DOM Events
  • onchange
  • onclick
  • onfocus
  • onload
  • onmouseon
  • onmouseover
  • onload

W3C Event Listener / IE Event Listener

W3C Event-Listener (wird nicht vom IE unterstützt) und Micrsoft Internet Explorer Events
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
      <title>JavaScript Demo</title>

      <style type="text/css">
  .stylA { font-size:large;  color:red;  }
  .stylB { font-size:normal; color:green; }
      </style>

      <meta http-equiv="Content-Script-Type" content="text/javascript" />

    </head>
  <body>

   <div id="d1" class="stylB" onmouseover="this.className='stylA';" onmouseout="this.className='stylB';">
     Foo
   </div>

   <script type="text/javascript">

     var o=document.getElementById("d1");
     
     if("function"===typeof o.addEventListener)
      o.addEventListener("click", myFunction, false);
     else if("function"===typeof o.attachEvent)
      o.attachEvent("click", myFunctionIE);

     function myFunction(pEvent)
     {
      o.childNodes[0].nodeValue+=".("+pEvent.clientX+"/"+pEvent.clientY+"\)";
     }

     function myFunctionIE()
     {
      o.childNodes[0].nodeValue+=".("+window.event.offsetX+"/"+window.event.offsetY+"\)";
     }

   </script>
  
  </body>
 </html>
25-03-2013 02.15

Parameter übergeben und auslesen

     var myNewURL="foo.bar?"+encodeURIComponent("Hello World!");
     alert(myNewURL);

     var myParams=location.search;
     myParams=myParams.substring(1, myParams.length);
     myParams=decodeURIComponent(myParams);
     alert(myParams);

Speicherbare Links

location.hash kann dazu benutzt werden, für den Zustand einer dynamischen Seite eine URL in der Adressleiste zu erreichen, die man verlinken kann.


04-03-2010 20.40

Beispiele

Größe eines Input Elements soll mitwachsen

Ein Input Element für Texte soll mit der Größe des bereits eingegebenen Strings dynamisch mitwachsen und schrumpfen.

Der Code kann entweder direkt am Element platziert werden
<input type="text"  ... size="2" onkeyup="var newsize=this.value.length; if(newsize<2) { newsize=2; }; if(newsize>1000) { newsize=1000; }; this.setAttribute('size', newsize);" />

oder in eine Methode ausgelagert werden

  <script type="text/javascript">
  <!--
  /* this function can be used to enlarge text input
   * fields while the users enters text into it.
   * Usage: <input type="text" onkeyup="enlarge_size_with_value_length(this);" ...
   */
  function enlarge_size_with_value_length(o)
  {
   var minsize=2;
   var maxsize=1023;
   var newsize=o.value.length;
   if(newsize<minsize) {
     newsize=minsize;
   };
   if(newsize>maxsize) {
     newsize=maxsize;
   };
   o.setAttribute('size', newsize);
  }; 
//-->
  </script>


<input type="text"  ... size="2" onkeyup="enlarge_size_with_value_length(this)"
14-08-2011 23.12

Ajax

Asynchronous JavaScript and XML
     // get XMLHttpRequest object for most browsers
     function getXMLHttpRequest()
     {
      if(window.XMLHttpRequest) return new XMLHttpRequest();
      if(typeof ActoveXObject!="undefined") return new ActiveXObject("Microsoft.XMLHTTP");
      return null;
     }

     talk2me=getXMLHttpRequest();

     talk2me.onreadystatechange=gotOne;
     talk2me.open("get", "data1.xml", true);
     talk2me.send(null);

     function gotOne()
     {
      if(talk2me.readyState==4)
      {
       if(talk2me.status==200)
       {
        alert(talk2me.responseText);
       }
      }
     }
04-03-2010 20.40
Powered by PHP Created with Xemacs Valid XHTML 1.0! Valid CSS!