320NN Development Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: start » javascript
javascript:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
javascript:start [2015-01-13 09:01] – [Tutorials] Links zu "MDN: A re-introduction to JavaScript" und "Douglas Crockford: JavaScript: The World's Most Misunderstood Programming Language" eingefügt a.kamolajavascript:start [2015-04-24 18:15] (aktuell) – Erweitert a.kamola
Zeile 1: Zeile 1:
 ====== JavaScript ====== ====== JavaScript ======
 +
 +===== Kommentare =====
 +
 +Eine Zeile:
 +
 +<code javascript>
 +// Ein einzeiliger Kommentar
 +</code>
 +
 +Mehrere Zeilen:
 +
 +<code javascript>
 +/*
 +Ein
 +mehrzeiliger
 +Kommentar
 +*/
 +</code>
 +
 +===== Strict Mode =====
 +
 +Um Browser anzuweisen JavaScript im "Strict Mode" auszuführen, muss dies die der erste Anweisung im JavaScript sein:
 +
 +<code javascript>
 +'use strict';
 +</code>
 +
 +Diese //globale// Anweisung kann u.U. zu Problem mit anderen Scripts führen, die nicht nach dem "Strict Mode" (also unsauber) entwickelt wurden. Deshalb empfiehlt es sich, den "Strict Mode" nur in Funktionen zu verwenden:
 +
 +<code javascript>
 +(function () {
 + 'use strict';
 + // this function is strict...
 +}());
 +
 +(function () {
 + // but this function is sloppy...
 +}());
 +</code>
 +
 +===== Konstanten =====
 +
 +In JavaScript gibt es leider keine echten Konstanten, daher behilft man sich mit i.d.R. mit folgender Konvention: Namen von Konstanten dürfen nur aus Großbuchstaben bestehen.
 +
 +<code javascript>
 +var PI = 3.14;
 +</code>
 +
 +===== Variablen =====
 +
 +Variablen werden mit dem Schlüsselwort ''var'' gesetzt. Der [[lexikon:type|Typ]] der Variable wird mittels [[lexikon:ducktyping|Duck Typing]] ermittelt.
 +
 +<code javascript>
 +var i = 0; // Ganze Zahl
 +var x = 1.234; // Komma-Zahl
 +var text = "Loren Ipsum ..." // String
 +var numbers = [1, 2, 3, 4]; // Array
 +var obj = {}; // Objekt
 +</code>
 +
 +==== Überprüfen ob eine Variable gesetzt wurde ====
 +
 +<code javascript>
 +if (typeof(fooBar) !== 'undefined' && fooBar !== null) {
 + // fooBar exists!
 +}
 +</code>
 +
 +===== Arrays =====
 +
 +<code javascript>
 +// Create array
 +var foo = [];
 +
 +// Append an element to an array
 +foo.push('New element');
 +</code>
 +
 +===== Strings =====
 +
 +==== Länge eines Strings bestimmen ====
 +
 +Die Länge eines Strings lässt sich, wie bei **jedem** anderen Objekt in JavaScript, über die Eigenschaft ''length'' bestimmen(([[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length|String.length – Mozilla Developer Network]])):
 +
 +<code javascript>
 +var foo = 'Hello World!';
 +
 +var fooLength = foo.length;
 +
 +// fooLength = 12
 +</code>
 +
 +==== String kürzen ====
 +
 +Strings lassen sich mit der Funktion ''substr()'' kürzen(([[http://stackoverflow.com/questions/7463658/javascript-trim-a-string-to-length/7463674#7463674|JavaScript: Trim a string to length – Stack Overflow]])):
 +
 +<code javascript>
 +var foo = 'Hello World!';
 +
 +var start = 0;
 +var maxLength = 10;
 +
 +foo.substr(start, maxLength);
 +
 +// foo = Hello Worl
 +</code>
 +
 +==== String teilen ====
 +
 +Strings lassen sich mit der Funktion ''split()'' teilen; die String-Teile werden als Array zurückgegeben(([[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split|String.prototype.split() – Mozilla Developer Network]])):
 +
 +<code javascript>
 +var foo = 'Hello World!';
 +
 +var fooParts = foo.split(' ');
 +
 +// fooParts = ['Hello', 'World!']
 +</code>
 +
 +==== Zeilenumbrüche (\n) in HTML-Zeilenumbürche umwandeln ====
 +
 +<code javascript>
 +var text = 'Hello\nWorld';
 +
 +text = text.replace(/\n/g, '<br />');
 +</code>
 +
 +==== E-Mail-Adressen validieren ====
 +
 +Simple, nicht ganz vollständige E-Mail-Überprüfung:
 +
 +<code javascript>
 +var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
 +
 +if (!pattern.test(emailAddress)) {
 + // emailAddress contains a valid E-Mail address
 +}
 +</code>
 +
 +===== Funktionen =====
 +
 +==== Parameter-Werte vorgeben ====
 +
 +In JavaScript ist es nicht vorgesehen, dass einem Parameter bei der Definition ein Wert zugwiesen wird! Um dennoch Parameter einen Standard-Wert zuweisen zu können, muss überprüft werden, ob der Parameter gesetzt wurde:
 +
 +<code javascript>
 +function fooBar(foo, bar) {
 + foo = typeof(foo) !== 'undefined' ? foo : 42;
 + bar = typeof(bar) !== 'undefined' ? bar : 'Hello World';
 +}
 +</code>
 +
 +Quelle: [[http://stackoverflow.com/questions/894860/set-a-default-parameter-value-for-a-javascript-function/894877#894877|Stack Overflow: Set a default parameter value for a JavaScript function]]
 +
 +===== Objekte =====
 +
 +==== Anzahl der Eigenschaften bestimmen ====
 +
 +Über die Anzahl der Eigenschaften eines Objekts lässt sich quasi die "Länge" eines Objektes bestimmten (z.B. um zu überprüfen, ob ein Objekt überhaupt existiert):
 +
 +<code javascript>
 +var foo = {}; // An object
 +
 +if (Object.keys(foo).length == 0) {
 + // Object is empty
 +}
 +</code>
  
 ===== Links ===== ===== Links =====
  
   * [[https://developer.mozilla.org/docs/Web/JavaScript|MDN: JavaScript]]   * [[https://developer.mozilla.org/docs/Web/JavaScript|MDN: JavaScript]]
 +  * [[http://www.json.org/|JSON: JavaScript Object Notation]]
   * [[https://pinboard.in/u:aberaberarne/t:javascript|Arnes Link-Sammlung zu JavaScript]]   * [[https://pinboard.in/u:aberaberarne/t:javascript|Arnes Link-Sammlung zu JavaScript]]
  
Zeile 16: Zeile 184:
   * [[https://www.codeschool.com/paths/javascript|Code School: JavaScript]]   * [[https://www.codeschool.com/paths/javascript|Code School: JavaScript]]
   * [[https://www.video2brain.com/de/videotraining/webprogrammierung-grundlagen|video2brain: Webprogrammierung: Grundlagen]]   * [[https://www.video2brain.com/de/videotraining/webprogrammierung-grundlagen|video2brain: Webprogrammierung: Grundlagen]]
 +  * [[https://www.video2brain.com/de/videotraining/javascript-crashkurs-2012|video2brain: JavaScript – Crashkurs]]
 +  * [[https://www.video2brain.com/de/videotraining/javascript|video2brain: JavaScript]]
javascript/start.1421136080.txt.gz · Zuletzt geändert: 2015-01-13 09:01 von a.kamola