JavaScript ES6 Template Strings

Mit ES6/ES2015 ist es nun möglich Strings mit Variablen zu definieren. Die Variablen müssen nu nicht mehr mit dem + an den richtigen Stellen in den String gekettet werden, wobei das + in JavaScript auch kein eindeutiger Verkettungsoperator wie . in PHP ist, sondern auch das arithmetische Plus.

Mit den ES6 Templates in JavaScript kann man definierte Variablen durch ihren Namen mit folgender Syntax verwenden: ${variablenName}.

„JavaScript ES6 Template Strings“ weiterlesen

JavaScript ES6/ES2015 Features

ES6 oder ES2015 ist die Version der JavaScriptspezifikation ECMAScript, wir nennen es meist einfach JavaScript.

Mit der nächsten Version kommen eine ganze Menge neue Features in die Sprache und ich versuche hier einen kleinen Überblick zu präsentieren. Die Funktionen werden nach und nach von den verschiedenen Browserherstellern implementiert, also Mozilla, Apple, Google und Microsoft.

Wenn ihr das alles auch gerne auf Englisch und sehr ausführlich lesen wollt, schaut euch doch diesen Artikel an: ES6 Overview in 350 Bullet Points | PonyFoo.

JavaScript ES6 Features

Zu den Posts über JavaScript ES6

Weitere Infos zu ES6/ES2015

JavaScript Basics: If, Else und Switch

Dieser Artikel ist teil der JavaScript Basics – Tutorials für Anfänger Serie.
If und else sind Schlüsselworte in JavaScript und gefühlt jeder anderen Programmiersprache dieser Welt. Mit diesen prüft man generell ob etwas vorhanden ist oder einem bestimmten Wert entspricht, damit man je nach Ausgangsmöglichkeit dieser Prüfung, das Script dem entsprechend weiter ausführen kann.

„JavaScript Basics: If, Else und Switch“ weiterlesen

50 Shades of Grey in JavaScript und CSS

50-shades-of-grey-gray-dot-js

Das folgende JavaScript erstellt 50 HTML Elemente in verschiedenen Grautönen. The only and only true 50 shades of grey für Webentwickler 😉

Die CSS Farbe wird für den Hintergrund festgelegt, im RGB Format. Wer es ausprobieren möchte kann im Browser einfach die Konsole aufmachen und es hineinkopieren. CTRL+SHIFT+J macht diese in Chrome auf.

var colour = '';
for (var i = 250; i > 0; i = i - 5) {
 colour = 'background-color: rgb(' + i + ',' + i + ',' + i + ')';
 console.log(colour);
 document.write('<div style="float: left;margin: 5px; width:90px;height:30px;' + colour+ '"></div>');
}

Wenn ihr den Code verändern wollt, forkt doch meinen gist.

Mal im Ernst, der folgende Artikel fasst das Problem, dass ich mit 50 Shades of Grey habe gut zusammen: Why You Should Talk To Your Kids About ’50 Shades Of Grey’