JavaScript

 

 

Introdução ao JavaScript

 

  • Introdução ao JavaScript

    • Plataformas JavaScript
      • linguagem front-end padrão interpretada por navegadores web e partir da página HTML e do console JavaScript;
      • plataforma Node.js para backend web;
      • plataforma Johnny-Five para microcontroladores;
      • plataforma Electron para aplicações desktop;
    • Visão geral do JavaScript para Navegadores
      • linguagem de script para páginas HTML interpretada a partir da tag <script src=“js/script.js”>;
      • provê acesso a estrutura da página por meio do objeto document (Document Object Model – DOM);
      • DOM é a representação da renderização da página em que a sua alteração reflete na visualização da tela;
    • Console JavaScript do Navegador (ctrl+shift+k)
      • execução de código;
      • analisar conteúdo de objetos;
      • notificação de erros;
    • Operadores
      • Aritméticos → peso / (altura * altura);
      • Lógico OR → if (peso <= 0 || peso >= 500) {}
      • Lógico AND → if (idade > 18 && idade < 65) {}
      • Negação → if (!valido) {}
      • Round → salario.toFixed(2);
    • Variáveis, Array e Objeto
      • Array → var erros = []; erros.push(“mensagem”);
      • Objeto → var pessoa = { nome: “Reinaldo”, idade: 33 }
      • Concatenação → var text = “p” + i + “:” + node.textContent;
    • Laços
      • For → for(var i = 0; i < 4; i++) {}
      • ForEach em Arrays → erros.forEach(function(erro){});
  • Funções
    • Depuração
      • alert(“mensagem”);
      • console.log(“mensagem”);
    • Seleção de elementos HTML pelo DOM
      • var node = document.querySelector(“h1”); // obtém um elemento a partir da tag h1;
      • var node = document.querySelector(“#id1”); // obtém um elemento a partir do id;
      • var nodes = document.querySelectorAll(“p”); // obtém uma array de elementos a partir da tag p;
      • var nodes = document.querySelectorAll(“.classe1”); // obtém uma array de elementos a partir da classe CSS;
    • Document Node
      • console.log(node.textContent); // imprime o texto interno ao elemento;
      • node.textContent = “parágrafo1”; // define o texto interno ao elemento;
      • node.style.backgroundColor = “red”; // adiciona estilo CSS em camelCase (preferir usar classes CSS);
      • node.classList.add(“msg-erro”); // adiciona classe CSS (sem ponto);
      • node.parentNode.classList.add(“classe-pai”); // referência ao elemento pai;
      • var nodes = document.querySelectorAll(“p”);
      • for (var i = 0; i < nodes.length; i++) { node = nodes[i]; console.log(node.textContent); };
    • Criar elemento
      • div = document.createElement(“div”);
      • h1 = document.createElement(“h1”);
      • h1.textContent = “título”;
      • p = document.createElement(“p”);
      • p.textContent = “parágrafo”;
      • div.appendChild(h1);
      • div.appendChild(p);
      • document.querySelector(“body”).appendChild(div);
    • Remover elemento
      • div.innerHTML = “”; // remove todos os elementos internos ao elemento;
      • div.remove(); // remove o elemento e seu conteúdo;
    • Formulário
      • var node = document.querySelector(“#form1”);
      • node.idade.value = “33”; // define o valor de um input com name=”idade”;
      • node.reset(); // limpa o formulário;
      • Não submeter o formulário → ev.preventDefault();
      • node.btcadastrar.addEventListener(‘click’, function(ev){ ev.preventDefault(); console.log(‘função 1.’); });
    • Eventos
      • Associar eventos → permite associar distintas funções a um evento (‘this’ refere-se a dono do evento);
      • node.btcadastrar.addEventListener(‘click’, function(ev){ ev.preventDefault(); console.log(‘função 1.’); });
      • node.btcadastrar.addEventListener(‘click’, function(ev){ ev.preventDefault(); console.log(‘função 2.’); });
      • Associar evento único → permite associar uma única função a um evento (preferir usar addEventListener);
      • node.btcadastrar.onclick = function(ev){ ev.preventDefault(); console.log(‘node clicado.’); };
      • Capturar alvo do evento → permite adicionar evento ao elemento pai e identificar o alvo (node) do evento;
      • document.querySelector(“table”).addEventListener(‘dblclick’, function(ev){ console.log(ev.target.parentNode.remove();); });
    • Animar transição
      • //css
      • .fadeOut { opacity: 0; transition: 0.5s; }
      • //js
      • document.querySelector(“table”).addEventListener(‘dblclick’, function(ev){
        • ev.target.parentNode.classList.add(“fadeOut”);
        • setTimeout(function() { ev.target.parentNode.remove(); }, 500);
      • });

 

Ajax – Asynchronous JavaScript And XML

 

  • Conceitos
    • Conjunto de tecnologias padrões da internet utilizadas em páginas HTML e XHTML para o desenvolvimento de páginas interativas;
    • Permite realizar consultas em segundo plano e atualizar partes (pequenas porções) de uma página web (atualização dinâmica);
    • Consultas assíncronas permitem o processamento em paralelo a requisição uma vez que não necessitam aguardar resposta;
    • Implementado em JavaScript por meio do objeto XMLHttpRequest para comunicação com o servidor e do DOM e CSS para atualizar a página web;
    • Utiliza XML ou JSON para a comunicação (intercâmbio de dados) com o servidor e XSLT para manipulação e transformação de dados;
  • Informações adicionais
    • Permite a redução do volume de dados trocados com o servidor;
    • Torna mais rápida a resposta ao usuário, aumenta a usabilidade (mais fáceis de usar) e a interatividade das páginas, e aprimora a experiência do usuário;
    • Está associado a camada de visão (não envolve regras de negócio);
    • O modelo de objetos html/xml (DOM) é acessado e transformado por JavaScript para exposição e interação dinâmica (atualização a página web);
    • A comunicação assíncrona também pode ser realizada pelo objeto iFrame;
    • O CESPE considerou em 2011 o objeto XMLHttpResponse e linguagem VBScript como relacionados ao Ajax;
  • XMLHttpRequest → envia e recebe dados do servidor depois da página estar carregada;
    • Inicializar
      • if (window.XMLHttpRequest)
        • xmlhttp = new XMLHttpRequest();
    • Implementar método executado a cada evento de mudança de estado
      • xmlhttp.onreadystatechange = function() { // code }
    • Estado da requisição → xmlhttp.readyState;
      • xmlhttp.readyState == 0 → requisição não inicializada;
      • xmlhttp.readyState == 1 → conectado ao servidor;
      • xmlhttp.readyState == 2 → requisição enviada ao servidor;
      • xmlhttp.readyState == 3 → requisição recebida pelo servidor;
      • xmlhttp.readyState == 4 → resposta recebida;
    • Status da resposta → xmlhttp.status; xmlhttp.statusText;
      • xmlhttp.status == 200 → OK;
      • xmlhttp.status == 404 → Not found;
    • Requisição → método, url, async;
      • xmlhttp.open(“GET”, “/page/core?op=” + opt, true);
      • xmlhttp.setRequestHeader(“headerName”,”content”);
      • xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); // POST
      • xmlhttp.send(); // GET
      • xmlhttp.send(postString); // POST
    • Resposta
      • xmlhttp.responseText → string; // JSON.parse(xmlhttp.responseText)
      • xmlhttp.responseXML → objeto XML;
      • xmlhttp.responseXML.getElementsByTagName(“nome”)[0].firstChild.nodeValue;
    • Caso de uso com onreadystatechange (GET assíncrono)

      • xmlhttp = new XMLHttpRequest();
      • xmlhttp.onreadystatechange = function() {
        • if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
          • document.getElementById(“divId”).innetHTML = xmlhttp.responseText;
      • }
      • xmlhttp.open(“GET”, “/page/core?op=” + opt, true);
      • xmlhttp.send();
    • Caso de uso com addEventListener (GET assíncrono)
      • xmlhttp = new XMLHttpRequest();
      • xmlhttp.addEventListener(“load”, function() {
        • if (xmlhttp.status == 200) { console.log(xmlhttp.responseText); }
        • else { console.log(“Erro: ” + xmlhttp.status); }
      • }
      • xmlhttp.open(“GET”, “/page/core?op=” + opt, true);
      • xmlhttp.send();
    • Caso de uso síncrono e POST

      • xmlhttp = new XMLHttpRequest();
      • xmlhttp.open(“POST”, “/page/core”, false);
      • xmlhttp.send(“op=” + opt);
      • document.getElementById(“divId”).innetHTML = xmlhttp.responseText;

 

 

ECMAScript 2015 (ES6)

 

  • ECMAScript 2015
    • Módulos
      • O ES2015 não especificou como os módulos devem ser carregados pelos navegadores;
      • pode-se utilizar bibliotecas específicas para realizar esse carregamento (SystemJS ou WebPack);
      • o Chrome 63 permite o carregamento de módulos por <script type=”module” src=”app/app.js”>
      • classes em módulos devem usar ‘export class NomeDaClasse { }‘ para poderem ser importadas;
      • classes em módulos devem ser importadas com ‘import {NomeDaClasse} from ‘./NomeDoArquivo’;
      • os módulos evitam erros de ordenação de importação dos arquivos JS e por conflito do nome de classe global;
    • Declaração de variáveis
      • var i = 1; → variável com escopo de função ou global;
      • let i = 1; → variável com escopo de bloco; // se a variável já existir, ocorrerá uma exceção;
      • let $ = document.querySelector.bind(document);
    • Formatação de strings
      • let dateAsString = `${date.getDay()}/${date.getMonth()+1/${date.getFullYear()}}`
      • return `<ul>${
        • (function() {
          • let res = “”; for (i=0;i<4;i++) res = `${res}<li>${i}</li>`; return res}
          • )()
        • }</ul>`;
    • Array
      • var aInt = [];
      • aInt.push(0);
      • aInt.push(…[1,2,3]);
      • aInt.reduce((total, item) => total + item, 0.0); // itera a array para retornar um resultado;
      • aInt.map(item => item + 1); // itera a array para retornar outra array transformada;
      • aInt.map((item, index, array) => { if (array.length – 1 > index) { return item + array[index+1]; } else { return item; }});
    • Objeto modelo (domain)

      • class Pessoa {
        • constructor(nome=’Reinaldo’, idade=33) { this._nome: nome; this._idade: idade; this._data = new Date();  Object.freeze(this); }
        • get nome() { return this._nome; } // método acessado como atributo;
        • get idade() { return this._idade; } // método acessado como atributo;
        • }
      • var p1 = new Pessoa(“João”, 30);
      • console.log(p1.nome);
      • var p2 = new Pessoa(“Maria”, 31);
      • console.log(p2.nome);
    • Passagem de parâmetros em array
      • pArray = [“Reinaldo”, 33];
      • p = new Pessoa(…pArray);
      • lista1 = [0,1,2];
      • lista2 = [3,4,5];
      • lista1.push(…lista2);
    • Método estático

      • class DateHelper {
        • constructor() { throw new Error(“DateHelper possui apenas métodos estáticos”) }
        • static date2string(date) { return // implementação }
        • static string2date(txt) { return // implementação }
      • }
      • DateHelper.string2date(’28/05/2018′)

 

 

NodeJS

 

  • Node.js
    • Visão geral
      • npm init: cria arquivo padrão package.json;
      • npm install: realiza a instalação de dependências descritas no arquivo package.json;
      • npm install module_name –save-dev: realiza a instalação do módulo e configura package.json;
      • node arquivo: executa javascript em arquivo.js;
    • Módulos
      • ExpressJS (link) →  Framework com conjunto de recursos para aplicações web e mobile;
      • SystemJS (link) →  Loader para carregar código JS escritos com sintaxe de módulos do ES6;
        • npm install systemjs –save
        • <script src=”node_modules/systemjs/dist/system.js”>
        • <script>System.import(‘js/app/init’).catch(err => console.error(err));
      • Babel (link) →  Transpiler (compilador de código-fonte para código-fonte);
        • npm install babel-cli –save-dev
        • npm install babel-preset-es2015 –save-dev
        • npm install babel-plugin-transform-es2015-modules-systemjs –save-dev
        • .babelrc
          • { “presets” : [“es2015”], “plugins” : [“transform-es2015-modules-systemjs”] }
        • package.json
          • { “scripts”: { “build”: “babel js/app-es6 -d js/app” } }
          • { “scripts”: { “build”: “babel js/app-es6 -d js/app –source-maps” } } // erros indicam linha original
          • { “watch”: { “build”: “babel js/app-es6 -d js/app –watch” } } // monitorar diretório de origem
        • npm run build

 

IndexedDB

 

  • IndexedDB
    • Visão geral
      • Armazenamento de dados no navegador por meio de Web Workers;
      • Utiliza chamadas assíncrondas com passagem de função para onsuccess e onerror;
      • As bibliotecas Dexie e Db.js simplificam seu uso por meio de Promises;
    • Requisição de Conexão

      • var openRequest = window.indexedDB.open(‘app_name’, 1);
      • openRequest.onsuccess = ev => { connection = ev.target.result; };
      • openRequest.onerror = ev => { console.log(ev.target.error); };
      • openRequest.onupgradeneeded = ev => { e.target.result.createObjectStore(‘store_name’, { autoIncrement: true});};
    • Insert
      • connection.transaction([‘store_name’], ‘readwrite’).objectStore(‘store_name’).add(new Object());
    • Listar
      • cursor = connection.transaction([‘store_name’], ‘readwrite’).objectStore(‘store_name’).openCursor();
      • cursor.onsuccess = ev => { if(ev.target.result) { console.log(ev.target.result.value) ; ev.target.result.continue(); } };
    • Limpar
      • connection.transaction([‘store_name’], ‘readwrite’).objectStore(‘store_name’).clear();