JavaScript - Revision history

Mm: /* Auf Elemente zugreifen */

2013-11-27T11:56:52Z

Auf Elemente zugreifen

← Older revision		Revision as of 11:56, 27 November 2013
Line 82:		Line 82:
	</source>		</source>

	Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein ~~schnellerer~~ Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen:		Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein komfortabler (aber im Vergleich zu getElementByID etwas langsamerer) Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen:
	<source lang="JavaScript">		<source lang="JavaScript">
	var domElement = document.querySelector("#changeMe");		var domElement = document.querySelector("#changeMe");

Mm: missing semikolon

2013-04-10T23:53:13Z

missing semikolon

← Older revision		Revision as of 23:53, 10 April 2013
Line 202:		Line 202:
	var tuWas = function(){		var tuWas = function(){
	//befehle hier		//befehle hier
	}		};
	</source>		</source>
	beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch		beide haben den selben Effekt und sind nur andere Schreibweisen, beide Funktionen werden durch
Line 210:		Line 210:
	ausgeführt.		ausgeführt.

	Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern.		Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern.

	<source lang="JavaScript" >		<source lang="JavaScript" >

Mm: /* Hallo Welt */

2013-04-10T23:51:05Z

Hallo Welt

← Older revision		Revision as of 23:51, 10 April 2013
Line 1:		Line 1:
	== Hallo Welt ==		== Hallo Welt ==
			JavaScript heißt eigentlich [http://www.ecma-international.org/memento/TC39.htm ECMA Script] und hat nichts mit JAVA zu tun: Die JavaScript Sprache erhielt ihren Namen lediglich, weil zur Zeit ihrer Einführung in den WebBrowser die Programmiersprache [[JAVA]] sehr populär war und man dachte, das wäre ein Marketing-Vorteil.

	JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. (Im Gegensatz z.B. zu dem serverbasierten [[PHP]])		Wenn wir von JavaScript sprechen, meinen wir meistens die Implementierung im WebBrowser. Hier ist JavaScript eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. (Im Gegensatz z.B. zu dem serverbasierten [[PHP]])

	~~Auch~~ Director, Acrobat-PDFs ~~und viele andere Dokumente und Programme unterstützen JavaScript~~.		Aber auch viele andere Programme unterstützen JavaScript oder ECMA-ähnliche Dialekte, so z.B. Actionscript (Flash), Director, Acrobat-PDFs oder sogar Illustrator, um nur einige zu nennen.

	<source lang="html4strict" line start="1" highlight="8">		<source lang="html4strict" line start="1" highlight="8">

Mm: Einrückung und document.querySelector

2013-04-10T23:44:06Z

Einrückung und document.querySelector

← Older revision		Revision as of 23:44, 10 April 2013
Line 93:		Line 93:
	Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren.		Mit "Event-Handlern" kann man auf Ereignisse und Benutzeraktionen reagieren.
	Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden:		Die Einfachste Möglichkeit ist den Event-Handler direkt ins HTML einzubinden:

			'''HTML und JavaScript:'''
	<source lang="HTML4Strict">		<source lang="HTML4Strict">
	<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p>		<p><a href="#" onclick="alert('Hallo Welt!');">Rufe JavaScript auf</a></p>
Line 98:		Line 100:
	Der Event-Handler im Beispiel ist <tt>onclick="..."</tt>		Der Event-Handler im Beispiel ist <tt>onclick="..."</tt>

	Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen ~~Handler~~:		Besser ist es aber, HTML und Javascript zu trennen, und die Event-Handler im Javscript hinzuzufügen. Dazu holt man sich das Dom-Element, und gibt diesem einen Händler:

			'''In HTML:'''
			<source lang="HTML5">
			<p id="changeMe">Rufe JavaScript auf</p>
			</source>

			'''In JavaScript:'''
	<source lang="JavaScript">		<source lang="JavaScript">
	function changeElement(e){		function changeElement(e){
	e.target.style.color="red";		e.target.style.color="red";
	}		}
	var domElement = document.getElementById("changeMe");		// bisherige Variante:
			//var domElement = document.getElementById("changeMe");
			// besser (moderner und schneller, aber nicht in allen älteren Browsern implementiert)
			var domElement = document.querySelector("#changeMe");
	domElement.onclick= changeElement;		domElement.onclick= changeElement;
	</source>		</source>
	~~statt~~ .onclick kann ~~auch~~ .addEventListener("click", changeElement, false) ~~benutzt~~ werden~~, eine Form, die mehr Kontrolle bietet~~:
			document.querySelector benutzt [[CSS]] Syntax, in diesem Beispiel steht die Raute # bei #changeMe für eine ID (id="changeMe").
			Es gibt nur drei Selektortypen in CSS:
			* HTML-Selectoren (p, div, a usw...) <sup>vordefiniert</sup>
			* Klassen (.myStyle, .warning usw...) <sup>freie Benennung</sup>
			* IDs (#header, #content, #clickButton, usw...) <sup>freie Benennung</sup>

			Es ist wirklich hilfreich, sich in [[CSS]] einzulesen, um damit gut umgehen zu können. Der Vorteil von .querySelector gegenüber .getElementByID ist, dass es bedeutend schneller ist, da nicht das ganze DOM durchsucht werden muss und dass es sehr viel bequemer zu schreiben ist. Außerdem unterstützt .querySelector auch Pseudo-Selektoren und Regular Expressions. .querySelector macht auch den Einsatz von jQuery in 50% aller Fälle überflüssig, da jQuery häufig nur wegen der einfach zu notierenden Syntax <tt>$('#changeMe')</tt> genutzt wird. Das Gleiche erreicht man mit nativem JavaScript mit <tt>document.querySelector('#changeMe')</tt>

			=== onClick vs. addEventListener ===
			Das Problem mit .onclick (und allen anderen "on..."-Event-Handlern) ist, dass jedes Element nur einen .onclick-Handler haben kann. Besser ist es .addEventListener("click", changeElement, false) zu verwenden, damit können nämlich beliebig viele Event-Callbacks (Funktionen) registriert werden:
	<source lang="JavaScript">		<source lang="JavaScript">
	domElement.addEventListener("click", changeElement, false)		domElement.addEventListener("click", changeElement, false)
Line 117:		Line 139:

	===Handler wieder löschen bzw. un-registrieren===		===Handler wieder löschen bzw. un-registrieren===
	Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion.		Eventhandler kann man in der .on...-syntax durch überschreiben wieder loswerden. Dabei wird nicht die Funktion gelöscht, sondern die "Verbindung" zwischen Event und Funktion. Dieses Verhalten ist nicht immer erwünscht und löst manchmal auch wichtige bestehende Verbindungen (z.B. in einer verwendeten JavaScript-Library), daher sollte prinzipiell die addEventListener Methode verwendet werden.

	<source lang="JavaScript">		<source lang="JavaScript">

Mm: Einrückung

2013-04-10T23:19:01Z

Einrückung

← Older revision		Revision as of 23:19, 10 April 2013
Line 172:		Line 172:
	<source lang="JavaScript" >		<source lang="JavaScript" >
	function tuWas(){		function tuWas(){
	//befehle hier		//befehle hier
	}		}
	</source>		</source>
Line 178:		Line 178:
	<source lang="JavaScript" >		<source lang="JavaScript" >
	var tuWas = function(){		var tuWas = function(){
	//befehle hier		//befehle hier
	}		}
	</source>		</source>
Line 194:		Line 194:
	Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen.		Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen.
	<source lang="JavaScript" >		<source lang="JavaScript" >
	var fragen = function(fragt, antwortet){		var fragen = function(fragt, antwortet) {
	alert(fragt+" sagt: ist heute Webtech?");		alert(fragt+" sagt: ist heute Webtech?");
	alert(antwortet +" sagt: ja!"		alert(antwortet +" sagt: ja!"
	}		}
	</source>		</source>

Mm: einrückung

2013-04-10T23:18:10Z

einrückung

← Older revision		Revision as of 23:18, 10 April 2013
Line 131:		Line 131:
	<source lang="JavaScript">		<source lang="JavaScript">
	function changeElement(e){		function changeElement(e){
	e.target.style.color="red";		e.target.style.color="red";
	}		}
	</source>		</source>

JanD: /* Ressourcen */ : Veraltete Referenz gelöscht

2013-02-03T19:07:43Z

Ressourcen: : Veraltete Referenz gelöscht

← Older revision		Revision as of 19:07, 3 February 2013
Line 451:		Line 451:
	* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip]		* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_025-028.zip Kursbegleitende Quelldateien 025-028.zip]
	* [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript]		* [http://de.selfhtml.org/javascript/index.htm SelfHTML JavaScript]
	* [http://openbook.galileocomputing.de/javascript/ Galileo OpenBook JavaScript] (umfangreiche Einführung; etwas veraltet)
	* [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.		* [http://eloquentjavascript.net/contents.html Eloquent Javascript] interaktives Tutorial, beschäftigt sich hauptsächlich mit Javascript selbst und wenig mit DOM, also der direkten Veränderung von Websites.
	* [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript]		* [http://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt WikiBooks: JavaScript]

JanD at 13:18, 3 February 2013

2013-02-03T13:18:57Z

← Older revision		Revision as of 13:18, 3 February 2013
Line 287:		Line 287:
	== Klassen und Objekte ==		== Klassen und Objekte ==

	JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt. Objekte in Javascript sind einfach zusammengehörige ~~paare~~		JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt. Objekte in Javascript sind einfach zusammengehörige Paare von Namen und Daten (Strings, Zahlen, Funktionen, anderen Objekten) Ein Objekt wird durch geschweifte Klammern begonnen und beendet, Bezeichner und Wert werden durch einen ":" getrennt, Bezeichner- und Werpaare werden durch "," getrennt.
			<source lang="JavaScript" line>
			var objektname = {
			"name" : "Wert als String",
			"nocheiner" : 12344
			}
			</source>

			auf die Werte in dem Objekt wird über die Punkt-Syntax zugegriffen: Zwischen Objektname und Eigenschaftsname wird ein Punkt geschrieben.

			<source lang="JavaScript" line>
			var einString = objektname.name
			</source>

			Schreibt also den Wert "Wert als String" der Eigenschaft "name" des Objekts "objektName" in die Variable "einString".

			Wenn eine Eigenschaft des Objektes selber ein Objekt ist kann die Punktsyntx weiter geschachtelt werden:

			<source lang="JavaScript" line>
			meinObjekt.unterObjekt.wertVonUnterObjekt
			</source>

	Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript ''nicht''. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als ''Klasse'' bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.		Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript ''nicht''. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als ''Klasse'' bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.

	Diese strikte ~~trennung~~ existiert in Javscript nicht, Objekte werden intern durch ~~kopien~~ von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird.		Diese strikte Trennung existiert in Javscript nicht, Objekte werden intern durch Kopien von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird.

	Z.B. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source>		Z.B. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source>

JanD at 13:06, 3 February 2013

2013-02-03T13:06:46Z

← Older revision		Revision as of 13:06, 3 February 2013
Line 1:		Line 1:
	== Hallo Welt ==		== Hallo Welt ==

	JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. Im Gegensatz ~~dazu ist~~ [[PHP]] ~~eine serverseitige Programmiersprache.~~		JavaScript ist eine clientseitige Programmiersprache. Der Quellcode wird im Klartext an den Browser übertragen und erst dort (im Browser des Surfers) interpretiert und ausgeführt. (Im Gegensatz z.B. zu dem serverbasierten [[PHP]])

	Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript.		Auch Director, Acrobat-PDFs und viele andere Dokumente und Programme unterstützen JavaScript.
Line 81:		Line 81:
	</source>		</source>

	Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur ~~auswahl~~ der Elemente entgegennehmen:		Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur Auswahl der Elemente entgegennehmen:
	<source lang="JavaScript">		<source lang="JavaScript">
	var domElement = document.querySelector("#changeMe");		var domElement = document.querySelector("#changeMe");
Line 165:		Line 165:
	== Funktionen ==		== Funktionen ==

	Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Ruft man eine Funktion auf, werden die Befehle aus der sie besteht ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas()" führt die Funktion "tuWas" aus.		Funktionen sind gruppierte Einheiten, die eine bestimmte Aufgabe haben. Ruft man eine Funktion auf, werden die Befehle, aus der sie besteht, ausgeführt. Der Aufruf einer Funktion geschieht durch die runden Klammern: "tuWas'''()'''" führt die Funktion "tuWas" aus.

	Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>~~doSomething~~();</tt> oder <tt>getItem();</tt>.		Üblicherweise sollten Funktionen durch ein Verb benannt sein. Z.B. <tt>calcSquare();</tt> oder <tt>getItem();</tt>.

	Ein Funktion kann auf verschiedene Weise definiert werden:		Ein Funktion kann auf verschiedene Weise definiert werden:
Line 187:		Line 187:
	ausgeführt.		ausgeführt.

	Funktionen können aber nicht nur einfach ausgeführt werden: Ihre ~~ausführung~~ kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern.		Funktionen können aber nicht nur einfach ausgeführt werden: Ihre Ausführung kann beeinflusst werden, indem der Funktion "Parameter" oder synonym "Argumente" übergeben werden. Beim Aufrufen schreibt die Argumente mit Kommanta getrennt zwischen die runden Klammern.

	<source lang="JavaScript" >		<source lang="JavaScript" >
	fragen("Jan","Michael");		fragen("Jan","Michael");
	</source>		</source>
	Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen ~~argumente~~ annehmen.		Bei der Definition der Funktion müssen zwischen die runden Klammern Variablennamen geschrieben werden, die dann die Werte der übergebenen Argumente annehmen.
	<source lang="JavaScript" >		<source lang="JavaScript" >
	var fragen = function(fragt, antwortet){		var fragen = function(fragt, antwortet){
Line 200:		Line 200:
	</source>		</source>

	In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen("Jan","Michael");" bekommt der erste Parameter, "fragt", den Wert "Jan", der zweite Parameter, "antwortet", den Wert "Michael".		In der Funktion gelten also die Variablen "fragt" und "antwortet". Beim Aufrufen werden die Werte den Variablen zugeordnet, also bei "fragen('Jan','Michael');" bekommt der erste Parameter, "fragt", den Wert "Jan", der zweite Parameter, "antwortet", den Wert "Michael", somit bekommt man bei Ausführen von "fragen('Jan','Michael');" zuerst einen Alert mit dem Text
			"Jan sagt: "Ist heute Webtech" und dann einen mit "Michael sagt: ja!"

	~~<source lang="JavaScript~~" ~~line start="15">~~
	~~function showAlert~~(~~myMsg) {~~
	~~// zeige alert~~
	~~alert(myMsg~~);

	~~// füge "Funktion ausgeführt!~~" Text ~~der Liste am Ende hinzu~~
	~~// erstelle ergebnisTag~~
	~~var myNewListItem = document.createElement(~~"li");
	~~var myText = document.createTextNode(~~"~~Die Funktion wurde erfolgreich aufgerufen!");~~
	~~myNewListItem.appendChild(myText);~~
	~~// finde ergebnisListe~~ und ~~füge neuen ergebnisTag hinzu~~
	~~var myErgebnisListe = document.getElementById(~~"~~ergebnisListe~~");
	~~myErgebnisListe.appendChild(myNewListItem);~~
	}
	~~</source>~~

	~~Der Vollständigkeit halber sei erwähnt, dass Funktionen weitere Funktionen enthalten können.~~

	== Variablen ==		== Variablen ==
Line 228:		Line 210:

	===Typen===		===Typen===
	Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted), d.h. ~~eine Variable kann Werte beliebiger Typen enthalten~~.		Im Gegensatz zu vielen anderen Sprachen, haben Variablen in JavaScript keine explizite Typ-Zuweisung (non-typecasted). Ein Typ ist die "Art" der Daten, die in der Variable gespeichert werden, z.B. Zahlen, Zeichenfolgen ("String") oder RegularExpressions. Bei Javascript muss der Typ nicht angegeben werden (in anderen Sprachen würde man sowas schreiben wie "var '''Number:'''myvar = 10")

	Trotz der nicht-expliziten Typzuweisung, gibt es in Javascript Objekte, die man mit primitiven Type verwechseln könnte: Numbers ([[int]], [[float]], ...), Strings ([[char]], [[string]]) und Boolean ([[bool]]).		Trotz der nicht-expliziten Typzuweisung, gibt es in Javascript Objekte, die man mit primitiven Type verwechseln könnte: Numbers ([[int]], [[float]], ...), Strings ([[char]], [[string]]) und Boolean ([[bool]]).
Line 247:		Line 229:
	// c ist nun ein String mit dem Wert "54"!		// c ist nun ein String mit dem Wert "54"!
	</source>		</source>

			Es ist allerdings keine gute Praxis, den Typ einer Variable zu ändern, da es den Code schlechter lesbar und unverständlich macht.

	====Explizite Typumwandlung====		====Explizite Typumwandlung====
	Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen.		Trotz der nicht expliziten Typen von JavaScript Variablen, lassen sich aber explizite Typumwandlungen (Typecasting) vornehmen.
Line 302:		Line 287:
	== Klassen und Objekte ==		== Klassen und Objekte ==

	JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt ~~bzw~~. ~~eine~~ Klasse. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als ''Klasse'' bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.		JavaScript ist objektbasierte Programmiersprache (und gehört im weiteren Sinn zu den objektorientierten Programmiersprachen). In JS ist quasi alles ein Objekt. Objekte in Javascript sind einfach zusammengehörige paare


			Das von anderen Sprachen bekannte Konzept einer "Klasse" gitb es in Javascript ''nicht''. Der Unterschied zwischen einer Klasse und einem Objekt ist, dass man die Vorlage eines Objektes ("Blueprint") als ''Klasse'' bezeichnet. Von einer Klasse können beliebig viele "Instanzen" erstellt werden. Wenn mit dem Schlüsselwort <tt>new MyClass()</tt> eine Instanz einer Klasse erstellt wurde, spricht man von einem Objekt.

	~~Vereinfacht heißt das: Ein Objekt (also eine Instanz einer Klasse)~~ existiert "~~lebendig~~" und ~~veränderbar im Speicher des Rechners~~, ~~eine Klasse hingegen existiert nicht (im Sinne einer~~ "~~lebendigen Veränderbarkeit~~"~~) bzw. nur unveränderlich als Quellcode (~~"~~Blueprint~~"~~/Vorlage) bzw. Textdatei auf der Festplatte~~.		Diese strikte trennung existiert in Javscript nicht, Objekte werden intern durch kopien von bestehenden Objekten erzeugt, wobei es Eigenschaften gibt die "geerbt" werden, also Daten und Funktionen, die von allen neuen Objekten gemeinsam genutzt werden. Dies ist aber ein fortgeschrittenes Thema. Zum Einstieg reicht es aus, das neue Kopien meist mit dem Operator "new" erzeugt werden, eine Konvention übernommen aus anderen Programmiersprachen in denen mittels "new" ein neues Objekt aus einer Klasse erstellt wird.

	Z.B. ~~erstellt man~~ ein neues ''Objekt'' <tt>myDate</tt> aus ~~der~~ ''~~Klasse~~'' <tt>Date</tt> so: <source lang="JavaScript">var myDate = new Date();</source>		Z.B. ein neues ''Objekt'' <tt>myDate</tt> aus dem ''date-Objekt'' <tt>Date</tt> erstellt man so: <source lang="JavaScript">var myDate = new Date();</source>

	Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source>		Nun kann man alle Eigenschaften und Methoden (=Funktionen) des Objektes mit Hilfe des "Punktsyntax" oder "Dot-Syntax" benutzen. Z.B.: <source lang="JavaScript">Document.print("Es ist " + myDate.getHours() + " Uhr.");</source>

JanD: /* Debugging */

2012-03-29T12:43:29Z

Debugging

← Older revision		Revision as of 12:43, 29 March 2012
Line 404:		Line 404:
	* Test early & test often!		* Test early & test often!
	* Nutzt eine Konsole, die JavaScript Code evaluieren (=ausführen) kann. Siehe z.B. [[CSS#Editieren_von_Stylesheets\|Firebug]].		* Nutzt eine Konsole, die JavaScript Code evaluieren (=ausführen) kann. Siehe z.B. [[CSS#Editieren_von_Stylesheets\|Firebug]].
	* ~~[[CSS#Editieren_von_Stylesheets\|~~Firebug und ~~Aptana Studio]]~~ haben richtige Debugger!		* Firebug und die Web Developer Tools der Webkit-Browser haben richtige Debugger!
			* In vielen Browsern ist es möglich, über console.log("ausgabetext hier") Ausgaben in die Konsole zu schreiben.

	Ein vollwertiger Debugger ist ein wertvolles Entwicklungswerkzeug. Man kann damit "Breakpoints" setzen (üblicherweise rote Punkte in der Linienzeile), dort hält der Code während der Ausführung an; und man kann Schritt für Schritt, Zeile für Zeile weitersteppen. Gleichzeitig werden verschiedene Fenster angezeigt, in denen man die aktuellen Werte lokaler und globaler Variablen beobachten, verfolgen und setzen kann!		Ein vollwertiger Debugger ist ein wertvolles Entwicklungswerkzeug. Man kann damit "Breakpoints" setzen (üblicherweise rote Punkte in der Linienzeile), dort hält der Code während der Ausführung an; und man kann Schritt für Schritt, Zeile für Zeile weitersteppen. Gleichzeitig werden verschiedene Fenster angezeigt, in denen man die aktuellen Werte lokaler und globaler Variablen beobachten, verfolgen und setzen kann!