Tag: Iniciantes

Publicado em

Dicas para iniciar como Desenvolvedor

Neste artigo vou listar coisas que, na minha experiência, foram importantes para iniciar no mundo do desenvolvimento de sistemas. O que estou falando não é uma regra universal, mas apenas dicas de coisas que me aprendi nos últimos 10 anos atuando na área. 

Você vai notar que eu não vou falar muito de tecnologia, pois isso seria ensinar o padre a rezar a missa. E sei lá, enquanto você estiver lendo isso pode ser que elas mudem, então acredito que vale a pena ser mais genérico nesta parte. Muito bem, vamos lá

 

1) Gostar de programar

Esse parece ser meio óbvio, mas tem gente que quer o salário de tal desenvolvedor, quer ser o próximo Steve Jobs ou quer ser um nerd cientista. Nenhuma das razões acima é gostar de programar. Se você estiver na dúvida se gosta ou não, pense no seguinte:

  • Você monta apps por conta própria (sem alguém mandar ou pagar)?
  • Você fica feliz quando aprende ou entende um código?
  • Você perde a noção do tempo programando?
  • Você vai atrás do conhecimento porque gosta?

 

Se pelo menos um dos acima for sim é porque você provavelmente gosta de programar. Agora, se:

  • Você só programa se for obrigado ou pago.
  • Você não tem vontade de terminar qualquer projeto.
  • Rodou em algoritmos, estrutura de dados, lógica de programação por falta de interesse.
  • No tempo livre, entre programar e fazer qualquer outra coisa, você faz outra coisa.

Cara, ta na hora de pensar bem se é isso que você quer para o resto da sua vida.

2) Iniciativa

Se você se encaixou nos itens positivos acima, isso aqui pode ser repetição do que falei no item 1. Não espere os outros pedirem projetos nas áreas que você gosta, comece a fazê-los, mesmo que simples. Ninguém começa com o melhor e mais avançado projeto que fará em sua vida.

  • Quer ser um desenvolvedor front end? Faça projetos de sites e mini apps mobile.
  • Quer ser um desenvolvedor back end? Cruds, um site com login que não faz mais nada.
  • Quer ser um desenvolvedor de banco? Você é louco, mas todo mundo é um pouco. Crie bancos e monte as triggers, constraints, etc… para testar seus conhecimentos.

O que quero dizer aqui, não espere alguém sentar com você e pedir para que você faça o básico. Estude, teste, quebre, xingue que amanhã o problema parecerá tão simples.

 

3) Escolhendo a empresa 

Este item é tão importante (ou mais) que conseguir a vaga. Você já deve ter visto, ou verá, que existem empresas com vagas de estágio pedindo experiência ou conhecimentos de alguma coisa. Neste caso, existem 2 situações:

  1. O conhecimento é aquele que se aprende em 1 mês de curso online, na faculdade ou até com vídeo aulas do youtube. Essas empresas querem alguém que goste de programar e que vá atrás da informação. Se você atende ao “Gostar de programar” não deveria ser problema e sim um filtro para reduzir a sua concorrência.
  2. A empresa quer um desenvolvedor pelo salário de estagiário, pois não tem dinheiro para pagar um dev ou não quer pagar o valor correto. Essa pessoa normalmente já terá que produzir muito. Cara “ALERTA VERMELHO”
    1. Eles não valorizam o seu trabalho.
    2. Se tem dinheiro para pagar mais, não vão. Por isso a vaga de estagiário. Se não tem, como que vão te promover um dia? Pagando do bolso?

 

4) Entrevista

Nem tenha vergonha por estar começando, se esse não der certo, o outro vai. Mostre muito dos itens 1 e 2 que isso certamente fará diferença entre você e o carinha que quer receber para aprender o crud básico com alguém sentado do lado explicando.

Novamente, não estou dizendo que você não deve aprender no ambiente de trabalho e que o trabalho não deve ensinar você. Mas, se você chegar dizendo:

  •  “isso eu sei pois fiz um projeto e subi para o git, como que eu faço a próxima parte?”

é bem melhor que:

  •  “Certo, abrir a IDE, como que eu abro um projeto?”.

Você consegue ver a diferença?

 

Terminando

Então era isso, espero que alguém se beneficie lendo este post. Seja para entrar no ramo ou descobrir que outros são mais interessantes. Boa sorte.

Publicado em

Exercício fácil: DOM – Leitura

Neste exercício, armazenaremos elementos HTML em variáveis JavaScript! Para fazer isso, você pode usar o document.getElementById(), document.querySelector(), entre outros.

Exercício:

Crie as seguintes variáveis:

– titulo : conterá a primeira tag h1;

– descricao : conterá a tag com id = descricao;

– listaItens : conterá todas as tags com classe = itens;

Utilize o seguinte HTML como base para o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Titulo</h1>
    <p>subtítulo</p>
    <br/>
    <p id="descricao">Uma lista de itens</p>
    <br/>
    <ul>
        <li>Seus itens</li>
        <ol>
            <li class="itens">Livro</li>
            <li class="itens">Caneta</li>
            <li class="itens">Telefone</li>
            <li class="itens">Carteira</li>
        </ol>
        <li>Outros Itens</li>
        <ol>
            <li>N/A</li>
        </ol>
    </ul>
</body>
</html>
Dicas importantes:
  • Use a conotação (“.elemento”) para capturar por classe;
  • Use a conotação (“#elemento”) para capturar por ID;
  • Crie suas variáveis em um arquivo scripts.js;
  • Chame o seu arquivos scripts.js no seu arquivo index.html.
Confira o seu resultado:
let titulo = document.querySelector("h1");
let descricao = document.querySelector("#descricao");
let listaItens = document.querySelectorAll(".itens");

Gostou deste exercício? Teve dificuldade? Realizou de maneira diferente? Comente abaixo!

Publicado em

Exercício Fácil: Do…While

Você pode executar o mesmo código várias vezes usando o loop while.

O loop Do..While executa primeiro o código dentro do loop, para depois executar o “while” com a condição especificada. Veja este exemplo:

let nossoArray = [];
let i = 0;

do {
  nossoArray.push(i);
  i++;
} while (i < 5);

Este loop retornará um vetor com resultado : [0, 1, 2, 3, 4]. Ele difere do loop while normal que possui a condição especificada no início do loop.

Este é um loop while normal que executará enquanto a variável i for menor que 5:

let nossoArray = [];
let i = 0;

while (i < 5){
  nossoArray.push(i);
  i++;
}

Observe que inicializamos o valor de i como 5. Quando executamos a próxima linha, notamos que i não é menor que 5. Portanto, não executamos o código dentro do loop. O resultado disso é que o vetor terminará com nada sendo adicionado a ele, portanto continuará vazio.

Agora, façamos o mesmo com o do…while:

let nossoArray = [];
let i = 5;

do {
  nossoArray.push(i);
  i++;
} while (i < 5);

Nesse caso, inicializamos o valor de i como 5, assim como no exemplo anterior. Quando chegamos à proxima linha, não há verificação do valor de i. Portanto, vamospara o código dentro do loop e executamos. Adicionaremos um elemento ao vetor e incrementaremos antes de chegar à verificação da condição. Então, quando verificamos se i < 5, vemos que agora i é 6, que falha na verificação da condicional. Então, saímos do loop e terminamos. O valor de retorno será [5]. O do…while garante que o código dentro do loop seja executado pelo menos uma vez.

EXERCÍCIO:

Altere o loop while no código para um loop do…while, para que adicione o número 10 para meuVetor e o i será 11 quando seu código finalizar.

REQUISITOS:

  • Você deve usar um loop do…while para este exercício;
  • meuVetor deve ser igual a [10];
  • i deve ser igual a 11.

Você pode visualizar o resultado no código abaixo:

let meuArray = [];
let i = 10;

// Altera o código apartir desta linha
do {
  meuArray.push(i);
  i++;
} while (i < 11) ;

Gostou deste exercício? Digite seu resultado nos comentários!

Publicado em

Exercício fácil: Sequência de Fibonacci

Você conhece a Sequência de Fibonacci?

A Sequência de Fibonacci é uma sucessão de números. Esta sucessão obedece um padrão onde cada elemento subsequente é o resultado da soma dos dois elementos anteriores.

Ela pode ser definida pela seguinte fórmula:

Assim, teremos:

Fibonacci (0) = 0,

Fibonacci (1) = 1,

Fibonacci (2) = Fibonacci (0) + Fibonacci (1) =1,

Fibonacci (3) = Fibonacci (1) + Fibonacci (2) = 2,

Fibonacci (4) = Fibonacci (2) + Fibonacci (3) = 3,

Fibonacci (5) = Fibonacci (3) + Fibonacci (4)= 5,

Fibonacci (5) = Fibonacci (4) + Fibonacci (5) = 8,

E assim, sucessivamente.

Mas onde ela pode ser aplicada?

A Sequência de Fibonacci pode ser aplicada em diversas áreas, como:

  • Análise de mercados financeiros: existem relações entre picos e vales em gráficos de flutuação da bolsa financeira, que tendem a seguir razões numéricas aproximadas com as razões de números da Sequência de Fibonacci.
  • Triângulo de Pascal: os triângulos de Pascal e Pitágoras também se relacionam com a Sequência de Fibonacci.
  • Pintura e Arte: as artes utilizavam-se da Proporção Áurea.
  • Anatomia e Homem Vitruviano: medidas e funcionamento do universo conectadas pela proporção do número de ouro.
  • Entre outras diversas aplicações…

Exercício:

Neste exercício, você deverá reproduzir a Sequência de Fibonacci utilizando um laço de repetição. Utilize o laço For ou o While pra resolver este problema.

function fibonacci(n) {
    if () {
        return;
    }

    for () {
        if () {
            return;
        }
    }
}

Crie um algoritmo que retorne o valor da Sequência de Fibonacci na posição 5, na posição 7 e na posição 13. Você deverá ter um log de saída aproximadamente neste formato:

Gostou deste Exercício? Achou fácil ou difícil? Comente os seus resultados abaixo!

Você pode baixar o código-fonte com o resultado do exercício aqui: [download id=”2730″]

 

Publicado em

Exercício fácil: Unindo Arrays em JavaScript

Você sabe o que é um array?

Arrays são objetos semelhantes a listas. O tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não necessariamente seguindo uma ordem contínua. Eles possuem índices, que devem ser em números inteiros. Utilizando a notação de colchetes, você pode acessar ou definir os valores dos elementos dentro do array.

União de Arrays:

Requisitos:

Existem várias maneiras de adicionar novos elementos à um vetor em JavaScript. Neste exercício, serão utilizados as funções concat() e push().

Concat: Cria um novo array contendo uma cópia de si e dos argumentos passados.

arr.concat(valor1, valor2, ..., valorN)

// Onde: arr é o vetor que será concatenado
// Concat: função de concatenação
// Valores: argumentos

Push: Adiciona um ou mais elementos ao final do array e retorna o comprimento deste array.

arr.push(elemento1, ..., elementoN)

// Onde: arr é o vetor que será utilizado
// Push: função push para inserção de elementos no vetor
// Elementos: Argumentos/Elementos que serão inseridos no vetor

Para descobrir outras funções de união de vetores, acesse o artigo a seguir: Adicionando elementos em uma lista array JavaScript

Exercício:

Parte 1:

Crie três vetores, chamados vetorInteiro, vetorString e vetorDouble. Cada um destes vetores deverá conter quatro valores, sendo o primeiro com valores inteiros, o segundo com strings e o terceiro com valores decimais.

Declarados os vetores, utilize a função de união concat() de duas maneiras diferentes para unir os vetores, e mostre o resultado no console. Todos os elementos do vetor resultado deverão aparecer no console.

Se você não sabe quais são os modos de usar a função concat, acesse este artigo para descobrir: Duas maneiras de unir vetores em JavaScript

Parte 2:

Crie dois vetores chamados vetorPilha e vetorAdiciona. Utilize o método Push para adicionar elementos do vetorAdiciona ao vetorPilha. Inicialmente, o vetorPilha conterá cinco elementos inteiros: [1, 2, 3, 4, 5]. Você deverá adicionar os valores contidos no vetorAdiciona [6, 7, 8, 9,10] e mostrá-los no console. É importante lembrar que o método Push retorna somente o tamanho do Vetor, então, justifique por quê motivo isso acontece e imprima no console o vetor com os elementos adicionados.

Você pode fazer o download das respostas destes exercícios aqui: [download id=”2547″]

Gostou deste exercício? Comente os seus resultados abaixo!

 

Publicado em

Como usar o setTimeOut

setTimeout()

Assim como a função setInterval(), o setTimeout() é uma função temporizadora que é utilizada para chamar funções de retorno após um tempo estipulado. A diferença entre essas duas funções temporizadora é que o setTimeout() chama a função apenas uma vez, e o setInterval() chama a função indefinidamente no intervalo de tempo passado, parando somente quando se utiliza a função clearInterval().

Sintaxe:

// sintaxe da função setTimeout, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setTimeout(função, milissegundos, param1, param2, …);
Onde:

função: é a função que será executada no intervalo de tempo predefinido;

milissegundos: é o intervalo de tempo estipulado para a chamada da função;

param1, param2: são os parâmetros utilizados.

HTML no exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercicio setTimeOut</title>
</head>
<body>
    <section id="textoCompleta">
        <!-- O cabeçalho -->
        <h1>O texto irá preencher-se sozinho!</h1>
        <p id="type"></p>
    </section>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Cria-se uma função, que possui o texto a ser mostrado
(function () {
    const text = "Este texto irá se preencher de forma automática. Estou usando o setTimeOut para definir o tempo em que as palavras serão escritas!"
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

    // Nesta parte, cria-se uma variável contador e uma função
    // que irá definir o intervalo de tempo em que cada letra 
    // será mostrada de forma automática na tela.
    let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            const letra = text.charAt(contador);
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }
    mostrarTexto();
})();

Como funciona o exemplo?

Este exemplo cria uma função que exibe letra após letra do texto inserido, de forma automática, no intervalo de tempo definido. Na função abaixo determinamos qual o texto que será inserido.

const text = "Texto que será exibido na tela!"
    // O texto precisa ser inserido em uma tag html, e essa tag deve possuir um id
    // pois este id será utilizado para identificar em qual parágrafo o texto será inserido
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

Função setTimeout():

A função setTimeout irá definir o tempo em que cada letra do texto irá ser exibida na tela do usuário. Em conjunto a isto, podemos utilizar o método charAt(), que irá retornar os caracteres presentes no texto! O código textArea.textContent += letra irá retornar uma letra por vez, de maneira sequencial, da esquerda para a direita.

let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            // Este código captura os caracteres do texto
            const letra = text.charAt(contador);
            // e os mostram de forma sequencial, da esquerda para a direita
            // tornando possível que o texto apareça de forma sequencial, letra por letra
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Como usar o setInterval

setInterval e clearInterval():

O setInterval() é uma função temporizadora. Ela executa uma função de retorno após determinado tempo. A função setInterval() executará infinitamente, até que você execute a função clearInterval().

Se você é iniciante, você pode pular a explicação Como funciona.

Como funciona?

Sendo uma função assíncrona, a instrução a ser executada é lançada no Event Loop. Mas o que é Event Loop? É uma instrução síncrona, ou seja, quando ela estiver executando, a thread ficará bloqueada e, assim que terminar, a próxima instrução é executada. Como o setInterval() executará infinitamente, sabemos que ele adicionará uma instrução ao Event Loop a cada quantia de tempo que for definida.

Definição:

O setInterval() chama uma função em intervalos de tempo definidos. Ele continuará chamando a função até que o clearInterval() seja chamado, ou que a página seja fechada.

Sintaxe:

// sintaxe da função setInterval, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setInterval(function, miliseconds, parameter1, parameter2, …);
Onde:

function: é a função que será executada;

miliseconds: é o intervalo em milisegundos(ms) em que o código será executado. Se o valor especificado for menor que 10, o valor 10 será utilizado.

parameter: parâmetros para passar para a função.

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>

<body>
    <button id="btn">Clique aqui para iniciar</button>
    <script src="main.js"></script>
</body>

</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;

O clearInterval() limpa o timer configurado pela função setInterval(). Ele desativa a função e não executa a função definida pelo temporizador.

Sintaxe:

// Função clearInterval travará a execução do setInterval
// bloqueando a ação definida pelo temporizador
clearInterval(id_do_setInterval)

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>
<body>
    <button id="btn">Clique aqui para iniciar</button>
    <button id="btn2">Clique aqui para parar</button>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função que será executada para bloquear
// a ação do temporizador definido no setInterval
function pararFuncao() {
    clearInterval(variavel);
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;
document.getElementById("btn2").onclick = pararFuncao;

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Diferença de var, let e const no JavaScript

Diferenças:

Você sabe qual a diferença entre var, let e const em JavaScript? Sabe como aplicá-las? Descubra tudo no artigo abaixo:

Variável, um breve resumo:

Uma variável referencia um espaço na memória, utilizado para guardar informações. Uma variável é um dos, se não o conceito mais importante em programação, e independe da linguagem de programação utilizada. Na variável, nós armazenamos um valor neste espaço de memória e informamos o seu tipo. Ela se chama variável, pois poderá ser alterada ao longo do tempo, ou seja, o valor é “variável”.

No JavaScript, não precisamos informar o tipo do dado armazenado na memória. Mas existem três tipos de variáveis no JavaScript, elas são:

  • var;

  • let;

  • const;

Agora vamos ver o conceito e aplicação de cada uma delas:

Var:

Em JavaScript, o escopo é dado por funções, e não por blocos. A palavra “var” garante a variável dentro do escopo onde ela foi declarada, ou seja, pode ser acessada de qualquer ponto dentro do código, como no exemplo abaixo:

// var está sendo declarado dentro do escopo da função
function imprimeNome() {
    var nome = "Fulano";
}
imprimeNome();
console.log('Meu nome é: ', nome);

Executando este código, a saída será “Uncaught ReferenceError: nome is not defined”.

Mas por que? Porque a variável nome não possui nenhum valor definido fora do escopo da função, ou seja, a variável nome só existe dentro da função imprimeNome.

Segundo as boas práticas, o var está aos poucos sendo substituído pelo uso do let e const.

Let:

A palavra-chave “let” é usada para declarar as variáveis com escopo de bloco. Ou seja, quando é declarada dentro de qualquer bloco, seja ele uma função, uma condicional ou um loop, ela ficará acessível apenas dentro do bloco do qual foi declarada.

Seu comportamento é igual ao da variável “var” quando ela for declarada fora de função, no escopo global. Observe o exemplo abaixo:

// variável let a declarada no escopo global e
// variável let b declarada no escopo da função
let a = "fulano";
function imprimeNome() {
    let b = "ciclano";
    if (a != b) {
    console.log("Seu nome é ", a, "ou", b, "?");
    }
}
imprimeNome();

Executando o código acima, a saída será: Seu nome é fulano ou ciclano?

Mas por que funcionou? Veja bem, o let possui escopo global e também é acessível dentro da função, portanto, poderá ser acessada e retornar os seus valores.

Const:

A palavra-chave “const” indica uma variável que possui o valor fixo, uma constante. Não significa que é imutável, mas sim, que a constante não poderá ser alterada. A constante pode ser declarada tanto ao escopo global, quando em uma função, funcionando de maneira parecida com o “let”, com a diferença que o “const” terá um valor constante. Veja no exemplo a seguir:

// variável const declarada no escopo global
const valor = 12;
function imprimeValor(){
    for(valor = 12; valor < 15; valor++){
        console.log('Valor: ', valor);
    }
}
imprimeValor();

Executando o código, o retorno será um erro: Uncaught TypeError: Assignment to constant variable. Isso acontece porque o laço for incrementará a constante, alterando o seu valor.

Gostou deste artigo? Deixe sua opinião nos comentários!

Publicado em

Eventos no JavaScript

O que são Eventos?

Eventos são ações que ocorrem no sistema. Envolver eventos na sua página web significa interação, que deixará a sua página mais atrativa e interessante. Podemos utilizar como exemplo, um clique em um botão em uma página web e este clique irá gerar uma ação (um evento).

Cada clique, cada tecla pressionada, um toque em uma tela touchscreen dão vida à sua página, criam interação. Estas interações são conhecidas como eventos.

Os eventos em JavaScript podem ser analisados em camadas. Por exemplo, preencher um formulário e devolver uma mensagem de sucesso ao usuário (alert()):

  • O campo é preenchido;
  • O usuário clica no botão de envio;
  • O botão dispara um evento;
  • O código escuta o evento disparado;
  • A mensagem de sucesso é mostrada ao usuário.

Quando o botão é clicado, o navegador emite a ação, que é conhecida como evento. A aplicação sabe que o botão foi clicado, mas se faz necessário saber o que acontece quando esta ação é realizada, fazendo-se necessário que o código esteja escutando ativamente o evento.

Cada evento disponível possui um manipulador de eventos, que é um bloco de código (uma função JavaScript) que é executado quando a ação foi disparada. Quando o código é rodado em resposta ao evento disparado, estamos registrando um manipulador de eventos. Em alguns casos, os manipuladores de eventos são chamados de escutadores de evento. Os escutadores escutam o evento acionado, e o manipulador de eventos é o código que será acionado em resposta a este acontecimento.

Eventos no JavaScript, como ocorrem?

// Nesta função, um evento será acionado
// quando o usuário pressioná-lo, e irá
// devolver uma mensagem de alerta na tela.
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Exemplo de Eventos</title>
</head>

<body>
    <button>Pressione Aqui</button>
    <script>
        var btn = document.querySelector('button');

        btn.addEventListener('click', mostrarCaixa, false);

        function mostrarCaixa(e) {
            window.alert("Você clicou em mim!");
        }
    </script>
</body>

</html>

Este código gera uma escuta de um evento (clicar no botão) e uma reação a ele (mostrar a caixa de diálogo).

Escutando Eventos (addEventListener()):

Eventos são disparados. A tarefa de escutar o evento certo é tratada pela função addEventListener(). Esta função notifica as outras partes do aplicativo quando o evento é disparado. Ela é usada da seguinte forma:

source.addEventListener(eventName, eventHandler, false);

Onde:

  • source é o nome da função (btn no caso de exemplo acima);
  • eventName é a especificação do evento que será escutado (‘click’ no nosso exemplo);
  • eventHandler é a especificação da função que será chamada quando o evento for disparado ( mostrarCaixa no exemplo acima);
  • O último argumento diz respeito às fases do evento, capturing e bubbling (conceitos que serão vistos adiante).

Manipuladores e Argumentos de Evento:

A função que é chamada quando um evento é disparado é conhecido como Manipulador de Eventos (event handler). Pelo addEventListener, conseguimos perceber que o nosso manipulador de eventos é a função mostrarCaixa.

btn.addEventListener('click', mostrarCaixa, false);

A declaração da função é praticamente a mesma que qualquer outra função declarada, com a exceção de que a função recebe um argumento, conhecido como argumentos de evento (“eventargs”). Estes argumentos de evento fornecem mais detalhes sobre o evento, tornando o manipulador mais inteligente. O manipulador de eventos do exemplo não faz nada com os argumentos do evento, mas serve como base para você criar argumentos ao seu critério.

Os argumentos de evento contém propriedades relevantes ao evento disparado. Por exemplo, uma ação disparada por um click do mouse terá propriedades diferentes em seus argumentos do evento de uma ação disparada por um toque na tela(no caso de telas touchscreen) e de uma tecla clicada.

Borbulhamento e captura de eventos (bubbling e capturing):

Borbulhamento e captura de eventos descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento.

Na fase de captura:
  • O navegador verifica se o ancestral mais externo do elemento (<html>) tem um manipulador de eventos registrado nele e o executa.
  • Ele realiza o mesmo procedimento dentro dos elementos filhos até alcançar o elemento clicado.
Na fase de Borbulhamento:
  • O navegador verifica se o elemento clicado tem um manipulador de elementos registrado e o executa.
  • Em seguida, ele passa para o próximo elemento ancestral imediato e realiza a mesma coisa sucessivamente, até alcançar o elemento (<html>).
Publicado em

Qual a diferença entre JSON e um objeto JavaScript?

Neste post mostrarei brevemente o que é um JSON e o que é um objeto literal JavaScript e qual a diferença entre eles.

JSON

JSON é a abreviação de JavaScript Object Notation e é uma maneira de armazenar e comunicar informações de maneira organizada e fácil de acessar. Em resumo, o JSON nos dá uma coleção de dados legíveis por humanos que podemos acessar de uma maneira realmente lógica.

Atualmente o JSON tem sido muito utilizado para facilitar a comunicação e passagem de dados entre sistemas construídos em linguagens de programação diferentes. Em especial, muitas APIs usam o JSON como seu formato de recebimento e retorno de dados

Exemplo JSON

{
    "nome":"Paulo",
    "idade": 34
}

 

Objeto JavaScript

Um objeto JavaScript é uma representação abstrata de um modelo de dados composto, assim como nas outras linguagens de programação.

Exemplo:

let objeto = { 
    nome:"Paulo", 
    idade: 34 
}

Devido a semelhança entre o JSON e o Objeto Literal, quando o JavaScript lê o JSON ele o reconhece com se fosse um objeto literal. Isso facilita a programação e recebimento de dados, mas acaba confundindo alguns iniciantes.

 

Onde que o JavaScript e o JSON diferem?

Mesmo assim, existem algumas diferenças entre ambos que importante conhecer. Veja abaixo:

Criação de atributos

Como você deve ter notado no exemplo, no JSON é necessário criar as propriedades usando aspas duplas, enquanto no objeto apenas o nome é necessário.

//Obj Literal
let objeto = {
    umaProp: "Lorem Ipsum"
}

//JSON
let objeto2 = {
    "umaProp": "Lorem Ipsum"
}

Uso de aspas

Enquanto o objeto permite o uso de aspas simples ou dupla para expressar strings, o JSON já funciona de maneira mais uniforme e permite apenas o uso de aspas duplas.

// Os seguintes exemplos não são JSONs válidos
{
    'prop': "propriedade"
}

{
    "prop": 'propriedade'
}

Importante: Note que se você estiver utilizando o JavaScript, não ocorrerá erro pois ele interpretará seu objeto como sendo literal.

Tipos de Dados:

JSON: O Json pode armazenar os seguintes valores

  • String
  • Número
  • Objeto JSON
  • Vetor
  • Booleano
  • Null

Objeto: Além dos valores acima, o objeto possuí alguns valores que não são válidos no JSON

  • Objeto Literal
  • Data (no formato Date)
  • Função
  • Undefined

É isso aí, espero que esta explicação rápida ajude mais alguém. Se você conhece outras diferenças, deixe aqui nos comentários que atualizarei a postagem conforme aparecerem contribuições.