Native Javascript

http://de.wikipedia.org/wiki/JavaScript

JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich für dynamisches HTML in Web-Browsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.
Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache.

Sie wird allen objektorientierten Programmierparadigmen unter anderem auf der Basis von Prototypen gerecht.

In JavaScript lässt sich objektorientiert und sowohl prozedural als auch funktional programmieren.

Quelle: Wikipedia

Historie / Namen / Begriffe / Version

1995 wurde in dem Browser Netscape Navigator mit dem Update auf Version 2.0 eine Sprache namens Live Script implementiert, mit der HTML manipuliert werden konnte.

Aus Marketing Gründen wurde die Sprache in JavaScript umbenannt.

Microsoft schob die Sprache JScript mit fast identischem Umfang hinterher.

Als Vermittler kam European Computer Manufacterers Association ins Spiel,
eine Normierungsorganisation aus Genf.

Einbindung in HTML

In HTML 5 ist kein type="javascript" mehr nötig:

<script>CODE</script>

Einbindung von externen Scripten:

< script src="js/slideshow.js"></script>

Einbindung kann an beliebiger Stelle erfolgen,
für Ladeperformance ist der Platz vor dem schließenden body-Tag optimal:

                ...
                < script src="js/slideshow.js"></script>
                <body>
                <html>

Um Javascript asynchron nachzuladen, gibt es auf der folgenden Seite ein modifiziertes Script von Facebook, das in das aktuelle Dokument ein JavaScript einfügt:

http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet

Welche Datentypen gibt es ? typeof

Primitive Datentypen

String ["a",'Jack\nBlack']
Eigenschaften: string.length, Funktionen: Overapi
Number [0,5,2.4,2E10,NaN,]
Funktionen: parseInt(),parseFloat(),isNaN(),Wertebereich
boolean [true,false]
null
undefined

Objekte

Object

Objekte bestehen aus Eigenschaften und Methoden,
Funktionen sind wiederum Objekte !

Zwei Arten von Objekten:
Nativ: Aus dem ECMAScript Standard Globale Objekte
Host: Definiert durch die Host Umgebung(z.B. den Browser)

Wie werden Variablen deklariert ?

Eingebaute Konstruktoren	Literale(Bevorzugen)
var o = new Object();	var o = {};
var a = new Array();	var a = [];
var re = new RegExp("[a-z]","g");	var re = /[a-z]/g;
var s = new String();	var s = "";
var n = new Number();	var n = 0;
var b = new Boolean();	var b = false;
throw new Error("uh-oh");	throw { name: "Error", message: "uh-oh" };

Javascript Objekt Notation

Kombination aus Objekt und Array Notation,
Eigenschaftennamen in Anführungszeichen,
Keine Funktionen oder RegEX

{
  "Herausgeber": "Xema",
  "Nummer": "1234-5678-9012-3456",
  "Deckung": 2e+6,
  "Währung": "EURO",
  "Inhaber": {
    "Name": "Mustermann",
    "Vorname": "Max",
    "männlich": true,
    "Hobbys": [ "Reiten", "Golfen", "Lesen" ],
    "Alter": 42,
    "Kinder": [],
    "Partner": null
  }
}

JSON ist ein Objekt mit der Methode JSON.parse()

Kontrollstrukturen

Standard For Schleife

for ( var int = 0; int < array.length;; int++) {
    var array_element = array[int];
}

Optimierte For Schleife

for ( var int = 0,max = array.length; int < max; int++) {
    var array_element = array[int];
}

Ausgabe der Eigenschaften eines Objektes

var Man = {
    hands:2,
    legs:2
}
for(var i in man){
    if(man.hasOwnProperty(i)){
        console.log(i,':',man[i]);
    }
}

Geltungsbereich von Variablen

Variablen mit var definiert, bleiben im lokalen Bereich, in der Funktion.

var myFish = ["angel", "clown", "mandarin", "surgeon"],
  angelschein = false;

Variablen ohne var definiert oder benutzt, gehören zum globalen Bereich.

Nachteile globaler Variablen:

Seiteneffekte mit Fremdbibliotheken
Seiteneffekte in eigenen Funktionen

Das globale Objekt erreicht man in Browsern über die Eigenschaft window

Wie können eigene Objekte angelegt und wiederverwendet werden ?

var adam = new Man('Adam');
adam.introduce();

Konstruktor eines Objektes:

var Man = function(name){
    this.name=name;
    this.introduce = function(){
        alert('Ich bin ' + this.name);
    }
    // return this;
};

Was bedeutet die Prototype Eigenschaft ?

Jede Konstruktor Funktion besitzt eine Prototype - Eigenschaft.
Alles was hier definiert wird, steht anschliessend allen Instanzen zur Verfügung

Konstruktor eines Objektes:

var Man = function(name){
    this.name=name;
}
Man.prototype.introduce = function(){
    alert('Ich bin ' + this.name);
};

Events

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    alert('CharCode ' + charCode +
                    ' is ' + String.fromCharCode(charCode));
}

http://www.w3schools.com/js/js_events_examples.asp

Ressourcen

Javascript Frameworks A-Z

https://angularjs.org/ W

AngularJS

AngularJS – meist einfach als Angular bezeichnet – ist ein Open-Source-Framework von Google, welches die Erstellung von browserbasierten Single-page-Anwendungen mit einem MVVM-Modell unterstützt, um die Softwareentwicklung und das Komponententesten entsprechender Anwendungen zu vereinfachen.

http://www.babylonjs.com/

Babylon JS

Javascript Bibliothek zum Rendern von 3D mit WebGL im Browser

http://backbonejs.org W

Backbone.js

Backbone.js ist eine JavaScript-Bibliothek mit RESTful-JSON-Schnittstelle.
Backbone basiert auf dem Model-View-Controller-Muster (MVC).
Backbone ist für seine geringe Größe bekannt und nur von der JavaScript-Bibliothek Underscore.js abhängig.
Backbone wird zur Programmierung von Single-page-Webanwendungen und zur Synchronität von Webanwendungen (z. B. verschiedene Clients und Server) verwendet.

http://dojotoolkit.org/ W

Dojo Toolkit

Das Dojo Toolkit ist eine freie, modulare JavaScript-Bibliothek, die zur raschen Entwicklung von JavaScript- oder Ajax-basierenden Anwendungen und Websites dient.

http://www.sencha.com/products/extjs/ W

Ext js

Ext JS ist ein clientseitiges JavaScript- bzw. Ajax-Framework für interaktive Webanwendungen, das für Open-Source-Projekte unter der GPL, für andere Projekte unter kommerziellen Lizenzen erhältlich ist. In erster Linie bietet Ext JS eine umfangreiche Sammlung von Steuerelementen.

http://www.jquery.com W

jQuery

jQuery (auch: jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.

http://www.http://mootools.net/ W

Mootools

MooTools (My Object Oriented Tools) ist ein freies JavaScript-Framework zur effizienten Entwicklung von erweiterbarem und browserübergreifend kompatiblem Code. Es ist objektorientiert, modular und kompakt. Das Framework steht unter der MIT-Lizenz. Etwa 5 % aller Webseiten nutzen MooTools.

http://www.prototypejs.org W

PrototypeJS

Prototype ist eine freie, umfangreiche JavaScript-Klassenbibliothek, die von Sam Stephenson im Jahr 2005 entwickelt wurde. Sie stellt sowohl verschiedene Programmierhilfen für Ajax zur Verfügung als auch Möglichkeiten, den JavaScript-Quelltext zu verkürzen. Sie entstand im Kontext von Ruby on Rails und war bis Version 3.1 dessen integraler Bestandteil. Inzwischen dient Prototype als Grundlage für zahlreiche Projekte wie beispielsweise script.aculo.us und Rico.

http://qooxdoo.org/ W S

qooxdoo

Qooxdoo (englisch ['kʊksdu]; eigene Schreibweise: „qooxdoo“) ist ein clientseitiges Framework für den Bau grafischer Benutzeroberflächen für Webanwendungen mit Hilfe des Programmierkonzepts Ajax. Die Quelltexte des Projekts sind frei und stehen unter der Eclipse Public License und der GNU Lesser General Public License.

https://facebook.github.io/react/ W T T U

React

React wurde von Facebook entwickelt und hat seinen Hauptfunktion im Rendern von HTML Snippets.

http://requirejs.org W

Require

RequireJS ist eine Open-Source-Implementierung für asynchrone Moduldefinition in JavaScript. Es dient dazu JavaScript-Dateien nicht beim Öffnen einer Webseite, sondern erst, wenn diese benötigt werden, zu laden. Zudem enthält es ein Optimierungswerkzeug, um minimierte JavaScript-Dateien zu erstellen, um das Laden von Webseiten zu beschleunigen.

http://underscorejs.org/ W

Underscore

Underscore.js oder kurz Underscore (für engl. Unterstrich) ist eine freie JavaScript-Bibliothek mit Hilfsfunktionen für alltägliche JavaScript-Aufgaben.
Es wurde 2009 von Jeremy Ashkenas (Backbone.js, CoffeeScript) als Werkzeugsammlung für Container-Operationen auf Arrays und Objekten sowie von JavaScript-Funktionen geschaffen.
Der Name der Bibliothek rührt vom für sie reservierten globalen Objekt _ (Underscore ist englisch für das Zeichen Unterstrich) analog zum Objekt $ in jQuery her.

https://vocajs.com/

Voca

The Voca library offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugifly, latinise, sprintf'y, truncate, escape and much more. The modular design allows to load the entire library, or individual functions to minimize the application builds. The library is fully tested, well documented and long-term supported.