Front End - Módulo I

Front End

Módulo I

Quinta Aula

Lidando com Booleans

Boolean

var umaVariavel = "";

//Convertendo qualquer outro valor para booleano.
var valorBooleano = Boolean(umaVariavel); //Valor inicial: zero.

/* 
Os seguintes valores serão convertidos para false:
 0
 null
 undefined
 NaN
 Uma string vazia (“”)
 false

Todos os outros valores serão true.
*/

Boolean

var a = '';
var b = 'OK';

/*Usando o operador AND, o valor de a é retornado se ele pode ser 
convertido em false; senão b é retornado. */
var result = a && b;

/*Usando o operador OR, o valor de a é retornado se ele pode ser 
convertido em true; senão b é retornado.*/
var result = a || b;

Operadores Aritméticos

Adição

// Número + Número -> adição
1 + 2 // 3

// Booleano + Número -> adição
true + 1 // 2

true + true // 2

// Booleano + Booleano -> adição
false + false // 0

// Número + String -> concatenação
5 + "foo" // "5foo"

// String + Booleano -> concatenação
"foo" + false // "foofalse"

// String + String -> concatenação
"foo" + "bar" // "foobar"

Divisão

1 / 2      // retorna 0.5 em JavaScript
1 / 2      // retorna 0 em Java 
// (nenhum dos números é explicitamente um número de ponto flutuante)

1.0 / 2.0  // retorna 0.5 em JavaScript e Java

2.0 / 0    // retorna Infinity em JavaScript
2.0 / 0.0  // retorna Infinity também
2.0 / -0.0 // retorna -Infinity em JavaScript

//Divisão inteira
Math.floor(4/3); // retorna 1

Subtração

5 - 3 // 2
3 - 5 // -2
"foo" - 3 // NaN
true - true // 0
false -  true // -1

Multiplicação

2 * 2 // 4
-2 * 2 // -4
Infinity * 0 // NaN
Infinity * Infinity // Infinity
"foo" * 2 // NaN

Módulo

12 % 5 // 2
-1 % 2 // -1
NaN % 2 // NaN

Incremento e Decremento

// Posfixo 
var x = 3;
y = x++; // y = 3, x = 4

// Prefixo
var a = 2;
b = ++a; // a = 3, b = 3

// Posfixo 
var x = 3;
y = x--; // y = 3, x = 2

// Prefixo
var a = 2;
b = --a; // a = 1, b = 1

Negação e Soma Unária

var x = 3;
y = -x; // y = -3, x = 3
-false // -0
-true // -1

+3     // 3
+"3"   // 3
+true  // 1
+false // 0
+null  // 0

DOM
Document Object Model

DOM

O Modelo de Objetos do Documento (DOM, na sigla em inglês) é a interface entre linguagens de programação e os objetos do HTML. Com ele é possível acessar a árvore de elementos HTML e assim modificar sua estrutura dinamicamente. A utilizaremos com Javascript.

Atualmente o DOM é dividido em 3 partes. O DOM Core API que que é o núcleo do DOM e fornece o que você precisa para criar, remover e alterar elementos da árvore do DOM de maneira genérica. A DOM HTML API, que é uma parte do DOM voltada especificamente para HTML. Ela é mais fácil para ser utilizada, pois, tem os mesmos atributos dos elementos HTML. E, por fim, a DOM XML API, que é voltada para arquivos XML.

DOM

Acessando o DOM

Capturando nós da árvore - getElementById

<p id="id_p" class="classe_p">
    Um texto qualquer e <a href="#">um link</a>
</p>

<script>
    //Isso me retorna um HTMLParagraphElement.
    var p = document.getElementById('id_p');

    //Agora eu posso acessar a todos os atributos do nó.
    // configura a propriedade backgroundColor do elemento
    p.style.backgroundColor='#0000FF';

    //Podemos acessar inclusive, os filhos desse nó.
    // Localiza os elementos a (links) dentro do p
    var links = p.getElementsByTagName('a');

</script>

Acessando o DOM

Capturando nós da árvore - getElementsByTagName

<!-- 
Você também pode localizar um elemento utilizando o nome da tag que 
deseja. Para parágrafos, as tags se chamam-se p, 
DIVs se tem o nome div, para cabeçalhos h1, 
as tags se chamam h1 (e assim por diante).
-->

<script>
    //A diferença aqui é que, ao invés de retornar a interface 
    //HTMLParagraphElement do nó, interface HTMLCollection é retornada.
    var p = document.getElementsByTagName('p');
    
</script>

Acessando o DOM

Capturando nós da árvore - getElementsByClassName

<!-- 
Este é praticamente a mesma coisa do getElementsByTagName, ele
retorna uma coleção de elementos para um array. 
O problema aqui é que não funciona com 
versões anteriores ao Internet Explorer 9.
-->

<script>
    var p = document.getElementsByClassName('classe_p');
	
    // Altera o background do primeiro elemento da coleção [0]
    p.item(0).style.backgroundColor = 'red';
    
</script>

Acessando o DOM

Capturando nós da árvore - querySelector

<!-- 
Só funciona com navegadores mais novos, 
o que também quer dizer que você deve se preocupar, 
o IE8 também não suporta este método.
-->

<img src="#" id="id_imagem" class="classe_imagem">

<script>
    // Localiza um elemento com o id #id_imagem
    var img = document.querySelector('#id_imagem');

    // Altera o src do elemento
    img.src = 'http://bit.ly/1udSyQN';
</script>

Acessando o DOM

Capturando nós da árvore - querySelectorAll

<!-- 
Só funciona com navegadores mais novos, 
o que também quer dizer que você deve se preocupar, 
o IE8 também não suporta este método.
-->

<img src="#" id="id_imagem" class="classe_imagem">

<script>
    // Localiza os elementos com a classe .classe_imagem
    var img = document.querySelectorAll('.classe_imagem');
    	
    // Altera o src do primeiro elemento da coleção [0]
    img[0].src = 'http://bit.ly/1udSyQN';
</script>

Acessando o DOM

Tudo é um nó para o DOM, desde um texto simples dentro de um parágrafo, até o documento inteiro, representado por document. Tudo isso é caracterizado como um nó (Node).

Para navegar por entre os nós do DOM, você pode utilizar as palavras relativas aos nomes de membros de uma família em inglês (ou os métodos que já falamos anteriormente, depende da aplicação), por exemplo:

parentNode – Quem é o elemento pai

childNodes – Quem são os elementos filhos

firstChild – Qual é o primeiro filho

lastChild – O último filho

nextSibling – O próximo irmão

previousSibling – O irmão anterior

Modificando o DOM

<!-- 
Você também pode criar, alterar e apagar seus próprios nós.
-->

<div id="a-div"></div>

<script>
    // Seleciona a div do documento
    var a_div = document.getElementById('a-div');
    	
    // Cria um novo nó <p>
    var novo_p = document.createElement('p');
    
    // Altera a cor de fundo do novo <p>
    novo_p.style.background = 'red';
    	
    // Cria um novo nó de texto
    var novo_texto = document.createTextNode('Este é o texto do p!');
     
    // Adiciona o nó de texto no parágrafo
    novo_p.appendChild(novo_texto);
    	
    // Adiciona o nó <p> com seu texto na nossa div
    a_div.appendChild(novo_p);
    	
    // Conta 5 segundos e remove o novo elemento
    setTimeout(function(){
	// Remove o nó <p>
	a_div.removeChild(novo_p);
    }, 5000);
</script>

Modificando o DOM

<!-- 
Para criar um nó, utilize createElement, 
para criar um novo nó de texto, utilize createTextNode, 
para adicionar um elemento (nó) dentro do outro, utilize appendChild 
e para remover um elemento do documento, utilize removeChild.
-->

Acessando o CSS

<!-- 
Para alterar qualquer propriedade do CSS do seu elemento, 
basta utilizar o objeto style.

Leitura complementar: 
http://www.w3schools.com/jsref/dom_obj_style.asp
-->

<div id='a-div'></div>

<script>
    // Seleciona a div do documento
    var a_div = document.getElementById('a-div');
    	
    // Altera a largura da DIV
    a_div.style.width="500px";
    	
    // Altera a altura da DIV
    a_div.style.height="500px";
    
    // Altera a cor de fundo da DIV
    a_div.style.background="red";
</script>

BOM
Browser Object Model

BOM

BOM em Javascript trata dos objetos que são relacionados com o navegador em si, tais como o window, e elementos que estão abaixo dele, como location, document, navigator, e demais.

Não há um padrão oficial que possa ser discutido ou referenciado, algumas funções são suportadas por todos os navegadores, outras não.

BOM

Leitura complementar:

http://www.todoespacoonline.com/w/2014/04/29/bom-em-javascript/

Show me the Code!