Javascript

From no name for this wiki
Revision as of 13:01, 21 December 2013 by Claude (talk | contribs) (watch)
Jump to: navigation, search

Hier ein paar Samples

Array Objekt

Objekt Array erstellen:

 var myArray = new Array("elem1", "elem2", "elem3");
 var poppedElem = myArray.pop(); //Stack Pop Operation
 myArray.concat(new Array("elem3","elem4")); //Zusammenfügen von Arrays


  //Anderes Array Sample:
 var myArray = [8,7,6,5];
 alert(myArray[0]); //Druckt 8
 for(var i=0; i<myArray.lenght; i++){
   alert(myArray[i]);
 }

Weitere Funktionen

Array bietet noch (nicht abschliessend): sort, reverse, splice, join und viele mehr.

Properties

Properties mit [] setzen:

 var myObject = new Object();
 myObject["myProperty"] = 5;
 alert(myObject.myProperty); //Sollte 5 anzeigen

Closures

Hello World, inline:

 var myClosure = function(){alert ('Hello World');};
 myClosure();

Hello World:

 function helloWorld(){alert ('Hello World');}
 var myClosure = helloWorld;
 myClosure();

Klassen

In Javascript kann man Klassen wie folgt erstellen:

 function Car(size, color, numdoors){
   this.size = size;
   this.color = color;
   this.numdoors = numdoors; 
 }

So werden Instanzen erstellt:

 var myCar = new Car(23,"Green",5);
 var numDoorsOfmyCar = myCar.numdoors;

Member Funktionen

 function Car(numdoors){   
   this.numdoors = numdoors; 
   this.brake = brake;
 }

 function brake(){
   alert('brake');
 }

Grundfunktionen

Es gibt eine Properties, welche alle Objekte haben. Nicht abschliessend: toString, watch und unwatch, constructor, prototype, hasOwnProperty, prototype.isPrototypeOf, propertyIsEnumerable, toSource, valueOf, eval

Named Arguments

Funktion mit Objekt als Argument:

 //square ist ein Objekt mit den erwarteten Properties height und width
 function area(square) {
    return square.height * square.width;  
 }

//Hier der Funktionsaufruf mit named Arguments:
 var myresult =  area({height: 30, width : 30});
 alert(myresult);

Prototype

Mit dem Keyword Prototype kann ein neues Property für alle Instanzen einer Klasse erstellt werden:

 //Definition der Klasse Car
 function car(){}
 //Nun ein Property definieren
 car.prototype.numwheels = 4;
 //Nun eine Funktion definieren
 car.prototype.brake = function { alert('Brake');};

watch

var o = { p: 1 };

o.watch("p", function (id, oldval, newval) {
    console.log( "o." + id + " changed from " + oldval + " to " + newval );
    return newval;
});

o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;

o.unwatch('p');
o.p = 5;

Output: o.p changed from 1 to 2 o.p changed from 2 to 3 o.p changed from undefined to 4

Funktionsargumente

Die implizite Variable arguments:

 function sum() {
   var myresult = 0;
   for(int i=0; i<arguments.length; i++){
      myResult += arguments[i];
   }
   return myresult;
 }
 
 var myresult =  sum(23,23,23);

arguments bietet noch mehr: arguments.callee, arguments.caller und weiteres.

Exceptions

 try { 
   
      throw "An error" 
 } 
 catch(er) {
    //er is a string  
    alert(er);  
 }

with

Mit with kann man ein Objekt zum default Objekt machen:

 var myObject = new Obect();
 myObject.myproperty = 3;
 with(myObject){
    alert(myproperty); //Shows 3
 }

HTML Countdown

var countdowndata;

function countdown() {
                
   countdowndata = new Object();   
   countdowndata.time = new Date();  
   countdowndata.time.setTime(countdowndata.time.getTime() + (1000*60*3))
   
   setTimeout('countdonwcallback()',200);      
}

function countdonwcallback() {
   var divcountdown = document.getElementById('countdown'); 
   var nowDate = new Date();
   
   var timeDiff = countdowndata.time.getTime() - nowDate.getTime();
   
   var mins = Math.floor((timeDiff)/(1000*60));
   var secs = Math.floor((timeDiff)/1000) % 60;
   
   if(secs < 10)
   {
      divcountdown.innerHTML  = "" + mins + ":0" + secs; 
   }
   else 
   {
      divcountdown.innerHTML  = "" + mins + ":" + secs; 
   }
   setTimeout('countdonwcallback()',200);
}

Popup

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
	newwindow=window.open(url,'name','height=200,width=150');
	if (window.focus) {newwindow.focus()}
	return false;
}

// -->
</script>

Links