Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

46
Não alimente os trolls: Javascript é bonito! @rafael_sps

Transcript of Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Page 1: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Não alimente os trolls: Javascript é bonito!

@rafael_sps

Page 2: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Quem?

Tecnólogo em Telecomunicações IFSul

Rafael Specht da Silva

Page 3: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 4: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 5: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 6: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Javascript

até que é bonito!

@rafael_sps

Page 7: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Javascript é bonito legal!

@rafael_sps

Page 8: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 9: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 10: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 11: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 12: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 13: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 14: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 15: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 16: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

“Se JavaScript não fosse tão feia, um livro chamado ‘JavaScript: The Good Parts’ não seria o best-seller da linguagem na Amazon”http://simpleprogrammer.com/2013/05/06/why-javascript-is-doomed/

Page 17: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Inconsistente

Page 18: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

typeof {} // ‘object’

typeof [] // ‘object’

Page 19: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

typeof null // ‘object’

typeof undefined // ‘undefined’

undefined == null // true

Page 20: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

+

Page 21: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var n1 = 2;

var n2 = 3;

n1 + n2 // 5

var n1 = 2

var n2 = ‘3’

n1 + n2 // ‘23’

Page 22: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 23: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

https://twitter.com/1Marc/status/486803289175232512

Page 24: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

== e ===

Page 25: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

0 == false // true

0 === false // false

1 == true // true

1 === true // false

Page 26: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var url1 = 'http://localhost/rs/santa-maria'

var url2 = 'http://localhost/'

var getState = function (url) {

var stateMatch = url.match(/\/[a-z]{2}\//gi);

var state = null;

if (stateMatch !== null && stateMatch.length > 0) {

state = stateMatch[0].replace(/\//g, '');

}

return state;

}

getState(url1); // ‘rs’

getState(url2); // null

Page 27: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

“Se você trata null e undefined igualmente, é recompensado com comparações mais simples”

https://speakerdeck.com/getify/new-rules-for-javascript

Page 28: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

if (stateMatch !== null && stateMatch.length > 0) {

state = stateMatch[0].replace(/\//g, '');

}

if (stateMatch && stateMatch.length) {

state = stateMatch[0].replace(/\//g, '');

}

Page 29: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var data = {name: 'Luke', surname: 'Skywalker'}

var User = function (name, surname) {

this.name = name;

this.surname = surname;

this.getCompleteName = function () {

return this.name + ' ' + this.surname;

}

}

var user = new User(data.name, data.surname)

user.getCompleteName(); // 'Luke Skywalker'

Page 30: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var data = {name: 'Luke'}

var user = new User(data.name, data.surname)

user.getCompleteName(); // 'Luke undefined'

Page 31: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var data = {name: 'Luke'}

var User = function (name, surname) {

this.name = name;

this.surname = surname || '';

this.getCompleteName = function () {

return this.name + ' ' + this.surname;

}

}

var user = new User(data.name, data.surname)

user.getCompleteName(); // 'Luke '

Page 32: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

this

Page 33: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var UserView = function () {

function setName (name) {

this.name = name;

}

function setEvents () {

var that = this;

$('.hit').on('click', function () {

console.log(this); // <button class="hit">Hit me!</button>

$(this).toggleClass('odd');

that.setName($('.name').val());

});

}

return {

setEvents: setEvents,

setName: setName

}

}

Page 34: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

function setEvents () {

var that = this;

$('.hit').on('click', function () {

console.log(this);

$(this).toggleClass('odd');

that.setName($('.name').val());

});

}

Page 35: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

function setEvents () {

var button = $('.hit');

function handler () {

console.log(this);

button.toggleClass('odd');

this.setName($('.name').val());

}

button.on('click', handler.bind(this));

}https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex1.html

Page 36: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015
Page 37: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var Human = {

setName: function (name) {

console.log(this);

this.name = name;

},

sayHi: function () {

return 'Hi! My name is ' + this.name + '!';

}

}

Page 38: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var Ninja = {

setName: Human.setName,

setStealhLevel: function (level) {

console.log(this)

this.stealthLevel = level;

}

}

Page 39: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var Turtle = {

setHullLevel: function (level) {

console.log(this);

this.hullLevel = level;

}

}

var NinjaTurtle = {

setName: Ninja.setName,

setStealhLevel: Ninja.setStealhLevel,

setHullLevel: Turtle.setHullLevel

}

Page 40: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var raphael = Object.create(NinjaTurtle, {});

raphael.setName('Raphael');

raphael.setStealhLevel(50);

raphael.setHullLevel(100);

console.log(raphael);

console.log(raphael.sayHi);

https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex2.html

Page 41: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Objetos mantém referência

Page 42: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

var a = [1, 2, 3];

var b = a;

b.pop();

console.log(a); // [1, 2]

console.log(b); // [1, 2]

Page 43: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

MODAIShttps://github.com/rssilva/presentations/tree/master/front-in-sm-2015/objectsByReference

Page 44: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

É importante:- ter bom-humor!- criticar construtivamente- aprender os paradigmas

Page 45: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Toda linguagem tem peculiaridades. Aprender a lidar com elas é parte do nosso trabalho.

Page 46: Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Obrigado!github.com/rssilvatwitter.com/rafael_spsspeakerdeck.com/rssilva