Iniciando no JavaScript
Resumo: Aprenda o básico para começar a programar em JavaScript. Falamos tudo que você precisa saber para iniciar na área!
JavaScript é uma linguagem de programação front-end, ou seja, ela funciona no computador do usuário final.
Ela tem o nome de JavaScript devido a época em que a linguagem Java estava forte, logo, foi vendida com esse nome, mas seu nome correto é ECMAScript.
O que é o JavaScript?
O JavaScript / ECMAScript é uma linguagem de programação bem fácil e prática, pois, não precisamos de um compilador para usá-la nem precisamos de instalar bibliotecas para programá-la. Basta ter um browser (navegador) e pronto.
Onde o JavaScript é usado?
O JavaScript (JS) é usado em diversas plataformas. Todos os sites da web usam JavaScript. Como os navegadores são os compiladores dessa linguagem, ela permite melhor interação do usuário com a aplicação ou site que estiver usando.
O foco dela, é exatamente esse, melhorar a usabilidade e facilitar a vida do usuário.
Temos alguns exemplos de como o JavaScript facilitou o uso da web:
- Ele proporcionou o AJAX.
- O JS tornou sites interativos através dos eventos, cliques do mouse, arraste do mouse, redimensionamento da janela do navegador, etc.
- Ele faz validações em formulários sem a necessidade de submetê-los.
- O JS te possibilita a criação de jogos utilizando apenas CSS, HTML e o JavaScript.
- Possibilita a criação de sistemas One Page, ou seja, uma página apenas.
- Saber o dispositivo que esta acessando sua aplicação.
Enfim, o JavaScript possibilita diversas funcionalidades legais, basta apenas ser criativo e entender como a linguagem funciona e pelo o que ela é responsável e para isso, o encontre seu código irá lhe ajudar.
Como o JavaScript funciona
O JavaScript funciona como falamos, no front-end, mas, o que é front-end?
Front-end é toda aplicação que roda no usuário final, ou seja, tudo aquilo que o usuário enxerga é o front-end. Se você pode manipular esses dados na tela final, isso quer dizer manipular o front-end. Em JavaScript chamamos isso de DOM (Document object model).
Como o JavaScript foi desenvolvido para uso nos navegadores e web-sites, ele não precisa de compilador.
Nós podemos programar o que desejarmos usando apenas o navegador. Um bom exemplo é, aperte ctrl + shift + i e clique em “Console”. Se você digitar qualquer comando JavaScript nesse console do navegador, ele irá interpretar e lhe retornará os resultados. Você inclusive pode manipular objetos, ou seja, o DOM de qualquer site usando o console do navegador.
Lembre-se: Manipular o DOM do site, significa que você esta alterando apenas o front-end do site no seu computador.
Ou seja, você não esta fazendo um trabalho de hacking, apenas esta usando o DOM localmente, pois, não é assim que ele foi projetado?
Onde programamos em JavaScript?
O JavaScript pode ser programado desde um bloco de notas até editores de código como o Visual Studio.
Isso por que precisamos que o navegador leia ele, e para isso, ele precisa ser lido em uma página .html para que o navegador possa interpretar.
HTML e JavaScript
Ambas linguagens andam de mãos dadas, a diferença, é que o HTML é uma linguagem de marcação sem lógica, já o JavaScript é uma linguagem de programação, logo, possui lógica.
O JavaScript precisa ser escrito em uma página HTML diretamente ou não. Como assim?
Quando escrevemos diretamente o JavaScript, estamos colocando o código completo no HTML, mas quando estamos colocando esse código indiretamente, quer dizer que estamos criando um arquivo .js e chamando esse arquivo em nosso código HTML, com isso ele executa.
No final, nosso JS tem que estar no nosso .html para ser executado.
Arquivos .js
Como falamos, há duas formas de você chamar o JavaScript. Escrevendo-o diretamente no HTML entre as tags <script></script>, ou chamando-o através do parâmetro src. Exemplo:<script>console.log('Meu primeiro script em JS')</script>
ou<script src="./minha-pasta/meu-arquivo.js"></script>
Nas duas maneiras o script funciona.
Recomendamos que você sempre use o .js separado de seu arquivo .html, mas, isso não é regra inquebrável, tudo depende do que você estiver fazendo.
Onde devo chamar meu JS no HTML?
Você deve chamar seu JS dentro da tag <head> do HTML ou dentro da tag <body>.
Você vai saber quando chamar cada um depois de ler alguns artigos, pois, não é errado chamar no body nem no head, a única resposta para isso é por que você irá chamá-lo em tal local.
Por exemplo, quando chamamos qualquer script ou tag dentro da tag <head> do HTML, estamos falando para o navegador (browser) que ele deve carregar aquilo antes de exibir o documento (tag <body>).
Já quando colocamos a chamada ou o script dentro da tag <body>, estamos falando para o navegador que ele deve carregar o script ou a tag, na ordem em que ele foi posto, ou seja, se ele vier na metade do seu <body> ele será carregado na metade dele, se vier no final dele, o navegador irá carregar todo documento para no final carregar o script.
Veja o exemplo em HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu primeiro script</title>
</head>
<body>
<script>console.log('Meu script');</script>
</body>
</html>Eventos no JavaScript
Os eventos do JavaScript são eventos do usuário na página que esta sendo executado o JavaScript, portanto, enquanto você estiver nessa página, o JavaScript programado desse site pode captar o cursor do seu mouse, adicionar eventos perante o que você faz com o navegador e até pelos links que você clica, ou seja, com o JavaScript podemos pegar eventos realizados no navegador (dentro da janela do site) (window) e trabalhar com eles.
Já imaginou como seria legal se a cada vez que seu usuário passa-se o mouse em cima de uma imagem, você enviar uma mensagem para ele através do navegador? Ou mandar aparecer um texto?
Exemplo:
A imagem acima é um bom exemplo do JavaScript funcionando. Quando colocamos o mouse em cima de algum elemento no HTML, o JavaScript constrói uma tag em HTML com uma mensagem. Atualmente chamamos isso de efeito tooltip, que é basicamente isso.
Logo, podemos controlar vários eventos e conectá-los a outras funções, como mudar as cores de uma div ao acontecer algo.
JavaScript no Back-End
Hoje já podemos programar o JavaScript no back-end, também conhecido como NodeJS. O nome é devido a maneira que foi criado essa solução. O programador usou uma funcionalidade nativa do Google Chrome chamada engine v8 para permitir que extensões em .js fossem executadas no servidor através dessa engine. Em outras palavras, ele aproveitou os navegadores que já possuíam toda arquitetura programada para o JavaScript e aproveitou essa arquitetura no back-end. Bastante criativo e experto!
JavaScript no Desktop
Como o JavaScript foi implementado com sua engine nos servidores, pessoas criativas pensaram:
Por que não usamos o navegador que já interpreta o JavaScript, como ambiente para rodar programas desktop?
E isso deu origem ao ElectronJS, que é uma maneira de você criar programas nativos desktop com o JavaScript usando um navegador. Claro, o navegador é de código fonte aberto e modificado para isso.
JavaScript nos Aplicativos Mobile
Hoje também há bibliotecas feitas para se criar aplicativos Mobile com o JavaScript. A mais famosa e primeira é o React Native. Foi criado pelo Facebook para fazer aplicativos Mobile com o JavaScript.
Bibliotecas e frameworks em JS
React JS
Com isso, você já esta pronto para começar a codar em JavaScript! Nossos próximos artigos serão sobre os primeiros passos nesse universo do JavaScript.
ReactJS é uma biblioteca lançada pelo Facebook para tratar melhor e mais rápido de construções do DOM e administrar seus eventos. Sua característica principal é a criação de um DOM virtual cujo é formulado para depois ser rende rizado o HTML. É utilizada no novo editor do wordpress, o Gutenberg.
Vue JS
Vue JS é uma biblioteca criada como o ReactJS, a diferença é que ele interfere diretamente no HTML, enquanto o React JS não. É bastante utilizada com o framework Laravel em PHP.
jQuery
jQuery é uma biblioteca criada com o fim de otimizar os códigos em JavaScript e aumentar a velocidade de produção. Isso foi bem efetivo. Atualmente é utilizado nativamente pelo Bootstrap css e pelo wordpress em suas funções.
Como vimos, as aplicações do JavaScript aumentaram bastante, e com isso, várias bibliotecas e frameworks foram criados. Citarei os principais:
Aprenda o JavaScript com os artigos
Gostou do artigo? Deixe sua dúvida ou comentário