Introdução à Linguagem Java Script
JavaScript é uma linguagem de programação que permite criar algoritmos, ou códigos, para aplicativos.
O que é um Algoritmo?
Um algoritmo é uma seqüência de instruções definidas para serem executadas mecanicamente.
Todos os dias realizamos algoritmos e não percebemos.
Basicamente todas as manhãs nós nos levantamos da cama, tomamos o café da manhã, nos arrumamos e vamos ao trabalho. Entre cada uma dessas ações descritas, realizamos várias outras ações. Nosso próprio corpo realiza algoritmos o tempo inteiro realizando decisões.
Como exemplo de algoritmo podemos pensar em um ser humano andando.
Observe:
- Levantar PERNA_DIREITA
- Inclinar CORPO para FRENTE
- Baixar PERNA_DIREITA
- Apoiar PÉ_DIREITO no chão
- Levantar PERNA_ESQUERDA
- Inclinar CORPO para FRENTE
- Baixar PERNA_ESQUERDA
- Apoiar PÉ_ESQUERDO no chão
- Levantar PERNA_DIREITA
- Inclinar CORPO para FRENTE
- Baixar PERNA_DIREITA
- Apoiar PÉ_DIREITO no chão
- Levantar PERNA_ESQUERDA
- Inclinar CORPO para FRENTE
- Baixar PERNA_ESQUERDA
- Apoiar PÉ_ESQUERDO no chão
...
...repetindo esta sequência, até o final da caminhada.
Porém,...
... mais inteligente, seria colocar uma condição para que o ciclo de caminhada se repita, ou não:
- Levantar PERNA_DIREITA
- Inclinar CORPO para FRENTE
- Baixar PERNA_DIREITA
- Apoiar PÉ_DIREITO no chão
- Levantar PERNA_ESQUERDA
- Inclinar CORPO para FRENTE
- Baixar PERNA_ESQUERDA
- Apoiar PÉ_ESQUERDO no chão
- Voltar ao passo 1 ATÉ QUE Parar = VERDADE
Todo algoritmo segue uma seqüência lógica. Cada linha de código é lida e, caso não haja nenhum erro, executada e logo depois é lida a próxima linha e assim sucessivamente até terminarem as linhas do algoritmo.
Outro exemplo de algoritmo seria fazer um cálculo simples, como a soma ou multiplicação de dois números, como no exemplo abaixo:
- Ler primeiro número
- Ler segundo número
- Somar os dois números lidos
- Exibir o resultado
Por que JavaScript?
A linguagem JavaScript é uma linguagem de programação muito popular, na verdade, a mais utilizada atualmente e que permite ampla gama de aplicações.
JavaScript é uma linguagem de programação flexível e poderosa que é implementada de forma consistente por vários navegadores da web.
Junto com HTML e CSS, é um componente central da tecnologia da web. Enquanto o HTML é responsável pela estrutura e o CSS é responsável pelo estilo, JavaScript fornece interatividade para as páginas da Web no navegador. Assim, JavaScript era usado principalmente para tornar as páginas da web mais interativas, ou seja, permitir transações como validação de formulários, animações, etc.
Mas JavaScript nunca foi criado para se tornar a pedra angular do desenvolvimento web moderno. De fato, a linguagem foi criada em menos de duas semanas, com um propósito muito diferente em mente.
As principais vantagens da linguagem, que a tornaram tão popular, são:
- O JavaScript pode ser usado tanto no front-end quanto no back-end.
- JavaScript é padronizado, por isso é atualizado com freqüência com novas versões.
- JavaScript funciona com o modelo de objeto de documento, ou o DOM, para responder às interações do usuário. O DOM é a estrutura no navegador que exibe as páginas da web.
- JavaScript possui uma comunidade esmagadora e isso faz uma diferença enorme,
- O JavaScript permite que os sites tenham interatividade, como transições de rolagem e movimentação de objetos. Os navegadores modernos ainda competem para processar o JavaScript mais rapidamente para as melhores experiências do usuário. O Chrome, o navegador de Internet mais usado em 2017 , foi tão bem-sucedido em parte devido à sua capacidade de processar JavaScript rapidamente.
- O JavaScript oferece uma ampla variedade de estruturas e bibliotecas que ajudam os desenvolvedores a criar aplicativos complexos com pouca sobrecarga. Os programadores podem importar bibliotecas e estruturas em seus códigos para aumentar a funcionalidade de seus aplicativos.
Atualmente, a JavaScript também é usada em muitas outras áreas, como desenvolvimento server-side, desenvolvimento de aplicativos móveis, e assim por diante.
Por fim, é importante esclarecer que Java e Javascript não são a mesma coisa!!!, e, na verdade, não há nenhuma relação entre as duas linguagens.
Javascript é classificada como uma linguagem multiplataforma, isso significa que Javascript não é exclusiva da web, um bom exemplo disso que é Javscript também é usada como linguagem em Unity3D.
Neste curso vamos aprender Javascript para web, criando scripts para incrementar as páginas web, junto ao código HTML.
Como programar JS?
Linguagem compilada x linguagem interpretada
Existem duas maneiras de executar um programa no computador:
1) Uma em que é preciso escrever o seu código-fonte correspondente em um editor de texto, e depois, compilá-lo. Durante a compilação, o código-fonte é lido pelo compilador que gera então um arquivo de saída com uma tradução daquele código-fonte, para linguagem de máquina (o código executável). Esse arquivo em linguagem de máquina pode ser então executado no computador, e não pode ser facilmente editado, pois não é compreensível por nós seres humanos. Assim, se desejarmos alterar alguma parte desse programa, precisaremos alterar seu código-fonte e compilá-lo novamente para que o executável novo seja gerado. Estas linguagens são chamadas de compiladas.
2) Diferente disso, para executar um programa em uma linguagem interpretada (script), precisamos apenas digitar o código-fonte e o interpretador irá ler esse código e executar as instruções, comando por comando. Assim, não é necessária a criação de um arquivo estático, para alterar o programa; basta alterar o código e ele já estará pronto para rodar novamente.
Uma vantagem óbvia do script é a agilidade para se alterar o programa, eliminando a sequência editar-compilar-linkar-rodar comum em softwares compilados. Como preço dessa flexibilidade, perde-se um pouco em desempenho e será sempre necessário possuir um interpretador no computador onde será rodado o script, enquanto o arquivo binário
resultante de compilação não necessita do compilador em seu ambiente de uso.
JavaScript é uma linguagem de script!
Como criar um programa JS?
O que é necessário para programar em Javascript?
Devido à sua ampla variedade de aplicativos, você pode executar o JavaScript de várias maneiras:
- Usando a guia de console dos navegadores da web;
- Usando o Node.js instalado no seu computador;
- Usando um interpretador virtual do Node.js;
- Criando páginas da web.
Vamos ver as três primeiras formas agora, e a criação de páginas web deixaremos para o final do curso.
USANDO A GUIA CONSOLE DE NAVEGADORES WEB
Todos os navegadores populares têm mecanismos JavaScript integrados. Portanto, você pode executar o JavaScript em um navegador. Para fazer isto:
- Abra seu navegador favorito.
- Abra as ferramentas do desenvolvedor clicando com o botão direito do mouse em uma área vazia e selecione Inspecionar. Atalho: F12.
- Nas ferramentas do desenvolvedor, vá para a guia "Console".
- Em seguida, escreva o código JavaScript console.log("hello world!"), e pressione Enter para executar o código.
A função console.log() escreve o valor de variáveis e textos para o console do navegador.
INSTALANDO O NODE.JS
Node é um ambiente para executar código JavaScript.
Para instalar uma IDE e executar JS usando Node.js, siga estas etapas:
- Instale a versão mais recente do Node.js.
- Instale um IDE, como o Visual Studio Code. No código VS, crie um arquivo > escreva o código JS > salve-o com a extensão .js.
- Abra o terminal/prompt de comando > navegue até o local do arquivo > digite node hello.js > pressione enter.
- Você obterá a saída no terminal.
Nota: Também é possível executar o JavaScript diretamente no terminal/prompt de comando. Para isso, basta digitar node e pressionar enter. Então você pode começar a escrever o código JS.
USANDO UM APP VIRTUAL COM NODE.JS
Ao invés de toda esta trabalheira para instalar aplicativos IDE, você pode utilizar um IDE virtual, como o Replit!!!
Neste, vc pode criar um perfil e editar e rodar seus códigos diretamente na web, sem precisar instalar nada no seu computador!!!
É este método que também vamos utilizar nesta primeira parte do curso!
Criando o perfil
Comece criando seu perfil no Replit
Criando um novo programa
- Crie um novo programa, clicando no botão + Create
Escolhendo a LP
- Escolha o interpretador Node.js. O replit é multiplataforma, pois permite gerar código em várias linguagens de programação diferentes.
Nomeando seu programa
Se você quiser, atribua um nome ao seu programa. Senão, o próprio Replit atribuirá um nome maluco pra vc.
Em seguida, clique no botão + Create Repl
Começando a codificar
E pronto!!! Agora, é só começar a acrescentar código!!!
Vamos testar o seguinte código, usando a função console.log():
console.log("Alô Mundo!");
Desta maneira:
Agora, é só clicar no botão 
para executar seu código.
Você obterá algo assim, como resultado:
CRIANDO UMA PÁGINA WEB
Para criar um código JS em uma página web, vc precisa apenas de um navegador, como o Mozilla Firefox, Internet Explorer, Google Chrome e Safari, e um editor de texto, como o Bloco de Notas (Microsoft Windows), ou como o Notepad++.
Este último reconhece diferentes elementos da linguagem e os coloca em cores diferentes, facilitando o trabalho.
É necessário também salvar o arquivo com a extensão “.htm” ou “.html” para que o navegador execute o que está escrito no arquivo.
Comece editando seu código no editor de textos. Por exemplo:
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript - Meninas Cientistas</title>
<meta charset=“UTF-8”>
<script>
//Conteúdo Javascript
</script>
</head>
<body>
</body>
</html>
No Notepad++, o código ficará assim:
É necessário também salvar o arquivo com a extensão *.htm ou *.html para que o navegador execute o que está escrito no arquivo. Lembre-se: JS é uma linguagem interpretada!!
O código acima vai gerar uma página parecida com esta:
Não se assuste!
A porção de código referente ao JS será tudo que estiver entre as instruções <script> e </script> .
O restante é correspondente aos códigos HTML e CSS das páginas web, como o título da página/guia.
Ocorre que não acrescentamos código ainda, por isto a página aparece em branco.
Mas, agora, vamos acrescentar uma instrução que escreve na página, a função document.write() :
| << Página do curso | AULA 1 - INTRODUÇÃO | AULA 2 - Tipos de Dados>> |
|---|