O que é JavaScript e como funciona?

Se você está aprendendo desenvolvimento web, então você precisa conhecer JavaScript e como ele funciona com HTML e CSS.

Portanto, o JavaScript tornou-se um grampo do desenvolvimento web moderno. Dessa forma a linguagem poderosa se tornou uma ferramenta essencial que qualquer desenvolvedor web pode entender.

Sendo assim, o JavaScript possui recursos especiais que o diferenciam das linguagens de programação tradicionais. Vamos mergulhar no que é, como funciona e o que você pode fazer com ele. Vamos decompô-lo.

O que é JavaScript?

JavaScript é uma linguagem de script para a web. É uma linguagem interpretada, o que significa que você não precisa de um compilador como C ou C++ para traduzir seu código. O código JS é executado diretamente no navegador da web.

A versão mais recente da linguagem é ECMAScript 2018, lançada em junho de 2018.

JavaScript funciona com HTML e CSS para criar aplicativos da web ou páginas da web. JavaScript é suportado pela maioria dos navegadores modernos, como Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. A maioria dos navegadores móveis para Android e iPhone agora também suporta JS.

JavaScript controla elementos dinâmicos de páginas da web. Funciona em navegadores web e, mais recentemente, servidores web. JavaScript também suporta interfaces de programação de aplicativos (APIs) que fornecem mais funcionalidade.

É um pouco mais fácil entender como todo JavaScript funciona quando você entende como funciona a programação web, então vamos aprender mais.

Blocos de construção de aplicativos da Web

Três componentes para construir sites e aplicativos: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) e JS. Todos têm um papel na criação de aplicativos da web.

• HTML é uma linguagem de marcação para criar o esqueleto de uma página da web. Todos os parágrafos, seções, imagens, títulos e texto são escritos em HTML. O conteúdo aparece no site na ordem em que está escrito em HTML.
• CSS controla o estilo e outros aspectos do layout. CSS é usado para criar designs de sites criando cores, fontes, colunas, bordas e muito mais. Ele transforma um site de elementos de texto simples em um design colorido.
• O terceiro elemento é JavaScript. HTML e CSS criam estrutura, mas não fazem nada a partir daí. JavaScript cria atividades dinâmicas em seu aplicativo. O script JavaScript controla a funcionalidade quando o botão é clicado, como o formulário de senha é validado e como a mídia é controlada.

Essas três partes se coordenam para criar aplicativos de grande escala. Se você não estiver confortável com HTML e CSS, é melhor aprender mais sobre HTML e CSS.

Como o JavaScript funciona?

Antes de escrever JS, é importante entender como ele funciona nos bastidores. Há duas partes importantes para aprender: como os navegadores da Web funcionam e o Document Object Model (DOM).

Um navegador da Web carrega uma página da Web, analisa o HTML e cria o que é chamado de Document Object Model (DOM) a partir do conteúdo. O DOM fornece visualizações de páginas da Web em tempo real para seu código JS.

O navegador obterá tudo vinculado ao HTML, como imagens e arquivos CSS. As informações CSS vêm do analisador CSS.

HTML e CSS são reunidos pelo DOM para criar a página da web primeiro. O mecanismo JS do navegador carrega o arquivo JS e insere o código, mas não executa o código imediatamente. Ele espera que o HTML e o CSS terminem de carregar.

Feito isso, o JS será executado na ordem em que o código foi escrito. Isso faz com que o DOM seja atualizado pelo código JS e renderizado pelo navegador.

A ordem aqui é importante. Se o JS não esperar que o HTML e o CSS terminem, é impossível alterar os elementos DOM.

O que posso fazer com JavaScript?

JavaScript é uma linguagem de programação completa que pode fazer a maior parte do que linguagens regulares como Python podem fazer. Esses incluem:

• Declarando variáveis.
• Armazenar e recuperar valores.
• Definindo e invocando funções, incluindo funções de seta.
• Definindo objetos e classes JavaScript.
• Carregando e usando módulos externos.
• Escrevendo manipuladores de eventos que respondem a eventos de clique.
• Escrevendo código do servidor.
• E muito mais.

Aviso: Como o JavaScript é uma linguagem tão poderosa, também é possível escrever malware, vírus e hacks de navegador para impô-los aos usuários. Eles vão desde o roubo de cookies do navegador, senhas, cartões de crédito até o download de vírus para o seu computador.

Usando JavaScript

Vejamos alguns conceitos básicos de JavaScript com exemplos de código.

Declarar variável

JavaScript é tipado dinamicamente, o que significa que você não precisa declarar o tipo de uma variável em seu código.

let num = 5;
let myString = "Hello";
var interestRate = 0.25;

Operadores

Adição

12 + 5
>> 17

Subtração

20 - 8
>> 12

Multiplicação

5 * 2
>> 10

Divisão

50 / 2
>> 25

Módulo

45 % 4
>> 1

Matrizes

let myArray = [1,2,4,5];
let stringArray = ["hello","world"];

Funções

JavaScript pode escrever funções, aqui está uma função simples que adiciona números.

function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15

Rotações

JavaScript pode executar loops para iteração, loops como loops for e while.

for(let i = 0; i < 3; i++){ 
console.log("echo!"); 
} 
>> echo!
>> echo!
>> echo!

let i = 0;
while(i < 3) { 
console.log("echo!");
i++; 
} 
>> echo!
>> echo!
>> echo!

Comentários

// Escrevendo um comentário

/*Escrevendo um comentário de várias linhas
Você pode usar quantas linhas quiser
para quebrar o texto e tornar os comentários mais legíveis
*/

Em uma página da Web

A maneira mais comum de carregar JavaScript em uma página da Web é usar a tag HTML de script. Dependendo de seus requisitos, você pode usar um dos seguintes métodos.

Carregue um arquivo JavaScript externo em uma página da Web da seguinte maneira:

<script type="text/javascript" src="/path/to/javascript"></script>

Você pode especificar o URL completo se o javascript for de um domínio diferente da página da web da seguinte forma:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

JavaScript pode ser embutido diretamente no HTML. Aqui está um:

<script type="text/javascript">
alert("A página foi carregada");
</script>

Além desses métodos, também existem maneiras de carregar código JavaScript sob demanda. Na verdade, existem frameworks dedicados a carregar e executar módulos JavaScript e resolver dependências apropriadas em tempo de execução.

Esses são tópicos mais avançados, agora você está aprendendo o básico.

Exemplo de trecho de código JavaScript

Aqui estão alguns exemplos de código JavaScript simples para ilustrar como ele pode ser usado em uma página da web. Estes são exemplos de código usando o DOM.

O seguinte seleciona todos os elementos em negrito no documento e define a cor do primeiro para vermelho.

var elems = document.getElementsByTagName('b');
elems[0].style.color = 'red';

Quer mudar a imagem em uma tag img ? O seguinte associa um manipulador de eventos para o evento click de um botão.

<img id="myImg" src="prev-image.png">
<button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button>

Atualizar o conteúdo de texto de um elemento de parágrafo ( p )? Defina a propriedade innerHTML do elemento como mostrado:

<p id="first-para"Olá mundo!</p>
<button onclick="document.getElementById('first-para').innerHTML = "Bem vindo ao JS"'>Clique aqui</button>

Esses exemplos de código dão apenas uma ideia do que você pode fazer com JavaScript em suas páginas da web. Existem muitos tutoriais que ensinam como escrever código para ajudá-lo a começar. Você pode experimentá-lo em qualquer página da web, mesmo esta! Abra seu console e experimente algum código JavaScript.

Agora você sabe o que o JavaScript faz

Portanto, eu espero que esta introdução tenha inspirado o JavaScript e deixado você empolgado com a programação da web. Você pode revisar tudo em nossa útil folha de dicas de JavaScript.

Leia também: Como Instalar o WordPress no PC (XAMPP)