Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated class 1 #1

Open
wants to merge 18 commits into
base: gh-pages
Choose a base branch
from
Open

Updated class 1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
37d4373
removed some slides and changed the history slide
Apr 11, 2018
3877377
Merge pull request #1 from mariyati-github/edits
mariyati-github Apr 11, 2018
34aab37
added back optional exercise, added back contract vs implementation p…
Apr 11, 2018
5a80b09
fixed footer, moved classes into day 1
Apr 11, 2018
2aca45e
fixed formatting
Apr 11, 2018
6ca2ed7
added an optional activity at the end, removed a line of explanation…
Apr 11, 2018
d8d524e
removed scope slide
Apr 12, 2018
aa8b416
added back scopes and variables section
Apr 12, 2018
a28c0ef
changed title of section on var
Apr 12, 2018
c931d03
updated codepen link
Apr 12, 2018
7b0921c
modified codepen link
Apr 13, 2018
bb359ae
modified codepen link
Apr 13, 2018
3f0b2e5
various updates to class1
Apr 18, 2018
4359b9f
changing block scope slide and course title
Apr 18, 2018
0f504e8
updated title
May 9, 2018
554f413
fixed title
May 9, 2018
0e4ae3b
changed slides for let and const
May 15, 2018
7a53382
update class 1
May 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
1,349 changes: 892 additions & 457 deletions class1.html
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions class2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
<!-- Opening -->
<section class="small">
<h1>Getting Started with ES6 and ES7 JavaScript</h1>
<img src="dist/img/es6-gdi.jpg" alt="ES6 and ES7 Intro Image" class="noborder"/>
<h2 class="green">Class 2</h2>
<img src="dist/img/circle-gdi-logo.png" alt="GDI Logo" class="noborder"/>
<h2>Class 2</h2>
</section>

<section>
Expand Down Expand Up @@ -1503,7 +1503,6 @@ <h2>Questions</h2>
</div>
<footer>
<div class="copyright">
View Slides at <a href="http://tiny.cc/gdies6">tiny.cc/gdies6</a> &nbsp; - &nbsp;
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
Expand Down
72 changes: 2 additions & 70 deletions class3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,15 @@
<!-- Opening -->
<section class="small">
<h1>Getting Started with ES6 and ES7 JavaScript</h1>
<img src="dist/img/es6-gdi.jpg" alt="ES6 and ES7 Intro Image" class="noborder"/>
<h2 class="green">Class 3</h2>
<img src="dist/img/circle-gdi-logo.png" alt="GDI Logo" class="noborder"/>
<h2>Class 3</h2>
</section>

<section>
<h2>Today's Topics</h2>
<ol>
<li>Review at-home challenges from last class</li>
<li>Function Parameters</li>
<li>Object Syntax</li>
<li>Destructuring Objects</li>
<li>Destructuring Arrays</li>
</ol>
Expand Down Expand Up @@ -451,72 +450,6 @@ <h3>Activity 2</h3>
</div>
</section>

<section data-background="#f05b62">
<h1 style="color: #fafafa;font-size:3.7em;">Object Syntax</h1>
<aside class="notes">ES6 has a few minor changes to make code more understandable/easy-to-read</aside>
</section>

<section>
<h2>Property Initializer Shorthand</h2>
<p>When an object property name is the same as the local variable name, you can include the name without a colon and value</p>
<div class="clear small">
<div class="halfblock fragment">
<h3 class="green underlined">ES5:</h3>
<pre><code class="javascript">function saveData(url, data){
$.ajax({ method: 'POST', url: url, data: data });
}</code></pre>
<p class="right small fragment">becomes</p>
</div>
<div class="halfblock fragment">
<h3 class="green underlined">ES6:</h3>
<pre><code class="javascript">function saveData(url, data){
$.ajax({ url, data, method: 'POST' });
}</code></pre>
</div>
</div>
<p class="fragment">Sometimes referred to as <span class="green">enhanced literal notation</span></p>
<aside class="notes">Convention is to place shorthanded properties at beginning for readability. This example uses jQuery, but you don't need to know it; it's just an example.</aside>
</section>

<section>
<h2>Concise methods</h2>
<p class="fragment">Object methods no longer need <code>: function</code></p>
<div class="clear">
<div class="halfblock fragment">
<h3 class="green underlined">ES5:</h3>
<pre><code class="javascript" contenteditable>var dog = {
name: 'Boo',
bark: function() {
console.log('yip!');
}
};
dog.bark(); // yip!</code></pre>
<p class="right small fragment">becomes</p>
</div>
<div class="halfblock fragment">
<h3 class="green underlined">ES6:</h3>
<pre><code class="javascript">const dog = {
name: 'Boo',
bark() {
console.log('yip!');
}
};
dog.bark(); // yip!</code></pre>
</div>
</div>
<aside class="notes">Reformat ES5 version in front of students</aside>
</section>

<section class="activity" data-background="rgb(6, 116, 123)">
<h2>Activity</h2>
<h3>Using Enhanced Object Syntax</h3>

<p data-height="265" data-theme-id="0" data-slug-hash="OgJOzd" data-default-tab="js" data-user="anythingcodes" data-embed-version="2" data-pen-title="Object Syntax" class="codepen">See the Pen <a href="https://codepen.io/anythingcodes/pen/OgJOzd/">Object Syntax</a> by Liz Shaw (<a href="https://codepen.io/anythingcodes">@anythingcodes</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<a class="solution solution__lesson-3" href="https://codepen.io/anythingcodes/pen/awbVqW?editors=0012" target="_blank">View Solution</a>

</section>

<section data-background="#f05b62">
<h1 style="color: #fafafa;font-size:3.7em;">Destructuring Objects</h1>
</section>
Expand Down Expand Up @@ -881,7 +814,6 @@ <h2>Questions</h2>
</div>
<footer>
<div class="copyright">
View Slides at <a href="http://tiny.cc/gdies6">tiny.cc/gdies6</a> &nbsp; - &nbsp;
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
Expand Down
107 changes: 2 additions & 105 deletions class4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
<!-- Opening -->
<section class="small">
<h1>Getting Started with ES6 and ES7 JavaScript</h1>
<img src="dist/img/es6-gdi.jpg" alt="ES6 and ES7 Intro Image" class="noborder"/>
<h2 class="green">Class 4</h2>
<img src="dist/img/circle-gdi-logo.png" alt="GDI Logo" class="noborder"/>
<h2>Class 4</h2>
</section>

<section>
Expand All @@ -65,7 +65,6 @@ <h2>Today's Topics</h2>
<li>Generator Functions</li>
<li>Iterables</li>
<li>Sets and Maps</li>
<li>Classes</li>
<li>Encapsulating Code with Modules</li>
<li>Transpiling Setup</li>
<li>Additional Resources</li>
Expand Down Expand Up @@ -797,107 +796,6 @@ <h2>Built-In Iterators</h2>
</div>
</section>

<section data-background="#f05b62">
<h1 style="color: #fafafa;font-size:3.7em;">Classes</h1>
</section>

<section>
<h2>Classes</h2>
<div class="clear">
<div class="halfblock fragment">
<h3 class="green underlined">ES5:</h3>
<pre class="small"><code class="javascript">function Vehicle(type) {
this.type = type;
}

Vehicle.prototype.logType = function() {
console.log(this.type);
};

var car = new Vehicle('car');
car.logType(); // 'car'

console.log(car instanceof Vehicle); // true
console.log(car instanceof Object); // true</code></pre>
<p class="small fragment">called <span class="blue">"creating a custom type"</span></p>
</div>
<div class="halfblock fragment">
<h3 class="green underlined">ES6:</h3>
<pre class="small"><code class="javascript">class Vehicle {
constructor(type) {
this.type = type;
}

logType() {
console.log(this.type);
}
}
const car = new Vehicle('car');
car.logType(); // 'car'

console.log(car instanceof Vehicle); // true
console.log(car instanceof Object); // true</code></pre>
</div>
</div>
<p>&nbsp;</p>
<p class="small fragment green info">You don't need commas between the elements of a class</p>

<aside class="notes">In ES5, we only had class-like structures. Involved creating a constructor and assigning methods to the constructor's prototype, an approach commonly referred to as creating a custom type. Why use classes?
<ul>
<li>Class declarations, unlike function declarations, are not <span class="orange">hoisted</span>; they behave like <code>let</code> declarations</li>
<li>All code inside class declarations runs in strict mode automatically</li>
<li>Calling the class constructor without <code>new</code> throws an error</li>
<li>Attempting to overwrite the class name within a class method throws an error</li>
</ul>
</aside>
</section>

<section>
<h2>Derived Classes</h2>
<p class="fragment small"><span class="blue">Derived classes</span>: Classes that inherit from other classes</p>
<p class="fragment small">Within the derived class's <code>class {}</code> definition, use the <code>extends</code> keyword to specify the base class. Then access the base class constructor by calling <code>super()</code>.</p>
<pre class="fragment small"><code class="javascript">class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}

getArea() {
return this.length * this.width;
}
}</code></pre>
<pre class="fragment small"><code class="javascript">class Square extends Rectangle {
constructor(length) {
super(length, length); // calls the base class constructor
}
}

const square = new Square(5);
console.log(square.getArea()); // 25</code></pre>


<aside class="notes">
Inheritance -- no true object inheritance, but there is prototypal inheritance. If you ask 5 different engineers how it works, you’ll get 5 different answers. This is ES6’s solution to prototypal inheritance. Whenever you use a class, under the hood, you’re still using prototypal inheritance.
</aside>
</section>

<section class="activity" data-background="rgb(6, 116, 123)">
<h2>Activity</h2>
<p>Classes and Derived Classes</p>
<div class="clear">
<div class="halfblock" style="min-height:265px">
<h3>Activity 1</h3>
<p data-height="265" data-theme-id="0" data-slug-hash="WOwEMY" data-default-tab="js" data-user="anythingcodes" data-embed-version="2" data-pen-title="Classes" class="codepen">See the Pen <a href="https://codepen.io/anythingcodes/pen/WOwEMY/">Classes</a> by Liz Shaw (<a href="https://codepen.io/anythingcodes">@anythingcodes</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<p><a href="https://codepen.io/anythingcodes/pen/vZGJRJ?editors=0011" target="_blank" class="solution solution__lesson-4">View Solution</a></p>
</div>
<div class="halfblock" style="min-height:265px">
<h3>Activity 2</h3>
<p data-height="265" data-theme-id="0" data-slug-hash="EXKyOJ" data-default-tab="js" data-user="anythingcodes" data-embed-version="2" data-pen-title="Shop Activity - Classes and Derived Classes" class="codepen">See the Pen <a href="https://codepen.io/anythingcodes/pen/EXKyOJ/">Shop Activity - Classes and Derived Classes</a> by Liz Shaw (<a href="https://codepen.io/anythingcodes">@anythingcodes</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<a href="https://codepen.io/anythingcodes/pen/YQqWdw?editors=0010" target="_blank" class="solution solution__lesson-4">View Solution</a>
</div>
</div>
</section>

<section data-background="#f05b62">
<h1 style="color: #fafafa;font-size:3.7em;">Encapsulating Code with Modules</h1>
</section>
Expand Down Expand Up @@ -1037,7 +935,6 @@ <h1 style="color: #fafafa;">Thank you all!</h1>
</div>
<footer>
<div class="copyright">
View Slides at <a href="http://tiny.cc/gdies6">tiny.cc/gdies6</a> &nbsp; - &nbsp;
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
Expand Down
Binary file added dist/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added dist/img/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added dist/img/functional-scope.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/img/js-es5-scope-2.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/img/scope_diagram.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">

<title>Getting Started with ES6 and ES7 JavaScript</title>
<title>Modern JavaScript, ES6 and beyond</title>

<meta name="description" content="Materials and slides for a Girl Develop It ES6 JavaScript course. Includes ES7's minor additions.">
<meta name="author" content="Girl Develop It">
Expand Down Expand Up @@ -50,7 +50,7 @@
<div class="slides">
<!-- Opening -->
<section>
<h2>Getting Started with ES6 and ES7 JavaScript</h2>
<h2>Modern JavaScript, ES6 and beyond</h2>

<p>&nbsp;</p>

Expand All @@ -66,7 +66,7 @@ <h2>Getting Started with ES6 and ES7 JavaScript</h2>
</div>
<footer>
<div class="copyright">
Getting Started with ES6 and ES7 JavaScript
Modern JavaScript, ES6 and beyond
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
Expand Down