PROGRAMERO

O uso de eventos no React é muito parecido com o que já fazemos em html, a diferença fica por conta da nomeação, que deve ser em "camelCase" e no luga de texto sempre é passado uma função como manipulador. Além disso, para evitar o comportamento padrão de um evento, antes era informado o "return false", e no React devemos sempre usar o "preventDefault". Evento padrão "< button onclick="salvar(); return false; > Salvar < / button >" Evento React "< button onclick="{salvar}" > Salvar < / button > function salvar(e) {     e.preventDefault(); } Passagem de argumentos Como não poderia de deixar de ser, é perfeitamente possível passar argumentos para os manipuladores de eventos, podemos usar "arrow functions" ou "bind": "< button onclick={(e) = > this.remover(id, e)} > Remover < / button >" "< button onclick={this.remover.bi

Uma das características no desenvolvimento com o React é a capacidade de construir componentes, capazes de serem reutilizados em diversas partes do sistema. Os componentes nos permitem dividir o sistema em pequenas partes, reutilizáveis e independentes, proporcionando uma grande capacidade de reutilização e isolamento, evitando replicação de código e dores de cabeça com a substituição ou mesmo manutenção em partes do sistema. Em resumo, componentes são rotinas Javascript, capazes de receber propriedades e devolver elementos HTML. Exemplo Vamos agora ao exemplo, criaremos uma aplicação e a seguir iremos desenvolver um componente que irá representar um cliente, com nome e endereço: Criando a aplicação npx create-react-app componentes-propriedades Criando o novo componente Vamos criar o componente cliente, que retornará informações do mesmo, a ideia aqui é retornar uma "div" com um parágrafo com o nome e um texto com o endereço. No diretório &quo

Diretiva que tem como objetivo controlar o escopo de variáveis, prevenindo que as variáveis sejam criadas de forma global, ou seja, que as variáveis possam impactar em escopos que não lhes dizem respeito, em resumo ele bloqueia declarações sem o "var". Para usar essa diretiva basta incluir a "string" 'use strict' no inicio do escopo que se deseja controlar, vamos aos exemplos: (function(){   var teste1 = 'abc';   teste2 = 'def'; })(); console.log(teste1); //gera erro pois não pertence a esse escopo console.log(teste2); //mostra o valor pois pertence ao escopo global Para prevenir o problema: (function(){   'use strict';   var teste3 = 'abc';   teste4 = 'def'; //aqui já ocorre o erro })(); with Esse comando cria um escopo que nos permite acessar propriedades de um objeto de forma direta. Por convenção seu uso é desaconselhável por poder gerar problemas com outras

O objeto "arguments" é uma variável local disponível em todas as funções, ele representa todos os parâmetros de uma função, e funciona como se fosse um "array", permitindo acessar os parâmetros por meio de índice, ele não pode ser considerado um "array" pois não possui todas as funcionalidades que um "array" convencional possui. Exemplo function testando(arg01, arg02) {   return arguments; } testando('valor 01'); testando('valor 01', 'valor 02'); testando('valor 01', 'valor 02')[0]; No exemplo acima temos uma função que retorna "arguments", onde podemos ver todos os valores dos parâmetros informados, inclusive podemos acessar esses valores por meio de índices.

Em Javascript o objeto "this" pode assumir valores distintos de acordo com o local onde é invocado, e agora veremos alguns exemplos. Métodos de objetos O "this" aparece em métodos de objetos como uma referencia ao objeto principal, ou seja, ele representa o próprio objeto que possui o método: var pessoa = {   nome: 'Teresa',   recuperarNome: function() { return this.nome; } }; No exemplo acima "this" representa o objeto "pessoa", logo possui acesso a propriedade "nome". Em funções Em funções o objeto "this" pode ter dois valores, quando em uma função que não pertence a um objeto "this" retorna o objeto global, que no caso no browser é o "window", já o outro valor é a referencia ao objeto instanciado: Função que não pertence a um objeto function funcaoTeste() {   return this; } No exemplo acima temos como resultado da função o objeto global do br

A partir de agora vamos ver exemplos de como usar nosso código Javascript em páginas web, hoje veremos as possibilidades para isso e também aproveitaremos o momento para exemplificar a questão do escopo de variáveis. Estrutura minima do html Sabemos que a estrutura base para uma página web são as tags "html", dentro dela "head" e "body", nosso código Javascript deve estar na tag "script". A tag "script" pode ser incluída tanto dentro da tag "head" quanto dentro da tag "body", a diferença é que, quando nosso código estiver na "head" ele será carregado antes do conteúdo da página e quando nosso código estiver no "body" primeiro serão carregados os elementos "html" para em seguida nosso Javascript ser carregado. Como podemos imaginar o forma mais indicada atualmente é a inclusão no "body", pois caso nossos scripts sejam "pesados" eles não impactarão no car

Os métodos que serão vistos hoje possuem como finalidade reduzir os valores do "array" para um único valor, onde todos os elementos são percorridos para podermos realizar algum processamento. reduce Reduzir um "array" para um único valor acumulado, esse método não altera o valor original do "array", a função desse método pode ter quatro parâmetros, sendo eles o valor acumulado, o item atual, o índice e o próprio "array". Além da função é possível passar outro parâmetro para o método, que representa o valor inicial para a redução, no exemplo abaixo faremos a redução de um "array" de números e outro de texto: Exemplo com números var numeros = [1,2,3,4,5]; var reduceNum = numeros.reduce(function(acumulado, item, index, array) {   return acumulado + item; }, 0); O resultado será 15, pois ocorre uma soma conforme o quadro abaixo: Iteração Acumulado Item Resultado (novo acumulado) 1 0 1 1 2 1 2

Dando continuidade aos métodos de "array" veremos hoje como iterar para processar itens e filtrá-los: map Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade retornar um novo "array" com base nos itens do "array" original, sem alterá-lo, isso nos garante a possibilidade de processar os valores tratando os mesmos de alguma forma: var numeros = [1,2,3,4,5,6]; var map = numeros.map(function(item, index, array) {   return item + 10; }); filter Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array

Nesse post veremos alguns métodos que nos permitem realizar iterações em nossos "arrays", esses métodos devem ser utilizados para percorrer os itens, diferente do que temos feito até agora com os laços. forEach Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade substituir os laços comuns vistos até aqui, já que o "forEach" além de mais elegante é mais performático: var numeros = [1,2,3,4,5,6,7,8]; numeros.forEach(function(item, index, array) {   console.log(item); }); every Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber um parâmetro, sendo ele o item atual, sua finalidade é retornar um valor booleano baseado

Hoje veremos dois métodos muito poderosos dos "arrays" que poderão facilitar muito nossa vida no futuro, esses dois métodos são responsáveis por retornar partes especificas de um "array" e remover ou incluir itens de posições especificas de um "array".  slice Retorna um "array" "recortado" com base nos índices informados, é possível informar ao método o índice de inicio e o de término da manipulação, também é possível passar valores negativos para que o "recorte" ocorra no final, é importante salientar que esse método não altera o "array" original: var numeros = [1, 2, 3, 4, 5, 6, 7]; numeros.slice(1);  retorna o array [2, 3, 4, 5, 6, 7] numeros.slice(1, 3); retorna o array [2, 3]  numeros.slice(-2); retorna o array [6, 7]  splice Altera um "array" de forma definitiva, onde o primeiro parâmetro desse método é o índice de inicio, o segundo é a quantidade a ser eliminada, opciona

Dando continuidade a nossa exploração aos recursos que os "arrays" nos proporcionam, hoje veremos mais quatro métodos interessantes, onde seremos capazes de converter o conteúdo para texto, concatenar itens e outros "arrays", incluir e remover itens do inicio do "array". toString A exemplo do "join" o "toString" converte os valores de um "array" em texto, separando cada um por virgula, a grande diferença aqui é que o "toString" não permite informar um novo separador: var numeros = [1, 2, 3]; numeros.toString(); concat Inclui um novo valor ao "array" e retorna o resultado final desse processo, também é possível concatenar outros "arrays", isso sem alterar o valor original do "array": numeros.concat(4); numeros.concat([10, 100, 1000]); unshift Adiciona um item no inicio do "array" e retorna o total de itens do mesmo, anteriormente vimos o "pu

Hoje veremos alguns métodos básicos para se trabalhar com "arrays", capazes de incluir e remover itens do final do "array", transformar os itens de um "array" em uma "string", inverter a ordem dos itens de um "array" e ordenar de forma alfabética um "array". push Adiciona um item ao final do array, esse método retorna o total de itens do "array" atualizado: var frutas = ['uva', 'manga', 'laranja']; frutas.push('maracujá'); pop Remove um item do final do "array", esse método retorna o item removido: frutas.pop(); join Juntar itens de um "array" retornando uma "string", é possível indicar qual o separador desejado, se nada for informado é assumido a virgula: frutas.join(); frutas.join(' - '); reverse Inverte os itens de um array, atenção pois esse método realmente altera a posição dos itens dentro do array.

Nesse post veremos alguns métodos interessantes de objetos do Javascript, que nos permitem manipular propriedades, verificar a herança, transformar um objeto em texto e converter um texto em objeto. Object.keys Cria um "array" com os nomes das propriedades de um objeto: var animal = { nome: 'Totó', idade: 12}; var propsAnimal = Object.keys(animal); Object.isPrototypeOf Indica se um objeto é um protótipo de outro, ou seja, se um objeto (parâmetro do método) herda características de outro (usando o método): var cachorro = Object.create(animal); cachorro.buscaGraveto = true; cachorro.isPrototypeOf(animal); animal.isPrototypeOf(cachorro); JSON.stringify Transforma um objeto em texto: var animalTxt = JSON.stringify(animal); JSON.parse  Transforma uma string (JSON) em um objeto: var outroAnimal = JSON.parse(animalTxt); JSON JSON (JavaScript Object Notation - Notação de Objetos JavaScript) é uma formatação leve de troca

A algum tempo já estamos usando objetos, porém nesse post veremos mais alguns detalhes sobre objetos e formas de cria-los. Mutáveis  Objetos no Javascript são mutáveis, ou seja, é possível alterar valores de suas propriedades, remover propriedades existentes, ou mesmo adicionar outras propriedades: var pessoa = { nome: 'Eduardo', idade: 17 }; pessoa.idade = 27; delete pessoa.idade; pessoa.idade = 37; Manipulados por referencia Se criarmos um objeto por meio da atribuição de um objeto existente teremos uma referencia, isso significa que ao mudar propriedades ou valores em um dos objetos teremos como resultado a alteração em ambos: var copiaPessoa = pessoa; pessoa.idade = 47; copiaPessoa.idade = 57; delete pessoa.idade; copiaPessoa.idade = 37; Criando objetos Agora as formas de se criar um objeto: De forma Literal Forma utilizada até agora, onde já atribuímos o objeto e suas propriedades a uma variável: var carro = {mod

Saltos são formas de interromper um fluxo de instruções, onde somos capazes de parar, pular ou mesmo ignorar uma certa linha de execução. Dois deles já foram vistos, um é o "return" que podemos interromper o fluxo de execução de uma função, evitando a continuidade de um trabalho, o outro é o "break" utilizado para o encerramento de verificação dentro da condicional "switch". Temos ainda o "continue" que apenas descarta o fluxo atual de execução, direcionando para a próxima instrução válida. return No exemplo abaixo criaremos uma função que recebe um número, se o número for par daremos um salto interrompendo a execução dos comandos restantes: function saltoReturn(a) {   if (a % 2 === 0)     return 'Par';   return 'Impar'; }  break No próximo exemplo usaremos o "break" em um "loop", onde iremos percorrer de um a cinco e encerrar as repetições assim que o número tres for encontrado:

Até aqui vimos estruturas de repetição que, dado uma lógica, executa "n" vezes um bloco de código, o "for in" por sua vez é um pouco diferente, ele é usado para percorrer propriedades de um objeto, nos permitindo acesso ao nome de cada propriedade. Isso é bastante útil se pensarmos que podemos acessar e alterar valor de propriedades utilizando seu nome. Sintaxe for ( var  "< item atual >" in "< objeto >") {   "< instrucoes >" } Exemplo No exemplo abaixo iremos declarar um objeto com três propriedades, em seguida iremos percorre-las para mostrar os valores atuais e alterar os mesmos:

Diferente das outras estruturas de repetição, o "do / while" sempre executa ao menos uma iteração da repetição, isso porque o teste para definir a continuidade do "loop" fica no final do comando. Outra peculiaridade desse comando é a necessidade de um ";" para indicar o fim da instrução. Sintaxe do {   "< instrucao >" } while ( "< condicao >" ); Exemplo Agora iremos repetir a impressão de uma variável enquanto seu valor for menor que dez, como ela inicia em zero e a cada iteração é incrementado um, serão impressos os números de zero a nove: Exemplo de uma iteração No exemplo abaixo continuaremos com a mesma validação, onde a variável deve ser menor que dez, só que dessa vez o valor dessa variável será dez, ou seja, já iniciará inválida, como essa verificação só ocorre ao final do comando teremos uma iteração:

Operador unário que consegue nos dizer qual é o tipo de dados de uma variável, logo, ao testar com o "typeof" cada tipo de dados temos como resultado: Valores primitivos typeof undefined => undefined typeof true => boolean typeof 99 => number typeof NaN => number typeof 'Teste' => string Objetos diferentes de funções typeof {} => object typeof [] => object typeof null => object (aqui temos um conhecido erro de implementação do Javascript) Funções typeof functio() {} => function Exemplos Como vimos o "typeof" não é indicado para testar valores do tipo "object", "array" e "null", já que todos eles nos retornam "object", por isso é mais comum utiliza-lo com os tipos primitivos referentes a número, texto e booleano: (typeof 1234); (typeof 1234 ? 'Número' : '?'); (typeof 'Xisto'); (typeof 'Xisto' ? 'Texto' : &#

Anteriormente, realizamos uma reflexão simples para definir o que era objeto e o que não era, basicamente listamos todos os tipos primitivos ("string", "number", "boolean", etc.) e falamos que, tudo aquilo que não era tipo primitivo era um objeto. Pois bem, uma outra característica marcante é que objetos podem possuir propriedades e métodos, enquanto tipos primitivos não, mas se pararmos para observar percebemos algo diferente, por exemplo, se criarmos uma variável do tipo "string" conseguimos acessar algumas propriedades/métodos além do valor, e é ai que entra o conceito de "wrapper objects". Podemos pensar em "wrapper" como envolver ou empacotar, logo, assim que tentamos acessar um propriedade (ou método) de um tipo primitivo como o "string" (isso também ocorre para "number" e "boolean") o Javascript cria um objeto em memória, realiza a ação solicitada (seja o retorno do valor de uma pr

Função auto-executável, composta por duas partes, sendo elas a função anônima, encapsulada entre parenteses e a execução, que como visto anteriormente corresponde a abre/fecha parenteses.  Como grande vantagem essa abordagem previne o acesso externo as suas variáveis assim como ela evita poluir o escopo global: (function() {    var n1 = 10;    var n2 = 20;           console.log(n1 + n2);    })();

Comportamento do Javascript que eleva ao topo do escopo variáveis e funções literais, ou seja, mesmo que uma variável seja declarada no meio do programa a mesma será colocada no inicio, o ponto de atenção aqui é quanto a atribuição de valores, pois essa permanece no local original.  Esse comportamento pode gerar problemas pois podemos ser levados a acreditar que as coisas deveriam estar corretas quando na verdade não, uma dica é manter as variáveis no topo dos escopos juntamente com suas atribuições. Agora alguns exemplos usando o escopo de uma função para exemplificar: Variáveis Já sabemos que as variáveis "a" e "b" só podem ser acessadas dentro do escopo da função "TesteHoisting", mas o que deve ocorrer com a implementação abaixo? Bom de acordo com o que vimos, o "hoisting" irá elevar as variáveis "a" e "b" ao topo do escopo, e, apesar das variáveis existirem ambas estarão com o valor "undefined", quando

Em resumo, programação funcional é o paradigma de programação baseado em funções e suas características que evita estados ou dados mutáveis. Para trabalhar nesse paradigma a linguagem deve possuir algumas características: Funções são objetos de primeira classe As funções são tratadas como objetos, ou seja, tudo que é possível fazer com objetos também pode ser feito com funções. Um objeto literal var pessoa = { nome: 'Eduardo', sexo: 'Masculino'} Uma função literal function soma(a, b) { return a + b; } Atribuição de um objeto var carro = {}; Atribuição de uma função var func = function func() {}; Uma função pode retornar um objeto Permite que e as propriedades desse objeto possam ser acessadas a partir da execução da função: function recuperarCarro() {   return { marca: 'Fiat', modelo: 'Palio'   } } recuperarCarro().marca; Uma função pode retornar outra função Permite a execução de uma função