Skip to content

Commit 2c134a9

Browse files
mmatczak-cgmmatczak-cg
committed
ES2015
1 parent 19e55ab commit 2c134a9

File tree

3 files changed

+183
-1
lines changed

3 files changed

+183
-1
lines changed

‎index.html‎

Lines changed: 183 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h3>Revolution in Web</h3>
2525
<section data-background-color="var(--secondary-color)">
2626
<h1 style="font-size: 3em; margin-bottom: -0.25em;" class="fallbackColor" >Just</h1>
2727
<h1 style="font-size: 4.5em; margin-bottom: -0.25em;" class="primaryColor" >like</h1>
28-
<h1 style="font-size: 5em;"class="flippedColor" >that</h1>
28+
<h1 style="font-size: 5em;" class="flippedColor" >that</h1>
2929
</section>
3030

3131
<section>
@@ -41,6 +41,188 @@ <h3>Declaring and using variables</h3>
4141
</code></pre>
4242
</section>
4343

44+
<section>
45+
<img src="src/img/js-logo-small.png">
46+
<h1 style="font-size: 4.5em; margin-bottom: -0.25em;" class="primaryColor" >What's</h1>
47+
<h1 style="font-size: 3em; margin-bottom: -0.25em;" class="fallbackColor" >new?</h1>
48+
</section>
49+
<section data-background-color="var(--secondary-color)">
50+
<h1 style="font-size: 3em; margin-bottom: -0.25em;" class="fallbackColor">We have</h1>
51+
<h1 style="font-size: 3.5em; text-transform: none" class="flippedColor" >ECMAScript 2015!</h1>
52+
<h1 style="font-size: 1.5em; margin-bottom: -0.25em; text-transform: none" class="primaryColor" >Let's go through a few of its highlights...</h1>
53+
</section>
54+
<section>
55+
<section>
56+
<h3>ES2015 Classes</h3>
57+
<pre><code class="javascript" data-trim data-noescape>
58+
class Shape {
59+
constructor(x, y) {
60+
this.move(x, y);
61+
}
62+
move(x, y) {
63+
this.x = x;
64+
this.y = y;
65+
}
66+
}
67+
class Rectangle extends Shape {
68+
constructor(x, y, width, height) {
69+
super(x, y);
70+
this.width = width;
71+
this.height = height;
72+
}
73+
}
74+
</code></pre>
75+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
76+
77+
</section>
78+
<section>
79+
<h3>ES5 Constructor Functions and Prototypal Inheritance</h3>
80+
<pre><code class="javascript" data-trim data-noescape>
81+
var Shape = function (x, y) {
82+
this.move(x, y);
83+
};
84+
Shape.prototype.move = function (x, y) {
85+
this.x = x;
86+
this.y = y;
87+
};
88+
var Rectangle = function (width, height) {
89+
this.width = width;
90+
this.height = height;
91+
};
92+
Rectangle.prototype = new Shape(1, 5);
93+
var smallRectangle = new Rectangle(10, 20);
94+
</code></pre>
95+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
96+
97+
</section>
98+
</section>
99+
100+
<section>
101+
<section>
102+
<h3>ES2015 Arrow Functions / Lexical <span style="font-family: monospace">this</span></h3>
103+
<pre><code class="javascript" data-trim data-noescape>
104+
class Classroom {
105+
constructor() {
106+
this.students = [
107+
{name: 'Joe', isMyFriend: false},
108+
{name: 'Eric', isMyFriend: true}];
109+
this.anyFriendThere = false;
110+
}
111+
112+
checkIfAnyFriendThere() {
113+
this.students.forEach((student) => {
114+
if (student.isMyFriend) {
115+
this.anyFriendThere = true;
116+
}
117+
});
118+
}
119+
}
120+
</code></pre>
121+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
122+
123+
</section>
124+
<section>
125+
<h3>ES5 <span style="font-family: monospace">bind()</span></h3>
126+
<pre><code class="javascript" data-trim data-noescape>
127+
var classroom = {
128+
students: [
129+
{name: 'Joe', isMyFriend: false},
130+
{name: 'Eric', isMyFriend: true}],
131+
anyFriendThere: false,
132+
133+
checkIfAnyFriendThere: function () {
134+
this.students.forEach(function (student) {
135+
if (student.isMyFriend) {
136+
this.anyFriendThere = true;
137+
}
138+
}.bind(this)); // binds this to the function context
139+
}
140+
};
141+
</code></pre>
142+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
143+
144+
</section>
145+
<section>
146+
<img src="src/img/ben-halpern-tweet.png">
147+
</section>
148+
</section>
149+
<section>
150+
<section>
151+
<h3>ES2015 Promises</h3>
152+
<pre><code class="javascript" data-trim data-noescape>
153+
let sayHello = function (name) {
154+
return new Promise(function (resolve, reject) {
155+
setTimeout(() => resolve(`Hello ${name}`), 1000);
156+
});
157+
};
158+
159+
sayHello('Joe')
160+
.then((helloToJoe) => {
161+
console.log(`Someone says: ${helloToJoe}`);
162+
return sayHello('Eric');
163+
})
164+
.then((helloToEric) => {
165+
console.log(`Someone says: ${helloToEric}`);
166+
});
167+
</code></pre>
168+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
169+
170+
</section>
171+
<section>
172+
<h3>ES5 callbacks</h3>
173+
<pre><code class="javascript" data-trim data-noescape>
174+
var sayHello = function (name, onSuccess) {
175+
setTimeout(function () {
176+
onSuccess('Hello ' + name);
177+
}, 1000);
178+
};
179+
180+
sayHello('Joe', function (helloToJoe) {
181+
console.log('Someone says: ' + helloToJoe);
182+
sayHello('Eric', function (helloToEric) {
183+
console.log('Someone says: ' + helloToEric);
184+
});
185+
});
186+
</code></pre>
187+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
188+
189+
</section>
190+
</section>
191+
<section>
192+
<section>
193+
<h3>ES2015 Module Exports / Imports</h3>
194+
<pre><code class="javascript" data-trim data-noescape>
195+
// greeter.js
196+
export function sayHelloTo(name) {
197+
return `Hello ${name}`;
198+
}
199+
200+
// my-code.js
201+
import {sayHelloTo} from './greeter';
202+
203+
console.log(sayHelloTo('Joe'));
204+
</code></pre>
205+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
206+
207+
</section>
208+
<section>
209+
<h3>ES5 Namespace Pattern</h3>
210+
<pre><code class="javascript" data-trim data-noescape>
211+
// greeter.js
212+
var myNamespace = {};
213+
myNamespace.sayHelloTo = function (name) {
214+
return `Hello ${name}`;
215+
};
216+
217+
// my-code.js
218+
console.log(myNamespace.sayHelloTo('Joe'));
219+
</code></pre>
220+
<a href="http://es6-features.org/" style="font-size: 0.5em;" target="_blank">Code examples from http://es6-features.org/</a>
221+
222+
</section>
223+
</section>
224+
225+
44226
</div>
45227
</div>
46228

‎src/img/ben-halpern-tweet.png‎

115 KB
Loading

‎src/img/js-logo-small.png‎

4.12 KB
Loading

0 commit comments

Comments
 (0)