La winter 2015

.gitattributes

@@ -0,0 +1,63 @@
+###############################################################################
+# Set default behavior to automatically normalize line endings.
+###############################################################################
+* text=auto
+
+###############################################################################
+# Set default behavior for command prompt diff.
+#
+# This is need for earlier builds of msysgit that does not have it on by
+# default for csharp files.
+# Note: This is only used by command line
+###############################################################################
+#*.cs     diff=csharp
+
+###############################################################################
+# Set the merge driver for project and solution files
+#
+# Merging from the command prompt will add diff markers to the files if there
+# are conflicts (Merging from VS is not affected by the settings below, in VS
+# the diff markers are never inserted). Diff markers may cause the following 
+# file extensions to fail to load in VS. An alternative would be to treat
+# these files as binary and thus will always conflict and require user
+# intervention with every merge. To do so, just uncomment the entries below
+###############################################################################
+#*.sln       merge=binary
+#*.csproj    merge=binary
+#*.vbproj    merge=binary
+#*.vcxproj   merge=binary
+#*.vcproj    merge=binary
+#*.dbproj    merge=binary
+#*.fsproj    merge=binary
+#*.lsproj    merge=binary
+#*.wixproj   merge=binary
+#*.modelproj merge=binary
+#*.sqlproj   merge=binary
+#*.wwaproj   merge=binary
+
+###############################################################################
+# behavior for image files
+#
+# image files are treated as binary by default.
+###############################################################################
+#*.jpg   binary
+#*.png   binary
+#*.gif   binary
+
+###############################################################################
+# diff behavior for common document formats
+# 
+# Convert binary document formats to text before diffing them. This feature
+# is only available from the command line. Turn it on by uncommenting the 
+# entries below.
+###############################################################################
+#*.doc   diff=astextplain
+#*.DOC   diff=astextplain
+#*.docx  diff=astextplain
+#*.DOCX  diff=astextplain
+#*.dot   diff=astextplain
+#*.DOT   diff=astextplain
+#*.pdf   diff=astextplain
+#*.PDF   diff=astextplain
+#*.rtf   diff=astextplain
+#*.RTF   diff=astextplain

01_JSIntro/app.js

@@ -0,0 +1,98 @@
+//var x = 1 + 2;
+//console.log(x);
+
+// 6 data types:
+// number, boolean, string, 
+// function, object, undefined
+
+//var a = 110.1 + .2;
+//a = a.toFixed(2);
+//console.log(a, typeof a);
+
+//var s = "O'Grady duh!";
+//console.log(s, typeof s);
+
+// var o = { name:"Brock"};
+// o.age = 5;
+// o['age'] = 10;
+//o.age = null;
+//delete o.age;
+//console.log(o, typeof o);
+
+// var y = ["apple","bob","cat"];
+// for(var i = 0; i < y.length; i++){
+	// console.log(y[i]);
+// }
+//y[0];
+
+//console.log(typeof y);
+
+// for(var key in o){
+	// console.log(key, o[key]);
+// }
+
+// var b = false;
+// console.log(b, typeof b);
+
+// var add = function(a, b){
+	// return a + b;
+// }
+// var r = add(3, 4);
+// console.log(r, typeof add);
+
+// function add(a, b){
+	// console.log(b);
+	// return a + b;
+// }
+// var x = add("4", "bob");
+// console.log(x, typeof x);
+
+// falsy: undefined, null, false
+// 0, NaN, ""
+// truthy: !falsy
+// var a = 10;
+// var b = +"5";
+// var x = [];
+// console.log(x, typeof x);
+// if (x){
+	// console.log("truthy")
+// }
+// else{
+	// console.log("falsy")
+// }
+// JSON
+// {name:"Brock", age:5}
+// var a = false;
+// var b = "0";
+// if (a == b){
+	// console.log("same");
+// }
+// else{
+	// console.log("not same");
+// }
+
+//var x = 10;
+//x = 10;
+
+// IIFE
+(function(){
+
+	"use strict";
+
+	function foo(){
+		//bar();
+		var x = 5;
+		bar();
+
+		function bar(){
+			console.log(x);
+		}
+	}
+
+	foo();
+	//foo.x = 5;
+	//console.log(x);
+	//bar();
+
+})();
+

02_FunctionalJS/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Functional JS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>FunctionalJS</h1>
+
+    <ul id="posts"></ul>
+
+    <button>Click Me!</button>
+    <button>Click Me!</button>
+    <button>Click Me!</button>
+
+    <script src="script2.js"></script>
+
+    <script src="http://www.reddit.com/r/javascript.json?jsonp=render"></script>
+
+</body>
+</html>

02_FunctionalJS/script.js

@@ -0,0 +1,75 @@
+var postsUL = document.getElementById('posts');
+
+var num = 123;
+var str = 'abc';
+var obj = {};
+var arr = [];
+var fun = function() {};
+
+function render(data) {
+    console.log(data.data.children);
+
+    // var posts = [];
+    //
+    // for (var i = 0; i < data.data.children.length; i++) {
+    //     var post = data.data.children[i];
+    //     posts.push(post.data);
+    // }
+
+    var posts = data.data.children
+        .map(flatten)
+        .filter(sfw)
+        .map(simplify)
+    ;
+
+    console.table(posts);
+
+    posts.forEach(renderLI);
+
+    var total = posts.reduce(function(previous, current) {
+        return previous + current.numComments;
+    }, 0);
+
+    console.log(total);
+
+    var avg = total / posts.length;
+
+    console.log(avg);
+
+    var avg2 = posts.reduce(function(p, c, i) {
+        return p + (c.numComments - p) / (i + 1);
+    }, 0);
+
+    console.log(avg2);
+}
+
+function flatten(post) {
+    return post.data;
+}
+
+function sfw(post) {
+    return !post.over_18;
+}
+
+function simplify(post) {
+    return {
+        title: post.title,
+        url: post.url,
+        thumbnail: post.thumbnail,
+        numComments: post.num_comments
+    };
+}
+
+function renderLI(post) {
+    var li = document.createElement('li');
+
+    if (post.thumbnail) {
+        var img = document.createElement('img');
+        img.src = post.thumbnail;
+        li.appendChild(img);
+    }
+
+    li.appendChild(document.createTextNode(post.title));
+
+    postsUL.appendChild(li);
+}

02_FunctionalJS/script2.js

@@ -0,0 +1,102 @@
+var buttons = document.querySelectorAll('button');
+
+// for (var i = 0; i < buttons.length; i++) {
+//     (function(j) {
+//         var button = buttons[j];
+//         button.addEventListener('click', function() {
+//             alert('You clicked button # ' + (j + 1));
+//         });
+//     })(i);
+// }
+
+var forEach = Array.prototype.forEach;
+
+// buttons.forEach = forEach;
+//
+// buttons.forEach(function(button) {
+//     console.log(button);
+// });
+
+forEach.call(buttons, function(button, i) {
+    button.addEventListener('click', function() {
+        alert('You clicked button # ' + (i + 1));
+    });
+});
+
+var postsUL = document.getElementById('posts');
+
+function render(data) {
+    console.log(data.data.children);
+
+    var posts = data.data.children
+        // .map(pluck('data'))
+        // .map(get.bind(null, 'data'))
+        .map(function(post) {
+            return get('data', post);
+        })
+        .filter(not(pluck('over_18')))
+        .map(props([ 'title', 'url', 'thumbnail', 'num_comments' ]))
+    ;
+
+    console.table(posts);
+
+    posts.forEach(renderLI);
+
+    var total = posts.reduce(function(previous, current) {
+        return previous + current.num_comments;
+    }, 0);
+
+    console.log(total);
+
+    var avg = total / posts.length;
+
+    console.log(avg);
+
+    var avg2 = posts.reduce(function(p, c, i) {
+        return p + (c.num_comments - p) / (i + 1);
+    }, 0);
+
+    console.log(avg2);
+}
+
+function get(name, obj) {
+    return obj[name];
+}
+
+function pluck(name) {
+    return function(obj) {
+        return obj[name];
+    };
+}
+
+function not(fn) {
+    return function(obj) {
+        return !fn(obj);
+    };
+}
+
+function props(keys) {
+    return function(obj) {
+        var newObj = {};
+
+        keys.forEach(function(key) {
+            newObj[key] = obj[key];
+        });
+
+        return newObj;
+    };
+}
+
+function renderLI(post) {
+    var li = document.createElement('li');
+
+    if (post.thumbnail) {
+        var img = document.createElement('img');
+        img.src = post.thumbnail;
+        li.appendChild(img);
+    }
+
+    li.appendChild(document.createTextNode(post.title));
+
+    postsUL.appendChild(li);
+}

02_FunctionalJS/style.css

@@ -0,0 +1,3 @@
+body {
+    background: white;
+}

03_ObjectOrientedJS/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Object-oriented JS</title>
+</head>
+<body>
+    <h1>Object-oriented JS</h1>
+
+    <button id="speak" name="aButton">Speak</button>
+
+    <script src="node_modules/6to5/browser.js"></script>
+
+    <script src="script.js" type="text/6to5"></script>
+</body>
+</html>