PROGRAMERO

Até agora, sempre que foi necessário manter um valor em memória nós usamos o conceito de "variável", realizando a "definição de um símbolo" com o comando " def ". Porém essa abordagem corresponde ao que conhecemos nas linguagens mais tradicionais como "definição de variável global". Como é de conhecimento, as definições de "variáveis globais" podem trazer uma série de problemas as aplicações, uma vez que é quase impossível ter conhecimento de todas, com isso podemos acabar gerando problemas com a substituição de valores durante seu uso, podendo causar erros em diversos pontos da aplicação e tornando a aplicação instável e de difícil manutenção. Dito isso, veremos como trabalhar com símbolos dentro de um escopo limitado, seguiremos os próximos exemplos dentro de nossas funções. Escopo global Como vimos até aqui, os símbolos de escopo global podem ser acessados de qualquer parte da aplicação, vamos ao exemplo, considerando uma aplicação h

Anteriormente vimos como configurar o ambiente e em seguida escrevemos nossas primeiras linhas de código para começarmos a entender como o Clojure funciona, usamos algumas funções "nativas", declaramos algumas "variáveis" e também brincamos com um vetor. Nesse post daremos mais um passo, escreveremos nossa primeira função, passando por algumas de suas características e entendendo um pouco sobre como a criação delas funciona. Definindo nossa primeira função Para criar nossa primeira função precisamos ter em mente que o que deve ser feito é algo semelhante a definição de uma variável, a diferença fica por conta do uso do comando " defn " (é possível usar o " def ", mas veremos isso futuramente), basicamente precisaremos: Escrever todo o conteúdo dentro de parênteses; Usar o comando " defn "; Definir uma lista de parâmetros, se não existirem parâmetros (nosso caso agora) essa lista deve estar vazia; Definir o corpo da função; Opcionalmente

Como visto anteriormente, o fluxo de informações no React é unidirecional, partindo sempre do componente pai para os filhos, logo um componente pai desconhece o que acontece com o estado presente nos seus componentes filhos. Então como é que nós fazemos quando precisamos que com que um componente filho produza ou modifique um valor para que esse possa ser utilizado pelo componente pai? Bom a resposta para essa pergunta esta no titulo da postagem, resolvemos essa questão com a elevação do "state". A elevação do "state" em tese é algo relativamente simples, basta mudar o estado do filho para o pai, logo o filho não mais trabalhará com seu estado, ele receberá o estado do pai por meio das "props" e quando for necessário alterar o estado o componente filho deve chamar um método do pai, que também estará presente em "props". Exemplo No exemplo abaixo criaremos um componente "filho" que oferece uma lista de opções de acordo com

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

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

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

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

Vimos no post sobre funções que uma função pode possuir parâmetros e retornar valores, e na ocasião trabalhamos apenas com tipos primitivos da linguagem, e hoje veremos como receber e retornar arrays e objetos. Retorno Uma função que retorna um tipo mais complexo como um array ou um objeto pode nos ajudar, dentre outras coisas, a evitar a declaração de variáveis globais, também pode diminuir a complexidade de uma operação, vejamos alguns exemplos: function nomes() { return ['maria', 'teresa', 'flávia']; }; (essa rotina nos retorna uma lista de nomes); nomes()[1]; (como o retorno é um array conseguimos acessar um elemento conhecido por meio de seu indice); function recuperarPessoa() { var pessoa = { nome: 'Filisteu', idade: 89, sobre: function(){ return pessoa.nome + ', ' +  pessoa.idade + ' anos'} }; return pessoa; }; (essa rotina retorna um objeto, sendo que esse objeto possui propriedades e métodos); recuperarPessoa().n

Iniciaremos nesse post a ver o que são e como são construídos os objetos no Javascript, devemos ter em mente que os objetos em geral refletem um objeto da vida real, possuindo propriedades e comportamentos que o descreve. Tipos primitivos Os tipos primitivos são os já vistos até aqui, fornecidos pela própria linguagem: number, números inteiros ou decimais; string, texto contido entre '' ou ""; boolean, true ou false; null, sem valor atribuído; undefined, desconhecimento de valor; Tipo objeto Tudo o que não for um um tipo primitivo é um objeto, vamos a alguns exemplos: { prop1: 1, prop2: 'Teste' } (objeto anonimo contendo duas propriedades); meuObjeto = { cod: 100, nom: 'abcd', tip: true} (objeto chamado "meuObjeto" tres propriedades); meuObjeto.cod (acessando diretamente o valor da propriedade "cod" do objeto "meuObjeto"); var obj = function() {return 'Funcao anonima'}; (objeto "obj&quo

Quando precisamos armazenar uma rotina de modo que um mesmo trecho de código possa ser executado diversas vezes sem a necessidade de repetição da codificação lançamos mão desse artificio, também muito comum entre as mais diversas linguagens de programação. No Javascript sua criação e utilização são muito comuns, podemos dizer que não existem aplicações reais sem funções, logo nesse primeiro contato destacaremos algumas de suas principais características: Definição Por definição, uma função é um bloco de código nomeado que pode ser executado a partir do operador "()". Estrutura Possui como estrutura minima a palavra reservada "function" o "nome" utilizado para sua identificação, seguido do operador "()" e um bloco de conteúdo, determinado por "{}". function soma() {} É importante destacar aqui que, para utilizar uma função devemos obrigatoriamente saber seu nome e utilizar o operador de execução, ou seja, para ex