Por que aprender JavaScript?
JavaScript é uma das linguagens de programação mais utilizadas no mundo.
- Multiplataforma
- Fácil de aprender
- Cria aplicações web, mobile e desktop
JavaScript é um pré-requisito para se utilizar Node.js, Angular, Ionic, React e React Native.
Nesta sessão:
Quem é o programador JavaScript?
O JavaScript foi criando para que os desenvolvedores pudessem tornar as páginas web mais dinâmicas. Atualmente podemos criar qualquer tipo de aplicação utilizando apenas JavaScript, seja ela front-end, mobile ou back-end.
Por ser uma linguagem de fácil aprendizado com uma sintaxa simples, o JavaScript é ideal para programadores que estão ingressando no desenvolvimento.
Recursos básicos
Nesta seção você encontrará documentações criadas com o intuito de apresentar conceitos e recursos fundamentais da linguagem JavaScript. Por exemplo:
Como exibir uma mensagem para o usuário no JavaScript
JavaScript possui uma sintaxe semelhante ao C e Java.
console.log('Olá mundo!');
Variáveis
Uma variável armazena valores na memória do computador, dando um nome para ele. Assim, sempre que precisamos desse valor, usamos o nome dado a variável para obtê-lo.
Nesta sessão:
Variáveis no JavaScript
A declaração de variáveis em JavaScript é bem simples, basta usar a palavra reservada var ou let, de acordo com o escopo desejado. Como a linguagem é dinâmica, não é necessário informar o tipo de dado na declaração.
Sintaxe de declaração de variável:
var nome;
Ou
let nome;
Note que basta escrever var ou let, seguido do nome da variável. O tipo da variável será determinado conforme seu uso, ou seja, caso ela receba uma string ela será do tipo string, caso ela receba um número inteiro ela será uma variável do tipo inteiro.
Exemplos de declaração de variáveis:
// variável do tipo texto (String)
let nome = "Meu nome 123";
// variável do tipo numérico (Number)
let ano = 2017;
// variável do tipo verdadeiro ou falso (Boolean)
let ligado = true;
Variáveis locais
Quando se declara uma variável dentro de uma função ela é chamada de variável local, pois ela está disponível somente dentro dessa função.
Exemplo de variável local:
let nome = "Meu nome é JavaScript";
Variáveis Globais
Quando se declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual.
Sintaxe de declaração de variável global:
let versao = "1.0a"
Funções
Funções são pequenas rotinas isoladas em blocos. Para criar
funções,
utilizamos a palavra reservada function
.
Nesta sessão:
Declarando uma função
Uma função é declarada utilizando a palavra reservada function, seguida do nome da função e de uma lista de parâmetros.
Exemplo de uso:
function somar(num1, num2) {
return num1 + num2
}
Exemplo de uso:
let resultado = soma(4, 6)
Estruturas condicionais e de múltipla seleção
Uma estrutura condicional permite avaliar uma condição e, a partir dela, executar diferentes linhas de código.
Nesta sessão:
if / else
Usamos if quando queremos executar algo caso uma condição lógica seja verdadeira.
Exemplo de uso:
let valor = 3;
if(valor === 3) {
console.log("valor lógico verdadeiro");
}
Podemos utilizar também um ou mais blocos else para adicionar blocos de código alternativos ao if. Assim, quando a condição lógica do if for falsa o else será executado.
Exemplo de uso:
let valor = 2;
if(valor == 3) {
console.log("valor lógico verdadeiro");
} else {
console.log("valor lógico falso");
}
Switch
Switch verifica o valor recebido e caso haja alguma correspondência o programa executa o bloco de código associado a ela.
Exemplo de uso:
let cor = "Preto";
switch (cor) {
case "Preto":
console.log("A cor selecionada foi preto.");
break;
case "Amarelo":
console.log("A cor selecionada foi amarelo.");
break;
case "Branco":
console.log("A cor selecionada foi branco.");
break;
default:
console.log("Nao identificamos a cor selecionada");
}
Observe que no código acima há 3 opções possíveis de cores (Preto, Amarelo e Branco). Caso uma dessas cores seja selecionada, o bloco de código referente a mesma será executado. Porém, caso nenhuma cor declarada seja encontrada o bloco de código definido em default será executado.
Estruturas de Repetição
Estruturas de repetição são um jeito fácil e rápido de executar uma ação repetidas vezes. Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes.
Nesta sessão:
for
A instrução for cria um ciclo de repetições no programa, cujo encerramento se dá quando uma expressões lógica for avaliada como verdadeira. Essa instrução consiste de três expressões que juntas controlam o número de repetições do ciclo, além de um bloco de código no qual descrevemos o que deve ser executado a cada iteração.
Exemplo de uso:
var carros = [
{ id: 1, modelo: 'Corsa', marca: 'Chevrolet', preco: 45000, createdAt: 1534506085621 },
{ id: 2, modelo: 'Punto', marca: 'Fiat', preco: 120000, createdAt: 1534506085621 }
]
var total = 0
for(var i = 0; i < carros.length; i++) {
total += carros[i].preco
}
No código acima desejamos calcular a média de preço dos carros. Para isso devemos primeiro obter a soma dos preços de todos os carros. No exemplo acima a instrução var i = 0 será executada no início da repetição e i++ será repetido até que a expressão lógica i < carros.length retorne true. A cada repetição, a soma total += carros[i].preco será realizada.
for in
O laço de repetição for..in permite iterar sobre as propriedades enumeradas de um objeto de acordo com a ordem em que foram inseridos.
Exemplo de uso:
const cores = [ 'Verde', 'Amarelo', 'Azul', 'Branco' ]
for (const index in cores) {
console.log(index, cores[index])
}
// 1 "Verde"
// 2 "Amarelo"
// ...
No exemplo acima temos um Array com uma lista de cores e precisamos saber o nome e valor de cada uma das suas propriedades.
for of
O laço de repetição for..of permite iterar sobre os valores de um objeto, diferente o for in, que itera sobre as propriedades do objeto
Exemplo de uso:
var carros = [
{ id: 1, modelo: 'Corsa', marca: 'Chevrolet', preco: 45000, createdAt: 1534506085621 },
{ id: 2, modelo: 'Punto', marca: 'Fiat', preco: 120000, createdAt: 1534506085621 }
]
var total = 0
for(const carro of carros) {
total += carro.preco
}
No bloco de códigos acima utlizamos o mesmo exemplo que foi utilizado para a instrução for, porém, utilizando o for of, ñao precisamos controlar o término da estrutura, pois ele itera sobre todos os valores do objeto, e em seguida sai do fluxo.
while
No while um bloco de código é executado ate que um teste condicional se torne verdadeiro, sendo importante lembrar que a condição analisada para a execução do laço de repetição deverá retornar um valor booleano.
Exemplo de uso:
let salario = 1000
while (salario < 5000) {
salario += 100
console.log(`O salário ainda é $`)
}
Perceba que o bloco de código acima, dentro do while, foi executado até que a condição salario < 5000 se tornasse falsa permitindo ao código continuar o fluxo normal da aplicação.
do while
É possível também fazer com que o while execute ao menos uma vez seu bloco de código utilizando a instrução do..while. Por exemplo, considere que haja um bloco de instruções em um software para definir o aumento de salário dos funcionários de uma empresa e validar os que estão abaixo da média, colocando-os na base global de aumento.
Exemplo de uso:
let aumento = 500
do {
console.log(`O valor atual do aumento é de: $`)
aumento += 50
} while (aumento < 500)
Perceba que mesmo que a condição seja falsa o bloco de código será executado ao menos uma vez.
Aprenda mais
Quer saber mais sobre JavaScript? Para conhecer a sintaxe completa do JavaScript e ter um passo a passo do caminho de aprendizado dessa linguagem, consulte o Guia do Programador JavaScript da DevMedia.
Continue por dentro do melhor caminho para aprender JavaScript, sem perder tempo. Receba no seu e-mail notificações sobre cursos e conteúdos indicados nesse Tutorial na ordem em que são propostos e prepare-se para decolar sua carreira de programador JavaScript!