From 88700a8488381b33f16bece7b175f513e00ac520 Mon Sep 17 00:00:00 2001 From: Kyle Roberts Date: Mon, 25 May 2015 23:20:25 -0400 Subject: [PATCH] #2 First pass at basic functions page. This still needs some work, and we'll probably want to add more gotcha type info or explanations about the various use cases. --- app/_app-module.js | 3 +- app/functions/_functions-module.js | 3 + app/functions/content.html | 107 +++++++++++++++++++++++++++++ app/functions/repl.html | 28 ++++++++ app/index.html | 1 + app/router/_router-module.js | 7 ++ app/router/router-module-test.js | 1 + bower.json | 3 +- style/app.scss | 4 ++ tasks/style.js | 7 +- 10 files changed, 160 insertions(+), 4 deletions(-) create mode 100644 app/functions/_functions-module.js create mode 100644 app/functions/content.html create mode 100644 app/functions/repl.html diff --git a/app/_app-module.js b/app/_app-module.js index 4dcfef5..94c16a2 100644 --- a/app/_app-module.js +++ b/app/_app-module.js @@ -5,5 +5,6 @@ angular.module('jslab', [ 'jslab.templates', 'jslab.components', 'jslab.home', - 'jslab.objects' + 'jslab.objects', + 'jslab.functions' ]); diff --git a/app/functions/_functions-module.js b/app/functions/_functions-module.js new file mode 100644 index 0000000..ce4fd8f --- /dev/null +++ b/app/functions/_functions-module.js @@ -0,0 +1,3 @@ +'use strict'; + +angular.module('jslab.functions', []); diff --git a/app/functions/content.html b/app/functions/content.html new file mode 100644 index 0000000..92bd8cc --- /dev/null +++ b/app/functions/content.html @@ -0,0 +1,107 @@ +

Functions

+ +

+ Understanding JavaScript functions, and the many ways they can be used, is one of the best ways to get your JS skills + to the next level. +

+ +

+ There are a few different ways that you can define functions. We'll start with the simplest to understand, the regular + function declaration: +

+ +
+function add(x) {
+  return 4 + x;
+}
+
+ +

+ We can call "add" elsewhere in our script with a single argument: +

+ +
+	add(3);
+
+ +

+ This form of method declaration is usually best used in situations where you want to break up a larger function's + internals into separate private functions that won't be reused again: +

+ +

+function doALotOfThings() {
+  doA();
+  doB();
+
+  function doA() {
+    // code for doing 'A'
+  }
+
+  function doB() {
+    // code for doing 'B'
+  }
+
+}
+
+ +

+   + Defining functions like this at the top level of a file or script block (i.e. not in an object or within another + function) will put the function under the global scope, which we generally want to avoid. +

+ +

+ The second way of declaring a function is on an object. This type of function is typically called a "method": +

+ +

+var math = {
+  add: function(x) {
+    return 4 + x;
+  }
+};
+
+ +

+ You'll find yourself declaring functions in this fashion often, since you'll either want to call a method on an + object or namespace functions so that they don't sit direction under the global namespace. To call the method above, + we execute it like so: +

+ +
+	math.add(3);
+
+ +

+ The third way of declaring functions involves creating contructor functions. These functions allow us to create + and initialize JavaScript objects: +

+ +
+function Animal(name, type) {
+  this.name = name;
+  this.type = type;
+
+  this.sayHi = function() {
+    return "Hi, I'm " + this.name + " the " + this.type;
+  }
+}
+
+ +

+ Using this function, we can create Animal objects and use their methods to act on them. Constructors are special in + that you have to call it using the new keyword: +

+ +
+var dumbo = new Animal("dumbo", "elephant");
+dumbo.sayHi();
+
+ +

+   + Forgetting the new keyword can result in creating an object where the this is bound to the + global scope window instead of a new object's scope. Make sure to always use new! +

+ diff --git a/app/functions/repl.html b/app/functions/repl.html new file mode 100644 index 0000000..8694054 --- /dev/null +++ b/app/functions/repl.html @@ -0,0 +1,28 @@ + + diff --git a/app/index.html b/app/index.html index 55b3851..16b93a2 100644 --- a/app/index.html +++ b/app/index.html @@ -23,6 +23,7 @@ JS Lab
diff --git a/app/router/_router-module.js b/app/router/_router-module.js index 5fd3a09..cf05491 100644 --- a/app/router/_router-module.js +++ b/app/router/_router-module.js @@ -18,5 +18,12 @@ angular.module('jslab.router', ['ui.router']) 'content': { templateUrl: 'objects/content.html' }, 'repl': { templateUrl: 'objects/repl.html' } } + }) + .state('functions', { + url: '/functions', + views: { + 'content': { templateUrl: 'functions/content.html' }, + 'repl': { templateUrl: 'functions/repl.html' } + } }); }]); diff --git a/app/router/router-module-test.js b/app/router/router-module-test.js index a24355f..19ccf0f 100644 --- a/app/router/router-module-test.js +++ b/app/router/router-module-test.js @@ -16,5 +16,6 @@ describe('Router', function() { it('should respond to URLs', function() { expect($state.href('home')).toEqual('#/'); expect($state.href('objects')).toEqual('#/objects'); + expect($state.href('functions')).toEqual('#/functions'); }); }); diff --git a/bower.json b/bower.json index 60cbf77..80af62b 100644 --- a/bower.json +++ b/bower.json @@ -23,7 +23,8 @@ "bootstrap": "~3.3.4", "modernizer": "~2.8.2", "jasny-bootstrap": "~3.1.3", - "angular-ui-ace": "bower" + "angular-ui-ace": "bower", + "components-font-awesome": "~4.3" }, "devDependencies": { "angular-mocks": "~1.3.15" diff --git a/style/app.scss b/style/app.scss index b068ebc..348e93e 100644 --- a/style/app.scss +++ b/style/app.scss @@ -21,3 +21,7 @@ pre { white-space: initial; padding-left: 2em; } + +.code-example { + white-space: pre-wrap; +} diff --git a/tasks/style.js b/tasks/style.js index ed0b552..bcd35ed 100644 --- a/tasks/style.js +++ b/tasks/style.js @@ -5,7 +5,8 @@ var paths = gulp.paths; var plugins = gulp.plugins; function packageCssDependencies(min) { - gulp.src('bower_components/bootstrap/dist/fonts/**/*.*') + gulp.src(['bower_components/bootstrap/dist/fonts/**/*.*', + 'bower_components/components-font-awesome/fonts/**/*.*']) .pipe(gulp.dest(paths.dist + '/fonts')); gulp.src([ (min) ? 'bower_components/bootstrap/dist/css/bootstrap.min.css' : @@ -13,7 +14,9 @@ function packageCssDependencies(min) { (min) ? 'bower_components/bootstrap/dist/css/bootstrap-theme.min.css' : 'bower_components/bootstrap/dist/css/bootstrap-theme.css', (min) ? 'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.min.css' : - 'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.css' + 'bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.css', + (min) ? 'bower_components/components-font-awesome/css/font-awesome-min.css' : + 'bower_components/components-font-awesome/css/font-awesome.css' ]) .pipe(plugins.sourcemaps.init()) .pipe(plugins.concat('vendor.css'))