Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript: the important bits

1,024 views

Published on

Published in: Technology, Design
  • Be the first to comment

Javascript: the important bits

  1. 1. JAVASCRIPT: THE IMPORTANT BITSREVIEWING JAVASCRIPT AND JQUERY FUNDAMENTALS AS WELL AS A BRIEF INTRO TO NODEJS
  2. 2. THINK YOU KNOW JAVASCRIPT? typeof [] === "array"; false 0.1 + 0.2 === 0.3; false a === null; false 0 == 0; true 1 == 1; true == 0; false == 0; true false == false; false True or false?
  3. 3. THINK YOU KNOW JAVASCRIPT?return{ a: "hello"} What does this return?
  4. 4. THINK YOU KNOW JAVASCRIPT?
  5. 5. LETS GET STARTED WITH THE BASICS.
  6. 6. VARIABLESWhen declairing a variable without the "var", it puts the variable in global space which can be problematic. function hello() { test1 = hello; // global scope var test2 = hello2; // this function scope } hello(); console.log(test1); // hello; console.log(test2); // undefined
  7. 7. SCOPING There is no block scoping, only function scoping:for (var i = 0; i < 10; i++) { console.log(i);}console.log(i); // prints 10 If you want to block the scope of the above loop:(function () { for (var i = 0; i < 10; i++) { console.log(i); }}());var i;console.log(i); // undefined
  8. 8. SCOPE IN CALLBACKSIn callbacks, you can share variables from the parent function: var obj = { objValue: hello, test: function() { var self = this; setTimeout(function() { console.log(this.objValue); // undefined console.log(self.objValue); // hello }, 10); } }
  9. 9. OBJECTS AND "CLASSES"Objects are like JSON with some class aspects known as prototypes.
  10. 10. OBJECTS AND "CLASSES" An example class:Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function() { return alert(this.name + moved.); }; return Animal;}());
  11. 11. COMMON JAVASCRIPT PATTERNS
  12. 12. IMMEDIATE EXECUTION FUNCTION(function() { // Your logic here}());This immediately executes your logic as anonymous scope.
  13. 13. PRIVATE PATTERN var getCount = function() { var count = 0; return function() { return ++count; } } var next = getCount(); console.log(next()); // 1 console.log(next()); // 2This pattern allows you to expose only what you want exposed.
  14. 14. INITIALIZATION Variable initialization:var value = value || somevalue; Complex object initialization:({ val1: 1, val2: null, init: function() { this.val2 = 2; return this; }}).init();
  15. 15. LETS GO OVER JQUERY OPTIMIZATION.
  16. 16. SELECTOR CACHING Bad:$(.someclass).text(replace some text.);$(.someclass).css(color, red);$(.someclass).focus(); Good:$(.someclass) .text(replace some text.) .css(color, red) .focus();
  17. 17. SELECTOR CACHING Caching with callbacks.var $someotherclass = $(.someotherclass);$(.someclass).on(click, function(e) { $someotherclass.text(some event);}); Caching "this":$(.someclass).on(click, function(e)) { $this = $(this); $this.text(something); $this.hide();});
  18. 18. EVENT ATTACHING When attaching events, use the "on" function.$(a).on(click, function(e)) { console.log(A link was clicked.);}); What about dynamically generated links?$(document).on(click, a, function(e)) { console.log(A link was clicked.);});
  19. 19. PROPERLY STOPPING EVENTS Returning false is not always a good thing:$(a).on(click, function(e) { console.log(Stopping propagation.); return false; // Same as: // e.preventDefault(); // e.stopPropagation();});$(a).on(click, function(e)) { console.log(Another click.); // Never gets called because of the // return false in the above event.});
  20. 20. BASIC JQUERY PLUGIN STRUCTURE(function($) { $.fn.myLog = function() { return this.each(function() { console.log($(this)); }); }}(jQuery)); Usage:$(p).myLog();
  21. 21. INTRODUCTION TO NODEJS
  22. 22. Nodejs is an event-driven language built on Googles V8 (in c).Its package manager is known as npm and is now packaged with nodejs.
  23. 23. NODEJS: HELLO WORLDvar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello Worldn);}).listen(1337);console.log(Server running on port 1337); Source: http://nodejs.org/about/
  24. 24. NODEJS: DEPENDANCY MANAGEMENTYou can manage dependencies for your nodejs app in package.json: { "name": "sample-app", "version": "0.0.1", "dependencies": { "express": "2.5.x" } } This allows us to install our project dependencies with npm: npm install
  25. 25. NODEJS: EXPRESS SERVER Our hello world example in express:var express = require(express);app = express.createServer()app.get(/, function(req, res) { res.send(Hello World);});app.listen(1337);console.log(Listening on port 1337);
  26. 26. NODEJS: CONNECT MIDDLEWARERouting middleware is anything that implements the request, response, and next function pattern.// Request loggerfunction logger(req, res, next) { console.log("Path requested: " + req.path); next();} Using this middleware:app.get(/, logger, function(req, res) { res.send(Hello World);});
  27. 27. QUESTIONS?

×