JAVASCRIPT

DOM - Document Object Model

Uma interface de programação para documentos HTML, XML e SVG criada pela W3C

Representa o documento no formato de árvore, em grupos de nós, e objetos com propriedades métodos e eventos

O  DOM é utilizado pelo navegador para representar a página

É acessível pelo JS através do objeto document, mas não é JS

Criar efeitos ou alterar o conteúdo da página sem recarregar o conteúdo

http://www.devmedia.com.br/trabalhando-com-dom-em-javascript/29039
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.w3.org/DOM/

DOM - Alguns métodos

DOM - Exemplo de árvore

Eventos

Os eventos do DOM podem representar desde interações do usuário até notificações automáticas que ocorrem no background

Todos os eventos derivam do objeto Event

Alguns dos principais eventos são: click, change, blur, focus, keydown, keyup, keypress, mouseover, mouseleave, mouseenter, resize, submit. Lista completa

Eventos - Exemplos

<!-- Eventos no HTML -->
<input type="text" onChange="inputChanged()" />
<button onClick="buttonClicked()">Clique</button>
<form onSubmit="formSubmitted()">...</form>

// Adicionando eventos no JavaScript
document.getElementById('click-button').addEventListener('click', function(e){
    // Fazer algo
}
document.getElementById('register-form').addEventListener('submit', function(e){
    // Fazer validações, etc.
    e.preventDefault();
}

Eventos sintéticos

São eventos criados pelo próprio desenvolvedor

// Criando o evento
var event = new Event('build');

// Ouvindo o evento
elem.addEventListener('build', function (e) { ... }, false);

// Disparando o evento
elem.dispatchEvent(event);

Exercício

1. Criar uma página com:
      a. Um formulário com um campo e um botão

      b. O formulário deve criar uma mensagem no chat caso o campo estiver preenchido
      c. Alterar o título da página com a contagem de mensagens
      d. Deve haver uma mensagem no topo da página exibindo a contagem de mensagens "recebidas"

      e. Um botão que marca todas notificações como lidas, este botão só pode estar habilitado caso existam notificações

jQuery

Uma biblioteca JavaScript muito famosa que torna manipulação de DOM , tratamento de eventos, animações e AJAX muito mais simples do que o uso de puro JavaScript

Possui uma alta compatibilidade com navegadores

Possui uma grande quantidade de plugins

Utilizado pela maioria dos sites atuais

https://jquery.com/

Instalando o jQuery

Acesse https://jquery.com/download/

Clique no link de download Download the compressed, production jQuery...

Porque o arquivo comprimido?

Copie o arquivo para a pasta do exercício

Adicione a referência em seu HTML: 

 <script type=”text/javascript” src=”nome do arquivo.js”></script>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Ou através de uma CDN:

jQuery - Exemplos

A sintaxe básica do jQuery:

$(document).ready(function(){
   // Código jQuery aqui...
});

Aguardando o documento carregar (evitando problemas):

// $(selector).action()
$("p").hide()

$("button").click(function(){
    $("p").hide();
});

Eventos:

jQuery - Exemplos de seleção

Outras seleções:

$("#id-name") // Seleciona elemento que tenha o id id-name
$(".class-name") // Seleciona todos os elementos que tenham a class class-name
$("*")	// Seleciona todos os elementos
$(this)	// Seleciona o elemento atual
$("p.intro") // Seleciona todos elementos <p> que tenham a classe intro
$("p:first") // Seleciona o primeiro <p>
$("ul li:first") // Seleciona a primeira <li> da primeira <ul>
$("ul li:first-child")	// Seleciona a primeira <li> de toda <ul>
$("[href]")	// Seleciona todos os elementos que tenham o atributo href
$("a[target='_blank']")	// Seleciona todos os <a> que tenham um atributo target com o valor '_blank'
$("a[target!='_blank']") // Seleciona todos os <a> que tenham um atributo target com o valor diferente de '_blank'
$(":button") // Seleciona todos <button> e todos <input> do tipo button
$("tr:even") // Seleciona todos <tr> pares
$("tr:odd")	// Seleciona todos <tr> ímpares

jQuery - Eventos

Alguns dos eventos mais utilizados:

click: ao clicar em um elemento

dblclick: ao clicar duplamente,

mouseenter: quando o mouse entra na área de algum elemento,

mouseleave: quando o mouse sai da área de um elemento,

keypress: ao inserir um caractere

keydown: quando a tecla é pressionada,

keyup: quando a tecla é liberada,

submit: ao submeter formulário

change: quando o input sofreu alterações,

blur: quando um campo perde o foco

focus: quando um campo recebe foco,

load: ao carregar recurso (ex.: arquivo js terminou de carregar),

resize: ao redimensionar,

scroll: quando ocorre rolagem,

https://api.jquery.com/category/events/

jQuery - Efeitos

// Esconder um elemento
$('.element').hide();
// Mostrar um elemento escondido
$('.element').show();
// Alternar visibilidade de um elemento
$('.element').toggle();
// Alternar com animação
$('.element').toggle('fast', function(){
    // Executar depois da animação
});
// Mostrar elemento com animação
$('.element').fadeIn('slow');
// Esconder elemento com animação
$('.element').fadeOut(1000);
// Alterna visibilidade com animação por opacidade
$('.element').fadeToggle();
// Animações customizadas
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
// Animações encadeadas
$('.element').fadeIn('slow').hide()

https://api.jquery.com/category/effects/

jQuery - Navegando nos elementos

// Retorna o elemento pai de todos <span>
$("span").parent();
// Retorna todos os elementos acima de todos os <span>
$("span").parents();
// Retorna os <ul> de acima de todos <span>
$("span").parents("ul");
// Retorna todos os elementos entre um <span> e uma <div>
$("span").parentsUntil("div");

//Retorna todos os filhos de elementos <div>
$("div").children();
// Retorna todos os <p> filhos de elementos <div> com a classe first
$("div").children("p.first");
// Retorna todos os <span> filhos de elementos <div>
$("div").find("span");

jQuery - Navegando nos elementos

// Retorna os irmãos do elemento selecionado
$("h2").siblings();
// Retorna os irmãos <p> do elemento selecionado
$("h2").siblings("p");
// Retorna o próximo irmão do elemento selecionado
$("h2").next();
// Retorna os próximos irmãos do elemento selecionado
$("h2").nextAll();
// Retorna os próximos irmãos do elemento selecionado até encontrar um h6
$("h2").nextUntil("h6");

// Primeiro <p> da primeira <div>
$("div p").first();
// Última <p> da última <div>
$("div p").last();
// Seleciona o segundo <p>
$("p").eq(1);
// Seleciona os elementos <p> com a classe intro
$("p").filter(".intro");
// Seleciona os elementos <p> que não possuem a classe intro
$("p").not(".intro");

Exercício

2. Criar uma nova versão do exercício anterior e:

    a. Trocar o código de JS puro para jQuery

    b. Adicionar animação ao criar mensagem para que ela seja exibida suavemente

    c. Adicionar uma animação no scroll do chat também

    d. Adicionar evento de clique em cada mensagem que marca ela como lida 

JSON

JavaScript Object Notation

Um modelo para armazenamento e transmissão de informações no formato texto

Fácil para humanos ler e escrever, e para máquinas gerar e analisar

Totalmente independente de linguagem

Pode representar qualquer tipo de informação

Representação de informações de uma forma mais compacta, rápida e simples do que utilizando XML

http://www.json.org/

JSON - Sintaxe

Um par nome/valor, sendo que o nome deve estar entre aspas duplas, o valor vem depois de ':' e pode ser numérico, literal, booleano, array ou objeto

{
    "string": "valor literal",
    "int": 2,
    "float": 3.6,
    "boolean": true,
    "array": ["RS", "SC", "SP", "RJ"],
    "object": {
        "whatever": null,
    }
}

JSON vs XML

{
    "string": "valor literal",
    "int": 2,
    "float": 3.6,
    "boolean": true,
    "array": ["RS", "SC", "SP", "RJ"],
    "object": {
        "whatever": null,
    }
}

<string>valor literal</string>
<int>2</int>
<float>3.6</float>
<boolean>true</boolean>
<array>RS</array>
<array>SC</array>
<array>SP</array>
<array>RJ</array>
<object>
    <whatever />
</object>

119 caracteres

180 caracteres

JSON - Objeto JavaScript

JSON.stringify(): transforma um objeto JSON em string

JSON.parse(): transforma uma string em um objeto JSON

var obj = {
    test: 'test prop',
    name: 'a name',
    bool: true,
    num: 123
};

var stringObj = JSON.stringify(obj);
var jsonObj = JSON.parse(stringObj);

AJAX

Asynchronous JavaScript and XML

Se comunica com o servidor no background sem recarregar a página

Envia e recebe informações no formato JSON, XML, HTML e texto

Alterar a interface baseado em dados vindos do servidor de forma assíncrona

Importante:

    GET - Requisita conteúdo de um recurso
    POST - Submita dados para um recurso

https://developer.mozilla.org/pt-BR/docs/AJAX/Getting_Started

AJAX - Fazendo uma requisição HTTP

function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }

    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
}

AJAX - Tratando uma resposta

function alertContents() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
            alert(httpRequest.responseText);
        } else {
            alert('There was a problem');
        }
    }
}

Verificar o estado da requisição:

0 (não inicializado)
1 (carregando)
2 (carregado)
3 (interativo)
4 (completo)

Verificar estado da resposta

AJAX - Enviando dados

function makeRequest(url, userName) {
    
    // ... criar o objeto httpRequest aqui

    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('POST', url);
    httpRequest.setRequestHeader(
        'Content-Type', 
        'application/x-www-form-urlencoded');

    httpRequest.send('userName=' + encodeURIComponent(userName));
}

AJAX com jQuery

Keep it simple, stupid!

http://api.jquery.com/load/

http://api.jquery.com/jquery.post/

http://api.jquery.com/jquery.get/

// Carrega o conteúdo do arquivo teste.txt dentro da div com id #div1
$("#div1").load("http://domain.com.br/teste.txt");

// As informações em /example/get estarão na var data
$.get("http://domain.com.br/example/get", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

// Passando dados em um POST
$.post("http://domain.com.br/example/post",
    {
        name: "Nome Sobrenome",
        city: "Erechim"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    }
);

AJAX com jQuery

http://api.jquery.com/jquery.ajax/

$.ajax( "example.php" )
    .done(function() {
        alert( "success" );
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        alert( "complete" );
    }
);

$.ajax({
    method: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
    alert( "Data Saved: " + msg );
});

Exercício

3. Submeter um formulário de inscrição por AJAX

     b. Enviar os dados para o servidor via POST

     c. A resposta do servidor será no formato JSON: {"error": false, "messages": ["Mensagem"], "user": "nome do usuário"}

     d. Se a resposta não possuir erro, limpar os campos do form

     e. Exibir a mensagem retornada do servidor para o usuário

     f. URL do POST: http://host:port/subscription

     g. Parâmetros esperados: name, email, job