Last active
August 29, 2015 14:13
-
-
Save demonixis/53889cee5a73466e6d04 to your computer and use it in GitHub Desktop.
Thanks to Traceur, an ECMAScript 6 compiler, we can write ES6 code directly into a web page without compilation. Use it for testing purpose only because it's not very fast for middle and large applications.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>ECMAScript 6 - Demos</title> | |
| </head> | |
| <body> | |
| <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script> | |
| <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script> | |
| <script type="module"> | |
| // --- | |
| // --- Let keyword and object assignation. | |
| // --- | |
| let name = "John"; | |
| let age = 45; | |
| let obj = { name, age }; | |
| console.log(obj); | |
| // --- | |
| // --- Block scoped declaration. | |
| // --- | |
| function swap(x, y) { | |
| if (x != y) { | |
| var old = x; | |
| let tmp = x; | |
| x = y; | |
| y = tmp; | |
| } | |
| console.log(typeof(old)); | |
| console.log(typeof(tmp)); | |
| } | |
| swap(45, 12); | |
| // --- | |
| // --- Template string | |
| // --- | |
| let me = "Yannick"; | |
| let mAge = 29; | |
| let str = `I'm ${me} and I'm ${mAge} year old`; | |
| console.log(str); | |
| // --- | |
| // --- Default parameters | |
| // --- | |
| function add(x = 5, y = 5) { | |
| return x + y; | |
| } | |
| console.log(`Add without parameter ${add()}`); // Add without paramètre 10 | |
| console.log(`Add with x = 45: ${add(45)}`); // Add with x = 45: 50 | |
| console.log(`Add with x = 12 and y = 78: ${add(12, 78)}`); // Add with x = 12 and y = 78: 90 | |
| // --- | |
| // --- For-of loop | |
| // --- | |
| let languages = [ "C", "C++", "C#", "JavaScript" ]; | |
| for (let language of languages) { | |
| console.log(language); | |
| } | |
| for (let [index, language] of languages.entries()) { | |
| console.log(`Index: ${index} => Valeur: ${language}`); | |
| } | |
| // Index: 0 => Valeur: C | |
| // Index: 1 => Valeur: C++ | |
| // Index: 2 => Valeur: C# | |
| // Index: 3 => Valeur: JavaScript | |
| // --- | |
| // --- Arrow function | |
| // --- | |
| let values = [65, 7, 78, 1, 32, 66]; | |
| values.sort((a, b) => { return b - a }); | |
| console.log(values); // [78, 66, 65, 32, 7, 1] | |
| // --- | |
| // --- Classes | |
| // --- | |
| class Person { | |
| constructor(name, age) { | |
| this.name = name; | |
| this.age = age; | |
| } | |
| toString() { | |
| return `Hi I'm ${this.name} and I've ${this.age} year old`; | |
| } | |
| } | |
| let p = new Person("John", 18); | |
| console.log(p.toString()); // Hi I'm John and I've 18 year old | |
| // Extends keyword | |
| class Developer extends Person { | |
| constructor(name, age, language) { | |
| super(name, age); | |
| this.language = language; | |
| } | |
| toString() { | |
| return super.toString() + " :: I'm a " + this.language + " developer"; | |
| } | |
| } | |
| let d = new Developer("Yannick", 29, "JavaScript"); | |
| console.log(d.toString()); | |
| // Hi I'm Yannick and I've 29 year old :: I'm a JavaScript developer | |
| // --- | |
| // --- Object literals | |
| // --- | |
| let Utils = { | |
| start(element) { | |
| element.addEventListener("keydown", (event) => { | |
| this.display(event.type); | |
| }, false); | |
| }, | |
| display(message) { | |
| console.log(message); | |
| } | |
| }; | |
| Utils.start(document.body); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment