Added Unit testing and underscore.js demos

knaos · Dec 1, 2014 · 8018703 · 8018703
1 parent 3fbe103
commit 8018703
Show file tree

Hide file tree

Showing 114 changed files with 18,326 additions and 0 deletions.
diff --git a/3. Cookies and Web Storages/2. local-storage.html b/3. Cookies and Web Storages/2. local-storage.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Local Storage Demo</title>
+</head>
+<body>
+	<div>
+		<input id="key" type="text" placeholder="Insert key" />
+		<input id="value" type="text" placeholder="Insert value" />
+		<button id="put-btn">Put in local storage</button>
+		<button id="get-btn">get from local storage</button>
+	</div>
+	<div id="result">
+		Items: <br/>
+	</div>
+	<script>
+		(function () {
+			var result = document.getElementById('result');
+			var button = document.getElementById('put-btn');
+			button.addEventListener('click', function (e) {
+				var keyText = document.getElementById('key').value;
+				var valueText = document.getElementById('value').value;
+
+				localStorage.setItem(keyText, valueText);
+				result.innerHTML += 'Item added: ' + keyText + ' => ' + valueText + '<br />';
+			});
+
+			var getButton = document.getElementById('get-btn');
+			getButton.addEventListener('click', function (e) {
+				var keyText = document.getElementById('key').value;
+
+				result.innerHTML += keyText + ' => ' + localStorage.getItem(keyText) + '<br />';
+			});
+		}())
+	</script>
+</body>
+</html>
diff --git a/3. Cookies and Web Storages/3. session-storage.html b/3. Cookies and Web Storages/3. session-storage.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Session Storage Demo</title>
+</head>
+<body>
+	<div id="countDiv"></div>
+	<script>
+		function incrementLoads() {
+			if (!sessionStorage.counter) {
+				sessionStorage.setItem("counter", 0);
+			}
+
+			var currentCount = parseInt(sessionStorage.getItem("counter"));
+			currentCount++;
+			sessionStorage.setItem("counter", currentCount);
+
+			document.getElementById("countDiv").innerHTML = currentCount;
+		}
+
+		incrementLoads();
+	</script>
+</body>
+</html>
diff --git a/3. Cookies and Web Storages/4. saving-objects-in-web-storages.html b/3. Cookies and Web Storages/4. saving-objects-in-web-storages.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+</head>
+<body>
+<script src="scripts/storage-extensions.js"></script>
+<script>
+	var person = { name: 'Pesho', age: 12, grade: 3 };
+	localStorage.setObject('person', person);
+	console.log(localStorage.getObject('person'));
+</script>
+</body>
+</html>
diff --git a/3. Cookies and Web Storages/5. storage-event.html b/3. Cookies and Web Storages/5. storage-event.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Storage event</title>
+</head>
+<body>
+<script>
+	// Works only with different tabs
+	window.addEventListener('storage', storageEventHandler, false);
+
+	function storageEventHandler(evt){
+		alert('Storage event called!');
+	    console.dir("storage event called key: " + evt );
+	}
+
+	localStorage.setItem("someKey", "someValue");
+</script>
+</body>
+</html>
diff --git a/3. Cookies and Web Storages/scripts/cookie.js b/3. Cookies and Web Storages/scripts/cookie.js
@@ -0,0 +1,172 @@
+// Copyright (c) 2012 Florian H., https://github.com/js-coder https://github.com/js-coder/cookie.js
+
+!function (document, undefined) {
+
+	var cookie = function () {
+		return cookie.get.apply(cookie, arguments);
+	};
+
+	var utils = cookie.utils =  {
+
+		// Is the given value an array? Use ES5 Array.isArray if it's available.
+		isArray: Array.isArray || function (value) {
+			return Object.prototype.toString.call(value) === '[object Array]';
+		},
+
+		// Is the given value a plain object / an object whose constructor is `Object`?
+		isPlainObject: function (value) {
+			return !!value && Object.prototype.toString.call(value) === '[object Object]';
+		},
+
+		// Convert an array-like object to an array – for example `arguments`.
+		toArray: function (value) {
+			return Array.prototype.slice.call(value);
+		},
+
+		// Get the keys of an object. Use ES5 Object.keys if it's available.
+		getKeys: Object.keys || function (obj) {
+			var keys = [],
+				 key = '';
+			for (key in obj) {
+				if (obj.hasOwnProperty(key)) keys.push(key);
+			}
+			return keys;
+		},
+
+		// Unlike JavaScript's built-in escape functions, this method
+		// only escapes characters that are not allowed in cookies.
+		escape: function (value) {
+			return String(value).replace(/[,;"\\=\s%]/g, function (character) {
+				return encodeURIComponent(character);
+			});
+		},
+
+		// Return fallback if the value is not defined, otherwise return value.
+		retrieve: function (value, fallback) {
+			return value == null ? fallback : value;
+		}
+
+	};
+
+	cookie.defaults = {};
+
+	cookie.expiresMultiplier = 60 * 60 * 24;
+
+	cookie.set = function (key, value, options) {
+
+		if (utils.isPlainObject(key)) { // Then `key` contains an object with keys and values for cookies, `value` contains the options object.
+
+
+			for (var k in key) { // TODO: `k` really sucks as a variable name, but I didn't come up with a better one yet.
+				if (key.hasOwnProperty(k)) this.set(k, key[k], value);
+			}
+
+		} else {
+
+			options = utils.isPlainObject(options) ? options : { expires: options };
+
+			var expires = options.expires !== undefined ? options.expires : (this.defaults.expires || ''), // Empty string for session cookies.
+			    expiresType = typeof(expires);
+
+			if (expiresType === 'string' && expires !== '') expires = new Date(expires);
+			else if (expiresType === 'number') expires = new Date(+new Date + 1000 * this.expiresMultiplier * expires); // This is needed because IE does not support the `max-age` cookie attribute.
+
+			if (expires !== '' && 'toGMTString' in expires) expires = ';expires=' + expires.toGMTString();
+
+			var path = options.path || this.defaults.path; // TODO: Too much code for a simple feature.
+			path = path ? ';path=' + path : '';
+
+			var domain = options.domain || this.defaults.domain;
+			domain = domain ? ';domain=' + domain : '';
+
+			var secure = options.secure || this.defaults.secure ? ';secure' : '';
+
+			document.cookie = utils.escape(key) + '=' + utils.escape(value) + expires + path + domain + secure;
+
+		}
+
+		return this; // Return the `cookie` object to make chaining possible.
+
+	};
+
+	// TODO: This is commented out, because I didn't come up with a better method name yet. Any ideas?
+	// cookie.setIfItDoesNotExist = function (key, value, options) {
+	//	if (this.get(key) === undefined) this.set.call(this, arguments);
+	// },
+
+	cookie.remove = function (keys) {
+
+		keys = utils.isArray(keys) ? keys : utils.toArray(arguments);
+
+		for (var i = 0, l = keys.length; i < l; i++) {
+			this.set(keys[i], '', -1);
+		}
+
+		return this; // Return the `cookie` object to make chaining possible.
+	};
+
+	cookie.empty = function () {
+
+		return this.remove(utils.getKeys(this.all()));
+
+	};
+
+	cookie.get = function (keys, fallback) {
+
+		fallback = fallback || undefined;
+		var cookies = this.all();
+
+		if (utils.isArray(keys)) {
+
+			var result = {};
+
+			for (var i = 0, l = keys.length; i < l; i++) {
+				var value = keys[i];
+				result[value] = utils.retrieve(cookies[value], fallback);
+			}
+
+			return result;
+
+		} else return utils.retrieve(cookies[keys], fallback);
+
+	};
+
+	cookie.all = function () {
+
+		if (document.cookie === '') return {};
+
+		var cookies = document.cookie.split('; '),
+			  result = {};
+
+		for (var i = 0, l = cookies.length; i < l; i++) {
+			var item = cookies[i].split('=');
+			result[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
+		}
+
+		return result;
+
+	};
+
+	cookie.enabled = function () {
+
+		if (navigator.cookieEnabled) return true;
+
+		var ret = cookie.set('_', '_').get('_') === '_';
+		cookie.remove('_');
+		return ret;
+
+	};
+
+	// If an AMD loader is present use AMD.
+	// If a CommonJS loader is present use CommonJS.
+	// Otherwise assign the `cookie` object to the global scope.
+
+	if (typeof define === 'function' && define.amd) {
+		define(function () {
+			return cookie;
+		});
+	} else if (typeof exports !== 'undefined') {
+		exports.cookie = cookie;
+	} else window.cookie = cookie;
+
+}(document);
diff --git a/3. Cookies and Web Storages/scripts/cookies.js b/3. Cookies and Web Storages/scripts/cookies.js
@@ -0,0 +1,67 @@
+var cookie = (function () {
+  if (!String.prototype.startsWith) {
+    String.prototype.startsWith = function(str) {
+      if (this.length < str.length) {
+        return false;
+      }
+      for (var i = 0; i < str.length; i++) {
+        if (this[i] !== str[i]) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+
+  function setCookie(name, value, expires, path, domain) {
+    var cookie = name + "=" + escape(value) + ";";
+
+    if (expires) {
+      if(expires instanceof Date) {
+        isNaN(expires.getTime()) ? expires = new Date() : null;
+      } else {
+        expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
+      }
+
+      cookie += "expires=" + expires.toGMTString() + ";";
+    }
+
+    if (path) {
+      cookie += "path=" + path + ";";
+    }
+    if (domain) {
+      cookie += "domain=" + domain + ";";
+    }
+
+    document.cookie = cookie;
+  }
+
+  function getCookie(name) {
+    var allCookies = document.cookie.split(";");
+    for (var i = 0; i < allCookies.length; i++) {
+        var cookie = allCookies[i];
+        var trailingZeros = 0;
+        for (var j = 0; j < cookie.length; j++) {
+            if (cookie[j] !== " ") {
+                break;
+            }
+        }
+        cookie = cookie.substring(j);
+        if (cookie.startsWith(name + "=")) {
+            return cookie;
+        }
+    }
+  }
+
+  function deleteCookie(name) {
+    if(getCookie(name)) {
+      setCookie(name, '', -1);
+    }
+  }
+
+  return {
+    get: getCookie,
+    set: setCookie,
+    delete: deleteCookie
+  }
+}());
diff --git a/3. Cookies and Web Storages/scripts/storage-extensions.js b/3. Cookies and Web Storages/scripts/storage-extensions.js
@@ -0,0 +1,7 @@
+Storage.prototype.setObject = function setObject(key, obj) {
+    this.setItem(key, JSON.stringify(obj));
+};
+
+Storage.prototype.getObject = function getObject(key) {
+    return JSON.parse(this.getItem(key));
+};
diff --git a/4. Consuming-Remote-Data/1. using-xmlhttprequest/cross-browser-xhr.html b/4. Consuming-Remote-Data/1. using-xmlhttprequest/cross-browser-xhr.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head> <title>Consuming remote data with JavaScript: Crossbrowser XHR</title>
+    <style>
+			.info{
+				font-size: 0.9em;
+				font-style: italic;
+				border: 1px solid orange;
+				display: block;
+				padding:5px 15px;
+				width: 250px;
+				margin: 0 auto;
+				text-indent: 0;
+			}
+		</style>
+</head>
+<body>
+	<p class='info'>This web page should be run on a server (localhost or in WWW).</p>
+	<div id="http-response"></div>
+
+	<script src="cross-browser-xhr.js"></script>
+	<script>
+		sendRequest('GET', 'http://localhost:3000/students', true);
+	</script>
+</body>
+</html>