Archivo Explosivo: Javascript

FIAE – OOP – Objektorientierte Programmierung – Prototypenbasierte Programmierung

Prototypenbasierte Programmierung beschreibt klassenloses objektorientiertes Programmieren. Die Vererbung wird über das Dekorieren von Objekten erreicht – Prototypen. Dieses Modell wird als klassenlose/prototyporientierte/prototypenbasierte/instanzorientierte Programmierung bezeichnet.

Prototypenbasierte Programmierung am Beispiel Javascript

<script>

// Prototyp Auto wird erstellt  
function Auto(Marke) 
{
    this.Marke = Marke;
}

// Funktion für Prototyp wird erstellt
Auto.prototype.sagHallo = function()
{
    console.log('Hallo, ich bin ein ' + this.Marke + '!');
};

// Instanziierung des Prototypen Auto als Auto1 und Auto2
var Auto1 = new Auto('Hyundai');
var Auto2 = new Auto('Fiat');

// Funktionsaufruf durch die Instanzen
Auto1.sagHallo(); // Ausgabe: Hallo, ich bin ein Hyundai!
Auto2.sagHallo(); // Ausgabe: Hallo, ich bin ein Fiat!

// Vererbung des Prototypen Auto als neuer Prototyp Kleinwagen
function Kleinwagen(Marke)
{
    // Eigenschaften Vererbung
    Auto.call(this, Marke);
};

// Erstellung eines neuen Objekts Kleinwagen anhand des Prototypen Auto
Kleinwagen.prototype = Object.create(Auto.prototype);

// Instanziierung des Prototypen Kleinwagen
Kleinwagen.prototype.constructor = Kleinwagen;

// Ersetzen der Funktion sagHallo des Prototypen Auto
Kleinwagen.prototype.sagHallo = function(){
    console.log('Hallo, ich bin ein Kleinwagen ' + this.Marke + '!');
};

// Instanziierung des Prototypen Kleinwagen als Kleinwagen1
var Kleinwagen1 = new Kleinwagen('Fiat 500');

// Funktionsaufruf der neuen Funktion sagHallo
Kleinwagen1.sagHallo(); // Ausgabe: Hallo ich bin ein Kleinwagen Fiat 500!

// Der instanceof-Operator prüft die Anwesenheit des constructor.prototype in der Prototypenkette eines Objekts (Kleinwagen1 und Auto).
console.log(Kleinwagen1 instanceof Auto);

</script>

Eine gute Anlaufstelle für Javascript ist das Mozilla Developer Network (developer.mozilla.org/de/docs/Web/JavaScript) und die entsprechende ECMA-Script-Sprachdefinition (ecma-international.org/ecma-262/7.0/index.html

Objektorientierte Programmierung – Prototypenbasierte Programmierung

Prototypenbasierte Programmierung beschreibt klassenloses objektorientiertes Programmieren. Die Vererbung wird über das Dekorieren von Objekten erreicht – Prototypen. Dieses Modell wird als klassenlose/prototyporientierte/prototypenbasierte/instanzorientierte Programmierung bezeichnet.

Prototypenbasierte Programmierung am Beispiel Javascript

<script>

// Prototyp Auto wird erstellt  
function Auto(Marke) 
{
    this.Marke = Marke;
}

// Funktion für Prototyp wird erstellt
Auto.prototype.sagHallo = function()
{
    console.log('Hallo, ich bin ein ' + this.Marke + '!');
};

// Instanziierung des Prototypen Auto als Auto1 und Auto2
var Auto1 = new Auto('Hyundai');
var Auto2 = new Auto('Fiat');

// Funktionsaufruf durch die Instanzen
Auto1.sagHallo(); // Ausgabe: Hallo, ich bin ein Hyundai!
Auto2.sagHallo(); // Ausgabe: Hallo, ich bin ein Fiat!

// Vererbung des Prototypen Auto als neuer Prototyp Kleinwagen
function Kleinwagen(Marke)
{
    // Eigenschaften Vererbung
    Auto.call(this, Marke);
};

// Erstellung eines neuen Objekts Kleinwagen anhand des Prototypen Auto
Kleinwagen.prototype = Object.create(Auto.prototype);

// Instanziierung des Prototypen Kleinwagen
Kleinwagen.prototype.constructor = Kleinwagen;

// Ersetzen der Funktion sagHallo des Prototypen Auto
Kleinwagen.prototype.sagHallo = function(){
    console.log('Hallo, ich bin ein Kleinwagen ' + this.Marke + '!');
};

// Instanziierung des Prototypen Kleinwagen als Kleinwagen1
var Kleinwagen1 = new Kleinwagen('Fiat 500');

// Funktionsaufruf der neuen Funktion sagHallo
Kleinwagen1.sagHallo(); // Ausgabe: Hallo ich bin ein Kleinwagen Fiat 500!

// Der instanceof-Operator prüft die Anwesenheit des constructor.prototype in der Prototypenkette eines Objekts (Kleinwagen1 und Auto).
console.log(Kleinwagen1 instanceof Auto);

</script>

Eine gute Anlaufstelle für Javascript ist das Mozilla Developer Network (developer.mozilla.org/de/docs/Web/JavaScript) und die entsprechende ECMA-Script-Sprachdefinition (ecma-international.org/ecma-262/7.0/index.html

quill-rich-text-editor

Quill – RTE

Quill – Api Driven Rich Text Editor Über 10.000 Sterne auf GitHub und OpenSource.

GopherJS – Go als Javascript im Browser

Zitat: „GopherJS compiles Go code (golang.org) to pure JavaScript code. Its main purpose is to give you the opportunity to write front-end code in Go which will still run in all browsers. Give GopherJS a try on the GopherJS Playground.“

>>> GopherJS <<<

Eloquent Javascript

FIAE – Buchtipp – Eloquent Javascript

Javascript ist wahrscheinlich die wichtigste Programmiersprache im Bereich Web-Programmierung. >>> Hier <<< gibt es das Buch Eloquent Javascript für den Einstieg in die Sprache Javascript als kostenloses Online-Buch.

Fuse.js

Fuzzy-Suche in Javascript – Fuse.js

Fuse.js

Als „FuzzySearch“ bezeichnet man eine unscharfe Suche in gegebenen Datensätzen. Man kann zum Beispiel mit der Eingabe Esen nach Essen suchen, oder mit der Eingabe Esse, oder mit der Eingabe Essn, oder mit der Eingabe…

Kurz und knapp: Mit Hilfe von diversen Algorithmen wird eine gewisse Fehlertoleranz bei der Eingabe der Suchbegriffe beachtet und es werden trotzdem wertvolle Treffer gefunden. Fuse.js bildet dies wunderbar in Javascript ab.

ConstructrCMS – Ausgabe komprimierter Internetseiten

Mit der neuen Version von heute, sind die Optionen:

– CSS komprimieren (betrifft das CSS der Seiteneigenschaften)
– Javascript komprimieren (betrifft das Javascript der Seiteneigenschaften)
– HTML komprimieren

standardmäßig eingeschaltet. Ein zusätzlicher HTML5-Compressor für das Entfernen nicht mehr benötigter Ende-Parameter bei diversen HTML-Elementen, ist standardmäßig deaktiviert – kann aber über eine kleine Änderung in der ROOT/index.php aktiviert werden – einfach die Kommentare in der index.php-Datei beachten.

Wenn man also – im Idealfall – das benötigte CSS und Javascript beim anlegen einer Seite eingetragen hat – oder selbstverständlich auch später hinzugefügt hat – wird die Ausgabe vollständig bereinigt und komprimiert ausgegeben. Die eingaben werden zur einfachen späteren Bearbeitung selbstverständlich nicht komprimiert. Ist das ConstructrCMS-Cache-.System aktiviert, wird die komprimierte Ausgabe in die entsprechende Cache-Datei geschrieben.

Sollten Probleme bei der Ausgabe auffallen, kann die Komprimieren auch vollständig in der ROOT/index.php deaktiviert werden (siehe oben).

http://spiel.phaziz.com/

Javascript Spiel „Zahlenpaare suchen“

Repository: https://github.com/phaziz/MathingNumbersGame
Demo: http://spiel.phaziz.com

Ich wünsche viel Vergnügen beim Spiel!

Permalink
8. Februar 2015
CSSGitHubHTML5JavascriptProgrammierung
Animsition - A simple and easy jQuery plugin for CSS animated page transitions.

Animsition

Javascript Animation + CSS Transistion = Animsition. Aktuell 58 nette Effekte für animierte Seitenübergänge per Javascript und CSS.

Quelle Beitragsbild: Animsition Homepage.

ConstructrCMS 1.04.0

Constructr CMS

Constructr CMS

1 2