Introdução ao JavaScript · TheDevick

Imersão Dev

A Imersão dev é um curso gratuito que será realizado nos dias 30/01 à 03/02 de 2023. Confira mais detalhes no meu post: Imersão Dev: Um Novo Marco na Comunidade Dev

Codepen.io

Para testarmos nossos códigos HTML, CSS e JS, existe o site Codepen.io para testarmos nosso código. Crie uma conta e inicie um novo pen para seguir esse tutorial.

Já escrevi um artigo explicando as três principais principais linguagens da Web, onde cito um exemplo de código com JavaScript. Nesse post, iremos nos aprofundar nessa poderosa linguagem de programação.

Entendendo Variáveis

Variáveis são valores que podemos armazenar na memória do computador para reutilizá-la, modificá-la, entre outros.
Na área de programação, temos os Tipos, que pelo próprio nome, definem que tipo essa variável. Os tipos mais usados são:

String | Representa um texto
Integer | Representa um número inteiro
Float | Representa um número flutuante (Número com vírgula)
Array | Representa uma lista de valores

Além disso, o JavaScript possui três jeitos para definir variáveis. Cada uma tem suas vantagens e desvantagens, mas não vamos entrar em detalhes nesse post. Usaremos o let em nossos exemplos.

Cada variável possui um nome e um valor. No JavaScript, definimos uma variável com um let VariavelTexto = "Um Texto". Perceba que essa variável é do tipo String, por isso, precisamos colocar ela entre aspas duplas ou simples (" ou ').

Vamos exibir um nome, armazenado em uma variável nome em um alerta.

let nome = "Erick"
alert(nome)

Desafio: Troque o valor da variável para o seu nome.

Concatenação de Strings

Quando precisamos juntar dois valores, usamos a concatenação. O jeito mais fácil em JavaScript é usar o operador +. Verifique o nosso exemplo:

let nome "Erick"
alert("Olá, " + nome)

Funções

As funções na programação é um jeito de reutilizar código. Vamos criar uma função que automatiza a mensagem Olá, nome.
Em JavaScript, criamos uma função, usamos o termo function, seguido com o nome da função. Após isso, colocamos parênteses e chaves.

O conteúdo dentro dos parênteses será explicado em frente.

O conteúdo dentro das chaves será o código a ser reutilizado. Vamos para o exemplo

function OlaUsuario() {
    let nome = "Erick"
    alert("Olá, " + nome)
}

Perceba que dentro do conteúdo da função, colocamos um espaçamento antes. Isso é pura estética, para conseguirmos ler melhor o que está dentro ou fora da função.

Mas, se o código ficar assim, nada acontece. Isso por que não chamamos a função para executar, então, esse código é apenas "ignorado" pelo JavaScript. Para chamar uma função, usamos algo parecido com o alert("mensagem").
A grande vantagem de funções é que nós podemos reutilizar elas, quantas vezes quisermos. Então, vamos chama-lá 3 vezes (Emitindo assim, três alertas)

function OlaUsuario() {
    let nome = "Erick"
    alert("Olá, " + nome)
}
 
OlaUsuario()
OlaUsuario()
OlaUsuario()

Funções com Parâmetros

Como você pode perceber, o alert("mensagem") é uma função, mas que já vem imbutida no JavaScript. Mas perceba que passamos um conteúdo (Uma string) nessa função, para ela emitir o alerta com esse texto. Para fazermos isso em nossa função, é simples. Um parâmetro em uma função é na verdade uma variável. Então, quando colocamos o nome da função, seguido de parênteses, colocamos o(s) parâmetro(s) ali.

function OlaUsuario(nome) {
    alert("Olá, " + nome)
}

OlaUsuario("Nome")

Quando precisamos de mais de um parêmetro na função, separamos-a entre vírgulas.

Perceba que agora, chamamos a nossa função do mesmo jeito da função alert!

Desafio

Escreva uma função IdadeUsuario() que mostre a idade do usuário, mas usando agora o tipo Integer, e escreva nos comentários sua resposta e como chegou até ela.

Dica: para passar parâmetros do tipo inteiro em uma função, fazemos IdadeUsuario(16). Não precisa de nenhum caractere especial, como na string, por exemplo.
Dica: Para concatenação de Strings e Inteiros, fazemos do mesmo jeito que fizemos anteriormente.

Sobre Mim 🐘

Me Chamo Erick. Desenvolvedor PHP (Symfony).