Entendendo Javascript - 1

A vida ensina, mas com a ajuda do professor, fica mais fácil

Paradigmas

Orientação a Objetos (mais sobre isso a seguir)
Funcional (visão matemática sem side-effects)
Imperativo (diz "como", não "o que")

Js não é só para validar formulários!

O uso mais comum é usar Javascript no front-end, mas dizer que Js é uma linguagem só para front-end é o mesmo que dizer que Java é uma linguagem usada só para back-end.

Mesmo que isso fosse verdade, há muito mais que pode ser feito com JS!

Three.js

http://threejs.org/

Johnny-Five

http://johnny-five.io/

Monogatari

https://github.com/digihaus/monogatari

Js é seguro?

Sim, ou você prefere um client burro e um server esperto, no lugar de um client e um server espertos?

É possível "descompilar" sim, o próprio Chrome tem um "Beautifier", mas boa sorte em tentar fazer uma engenharia reversa do GMail...

IDEs

Eclipse (meh...)
Brackets (http://brackets.io/)
Visual Studio Code (https://code.visualstudio.com/)
WebStorm ($) <3

Eclipse

É uma IDE feita para Java, não Javascript, que requer um plugin para interpretar os fontes de forma parcial.

No entanto ela permite uma boa integração com repositórios de código como GIT e SVN.

O veredito final é: Meh...

Adobe Brackets.io

Ferramenta gratuita, open source focada em web.

Possui um validador de código, mas não tem integração com repositórios de código

O veredito final é: OK

Microsoft Visual Studio Code

Ferramenta gratuita, Possui um validador de código, tem integração nativa com GIT e suporta extensões

O veredito final é: Muito bom!

WebStorm

Ferramenta com tudo o que você sempre quis <3

Veredito final: CH é Fanboy do WebStorm

Validação 100% eficiente (incluindo Javadoc, referências quebradas etc...)
Suporte a vários templates de projetos em JS
Entende hierarquia de arquivos JS (Ctrl+click)
Acompanha um WebServer já acoplado a IDE
Integrado com repositórios de códigos
Terminal integrado
PORÉM... é pago =(

Linguagem

Uma variável é declarada com a seguinte notação:

Como a maioria das linguagens de script, JS não é fortemente tipado, ou seja, cada variável assume o tipo do dado que recebe.

Isso pode causar alguma confusão, mas vamos desmistificar isso.

Variáveis

var a;
let b = 0;
const c = 3 * 5; //15
var d = "Como faz pra acessar aquela demo dos zumbís que vc mostrou CH?";
var e = {}; // objeto (veremos mais sobre isso)
var f = []; // array (veremos mais sobre isso)

Há outros tipos complexos, mas vamos começar com os tipos básicos:

Variáveis

String
Number
Function
Boolean
Array
null e undefined
Objetos e Closures

String

var car = "Volvo XC60";
var car = 'Volvo XC60';

var longString = "Esta é uma String gigante que precisa " +
                 "quebrar muitas linhas contando a " +
                 "história da minha vida.";

var s = "Quero Café!";
s.length; // 11
s[0]; // Q

Strings são arrays de caracteres e pela tipagem fraca do JS permite tratar algumas coisas como um Array

Number

var y = 34;       // Number sem decimais
var x = 3.14;     // Number com decimais

x = 123e5;        // 12300000 (notação científica)
y = 123e-5;       // 0.00123 (notação científica)

x = (100 + 50) * 2;

var biggestInt = 9007199254740992;
var smallestInt = -9007199254740992;

var n = 0;

n = Number("123");     // 123
n = Number("12.3");    // 12.3
n = Number("");        // 0
n = Number("0x11");    // 17
n = Number("0b11");    // 3
n = Number("0o11");    // 9
n = Number("foo");     // NaN
n = Number("100a");    // NaN

Não há Float / Integer / Short, somente Number

Function

alert( "Quero férias" );            //padrão nos navegadores
console.log( "Quero férias" );      //padrão nos navegadores melhores que o IE 7/8

//declaração
function [nome] ( [parâmetros]  ){
    [código]
    [retorno]
};

function mensagem(){
    alert("Oi mãe!");
};

mensagem();

function mensagem_com_parametros( str ){
    return "Oi " + str;
};

alert( mensagem_com_parametros("CH") );

Function é como o JS encapsula um método que executa um trecho de código podendo receber parâmetros e retornar um resultado

Function

// função convencional
function mensagem() {
	alert('Hello World');
}

// função atribuída a uma variável
var mensagem = function() {
	alert('Hello World');
}

// função anônima
(function() {
	alert('Hello World');
})

// função anônima que "se invoca"
(function() {
	alert('Hello World');
})();

Declaração de funções pode ser feita de algumas formas interessantes

isNaN

isNaN( NaN );        // true
isNaN( Number.NaN ); // true
isNaN( 0 / 0 )       // true

isNaN( "NaN" );      // true
isNaN( undefined );  // true
isNaN( {} );         // true
isNaN( "blabla" );   // true

isNaN( 10 )          // false
isNaN( 10.5 )        // false
isNaN( Math.PI )     // false

Lembra do Number? então, existe uma função nativa do JS que ajuda a validar se um valor é do tipo "Number".

Apesar da idéia ser meio tronxa...

Boolean

var y = true; 
var x = false;
var z = "";

x = 3 > 2;    // true

// resultados assumindo uma chamada 
// a função teste(z) aqui do lado -->

z = y && x;      //false
z = undefined;   //false
z = null;        //false
z = "";          //false
z = "bolovo";    //true
z = 0;           //false
z = NaN;         //false
z = 10;          //true
z = {};          //true
z = [];          //true

function teste( z ){
    if( z ){
        alert("true");
    } else {
        alert("false");
    }
};

Nada muito novo ali em cima, mas igualdade é uma coisa mais delicada!

String

var a = "Laranja";
var b = "Batata";

var resultado = a > b;

String

var a = "Laranja";
var b = "Batata";

var resultado = a > b; //true

Strings são comparáveis não só com igualdade, como sinais de > e < podem ser utilizados para comparar alfabeticamente!

Array

var a = new Array();  //usamos um construtor para criar um array
var a = [];           //também é um construtor válido

var cars = new Array("Fusca", "Palio", "BMW");
var cars = ["Fusca", "Palio", "BMW"];

var name = cars[0];     //'Fusca'

var x = cars.length;    // obtem o número de elementos (3)
var y = cars.sort();    // ordenação nativa

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
fruits.push("Limão");                  // adiciona um elemento ao array
fruits[fruits.length] = "Abacate";     // Também funciona

Array

var wtf = [];

wtf["a"] = "abacate";

wtf[0];     // undefined
wtf["a"];   // 'abacate'

function mensagem( str ){ 
    alert( str ); 
}

wtf["funcao"] = mensagem;
wtf["funcao"]("bolinho"); // que diabos!?

Ponteiros

Javascript usa ponteiros (ou referências de memória, como preferir). É um conceito importante para escrever um código otimizado.

Os ponteiros do Javascript funcionam da mesma forma que em Java com contagem de referência.

Ponteiros

Assim como no Java, no JS tudo são ponteiros, a própria declaração de uma variável acontece da seguinte forma:

var a = new Programmer();

O código é interpretado por uma linguagem de baixo nível
Memória é alocada para guardar a informação
A variável recebe o ponteiro de memória contendo a informação

Ponteiros

var a = 2; 
var b = a;

// Só há um espaço reservado em memória com o nosso objeto
// No entanto há duas referências ("a" e "b") para o mesmo
// endereço de memória

b = null;

// Isto faz com que a referência ao objeto da variável "b" 
// deixe de existir mantendo apenas uma referência em "a"

a = null;

// Agora sem as duas referências o valor alocado em memória 
// pode ser sinalizado para garbage collection

Ponteiros

Algumas coisas começam a fazer sentido agora como por exemplo, porque consideram o operador "new" computacionalmente caro, é porque ele aloca fisicamente memória.

Isso não é só sobre JS mas linguagens num geral.

Se a linguagem usa uma VM inteligente, ela gerencia a própria memória e consegue amenizar o impacto em tempo de execução.

Null e Undefined

Null e Undefined são coisas diferentes para a linguagem, mas são logicamente iguais (então por isso é comum confundir).

Uma variável declarada vazia, sem atribuição é undefined, porque nenhuma memória foi alocada para ela ainda.

Se a variável recebe a atribução de null, significa que ela continha algo e está pronta para ser coletada no Garbage Collector porque ela não será mais usada.

Igualdade

Como já havíamos visto lá na parte do Boolean a igualdade pode ser uma coisa complexa de tratar.

Um exemplo comum de código comparando valores é utilizar os operadores == e !=, e eles funcionam no JS, mas eles não validam o tipo dos valores sendo comparados.

Para isso o Js usa === e !==, a sintaxe parece estranha num primeiro momento

Igualdade

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

undefined === null; // false
undefined == null;  // true

"" == false;        //true
"" === false;       //false

Objetos e Closures

Closures são funções que encapsulam um escopo

function Closure() {
    this.name = "bolinho"; 	    // name é uma variável local
    this.mensagem= function() {     // mensagem() é uma função interna
        alert (this.name); 	    // mensagem() usa uma variável 
                                    // do contexto "this"
    }
}

var c = new Closure();
c.mensagem();

Criando um objeto

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

var myFather = new Person("Francisco", "Simão", 68, "black");
var myMother = new Person("Nobue", "Simão", 60, "black");

Acessando atributos de um objeto

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

var myFather = new Person("Francisco", "Simão", 68, "black");

myFather.firstName;          // 'Francisco'

myFather.coffee;             // undefined

myFather.coffee = "Latte";   // o objeto ganhou uma nova propriedade !!!
                             // cuidado com erros de digitação !!!

myFather.getName = function () {
    return this.firstName + " " + this.lastName;
};

Utilizando a propriedade prototype

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

Person.coffee = "Cappuccino";     //Não funciona, então comofas?

Person.prototype.coffee = "Cappuccino";

Person.prototype.getName = function() {
    return this.firstName + " " + this.lastName;
};

var p = new Person("Chrysthian", "Simao", 30, "black");
p.getName(); //"Chrysthian Simao"

Herança

function Programmer( first, last, age, eyecolor, coffee ) {
    //Parent.call( context, [arguments] );
    Person.call( this, first, last, age, eyecolor );

    this.coffee = coffee;
}

//child.prototype  = Object.create( parent.prototype );
Programmer.prototype = Object.create( Person.prototype );

var p = new Programmer( "Chrysthian", "Simao", 30, "black", "Cappuccino" );

Entendendo Javascript - 1

A vida ensina, mas com a ajuda do professor, fica mais fácil

Paradigmas

Js não é só para validar formulários!

Three.js

Johnny-Five

Monogatari

Js é seguro?

IDEs

Eclipse

Adobe Brackets.io

Microsoft Visual Studio Code

WebStorm

Linguagem

Variáveis

Variáveis

String

Number

Function

Function

isNaN

Boolean

String

String

Array

Array

Ponteiros

Ponteiros

Ponteiros

Ponteiros

Null e Undefined

Igualdade

Igualdade

Objetos e Closures

Criando um objeto

Acessando atributos de um objeto

Utilizando a propriedade prototype

Herança

Alguma Dúvida?

Freedom!

Entendendo Javascript - 1

More from Chrysthian Simão