O JavaScript é a linguagem que permite criarmos páginas web cada vez mais dinâmicas e interativas, fechando a famosa tríplice HTML, CSS e JavaScript.
Além disso, hoje também podemos usar o JavaScript no Back-end graças ao Node.js, ou seja, o JavaScript é uma linguagem completa que permite muitas possibilidades na área de desenvolvimento web.
Neste artigo vamos abordar os pontos importantes para você iniciar neste mundo do JavaScript!
Curso JavaScript - Fundamentos
Conhecer o cursoO que é e como começar com JavaScript
Em primeiro lugar, vamos deixar claro que JavaScript não tem nada a ver com Java, portanto, não confunda.
Essa confusão teve início devido ao período de lançamento, pois o seu primeiro nome oficial foi LiveScript, porém devido a popularidade do Java na época, seu nome foi atualizado para JavaScript.
Basicamente, o JavaScript é uma linguagem interpretada. É uma linguagem script com orientação a objetos dinâmica e com tipagem fraca.
Sabe aqueles efeitos de carousel, slider, etc? Então, muitos deles são feitos em JavaScript.
Aconselho a leitura de nosso artigo “O que é e como começar com JavaScript”.
O que se pode fazer com JavaScript hoje em dia
Como dito acima, o JavaScript foi criado para desenvolvimento front-end, ou seja, do lado do cliente, no navegador.
Hoje em dia as possibilidades se expandiram, onde temos o JavaScript no Back-end, com node.js, podendo ser usado até em áreas de robótica, automação, etc…
Agora, vamos ver algumas possibilidades que o JavaScript nos permite utilizar atualmente.
- Node.js: um ambiente de execução JavaScript fora do navegador. Ele permite a utilização do JavaScript no Back-end, abrindo espaço para o desenvolvimento de sistemas web dinâmicos e interativos.
- Testes: Ferramentas como o Jasmine permite a execução de testes automatizados.
- Qualidade de código: Ferramentas como o JSLint para a análise da qualidade de código.
- Banco de dados: Para o uso de banco de dados temos o MongoDB, por exemplo, onde no console executamos código JavaScript.
Enfim, essa breve lista resumida está completa em nosso artigo o que se pode fazer com JavaScript hoje em dia?, aconselho sua leitura.
A lista se estende abrangendo áreas interessantes como desenvolvimento mobile, 3D, Jogos, enfim, um mar de possibilidades.
Como executar seu primeiro código JavaScript
Para executar seu primeiro código JavaScript, podemos utilizar o próprio console do navegador, como exemplo. Para isso, crie um arquivo html simples, como a seguir:
<!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).
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:
Legal! Acabamos de executar nossa primeira função em JavaScript.
Este foi um exemplo simples pra ter noção, na prática, do que é efetivamente o JavaScript.
No artigo “Como executar seu primeiro código Javascript” você irá aprender como criar um arquivo javascript, a importar no seu arquivo html e também utilizar outras ferramentas como o JSFiddle. Ferramenta essa que permite testes em tempo real no próprio navegador.
Conhecendo variáveis e constantes no JavaScript
Primeiramente é importante saber que o JavaScript é uma linguagem de tipagem dinâmica, ou seja, o tipo de dado é de acordo com o valor atribuído à variável. Você pode se aprofundar em relação ao conceito de tipagem em nosso artigo sobre as diferenças entre tipagens: estática ou dinâmica e forte ou fraca.
Tipos de dados
Ao programar em JavaScript 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.
Declarando variáveis com var e let
Nós podemos declarar variáveis utilizando var e let. A maior diferença entre eles é em relação ao escopo. Portanto temos as seguintes particularidades:
- var: Escopo de função, ou seja, ao utilizar uma variável com mesmo nome em blocos com if, else, etc. a variável terá efeito global.
var idade = 30;
var i = 1;
if(i === 1){
var idade = 20;
}
console.log(idade);
//console.log irá exibir o valor 20 para idade.
- let: Escopo de bloco geral, ou seja, ao utilizar uma variável sendo declarada como let em qualquer bloco ela terá somente o efeito no bloco.
let idade = 30;
let i = 1;
if(i === 1){
let idade = 20;
}
console.log(idade);
//console.log irá exibir o valor 30 para idade.
Declarando constantes
As constantes, como diz o nome, possuem valores fixos onde não podemos alterar o seu valor. É interessante usar uma constante em algo que já existe um valor definido, por exemplo, se vamos usar o valor de PI para algum cálculo em nosso código: const PI = 3.14.
Obs: As constantes tem o mesmo efeito de escopo que uma variável let e ao tentar trocar de valor irá retornar um erro.
Após este resumo sobre variáveis e constantes aconselho também a leitura de nosso artigo completo com mais exemplos “Conhecendo variáveis e constantes no JavaScript”.
Estruturas condicionais e estruturas de repetição em JS
Começando pelas estruturas condicionais, podemos utilizar no JavaScript if, else if, e if.
Vamos analisar o seguinte exemplo:
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");
No primeiro momento temos um if, caso nenhuma das condições forem atendidas, usamos o else if para verificar mais uma condição e, por fim, se nenhuma das condições forem atendidas, finalizamos com o else.
Como podemos ver simulando que a variável idade = 25, nenhuma condição será atendida e o comando do bloco else que será executado:
Em algumas situações onde será necessário um número elevado de condições, nós podemos usar a instrução Switch Case.
Como utilizar Switch Case no JavaScript
O Switch Case consiste em uma instrução com valores pré-definidos, portanto, se uma variável vale x, ela irá executar conforme a instrução passada, seguindo o exemplo a seguir:
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;
}
Ou seja, se a variável signo = "Leão", o comando executado irá exibir a mensagem: de 23 julho a 22 agosto. Caso o valor da variável não seja pré-definido no switch case, o comando executado será o que estará no caso default.
Curso Dart - Tópicos Avançados
Conhecer o cursoEstruturas de repetição no JavaScript
Vamos aprender como podemos utilizar as estruturas de repetição no JavaScript: while, do-while, for, for…in e for…of.
While e Do-While
O While é a estrutura de repetição utilizada para repetir um bloco de comandos N vezes.
let i = 0;
while(i < 11){
console.log('Linha ' + i);
i++;
}
Conforme o exemplo acima, usamos o while para exibir a mensagem do comando console.log 11 vezes (do 0 ao 10). Para isso passamos a condição i < 11, até o momento que i não atenderia mais a condição e retornasse false, desta forma quebrando o laço while.
O do-while é semelhante ao while, porém o bloco de comandos é executado antes da condição, desta forma garantindo que o bloco é executado, ao menos, uma vez.
let contador = 0;
do{
console.log("O contador vale: " + contador);
contador++;
}while(contador == 1)
For
O for segue o mesmo princípio do while, mas utilizamos quando se sabe o número de iterações da repetição, como percorrer um vetor:
let carros = ['fiesta', 'gol', 'celta'];
for(let i = 0; i < 3; i++){
console.log('O nome do carro é ' + carros[i]);
}
No exemplo acima utilizamos o for para exibir as informações armazenadas no vetor carro. Onde temos o contador `i = 0`, a condição i < 3, e a iteração do contador.
Utilizando for…in e for…of
O for…in podemos utilizar para percorrer as propriedades e atributos de um objeto.
Para percorrer as propriedades podemos seguir o exemplo:
let carro = {
marca: 'ford',
modelo: 'fiesta',
cor: 'prata',
}
for (propriedade in carro) {
console.log(propriedade);
}
Nesta situação será exibido as propriedades: marca, modelo e cor.
Como dito, também podemos percorrer os atributos, da seguinte maneira:
for (propriedade in carro) {
console.log(carro[propriedade]);
}
Desta forma será exibido: ford, fiesta e prata.
Para percorrer objetos iteráveis como vetores por exemplo, podemos utilizar o for…of:
let carros = [ 'fiesta', 'onix', 'fusca', 'saveiro' ];
for (let carro of carros) {
console.log(carro);
}
Será exibido o valor de cada índice: fiesta, onix, fusca, saveiro.
OBS: Outra possibilidade de trabalhar com o for…of é para obter o índice de cada item usando o método entries().
Temos um artigo dedicado às estruturas de condicionais e de repetição em JavaScript, aconselho fortemente a leitura. Outro artigo que também vale a leitura é o que falamos sobre métodos de arrays que você deve conhecer.
Trabalhando com arrays e objetos no JavaScript
Curso PWA - Progressive Web Apps
Conhecer o cursoOs Arrays nos permitem utilizar uma única variável para armazenar uma lista de diferentes elementos.
Declarando Arrays
Para declarar um Array seguimos da mesma maneira que seria para declarar uma variável, porém podemos adicionar vários valores entre []. Também podemos declarar sem nenhum item tamanha, com tamanho definido ou vazia. Por exemplo:
let series = ['friends','GoT','Black Mirror'];
let series = Array(20);
let series = [];
Como alterar e acessar itens de um Array
Para acessar ou alterar o valor de uma posição de um Array nós podemos usar o nome dado a este array seguido do índice a ser alterado/acessado, da seguinte maneira: series[2].
Neste caso eu posso passar um novo valor para o índice ou simplesmente acessar e exibir o valor, por exemplo:
console.log(series[2); //exibe o valor de índice 2, de acordo com o exemplo acima: GoT
series[2] = 'Gothan'; //altera o valor de índice 2 para Gothan
Também é possível adicionar um novo elemento no array utilizando o método push()da seguinte forma:
series.push('the witcher');
Neste caso o novo item será adicionado ao final do array.
Obs: Outro ponto importante que vale ressaltar é que o JavaScript permite um array de elementos de tipos diferentes.
Como utilizar objetos no JavaScript
Nós utilizamos objetos para agrupar valores que possuem propriedades e funções. Para declarar um objeto no JavaScript podemos seguir o exemplo:
let carro = {
modelo: 'gol',
cor: 'vermelho',
acelerar(){
console.log('Acelerando...');
},
frear(){
console.log('Freando');
},
};
Como acessar as propriedades ou funções de um Objeto?
Para acessar um objeto ou chamar uma função nós devemos utilizar o nome do objeto seguido da propriedade/função separados por ponto:
console.log(carro.modelo);
console.log(carro.acelerar);
carro.acelerar();
Neste caso usamos o console.log para exibir as propriedades e chamamos a função acelerar (não esqueça dos ()).
Outra forma que podemos utilizar para acessar propriedades é utilizando o padrão objeto[propriedade], onde ‘propriedade’ pode ser qualquer variável cujo o valor seja de alguma propriedade do objeto.
Como alterar e adicionar novas propriedades a um objeto?
Para adicionar uma propriedade podemos usar a sintaxe de acesso às propriedades porém atribuindo um valor a nova propriedade inexistente. Como os exemplos:
carro.ano = 2011;
carro['marca'] = 'Volkswagen'
E para alterar a ideia é a mesma, mas com uma propriedade existente:
carro.cor = 'prata';
carro['ano'] = 2010;
Por último, para excluir uma propriedade, basta utilizar o operador delete antes da propriedade do objeto:
delete carro.ano;
Abordamos de forma mais profunda a utilização de arrays e objetos em nosso artigo “trabalhando com arrays e objetos no javascript”, com exemplos mais completos, portanto, aconselho a sua leitura.
Trabalhando com JS no navegador
É fundamental que você entenda o que é o DOM (Document Object Model) para trabalhar com JavaScript. O DOM é uma API que permite o acesso de elementos HTML/XML. Ele pode ser representado pela seguinte árvore:
Agora que você já sabe o que é DOM, vamos ver como podemos acessar os elementos com o JavaScript. Para isso, podemos utilizar alguns métodos, como:
- document.getElementsByTagName(tagName);
- document.getElementByClassName(className);
- document.getElementByID(id);
Existem muitos outros métodos que permitem o acesso aos elementos do DOM, você pode acessar a lista de métodos na documentação da MDN Web Docs.
Com o conhecimento desses métodos, nós podemos criar novos elementos com base em elementos já existentes, por exemplo:
<script>
var elemento = document.getElementById('titulo');
document.write('<h1 style="color: #025fff">' + elemento.innerText + ' agora em azul </h1>');
</script>
Desta forma nós pegamos o texto de um elemento com o ID titulo e exibimos este texto em um novo elemento de outra cor.
Também podemos alterar um elemento:
function mudarCor(){
var texto = document.getElementById('titulo');
texto.style.color = 'red';
texto.style.textAlign = 'right';
}
Já neste caso nós acessamos o elemento de ID titulo quando a função mudarCor() é chamada, com isso, alteramos a sua cor para vermelho e o alinhamento para a direita.
Lembrando que você pode adicionar o código JavaScript entre as tags script ou importar de um arquivo independente adicionando a seguinte linha antes do final da tag body:
<script type="text/javascript" src="arquivo.js">
No artigo trabalhando com JavaScript no navegador aqui da TreinaWeb nos aprofundamos nos exemplos e também sobre o uso do JavaScript para a manipulação de elementos do DOM, portanto, é fundamental a sua leitura.
O que é NPM e como usar uma biblioteca instalada por ele
O NPM (node package manager) é o gerenciador de pacotes do node.js. Basicamente o NPM permite gerenciar dependências do seus projeto, ter acesso a inúmeras bibliotecas e frameworks e criação de seus próprios módulos públicos ou privados.
Para instalar o NPM você precisará instalar o node.js, pois ele está integrado, para isso basta seguir os próximos passos:
- Acessar o site oficial do node.js – https://nodejs.org
- Baixar a versão LTS correspondente a sua plataforma (Windows Installer ou MacOS Installer).
- No linux, você pode instalar pelo gerenciador de pacotes wget, basta abrir o terminal e executar:
wget -qO- https://deb.nodesource.com/setup_4.x | sudo bash -
- Logo em seguida:
sudo apt-get install --yes nodejs
Executar os comandos: node -v e npm -v, se exibir as respectivas versões, eles foram instalados com sucesso.
Como instalar um pacote do NPM
Para instalar um pacote com o NPM podemos utilizar o seguinte comando no diretório da nossa aplicação: install [nome do pacote].
Também podemos instalar um pacote de forma global, com o seguinte comando: install -g [nome do pacote].
Como usar um pacote do NPM
Para utilizar o pacote após a instalação você pode importar dentro do arquivo .js da sua aplicação:
import * as pdf from 'html-pdf'; //import no padrão do ECMAScript2015
//outros imports
//código da aplicação
Temos um artigo exclusivo sobre o que é o npm e como usar uma biblioteca instalada por ele, também uma série de artigos como “NPM - Você sabe o que dá pra fazer com ele?” e “10 truques do NPM - Você conhece todos?”. Desta forma você poderá utilizar todo o potencial que o NPM oferece.
Conclusão
Neste guia compilamos os principais conceitos que todos que querem começar no JavaScript devem conhecer, como: variáveis e constantes, estruturas condicionais e de repetição, arrays e objetos, trabalhando com JavaScript no navegador e muito mais. Lembrando que em cada item aqui citado há o link para um artigo exclusivo de cada conceito, desta forma você poderá se aprofundar e iniciar no mundo do JavaScript!
Formação Desenvolvedor JavaScript
Conhecer a formaçãoPor fim, caso queira aprender mais sobre Javascript saiba que aqui na TreinaWeb temos a formação em Desenvolvedor JavaScript que possui 35h45 de vídeos e um total de 362 exercícios. Conheça também nossos outros cursos de JavaScript.
Veja quais cursos são parte desta formação:
- JavaScript - Fundamentos
- Google Chrome Developer Tools
- JavaScript Básico
- JavaScript Intermediário
- Npm - Gerenciador de pacotes para JavaScript
- HTTP - Fundamentos para desenvolvedores
- JavaScript Avançado
- JavaScript - Novidades do ES6 (ES2015)
- TypeScript - Fundamentos
- TypeScript - Avançado
- JavaScript - Testes automatizados com Jasmine
- Webpack - Empacotando aplicações
- Clean Code e SOLID - Escrevendo código limpo e escalável
