Add first batch of demo code

9 files changed, 231 insertions, 0 deletions

diff --git a/demos/1-es5-class.example.js b/demos/1-es5-class.example.js
new file mode 100644
index 0000000..2ac70e7
--- /dev/null
+++ b/demos/1-es5-class.example.js
@@ -0,0 +1,13 @@
+function Rocket(name) {
+  this.name = name
+}
+
+Rocket.prototype.launch = function() {
+  console.log('launching...')
+}
+
+Rocket.prototype.land = function() {
+  console.log('landing...')
+}
+
+var myRocket = new Rocket('Felon Musk')
diff --git a/demos/2-es6-class.example.js b/demos/2-es6-class.example.js
new file mode 100644
index 0000000..1e7c653
--- /dev/null
+++ b/demos/2-es6-class.example.js
@@ -0,0 +1,15 @@
+class Rocket {
+  constructor(name) {
+    this.name = name
+  }
+
+  launch() {
+    console.log('launching...')
+  }
+
+  land() {
+    console.log('landing...')
+  }
+}
+
+const myRocket = new Rocket('Felon Musk II')
diff --git a/demos/3-var-let-const.example.js b/demos/3-var-let-const.example.js
new file mode 100644
index 0000000..3c1c521
--- /dev/null
+++ b/demos/3-var-let-const.example.js
@@ -0,0 +1,37 @@
+function computeTotal1(subtotal) {
+  if (subtotal > 50) {
+    // Variables declared with var are scoped to
+    // the function. This means statements outside
+    // of the if block can use the variable too.
+
+    // If this variable was declared with let,
+    // this would be an error
+    var discount = 10
+  } else {
+    discount = 5
+  }
+  return subtotal - discount
+}
+
+function computeTotal3(subtotal) {
+  // Declare the variable at the outer scope
+  let discount
+  if (subtotal > 50) {
+    discount = 10
+  } else {
+    discount = 5
+  }
+  return subtotal - discount
+}
+
+function computeTotal4(subtotal) {
+  // const declarations are block scoped and cannot be re-assigned
+  // (i.e discount = 7 is illegal)
+  const discount = subtotal > 50 ? 10 : 5
+  // Objects declared using const cannot be re-assigned either...
+  const customer = {}
+  // but the object itself may still be
+  // modified
+  customer.loyaltyDiscount = 5
+  return subtotal - discount - customer.loyaltyDiscount
+}
diff --git a/demos/4-anonymous-functions-callbacks.example.js b/demos/4-anonymous-functions-callbacks.example.js
new file mode 100644
index 0000000..28cf6ab
--- /dev/null
+++ b/demos/4-anonymous-functions-callbacks.example.js
@@ -0,0 +1,28 @@
+// Named function
+function getArticles() {}
+
+function getPlaylist(callback) {
+  callback(null, ['Yandhi', 'oh wait shit nevermind'])
+}
+
+// Anonymous function.
+// Usually anonymous functions
+// are passed as arguments
+// to async functions
+getPlaylist(function(err, res) {})
+
+// You can also name anonymous functions
+// and refer to it by name
+let getPlaylistCallback = function(err, res) {
+  if (err) {
+    console.error(err)
+  } else {
+    console.log(res)
+  }
+}
+
+// Regular named functions work too
+function namedPlaylistCallback(err, res) {}
+
+getPlaylist(getPlaylistCallback)
+getPlaylist(namedPlaylistCallback)
diff --git a/demos/5-sync-async.example.js b/demos/5-sync-async.example.js
new file mode 100644
index 0000000..0dd50ef
--- /dev/null
+++ b/demos/5-sync-async.example.js
@@ -0,0 +1,53 @@
+const ARTICLES = [
+  'Felon Ruins the Weed Number',
+  'Webassembly is Finally Fast',
+  'Spooky Torvalds Ghost is Reportedly Still Berating People'
+]
+
+// This function will wait for a bit and
+// then return our list of articles
+function getArticlesSync() {
+  // Let's pretend we have a network connection in this
+  // function and we need to wait for a bit before
+  // returning the result, so we use a long (but empty)
+  // for loop to stay busy
+  for (let i = 0; i < 10e9; i++) {}
+  if (ARTICLES.length <= 0) {
+    throw new Error('No articles to return')
+  }
+  return ARTICLES
+}
+
+// This function requires a callback function
+// which is invoked when the articles are ready.
+// Note that the callback function should have the form
+// function (err, result) where err is an error instance,
+// and result is the thing you actually want
+function getArticlesAsync(callbackFunction) {
+  // we use setTimeout to simulate our "network delay"
+  setTimeout(function() {
+    if (ARTICLES.length <= 0) {
+      // Instead of throwing an error like the synchronous case,
+      // we pass one back as the first argument
+      callbackFunction(new Error('No articles to return'))
+    }
+    // If all is well, we pass a null error to indicate success,
+    // and then pass the real result as the second argument
+    callbackFunction(null, ARTICLES)
+  }, 4 * 1000)
+}
+
+try {
+  let syncArticles = getArticlesSync()
+  console.log(syncArticles)
+} catch (err) {
+  console.error(err)
+}
+
+getArticlesAsync(function(err, result) {
+  if (err) {
+    console.error(err)
+  } else {
+    console.log(result)
+  }
+})
diff --git a/demos/6-callback-hell.example.js b/demos/6-callback-hell.example.js
new file mode 100644
index 0000000..345c959
--- /dev/null
+++ b/demos/6-callback-hell.example.js
@@ -0,0 +1,34 @@
+function getDataA(arg, callback) {
+  callback(null, 'Ah yes data a, excellent')
+}
+
+function getDataB(arg, callback) {
+  callback(null, 'Ah yes data b, excellent')
+}
+
+function getDataC(arg, callback) {
+  callback(null, 'Ah yes data c, excellent')
+}
+
+function getDataD(arg, callback) {
+  callback(null, 'Ah yes data d, excellent')
+}
+
+function getDataE(arg, callback) {
+  callback(null, 'Ah yes data e, excellent')
+}
+
+// Known as "callback hell" or the
+// "the pyramid of doom" -- both work
+getDataA('here we go', function(err, res) {
+  getDataB(res, function(err, res) {
+    getDataC(res, function(err, res) {
+      getDataD(res, function(err, res) {
+        getDataE(res, function(err, res) {
+          // kewl
+          console.log(res)
+        })
+      })
+    })
+  })
+})
diff --git a/demos/7-promises.example.js b/demos/7-promises.example.js
new file mode 100644
index 0000000..669561d
--- /dev/null
+++ b/demos/7-promises.example.js
@@ -0,0 +1,51 @@
+// We return a new instance of the Promise object.
+// The constructor takes a callback as the first parameter,
+// and then this callback receives 2 more callbacks:
+// resolve and reject. Calling resolve can be thought of like
+// "return", while reject can be thought of like "throws"
+function getDataA(arg) {
+  return new Promise(function(resolve, reject) {
+    resolve('Ah yes data a, excellent')
+  })
+}
+
+function getDataB(arg) {
+  return new Promise(function(resolve, reject) {
+    resolve('Ah yes data b, excellent')
+  })
+}
+
+function getDataC(arg) {
+  return new Promise(function(resolve, reject) {
+    resolve('Ah yes data c, excellent')
+  })
+}
+
+function getDataD(arg) {
+  return new Promise(function(resolve, reject) {
+    resolve('Ah yes data d, excellent')
+  })
+}
+
+function getDataE(arg) {
+  return new Promise(function(resolve, reject) {
+    resolve('Ah yes data e, excellent')
+  })
+}
+
+getDataA('here we go')
+  .then(function(err, res) {
+    return getDataB(res)
+  })
+  .then(function(err, res) {
+    return getDataC(res)
+  })
+  .then(function(err, res) {
+    return getDataD(res)
+  })
+  .then(function(err, res) {
+    return getDataE(res)
+  })
+  .then(function(err, res) {
+    console.log(res)
+  })
diff --git a/demos/8-jquery-vs-dom.example.js b/demos/8-jquery-vs-dom.example.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/demos/8-jquery-vs-dom.example.js
diff --git a/demos/9-dom-manipulation.example.js b/demos/9-dom-manipulation.example.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/demos/9-dom-manipulation.example.js