Desenvolvimento JavaScript

O que é JavaScript? Aprenda os fundamentos da linguagem

21 de outubro de 2021

O que é JavaScript? Aprenda os fundamentos da linguagem

Neste artigo você vai aprender o que é JavaScript, e também ter uma introdução de uma das linguagens de programação mais utilizadas no momento

O que é JavaScript capa

Fala programador(a), beleza? Bora adquirir os conhecimentos fundamentais de JavaScript!

Começando do começo

Vamos entender primeiramente alguns conceitos teóricos de JavaScript, para depois praticar muito a linguagem

JS é uma linguagem de alto nível, ou seja, podemos escrever código com ‘linguagem humana’ e ela consegue interpretar facilmente

Várias coisas são feitas por baixo dos panos, sem precisar de nossa interferência, como gerenciamento de memória

Ela é multiparadigma, permitindo que nós programemos em procedural, funcional e também de forma orientada a objetos

Não há setup algum para executar JavaScript, os navegadores conseguem interpretá-la, então basta colocar o script em um HTML, por exemplo

É hoje muito utilizada, isso se dá pela alta demanda dos frameworks de front-end, como: React, Vue e Angular

Que fazem parte da maneira moderna de programar aplicações, e eles todos são escritos em JavaScript

Além de poder ser utilizada no back-end, por meio de Node.js

Ou seja, ela é super versátil, permitindo programar uma aplicação inteira apenas com uma linguagem (front e back-end), escolhendo um banco de dados relacional ou não relacional (SQL ou NoSQL)

Outra curiosidade é que o nome de JavaScript é EcmaScript, muitas vezes também chamada de JavaScript Vanilla

Isso é uma forma de se referir a linguagem pura, sem utilizar uma biblioteca ou framework

Como rodar JavaScript?

Ao longo deste artigo vou utilizar o editor de código VS Code, mas você pode utilizar o da sua preferência

Com ele vamos criar um HTML base para executar JavaScript

Como por exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Fundamentos</title>
  </head>
  <body>
    <h1>JavaScript Fundamentos</h1>
    <script>
      console.log("Olá!");
    </script>
  </body>
</html>

Esta é uma base muito utilizada para projetos em HTML e CSS, e podemos executar JS nela também

Veja as tag script, ela nos permite isso

Se você abrir o navegador verá que teremos uma mensagem na aba console, da inspeção de elementos

Teremos este resultado:

javascript exemplo de execução

Para abrir o console basta apertar com o botão direito do mouse na área da página e selecionar a opção inspecionar (Ctrl + Shift + I) e acessar a aba console

Nela conseguimos monitorar execuções de JavaScript, e vamos fazer isso ao longo do tutorial

Outras formas de executar JavaScript no navegador

Colocar o código de JS misturado com o de HTML não é uma boa prática, para contornar isso podemos fazer a importação do arquivo de JavaScript

Temos duas possibilidades, tanto no fim do body, o que era feito mais antigamente

Como também no head da página, utilizando o atributo defer

Vamos então criar um arquivo chamado scripts.js e chamá-lo no head

Nosso HTML fica desta maneira:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Fundamentos</title>
    <script src="scripts.js" defer></script>
  </head>
  <body>
    <h1>JavaScript Fundamentos</h1>
  </body>
</html>

E o arquivo scripts.js assim:

console.log("Olá!");

Agora vamos seguir apenas no arquivos de JS, note que nosso código fica mais limpo e organizado

O atributo defer serve para o carregamento do JS não bloquear a renderização de HTML

Por isso antigamente o JavaScript era adicionado no fim do body, para carregar o HTML e CSS primeiro

Com este atributo, podemos resolver este problema e colocar as importações onde elas devem estar, que é no head

Meus cursos de JavaScript

Atualmente possuo alguns cursos de JavaScript, tanto para front-end como também para back-end

JavaScript do básico ao avançado: Neste curso você vai aprender tudo sobre a linguagem JS, com mais de 20 horas, diversos exercícios e projetos

Orientação a Objetos com JavaScript: Um curso para mergulhar em OOP com JS, criando projetos para entender os conceitos do paradigma na prática

Node.js do Zero a Maestria: Curso focado em JavaScript no back-end, que ensina MVC, APIs, e projetos completos com Express, MongoDB e React

O console.log de JavaScript

O objeto console possui diversos métodos interessantes, utilizados como forma de depuração

Já fizemos uso do log, com console.log, ele exibe uma mensagem na aba console do navegador

Mas temos outros como:

  • console.error: Imprime uma mensagem com contexto de erro;
  • console.warn: Imprime mensagem com contexto de aviso;
  • console.log: Imprime uma mensagem de debug;

Este objeto será muito útil durante nosso aprendizado, e também na nossa vida profissional

Constantemente estamos o utilizando para verificar valores, por exemplo

Veja como podemos aplicá-los:

console.error("Este é um erro!");
console.warn("Este é um aviso!");
console.log("Esta é uma mensagem!");

Gostaria de ressaltar que estaremos escrevendo tudo no arquivo scripts.js a partir de agora, abra o editor e pratique também!

Teremos o seguinte resultado:

javascript console methods

Note que métodos diferentes de console, tem resultados diferentes no navegador!

Formas de criar variáveis em JavaScript

Em JS temos três formas de criar variáveis, que são: var, let e const

A var é uma sintaxe mais antiga, que gera alguns problemas que let e const resolvem

Basicamente com var não temos escopo, as variáveis conseguem ser vistas em todos os lugares

O que dificulta a programação em softwares mais complexos, let e const possuem escopo

Podemos atribuir valores a variáveis desta maneira:

var x = 10;
let y = 15;
const z = 20;

console.log(x)
console.log(y)
console.log(z)

Os números agora estão associados as letras x, y e z, que são variáveis criadas de formas distintas

Até o ponto de declarar o valor em uma variável, as três fazem a mesma coisa

Teremos os valores exibidos a partir de console.log, da seguinte maneira:

10
15
20

Temos uma particularidade interessante em const, seu valor é constante, ou seja, não pode ser alterado

Diferente de var e let, que podemos alterar em qualquer momento

Se você for criar um programa em JS hoje, utilize apenas let e const, focando mais em const

O código ficará mais consistente, pois nem sempre precisamos alterar o valor de uma variável, e const vai garantir isso quando a mudança for feita de forma errada

Tipos de dados em JavaScript

Os tipos de dados estão presentes em todas as linguagens de programação

E em JS não poderia ser diferente, veja quais são:

  • String: dados de texto;
  • Number: dados numéricos;
  • Boolean: verdadeiro ou falso;
  • Null: dados nulos;
  • Undefined: dados não definidos;
  • Object: objetos e arrays (listas);

Vamos criar variáveis com cada um deles:

const name = "Matheus";
const shirtsQty = 4;
const isApproved = false;
let surname = null;
let age;
const languages = ["JavaScript", "PHP", "Python"];
const user = {email: "[email protected]", password: "teste123"}

A forma de escrever estes dados é bem parecida com as outras linguagens

Strings colocamos entre aspas, números não precisam de aspas, booleano aceita apenas true ou false como valores

O null serve para iniciarmos uma variável sem valor, e o undefined é quando iniciamos uma valor e não declaramos um valor, como em age

Arrays e objetos são utilizados como listas, geralmente arrays tem o mesmo tipo de dado entre os elementos

E os objetos descrevemos alguma entidade, como um usuário, onde todos os itens do objeto fazem parte das características deste usuário

Todos os dados podem ser impressos com console.log, exemplo:

console.log(name);
console.log(shirtsQty);
console.log(languages);

É possível checar um valor com o operador typeof, da seguinte maneira:

console.log(typeof name); // String
console.log(typeof surname); // Object
console.log(typeof user); // Object

Recebemos Object para null por que quando JS foi criado, ele era considerado deste tipo, por questões de arquitetura da linguagem

Muitas coisas em JavaScript são consideradas objetos! 🙂

Podemos atribuir valores a variáveis utilizando o o símbolo de igual

Para tirar o undefined de surname, podemos fazer:

surname = "Battisti"
console.log(typeof surname) // String

Agora a variável muda de tipo, ela é considerada de texto

Algumas linguagens necessitam da definição de tipo para uma variável, JavaScript não e aceita a mudança de modo simples

Trabalhando com strings em JavaScript

Os textos, em qualquer linguagem de programação, possuem diversas funções para realizar alguma ação com eles

Por exemplo: modificar uma parte ou extrair algo deles

E em JavaScript não é diferente, temos diversos métodos

Vamos ver alguns e suas utilizações:

const fullName = 'Matheus Battisti'

console.log(fullName.length) // 16

const stringToArray = fullName.split(' ')

console.log(stringToArray) // ["Matheus", "Battisti"]

console.log(fullName.toLowerCase()) // matheus battisti

console.log(fullName.toUpperCase()) // MATHEUS BATTISTI

console.log(fullName.indexOf('Battisti')) // 8

console.log(fullName.slice(0, 7)) // Matheus

Coloquei as respostas para os métodos em comentários logo após a execução

Mas vamos ver o que faz cada um:

  • lenght: uma propriedade, dá o número de caracteres de uma string;
  • split: separa uma string por um separador, e retorna um array;
  • toLowerCase: transforma a string toda para caixa baixa;
  • toUpperCase: o contrário de lower case;
  • indexOf: encontra o índice da primeira letra de uma outra string que estamos buscando;
  • slice: extrai um conteúdo de uma string, baseado-se nos índices das letras;

Estes são só alguns métodos de string para JavaScript, sugiro buscar por outros pois são muito poderosos e amplamente utilizados

Um pouco mais sobre os arrays

Assim com as strings, os arrays tem muitos métodos que podemos explorar

E também são muito utilizados no dia a dia de um programador

Veja algumas das possibilidades:

const list = ['a', 'b', 'c', 'd', 'e']

console.log(list.length) // 5

console.log(list[2]) // c

list[5] = 'f'

console.log(list) // ['a', 'b', 'c', 'd', 'e', 'f']

list.push('g')

console.log(list) // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

console.log(list[list.length - 1]) // ultimo item - g

list.pop() // ['a', 'b', 'c', 'd', 'e', 'f']

list.shift()

console.log(list) //  ['b', 'c', 'd', 'e', 'f']

list.unshift('a')

console.log(list) // ['a', 'b', 'c', 'd', 'e', 'f']

A explicação de cada um deles:

  • length: número de elementos do array;
  • [x]: acessar array pelo índice, começa do 0, ou adicionar novo elemento;
  • push: adicionar elemento ao final do array;
  • [arr.length – 1]: acessar último elemento do array;
  • pop: remover último elemento do array;
  • shift: remover o primeiro elemento do array;
  • unshift: adicionar um elemento como primeiro item do array;

Todas estas técnicas em alguma hora de sua vida como programador serão úteis! 🙂

Aprofundando mais em objetos de JS

Os objetos são dados muito interessantes, geralmente quando algo vem do banco de dados para o front-end, ele vem em formato de objeto

Um objeto é definido entre chaves, e cada dado possui um nome de propriedade e um valor

A atribuição de valor é feita por dois pontos(:) e vez do igual (=) que é para os valores de variáveis

Alguns exemplos do que podemos fazer com objetos:

const product = {
  name: "Camisa",
  price: 15.99,
  inStock: true,
  sizes: ["P", "M", "G"]
}

console.log(product.name); // Camisa

product.color = "Azul" // Adicionando propriedade

console.log(product);

const {price, inStock} = product

console.log(price)

Com o código acima é possível ver que podemos criar objetos com propriedades de diferentes tipos de dados

Acessamos as propriedades por meio da notação de ponto (.)

E podemos atribuir novas propriedades com novos valores a um objeto

O fato de ser uma constante não impede que alteremos as propriedades do objeto

E também podemos criar novas variáveis a partir das propriedades de um objeto, este recurso se chama destructuring

Conhecendo o JSON

JSON é uma notação de objeto muito utilizada para comunicação em APIs

As requisições e respostas tem dados que precisam ser lidos neste formato

Podemos transformar um objeto JavaScript em JSON ou um JSON em objeto

Veja como é possível:

const dog = {
  name: "Shark",
  age: 10
}

const json = JSON.stringify(dog)

console.log(json)

const obj = JSON.parse(json)

console.log(obj)

O método stringify do objeto JSON transformar um objeto em um JSON

E o método parse transforma um texto em JSON válido em objeto

Note que para o navegador o JSON é apenas texto comum, porém ele pode ser interpretado pelo parse ou pelo back-end da aplicação

O JSON tem algumas regrinhas na sua estrutura:

  • Chaves precisam estar entre aspas duplas;
  • A última propriedade não pode ter vírgula, apenas as anteriores;
  • Precisa estar entre chaves;
  • As propriedades devem ser separadas por vírgula;

Parecem bem semelhante a um objeto de JS, e na verdade são, mas precisamos seguir a risca para o JSON conseguir ser interpretado, então tome cuidado!

Condicionais em JavaScript

Em JavaScript também temos estruturas condiconais, como: if, else e else if

A sua aplicação é igual em outras linguagens, veja:

const a = 10

if(a > 8) {
  console.log("A é maior que 8!")
}

Podemos também utilizar as outras estruturas para deixar ainda mais completo o nosso código:

const b = "Matheus"

if(b === "João") {
  console.log("O nome é João!")
} else if(b === "Pedro") {
  console.log("O nome é Pedro!")
} else {
  console.log("Não encontramos o nome do usuário!")
}

A estrutura acima contém a aplicação completa de uma estrutura de condição

Note que nem sempre é necessária a utilização de todas as regras, mas caso seja elas estarão disponíveis

E ainda há o if ternário, que é uma simplificação da estrutura de condição, e pode ter um else também, veja:

const someNumber = 14 

let testingANumber = someNumber < 20 ? 'Yes' : 'No'

console.log(testingANumber); // Yes

Aqui a verificação de if é feita após a comparação, ou seja, se o número for menor que 20, termeos a atribuição de ‘Yes’ para a variável, o valor de if é computado após a interrogação

Agora se não, ele será de ‘No’, o else é computado após os dois pontos (:)

Estruturas de repetição em JavaScript

Em JavaScript temos estruturas de repetição como: for e while

Podemos utilizar para iterar em arrays (listas), as duas possuem sintaxes diferentes

Vamos ver elas em execução:

const myList = [1, 2, 3, 4, 5]
let counter = 0

while (counter < myList.length) {
  console.log('Imprimindo: ' + myList[counter])
  counter++
}

const mySecondList = ['a', 'b', 'c', 'd', 'e']

for (let counter = 0; counter < mySecondList.length; counter++) {
  console.log('Imprimindo: ' + mySecondList[counter])
}

O loop while e for podem fazer a mesma coisa, mas o for conta com uma sintaxe mais compacta, onde declaramos tudo em sua invocação

Já em while precisamos criar a variável que será incrementada e também adicionar uma linha para alteração da mesma

Mais métodos para interação com arrays

Continuando na questão de arrays e estruturas de repetição, temos a nossa disposição alguns métodos que nos ajudam em tarefas do cotidiano com listas

Com for e while temos que fazer alterações nos arrays de forma manual, já com estes métodos podemos aplicar algumas mudanças de forma mais fácil

const names = ['Matheus', 'João', 'Pedro', 'Maria']

names.forEach(function (name) {
  console.log(`O nome é: ${name}`)
})

const modifiedNames = names.map(function (name) {
  if (name === 'Matheus') {
    return (name = 'Sr. Matheus')
  } else {
    return name
  }
})

console.log(modifiedNames)

const bigNumbers = [1, 2, 3, 10, 50].filter((number) => {
  return number > 5
})

console.log(bigNumbers) // [10, 50]

const sumAll = [10, 20, 30, 40, 50].reduce((total, number) => {
  return total + number
})

console.log(sumAll) // 150

Estes são os métodos mais utilizados, segue a descrição deles:

  • forEach: uma espécie de for que pode passar por cada item do array;
  • map: utilizado para gerar alguma modificação nos elementos do array;
  • filter: utilizado para filtrar elementos do array;
  • reduce: utilizado para reduzir o array em um elemento;

Criando funções

Até agora utilizamos muitas funções, mas também podemos criar as nossas próprias em JavaScript

Veja um exemplo prático:

function minhaFuncao() {
  console.log('Olá função!')
}

minhaFuncao()

Note que o primeiro passo é criar uma instrução com um nome e utilizando a declaração de function

Podemos colocar qualquer código dentro dela, o objetivo principal das funções é a sua reutilização

Criar uma função não garante sua execução, precisamos invocá-la com os parênteses, como é feito na última linha

Outros pontos importantes das funções são:

  • Argumentos: passamos argumentos para tornar a execução da função única para cada caso;
  • Retorno: em vez de utilizar o console.log, retornamos dados que podem ser inseridos em variáveis;

Veja este exemplo:

function nomeCompleto(nome, sobrenome) {
  return `Olá ${nome} ${sobrenome}, como vai?`
}

const saudacao = nomeCompleto('Matheus', 'Battisti')

console.log(saudacao)

Aqui seguimos a mesma ideia da função passada, porém utilizamos os recursos de argumentos e retorno

Veja que inserimos dois argumentos: nome e sobrenome

O retorno foi uma string com uma saudação, que era o real propósito da função

Armazenamos o retorno em uma variável, que é feito pela instrução return, e depois a imprimimos no sistema

Estes recursos são super importantes na criação de softwares com JavaScript e também em qualquer outra linguagem!

Há também uma outra sintaxe de funções que são chamadas de arrow functions

Elas tem quase as mesmas funcionalidades que as funções, por isso não podemos substituir completamente

Apesar de dar vontade pois sua sintaxe é muito mais sucinta, veja um exemplo:

const myArrowFunction = (a, b) => {
  return a + b
}

console.log(myArrowFunction(2, 2))

E se elas forem bem simples, podemos deixar ainda mais sucinta:

const mySimpleArrow = (a, b) => a + b

console.log(mySimpleArrow(5, 5))

Veja que não utilizamos vários itens que em funções normais precisamos: function, chaves e return

Classes em JavaScript ES6

Antigamente não era possível criar classe em JavaScript, havia um recurso chamado de constructor function que simulava uma classe

Porém com a evolução da linguagem agora temos acesso a este recurso, que facilita programar em OOP

Veja como podemos criar uma classe e instanciar um objeto:

class Product {
  constructor(name, price) {
    this.name = name
    this.price = price
  }

  productDetails() {
    return `O nome do produto é: ${this.name} e ele custa RS${this.price}`
  }
}

const socks = new Product('Meia branca', 5.99)

console.log(socks.productDetails())

A classe é declarada pela palavra class seguida de um nome com letra maiúscula, o que é um padrão muito utilizado

Podemos inicializar as propriedades do objeto com a função constructor, que já vem por default em todas as classes

E criamos os métodos como funções, só que sem utilizar a palavra function

Instanciamos novos objetos com new, conforme exibido no exemplo

JavaScript e o DOM

DOM é um acrônimo para Document Object Model

Basicamente é o recurso que nos permite interagir com HTML e CSS, ou seja, podemos criar animações na tela e deixar a aplicação mais dinâmica

O primeiro conhecimento de DOM que precisamos é saber selecionar elementos

Isso é fundamental e vai dar origem a todas as outras funcionalidades de JS que envolvem DOM

Veja como podemos fazer isso:

    <h1 id="title">JavaScript Fundamentos</h1>
    <p class="text">Este é um texto</p>
    <p class="text">Este é outro</p>
    <p class="text">E mais um</p>
    <p class="text">E o último</p>
    <button id="btn">Clique em mim!</button>

Primeiramente vamos adicionar este HTML, pois a ideia do DOM é justamente alterar HTML e CSS com JavaScript 🙂

const title = document.getElementById("title")
const sameTitle = document.querySelector("#title")

const texts = document.querySelectorAll(".text")

As duas primeiras formas selecionam elementos individualmente, a última seleciona um ou mais elementos

Estes três métodos são os mais utilizados atualmente, temos outros mas são mais antigos e um pouco mais limitados

Só com estes você já estará bem para utilizar o DOM

Note também que todos partem de document, que seria o documento HTML como um todo

O querySelectorAll nos entrega uma estrutura semelhante aos arrays, então podemos iterar pelos elementos, veja:

texts.forEach((text) => {
  console.log(text.textContent.toUpperCase())
})

Manipulação de elementos pelo DOM

Após a seleção dos elementos, podemos manipulá-los, veja possíveis alterações:

  • Mudar o texto;
  • Alterar o HTML interno;
  • Remover elemento da página;
  • Alterar a classe;
  • Mudar estilos (CSS);

Vamos ver cada um deles na prática, primeiro a alteração de texto:

title.textContent = 'Mudei o texto'

Agora o texto do título que selecionamos antes é alterado, a propriedade utilizada é textContent

Alteração do HTML de um elemento:

texts[0].innerHTML = '<span>Alteramos o HTML deste elemento</span>'

Com a propriedade innerHTML conseguimos mudar o HTML e também o texto do elemento alvo

Para mudar estilos precisamos acessar a propriedade style:

texts[1].style.backgroundColor = 'red'

E para adicionar uma classe utilizamos classList:

texts[2].classList.add('my-class')

Excluir elementos é fácil também, aplicamos o método remove ao elemento selecionado:

texts[3].remove()

Adicionando eventos a elementos pelo DOM

Temos uma gama grande de eventos disponíveis em JavaScript

Ou seja, em vez de mudar diretamente algo no elemento, nós condicionamos isso a um evento

Que pode ser um click ou passar o ponteiro do mouse no elemento, por exemplo

Veja como criar um evento passo a passo:

btn.addEventListener('click', function() {
  console.log("clicou!")
})

Agora toda vez que clicamos no nosso botão, teremos este evento sendo disparado

O método addEventListener adicionar um evento ao elemento

Depois precisamos declarar qual o tipo do evento e por fim adicionar uma função anônima

Nesta função colocamos tudo o que precisa ser executado em um evento

Esta é a fórmula principal dos eventos em JS, todos eles vão se parecer como este

Alterando o evento a ser disparado e também o que ele executará ao ser ativado

Temos eventos de:

  • Mouse;
  • Teclado;
  • Formulários;
  • Que lidam com o HTML (carregamento, erro);
  • Touch;
  • E outros tipos;

Sugiro estudar bastante sobre DOM, por que é muito utilizado

Futuramente pretendo disponibilizar também um treinamento completo, então fique ligado no blog e no canal de YouTube

Conclusão

Neste artigo você aprendeu o que é JavaScript e o que a linguagem pode fazer

Fizemos um tour em todos os principais conceitos e fundamentos de JS

Passando desde a implementação de recursos básicos como: estruturas de condição e repetição

Até as particularidades mais interessantes de DOM, para modificação do site a partir de JavaScript

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x