JavaScript

Linguagens de Programação

Pesquisa mundial feita baseada nos períodos em que as linguagens eram mais usadas naquele ano.

 

Introdução

O JavaScript é uma linguagem de programação amplamente utilizada no front-end para diferentes finalidades. Desde validação de campos à criação de menus, é possível fazer muita coisa usando essa linguagem que adiciona algum dinamismo às páginas que apenas com HTML e CSS são consideradas “estáticas”. Para entender como ela funciona e como mudou ao longo dos anos, assista o vídeo a seguir:

 

Nas aulas, você aprenderá a usar o JavaScript, desde os recursos iniciais da linguagem até a manipulação de elementos da tela.

LIVRO DE APOIO

 

 

Introdução a linguagem JavaScript

Em nossas aulas vamos conhecer a linguagem JavaScript e para isso vamos apresentar as suas características, os tipos de aplicações que conseguimos criar e o que precisamos para começar a aprender com ela.

 

 

1. Primeiros passos com JavaScript

 

Bem-vindo ao JavaScript. 👏👏

JavaScript é uma das linguagens de programação mais fáceis de aprender por ter uma sintaxe simples.

// Declarando uma variável
var preco = 54.90;
 
// Multiplicando um número
var desconto = preco * 0.1;
 
// Imprimindo um valor
console.log("O valor do desconto é: " + desconto);
Código. Exemplo de sintaxe simples
Execute o código

Por ser uma linguagem fácil, o JavaScript também é indicado para quem está começando a programar.

Veja mais alguns exemplos de códigos em JavaScript no slide abaixo:

1
2
3
4
5
6

Pré-requisito

O pré-requisito para aprender a linguagem JavaScript é:


Esses conceitos são essenciais para toda linguagem de programação e não é diferente no JavaScript.

Checkpoint –

2. Por que aprender JavaScript?

 

Basicamente, são três os principais motivos para aprender JavaScript:

  • É a única linguagem 100% fullstack;

  • É a única linguagem que roda nativamente em todos os browsers;

  • É fácil de aprender.

 

Vejamos:

Única linguagem 100% fullstack

Fullstack significa dominar todas as tecnologias que a aplicação utiliza.

Na maioria dos casos, um negócio precisa de mais de uma aplicação pra existir, como vemos na Figura 1.

Figura 1. Tipos de aplicações

 

Cada uma dessas aplicações pode usar uma tecnologia diferente ou apenas o JavaScript.

 

Slide1 (1)
Slide2

 

Três tecnologias diferentes para entregar a mesma aplicação – não é muito legal, né? 🤔

 

 

Roda nativamente em todos os browsers

Isso é muito, muito importante.

O JavaScript é simplesmente a única linguagem interpretada pelos browsers (tanto desktop quanto mobile).

Veja alguns exemplos de browsers na Figura 2.

 
Figura 2. Exemplos de browsers

 

  • Sim. Toda aplicação web roda em algum browser. O JavaScript é a única linguagem interpretada pelo browser então, em algum momento você vai ser OBRIGADO a aprender JavaScript. Simples assim. 😂

  • Bom, se sua aplicação rodar somente no mobile (por exemplo, Uber), ou somente no Desktop, essa obrigatoriedade não vai existir. Mas, na nossa carreira de programador, é esperado que em algum momento tenhamos que entregar um cliente Web (mesmo que seja a parte admin da aplicação).

 

Então, aprender JavaScript vai estar no caminho da sua carreira, em algum momento. 🙂

É fácil!

Essa é a boa notícia. 😉

 

Vamos lá. JavaScript é fácil por dois principais motivos:


A sintaxe é simples

JavaScript é baseado na linguagem C e é fracamente tipada. Isso significa que o código JavaScript é de fácil compreensão, como vemos no exemplo no Código 1.

 

1 var nome = "João";
2 var idade = 18;
3 var estaMatriculado = true;

Código 1. Exemplo de código de fácil compreensão.

 

A biblioteca é pequena

JavaScript possui uma biblioteca com poucas funções nativas.

Basicamente o que aprendemos com a linguagem é manipular textos, datas e fazer cálculos com funções matemáticas.

Depois de ter essa base, você consegue trabalhar com bibliotecas fornecidas pela comunidade e assim expandir as funcionalidades do seu projeto.

Com isso, aprendendo as funções nativas, você consegue dominar a linguagem rapidamente.

Checkpoint –

3. Característica: Tipagem mutável

Tipagem mutável significa poder alterar o tipo da variável ao longo do código, como no exemplo do Código 1.

var idade = 18;
idade = "18 anos";
Código 1. Exemplo de tipagem mutável
 
 

Como podemos ver, mudamos o valor da variável idade, que era do tipo numérico para o tipo texto.

A tipagem mutável acelera a curva de aprendizado porque deixa o programador iniciante com uma preocupação a menos na hora de escrever seus primeiros códigos.

Vejamos mais exemplos no slide abaixo:

 

1
2
3
4

Checkpoint –

 

 

4. Característica: Case sensitive

Nesta aula vamos aprender porque o JavaScript é case sensitive.

1
2
3
4
5
6
7
8
9

Clique no botão Execute o código e veja o exemplo do slide em execução.

Execute o código

 
Checkpoint –
 
 
 

5. Característica: Multiparadigma

Nesta aula vamos aprender que o JavaScript é Multiparadigma.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Checkpoint –

 

 

6. Característica: A importância do JavaScript no browser

 

Nesse momento precisamos entender uma coisa importante sobre o JavaScript.

A palavra JavaScript, de acordo com o contexto, pode trazer significados diferentes. Vejamos:

 

1) JavaScript é uma linguagem 👍

Um primeiro cenário é o fato do JavaScript ser apenas uma linguagem de programação, ou seja, uma espécie de idioma que utilizamos para escrever códigos.

Por exemplo, existem outros idiomas, tais como as linguagens C#, PHP, Python, Pascal, etc.

Essa matéria trata justamente desse ponto: aqui vamos aprender a linguagem/idioma JavaScript – somente.


2) JavaScript manipula o DOM 👍

O segundo cenário é o fato de o JavaScript ser a única linguagem embutida nos browsers web.

Ou seja, se você quer programar um comportamento no browser, a única linguagem disponível para isso é o JavaScript.


Como assim “comportamento no browser“?

Por exemplo, digamos que você quer fazer algo mais ou menos assim: quando o usuário clicar em um determinado botão na página, um menu deve ser aberto, como vemos na Animação 1.

Animação 1. Abrindo um menu


Isso é um evento no browser que necessita de uma programação. Isso só pode ser feito com JavaScript.

Tecnicamente, dizemos a mesma coisa assim: o JavaScript é a única linguagem que pode manipular o DOM.

DOM é a sigla para Document Object Model

Em palavras simples, quando falamos DOM queremos dizer o seguinte: que o JavaScript permite manipular elementos HTML como se eles fossem objetos.

Por exemplo, ao clicar no objeto botão (HTML = elemento <button>elemento</button>) um menu deve ser aberto (HTML = elemento <nav>), como vemos na Animação 2.

Animação 2. Abrindo e fechando um menu
Animação 2. Abrindo e fechando um menu

Com JavaScript e DOM conseguimos:

  • Alterar os elementos da página;

  • Alterar os estilos, ou seja, cores, tamanho de fonte, …

  • Excluir ou acrescentar um novo elemento;

  • Criar SPAs, ou aplicações de página única, onde alteramos toda estrutura, sem recarregar a página.


Aprender a manipular o DOM não é assunto dessa matéria – aqui veremos apenas a sintaxe JavaScript.

Para se aprofundar nesse assunto recomendamos o uso de um framework, tais como o Angular, Vue.js ou React… entre outros.

Checkpoint –
 
 
 

7. Característica: Linguagem Fullstack

O JavaScript é fullstack porque ele consegue criar os principais tipos de aplicação, que são:

  • Aplicações front-end;

  • Aplicações back-end;

  • Aplicações mobile.


Front-end

Front-end é a parte da aplicação que permite ao usuário interagir com o sistema.

A página de um site é um exemplo óbvio de componente front-end, como podemos ver na Figura 1.

Figura 1. Exemplo de componente front-end
Figura 1. Exemplo de componente front-end

As interações feitas na página são trabalho da programação front-end.

Por exemplo, clicar num botão para abrir/fechar um menu ou validar se um formulário pode ser enviado (Animação 1), são tarefas comuns da programação front-end.

Animação 1. Exemplo de validação de formulário
Animação 1. Exemplo de validação de formulário
 

Não é assunto dessa matéria explicar como utilizar o JavaScript para programação front-end, nossa preocupação nesse momento é primeiramente aprender a sintaxe da linguagem.

Para programação front-end recomendamos o uso de um framework JavaScript, tais como Angular, Vue.js ou React (Figura 2).

Exemplo de frameworks JavaScript
Figura 2. Exemplos de frameworks JavaScript

 

JavaScript no Back-end

 

O back-end é quem atende às solicitações do front-end recebendo ou enviando dados. Back-end é o motor da aplicação.

Por exemplo: uma aplicação front-end pode pedir ao back-end as informações dos produtos que devem ser listados. Veja um exemplo na Figura 3.

 

Exemplo de dados vindo do back-end
Figura 3 . Exemplo de dados vindo do back-end

 

Na página acima, o back-end acessou o banco para pegar os dados dos produtos e devolveu esses dados para que o front-end os exiba para o usuário.

 

Observe que, mesmo que estejamos utilizando a mesma linguagem JavaScript, ainda assim precisaremos de duas aplicações: uma para o back-end e outra para o front-end.

 

JavaScript no mobile

Aplicações mobile são aquelas feitas para dispositivos móveis, como os que vemos na Figura 4.

 

Exemplo de dispositivos mobile
Figura 4. Exemplo de dispositivos mobile


Através dos frameworks Ionic e React Native por exemplo, conseguimos utilizar o JavaScript também para criar aplicações mobile!

Novamente é importante frisar: a linguagem é a mesma, mas as aplicações são diferentes. Um código vai servir para o app mobile, um código vai servir para o back-end e outro código vai servir a página Web.

É amigo, programar significa escrever bastante código 🤣.

Dessa forma, concluímos que o JavaScript é Fullstack, ou seja, com ele conseguimos criar os principais tipos de aplicação.

 

Checkpoint –

 

8. Estudando JavaScript com apoio do Node

Nessa aula vamos abordar o uso do Node para o aprendizado da linguagem JavaScript.

1
2
3
4
5
6
7
8

Checkpoint –

 

#AlexHolanda
#JavaScript
#AlexsanderBarreto

Curso de JavaScript e ECMAScript free para Iniciantes e fortalecer o aprendizado;

Siga os próximos passos:

  • SUMÁRIO