Javascript não é Java+Script (TDC Floripa 2012)

TDC Florianópolis 25/08/2012 Rodrigo Vieira

@rodbv1

Uma (re)introdução ao JavaScript

Saturday, August 25, 2012 2

Um pouco de história A linguagem Dicas e erros comuns

4

Mocha!LiveScript!

Brendan Eich Scheme

Linguagem dinâmica, fracamente tipada, funcional e OO

Objetos e vetores são “dicionários melhorados”

Herança por prototipação


Java + script

DOM

AJAX

jQuerySaturday, August 25, 2012 6

Valor String, Number, Boolean, null, undefined

Referência Objetos Funções Arrays RegEx Date Math


Sequência de caracteres unicode

Strings com mesmo valor são consideradas idênticas

Não existe tipo char

Podemos usar aspas simples e duplas

Possui métodos


Ponto flutuante de 64 bits Não existe tipo inteiro NaN Infinity Hexa (0xa12) Notação científica (1.23e-8) Octal: primeiro dígito zero, cuidado!

parseInt(“08”) //0 parseInt(“08”, 10) //8


undefined: valor padrão para variáveis, parâmetros e atributos sem valor atribuído

null: objeto nulo, atribuído explicitamente


truefalse


Os seguintes valores são avaliados como false quando fazem partes de expressões booleanas (falsy): 0 “” null undefined NaN

Todo o resto é avaliado como true (truthy) inclusive as strings ”false” e ”0”!


d = new Date(); //data atual

d = new Date (88500); //ms desde 1.1.1970

d = new Date(2012, 25, 7);


Não são arrays de verdade, mas um dicionário com chaves numéricas Não dá erro de limites Aceita diferentes tipos de dados

var a = new Array(); //oldskool var a = []; //cool var a = [1, “a”, obj]; //inline

a.push(“floripa”); a.length; //4


var r = new RegExp(“\\w{1,3}\\d{2}”, “gim”);

var r = /\w{1,3}\d{2}/gim;

r.test(“ab12”); //true

“abc12xyz”.replace(/\w{1,3}/gim, “”); //12xyz


O coração de programação decente em JS Cidadãs de primeira classe Uma função pode ser:▪ Variável▪ Parâmetro▪ Propriedade de objeto▪ Anônima▪ Retorno de outra função▪ Interna a outra função


Declaração comum

function fala(texto) {alert(“Oi,” + texto + “!”);

}

fala(“amigo”); //Oi,amigo!


Variável com função anônima

var minhaFuncao = function(texto) {alert(“Fala,” + texto + “!”);

};

minhaFuncao(“amigo”); //Fala,amigo!


function geraSoma (x) {return function(num) {

return x + num;}

}

var soma5 = geraSoma(5);

soma5(3); //8



return x + num;}

}

var somador = geraSoma(5);

somador(3); //8


Closure


return x + num;}

}var x = 5;var somador = geraSoma(x);

somador(3); //8x = 9;somador(3); //ainda 8


Closure

Uma função cria cópias dos valores disponíveis durante sua criação, para serem usados em tempo de execução


Função

Closure

function executa(func) {func();

}

function dizOi() { alert(“oi!”);

}

executa(dizOi); //oi!


executa(function() { alert(‘oi’);

}); //oi!


function soma(x,y) {return x + y;

}

soma(2,3); //5

soma(2,”5”) //”25”


function soma(x,y) {return x + y;

}

soma(2,3,5,”hello”); //5

soma(2); //NaN


Coleção de argumentos passado para a função

function soma() {var total=0;for (var i=0; i<arguments.length; i++) {

total += arguments[i];}return total;

}

soma(1,2,3,4,5); //15


JavaScript possui apenas 2 blocos de escopo Global Função

Variável declarada dentro de função, com “var”, é local

Função declarada dentro de função é local

Variáveis declaradas dentro de blocos if, while, for etc não são locais ao bloco, e sim à função.


Esse código é feio, mas é válido

function calculaMedia(x,y){ soma = fazSoma(); return soma/2; function fazSoma() { return x + y; } var soma;}


function calculaMedia(x,y){soma = x + y;

return soma/2;}calculaMedia(2,3); //5alert(soma); //5


Variável global

Um dicionário enfeitado


Clássicavar ator = new Object();ator.nome = “Jim”;ator.sobrenome = “Parsons”;

Simplificada var ator = {}; ator.nome = “Jim”;

ator.sobrenome = “Parsons”;

Inlinevar ator = {

nome: “Jim”,sobrenome: “Parsons”

};


var ator = {nome: “Jim”,sobrenome: “Parsons”,nomeCompleto: function() {

return this.nome + “ ” + this.sobrenome;}

};

ator.nomeCompleto(); //Jim Parsons


function Ator(nome, sobrenome){ this.nome = nome; this.sobrenome = sobrenome; this.nomeCompleto = function() {

return this.nome + “ ” + this.sobrenome; };}

var jim = new Ator(“Jim”, “Parsons”);jim.nomeCompleto(); //Jim Parsons

Convenciona-se usar inicial maiúscula


carro.marca = “Citroen”;carro[“placa”] = “MHJ8832”;

A segunda forma aceita palavras reservadas, símbolos etc

carro[“#”] = “dummy”;carro[“for”] = “yammy”;


Permitem executar uma função especificando qual objeto será o “this”


function setColors(color, border){this.style.backgroundColor = color;this.style.borderColor = border;

}

var botao1 = document.getElementById(“botao1”);var botao2 = document.getElementById(“botao2”);

setColors.call(botao1, “red”, “blue”);setColors.call(botao2, “blue”, “green”);


“this”

function setStyle(color, border){this.style.backgroundColor = color;this.style.borderColor = border;

}

var botao1 = document.getElementById(“botao1”);var botao2 = document.getElementById(“botao2”);

setColors.apply(botao1, [“red”, “blue”]);setColors.apply(botao2, arguments);


“this”

Como funções são objetos, elas podem ter atributos – isso evita variáveis globais


function executaUmaVez() {if (executaUmaVez.jaExecutou) {

return;}//executa a funcaoalert(‘oeeee’);executaUmaVez.jaExecutou = true;

}

executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executa


function ehPrimo(x) {if (!ehPrimo.cache) {

ehPrimo.cache = {};}

if (!ehPrimo.cache[x]) {ehPrimo.cache[x] = … //calcula a parada

}

return ehPrimo.cache[x];}


function ehPrimo(x) {if (!ehPrimo.cache) {

ehPrimo.cache = {};}

if (!ehPrimo.cache[x]) {ehPrimo.cache[x] = … //calcula a parada

}

return ehPrimo.cache[x];}

Quiz: por que eu usei um objeto e não um array no memo?


Usando função

function meuModulo(p1,p2) { //privado var x = p1, y = p2; function fazAlgumaCoisa() { //… } //público return { valor1: x + y,

funcaoPublica: function() { return fazAlgumaCoisa(x,y); } };}var m = meuModulo(1,2);alert(m.valor1); //3


function soma(x,y) { return x + y;}soma(2,3); //undefined


Ponto-e-vírgula é opcional, mas o js coloca pra você na hora de rodar

function soma(x,y) { return; x + y;}soma(2,3); //undefined


Pra quebrar linha, use “pontuação”

function soma(x,y) { return x + y;}soma(2,3); //5


Caso você queira usar uma variável global, use MAIÚSCULAS (assim todos sabem que foi por querer)

E, melhor ainda, crie “namespaces” para suas variáveis e funções globais

var MINHALIB = {};MINHALIB.usuario = “rodbv”;MINHALIB.quebraTudo = function() {…};


Executando código descartável

(function() {/* todas variáveis e funções declaradas aqui têm acesso ao escopo global,mas sairão de escopo quando a

função terminar de ser executada */})();


Use === e !==


1 == “1” //true 1 === “1” //false

0 == false //true 0 === false //false

“” == 0 //true “” === 0 //false

1 != true //false 1!== true //true

Lembre-se do “var” no for loop

function minhaFuncao() {for (i = 0; i < 10; i++){

//…}

}alert(i) //10;


Cuidado com o seguinte padrão

function minhaFuncao() {var a = b = 10;

}minhaFuncao();

alert(a); //undefined, belezaalert(b); //10 ?!?


Evite eval

setTimeout(“alert(‘ola’);”, 10);setTimeout(function() { alert(‘ola’);}, 10);

var p = eval(“ator.” + propr);

var p = ator[propr];


Coloque o seu javascript sempre no fundo da página

Minifique e combine os arquivos

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/utilities/utilities.js&2.9.0/build/datasource/datasource-min.js&2.9.0/build/autocomplete/autocomplete-min.js&2.9.0/build/calendar/calendar-min.js&2.9.0/build/tabview/tabview-min.js"></script>



Douglas Crockford é o carahttp://javascript.crockford.com/

@[email protected]


Javascript não é Java+Script (TDC Floripa 2012)

Technology

Transcript of Javascript não é Java+Script (TDC Floripa 2012)

Tese Floripa

Apresentação TDC Floripa 2014

Bootstrapping - TDC2012 Floripa

Informe floripa issuu296

HTML5 TDC Floripa 2014

TDC Floripa 2015 - Customer Development

TDC 2015 Floripa - Visual Regression Testing em ambientes na nuvem

Nº 019 SCRIPT DE APOIO Versão: 19 Data-Mês-Ano SCRIPT ...extranet.resolvenet.com.br/BookAmorAosPedacos/Upload/File/Novo … · SCRIPT DE APOIO Nº 019 Versão: 19 SCRIPT OPERACIONAL

Aeroporto de FLORIPA

Bela Floripa

Xdebug seus problemas acabaram - tdc floripa 2017

Backbone - TDC 2011 Floripa

TDC 2015 Floripa - Criando ambientes de forma simples com Docker e Ansible

Palestra de Asp.Net 5 no TDC floripa e DotnetFloripa

Floripa mixed + acordes

Boleto Cloud - TDC 2014 - Floripa - Trilha Startups - 18/05/2014

Apresentação TDC

TDC Floripa 2015 Desenvolvendo Sistemas de Gestão a partir de Modelos Executáveis

Wtp floripa web

Gestão de Clínica - sucessodonto.com.br · Scripts para Retorno de Pacientes Scripts para Demarcações Script Pós-Falta Script Valores Script Aparelho Autoligado Script Confirmação