Intro.js – Powered by Subvisual – Spoiler alert!



Intro.js – Powered by Subvisual – Spoiler alert!

1 0


cesium-intro.js

Workshop "Introdução ao Javascript" @CeSIUM com o apoio @vilt-group

On Github pfac / cesium-intro.js

Intro.js

Refurbished

by Pedro Costapedro@subvisual.co@iampfac @pfac

Powered by Subvisual

Spoiler alert!

This is for the noobs

What is Javascript?

It is NOT Java!

Not JUST for the web

Runs on "engines"

  • SpiderMonkey
  • Rhino
  • V8 &
  • JavaScriptCore
  • Chakra

Syntax & Features

Types

							
// Boolean
true == false

// Number + number = Number
1 + 1.0

// String + string = String
"Pedro Costa"

// Object + Object = NaN
{ nome: "Pedro", apelido: "Costa" }

// Function + function = String
function fullName(firstName, secondName) {
    return firstName + secondName
}
							
						

Variables

							
// Global
name = "Pedro" + " " + "Costa"

// Global
var age = 24;

function f() {
	// Scoped
	var job = {
		degree: "Software Engineer"
	}
}
							
						

Dynamic language

Prototypal

							
	f = function(){}

	// Each function has a prototype
	f.prototype.add = function(x,y){ return x+y; }

	// Constructors === functions
	a = new f() // {}

	// Objects inherit from the constructor prototype
	a.add(1,2) // 3
							
						

The Prototype Chain

							
	// Object is the at the top of the chain
	Object.prototype.mult = function(x,y){ return x*y; }

	// All objects inherit from Object.prototype
	a.mult(2,3) // 6

	// Object.create automatically changes the prototype
	g = function(){};
	g.prototype = Object.create(f.prototype)

	// g.prototype --> f.prototype
	// --> Function.prototype --> Object.prototype
	b = new g();
	b.add(5,5) // 10
	b.mult(5,5) // 25
							
						

Patterns

Immediately-Invoked Function Expression

Constructor Pattern

Module Pattern

Singleton Pattern

Best practices???

UnderscorevscamelCase

Pure JavascriptvsjQuery/Prototype/whatever

Advices

Disclaimer: from my experience

Encapsulate everything

Seriously, EVERYTHING

Singleton or Namespaced Constructor

Tests, tests, tests

Jasmine, QUnit, Mocha...whatever floats your boat

Always var

Literal notations

{} and []new Object and new Array

Follow the standards

Fuck IE...

Progressive Enhancement

Or Graceful Degradationjust do something about it

Decide as a team, and stay on course

  • naming convention
  • spaces vs tabs
  • indentation length

Conclusions

  • Everything is an object
  • Scope, scope, scope...
  • New approaches: First, do no harm
  • Be a team player
  • Test everything

Thank you!

Questions?

References

Douglas Crockford http://javascript.crockford.com/prototypal.html Addy Osmani Learning JavaScript Design Patterns Mozilla Developer Network Inheritance with the prototype chain