Posts da Tag: JavaScript - Blog da TreinaWeb

Desenvolvimento Front-end Javascript

Trabalhando com arrays e objetos no JavaScript

Saber utilizar arrays e objetos no JavaScript é de extrema importância. Neste artigo vamos aprender como declarar e utilizar arrays e objetos com exemplos práticos.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

O que são arrays em JavaScript?

O array é um objeto no JavaScript, ele nos auxilia pois podemos utilizar uma única variável para armazenar uma lista de diferentes elementos.

Por exemplo, imagine que seja necessário armazenar os nomes de todos os alunos de uma sala de aula, criar uma variável para cada aluno seria, no mínimo, trabalhoso, dependendo do tamanho dos dados eu diria inviável.

Nesta ideia podemos então criar a variável alunos e com isso armazenar o nome de todos os alunos.

Como declarar um array no JavaScript?

Para utilizar os Arrays precisamos declarar uma variável (você pode acessar o nosso artigo conhecendo variáveis e constantes no JavaScript para saber como declarar variáveis).

E ao atribuir um valor, vamos colocar entre [] e separar cada um por ,. Por exemplo:

let alunos = ['Wesley', 'Marina', 'Bruno', 'Paula'];
var series = ['Game of Thrones', 'Friends', 'Vikings'];

Obs: lembrando que nossas listas são variáveis, portanto podem ser declaradas tanto com let ou var.

Nós podemos declarar arrays sem nenhum item e tamanho, ou somente com tamanho definido mas vazio, da seguinte forma:

let alunos = Array(20);
var series = [];

No primeiro exemplo nós declaramos e atribuímos 20 posições para o array alunos, e no segundo exemplo deixamos em aberto o tamanho do array. Para popular o array, é só atribuir um valor junto ao índice:

let alunos = Array(20);
alunos[0] = 'Paulo';

Curiosidade: no JavaScript nós temos o método Array.isArray(obj); que permite verificar se um objeto é um array, utilizando um dos exemplos acima nós temos o seguinte resultado:

Usando Array.isArray

Ele retorna true caso seja um array e false caso não seja.

Mas enfim, declaramos nossos arrays. Porém, como podemos acessar os dados armazenados?

Como alterar e acessar itens de um array no JavaScript?

Para acessar um item de um array é muito simples, basta utilizarmos o índice da posição do item.

Em relação ao nosso exemplo, nós não adicionamos os itens a um índice declarado, portanto o JavaScript inicia do índice 0 e incrementa cada item posterior. Portanto, para exibir um item podemos fazer da seguinte forma:

console.log(alunos[1]);

Neste caso vamos exibir o item que se encontra no índice 1, lembrando que a nossa lista é iniciada no índice 0, portanto, teremos o seguinte resultado:

Exibindo array alunos com console.log no JavaScript

Ao executar o console.log(alunos[1]) obtemos o retorno ‘Marina’.

Para alterar um elemento, basta usar o nome do array com o índice e atribuir o novo valor:

alunos[2] = 'Gabriel';

Ao executar o código acima o aluno Bruno será alterado pelo aluno Gabriel.

Alterando elementos de um array no JavaScript

Como adicionar um novo elemento a um array?

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Para adicionar um elemento a um array nós utilizamos o método push(), da seguinte forma:

alunos.push('Bruno');

Após a execução do método push() podemos verificar que o aluno Bruno foi adicionado ao final do array, que agora possui 5 posições:

Usando método push para adicionar elemento a um array

Outro ponto importante que vale ressaltar é que o JavaScript permite um array de elementos de tipos diferentes:

let array = [1, 'Paulo', 2, 'Marina', 3, 'Bruna'];
typeof array[0];
typeof array[1];

No exemplo acima declaramos o array array com itens do tipo number e string e utilizamos o operador typeof para verificar o tipo de cada elemento. Ao executar o código acima vamos obter o seguinte resultado:

Tipos de elementos em uma String

Como podemos ver, para o índice 0 temos um elemento do tipo number e para o índice 1 temos o um elemento do tipo string.

Você pode aprender sobre métodos utéis para trabalhar com arrays no nosso artigo “Javascript: métodos de arrays que voce precisa conhecer“.

Como utilizar objetos no JavaScript

Nós utilizamos objetos para agrupar valores que possuem propriedades e funções, podemos por exemplo fazer uma analogia aos objetos do mundo real. Um carro que possui cor e marca, ele também realiza ações como acelerar e frear.

Para declarar um objeto a sintaxe é bem parecida a que utilizamos para declarar arrays, porém trocamos os [] por {}. Onda as chaves, valores e funções são declaradas entre {}, conforme abaixo:

let carro = {
        modelo: 'gol',
        cor: 'vermelho',
        acelerar(){
            console.log('Acelerando...');
        },
        frear(){
            console.log('Freando');
        },
};

Neste caso declaramos o objeto literal carro, que possui duas propriedades, modelo e cor, que podem ser chamadas de chaves. Declaramos também duas funções, acelerar e frear, que podem ser chamadas de métodos. Vale ressaltar que nós podemos declarar de outras formas as funções: acelerar: function () {}ou utilizando uma arrow function, acelerar: () => {}.

Após declarar nosso objeto, podemos executar um cosole.log(carro); para visualizar como é apresentado:

Objeto

Como acessar as propriedades ou funções de um Objeto?

Para acessar uma propriedade ou uma função basta utilizarmos o nome do objeto seguido da propriedade/função separada por ponto. Por exemplo:

console.log(carro.modelo);
console.log(carro.acelerar);
carro.acelerar();

Utilizamos a função console.log, para exibir os dados acessados no console, importante lembrar que para executar a função acelerar não podemos esquecer dos ().

Ao executar o código acima, vamos obter o seguinte resultado:

Acessando Objetos

Outra forma que podemos utilizar para acessar propriedades é utilizando o padrão objeto['propriedade'], o que possibilita usarmos variáveis para estar acessando as propriedades de um objeto.

Acessando propriedade de objetos com variáveis

Como alterar e adicionar novas propriedades a um objeto?

Para adicionar uma propriedade em um objeto no JavaScript é bem simples, basta usarmos a sintaxe de acesso às propriedades porém atribuindo um valor a nova propriedade inexistente, podemos fazer de duas formas:

carro.ano = 2011;
carro['marca'] = 'Volkswagen'

Ao executar esse código as novas propriedades são adicionadas em nosso objeto:

Adicionando propriedades

Para alterar as propriedades de um objeto basta utilizar a mesma lógica acima, porém com uma propriedade já existente:

carro.cor = 'prata';
carro['ano'] = 2010;

Ao executar o código acima os dados das propriedades são atualizados:

Atualizando propriedades

Como deletar uma propriedade de um objeto?

Para deletar basta usarmos o operador delete, seguindo a lógica do objeto.propriedade:

delete carro.ano;

Desta forma a propriedade ano não fará mais parte do nosso objeto carro:

Excluindo propriedades

Conclusão

Neste artigo tivemos o primeiro contato com a manipulação de arrays e objetos no JavaScript, podemos perceber que a linguagem permite trabalhar esses conceitos de forma flexível e eficiente.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Desenvolvimento Front-end Javascript

Estruturas condicionais e estruturas de repetição em JavaScript

Neste artigo vamos focar na utilização das estruturas condicionais e estruturas de repetição em JavaScript e de seus conceitos.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

As estruturas condicionais estão ligadas à tomada de decisão de um algoritmo. Ao utilizar expressões que retornam verdadeiro ou falso, o algoritmo executa o bloco de comandos relativos a este resultado.

Já no caso das estruturas de repetição, elas são úteis quando precisamos repetir N vezes a execução de um bloco de comandos até que uma condição seja atendida.

Caso você não esteja familiarizado com os conceitos de estruturas condicionais e estruturas de repetição, aconselho a leitura de nosso artigo Estruturas condicionais e de repetição.

Os exemplos serão executados utilizando o console do navegador, caso você não saiba executar um código JavaScript, leia nosso artigo Executando seu primeiro código com JavaScript.

Estruturas condicionais no JavaScript

Como utilizar a estrutura condicional ‘if(se)’ no JavaScript

Vamos aprender a utilizar as estruturas condicionais no JavaScript, começando pelo uso do if(se), else if e else(senão).

Primeiramente precisamos entender a sintaxe, podemos simplificar com o exemplo abaixo:

if (idade > 18){
    console.log("Você é obrigado a votar");
}

No exemplo nós utilizamos a palavra if seguido da condição idade > 18 . Ou seja, caso a variável idade seja maior que 18 (verdadeiro), os comandos que estarão no bloco serão executados, se tratando do exemplo, será executado o comando console.log("Você é obrigado a votar").

Utilizando estruturas - IF

Porém este exemplo não está completo, afinal, há quem não pode votar e também o voto opcional. Podemos utilizar os operadores lógicos na condição para deixar mais robusto o nosso exemplo:

if (idade > 15 && idade < 18 || idade > 70){
    console.log("O voto é opcional");
}

Agora nós criamos uma estrutura condicional utilizando if e os operadores lógicos && (E) e ||(OU), mas ainda podemos deixar mais completo o nosso exemplo utilizando a estrutura else if :

if (idade > 15 && idade < 18 || idade > 70) {
    console.log("O voto é opcional")
}else if (idade < 16) {
    console.log("Você não pode votar");
}

Como se pode ver, utilizamos o else if para impor outro bloco de comandos caso a primeira condição do if não fosse atendida, neste caso nós teremos o seguinte resultado:

Utilizando estruturas condicionais - ELSE IF

Contudo, para finalizar o nosso exemplo, precisamos também informar quando o voto é obrigatório. Percebe-se que é, justamente, o intervalo de idade que as condições que estão em nosso if / else if não estão abrangendo, portanto, podemos somente adicionar um else, ficando desta forma:

if (idade > 15 && idade < 18 || idade > 70) {
    console.log("O voto é opcional")
}else if (idade < 16) {
    console.log("Você não pode votar");
}else {
    console.log("Você é obrigado a votar");
}

Obtendo o seguinte resultado:

Utilizando estruturas condicionais no Javascript - ELSE

Neste exemplo mostramos como é possível atribuir um comportamento de tomada de decisão utilizando as estruturas condicionais if, else if e else no JavaScript.

Em algumas situações onde trabalhamos com inúmeros if / else e com valores pré-definidos nas condições, podemos utilizar a instrução Switch Case.

Como utilizar Switch Case no JavaScript

Outra estrutura condicional do JavaScript que podemos utilizar é o Switch Case.
O Swith Case é uma instrução que se comporta de forma semelhante ao if / else, porém possui uma estrutura mais organizada e de fácil compreensão. Lembrando que só é aceito valores pré-definidos e não expressões condicionais.

Podemos analisar a estrutura do Switch Case no seguinte exemplo:

let signo = 'Leão';

switch (signo) {
  case 'Áries':
    console.log("De 21 março a 20 abril");
    break;
    case 'Touro':
    console.log("de 21 abril a 20 maio");
    break;
  case 'Gêmeos':
    console.log("de 21 maio a 20 junho");
    break;
  case 'Câncer':
    console.log("de 21 junho a 22 julho");
    break;
  case 'Leão':
    console.log("de 23 julho a 22 agosto");
    break;
  case 'Virgem':
    console.log("de 23 agosto a 22 setembro");
    break;
  default:
    console.log("Signo não registrado");
    break;
}

Neste caso nós temos uma variável que recebe um signo, e então, devemos exibir qual o intervalo de nascimento referente a esse signo. Seria muito mais complexo utilizar if / else para este exemplo do que o switch case.

Ao analisar o exemplo, ao lado do switch atribuímos a variável signo, neste caso ele pede a expressão que será comparada a cada case. Sendo verdadeiro com alguma das opções, os comandos do bloco são executados até atingir a palavra-chave break. Caso nenhuma das opções seja verdadeira, a instrução irá executar os comandos que estarão na opção default.

Ao executar o exemplo acima, obtemos o seguinte resultado:

Utilizando estruturas condicionais - Switch Case

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Estruturas de repetição no JavaScrpit

Agora vamos aprender a utilizar as estruturas de repetição no JavaScript, como: while, for, for…in e for…of.

Como utilizar while(enquanto) no JavaScript

Podemos utilizar a estrutura de repetição while caso seja necessário repetir um bloco de comandos por N vezes.

let i = 0;
while(i < 11){
    console.log('5 x ' + i + ' = ' + 5*i);
    i++;
}

A sintaxe do while, como vemos no exemplo acima, é bem simples. Utilizamos a palavra reservada while , logo em seguida precisamos passar uma condição que será atendida enquanto ela retornar true, ou seja, verdadeiro.

Neste caso, simulamos a tabuada do 5, a variável i é o nosso contador, iniciamos ela com o valor 0 , portanto a condição será verdadeira até que ela atinja o valor 11, e por isso ela é iterada a cada repetição – i++, ao atingir tal valor o laço é quebrado.

Executando o código acima teremos o seguinte resultado:

Utilizando estruturas de repetição - While

Utilizando Do-While

O do-while tem o mesmo conceito que o while com uma única diferença, a condição é verificada após os comandos do bloco serem executados, ou seja, mesmo que a condição seja falsa, é garantia que o bloco será executado ao menos uma vez.

Podemos testar da seguinte forma:

let contador = 0;

do{
    console.log("O contador vale: " + contador);
    contador++;
}while(contador == 1)

A variável contador foi inicializada com o valor 0 e o while está com a condição contador == 1 ou seja, a condição é falsa e utilizando o while nosso bloco de comandos não seria executado. Porém podemos perceber que ao utilizar do-while, o bloco vem antes da verificação da condição, com isso ele garante que o bloco de comandos seja executado ao menos uma vez.

Desta forma vamos obter o seguinte comportamento:

Utilizando do-while

Como utilizar For(para) no JavaScript

A estrutura de repetição for no JavaScript segue o mesmo princípio que o while, porém este recurso é mais utilizado quando se sabe o número de iterações da repetição, como ao percorrer um vetor, por exemplo.

Podemos replicar o exemplo acima da tabuada, porém utilizando for:

for(let i = 0; i < 11; i++){
    console.log("5 x " + i + " = " + 5*i);
}

Para utilizar o for, usamos a palavra-chave for seguida de três declarações, primeiramente iniciamos a variável que será o controlador do nosso laço de repetição, logo em seguida precisamos informar a condição a ser atendida e, por último, uma expressão que será executado ao final de cada iteração do for, normalmente utilizamos para incrementar a variável que será utilizada como controlador do nosso laço.

Ao executar o código teremos o resultado semelhante ao exemplo utilizando while:

Utilizando estruturas de repetição no Javascript - FOR

OBS: Vale ressaltar que o while é mais indicado para situações onde não temos conhecimento do número de iterações do laço, já o for é mais adequado para situações que o número de iterações está definido previamente.*

Utilizando for…in e for…of

No JavaScript, nós temos mais duas variações da utilização do for, o for…in e for…of.

O for…in é utilizado para percorrer as propriedades de um objeto, por exemplo:

let carro = {
marca: 'ford',
modelo: 'fiesta',
cor: 'prata',
}

for (propriedade in carro) {
    console.log(propriedade);
}

Criamos uma instância do objeto carro, onde temos como propriedade a marca, modelo e cor.

Ao utilizar o for, passamos a variável que irá percorrer as propriedades do objeto e logo em seguida, de qual objeto.

O resultado esperado:

Utilizando estruturas de repetição no Javascript - FOR IN

Também podemos acessar os atributos de cada propriedade, para isso basta usarmos propriedadecomo índice do nosso objeto, desta maneira:

for (propriedade in carro) {
    console.log(carro[propriedade]);
}

Vamos obter a seguinte saída:

Acessando atributos for in

E por fim, podemos exibir o objeto por completo somente usando o for…in:

for (propriedade in carro) {
    console.log(propriedade + ': ' + carro[propriedade]);
}

Exibindo objetos for in

O for…of nós podemos utilizar para percorrer objetos iteráveis como Maps, Sets e Vetores de forma simples e eficaz, da seguinte forma:

let carros = [ 'fiesta', 'onix', 'fusca', 'saveiro' ];

for (let carro of carros) {
    console.log(carro);
}

Neste caso, vamos obter os valores de cada índice:

Utilizando estruturas de repetição no Javascript - FOR OF

Também é possível exibir o índice referente a cada item usando o método entries()da seguinte forma:

for (let [index, carro] of carros.entries()) {
    console.log(index, carro);
}

Desta maneira vamos obter os índices e os respectivos valores:

Utilizando estruturas de repetição no Javascript - FOR OF

Existem outras maneiras que podemos utilizar para percorrer vetores, aconselho a leitura de nosso artigo Métodos de Arrays que você deve conhecer aqui da TreinaWeb 😀

Conclusão

Neste artigo aprendemos a utilizar as estruturas condicionais if, else if e else, e as estruturas de repetição while, for, for…in e for…of no JavaScript.

Lembrando que são conceitos fundamentais para o seu desenvolvimento no estudo de qualquer linguagem de programação.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Desenvolvimento Front-end Javascript

Conhecendo variáveis e constantes no JavaScript

Características de tipagem do JavaScript

Primeiramente, devemos citar que a linguagem JavaScript é de tipagem dinâmica, ou seja, não é necessário declarar tipo a uma variável, podendo ser modificada posteriormente.

A própria linguagem de programação, neste caso, tem a habilidade de escolher o tipo de dado de acordo com o valor atribuído a variável.

Em nosso artigo “Quais as diferenças entre tipagens: estática ou dinâmica e forte ou fraca“, explicamos quais os conceitos por tipagem estática e dinâmica e também sobre tipagem fraca e forte. É importante a leitura para você entender como o JavaScript lida com os tipos, principalmente se você está acostumado a programar em uma linguagem com tipagem estática e forte.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Tipos de dados do JavaScript

Ao programar em JavaScrpit nós precisamos saber quais os tipos de dados que a linguagem trabalha, os principais tipos de dados primitivos são:

  • Boolean – possuem apenas dois valores: verdadeiro ou falso;
  • Undefined – indica que não foi definido um valor;
  • Null – indica que um valor é nulo;
  • Number – armazena valores numéricos;
  • String – armazena textos;
  • Symbol – armazena símbolos;

Além dos tipos de dados primitivos, nós também temos o tipo object, que possibilita trabalharmos com objetos utilizando JavaScript.

Regras de nomeação de variáveis no JavaScript

Uma das peculiaridades da linguagem JavaScript é que podemos declarar variáveis de duas formas, utilizando var, comum em outras linguagens, ou utilizando let.

Vale ressaltar que por se tratar de uma linguagem de tipagem dinâmica, ao declarar uma variável não é necessário informar o tipo da variável, por exemplo:

var idade = 15;
var nome = 'Marina';
let endereco = 'Av. Central 1';

Ao atribuir o valor 15 para a variável idade, a linguagem já reconhece como uma variável do tipo Number. O mesmo ocorre para a variável nome, ao atribuirmos o valor ‘Marina’ a linguagem reconhece como uma variável do tipo String.

Outras regras devem ser seguidas, como:

  • Não declarar variável com palavras reservadas, como let, var, while, for, etc.
  • Deve conter somente letras, números e underscore.
  • Pode iniciar com uma letra, underscore (_) ou cifrão ($).

Declarando variáveis com var e let no JavaScript

No JavaScript nós temos que nos atentar quando vamos declarar variáveis usando var ou let, pois cada uma possuí diferenças que são importantes.

Antes de tudo precisamos explicar que o JavaScript trabalha com escopos, onde cada bloco (funções, condicionais e estruturas de repetição, por exemplo) é um escopo fechado.

Ao utilizarmos var, ele trabalha de forma independente para cada escopo de função, por exemplo:

var nomeCarro = 'onix';

function carro() {
   var nomeCarro = 'fiesta';
   console.log(nomeCarro);
}

console.log(nomeCarro);

Analisando o código acima percebemos que ao executar a função carro(), iremos obter como resposta a String fiesta. Se executarmos console.log(nomeCarro), vamos obter o nome onix, pois a variável carro só mudou de nome dentro do escopo da função carro().

Usando 'Var' no JavaScript

Porém se trabalharmos com um IF por exemplo, a situação muda:

var nomeCarro = 'onix';
var i = 0;

if(i === 0){
    var nomeCarro = 'fiesta';
    console.log(nomeCarro);
}

console.log(nomeCarro);

Neste caso utilizando var sem o efeito de escopo. Portanto, ao executar console.log(nomeCarro) fora do if teremos como retorno a String fiesta e não onix conforme declarado anteriormente.

Usando 'var' no JavaScript

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Ou seja, uma variável sendo declarada como var só tem efeito de escopo em função.

Agora se substituirmos o código acima declarando as variáveis como let:

let nomeCarro = 'onix';
var i = 0;

if (i === 0){
    let nomeCarro = 'fiesta';
    console.log(nomeCarro);
}

console.log(nomeCarro);

No caso declaramos a variável nomeCarro dentro do if com o valor fiesta , mas ao executarmos console.log(nomeCarro) fora do if será exibido a string onix.

Desta forma respeitando o escopo do bloco.

Obs: Vale lembrar que let tem o mesmo comportamento de escopo que var se tratando do escopo de funções.

Usando 'let' no JavaScript

Declarando constantes

Assim como em outras linguagens, podemos declarar constantes que possuem valores fixos. Também vale ressaltar que as constantes tem o mesmo comportamento que variáveis definidas como let em relação ao escopo de bloco, como vimos no exemplo acima.

Na prática podemos utilizar uma constante para atribuir o valor de PI, por exemplo:

const PI = 3.14;

Obs: Por convenção usamos letras maiúsculas separadas por underscore ao declarar uma constante.

Ao tentar alterar o valor da constante, vamos obter o seguinte erro:

Usando Constantes no JavaScript

Conclusão

Neste artigo falamos sobre as características do JavaScript, sendo uma linguagem de tipagem dinâmica. Também aprendemos sobre escopo e, principalmente, sobre a declaração e uso de variáveis e constantes usando as palavras-chave: var, let e const. Aconselho também a leitura de nosso artigo “Como executar o seu primeiro código JavaScript” para iniciar os seus estudos.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Desenvolvimento Javascript

Como executar seu primeiro código JavaScript

Antes de tudo, caso você não saiba o que é JavaScript, aconselho a leitura de nosso artigo “O que é e como começar com JS” e também sobre “O que se pode fazer com JS hoje em dia“. Com esses artigos você terá uma dimensão maior do que é a linguagem e das possibilidades que ela pode proporcionar.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

JavaScript no console do navegador

Dito isto, vamos começar a colocar a mão na massa e rodar algo básico utilizando JavaScript. Primeiramente, vamos utilizar o console do navegador, para isto crie um arquivo index.html simples, pode ser como abaixo:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Começando com JavaScript</title>
  </head>
  <body>
    <h2>Começando com JavaScript</h2>
  </body>
</html>

Logo em seguida abra o arquivo em seu navegador de preferência e entre no console pelo inspecionar (normalmente pode ser aberto apertando Ctrl+Shift+i no Windows/linux, cmd+option+c no MacOS ou botão direito → Inspecionar/Inspecionar elemento).

Console do navegador

Será aberto um painel com inúmeras ferramentas de desenvolvimento, clique em console. Neste local podemos fazer alguns testes e entender o comportamento de nosso código direto no navegador (além de inúmeras outras funções).

Neste exemplo vamos criar uma caixa de diálogo usando a função alert(), portanto, basta digitar alert("hello world"). Ao executar a função esperamos que seja exibida a seguinte caixa de diálogo:

Executando função JavaScript

Legal! Acabamos de executar nossa primeira função em JavaScript, agora vamos estruturar um arquivo em JavaScript para entender o seu funcionamento.

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Criando e executando um arquivo JavaScript

Crie um arquivo chamado script.js na mesma pasta que criamos o arquivo index.html, com a função que acabamos de utilizar no exemplo anterior:

alert("hello world")

Desta forma, nossa pasta com os arquivos html e js terá a seguinte estrutura:

Estrutura de arquivos

Agora precisamos alterar o nosso arquivo index.html. Lembrando que nós podemos colocar um código JavaScript em qualquer lugar de nosso arquivo html utilizando a tag script. Mas não é recomendado, pois irá gerar certa desorganização e futuras complicações na manutenção de seu projeto.

O ideal é criarmos o arquivo .js e então chamar este arquivo dentro de nosso index.html, para isto também vamos usar a tag script, da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Começando com JavaScript</title>
  </head>
  <body>
    <h2>Começando com JavaScript</h2>
    <script src="./scripts.js"></script>
  </body>
</html>

Desta forma, o arquivo scripts.js será executado logo na abertura de nosso index.html, exibindo a caixa de diálogo referente ao código de alerta que criamos, como abaixo:

Executando JavaScript

Além das formas citadas acima, para fins de teste e aprendizado, nós também podemos executar nosso código JavaScript em ferramentas online, como o JSFiddle.

Utilizando a ferramenta JSFiddle

Ao entrar no JSFillde logo percebemos que o layout é dividido em quatro seções, sendo: HTML, CSS, JavaScript e a última conta com a preview gerada.

Como podemos ver abaixo, perceba que está implementado o mesmo código que utilizamos no exemplo acima, com a única diferença no CSS, onde podemos ver exatamente o resultado esperado na última seção:

Testando código javascript online

Existem outras ferramentas similares como o JSEditor.io e playcode.io.

Conclusão

Neste artigo demos os primeiros passos em JavaScript. Aprendemos como utilizar o console do próprio navegador, como estruturar os arquivos .js de forma ideal e por último como podemos utilizar ferramentas online que vão nos auxiliar em testes e no aprendizado da linguagem.

Aguarde para mais artigos sobre JavaScript logo em breve 🙂

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Javascript

Conhecendo o MEAN Stack

De software livre e código aberto, o MEAN Stack é um conjunto de soluções JavaScript para a construção de páginas web dinâmicas e aplicações web que utilizam o JavaScript em todas as camadas da aplicação.

O termo MEAN foi utilizado pela primeira vez em 2013 pelo desenvolvedor Valeri Karpov e suas siglas significam: M – MongoDB, E – Express.js, A – Angular e N – Node.js.

Basicamente, o MEAN funciona da seguinte forma:

como funciona o MEAN stack?

O cliente utiliza a aplicação front-end desenvolvida em angular que envia a requisição feita pelo cliente para o node, que vai tratar a requisição e, através do express, acessa o banco de dados mongo para obter os dados a serem retornados.

A partir daí, o Express retorna os dados obtidos no banco para o node, que trata como a resposta da requisição será feita e, utilizando o angular, exibe os dados para o usuário.

Como vimos anteriormente, o MEAN utiliza as tecnologias Angular, Node.js, Express.js e MongoDB. Abaixo veremos um pouco sobre cada uma delas.

Ferramentas que compõe o MEAN

MongoDB

MongoDB

De código aberto, multiplataforma e lançado em 2009, o MongoDB é considerado um “líder” no quesito SGBD NoSQL.

É um banco de dados orientado a documentos, baseado no formato JSON (JavaScript Object Notation) e possui uma curva de aprendizagem baixíssima.

Dentre suas principais características, podemos citar:

  • Totalmente gratuito;
  • Possui uma baixa curva de aprendizagem, como dito acima;
  • Fácil escalabilidade horizontal;
  • Multiplataforma;
  • Suporte para transações ACID multi-documento;
  • Consultas suportam funções JavaScript personalizadas, entre outros.

É um SGBD muito utilizado tanto por pequenas quanto por grandes empresas, como mostra em seu site, como: Facebook, Ebay, Google, Adobe, entre outras.

O download do MongoDB pode ser feito em seu site, onde é possível encontrar toda sua documentação, suporte e muito mais.

MongoDB - Desenvolvedor
Curso de MongoDB - Desenvolvedor
CONHEÇA O CURSO

Express.js

ExpressJS

O Express.js por sua vez é um Framework para o desenvolvimento de aplicações JavaScript com o Node.js.

De código aberto, sobre a licença MIT, o Express.js foi desenvolvido para otimizar a construção de aplicações web e APIs, tornando-se um dos Frameworks mais populares da internet e que utiliza o Node para execução do javascript como linguagem de back-end.

Dentre suas principais características, podemos citar:

  • Possui um sistema de rotas completo;
  • Possibilita o tratamento de exceções dentro da aplicação;
  • Permite a integração de vários sistemas de templates que facilitam a criação de páginas web para suas aplicações;
  • Gerencia diferentes requisições HTTP com seus mais diversos verbos;
  • Feito para a criação rápida de aplicações utilizando um conjunto pequeno de arquivos e pastas;
Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Angular

Angular

Angular é um framework para o desenvolvimento de aplicações web, que utiliza o JavaScript para desenvolvimento, tendo como principal objetivo o desenvolvimento de aplicações web mais robustas utilizando o JavaScript.

Foi criado por Misko Hevery e Adams Abrons em 2009, com um projeto inicial de que tinha como principal objetivo facilitar a criação de aplicações web.

O Angular foi construído sob o padrão MVVM ( Model-View, View-Model) abstraindo a camada de controle dos demais padrões conhecidos.

Dentre suas principais características, podemos citar:

  • É Open Source;
  • Mantido pelo Google;
  • Arquitetura da aplicação em camadas bem definidas;
  • Permite a criação modular e de componentes reutilizáveis;
  • Já possui a infraestrutura para integração com back-end;
  • Facilita a etapa de testes de forma automatizada.
Angular - Introdução
Curso de Angular - Introdução
CONHEÇA O CURSO

Node.js

NodeJS

O Node.js por sua vez, é uma plataforma open source que permite a execução de código JavaScript a nível front-end e back-end.

Em palavras mais simples, o Node.js é uma forma de executar o JavaScript do lado do servidor de uma aplicação.

Teve seu lançamento em 2009 sobre a licença MIT e é utilizado por diversas grandes empresas como Linkedln, Groupon, PayPal, entre outras.

O Node.js possui aplicabilidade em diversos meios, dentre eles podemos citar:

  • Criação de aplicações de chats e mensagens instantâneas;
  • Criação de API´s escaláveis;
  • Aplicações web que funcionam em real-time;
  • Aplicações CLI (Client Line Interface), entre outros.
Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Podemos então concluir…

O uso do Javascript para criação de aplicações cresceu muito nos últimos anos. O que antes era apenas para o desenvolvimento front-end, hoje é utilizado para o desenvolvimento completo de diversos tipos de softwares. O MEAN é um ótimo exemplo deste poder do javascript, com ele conseguimos trabalhar com a linguagem em todas as camadas da aplicação.


Node

NPM – Você sabe o que dá para fazer com ele?

Olá Web Developers! Há um tempo falamos aqui sobre 10 truques do NPM. Mas você sabe o que dá para fazer com ele?

Gerenciamento de Dependências

O uso mais básico do NPM é o gerenciamento de dependências. Ou seja, você pode gerenciar o que deve ser baixado para seu projeto usar, como bibliotecas e frameworks. Todas as dependências ficam listadas no arquivo package.json.

Não só podemos baixar esses códigos do servidor do NPM, como também podemos baixar de outros lugares, como diretamente do Github.

Execução de Comandos

No package.json você pode definir uma lista de scripts. Isso é muito útil caso tenha algum script que você precise executar com frequência. Ferramentas como VS Code e WebStorm já interpretam a lista de scripts e disponibilizam para você executar com apenas um clique.

Mas não só podemos escrever pequenos scripts, como também podemos executar qualquer comando disponível em nossa máquina. Portanto, caso você tenha algum programa que pode ser executado pela linha de comando, mesmo que não seja JavaScript, poderá chamá-lo pelo NPM.

Automação de Tarefas

Caso você precise minificar arquivos, transpilar TypeScript e outras coisas, não precisa necessariamente configurar alguma ferramenta como Gulp ou WebPack. Basta baixar uma ferramenta que faça esse trabalho e chamá-la pelo NPM. Em certos casos a configuração da tarefa pelo NPM fica mais simples do que configurar essas outras ferramentas.

Npm - Gerenciador de pacotes para JavaScript
Curso de Npm - Gerenciador de pacotes para JavaScript
CONHEÇA O CURSO

Criação de Ferramentas

Você pode criar programas e instalá-los na máquina de forma bem simples. Já que podemos instalar os pacotes do NPM globalmente e depois chamá-los pelo terminal de qualquer lugar, isso significa que podemos criar nossas próprias ferramentas, que poderão ser instaladas e executadas de forma bem simples, com um simples comando.

Um exemplo de uma ferramenta nossa que usamos muito nos cursos é o Tw Dev Server, que inicia um servidor estático com Live Reload e também mantém navegadores sincronizados com cada ação que você fizer. Além disso, ele também simula um servidor com API e banco de dados.

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

E não é apenas programas de linha de comando. Também podemos integrar com o Electron para criar aplicações Desktop. Por exemplo, o MemoPlay, programa que criei há algum tempo e que uso para gravar as aulas dos cursos aqui da TreinaWeb.

Memoplay Screen Recorder

E o que mais?

Bom, nessa pequena lista vimos o que dá para fazer com o npm. Porém, dentro de cada um desses itens há uma infinidade de possibilidades.

Já que foi dito que podemos instalar e executar qualquer programa, seja baseado em linha de comando ou possuir interface gráfica, isso já nos trás muitos poderes. Veja alguns exemplos mais usados com desenvolvimento de software:

  • Build de aplicações
  • Deploy de aplicações
  • Execução de Testes
  • Análise de qualidade de código
  • Automação de tarefas
  • Conversão de arquivos
  • Geração de arquivos e estrutura de projetos
  • Geração de certificados
Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Javascript

O que é Jasmine?

Tendo a sua primeira release publicada em agosto de 2009 no GitHub, o Jasmine é uma biblioteca de testes JavaScript, de código aberto que tem como principal objetivo a execução em qualquer plataforma habilitada ao JavaScript.

A realização de testes no desenvolvimento de uma aplicação é de fundamental importância para o seu resultado final. À medida em que todo o código vai sendo desenvolvido, a sua complexidade vai aumentando, desta forma, a realização de testes vai sendo primordialmente requerida.

O Jasmine é um Framework que serve para criar testes automatizados no JavaScript e é um dos mais utilizados para tal finalidade.

JavaScript - Testes automatizados com Jasmine
Curso de JavaScript - Testes automatizados com Jasmine
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

De volta ao Jasmine

Como dito anteriormente, o Jasmine é bastante utilizado na realização de testes automatizados em JavaScript. Isso quer dizer que é utilizado o Framework para analisar toda a funcionalidade da aplicação a fim de verificar se a lógica de negócio proposta está funcionando de acordo com o esperado.

Sabemos da importância dos testes de softwares para a garantia da qualidade final de todo o projeto, para que todos os resultados esperados sejam atingidos, desta forma, escrever testes automatizados é de fundamental importância para o desenvolvimento de um software.

Características do Jasmine

Podemos dizer que a utilização do Jasmine em um projeto traz diversas vantagens, uma delas é a sua utilização em testes JavaScripts. Mas não é a única, dentre suas diversas características podemos citar:

  • Por não possuir dependências externas, possui baixa sobrecarga;
  • Já vem completo para que os testes sejam realizados sem a necessidade de incluir alguma outra ferramenta JavaScript para tal finalidade;
  • Não há necessidade da utilização do DOM;
  • É possível a execução de testes em Node.js com a mesma estrutura utilizando diretamente no navegador;
  • Conta com o script próprio para a execução de testes;
  • Possui sintaxe clara e limpa para execução de testes, entre outros.
JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Sintaxe do Jasmine

Como podemos perceber abaixo, o Jasmine possui um código de fácil entendimento, sintaxe simples e uma estrutura de desenvolvimento orientada por comportamento para testar o código JavaScript. Como disse anteriormente, não é necessário uma outra estrutura JavaScript e não requer o uso de DOM.

describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

Podemos então concluir…

Como vimos neste artigo, o Jasmine é um ótimo framework de testes automatizados para o Javascript. Sabemos que testar nossas aplicações é algo de extrema importância, o que torna o Jasmine ainda mais importante para o ecossistema Javascript.

No site do Jasmine é possível acessar toda a sua documentação, releases, suporte, dentre outros.


Progressive Web App ou simplesmente PWA é uma metodologia utilizada por desenvolvedores que busca oferecer ao usuário uma experiência similar ao uso de um aplicativo nativo sem a necessidade de instalação.

Em palavras mais simples, o usuário estará acessando uma página web utilizando o seu smartphone, porém vivendo a experiência de um usuário que está acessando um aplicativo nativo, já que os navegadores atuais colaboram com seus recursos modernos para tornar esta experiência ainda mais agradável e intuitiva.

PWA - Progressive Web Apps
Curso de PWA - Progressive Web Apps
CONHEÇA O CURSO

Principais características de um PWA

Diversas são as empresas que utilizam PWA, dentre elas: Pinterest, Twitter, Trivago, Lancôme, entre outras.

Dentre as suas diversas características listadas de acordo com o Google Developers, podemos citar:

  1. Progressivo: Funcional em qualquer que seja o contexto independente do navegador que o usuário esteja utilizando.
  2. Responsivo: Adaptação do site a qualquer tamanho de tela, seja um smartphone ou uma TV Smart, por exemplo.
  3. Independente de conectividade: Utiliza tecnologias que garantem o funcionamento das principais funcionalidades da aplicação sem a necessidade de conectividade, podendo também ser acessado por redes que possuem baixa qualidade.
  4. Semelhante a aplicativos: Como disse anteriormente, o usuário terá a mesma experiência que utilizar um aplicativo (mesma estrutura visual, por exemplo).
  5. Sempre atualizados: Como uma PWA nada mais é que um site que se adapta à tela do smartphone, todas as alterações feitas no site são refletidas na PWA.
  6. Seguro: Pois são fornecidas pelo protocolo HTTPS.
  7. Descobríveis: Aplicações PWA são reconhecidas facilmente pelos mecanismos de buscas como um App.
  8. Reenvolvente – Facilita o reengajamento com recursos como notificações push.
  9. Instalável: Mesmo não havendo a necessidade de instalação, caso o usuário queira fixá-lo em sua tela principal, é possível, dispensando assim a necessidade de abrir o navegador. O mesmo irá se comportar semelhante a um aplicativo (fixado em tela principal).
  10. Linkável: Compartilhado facilmente por URL.

Vantagens de um PWA

As características por si só já são bastante vantajosas na utilização do PWA, mas podemos incrementar esta lista com as seguintes vantagens:

  • A complexidade do desenvolvimento de um PWA comparado a um aplicativo nativo é um dos grandes atrativos em sua utilização, já que basta alguma alterações em uma página web para que ela se comporte como uma PWA;
  • Tempo estimado para o seu desenvolvimento é menor do que o tempo utilizado na construção de um aplicativo mobile;
  • Possui foco no baixo consumo de dados, permitindo que diversos usuários tenham acesso à aplicação sem consumir muita banda;
  • Menor custo para o desenvolvimento, já que, caso a empresa já possua um site, o mesmo poderá ser “transformado” em um PWA, diminuindo assim os custos com uma equipe de desenvolvimento mobile, entre outros.
JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Desvantagem de um PWA

Como já dizia o ditado, “nem tudo na vida são flores”, e isso também pode ser aplicado ao PWA. As suas vantagens são diversas, como citadas acima, mas as desvantagens também existem e podemos listá-las como:

  • A principal desvantagem de um PWA é a limitação no uso de recursos de hardware dos dispositivos. Caso uma aplicação necessite acessar diversos deles, o aplicativo nativo seria o mais indicado;
  • Não constam em lojas de aplicativos e por isso não podem ser baixados diretamente por lá;
  • Por ser utilizado direto no navegador, não possuem integração com qualquer outro aplicativo;
  • Não possui interface tão fluida quanto a de uma aplicação nativa, entre outros.

Podemos concluir que…

O que devemos pensar é que o desenvolvedor não deve optar pela escolha de um PWA ou de uma aplicação nativa, mas sim analisar a sua situação como um todo na hora de se decidir qual utilizar.

A maioria das aplicações possuem as duas opções, tanto o PWA quanto a aplicação nativa, pois como vimos durante todo o artigo, as vantagens de uma aplicação nativa no momento também se sobressaem à criação de um PWA, já que o mesmo também possui algumas limitações.

Desta forma, entender as características de um PWA em relação a uma aplicação nativa é uma excelente forma de adequar às suas reais necessidades.

Uma aplicação nativa trará todos os recursos disponíveis do seu projeto, enquanto a PWA trará toda a velocidade e será acessível a todos os usuários (principalmente aos que possuem acesso limitado à conexão). Antes de se perguntar se deve transformar o seu site em um PWA, é importante analisar as suas reais necessidades em transformá-lo e adequar o seu negócio à necessidade do seu cliente, que é o mais importante a ser considerado! 🙂


Javascript

O que é o Express.js?

Tendo sua versão inicial lançada no ano de 2010, o Express.js (ou somente Express) é um Framework para o desenvolvimento de aplicações JavaScript com o Node.js.

De código aberto, sobre a licença MIT, o Express.js foi desenvolvido para otimizar a construção de aplicações web e APIs, tornando-se um dos Frameworks mais populares da internet e que utiliza o Node para execução do javascript como linguagem de back-end.

Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Um pouco sobre o Node.js

O Node.js por sua vez, é uma plataforma open source que permite a execução de código JavaScript a nível front-end e back-end.

Em palavras mais simples, o Node.js é uma forma de executar o JavaScript do lado do servidor de uma aplicação.

Teve seu lançamento em 2009 sobre a licença MIT e é utilizado por diversas grandes empresas como Linkedln, Groupon, PayPal, entre outras.

O Node.js possui aplicabilidade em diversos meios, dentre eles podemos citar:

  • Criação de aplicações de chats e mensagens instantâneas;
  • Criação de API´s escaláveis;
  • Aplicações web que funcionam em real-time;
  • Aplicações CLI (Client Line Interface), entre outros.

Possuímos aqui em nosso blog um artigo sobre Node.js, caso queira acompanhar.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

De volta ao Express.js

O Express.js é um Framework rápido e um dos mais utilizados em conjunto com o Node.js, facilitando no desenvolvimento de aplicações back-end e até, em conjunto com sistemas de templates, aplicações full-stack.

Escrito em JavaScript, o Express.js é utilizado por diversas empresas ao redor do mundo, dentre elas a Fox Sports, PayPal, IBM, Uber, entre outras.

Muito popular tanto em grandes empresas quanto na comunidade, o Express facilita a criação de aplicações utilizando o Node em conjunto com o JavaScript, tornando este ecossistema ainda mais poderoso.

Características do Express.js

O Express é um framework incrível e possui diversas características que facilitam o desenvolvimento de nossas aplicações. Dentre suas principais características, podemos citar:

  • Possui um sistema de rotas completo;
  • Possibilita o tratamento de exceções dentro da aplicação;
  • Permite a integração de vários sistemas de templates que facilitam a criação de páginas web para suas aplicações;
  • Gerencia diferentes requisições HTTP com seus mais diversos verbos;
  • Feito para a criação rápida de aplicações utilizando um conjunto pequeno de arquivos e pastas;

Podemos concluir que…

O Express.js é um ótimo Framework para o desenvolvimento de aplicações utilizando o Node. No site do Express.js podemos acessar toda a sua documentação, tutoriais, sua lista de recursos e muito mais.


Javascript

React 17 – Conheça o que vai mudar no JSX

Olá Web Developers! O React 17 foi lançado e não trouxe nenhuma funcionalidade nova. Porém, ele veio com algo que vai mudar como o JSX funciona e um detalhe de como você lida com ele.

Como o JSX funcionava até agora

Os navegadores não entendem JSX. Portanto, é necessário que uma ferramenta como Babel faça a “tradução” do JSX para JavaScript comum.

Isso significa que quando você escreve o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Teremos o seguinte resultado:

function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

Note que o JSX é substituído por React.createElement(). Por consequência, mesmo que você não fosse usar algo do React, era necessário importá-lo:

import React from 'react';

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Caso você não importasse, você teria um erro na hora da transpilação. E muitos iniciantes no mundo do React já tiveram esse mesmo problema, sem entender onde estavam errando.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O novo JSX Transform do React 17

No React 17 em diante não vamos mais precisar importar o React para apenas usar JSX. A fim de simplificar as coisas, o novo transformador de JSX irá injetar automaticamente as funções necessárias.

Então o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Vai se tranformar em:

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

E o melhor de tudo: você não precisa mudar nada no seu código, pois isso é compatível com os códigos já existentes!

Se acaso você quiser atualizar seu código, a própria equipe de desenvolvimento do React criou um script que remove automaticamente as importações não usadas do React. Basta executar npx react-codemod update-react-imports.

Mas existe alguma vantagem no novo JSX Transform?

Sim! Além de não precisarmos mais importar o React quando não formos usá-lo, também teremos uma melhora no tamanho dos arquivos.

// antigo
function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

// novo
function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

Além disso, também foi dito que o formato anterior não possibilitava certas melhorias e simplificações, que agora com o novo formato serão possíveis.

De acordo com a equipe de desenvolvimento do React, esse novo formato também vai permitir futuras melhorias e até a redução do número de conceitos que as pessoas precisam saber para aprender React.

Desenvolvedor React
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox. Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO

Javascript

O que é Ember.js?

Ember.js ou simplesmente Ember é um framework JavaScript para a construção de aplicações robustas, tendo como principal objetivo o aumento da produtividade no desenvolvimento de aplicações web.

EmberJS - Criação de interfaces web
Curso de EmberJS - Criação de interfaces web
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

De volta ao Ember.js

De código aberto, lançado em 2011 sobre a licença MIT, o Ember.js permite aos desenvolvedores a criação de interfaces de usuários ricas e que funcionem em qualquer dispositivo.

Utilizada por diversas empresas como: Linkedin, Netflix, Heroku, Microsoft, Square, entre outras, conta com uma imensa comunidade ativa de desenvolvedores.

Apesar de ser um framework com foco para web, com o Ember.js também é possível a criação para dispositivos móveis ou desktop, sendo o escolhido na criação do Apple Music para desktop, o maior case de sucesso do Framework.

Possuindo similaridade com o Rails, o Ember.js é baseado na arquitetura Model–view–viewmodel (MVVM).

Padrão MVVM : Model-View-ViewModel

O Ember.js utiliza o padrão MVVM, que é um padrão de arquitetura de software que visa separar o desenvolvimento de uma aplicação em camadas bem definidas, similar aos padrões já existentes, como o MVP e o MVC, muito importante para o desenvolvimento mobile e web.

Foi um padrão criado para aplicativos Windows Presentation Foundation (WPF) utilizando XAML para separar a interface do usuário (UI) da lógica de negócios.

Basicamente, o MVVM funciona da seguinte forma:

Padrão MVVM

  • Model: Parte lógica da aplicação que gerencia o comportamento dos dados, ou seja, todos os seus recursos (consultas ao BD, validações, notificações, etc). A camada de model apenas tem o necessário para que tudo aconteça, mas não sabe quando irá executar.

  • View: Camada de interface do usuário. É a estrutura, o layout e a aparência do que o usuário vê na tela, normalmente representadas por páginas HTML.

  • ViewModel: Camada responsável por determinar quando as ações serão executadas em uma aplicação. É esta camada que faz o “meio de campo” entre as camadas Model e View para exibição dos dados em uma aplicação.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Características do Ember.js

Diversas são as características do Ember.js, dentre elas podemos citar:

  • Adoção de boas práticas de desenvolvimento;
  • Possui o Ember CLI, interface de linha de comando para criação e gerenciamento de projetos Ember;
  • Ember Data, biblioteca para trabalhar com a camada de models em aplicações Ember;
  • Possui sistema de roteamento complexo para determinar as diferentes rotas da aplicação;
  • Estabilidade;
  • Atualização contínua, com lançamento de novas versões a cada 6 semanas;
  • Escrito em JavaScript;
  • Comunidade ativa, entre outras.

Podemos então concluir:

Como vimos neste artigo, o Ember.js é um ótimo Framework JavaScript e utilizado por grandes empresas. Poderoso e com um grande ecossistema, o Ember é uma ótima alternativa para construção de aplicações web.

No site do Ember.js é possível encontrar toda a sua documentação, releases, blog, comunidade e muito mais.


Node

Instalação do Node.js – Windows, Mac e Linux

O Node.js é uma ferramenta que nos permite executar JavaScript fora do navegador, no lado do servidor. Ele foi um dos responsáveis por popularizar o JavaScript em diversas áreas. Podemos criar muito mais com JavaScript graças ao Node.js. Nesse post veremos como fazer a instalação do Node.js em Windows, Mac e Linux.

Acesse o site do Node, https://nodejs.org/en/. Assim que entrar no site, você verá dois botões, indicando duas versões para baixar (LTS e Current).

  • LTS é uma versão que tem um suporte mais prolongado, porém, costuma ser mais antiga. Ela é focada em estabilidade e segurança. Essa versão é mais recomendada para grandes projetos, que precisam de uma versão mais estável e que não podem ficar sendo atualizados.
  • Em contrapartida temos a Current, a versão mais atual com todas as novas funcionalidades, muito indicada para testes, estudos e novos projetos. Cada nova versão pode ter atualizações que podem quebrar um código que foi escrito em uma versão mais antiga. Portanto, é preciso tomar cuidado ao atualizar projetos para novas versões.

Com o propósito de estudos, recomendo sempre usar a Current. Desse modo você sempre terá as funcionalidades mais recentes.

Instalação em Windows

Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Windows. Assim como é comum nos instaladores do Windows, basta seguir clicando nos botões Next até chegar ao final da instalação.

Assim que a instalação for finalizada, precisaremos testar se tudo está certo. Então, inicie o seu terminal. Pressione Tecla Windows + R, com a finalidade de abrir o programa Executar. Escreva powershell e aperte a tecla Enter.

Executar com o comando "powershell"

Em seguida, no terminal digite node -v e aperte a tecla Enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!

Powershell com comando "node --version"

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Instalação em Linux

Podemos instalar o Node.js facilmente com o próprio gerenciador de pacotes do Linux. Inicie o terminal pressionando Ctrl + Alt + T.

Em seguida, no terminal digite o comando:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Depois execute:

sudo apt-get install -y nodejs

Logo depois da instalação, no terminal digite node -v e aperte a tecla Enter. Se acaso a versão do Node for exibida, sua instalação foi feita com sucesso!

Instalação em Mac

Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Mac (arquivo .pkg). Assim que abrir esse arquivo, o instalador será iniciado.

Instalador do Nodejs para Mac

Basta ir clicando para continuar até ele finalizar a instalação.

Precisamos testar se tudo está certo. Então, inicie o seu terminal. Para isso, pressione Command + Barra de Espaço. Digite terminal e pressione Enter.

Em seguida, no terminal digite node -v e aperte a tecla Enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!

Caso você precise ter mais de uma versão do Node.js em sua máquina, confira nosso post sobre como instalar várias versões do Node.js usando o NVM.

Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO