Javascript: the important bits

JAVASCRIPT: THE IMPORTANT BITSREVIEWING JAVASCRIPT AND JQUERY FUNDAMENTALS AS WELL AS A BRIEF INTRO TO NODEJS

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?

THINK YOU KNOW JAVASCRIPT?return{ a: "hello"} What does this return?

THINK YOU KNOW JAVASCRIPT?

LETS GET STARTED WITH THE BASICS.

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

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

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); } }

OBJECTS AND "CLASSES"Objects are like JSON with some class aspects known as prototypes.

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;}());

COMMON JAVASCRIPT PATTERNS

IMMEDIATE EXECUTION FUNCTION(function() { // Your logic here}());This immediately executes your logic as anonymous scope.

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.

INITIALIZATION Variable initialization:var value = value || somevalue; Complex object initialization:({ val1: 1, val2: null, init: function() { this.val2 = 2; return this; }}).init();

LETS GO OVER JQUERY OPTIMIZATION.

SELECTOR CACHING Bad:$(.someclass).text(replace some text.);$(.someclass).css(color, red);$(.someclass).focus(); Good:$(.someclass) .text(replace some text.) .css(color, red) .focus();

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();});

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.);});

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.});

BASIC JQUERY PLUGIN STRUCTURE(function($) { $.fn.myLog = function() { return this.each(function() { console.log($(this)); }); }}(jQuery)); Usage:$(p).myLog();

INTRODUCTION TO NODEJS

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.

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/

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

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);

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);});

QUESTIONS?

Javascript: the important bits

by Chris Saylor on Sep 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Javascript: the important bits Presentation Transcript