2853 lines
443 KiB
Plaintext
2853 lines
443 KiB
Plaintext
<!DOCTYPE html>
|
||
<html class="sl-root decks show " data-account="free">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"4fd2e9786b","applicationID":"1563900","transactionName":"cApZREQKWl9XFxZQVlAORB9FDVlE","queueTime":0,"applicationTime":37,"agent":""}</script>
|
||
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(){}function r(t){function e(t){return t&&t instanceof n?t:t?a(t,i,o):o()}function c(n,r,o){t&&t(n,r,o);for(var i=e(o),a=f(n),c=a.length,u=0;c>u;u++)a[u].apply(i,r);return i}function u(t,e){p[t]=f(t).concat(e)}function f(t){return p[t]||[]}function s(){return r(c)}var p={};return{on:u,emit:c,create:s,listeners:f,context:e,_events:p}}function o(){return new n}var i="nr@context",a=t("gos");e.exports=r()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],3:[function(t,e){function n(t){return function(){r(t,[(new Date).getTime()].concat(i(arguments)))}}var r=t("handle"),o=t(1),i=t(2);"undefined"==typeof window.newrelic&&(newrelic=window.NREUM);var a=["setPageViewName","addPageAction","setCustomAttribute","finished","addToTrace","inlineHit","noticeError"];o(a,function(t,e){window.NREUM[e]=n("api-"+e)}),e.exports=window.NREUM},{1:12,2:13,handle:"D5DuLP"}],gos:[function(t,e){e.exports=t("7eSDFh")},{}],"7eSDFh":[function(t,e){function n(t,e,n){if(r.call(t,e))return t[e];var o=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:o,writable:!0,enumerable:!1}),o}catch(i){}return t[e]=o,o}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],D5DuLP:[function(t,e){function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):void(r.q&&(r.q[t]||(r.q[t]=[]),r.q[t].push(e)))}var r=t("ee").create();e.exports=n,n.ee=r,r.q={}},{ee:"QJf3ax"}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],XL7HBI:[function(t,e){function n(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:i(t,o,function(){return r++})}var r=1,o="nr@id",i=t("gos");e.exports=n},{gos:"7eSDFh"}],id:[function(t,e){e.exports=t("XL7HBI")},{}],G9z0Bl:[function(t,e){function n(){if(!v++){var t=l.info=NREUM.info,e=f.getElementsByTagName("script")[0];if(t&&t.licenseKey&&t.applicationID&&e){c(p,function(e,n){t[e]||(t[e]=n)});var n="https"===s.split(":")[0]||t.sslForHttp;l.proto=n?"https://":"http://",a("mark",["onload",i()]);var r=f.createElement("script");r.src=l.proto+t.agent,e.parentNode.insertBefore(r,e)}}}function r(){"complete"===f.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),c=t(1),u=window,f=u.document;t(2);var s=(""+location).split("?")[0],p={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-852.min.js"},d=window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent),l=e.exports={offset:i(),origin:s,features:{},xhrWrappable:d};f.addEventListener?(f.addEventListener("DOMContentLoaded",o,!1),u.addEventListener("load",n,!1)):(f.attachEvent("onreadystatechange",r),u.attachEvent("onload",n)),a("mark",["firstbyte",i()]);var v=0},{1:12,2:3,handle:"D5DuLP"}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],12:[function(t,e){function n(t,e){var n=[],o="",i=0;for(o in t)r.call(t,o)&&(n[i]=e(o,t[o]),i+=1);return n}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],13:[function(t,e){function n(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(0>o?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=n},{}]},{},["G9z0Bl"]);</script>
|
||
|
||
<title>ECMAScript 2015 by David Leonard</title>
|
||
<meta name="description" content="An overview of ES6 features. " />
|
||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
|
||
<meta property="og:title" content="ECMAScript 2015 by David Leonard" />
|
||
<meta property="og:description" content="An overview of ES6 features. " />
|
||
<meta property="og:site_name" content="Slides" />
|
||
<meta property="og:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="http://slides.com/drksephy/ecmascript-2015" />
|
||
<meta property="fb:app_id" content="146002942236376" />
|
||
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||
<meta name="msapplication-tap-highlight" content="no" />
|
||
|
||
<link rel="manifest" href="/manifest.json">
|
||
|
||
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic" rel="stylesheet" type="text/css" data-application-font="opensans">
|
||
|
||
<link href="//assets.slid.es/assets/slides/slides-1df814f963530a8557bab503c81c1049.css" media="all" rel="stylesheet" />
|
||
<link href="//assets.slid.es/assets/application-c398590fe521aefe107f633ca035bc1f.css" media="all" rel="stylesheet" />
|
||
<link href="//assets.slid.es/assets/deck-v2-df3848b455a4a84f0b5dd323b4939351.css" media="all" rel="stylesheet" />
|
||
|
||
|
||
|
||
<style id="user-css-output" type="text/css"></style>
|
||
|
||
<meta content="authenticity_token" name="csrf-param" />
|
||
<meta content="kHnorC3XjvYlj2MgIqJyTaEyS+ThXLyj9/ziPIOT+gY=" name="csrf-token" />
|
||
<script type="text/javascript">
|
||
if( !/dnt=1/.test( window.location.search ) ) {
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-39670045-1', 'auto');
|
||
ga('send', 'pageview');
|
||
|
||
}
|
||
</script>
|
||
<!--[if lt IE 9]>
|
||
<script src="//assets.slid.es/assets/html5shiv-b51d49ab0e89834a02ffce4a59905afb.js"></script>
|
||
<![endif]-->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@Slides">
|
||
<meta name="twitter:title" content="ECMAScript 2015">
|
||
<meta name="twitter:description" content="An overview of ES6 features. ">
|
||
<meta name="twitter:image" content="https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="container" class="container">
|
||
<header class="global-header show-on-scroll">
|
||
<div class="wrapper">
|
||
<h1 class="logo-animation">
|
||
<a class="symbol" href="/">
|
||
<div class="box-1"></div>
|
||
<div class="box-2"></div>
|
||
<div class="box-3"></div>
|
||
</a>
|
||
<a class="word" href="/"></a>
|
||
</h1>
|
||
<ul class="nav nav-long">
|
||
<li class="nav-item" data-page-id="home/explore">
|
||
<a class="nav-item-anchor" href="/explore"><span class="nav-item-label">Explore</span></a>
|
||
</li>
|
||
<li class="nav-item" data-page-id="static/features">
|
||
<a class="nav-item-anchor" href="/features"><span class="nav-item-label">Features</span></a>
|
||
</li>
|
||
<li class="nav-item" data-page-id="static/pricing">
|
||
<a class="nav-item-anchor" href="/pricing?h=1"><span class="nav-item-label">Pricing</span></a>
|
||
</li>
|
||
<li class="nav-item-divider"></li>
|
||
<li class="nav-item" data-page-id="sessions/new">
|
||
<a class="nav-item-anchor" href="/users/sign_in"><span class="nav-item-label">Log in</span></a>
|
||
</li>
|
||
<li class="nav-item nav-item-highlighted nav-item-secondary" data-page-id="static/pricing">
|
||
<a class="nav-item-anchor" href="/pricing"><span class="nav-item-label">Sign up</span></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<div id="main" class="main" role="main">
|
||
|
||
|
||
|
||
|
||
|
||
<div class="marquee">
|
||
|
||
<div class="reveal-frame">
|
||
<div class="reveal-viewport theme-font-josefine theme-color-white-blue">
|
||
<div class="reveal">
|
||
<div class="slides">
|
||
<section class="has-light-background" data-background-color="#ffffff" data-id="b6f5e4a6616d9dbe85f40d8fc34b919e"><div class="sl-block" data-block-type="text" style="width: 680px; left: 280px; top: 339px; height: auto;" data-block-id="6bac341cc91bd579f7e9c40bc3a741a0">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:0.7em">ECMAScript 2015 : Deep Dive</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 428px; background: linear-gradient(180deg,#C0C0C0, #FFFE59);" data-block-id="d5f8d6b84d00758ae35cddd5ec6b2852">
|
||
<div class="sl-block-content" data-line-x1="-381" data-line-y1="233" data-line-x2="579" data-line-y2="233" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="-381 233 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-381" y1="233" x2="579" y2="233"></line><line stroke="#fbde34" stroke-width="4" x1="-381" y1="233" x2="579" y2="233"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 304px; height: 152px; left: 328px; top: 0px;" data-block-id="c6ff967b28ea37960be86a16e583835f">
|
||
<div class="sl-block-content" style="z-index: 12;">
|
||
<img data-natural-width="640" data-natural-height="320" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2134382/nodejs.png">
|
||
</div>
|
||
</div></section><section data-id="3dc27fe74e29cfbc9684bc7f7540f6c3"><div class="sl-block" data-block-type="text" style="width: 320px; left: 116px; top: 28px; height: auto;" data-block-id="9cc3407d4388ca2eedfd15a6c30edba2">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1 style="text-align: left;">
|
||
<span style="font-size:0.7em">David Leonard</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6121878ca7c80c59806355b65629bc44">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 389px; left: 116px; top: 125px;" data-block-id="390551b2a2ae046ccd9e695c3805d2b4">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<p style="text-align:left">
|
||
<a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 162px;" data-block-id="49d9588ced1a803e6acf000fe609c372">
|
||
<div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="119" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="376" height="1" viewbox="-257 -65 376 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="119" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="119" y2="-65"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 397px; left: 116px; top: 180px;" data-block-id="11df1e4eb1c577c28af02bd483de3bf3">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
|
||
<p style="text-align: left;">
|
||
<a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 116px; top: 218px;" data-block-id="84d353eb96e1d1ae9287923cf16b0807">
|
||
<div class="sl-block-content" data-line-x1="-257" data-line-y1="-65" data-line-x2="131" data-line-y2="-65" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="388" height="1" viewbox="-257 -65 388 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-257" y1="-65" x2="131" y2="-65"></line><line stroke="#fbde34" stroke-width="2" x1="-257" y1="-65" x2="131" y2="-65"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="width: 192px; left: 112px; top: 287px; height: auto;" data-block-id="7e8796317581c72c437c81763d85c923">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
|
||
<h2 style="text-align: left;">
|
||
<span style="font-size:0.7em">What I do:</span>
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 116px; top: 287px;" data-block-id="1ea78669ece760c504db7022cb9ae62d">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
|
||
<h3 class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
|
||
<ul>
|
||
<li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="0">
|
||
<h3>
|
||
<span style="font-size:0.7em;">
|
||
<span style="color:black">Grad Student at CCNY</span>
|
||
</span>
|
||
</h3>
|
||
</li>
|
||
<li class="fragment" style="color: rgb(251, 222, 52);" data-fragment-index="1">
|
||
<h3>
|
||
<span style="font-size:0.7em;">
|
||
<span style="color:black">Game Developer</span>
|
||
</span>
|
||
</h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52);">
|
||
<h3>
|
||
<span style="font-size:0.7em;">
|
||
<span style="color:black">Yahoo! Developer Network</span>
|
||
</span>
|
||
</h3>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 468px; height: 312px; left: 480px; top: 287px;" data-block-id="9e2dd8d98ed9dbfa0896fe39ee3f6ddf">
|
||
<div class="sl-block-content fragment" style="z-index: 19;" data-fragment-index="1">
|
||
<img data-natural-width="600" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2033478/out.gif">
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="debbb071bfa250994f43eaa769105442"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="d9ade49710598807d5f18fbdc8af7e5d">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Why ES6?</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5f019ae767fb36ad389282299854d187">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 372.689px; height: 541px; left: 121px; top: 128px;" data-block-id="9a8246451d25c3a186eda651c12c570e"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137383/part1.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 374px; height: 542.903px; left: 533px; top: 128px;" data-block-id="5ecf464d0c352b0f980af453e46d4362"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="620" data-natural-height="900" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137388/part2.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="adbd6d37902ab622c11e8acae6d9b696"><div class="sl-block" data-block-type="text" style="width: 247px; left: 102px; top: 22px; height: auto;" data-block-id="881b6764d82652dbc8063420baf916ed">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1>
|
||
<span style="font-size:52.5px; line-height:62.0455px">Deep Dive</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2a4decaa8a9376feb002d291e355551f">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 347px; left: 67px; top: 148px;" data-block-id="2d0688a70c089439514c44caeb102503">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; line-height: 0.91; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" data-has-line-height="" dir="ui">
|
||
<ul style="color:#fbde34;">
|
||
<li class="fragment" data-fragment-index="0">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Tooling</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="1">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Variables and Scoping</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="2">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Strings</span></span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="3">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Destructuring</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="4">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Parameter Handling</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="5">
|
||
<h3><span style="font-size:0.7em;"><span style="color: black; background-color: rgba(0, 0, 0, 0);">Arrow Functions</span></span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="6">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Classes</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="7">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Modules</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="8">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Generators</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="9">
|
||
<h3><span style="font-size:0.7em;"><span style="color:black">Promises</span> </span></h3>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="27ebb56bc8c0fd1e06159e16c2bb6ac5">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a8d1781c3df32ed71d229edf34b7a055"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 0px; top: 426px;" data-block-id="49b5d320b26271b2114a4b713aee1ca8"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 330px; left: 630px; top: 329px;" data-block-id="483b26bc1f85498f3f281babe0b2005b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:0.7em">Running ES6</span></h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c861a00000045ec203ed4a263fb62c34"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 80px; top: 0px;" data-block-id="b116ca2364853e5ab2b77e58b381dc31"><div class="sl-block-content" data-line-x1="20" data-line-y1="590" data-line-x2="20" data-line-y2="-110" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="20 -110 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="20" y1="590" x2="20" y2="-110"></line><line stroke="#fbde34" stroke-width="4" x1="20" y1="590" x2="20" y2="-110"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 234px; height: 234px; left: 108px; top: 51px;" data-block-id="89f52cfff0eaaffa9fa8c52c1f6819df"><div class="sl-block-content" style="z-index: 12;"><img data-natural-width="200" data-natural-height="200" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137410/babel.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202px; height: 192.677px; left: 108px; top: 339px;" data-block-id="810a7d6b1139cdf9fe504bb1a5047fa1"><div class="sl-block-content" style="z-index: 13;"><img data-natural-width="585" data-natural-height="558" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137412/traceur.svg"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 88.5px; height: 197.961px; left: 493px; top: 69px;" data-block-id="7ba8bfc836f4afb930738100df89b99a"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="228" data-natural-height="510" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137415/gulp-2x.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 202.632px; height: 234px; left: 493px; top: 319px;" data-block-id="b0f8ad26cb737296568bc701dcb31b51"><div class="sl-block-content" style="z-index: 15;"><img data-natural-width="562" data-natural-height="649" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137417/webpack.svg"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 205.556px; height: 230px; left: 742px; top: 53px;" data-block-id="94b25df1dc8f8753fc40237add5c43cf"><div class="sl-block-content" style="z-index: 16;"><img data-natural-width="185" data-natural-height="207" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137419/browserify.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 126px;" data-block-id="cc2a9514f2d709507568c76a7ffb5c92"><div class="sl-block-content" style="z-index: 17;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 625px; top: 126px;" data-block-id="a47e47ea022d3ae15a0a59b4f16440ca"><div class="sl-block-content" style="z-index: 18;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 83.2441px; height: 83px; left: 365px; top: 394px;" data-block-id="b7858b60dc26968cfd5a8c4a8b881e15"><div class="sl-block-content" style="z-index: 19;"><img data-natural-width="341" data-natural-height="340" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2137506/plusalpha.png"></div></div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="804f37fccaab0d593f2939846572b05b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section data-id="0184bfa587c486920d5205297dead000"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 948px; height: 509.442px; left: 6px; top: 120px;" data-block-id="148f0e067d34c244ce0744d2777366ca"><a class="sl-block-content" style="z-index: 11;" href="http://babeljs.io/repl/" target="_blank"><img data-natural-width="1431" data-natural-height="769" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149696/babel_repl.png"></a></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a944f162b0031b9ccf42b0ce44a1a8de"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b3ff8b7c4df781b3f21c5fc1898995d5"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 560px; left: 400px; top: 331px;" data-block-id="1d346f422690b3799fd4365f9a93dec2"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px">Variables and Scoping</span></h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="17182eadcfa3b04edce4b0519156ee24"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="400b36a4cf81029d746b54d522225a19">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1>
|
||
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ac4f215643cd203f1639a764bf669fc5">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 402px; left: 112px; top: 165px;" data-block-id="9b9c18a16a75589d6eb225307cbe593e">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13; color: rgb(17, 17, 17);" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c0c583666a90ca00b8473315026dcd26">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 220px; top: 264px;" data-block-id="2f80c2f8a8b2620f93f3cf67b2e136cd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 433px;" data-block-id="fe7b578fbfcdbc7faaffe3682e21565e"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="245.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 305px; top: 501px;" data-block-id="0b6037e3d5af7a06cb0abe378c1c4553"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 360px; height: 284.469px; left: 514px; top: 338px;" data-block-id="d02d32fd6eae938c79dd69e382efa738"><div class="sl-block-content fragment" style="z-index: 18;" data-fragment-index="2"><img data-natural-width="367" data-natural-height="290" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157338/cat2.png"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="e8bafd5180e6c0462c0f93eeff93b724"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
|
||
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f3826d03597a3af34cf254f04bf70de8"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="8fe70f18ecb71d04b149f0aa0583eb1a">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1>
|
||
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e728e4bb14146866d739e04cad05393">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="0bd2c0d29715a0350c108bfedd86ffa4">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> snack;
|
||
|
||
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2cb46b00e91d2a3eb19353a772322eec">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 298px;" data-block-id="36548dcddff9a1d63fbfd87b6be47cfd"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="213" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="113" height="1" viewbox="100 0 113 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="213.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 166px; top: 497px;" data-block-id="8266fd8d3a4c1faf1930baa527b3d618"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="268" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="168" height="1" viewbox="100 0 168 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="100.5" y1="0.5" x2="266.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(266,0) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 522px;" data-block-id="04a49881d08135746d38cb3224d3287e"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="42" data-line-y2="131" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="42" height="69" viewbox="0 131 42 69"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="41.5" y2="133.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(41,133) rotate(31.329)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 151px; left: 344px; top: 480px;" data-block-id="78c5e1cd83002e7d29a7dbcf1caaf9f6"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// undefined</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0eda9e19fb9874da4153b97581e3e711"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="edbae8922948c49ebcb9d82850f20c35">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1>
|
||
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="132e588ca3995813ed9187854daf33e4">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="613fca135a81c58fd1d062416a0f04f2">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4da95a72cdfe6461df5b7314e130e53a">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 408px; top: 181px;" data-block-id="6020c7eb642397a71f472ab077efe9ce"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 560px; top: 164px;" data-block-id="e39cb5866657b3acc3dd4a604185b6ba"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 501px; top: 350px;" data-block-id="ab32ec10e8d508ab69a9b3513153a744"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 654px; top: 333px;" data-block-id="407c59e5274755c1bd5a48eb045ecc8c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 465px;" data-block-id="d156fb8fb318f2beb1e8380ff09641d1"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 553px;" data-block-id="67f2b6e3a2c73e2333683fca3da3d522"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 159px; left: 462px; top: 536px;" data-block-id="bf12bcba3027ab7802b6ffcda951adf3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 270.75px; height: 300px; left: 646px; top: 315px;" data-block-id="6ae4eb14257d2eb877e17fe60e9ec45d"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="361" data-natural-height="400" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157336/cat1.png"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="d2345ffd5861917c8bf94718fcc7d203"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
|
||
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff"><div class="sl-block" data-block-type="text" style="width: 387px; left: 102px; top: 22px; height: auto;" data-block-id="727bfed16d22fbb03cb57522d1aec95d">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1>
|
||
<span style="font-size:52.5px; line-height:62.0455px">var vs. let / const</span>
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="76213ba32af8a5cb2ac8ffac4e04ca21">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 161px;" data-block-id="339d6025f4e2783effb983e4c02f3d5b">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getFood(food)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">if</span> <span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
let snack <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Friskies<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> snack;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
getFood<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">false</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5780017c00461041aa8c363a290d1b17">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 408px; top: 181px;" data-block-id="f96785ee10127c738db484670c4433a4"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 560px; top: 164px;" data-block-id="24657f676ef9f24f447d22aecea2780d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// A</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 501px; top: 350px;" data-block-id="1030a74d32c8717911e3f1d003928153"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 60px; left: 654px; top: 333px;" data-block-id="c3470c366f26a37aeba5b5e837b5346b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 160px; top: 465px;" data-block-id="23a3c5cd4c084440b6f720d822b7c967"><div class="sl-block-content fragment" data-line-x1="101" data-line-y1="0" data-line-x2="251" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="150" height="1" viewbox="101 0 150 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="101.5" y1="0.5" x2="251.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 310px; top: 553px;" data-block-id="5f2cf759e94ac1b7961dd0ac6c3caa6d"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="245" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="145" height="1" viewbox="100 0 145 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="245.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 159px; left: 462px; top: 536px;" data-block-id="40767c3cd6dda5844b3b78d60e56d812"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 'Meow Mix'</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="image" style="width: 382px; height: 191px; left: 590px; top: 462px;" data-block-id="d2f149e6d2c0e425d6d2c1280a547cb6"><div class="sl-block-content fragment" style="z-index: 22;" data-fragment-index="3"><img data-natural-width="390" data-natural-height="195" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157343/cat3.png"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 640px; top: 653px;" data-block-id="2f67a4c2af5fc52e4031297dbcbade49"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 23;" data-fragment-index="3">
|
||
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0794bc29e320c1b77a02fcb2231c0d6e"><div class="sl-block" data-block-type="text" style="width: 387px; left: 81px; top: 22px; height: auto;" data-block-id="1c9d7cb766ae1a490d5a3fc53eba1b6b">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">IIFE > Blocks</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a8b5290ebd708d1fa1b59f69898ab66">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 109px; top: 238px;" data-block-id="a1ab2a1fbdb4239d22111695697f3438">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 78px;" data-block-id="6f623c2f91f42a722bae4e49423f0b60"><div class="sl-block-content" data-line-x1="148" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="52" height="1" viewbox="148 0 52 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="148" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="148" y1="0" x2="200" y2="0"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="837c51aeec3617bce9159d8239a8e870">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 344px; top: 395px;" data-block-id="0d5de7d70bf3b2db66c471f2f0a539db"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 416px; top: 378px;" data-block-id="b3b6e7d4c3df6f6bb86f76b68a5db3fc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ed96e6abf71cffb46f9101991915765"><div class="sl-block" data-block-type="text" style="width: 387px; left: 80px; top: 22px; height: auto;" data-block-id="6ecb5d47caa60c95822eaa370104ad01">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">IIFE > Blocks</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5558e04fef6d49ba4cbc8b0675067eb2">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 402px; left: 119px; top: 195px;" data-block-id="18b0e02eeaf8898200717be79963e638">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-has-line-height="">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">{</span>
|
||
let food <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Meow Mix<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>food<span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 229px; top: 78px;" data-block-id="8f91b5832a509fe8d90d3a6f49341b31"><div class="sl-block-content" data-line-x1="155" data-line-y1="0" data-line-x2="200" data-line-y2="0" data-line-color="#000000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="45" height="1" viewbox="155 0 45 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="155" y1="0" x2="200" y2="0"></line><line stroke="#000000" stroke-width="2" x1="155" y1="0" x2="200" y2="0"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="225178376b2d5515b0b20f5f9ca5383b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 343px; top: 350px;" data-block-id="4b7b15f108dca537b07e02c061e60ec5"><div class="sl-block-content fragment" data-line-x1="100" data-line-y1="0" data-line-x2="172" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="line-arrow" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="1" viewbox="100 0 72 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="102.5" y1="0.5" x2="172.5" y2="0.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(102,0) rotate(90)" d="M -6.75 -6.75 L 0 0 L 6.75 -6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 219px; left: 421px; top: 333px;" data-block-id="79cef032cd6b0ecad6eccfbdb078983d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Reference Error</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="f1331acbbafa20b7b187f8a0fae57989"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="51e27ec7bed98e7f619820d107bd3e9d">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="040fec867c223da9cf27a41f9145b028">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 191px;" data-block-id="6ae77d277ade352c47d37513095bd2ba"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cefb5c8502feed7d0197d7d36c7b318e">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 428px;" data-block-id="d0a6a88793ff00ba195b8e6e63ddf0e7"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-98 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="5.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 428px;" data-block-id="71591801265092bd29b01a8822940cce"><div class="sl-block-content fragment" data-line-x1="-26.25" data-line-y1="78" data-line-x2="46" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="72" height="62" viewbox="-26 78 72 62"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><line stroke="#ff0000" stroke-width="3" x1="-25.5" y1="78.5" x2="43.5" y2="137.5"></line><polygon fill="#ff0000" transform="translate(43,137) rotate(130.634)" points="0,-4.5 4.5,4.5 -4.5,4.5"></polygon></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 524px; left: 392px; top: 467px;" data-block-id="8162a441fb30163bd43df4ceec5933d7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Cannot read property 'name' of undefined</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 359px;" data-block-id="1d0b96f8d49f30194ba4932e5f00bd8d"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="103" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="201" height="1" viewbox="-98 178 201 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="101.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(101,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 59.75px; left: 660px; top: 342px;" data-block-id="888b3dc8a35bbb12b54b690d78373ff3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="0">
|
||
<pre><font color="#93a1a1"><span style="font-size:19.5993px; line-height:21.3811px">// A</span></font></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 334px; top: 396px;" data-block-id="e2f736af1c0fe76d0025a9b68e43ab93"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="180" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 20;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="278" height="1" viewbox="-98 178 278 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="178.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(178,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 60px; left: 625px; top: 379px;" data-block-id="cf07954eafced2a1779d00d67119f683"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 21;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// B</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="24723272d9a750c7a038a91c162ee202">
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c37647f9fecc5c7af79aa5afd37912a1">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="9d232bb8193cf0a64c6cc91faca8f503"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> that <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">this</span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> that.name <span style="color:rgb(133, 153, 0)">+</span> character;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bcd464a00c8d31a0d1720619e5e8bd02">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 351px; top: 380px;" data-block-id="988eb7ad32d1aebc2277d588ffc5b0c6"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="191" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="289" height="1" viewbox="-98 178 289 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="189.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(189,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 164px; left: 647px; top: 363px;" data-block-id="64dee2bbcdb4a571ce2a90ba8da376ca"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Store this</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 282px; top: 461px;" data-block-id="e16be546ab8d18f166345207272dd8a1"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-48" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="50" height="1" viewbox="-98 178 50 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-47.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="dc914369e3f94a75340beec537f3cd75">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 17;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a812b83ce381f2e3350730844a1c7f0c">
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="af46097bf2d54c67e3ee1cfbf83ac8c8">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="ea686ff443cc8499b6c73dffd7f34a7f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
|
||
<span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8d523e8998a8e59acd96539435661aee">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 187px; top: 460px;" data-block-id="3b9b7a110f062ed5bfc80c7e799ca982"><div class="sl-block-content fragment" data-line-x1="-102.5" data-line-y1="178" data-line-x2="-49" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="53" height="1" viewbox="-102 178 53 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-101.5" y1="178.5" x2="-48.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d528c6df249833da2723abb2e20a2f9f">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="857332de28c87e8828c39595a1b3bc44">
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7f33024df9ce8913ac6769346d81822">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 191px;" data-block-id="d47208be2cc82f6236ac4a249e47e3cb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui"><pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>character)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character;
|
||
<span style="color:rgb(38, 139, 210)">}</span>.bind<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="34d1799f2e5a7e3e0e5d2e0d881a84d9">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 461px;" data-block-id="6f287c7e1c6e102cb43d3b12205a7257"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="21.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="120" height="1" viewbox="-98 178 120 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="22.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="1566c54963304c383225bbc18b712ef8">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 15;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Scoping</span></h1>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9bddc9ad3076515f61e62d655accf8bf"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="d9789299460946045ee4ba9a41c1ab3c">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b204b42ff02e2fb3e85144394c0b8d69">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1fa7452b0bc63060e723dd22f14b9a14">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 700px; left: 104px; top: 181px;" data-block-id="e69c1e8fdf43494b3ac53bde54d6ddfb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">prefixName</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>arr) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>character<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">+</span> character <span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 459px; top: 382px;" data-block-id="59bca867eec019a55c1ae4cc5a79d67e"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-63.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="-98 178 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-62.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="16533f573d91c9e1d2bc6dba3f405237"><div class="sl-block" data-block-type="text" style="width: 354px; left: 104px; top: 22px; height: auto;" data-block-id="48d61723a672437493c141547536d384">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Arrow Functions</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="266d9ee2293a0cc25cd0bb37c05452cd">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 104px; top: 398px;" data-block-id="9816e219e0f06fb675988563e62e586f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
<strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span>x <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> x <span style="color:rgb(133, 153, 0)">*</span> x<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 650px; left: 104px; top: 193px;" data-block-id="cc15f4070e6a1e0fa0578246aa0a47a1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> squares <span style="color:rgb(133, 153, 0)">=</span> arr.map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>x)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">*</span> x <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7b5881ac464fdebe9656e8a500448a22">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 235px;" data-block-id="0a11bf53dd6c28511d29b822ab02ad43"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 336px; top: 236px;" data-block-id="56f15986fe69dac3a95bafced6e86309"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Function Expression</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 421px; top: 472px;" data-block-id="d8c0789683c1410fafd91278d83a67fb"><div class="sl-block-content fragment" data-line-x1="-98.5" data-line-y1="178" data-line-x2="-2.5" data-line-y2="196" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="18" viewbox="-98 178 96 18"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><line stroke="#ff0000" stroke-width="3" x1="-97.5" y1="178.5" x2="-4.5" y2="196.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-5,196) rotate(100.62)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 95px; left: 523px; top: 472px;" data-block-id="53a34ea3a53e2b08a4af116f9876c70f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Terse </span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ac7a457574e4c7eb885889607e4efbea"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="bdec14621a47be385cdf364918b69dc9"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 188px; left: 772px; top: 331px;" data-block-id="8f9f3a3367ce03ce46fb0debd0d24bcb"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Strings</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="7e53596321f818264a67e9869bcda82e"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e28b835666a659231b2f167b5095d3d5"><div class="sl-block" data-block-type="text" style="width: 517.5px; left: 116px; top: 22px; height: auto;" data-block-id="2ea56db8e1ea62e2b34c740232304854">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">String.prototype.includes</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b0e54a9c063ec79bc161746ca2436197">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 684px; left: 116px; top: 160px;" data-block-id="1c6918c2627a4ef150e438a739a01eab">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.<span style="color:rgb(38, 139, 210)">indexOf</span><span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 748px; left: 116px; top: 420px;" data-block-id="06395e4a889a913184a28a546ff8601a">
|
||
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> string <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>food<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<strong>const</strong> substring <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>string.includes<span style="color:rgb(147, 161, 161)">(</span>substring<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c5c427fb01ac4221b8a3aead1bb0cb92">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 270px;" data-block-id="30ecb437474a3df8a54fafa581aa67e6"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="277" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="378" height="1" viewbox="-101 178 378 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="275.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(275,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 521px;" data-block-id="e84bdd1ab12f8b783f90219ccc7fff74"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="244" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="345" height="1" viewbox="-101 178 345 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="242.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(242,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 640px; top: 253px;" data-block-id="a55d5d0f3e7622e5fc222095c006cad7"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 266px; left: 608px; top: 504px;" data-block-id="0f069caa5926efa9e588c694136c7cde"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// true</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="64461d5278507fdcb3673f801a60f631"><div class="sl-block" data-block-type="text" style="width: 477px; left: 119px; top: 30px; height: auto;" data-block-id="cfafbe41488f9ea2c86b9ffa7fb24f10">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">String.prototype.repeat</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7e5dfce1d115993165d7b758fbd30b0b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 562px; left: 119px; top: 185px;" data-block-id="7df15975047c71b4e3f880a61eb62e68">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> repeat(string, count)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> strings <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
<span style="color:rgb(133, 153, 0)">while</span><span style="color:rgb(147, 161, 161)">(</span>strings.length <span style="color:rgb(133, 153, 0)"><</span> count<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
strings.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>string<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> strings.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 375px; left: 119px; top: 537px;" data-block-id="54ac51ea63f26c6c11b4e6ed208e99c4">
|
||
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>meow<span style="color:rgb(198, 0, 0)">'</span></span>.repeat<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(147, 161, 161)">)</span>; </span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="33b529380ceccbc0fc81b321d1d1ffdb">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 326px; top: 559px;" data-block-id="79ce858ec3a0c39975248f5fb1f001a5"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-6" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="95" height="1" viewbox="-101 178 95 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-7.5" y2="178.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(-8,178) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 181px; left: 428px; top: 542px;" data-block-id="0e71c39a883978bd7583f390d0ab2a42"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// meowmeowmow</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9e200583ecebe51140dd62b77ea31f56"><div class="sl-block" data-block-type="text" style="width: 841px; left: 96px; top: 30px; height: auto;" data-block-id="bc137f7b36aef6d7bbf61737fe657482">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">Template Literals: Escaping Characters</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da18e9e028823caae02d08c57b1dbf23">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 885px; left: 104px; top: 202px;" data-block-id="d578b9086fec91f14795e3b1ef508b15">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
||
<pre><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>This string contains <span style="color:rgb(203, 75, 22)">\"</span>double quotes<span style="color:rgb(203, 75, 22)">\"</span> which are escaped.<span style="color:rgb(198, 0, 0)">"</span></span></span></pre>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 104px; top: 350px;" data-block-id="7309c8ed1da2b8f32c2e05238512df68">
|
||
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="0">
|
||
<pre> </pre>
|
||
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let text <span style="color:rgb(133, 153, 0)">=</span> `This string contains <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>double quotes<span style="color:rgb(198, 0, 0)">"</span></span> which are escaped.`
|
||
</span></pre>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="da2328c868ef3f0d872472bd8f68e381">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="000e33552f64679b9636db27efd0689f"><div class="sl-block" data-block-type="text" style="width: 681px; left: 101px; top: 30px; height: auto;" data-block-id="2f68a19ada9b71f3a230479e2d50390a">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px">Template Literals: Interpolation</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="bf09f1707284ba2d74df53ab6cd7af4e">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 826px; left: 94px; top: 336px;" data-block-id="4953e8d802477333c684f3aa1cf619f9">
|
||
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">const name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
const age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>`My cat is named <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>name<span style="color:rgb(38, 139, 210)">}</span> and is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>age<span style="color:rgb(38, 139, 210)">}</span> years old.`<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 876px; left: 101px; top: 179px;" data-block-id="9d69ed18c74b6ac692909970f8fa8a39"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Tiger<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">13</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>My cat is named <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> name <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> and is <span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span> age <span style="color:rgb(133, 153, 0)">+</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span> years old.<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c90278af4ca45621fa6e3bbfb2fa617c">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 435px; top: 437px;" data-block-id="b385a42e3c3f5bf33bcfbfc12fe53602"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 607px; top: 437px;" data-block-id="538308fbd2ef62907002fd2ec1547c51"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-20" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="81" height="1" viewbox="-101 178 81 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-19.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 182.5px; height: 211.594px; left: 425px; top: 455px;" data-block-id="1bd6c13c92a7324d4f8060124770c4f5"><div class="sl-block-content fragment" style="z-index: 17;" data-fragment-index="0"><img data-natural-width="207" data-natural-height="240" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157344/cat4.png"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 302px; left: 640px; top: 653px;" data-block-id="da252fd6a0293dbdef3313fbc3814dae"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="1">
|
||
<pre style="text-align: left;"><span style="font-size:0.5em">Credit: https://github.com/venegu</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6fe0e77cccc4e270ee85bf7c5668031"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="7e676ee9d241ae1e1be753bc032a61de">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="64b95c3c58efac25841ab24f133633ad">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 265px; left: 108px; top: 165px;" data-block-id="c1237f75f9c5c22fabaf77a9663e225d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(133, 153, 0)">+</span>
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
|
||
<span style="color:rgb(147, 161, 161)">)</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 273px; left: 108px; top: 414px;" data-block-id="15e3409cd8a56d75be421f3b4cf0414f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>cat<span style="color:rgb(198, 0, 0)">'</span></span>,
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>dog<span style="color:rgb(198, 0, 0)">'</span></span>,
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>nickelodeon<span style="color:rgb(198, 0, 0)">'</span></span>
|
||
<span style="color:rgb(38, 139, 210)">]</span>.<span style="color:rgb(38, 139, 210)">join</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span><span style="color:rgb(203, 75, 22)">\n</span><span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 194px; left: 543px; top: 272px;" data-block-id="a09f1cf63462cdfe13f138775674cb27"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> text <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(147, 161, 161)">(</span>
|
||
`cat
|
||
dog
|
||
nickelodeon`
|
||
<span style="color:rgb(147, 161, 161)">)</span></span></pre>
|
||
</div></div>
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2af18d91c08d1c9e480cc1cc1bd6dc8">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 248px;" data-block-id="b225ee65cd7d0cfe4ccbe39341111a52"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="263" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="85" viewbox="-101 178 185 85"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="262.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,262) rotate(114.618)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 310px; top: 370px;" data-block-id="56a7e4b3c6ca867d99e05404552aa509"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="84" data-line-y2="73" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="185" height="105" viewbox="-101 73 185 105"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="82.5" y2="74.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(82,74) rotate(60.489)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cbebb8fc22b28953a0e01d16fef23647"><div class="sl-block" data-block-type="text" style="width: 667px; left: 106px; top: 28px; height: auto;" data-block-id="41cb1b1e99d2ab3a173c012db73db52f">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px">Template Literals: Expressions</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9db7a13de4d1e94afb9c4de4f0107c58">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 906px; left: 116px; top: 285px;" data-block-id="c3a31752893c01f4d5f733a394c2be9e">
|
||
<div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; line-height: 1.56;" dir="ui" data-fragment-index="0" data-has-line-height="">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let today <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Date<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
let text <span style="color:rgb(133, 153, 0)">=</span> `The time and date is <span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>today.<span style="color:rgb(38, 139, 210)">toLocaleString</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">}</span>`
|
||
|
||
</span></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="99a4280ee3a12e1d401f54952227b669">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 503px; top: 372px;" data-block-id="d89a048d4fc609fe4bc35f9b0dc0cc58"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="190" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="291" height="1" viewbox="-101 178 291 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="190.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ea323ebaf10fb9a481abe7eabb43ea4f"><div class="sl-block" data-block-type="text" style="width: 748px; left: 104px; top: 28px; height: auto;" data-block-id="b459880787977ea7c2abeab26d0228cd">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">Template Literals: Multi-line Strings</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d5767fb2d69792a45658b9e901ca10c7">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 680px; left: 120px; top: 154px;" data-block-id="974dcd346a6a67f11cf36d9d84af5632"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let book <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
title: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Harry Potter and The Sorcercers Stone<span style="color:rgb(198, 0, 0)">'</span></span>,
|
||
summary: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much magic. Such depth.<span style="color:rgb(198, 0, 0)">'</span></span>,
|
||
author: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>J.K. Rowling<span style="color:rgb(198, 0, 0)">'</span></span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
let html <span style="color:rgb(133, 153, 0)">=</span> `<span style="color:rgb(133, 153, 0)"><</span>header<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>h1<span style="color:rgb(133, 153, 0)">></span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.title<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)"><</span>/h1<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>/header<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>section<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>div<span style="color:rgb(133, 153, 0)">></span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.summary<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)"><</span>/div<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>div<span style="color:rgb(133, 153, 0)">></span><span style="color:rgb(133, 153, 0)">$</span><span style="color:rgb(38, 139, 210)">{</span>book.author<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(133, 153, 0)"><</span>/div<span style="color:rgb(133, 153, 0)">></span>
|
||
<span style="color:rgb(133, 153, 0)"><</span>/section<span style="color:rgb(133, 153, 0)">></span>`</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e00044518495808d68eb0ecf5b5180c9">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 420px;" data-block-id="850c8ac5f7d94795a024fed779ceef20"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="30" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="-101 178 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="30.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 525px;" data-block-id="3418d006612bf5fab468c85b5f06d50a"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="63" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="164" height="1" viewbox="-101 178 164 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="63.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 208px; top: 559px;" data-block-id="a7d66c0184991d6c45591e5a651c43dd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="54" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="155" height="1" viewbox="-101 178 155 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="54.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ef0c7e6231a2e1dd5b26207b6fc4cd95"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="661d498551a327bc4031893807280ec4"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 320px; left: 640px; top: 331px;" data-block-id="a70ce76e2ada09562c79d8c4d5f7f2f9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Destructuring</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="093c27585a60ca59b50432813c15c62c"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="706b45bacee61ca79a7b600b16f9eb93"><div class="sl-block" data-block-type="text" style="width: 299px; left: 104px; top: 22px; height: auto;" data-block-id="03f6794ea3f093d7ea5308a0522522c1">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Destructuring</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c241b3d00cb0e6f71c5ce96af020046">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 104px; top: 173px;" data-block-id="8ba99d6ed52f16621a2f9a76f5c86c7c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
||
<pre><br></pre>
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> occupation: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>, father: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>anakin<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>occupation, father<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> luke;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>occupation<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'jedi'</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>father<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 'anakin'</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 104px; top: 426px;" data-block-id="06bb0f7a210e88b37fd278d28c0225cc"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">[</span>a, b<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">10, 20</span><span style="color:rgb(38, 139, 210)">]</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>a<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span></span>
|
||
</pre>
|
||
|
||
<pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><font color="#586e75">console</font><span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">b</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 20</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0ac2425bc10ef94e19539ead86d845e2">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 152px; top: 286px;" data-block-id="bc8319fe0df6c09f32f1703f03a49073"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="7" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="227" height="1" viewbox="-220 36 227 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="7.5" y2="36.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 253px;" data-block-id="c8adfaa7de2c8ef70032ce6dbedbb777"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-155" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="65" height="1" viewbox="-220 36 65 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-154.5" y2="36.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 241px; top: 253px;" data-block-id="dfd7e70ec409e3ca5720d995d422677e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="231" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="451" height="1" viewbox="-220 36 451 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="231.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dacfe67bcf08cb3c7e10dceac0854af1"><div class="sl-block" data-block-type="text" style="width: 293px; left: 118px; top: 22px; height: auto;" data-block-id="355dfac38f5fde13032b83346ad4f57b">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">Destructuring</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0958d321a46e21c11c6bb642b40c4125">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="d7584a49c3761c6da5299f698fdac430"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getCoords <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
x: <span style="color:rgb(38, 145, 134)">10</span>,
|
||
y: <span style="color:rgb(38, 145, 134)">22</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(38, 139, 210)">{</span>x, y<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> getCoords<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>x<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 10</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>y<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 22</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2c7fa661602caaccaefebe808627c2f4">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 175px; top: 440px;" data-block-id="ebb1961fd49646d0836c6670f2c297d9"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-50" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="51" height="1" viewbox="-101 178 51 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-49.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ee34c8127354649ae48b62a5200b8e32"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8d0d2cce61251c7e57ad76cb2a585b75"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 212px; left: 748px; top: 331px;" data-block-id="ea385d033339879fd6ccc76b6a1659ae"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Modules</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="ad257b14cbdab85dc11bce7363af85cc"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section data-id="9a4e442278e4eb94a293ec38e0c2d366"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 369.6px; height: 420px; left: 283px; top: 148px;" data-block-id="5aab15e27f808d358211ad6a9176728d"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="440" data-natural-height="500" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153791/importexport.jpg"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 433px; left: 526px; top: 662px;" data-block-id="796b92678b042353cbe67fc93f00f0c9"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<p style="text-align: left;"><span style="font-size:0.5em">Credit: https://www.flickr.com/photos/lucaohman/3473867313</span></p>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="296426d5738e81c9c25bb378fa767c15"><div class="sl-block" data-block-type="text" style="width: 509px; left: 118px; top: 22px; height: auto;" data-block-id="dad1fe87a909e6263add7c704ff85f2c">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in CommonJS</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7c09eb4b267b000099933aa25566496e">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="6f6e105eef074c34568154fd18b3f54c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>
|
||
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
|
||
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
|
||
module.exports <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 410px;" data-block-id="359c457c974681635d2af7cd97ce101d"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 145, 134)">1</span>
|
||
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">{</span> foo: <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span> <span style="color:rgb(38, 139, 210)">}</span>
|
||
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>foo<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>bar<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
|
||
<strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> bar <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="eb52615dbb250acb77dcb4a0f9bc18db">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="89b51bd42517e1156145c180dcd0c6e7"><div class="sl-block" data-block-type="text" style="width: 336px; left: 118px; top: 22px; height: auto;" data-block-id="fb6217a200208e9240ca52367d6f41ff">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Named Exports</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5793296616d3b3d91001880157fe52e3">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 209px;" data-block-id="9c0457a03a839941ce8d19795986fb4c"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">module.exports.name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
module.exports.age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 377px;" data-block-id="178019faa0b192c9285850e6be784fe1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> name <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>David<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<strong>export</strong> <span style="color:rgb(38, 139, 210)">var</span> age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">25</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6277561e09dfaf8629ba320ccd568012">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="9ddf6b553e1eab7325840bc36aa74855"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="faa7737219a78e0e7dac7c8dc2c61d88">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b283d8488db288207cb0964b2bc89d72">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 170px;" data-block-id="809f6a053fa5c5d645b21c667eee4456"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// math/addition.js</span>
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="302a943ebc68d8416b900c04debda895">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 472px;" data-block-id="400d044949775afd466ef7db7a56b31c"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="cb489e071961ec431c0cf155da28a345"><div class="sl-block" data-block-type="text" style="width: 362px; left: 118px; top: 22px; height: auto;" data-block-id="dca32cf523bf6ed006e4af106be70146">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Exporting in ES6</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e9dc15b21ab3ed6c9ff9655146661e5b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 724px; left: 118px; top: 226px;" data-block-id="a75a5c801c0fc5df522830a3c3b84e85"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<strong>export</strong> <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3e21da8ba94df579bcb0088390c11728">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 262px;" data-block-id="92821413e519345214e6d14f861cdc35"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 118px; top: 395px;" data-block-id="58b39e2f359e8b0c86e183584509d8c4"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-33" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-101 178 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-32.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4b2aa5768c9f10f17d5bd0e92474f97f"><div class="sl-block" data-block-type="text" style="width: 554px; left: 118px; top: 22px; height: auto;" data-block-id="6390c11bee58d5656cb6dd734a83c7e8">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1><span style="font-size:52.5px">Exporting default bindings</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d14062e493e1f461acc35967187ccccd">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="5d095cd213697fcf82572127b01cbc52"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumTwo(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> sumThree(a, b)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> a <span style="color:rgb(133, 153, 0)">+</span> b <span style="color:rgb(133, 153, 0)">+</span> c;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2e70475477fdffb131aaafed03992cc">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 401px;" data-block-id="ac469ef89cd301cfcea8d7d338c3701b"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> api <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
sumTwo : sumTwo,
|
||
sumThree: sumThree
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 560px;" data-block-id="39c9f61c5a397111a25cdcfff203ed91"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>export</strong> <span style="color:rgb(133, 153, 0)">default</span> api</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e36cab13367ff2984bef2bc721b95ee3"><div class="sl-block" data-block-type="text" style="width: 402px; left: 118px; top: 22px; height: auto;" data-block-id="60bc8781bd901399a06df01069036017">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Importing Modules</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9ed4e304810dccf40245b196459debf7">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 146px;" data-block-id="f43b8b5a1881c52f4b77ce11c17d0353"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> _ <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 379px; left: 118px; top: 225px;" data-block-id="3c2371572c894e626bdeaf93792409a2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> _ from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>underscore<span style="color:rgb(198, 0, 0)">'</span></span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 309px;" data-block-id="1085b8cbbc9af796f04c521be5a6ccd8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" dir="ui" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span> sumTwo, sumThree <span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 602px; left: 118px; top: 397px;" data-block-id="fe8eae989e09ca25657104d25ca6f65e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" dir="ui" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
sumTwo as addTwoNumbers,
|
||
sumThree as sumThreeNumbers<span style="color:rgb(38, 139, 210)">}</span> from
|
||
<span style="color:rgb(38, 139, 210)">}</span> from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 615px; left: 118px; top: 566px;" data-block-id="6b01d76ba11071396eefe211a9838bf1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" dir="ui" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">import</span> <span style="color:rgb(133, 153, 0)">*</span> as util from <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>math/addition<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="3549f516dfbf92373aa061a211d043eb">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 600px;" data-block-id="6c3b1c90100d05d3795baa9c68e23dcd"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="-46.5" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="55" height="1" viewbox="-101 178 55 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="-45.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 224px; top: 464px;" data-block-id="99d91fffe044d50f906769b01cbe6aac"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="90" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="191" height="1" viewbox="-101 178 191 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="90.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 253px; top: 496px;" data-block-id="4bbb44d1947c4232d374487379c471d8"><div class="sl-block-content fragment" data-line-x1="-101.5" data-line-y1="178" data-line-x2="104" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 21;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="205" height="1" viewbox="-101 178 205 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-100.5" y1="178.5" x2="104.5" y2="178.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="fa9f19d32b85083d9a7fdfea43a1b949"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="b814e6d37275dd87fcce8ba52f341a42"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="88065e43b31927f9ba0147edcd40a06b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Parameters</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="667b1a1ee1835aea3519b70b8b729d83"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="742ba986c23ffda6430aeb986f746104"><div class="sl-block" data-block-type="text" style="width: 406px; left: 118px; top: 22px; height: auto;" data-block-id="1316dfaf4f7a97a67e4dcf8cb1e9e06c">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Default Parameters</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="818200688cccb964acafb3ef50b799b8">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 146px;" data-block-id="6a95472f7d5074c6cb00adf7a6766412"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x, y)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
x <span style="color:rgb(133, 153, 0)">=</span> x <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
|
||
y <span style="color:rgb(133, 153, 0)">=</span> y <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">0</span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 361px;" data-block-id="85268f498ec66763474973c5011405af"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> addTwoNumbers(x=0, y=0)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> x <span style="color:rgb(133, 153, 0)">+</span> y;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e6ae7cdfcde2e3c09d247d1a9866f73d">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 217px;" data-block-id="335c0668da31af546aa29461534ea262"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 249px;" data-block-id="18756bdb74e18ff3bb90e8c567941f8b"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-62" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="49" height="1" viewbox="-111 178 49 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-61.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 383px; top: 396px;" data-block-id="d19e541699f63dca3bd9819bbf4542b4"><div class="sl-block-content fragment" data-line-x1="-111.5" data-line-y1="178" data-line-x2="-8" data-line-y2="178" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="-111 178 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line><line stroke="#ff0000" stroke-width="3" x1="-110.5" y1="178.5" x2="-7.5" y2="178.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 510px;" data-block-id="c7aa575a5fead3c7e54b67a3760c0ed8"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 6</span>
|
||
addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 2</span>
|
||
addTwoNumbers<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 0</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="7c680d0c1b13d5acf0b4e2ba62962708"><div class="sl-block" data-block-type="text" style="width: 341px; left: 118px; top: 22px; height: auto;" data-block-id="9b925ce09275c60340179f4a0394319d">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Rest Parameters</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e39ec199478ea603b6ed88b8b16b7c9d">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 146px;" data-block-id="8836aab5d3c0d768a99f32657633d75f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments()</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">var</span> i<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">0</span>; i <span style="color:rgb(133, 153, 0)"><</span> arguments.length; i<span style="color:rgb(133, 153, 0)">++</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arguments<span style="color:rgb(38, 139, 210)">[</span>i<span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 118px; top: 366px;" data-block-id="75c1c2dd599f398c3a637d9cb2aedb0f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> logArguments(...args)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let arg of args<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arg<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="fd4f7b7e6470f50072d654c092dc33f6">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 381px; top: 210px;" data-block-id="5a26ce61926c8b1a638a62eccaccab82"><div class="sl-block-content" data-line-x1="1" data-line-y1="-40" data-line-x2="107" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="106" height="1" viewbox="1 -40 106 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="107.5" y2="-39.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 375px; top: 397px;" data-block-id="7946374ab258f0409e176d1d128979db"><div class="sl-block-content fragment" data-line-x1="1" data-line-y1="-40" data-line-x2="36" data-line-y2="-40" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="35" height="1" viewbox="1 -40 35 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line><line stroke="#ff0000" stroke-width="3" x1="1.5" y1="-39.5" x2="36.5" y2="-39.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="72f16e98df227166c16b8772156ff463"><div class="sl-block" data-block-type="text" style="width: 413px; left: 118px; top: 22px; height: auto;" data-block-id="7cb3e9b46e7d35b784b7eeafa5e66dab">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px">Named Parameters</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ad2ae3ffb6d1c40697f819e720b14aad">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 677px; left: 118px; top: 146px;" data-block-id="6293a2c6a1330582d260315e43dde7fc"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas(options)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> height <span style="color:rgb(133, 153, 0)">=</span> options.height <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">600</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> width <span style="color:rgb(133, 153, 0)">=</span> options.width <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)">400</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> lineStroke <span style="color:rgb(133, 153, 0)">=</span> options.lineStroke <span style="color:rgb(133, 153, 0)">||</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 797px; left: 118px; top: 367px;" data-block-id="4374ab71b5301e177a030d9632477cc0"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
|
||
<span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
...
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="574e09364c8512741eb13ada3894901c">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 320px; top: 216px;" data-block-id="84d41d305a52ed5b2dd47870624b8335"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="223" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="240" height="1" viewbox="-17 153 240 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="223.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 422px; top: 179px;" data-block-id="bde718b9f0f2712b80cc14f5eff938d8"><div class="sl-block-content fragment" data-line-x1="-17" data-line-y1="153" data-line-x2="67" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="84" height="1" viewbox="-17 153 84 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-16.5" y1="153.5" x2="67.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 170px; top: 434px;" data-block-id="fddfbc076089f06b7f5fda09ec0bad06"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="474" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="511" height="1" viewbox="-37 153 511 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="474.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 688px; left: 112px; top: 532px;" data-block-id="5f6c962aad43e7813286276df5f29d79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="4">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span> initializeCanvas<span style="color:rgb(147, 161, 161)">(</span>
|
||
<span style="color:rgb(38, 139, 210)">{</span> height<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">600</span>, width<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)">400</span>, lineStroke<span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>black<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
...
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 600px;" data-block-id="9b1c8b7244c1b96f1a2db2df54748c3b"><div class="sl-block-content fragment" data-line-x1="-38" data-line-y1="152.5" data-line-x2="509" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="547" height="1" viewbox="-38 153 547 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-37.5" y1="153.5" x2="509.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="40f0e4ff125717911f8e36ca1ae4c55a"><div class="sl-block" data-block-type="text" style="width: 381px; left: 118px; top: 22px; height: auto;" data-block-id="f170cbcd578fc4f51b82e0f933f1df43">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Spread Operator</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="255e9a075a5b6b266b5f25fad3b0bfa1">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 502px; left: 130px; top: 246px;" data-block-id="6b2e003ded4c8d8acda1c3b99faf4790"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" dir="ui">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">Math</span>.<span style="color:rgb(38, 139, 210)">max</span><span style="color:rgb(147, 161, 161)">(</span>...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">100</span>, <span style="color:rgb(38, 145, 134)">9001</span>, <span style="color:rgb(133, 153, 0)">-</span><span style="color:rgb(38, 145, 134)">32</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">) </span></span><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// 9001</span></span></pre>
|
||
</div></div>
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 353px;" data-block-id="1355cb4ae47c0f1614221b3189e01722"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, ...<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">2</span>,<span style="color:rgb(38, 145, 134)">3</span><span style="color:rgb(38, 139, 210)">]</span>, <span style="color:rgb(38, 145, 134)">4</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>arr<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// [1, 2, 3, 4]</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="6905ca6e7c70755fd3f90e6749dc0d2e">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 280px;" data-block-id="069bac81e2acec21731402bf24c92ec8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="140" data-line-x2="259" data-line-y2="140" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 140 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="140.5" x2="259.5" y2="140.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 130px; top: 484px;" data-block-id="7984c946a4dae7df1599757122f14b9a"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> arr1 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)">2</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> arr2 <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">3</span>, <span style="color:rgb(38, 145, 134)">4</span>, <span style="color:rgb(38, 145, 134)">5</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
arr1.<span style="color:rgb(38, 139, 210)">push</span><span style="color:rgb(147, 161, 161)">(</span>...arr2<span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="decd61193ef8bda98c523f892a9d5404"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="353c948c960cc058683ad5fb8116dc01"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 184px; left: 776px; top: 331px;" data-block-id="794994e6ac736a5561484c164028118a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Classes</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="c7520ddce7464587575362ec5d944e99"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="35b296831c51243b2b0b71c4dc0e6d54"><div class="sl-block" data-block-type="text" style="width: 264px; left: 118px; top: 22px; height: auto;" data-block-id="3de36ee69733df5311007e90b7844e81">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Base Classes</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8a569b57b61360eb84366593dbcbd7a9">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 210px;" data-block-id="2ff7d1fbeac69315b6c11fa262cc139b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Person(name, age, gender)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Person</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="07227bafd57417dfd55db2ed5e339c39">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="b00f4fc4287765634679ba50dde827af"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="3af12e376a714212130b693d9b98c5a6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4cb2019122dac5f34c711f1741df0d13"><div class="sl-block" data-block-type="text" style="width: 373px; left: 118px; top: 22px; height: auto;" data-block-id="451b5d97f7296aec223fd9af26dc4a9b">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px; line-height:62.0455px">Extended Classes</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="915c0f7ca210dfe0e46a7776de0ab2d0">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 740px; left: 120px; top: 210px;" data-block-id="9efb1abae33010690571142fa1614977"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> Personal(name, age, gender, occupation, hobby)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
Person.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">Personal</span>.prototype <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">Object</span>.create<span style="color:rgb(147, 161, 161)">(</span>Person.prototype<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(133, 153, 0)">Personal</span>.prototype.constructor <span style="color:rgb(133, 153, 0)">=</span> </span>Personal;
|
||
<span style="color:rgb(133, 153, 0)">Personal</span>.prototype.<span style="color:rgb(165, 120, 0)">incrementAge</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>) <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> Person.prototype.incrementAge.<span style="color:rgb(38, 139, 210)">call</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="2163a5cd07dfab3c64e766ddad17cdb0">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 447px;" data-block-id="da260d7efba2d317b2149f7efaaba888"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 224px; top: 241px;" data-block-id="8b3a13d56ea381730fc242fc1b7ae1f5"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="59" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="96" height="1" viewbox="-37 153 96 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="59.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 279px;" data-block-id="f178cac1ac21c996ad4e3a412b4c2194"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="378" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="415" height="1" viewbox="-37 153 415 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="378.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 118px; top: 479px;" data-block-id="d859d39919ba823eada92db9233ba6f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 120px; top: 515px;" data-block-id="f03f104d47091e2e6129e7dd2e2e3243"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="333" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="370" height="1" viewbox="-37 153 370 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="333.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 168px; top: 544px;" data-block-id="91979d86c15bba41110156354a8f2c8f"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="571" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="608" height="1" viewbox="-37 153 608 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="571.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="df1758a4043fe8cf005e9411ca8d9ee2"><div class="sl-block" data-block-type="text" style="width: 442px; left: 118px; top: 22px; height: auto;" data-block-id="8f0b6a1947bb982c726dd6d87946c37a">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px">Base Classes in ES6</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="44eb83bba94a5103bd1812bb494e161f">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 146px;" data-block-id="7b7e49b44db28661d984071ec2ec6295"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
|
||
constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.name <span style="color:rgb(133, 153, 0)">=</span> name;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.gender <span style="color:rgb(133, 153, 0)">=</span> gender;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a317f2589cf00232a4f2a02b6d995576">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 169px; top: 217px;" data-block-id="7e39f0fa1783eeefbc179d10a789bdfe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="200" data-line-x2="341" data-line-y2="200" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="341" height="1" viewbox="0 200 341 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="200.5" x2="341.5" y2="200.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 188px; top: 180px;" data-block-id="6a4f4ce02fa37c709a74373f8f14fd73"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="37" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="74" height="1" viewbox="-37 153 74 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="37.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a5a07f28dbb64e95f784c6236882ff"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="096038bc3a3019617aa5b95cbb6c676a">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1><span style="font-size:52.5px">Extended Classes in ES6</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a83b5dab89e2623c77acb1fd5152e127">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 140px;" data-block-id="60a73c1817c4359e705102ae8ced82c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Personal <strong>extends</strong> Person <span style="color:rgb(38, 139, 210)">{</span>
|
||
constructor<span style="color:rgb(147, 161, 161)">(</span>name, age, gender, occupation, hobby<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">super</span><span style="color:rgb(147, 161, 161)">(</span>name, age, gender<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.occupation <span style="color:rgb(133, 153, 0)">=</span> occupation;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.hobby <span style="color:rgb(133, 153, 0)">=</span> hobby;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">super</span>.incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">20</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>.age<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8edf52ba0e7240a263623efacf4beed6">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 304px; top: 174px;" data-block-id="f0f1ec2776e269ee965716920cd7636a"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 173px; top: 210px;" data-block-id="82ccd065493b760a5860a54a385cbc02"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="530" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="567" height="1" viewbox="-37 153 567 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="530.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 242px;" data-block-id="0a5d717a2c4c112d8da2669f9856fabc"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="240" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="277" height="1" viewbox="-37 153 277 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="240.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 195px; top: 446px;" data-block-id="fbdf66ee4160442f0f11e6e3b3963863"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="224.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="262" height="1" viewbox="-37 153 262 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="222.5" y2="153.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(222,153) rotate(90)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 354px; left: 463px; top: 429px;" data-block-id="20f4b6d97075ec99625c49e3fc02a484"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 19;" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// Calls parent incrementAge()</span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ccf141e3b60946886bdffaa80a0efca9" data-background-size="initial"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="8f97b3211f9153e063da14e881a5f809"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 753px; top: 331px;" data-block-id="ce47aa9ac8ed6408ce8e42666a5c1648"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Symbols</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d108fd0713501897044f8de499999b77"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="1ef9229ba2bee61b23904ebe59f48dff"><div class="sl-block" data-block-type="text" style="width: 458px; left: 118px; top: 22px; height: auto;" data-block-id="f0edfd20de81a1d5bade2768bc19d5ee">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Unique Property Keys</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8ab2ccf4c72dfeff697966ace538dc9d">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 218px;" data-block-id="6232e474f5b70c8d9171095ff1131af1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> key <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<strong>const</strong> keyTwo <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<strong>const</strong> object <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>;
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a826ad44f0335db95dadbef334f9bb35">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 229px; left: 118px; top: 470px;" data-block-id="bf02de438cda09b3ea2d0f4e59e3a13e"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">></span><span style="color:rgb(133, 153, 0)">></span> key <span style="color:rgb(133, 153, 0)">===</span> keyTwo
|
||
<span style="color:rgb(133, 153, 0)">></span><span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(181, 137, 0)">false</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 353px;" data-block-id="1fc0f66d1d33d4d7b4f774fd97c6f998"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;" data-fragment-index="1">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">object.key <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Such magic.<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
object.keyTwo <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Much Uniqueness<span style="color:rgb(198, 0, 0)">'</span></span></span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0baa0fd34908a37b007f1ebc2903c6b8"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="e0ea89a7d9840efabaf02f1dbe3a3ca9">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Symbols as Concepts</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d4e4e0b8323eb34952a06190e38c288d">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 118px; top: 210px;" data-block-id="7d6fa894eb115bd70adc4f658ec3c5c1"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi master<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
<strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>jedi<span style="color:rgb(198, 0, 0)">'</span></span>;
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dfd1be4ac953f2b272acbdec8815ac6b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 389px;" data-block-id="6cca2c18e19fefa715d97bf6a0648d1f"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;" data-fragment-index="0">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>const</strong> anakin <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<strong>const</strong> yoda <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<strong>const</strong> luke <span style="color:rgb(133, 153, 0)">=</span> Symbol<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="4235a2dfef93c89a75c955f31e90dab8"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="ad407f71865515aebe851634994d6a38"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 160px; left: 800px; top: 331px;" data-block-id="b0f1cb1c1b6d07ea300ed20eeb8c1d9e"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px">Maps</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="99db6d6967c06168ad9b6f25ace6c7da"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ceeaa82fe25b36bda01fab38bcd5867"><div class="sl-block" data-block-type="text" style="width: 449px; left: 118px; top: 22px; height: auto;" data-block-id="d9c8b50b60df619b7a597d11cb643316">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">(Hash) Maps in ES5</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="54770c44484b2a94f4a35b525d622216">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="dec73e2fc565b0bdaf6f4a8ee3bf2d91">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 288px;" data-block-id="51e41c4591a593fefd4daa02f6c8e521"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">var <span style="color:rgb(38, 139, 210)">map</span> <span style="color:rgb(133, 153, 0)">=</span> new <span style="color:rgb(203, 75, 22)">Object</span><span style="color:rgb(181, 137, 0)">()</span>;
|
||
<span style="color:rgb(38, 139, 210)">map</span>[key1] <span style="color:rgb(133, 153, 0)">=</span> 'value1';
|
||
<span style="color:rgb(38, 139, 210)">map</span>[key2] <span style="color:rgb(133, 153, 0)">=</span> 'value2';</span></pre>
|
||
</div></div></section><section data-id="9a136c1f758609296791fc71c0c0c236"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="b6e2d3e83ef7b2d50d186e44ea70056b"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>Seems functional, right...?</h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c07b069e15c1340c644a97abc4792730"><div class="sl-block" data-block-type="text" style="width: 428px; left: 118px; top: 22px; height: auto;" data-block-id="e2d215f47f725773919a6ba5aaca054d">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Get Own Properties</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d015e2e673a5804dd58fb979ca207cf">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="5a9661fefefa49b1d3a8a8da654ef8c5">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 779px; left: 118px; top: 264px;" data-block-id="5b0292c290b4b638ff2cf8141295423d"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
|
||
<span style="color:rgb(133, 153, 0)">return</span> (object.hasOwnProperty(propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
|
||
}</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 341px; top: 331px;" data-block-id="edef2e40b17704660edfe6d14075a6c6"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="129.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-37 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="130.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 228px; top: 298px;" data-block-id="e85f9fd00fbff79770be188e4de85674"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-59" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="161" height="1" viewbox="-220 36 161 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-58.5" y2="36.5"></line></svg></div></div></section><section data-id="4863b24c43b088ed51df216d39e68f83"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="dbbbb2ab90959f30b1cc64b2cdcba408"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>We should be safe...right?</h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36479d5b37d781ffaaf0e47773ddc5f7">
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="9a886018597d79118f9dabc4ece21245">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="88891355ae4cac3df22275905c8b70fc">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 810px; left: 114px; top: 133px;" data-block-id="2480e0975015bd46fa34bf01b4a00039"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">> </span>getOwnProperty({ hasOwnProperty<span style="color:rgb(133, 153, 0)">: </span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Hah, overwritten<span style="color:rgb(198, 0, 0)">'</span></span>}, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Pwned<span style="color:rgb(198, 0, 0)">'</span></span>);
|
||
<span style="color:rgb(133, 153, 0)">> </span>TypeError<span style="color:rgb(133, 153, 0)">: </span>Propery <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>hasOwnProperty<span style="color:rgb(198, 0, 0)">'</span></span> is <span style="color:rgb(133, 153, 0)">not</span> a <strong>function</strong></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 329px; top: 167px;" data-block-id="89128f2bdbeb5418fd3a88a9771bb56d"><div class="sl-block-content fragment" data-line-x1="-28" data-line-y1="152.5" data-line-x2="153" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="181" height="1" viewbox="-28 153 181 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-27.5" y1="153.5" x2="153.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 602px; height: 328.278px; left: 218px; top: 280px;" data-block-id="806c16b45b4512dfe3863536cee9281b"><div class="sl-block-content fragment" style="z-index: 15;" data-fragment-index="2"><img data-natural-width="640" data-natural-height="349" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2153956/Nooo-Meme-Darth-Vader-04.jpg"></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 139px; top: 200px;" data-block-id="f6d8c4ca6fc3f1c34ee7ded008de40e7"><div class="sl-block-content fragment" data-line-x1="-250" data-line-y1="90" data-line-x2="367" data-line-y2="90" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="4px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="617" height="1" viewbox="-250 90 617 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-250" y1="90" x2="367" y2="90"></line><line stroke="#ff0000" stroke-width="4" x1="-250" y1="90" x2="367" y2="90"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 386px; left: 574px; top: 662px;" data-block-id="9a90585d15dd0687f0df78dffc2dbf2b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 17;">
|
||
<p style="text-align: left;"><span style="font-size:0.5em">Credit: http://memesvault.com/nooo-meme-darth-vader/</span></p>
|
||
</div></div></section><section data-id="4b0722247b70f8941b51f08ee8da187b"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="1a5f7a3e8206290ff2e8eb6b09253806"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>Second time is the charm.</h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5daa72a4ff3fd3cea4c2285bb3bc22fd">
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="01e85bc94044d4ac2d8e1ff07b6a89c6">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e25d3c4353997ea5d4b299c75c3ffe67">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 264px;" data-block-id="bc10db4c3388552cf9e5ee05c307f8be"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><strong>function</strong> <span style="color:rgb(38, 139, 210)">getOwnProperty</span>(object, propertyKey) {
|
||
<span style="color:rgb(133, 153, 0)">return</span> (Object.prototype.hasOwnProperty(object, propertyKey) ? object[propertyKey]<span style="color:rgb(133, 153, 0)">: </span>undefined);
|
||
}</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 260px; top: 332px;" data-block-id="ddf695e11f7eca449215508ff0d5ad5b"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="325" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="362" height="1" viewbox="-37 153 362 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="325.5" y2="153.5"></line></svg></div></div></section><section data-id="82cc868f866484de1c140b9cbbe52259"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 277px; height: 277px; left: 320px; top: 214px;" data-block-id="53a0563b8b355ed1c973ab3fb2cd90c8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="363" data-natural-height="363" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149583/Pusheen24.png"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 360px; top: 653px;" data-block-id="e5af66985e3fbcbd47e24ebf197d2bab"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<p><span style="font-size:0.7em">credit: http://deloiz.blogspot.com/2014/01/Pusheen.html</span></p>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="a3610f815cdedd505ebb11ed0e201caf"><div class="sl-block" data-block-type="text" style="width: 282px; left: 118px; top: 22px; height: auto;" data-block-id="59fc21b2ad9904503d747814950fa530">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Maps in ES6</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8774af0928b47f61a55df8018d57107c">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e011e358ce027c479e53bbe6351065c5">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 280px;" data-block-id="e55b072a15ebd76a93fdb81b59691e4f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map();
|
||
> map.<span style="color:rgb(38, 139, 210)">set</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span>);
|
||
> map.<span style="color:rgb(38, 139, 210)">get</span>(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// david</span>
|
||
> map.has(<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>); <span style="color:rgb(147, 161, 161)">// true</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 234px; top: 316px;" data-block-id="ad5e132ff0a15fd3de00564fd8aab75c"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="152.5" data-line-x2="65" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="97" height="1" viewbox="-32 153 97 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="65.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 347px;" data-block-id="8a8228242c3b31f92849dc3ee6ae5277"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 240px; top: 347px;" data-block-id="1de070cc0c0e33ac9b6d05868c83cb31"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="31" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="68" height="1" viewbox="-37 153 68 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="31.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 338px; top: 347px;" data-block-id="5f3d757bb3430f5f74bac468a47154f4"><div class="sl-block-content fragment" data-line-x1="-37" data-line-y1="152.5" data-line-x2="41" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="78" height="1" viewbox="-37 153 78 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-36.5" y1="153.5" x2="41.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 308px; top: 210px;" data-block-id="dcdf7365e74663e037933c7509bc1b03"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="75" data-line-y2="189" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 19;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="137" viewbox="-33 189 108 137"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="74.5" y2="191.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(74,191) rotate(38.351)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 85.5px; left: 422px; top: 193px;" data-block-id="f4560b3ff8cc181a9c34cdf1c2cef3e1"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="2">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// key</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 415px; top: 265px;" data-block-id="a9c3afa850313a7fa491769e5db2490f"><div class="sl-block-content fragment" data-line-x1="-33" data-line-y1="325.5" data-line-x2="111" data-line-y2="243" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="line-arrow" style="z-index: 21;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="144" height="83" viewbox="-33 243 144 83"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><line stroke="#ff0000" stroke-width="3" x1="-32.5" y1="326.5" x2="109.5" y2="244.5"></line><path style="fill: rgba(0,0,0,0);" stroke="#ff0000" stroke-width="3" transform="translate(109,244) rotate(60.191)" d="M 6.75 6.75 L 0 0 L -6.75 6.75"></path></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 98px; left: 568px; top: 248px;" data-block-id="0cf03992c61a75ef36b93bb49028eee3"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 22;" data-fragment-index="3">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(147, 161, 161)">// value</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 382px;" data-block-id="545302408df1fbbf65c7329e639dcfd9"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 23;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 189px; top: 415px;" data-block-id="864bdf6f93e03eba1f2239ba7cd6f652"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 24;" data-line-width="3px" data-fragment-index="5"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="34" height="1" viewbox="-22 153 34 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="7984b895283f856f147096406830fcff"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 302px; height: auto;" data-block-id="0207ecc62fa95f5d7e65699921499284"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1><span style="font-size:0.7em">Keys can be more than strings!</span></h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e6690e1f515240cc9eac0c46251f6826"><div class="sl-block" data-block-type="text" style="width: 522px; left: 118px; top: 22px; height: auto;" data-block-id="7bd58a5abfb4ab42a755347f433f5686">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Arbitrary values as keys</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="89f190c706295df75853e42759508fec">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="45520b715f1ae208e2532e4acc9b7cc4">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d58b2c7d4754290b9f8c77cd41bf5c88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let map <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> Map<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">[</span>
|
||
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>name<span style="color:rgb(198, 0, 0)">'</span></span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>david<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
|
||
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(181, 137, 0)">true</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>false<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
|
||
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>one<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
|
||
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>object<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>,
|
||
<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>)</span> <span style="color:rgb(38, 139, 210)">{</span><span style="color:rgb(38, 139, 210)">}</span>, <span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>function<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(38, 139, 210)">]</span>
|
||
<span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 184px; top: 280px;" data-block-id="59876d45edf97f802bb8852e8e4757fe"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 313px;" data-block-id="91ade1bf136ff63d6c8e09e20140e9e8"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="34" data-line-y2="153" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="56" height="1" viewbox="-22 153 56 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="34.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 343px;" data-block-id="3dd1d67270b8fe6df2a201f7b166a1ea"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="-2" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="20" height="1" viewbox="-22 153 20 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="-1.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 378px;" data-block-id="0a3b1608906a9e5e62497a1962ae625c"><div class="sl-block-content fragment" data-line-x1="-22" data-line-y1="152.5" data-line-x2="6" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="28" height="1" viewbox="-22 153 28 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-21.5" y1="153.5" x2="6.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 174px; top: 412px;" data-block-id="abd21c5006fc42c1f48a5530ae46b10e"><div class="sl-block-content fragment" data-line-x1="-32" data-line-y1="153" data-line-x2="131" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="-32 153 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-31.5" y1="153.5" x2="131.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 118px; top: 484px;" data-block-id="819f7893bddfc2e37fd90bac47c6fbf9"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 20;" data-fragment-index="5">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let key of map.keys<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">typeof</span> key<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(147, 161, 161)">// > string, boolean, number, object, function</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>;</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c345c792fcbd8caf453a3007b6ae8b1b"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="b76fd8468cfa4371c18d6ea7e68d8883">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px">.entries( )</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1d016ce2c53f995628365635d60f1c56">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f0526ffaf551b8c8a0dce7c2271442ee">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 779px; left: 118px; top: 210px;" data-block-id="d30905ab1568ee31f0c0dc48c17e6d3a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let entry of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span><span style="color:rgb(38, 139, 210)">]</span>, entry<span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 428px;" data-block-id="6bd2ffe1d47f7e6d4316cf6ae183f508"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let <span style="color:rgb(38, 139, 210)">[</span>key, value<span style="color:rgb(38, 139, 210)">]</span> of map.entries<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>key, value<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 328px; top: 243px;" data-block-id="64fd1ffa0f0c009fe401f9cf567e831b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="128" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="-24 153 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="128.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 225px; top: 462px;" data-block-id="a0b5e2d4a25a366a94a56e597def2138"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="109" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="133" height="1" viewbox="-24 153 133 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="109.5" y2="153.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="8bf898044658277400af9c963d4339bb"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 0px; top: 426px;" data-block-id="76be9618cbb89773474632a0f840421b"><div class="sl-block-content" data-line-x1="53" data-line-y1="276" data-line-x2="1013" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 10;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="960" height="1" viewbox="53 276 960 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="53" y1="276" x2="1013" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="53" y1="276" x2="1013" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 289px; left: 671px; top: 331px;" data-block-id="228c42facb57850fa79bdb9ebecba4c8"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">WeakMaps</span></h2>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="9bfb151c29ef61af97ff7bfae798fbdb"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="0ab69aed36b61605f78a77d812d6e7b8"><div class="sl-block" data-block-type="text" style="width: 226px; left: 112px; top: 22px; height: auto;" data-block-id="f215b7a88ac9b5c42feefbf8a427031b">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Classes 101</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="66b229e02ec2b51ab75860b6998b1d81">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="13cc59629bf24af23bae5ce61295a393">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="fecac93156712d19535e94005ad998e0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
|
||
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">=</span> age;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>.age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div></section><section data-id="90176b1438c8aa694cd3b86f62bc786a"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="6d6db0b733eb8fa87a80af11656c4869"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>Private data?</h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="aae28de5d74421def58d1a3f9b895863"><div class="sl-block" data-block-type="text" style="width: 448px; left: 106px; top: 22px; height: auto;" data-block-id="b230c4abbb7dd72d8f1e5e16ec0f3dd3">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px">Naming Conventions</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="1a531a31c9096ef4dda4aef1bfb32772">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="f39c4b516989748a69ddd3af8fa86370">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 302px; left: 112px; top: 199px;" data-block-id="48c54ca38fd241597c9216fcd69ff35f"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
|
||
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">=</span> age;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
_incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">this</span>._age <span style="color:rgb(133, 153, 0)">+</span><span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 145, 134)">1</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 263px; top: 301px;" data-block-id="12584f4890a7782e71cb06eb45f44435"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="19" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="43" height="1" viewbox="-24 153 43 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="19.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 406px;" data-block-id="40248a5c503e1fd58f490f7109550d10"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="145.5" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="170" height="1" viewbox="-24 153 170 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="146.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 227px; top: 439px;" data-block-id="276931233d0334a3f3ad85eb9c505575"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="12" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="36" height="1" viewbox="-24 153 36 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="12.5" y2="153.5"></line></svg></div></div></section><section data-id="36f11c2f80ed0e2646321fdf0c9c1b82"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e019c470688dd035e585954f92f22fae"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>WeakMaps to the rescue!</h1>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 336px; height: auto;" data-block-id="f287b76e58dcf575a44dbe83d1288192"><div class="sl-block-content fragment" data-placeholder-tag="h2" data-placeholder-text="Subtitle" data-fragment-index="0">
|
||
<h2>(Maybe they're not so weak)</h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="dc6ce8638372afae4bbc0b695963ec20"><div class="sl-block" data-block-type="text" style="width: 550px; left: 90px; top: 33px; height: auto;" data-block-id="a620f5e90e4e8777bcd501058047393c">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h2>WeakMaps for Privacy</h2>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0d61f388e0131c3a93d1773e58c48bf2">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="db3309193239efdadcedff4cda71dd96">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 501px; left: 106px; top: 115px;" data-block-id="99f4b17823149357fed6b08feca54d51"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">let _age <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(133, 153, 0)">new</span> WeakMap<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">class</span> Person <span style="color:rgb(38, 139, 210)">{</span>
|
||
constructor<span style="color:rgb(147, 161, 161)">(</span>age<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
_age.set<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span>, age<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
incrementAge<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
let age <span style="color:rgb(133, 153, 0)">=</span> _age.get<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">this</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>age <span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(38, 145, 134)">90</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Midlife crisis<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 520px; left: 106px; top: 573px;" data-block-id="5f93e9928fcabf35a095fcc866917f79"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;" data-fragment-index="3">
|
||
<pre style="font-size: 0.9333em;"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">></span><font color="#586e75"> </font><strong style="color:rgb(88, 110, 117)">const</strong><font color="#586e75"> person </font><span style="color:rgb(133, 153, 0)">=</span><font color="#586e75"> </font><span style="color:rgb(133, 153, 0)">new</span><font color="#586e75"> Person</font><span style="color:rgb(147, 161, 161)">(</span><font color="#269186">90</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">;
|
||
</font><span style="color:rgb(133, 153, 0)">></span><font color="#586e75"> person.incrementAge</font><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// 'Midlife crisis'</span><font color="#586e75">
|
||
</font><span style="color:rgb(133, 153, 0)">></span><font color="#586e75"> Reflect.ownKeys</font><span style="color:rgb(147, 161, 161)">(</span><font color="#586e75">person</font><span style="color:rgb(147, 161, 161)">)</span><font color="#586e75">; </font><span style="color:rgb(147, 161, 161)">// []</span><font color="#586e75">
|
||
</font></span></pre>
|
||
|
||
<p> </p>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 106px; top: 150px;" data-block-id="d3d3023cbf7e6096a924c46bfdf87f05"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="258" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="282" height="1" viewbox="-24 153 282 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="258.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 149px; top: 251px;" data-block-id="44a0851ec3d05fe8d759f4fe84d9b55b"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="206" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="230" height="1" viewbox="-24 153 230 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="206.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 264px; top: 386px;" data-block-id="f181064569ce5968cde90fb41f2aac1f"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="143" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="167" height="1" viewbox="-24 153 167 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="143.5" y2="153.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 129px; top: 674px;" data-block-id="5f4c9e10bd111a7328d999034c5f61d1"><div class="sl-block-content fragment" data-line-x1="-24" data-line-y1="152.5" data-line-x2="327" data-line-y2="152.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="351" height="1" viewbox="-24 153 351 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line><line stroke="#ff0000" stroke-width="3" x1="-23.5" y1="153.5" x2="327.5" y2="153.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 467.6px; left: 130px; top: 117px;" data-block-id="fff04cfbea9fe8e464e9875072444225"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="500" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157571/pinky-promise_2.jpg"></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 516px; left: 434px; top: 656px;" data-block-id="c5dc7de484a64c8d66204e097ffc7403"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre><span style="font-size:0.5em">credit: http://wildermuth.com/images/pinky-promise_2.jpg</span></pre>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="56d4df842023ceb5e85ed9fcf8e72443"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="d96d0eec4ade2b26203915f731c65017"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 207px; left: 743px; top: 330px;" data-block-id="d0d4b6f2810cbea8a2d352970a27da88"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Promises</span></h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d6a8ad09a5d37b5cb589944348b1ba34"><div class="sl-block" data-block-type="text" style="width: 280px; left: 120px; top: 22px; height: auto;" data-block-id="9b4a0f94ca7b709f3c89f98dd2ee58bf">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Callback Hell</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="50d8786f91fa53b84f5a6b6e1c371f0f">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 120px; top: 170px;" data-block-id="248ea089572a340fa673a33296ce5a98"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> <span style="color:rgb(147, 161, 161)">(</span>value1)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
func2<span style="color:rgb(147, 161, 161)">(</span>value1, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
func3<span style="color:rgb(147, 161, 161)">(</span>value2, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
func4<span style="color:rgb(147, 161, 161)">(</span>value3, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
func5<span style="color:rgb(147, 161, 161)">(</span>value4, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>value5<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(147, 161, 161)">// Do something with value 5</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="153ea4566ecc11f6663c610d66b98385">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 119px; top: 203px;" data-block-id="703b9ed482ee098b3f4f0611071c414f"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-111.5" data-line-y2="188" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="109" height="152" viewbox="-220 36 109 152"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-110.5" y2="188.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 355px;" data-block-id="8f3c858fd67d59e4694a2e7c5cd79b7d"><div class="sl-block-content fragment" data-line-x1="-198" data-line-y1="217" data-line-x2="-90.5" data-line-y2="72" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="108" height="145" viewbox="-198 72 108 145"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line><line stroke="#ff0000" stroke-width="3" x1="-197.5" y1="217.5" x2="-89.5" y2="72.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 120px; top: 203px;" data-block-id="c01163cee3cee3bc64c408d75e092e98"><div class="sl-block-content fragment" data-line-x1="-234" data-line-y1="21" data-line-x2="-234" data-line-y2="318" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="297" viewbox="-234 21 1 297"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line><line stroke="#ff0000" stroke-width="3" x1="-233.5" y1="21.5" x2="-233.5" y2="318.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 35.5px; left: 138px; top: 268px;" data-block-id="61cdd5920981aa93055dbfb4545173f2"><div class="sl-block-content fragment" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 18; color: rgb(255, 0, 0);" data-fragment-index="1">
|
||
<p style="text-align:left">D</p>
|
||
|
||
<p style="text-align:left">O</p>
|
||
|
||
<p style="text-align:left">O</p>
|
||
|
||
<p style="text-align:left">M</p>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e797fb591fb91cdf81abb90be6c4843a"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="6ca487e5b597b117d0b98a32484af09c">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="4f05be63850e4e5794463ce34fa09585">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 120px; top: 236px;" data-block-id="c324b41f0d6152a6b53506407bb2a734"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">func1<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span>func2<span style="color:rgb(147, 161, 161)">(</span>value1<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span>func3<span style="color:rgb(147, 161, 161)">(</span>value2<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span>func4<span style="color:rgb(147, 161, 161)">(</span>value3<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span> <span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span>func5<span style="color:rgb(147, 161, 161)">(</span>value4<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(147, 161, 161)">// Do something with value 5 </span>
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="72da20a07f0f9feb651ce2765c4edd2d">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 302px;" data-block-id="0b57f8c57c0e825629e5b481e77299e5"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-162.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-220 36 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-161.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="634889aa325f22e8a7f375b54c72ac2b"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="00898c39425ad7cdd591ef728b6558e1">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c89351e28dd4718775658b7ad9c14f74">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 260px; height: 260px; left: 160px; top: 230px;" data-block-id="0ffe8570db43154c516e00ada7bd1550"><div class="sl-block-content fragment" style="z-index: 13;" data-fragment-index="0"><img data-natural-width="375" data-natural-height="375" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148721/qtia.png"></div></div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 244.541px; height: 280px; left: 598px; top: 220px;" data-block-id="b38b30e92d6819df7e4ef21ee28f1781"><div class="sl-block-content fragment" style="z-index: 14;" data-fragment-index="1"><img data-natural-width="200" data-natural-height="229" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2148724/q.png"></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7a27e6ac958d5f3e03dea6f44c0bf015">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section class="has-light-background" data-background-color="#ffffff" data-id="eb20bcd64bcf576d4ec843b217a55eb3"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="e67cba307e014651d4132bde69466443">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px">Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="7ba86759e44053a4636b3b4aec3d2ec7">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 732px; left: 114px; top: 191px;" data-block-id="5cc7ec6eecdd372bb3a7fee6c41d69c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span>resolve <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> resolve<span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span>result <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
|
||
|
||
|
||
|
||
<span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span>
|
||
reject<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">new</span> Error<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>Failed to fufill Promise<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span>reason <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>reason<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c2de23bb7d1c2b92fbd1c71525eac61f">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 255px; top: 223px;" data-block-id="ebaaf7233cd8a6d2ed868d584462fc9e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 268px; top: 427px;" data-block-id="710c668fc3b044c13a3b2dc0019a7759"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 369px; top: 426px;" data-block-id="4da28b7950f23d8811f8f0d73878969e"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 494px;" data-block-id="3d1e34cee65ea1dfd836183f11479492"><div class="sl-block-content fragment" data-line-x1="-220" data-line-y1="36" data-line-x2="-137.5" data-line-y2="36" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="83" height="1" viewbox="-220 36 83 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line><line stroke="#ff0000" stroke-width="3" x1="-219.5" y1="36.5" x2="-136.5" y2="36.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="26576adb2262aac025446042fe3eeb0d"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="15ef2d9c274707635edb94eea3bc4cd1">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="d97113173d910f4e9186cc225f7af4f7">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0300559c204343c52c107e37d6779f19">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 842px; height: 324.744px; left: 99px; top: 188px;" data-block-id="c37b1fd5877a11a00d034b5dd595c449"><div class="sl-block-content" style="z-index: 14;"><img data-natural-width="866" data-natural-height="334" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149357/whitebackgroundpromises.png"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="b3539802200449c4092f73037564941f"><div class="sl-block" data-block-type="text" style="width: 191px; left: 118px; top: 22px; height: auto;" data-block-id="2d06ac3dccb20295539a897f0ec828e6">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: 0px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c1e46935647eac5eb70cbbce7cdd085e">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="505" data-line-x2="-301" data-line-y2="-195" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="700" viewbox="-301 -195 1 700"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="505" x2="-301" y2="-195"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="505" x2="-301" y2="-195"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 814px; left: 118px; top: 216px;" data-block-id="40ac60a4326a831f6408868061fe52c5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> <span style="color:rgb(165, 120, 0)">fetchJSON <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">function</span>(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">$</span>.getJSON<span style="color:rgb(147, 161, 161)">(</span>url<span style="color:rgb(147, 161, 161)">)</span>
|
||
.done<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> resolve<span style="color:rgb(147, 161, 161)">(</span>json<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.fail<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>xhr, status, err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> reject<span style="color:rgb(147, 161, 161)">(</span>status <span style="color:rgb(133, 153, 0)">+</span> err.message<span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="c26bd329cb4574b50da45d6b4d589633">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 280px;" data-block-id="8d9f6ed814291bab07be209cb4513af9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="180" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="416" height="1" viewbox="-236 30 416 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="180.5" y2="30.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 248px;" data-block-id="45b67429c99b18c069272aaec0a442f9"><div class="sl-block-content fragment" data-line-x1="-236" data-line-y1="30" data-line-x2="-124" data-line-y2="30" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="112" height="1" viewbox="-236 30 112 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line><line stroke="#ff0000" stroke-width="3" x1="-235.5" y1="30.5" x2="-123.5" y2="30.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 376px; top: 350px;" data-block-id="69ea48e2baf9691f23d48e011b82ea55"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 186px; top: 350px;" data-block-id="5965ce5b9cb70bcb61f1bff058b9421a"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="66" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="66" height="1" viewbox="0 100 66 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="66.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 193px; top: 380px;" data-block-id="e9c907316b9d36ec4815a00f1c618fff"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="59" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 19;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="59" height="1" viewbox="0 100 59 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="59.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 514px; top: 380px;" data-block-id="3162ea4b30d5ab7a51d83ce728f24562"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="79" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 20;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="79" height="1" viewbox="0 100 79 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="79.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="5c330950352bb24cdbc5a70e7947115b"><div class="sl-block" data-block-type="text" style="width: 572px; left: 112px; top: 32px; height: auto;" data-block-id="62e3a9284aba644d9cb7677a93f13940">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px">Parallelizing using Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="a9f119f240335fce40144b206bb63db2">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 148px;" data-block-id="4e5c62b1b1cd91548dcd01e0e1b0b896"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> urls <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span>
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/1234<span style="color:rgb(198, 0, 0)">'</span></span>,
|
||
<span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://www.api.com/items/4567<span style="color:rgb(198, 0, 0)">'</span></span>
|
||
<span style="color:rgb(38, 139, 210)">]</span>;
|
||
|
||
<span style="color:rgb(38, 139, 210)">var</span> urlPromises <span style="color:rgb(133, 153, 0)">=</span> urls.map<span style="color:rgb(147, 161, 161)">(</span>fetchJSON<span style="color:rgb(147, 161, 161)">)</span>;
|
||
|
||
Promise.all<span style="color:rgb(147, 161, 161)">(</span>urlPromises<span style="color:rgb(147, 161, 161)">)</span>
|
||
.then<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>results<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
results.forEach<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>
|
||
.<span style="color:rgb(133, 153, 0)">catch</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>err<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">"</span>Failed: <span style="color:rgb(198, 0, 0)">"</span></span>, err<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 350px;" data-block-id="7ed5fb163a38fe7b63817a53681dcdc2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="131" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="131" height="1" viewbox="0 100 131 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="131.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="e89c611a21ce067123f801d80171b60d"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 176px; top: 489px;" data-block-id="131f1c468b5e41d9e25e8e9e08022759"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="172.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="173" height="1" viewbox="0 100 173 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="173.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 141px; top: 587px;" data-block-id="60ee60ea8b3679b7d75b2d421aba8fcf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="224" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="224" height="1" viewbox="0 100 224 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="224.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="36287dd6b364d678b42295a4ecbdc0ab"><div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: -9px; top: 426px;" data-block-id="649e9848a3660de602c19eb72499aeb0"><div class="sl-block-content" data-line-x1="44" data-line-y1="276" data-line-x2="1019" data-line-y2="276" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="975" height="1" viewbox="44 276 975 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="44" y1="276" x2="1019" y2="276"></line><line stroke="#fbde34" stroke-width="4" x1="44" y1="276" x2="1019" y2="276"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 274px; left: 686px; top: 331px;" data-block-id="9568690c5e84ffe348d476c3db123828"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12; font-size: 150%;">
|
||
<h2><span style="font-size:59.85px; line-height:70.7318px">Generators</span></h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="e9fb2d56545bba5bf0f9dd8cb7a92da9"><div class="sl-block" data-block-type="text" style="width: 208px; left: 80px; top: 33px; height: auto;" data-block-id="53139c7c785c28ae90ad5d7ed6319bc2">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:0.7em">Syntax</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="8985516f9adc983fabc4630ee2c95416">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 362px; left: 112px; top: 148px;" data-block-id="8f26b9fefeb89345621c41edd8dd9ec7"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
yield <span style="color:rgb(38, 145, 134)">1</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">2</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">3</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">4</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 112px; top: 389px;" data-block-id="d8dd566c9167210e190e569ea9fa13f0"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> value <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 1, done: false }</span>
|
||
<span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 2, done: false }</span>
|
||
<span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 3, done: false }</span>
|
||
<span style="color:rgb(133, 153, 0)">></span> console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>value<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// { value: 4, done: false }</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 183px;" data-block-id="3ec914e090e30d1ba1f42371084dd5a8"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="105" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="105" height="1" viewbox="0 100 105 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="105.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 419px;" data-block-id="56a59dbba45f02584887bfb3013655a7"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="152" data-line-y2="101" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="152" height="1" viewbox="0 100 152 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="152.5" y2="101.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 256px; top: 455px;" data-block-id="dbfa88e62a9eed4939b3283284699c62"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="180" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="180" height="1" viewbox="0 100 180 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="180.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 411px; top: 490px;" data-block-id="d4a345984dd3ab0a2a98a1e4c224ae02"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="287" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="287" height="1" viewbox="0 100 287 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="287.5" y2="100.5"></line></svg></div></div></section><section data-id="122689eb24533399f2654d4dee80c6c8"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 270px; height: auto;" data-block-id="9ae5a7fe5430f567b419abbf299e649c"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>What about using return?</h1>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="d35d282e41a78977955cdd00e79c1ccf"><div class="sl-block" data-block-type="text" style="width: 462px; left: 112px; top: 32px; height: auto;" data-block-id="7547234925b920b3c007ef3b60e3432a">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:0.7em">Return in a Generator</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="b64fa0dba4d1e065c5fc4261f48a8979">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 190px;" data-block-id="6cfe79bfd3f9aa59d95724da24ba4e82"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
yield <span style="color:rgb(38, 145, 134)">1</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">2</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">3</span>;
|
||
yield <span style="color:rgb(38, 145, 134)">4</span>;
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(38, 145, 134)">5</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">for</span><span style="color:rgb(147, 161, 161)">(</span>let val of sillyGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>val<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// 1, 2, 3, 4</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span> </span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 391px;" data-block-id="0a203f94b0fc79a2f5c44615ad89feeb"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="103" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="103" height="1" viewbox="0 100 103 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="103.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 497px;" data-block-id="d5523cd2bd4d607ce9aaa30c4a344031"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="368" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="368" height="1" viewbox="0 100 368 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="368.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="25a49093a42665fa4b45d1660268a1aa"><div class="sl-block" data-block-type="text" style="width: 511px; left: 112px; top: 32px; height: auto;" data-block-id="9cd55333435125070113d3fa99cc793b">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Real Generator Function</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="0a34b24729e50d7514137ab29828b2b1">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 473px; left: 112px; top: 129px;" data-block-id="0dd05849b41f6ca08d6e831ea4a986c4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
|
||
let <span style="color:rgb(38, 139, 210)">[</span>current, total<span style="color:rgb(38, 139, 210)">]</span> <span style="color:rgb(133, 153, 0)">=</span> <span style="color:rgb(38, 139, 210)">[</span><span style="color:rgb(38, 145, 134)">0</span>, <span style="color:rgb(38, 145, 134)">1</span><span style="color:rgb(38, 139, 210)">]</span>;
|
||
|
||
<span style="color:rgb(133, 153, 0)">while</span> <span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(181, 137, 0)">true</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(38, 139, 210)">{</span>
|
||
yield total;
|
||
current<span style="color:rgb(133, 153, 0)">++</span>;
|
||
total <span style="color:rgb(133, 153, 0)">=</span> total <span style="color:rgb(133, 153, 0)">*</span> current;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(133, 153, 0)">for</span> <span style="color:rgb(147, 161, 161)">(</span>let n of factorial<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>n<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span>n <span style="color:rgb(133, 153, 0)">>=</span> <span style="color:rgb(38, 145, 134)">100000</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">break</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 136px; top: 199px;" data-block-id="320e0a8afa1501f9d771eb43c4ad5e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="231.5" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="232" height="1" viewbox="0 100 232 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="232.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 296px;" data-block-id="9b97cea65b5b4d777ea4538f2341bdbe"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="128" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="128" height="1" viewbox="0 100 128 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="128.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 500px;" data-block-id="b216fb9d27b079f4b69445bc186285c6"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="301" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="301" height="1" viewbox="0 100 301 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="301.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="ae2c0fd2f20a0b5e99c6afe0bd5b8568"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="e52a2c4c4cf2b2cf48505b12addace4f">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10;" dir="ui">
|
||
<h1 style="text-align: left;"><span style="font-size:52.5px">Writing Sync-Async </span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="e7e754929db03b94a8ce8eed14408d83">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 112px; top: 178px;" data-block-id="be7dd21d8f954226ff808ff063ff2cce"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
getJSON<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
generator.next<span style="color:rgb(147, 161, 161)">(</span>response<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 206px; top: 280px;" data-block-id="2d6b2d3c26612f491386c3435b133995"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="163" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="163" height="1" viewbox="0 100 163 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="163.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 112px; top: 410px;" data-block-id="3742fe8c39c351dcd42e3ce515cd09cf"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="221" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="221" height="1" viewbox="0 100 221 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="221.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 160px; top: 445px;" data-block-id="acc6ddb945542ec6cd4346fdd55a98c2"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="599" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="599" height="1" viewbox="0 100 599 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="599.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 159px; top: 480px;" data-block-id="92537275ad91be922218993327aa72a0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="367" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="367" height="1" viewbox="0 100 367 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="367.5" y2="100.5"></line></svg></div></div></section><section data-id="cb86bc63209094e494e605835d72f074"><div class="sl-block" data-block-type="text" style="width: 872px; left: 80px; top: 313px; height: auto;" data-block-id="88277cd9afa654d9babef5d747364e0f"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h2>Not without problems though...</h2>
|
||
</div></div></section><section data-id="87f4dc2afa162ecea575fc31fa32d9ca"><div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 729px; left: 132px; top: 157px;" data-block-id="62da03fb1e53ed10e50c6bf56187fccd">
|
||
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10; text-align: left; background-color: rgba(0, 0, 0, 0);" data-has-custom-html="" dir="ui">
|
||
<h3 class="fragment" data-fragment-index="2" style="color: rgb(251, 222, 52); text-align: left;"> </h3>
|
||
|
||
<ul>
|
||
<li class="visible" style="color: rgb(251, 222, 52);">
|
||
<h3><span style="font-size:1.0em;"><span style="color:black">How do we handle errors?</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="0" style="color: rgb(251, 222, 52);">
|
||
<h3><span style="font-size:1.0em;"><span style="color:black">getJSON not in control</span> </span></h3>
|
||
</li>
|
||
<li class="fragment" data-fragment-index="1" style="color: rgb(251, 222, 52);">
|
||
<h3><span style="font-size:1.0em;"><span style="color:black">Parallelize?</span> </span></h3>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="195630d346665afbe8f09433da78fb2c">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div></section><section data-id="f626262a4f441530f6c23838cb235da3"><div class="sl-block" data-block-type="image" style="min-width: 30px; min-height: 30px; width: 506.667px; height: 380px; left: 227px; top: 180px;" data-block-id="872e298b2d019180d03ccd2333e3f5d8"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="400" data-natural-height="300" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2149789/allthethings.jpg"></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="c7f875d262172a5ce1d1d5be6cc2bdec"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="a8475473eaeb624c238d1d94c4c40410">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators & Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="cdbaa59a785d3ea2b8ccebaab7a5b307">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 280px;" data-block-id="6e241c846a4ea1785f8c3513ed8c9de4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> request(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(133, 153, 0)">=</span><span style="color:rgb(133, 153, 0)">></span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
getJSON<span style="color:rgb(147, 161, 161)">(</span>url, resolve<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 148px; top: 350px;" data-block-id="2e60a0dc0a3833b1028232df9c873e98"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="207" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="207" height="1" viewbox="0 100 207 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="207.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="567963526087dc70f2ca4a6d10636f9a"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="0c17be190d1081182b27bfdbf8212e10">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators & Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="ae11ba0d594b2386b7d9a8288af86589">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 151px;" data-block-id="3c0ca41b68b716c6eed732a96246b4f4"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterateGenerator(gen)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> generator <span style="color:rgb(133, 153, 0)">=</span> gen<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> ret;
|
||
<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> iterate(val)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
ret <span style="color:rgb(133, 153, 0)">=</span> generator.next<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(133, 153, 0)">if</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(133, 153, 0)">!</span>ret.done<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
ret.value.then<span style="color:rgb(147, 161, 161)">(</span>iterate<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span> <span style="color:rgb(133, 153, 0)">else</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">setTimeout</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
iterate<span style="color:rgb(147, 161, 161)">(</span>ret.value<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 143px; top: 218px;" data-block-id="4a61451e17ba805bad81a9f8c5e49e53"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="247" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="247" height="1" viewbox="0 100 247 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="247.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 194px; top: 318px;" data-block-id="280927949e79c5b75ffc78a3fc6544e0"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="259" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="259" height="1" viewbox="0 100 259 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="259.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 242px; top: 387px;" data-block-id="74eab7f04eaece240a794369157675df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="275" data-line-y2="99.5" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="275" height="1" viewbox="0 100 275 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="275.5" y2="100.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 290px; top: 490px;" data-block-id="c8d7ec9c33dd2970edddd2db64c578df"><div class="sl-block-content fragment" data-line-x1="0" data-line-y1="100" data-line-x2="212" data-line-y2="100" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="212" height="1" viewbox="0 100 212 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line><line stroke="#ff0000" stroke-width="3" x1="0.5" y1="100.5" x2="212.5" y2="100.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="20538dde8f8ae6de16a7b310e080144f"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="5a1ccf59e43725b918512bdb2d22f234">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11; text-align: left;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Generators & Promises</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="60d701128c72a0e7faeb785e0a3ad638">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 12;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 249px;" data-block-id="fe1928605b85df28609821c92634bc16"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em">iterateGenerator<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(133, 153, 0)">*</span> getData<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> entry1 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> data1 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry1<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> entry2 <span style="color:rgb(133, 153, 0)">=</span> yield request<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item2<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">var</span> data2 <span style="color:rgb(133, 153, 0)">=</span> JSON.<span style="color:rgb(38, 139, 210)">parse</span><span style="color:rgb(147, 161, 161)">(</span>entry2<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div></section><section data-id="bafc3fec81a2c04804a8bb7a1ff44d20"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 239px; height: auto;" data-block-id="e578cb5ad2196dead92782233dcc6d3d"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text">
|
||
<h1>Alternate Solution?</h1>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 313px; height: auto;" data-block-id="b2071f218e22f7341b782fde9aa5b3c2"><div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle">
|
||
<h2>Beyond ES6</h2>
|
||
</div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="780231b90b41fb453a7b1db6726c3f12"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 32px; height: auto;" data-block-id="3ef071da475468d87caa943fcfb675e7">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="03d2e04aa32186882ab0653c7abb923b">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; width: 663px; left: 98px; top: 148px;" data-block-id="44c04ec07fd59f7860d3331b64e7e493"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
|
||
request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> body;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>http://some_api/item1<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// Undefined</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 204px; top: 250px;" data-block-id="fb3c2c92313a58406a6742dc257364d7"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 317px;" data-block-id="8fe9d1e3cb9ab755c6d74eddf6ebe7ba"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="332" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="505" height="1" viewbox="-173 0 505 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="332.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 144px; top: 349px;" data-block-id="b21660af2376091da86139a356166ec8"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 16;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 122px; top: 517px;" data-block-id="f8e87b5ed1de1f3d3014752738e02442"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="38" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="211" height="1" viewbox="-173 0 211 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="38.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 349px; top: 550px;" data-block-id="0d90ac999c697ef633d2a3fde79ab960"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div></section><section class="has-light-background" data-background-color="#ffffff" data-id="3086aac54a037a7ac7128b789e9efd2e"><div class="sl-block" data-block-type="text" style="width: 857px; left: 98px; top: 22px; height: auto;" data-block-id="9506bf2e2e08a8bbd13d029a1e4953c5">
|
||
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; text-align: left;" dir="ui">
|
||
<h1><span style="font-size:52.5px; line-height:62.0455px">Async / Await (ES7)</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; left: 80px; top: -7px; background: linear-gradient(rgb(192, 192, 192), rgb(255, 254, 89));" data-block-id="114e94949c639d60f6b6fc2d9beadb74">
|
||
<div class="sl-block-content" data-line-x1="-301" data-line-y1="512" data-line-x2="-301" data-line-y2="-202" data-line-color="#fbde34" data-line-start-type="none" data-line-end-type="none" style="z-index: 11;" data-line-width="4px">
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="1" height="714" viewbox="-301 -202 1 714"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-301" y1="512" x2="-301" y2="-202"></line><line stroke="#fbde34" stroke-width="4" x1="-301" y1="512" x2="-301" y2="-202"></line></svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 676px; left: 98px; top: 119px;" data-block-id="2ee06920567cc32a0744e01077d7099a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre style="color:rgb(88, 110, 117); font-size:0.9333em"><span style="font-size:0.7em"><span style="color:rgb(38, 139, 210)">var</span> request <span style="color:rgb(133, 153, 0)">=</span> require<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>request<span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
|
||
<span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> getJSON(url)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(133, 153, 0)">return</span> <span style="color:rgb(133, 153, 0)">new</span> Promise<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>resolve, reject<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
request<span style="color:rgb(147, 161, 161)">(</span>url, <span style="color:rgb(38, 139, 210)">function</span><span style="color:rgb(147, 161, 161)">(</span>error, response, body<span style="color:rgb(147, 161, 161)">)</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
resolve<span style="color:rgb(147, 161, 161)">(</span>body<span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
async <span style="color:rgb(165, 120, 0)"><span style="color:rgb(38, 139, 210)">function</span> main()</span> <span style="color:rgb(38, 139, 210)">{</span>
|
||
<span style="color:rgb(38, 139, 210)">var</span> data <span style="color:rgb(133, 153, 0)">=</span> await getJSON<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span>data<span style="color:rgb(147, 161, 161)">)</span>; <span style="color:rgb(147, 161, 161)">// NOT undefined!</span>
|
||
<span style="color:rgb(38, 139, 210)">}</span>
|
||
|
||
main<span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(147, 161, 161)">)</span>;
|
||
console<span style="color:rgb(38, 139, 210)">.log</span><span style="color:rgb(147, 161, 161)">(</span><span style="color:rgb(38, 145, 134)"><span style="color:rgb(198, 0, 0)">'</span>The data is: <span style="color:rgb(198, 0, 0)">'</span></span><span style="color:rgb(147, 161, 161)">)</span>;</span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 121px; top: 253px;" data-block-id="17d1eda764290f592b19e99c01edb0e4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="33" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 13;" data-line-width="3px" data-fragment-index="0"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="206" height="1" viewbox="-173 0 206 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="33.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 171px; top: 322px;" data-block-id="ffe4e23f354c4aeae840297bd34f42a4"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-35" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 14;" data-line-width="3px" data-fragment-index="1"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="138" height="1" viewbox="-173 0 138 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-34.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 490px;" data-block-id="3b552b0e25082a1fe472eb33f0996f68"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-111" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 15;" data-line-width="3px" data-fragment-index="2"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="62" height="1" viewbox="-173 0 62 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-110.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 262px; top: 559px;" data-block-id="2245fcc89bb768e540ac5e64f3d1ceda"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="-115" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 17;" data-line-width="3px" data-fragment-index="3"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="58" height="1" viewbox="-173 0 58 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="-114.5" y2="0.5"></line></svg></div></div>
|
||
<div class="sl-block" data-block-type="line" style="width: auto; height: auto; min-width: 1px; min-height: 1px; left: 98px; top: 690px;" data-block-id="b57b1cd3ebfd5d50b4099e6b92e44418"><div class="sl-block-content fragment" data-line-x1="-173" data-line-y1="0" data-line-x2="164.5" data-line-y2="0" data-line-color="#ff0000" data-line-start-type="none" data-line-end-type="none" style="z-index: 18;" data-line-width="3px" data-fragment-index="4"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveaspectratio="xMidYMid" width="338" height="1" viewbox="-173 0 338 1"><line stroke="rgba(0,0,0,0)" stroke-width="15" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line><line stroke="#ff0000" stroke-width="3" x1="-172.5" y1="0.5" x2="165.5" y2="0.5"></line></svg></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 438.298px; left: 129px; top: 162px;" data-block-id="f9e85462aa600a10bdf3f9dbe26ab3e0"><div class="sl-block-content"><img data-natural-width="658" data-natural-height="412" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157420/meme3.jpg"></div></div></section><section><div class="sl-block" data-block-type="image" style="width: 700px; height: 563.485px; left: 130px; top: 68px;" data-block-id="662e55ac2028644373730d66a86ce2c7"><div class="sl-block-content"><img data-natural-width="964" data-natural-height="776" data-src="https://s3.amazonaws.com/media-p.slid.es/uploads/280009/images/2157539/cheatsheet.png"></div></div></section><section data-id="1beb2db9b5bb7d4388a4b6bc1863dcfd"><div class="sl-block" data-block-type="text" style="width: 800px; left: 80px; top: 140px; height: auto;" data-block-id="1e064ea6d54c38502045685ba11c0f98"><div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 11;">
|
||
<h1>Thank you everyone!</h1>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 450px; left: 254px; top: 268px;" data-block-id="2bb55f2f1712233f4f06a9eefc53c90a"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
|
||
<pre><span style="font-size:0.7em">Github: <a href="https://github.com/DrkSephy" target="_blank">https://github.com/DrkSephy</a></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 473px; left: 243px; top: 313px;" data-block-id="4d196c2d82748488c59e3906d4b9bcbe"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 13;">
|
||
<pre><span style="font-size:0.7em">Blog: <a href="http://drksephy.github.io/blog/" target="_blank">http://drksephy.github.io/blog/</a></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: 180px; top: 404px;" data-block-id="9d548cc2b462c8e46464116f11fec427"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
|
||
<pre><span style="font-size:0.7em">LinkedIn: <a href="https://www.linkedin.com/in/drksephy" target="_blank">https://www.linkedin.com/in/drksephy</a></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 469px; left: 236px; top: 358px;" data-block-id="138744fb99d0d589eb81de4b92ecef9b"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 15;">
|
||
<pre><span style="font-size:0.7em">Twitter: <a href="https://twitter.com/DrkSephy" target="_blank">https://twitter.com/DrkSephy</a></span></pre>
|
||
</div></div>
|
||
<div class="sl-block" data-block-type="text" style="height: auto; min-width: 30px; min-height: 30px; width: 740px; left: 140px; top: 446px;" data-block-id="60a311f7d27eb8038cc3d09416b04fa5"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 16;">
|
||
<pre><span style="font-size:0.7em">ES6 Cheatsheet: <a href="https://github.com/DrkSephy/es6-cheatsheet" target="_blank">https://github.com/DrkSephy/es6-cheatsheet</a></span></pre>
|
||
</div></div></section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="deck-kudos">
|
||
<button class="kudos-button kudos-trigger" data-kudos-id="584013" data-kudoed-by-user="true">
|
||
<div class="kudos-heart">
|
||
<span class="kudos-icon icon i-heart-fill"></span>
|
||
</div>
|
||
<div class="kudos-count" data-kudos-value="15" data-kudos-id="584013"></div>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="pill summary-pill">
|
||
<div class="pill-picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
|
||
<div class="pill-content">
|
||
<h4 class="pill-title">ECMAScript 2015</h4>
|
||
<p class="pill-description">By David Leonard</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pill instructions-pill">
|
||
<div class="pill-picture"></div>
|
||
<div class="pill-content">
|
||
<h4 class="pill-title"></h4>
|
||
<p class="pill-description"></p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="column">
|
||
<header class="deck-info">
|
||
<div class="deck-social">
|
||
<a href="#" class="deck-social-button facebook-share-button" data-tooltip="Share on Facebook">
|
||
<span class="icon i-facebook"></span>
|
||
</a>
|
||
<a href="#" class="deck-social-button twitter-share-button" data-tooltip="Share on Twitter">
|
||
<span class="icon i-twitter"></span>
|
||
</a>
|
||
<a href="#" class="deck-social-button google-share-button" data-tooltip="Share on Google+">
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="deck-options">
|
||
<a class="fullscreen-button" data-tooltip="Fullscreen" href="#"><span class="icon i-fullscreen"></span></a>
|
||
<a class="comment-button" data-tooltip="Comments" data-scroll-to href="#comments" data-scroll-to data-scroll-to-offset="-90"><span class="icon i-comment-stroke"></span></a>
|
||
<a class="share-button" data-tooltip="Share" href="#"><span class="icon i-share"></span></a>
|
||
</div>
|
||
|
||
<div class="details">
|
||
<div class="deck-info">
|
||
<h3 class="title">ECMAScript 2015</h3>
|
||
<p class="description">An overview of ES6 features. </p>
|
||
<ul class="deck-meta">
|
||
<li data-tooltip="Published date" data-tooltip-delay="500">
|
||
<span class="icon i-clock"></span>
|
||
<time class="value ago" datetime="2016-01-13 04:42:35 UTC"></time>
|
||
</li>
|
||
<li data-tooltip="Kudos" data-tooltip-delay="500">
|
||
<span class="icon i-heart-fill"></span>
|
||
<span class="value" data-kudos-value="15" data-kudos-id="584013"></span>
|
||
</li>
|
||
<li data-tooltip="Views" data-tooltip-delay="500">
|
||
<span class="icon i-eye"></span>
|
||
<span class="value">3,451</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="user-info">
|
||
<div class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></div>
|
||
<div class="text">
|
||
<h3 class="title">
|
||
<a href="/drksephy" class="username">David Leonard</a>
|
||
<a href="/pricing#pro" class="pro-badge">PRO</a>
|
||
</h3>
|
||
<p class="description"></p>
|
||
<ul class="links">
|
||
<li><a href="https://github.com/DrkSephy" target="_blank"><span class="icon i-link"></span>https://github.com/DrkSephy</a></li>
|
||
<li><a href="http://twitter.com/DrkSephy" target="_blank"><span class="icon i-twitter"></span>DrkSephy</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="clear"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="comments" id="comments">
|
||
<div id="disqus_thread"><span class="placeholder">Loading comments...</span></div>
|
||
</section>
|
||
|
||
<section class="deck-list">
|
||
<h2>More from <a href="/drksephy">David Leonard</a></h2>
|
||
<ul class="carousel">
|
||
<li class="deck-thumbnail">
|
||
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/bcca32/decks.jpg)">
|
||
<a class="deck-link" href="/drksephy/deck-5"></a>
|
||
</div>
|
||
<footer class="deck-details">
|
||
<a class="author" href="/drksephy">
|
||
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
|
||
<span class="name">David Leonard</span>
|
||
</a>
|
||
<div class="stats">
|
||
<div>54<span class="icon i-eye"></span></div>
|
||
</div>
|
||
</footer>
|
||
</li>
|
||
<li class="deck-thumbnail">
|
||
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/21666a/decks.jpg)">
|
||
<a class="deck-link" href="/drksephy/tales-of-kratos"></a>
|
||
</div>
|
||
<footer class="deck-details">
|
||
<a class="author" href="/drksephy">
|
||
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
|
||
<span class="name">David Leonard</span>
|
||
</a>
|
||
<div class="stats">
|
||
<div>86<span class="icon i-eye"></span></div>
|
||
</div>
|
||
</footer>
|
||
</li>
|
||
<li class="deck-thumbnail">
|
||
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/ec076a/decks.jpg)">
|
||
<a class="deck-link" href="/drksephy/deck-3"></a>
|
||
</div>
|
||
<footer class="deck-details">
|
||
<a class="author" href="/drksephy">
|
||
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
|
||
<span class="name">David Leonard</span>
|
||
</a>
|
||
<div class="stats">
|
||
<div>179<span class="icon i-eye"></span></div>
|
||
</div>
|
||
</footer>
|
||
</li>
|
||
<li class="deck-thumbnail">
|
||
<div class="deck-image" style="background-image: url(https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/c63c39/decks.jpg)">
|
||
<a class="deck-link" href="/drksephy/deck-2"></a>
|
||
</div>
|
||
<footer class="deck-details">
|
||
<a class="author" href="/drksephy">
|
||
<span class="picture" style="background-image: url(https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140&d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png)"></span>
|
||
<span class="name">David Leonard</span>
|
||
</a>
|
||
<div class="stats">
|
||
<div>372<span class="icon i-eye"></span></div>
|
||
</div>
|
||
</footer>
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<footer class="global-footer">
|
||
<div class="link-group">
|
||
<h5>Product</h5>
|
||
<a href="http://slides.com/">Home</a>
|
||
<a href="http://slides.com/explore">Explore</a>
|
||
<a href="http://slides.com/features">Features</a>
|
||
<a href="http://slides.com/pricing">Pricing</a>
|
||
</div>
|
||
|
||
<div class="link-group">
|
||
<h5>Help</h5>
|
||
<a href="http://help.slides.com" target="_blank">Forum</a>
|
||
<a href="http://help.slides.com/knowledgebase" target="_blank">Knowledge base</a>
|
||
<a href="#" data-feedback-mode="smartvote">Give feedback</a>
|
||
<a href="#" data-feedback-mode="contact">Report an issue</a>
|
||
</div>
|
||
|
||
<div class="link-group">
|
||
<h5>News</h5>
|
||
<a href="http://blog.slides.com" target="_blank">Blog</a>
|
||
<a href="http://twitter.com/slides" target="_blank">Twitter</a>
|
||
<a href="http://facebook.com/slidesapp" target="_blank">Facebook</a>
|
||
<a href="http://plus.google.com/+slidesapp/" rel="publisher" target="_blank">Google+</a>
|
||
</div>
|
||
|
||
<div class="link-group">
|
||
<h5>Company</h5>
|
||
<a href="http://slides.com/about">About Slides</a>
|
||
<a href="http://slides.com/changelog">Changelog</a>
|
||
<a href="http://slides.com/terms">Terms of Service</a>
|
||
<a href="http://slides.com/privacy">Privacy Policy</a>
|
||
</div>
|
||
|
||
<div class="copyright"><span>© 2016 Slides, Inc.</span></div>
|
||
</footer>
|
||
|
||
</div> <!--! end of #container -->
|
||
<script>
|
||
UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/f7sH7NavrjjvuGxByaw.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();
|
||
|
||
UserVoice.push(['set', {
|
||
accent_color: '#448dd6',
|
||
trigger_color: 'white',
|
||
trigger_background_color: 'rgba(46, 49, 51, 0.6)',
|
||
position: 'automatic'
|
||
}]);
|
||
|
||
</script>
|
||
|
||
<script>
|
||
var SLConfig = {"deck":{"id":584013,"slug":"ecmascript-2015","title":"ECMAScript 2015","description":"An overview of ES6 features. ","visibility":"all","published_at":"2016-01-13T04:42:35.240Z","sanitize_messages":null,"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/secure/cff7c3/decks.jpg","view_count":3451,"user":{"id":280009,"username":"drksephy","name":"David Leonard","description":"","thumbnail_url":"https://www.gravatar.com/avatar/4eb4cc7c08d0fef5c542e08624472a7f?s=140\u0026d=https%3A%2F%2Fs3.amazonaws.com%2Fstatic.slid.es%2Fimages%2Fdefault-profile-picture.png","pro":true,"enterprise":false,"enterprise_manager":false,"settings":{"id":104558,"present_controls":false,"present_upsizing":false,"present_notes":true},"registered":true},"background_transition":"slide","transition":"slide","theme_id":null,"theme_font":"josefine","theme_color":"white-blue","auto_slide_interval":0,"comments_enabled":true,"forking_enabled":true,"rolling_links":false,"center":false,"should_loop":false,"share_notes":false,"slide_number":false,"rtl":false,"version":2}};
|
||
</script>
|
||
<script defer="defer" src="//assets.slid.es/assets/application-0f31ff3403cab3aa82c045dee9bbb97c.js"></script>
|
||
<script defer="defer" src="//assets.slid.es/assets/reveal.min-25b719b3b898da619ea3b535ce4f4dbd.js"></script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|