NOTÍCIAS TECNOLOGIAProgramação

O que é JavaScript e como funciona?

Se você está aprendendo desenvolvimento web, aqui está o que você precisa saber sobre JavaScript e como ele funciona com HTML e CSS.

JavaScript se tornou um elemento básico no desenvolvimento da web moderno. Esta linguagem poderosa evoluiu para uma ferramenta essencial para qualquer desenvolvedor da web entender.

JavaScript possui recursos especiais que o tornam diferente das linguagens de programação tradicionais. Vamos investigar o 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 não precisa de um compilador para traduzir seu código como C ou C ++. O código JavaScript é executado diretamente em um navegador da web.

A versão mais recente do idioma é ECMAScript 2018, lançado em junho de 2018.

JavaScript funciona com HTML e CSS para construir aplicativos ou páginas da web. O JavaScript é compatível com a 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 oferece suporte para JavaScript.

JavaScript controla os elementos dinâmicos das páginas da web. Funciona em navegadores da web e, mais recentemente, também em servidores da web. As interfaces de programação de aplicativos (API) também são suportadas por JavaScript, oferecendo mais funcionalidades.

Entender todas as maneiras como o JavaScript funciona é um pouco mais fácil quando você entende como funciona a programação da web, então vamos aprender mais.

Blocos De Construção De Aplicativos Da Web

Existem três componentes que criam sites e aplicativos: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) e JavaScript. Cada um tem uma função na criação de um aplicativo web.

  • HTML é uma linguagem de marcação que cria o esqueleto da página da web. Todos os parágrafos, seções, imagens, cabeçalhos e texto são escritos em HTML. O conteúdo aparece no site na ordem em que foi escrito em HTML.
  • CSS controla o estilo e os aspectos adicionais do layout. CSS é usado para criar o design do site, criando cores, fontes, colunas, bordas, etc. Leva o site de elementos de texto simples a designs coloridos.
  • O terceiro elemento é JavaScript. HTML e CSS criam a estrutura, mas não fazem nada a partir daí. JavaScript cria atividade dinâmica em seu aplicativo. O script em JavaScript é o que controla as funções quando os botões são clicados, como os formulários de senha são autenticados, como a mídia é controlada.

Todas as três partes funcionam em harmonia umas com as outras para criar aplicativos em grande escala. Seria uma boa ideia aprender mais sobre HTML e CSS se você não estiver totalmente familiarizado com eles.

Como Funciona O JavaScript?

Antes de escrever JavaScript, é importante saber como ele funciona nos bastidores. Há duas partes importantes para aprender sobre: ​​como funciona o navegador da web e o Document Object Model (DOM).

O navegador da web carrega uma página da web, analisa o HTML e cria o que é conhecido como Document Object Model (DOM) a partir do conteúdo. O DOM apresenta uma visualização ao vivo da página da web para o seu código JavaScript.

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

O HTML e o CSS são colocados juntos pelo DOM para criar a página da web primeiro. Em seguida, o mecanismo JavaScript do navegador carrega arquivos JavaScript e código embutido, mas não executa o código imediatamente. Ele espera que o HTML e o CSS terminem de carregar.

Feito isso, o JavaScript é executado na ordem em que o código é escrito. Isso resulta na atualização do DOM pelo código JavaScript e na renderização do navegador.

A ordem aqui é importante. Se o JavaScript não esperasse que o HTML e o CSS terminassem, ele não seria capaz de alterar os elementos DOM.

O Que Posso Fazer Com JavaScript?

JavaScript é uma linguagem de programação completa que pode fazer a maioria das coisas que uma linguagem normal como o Python. Esses incluem:

  • Declarando variáveis .
  • Armazenando e recuperando valores.
  • Definir e invocar funções, incluindo funções de seta .
  • Definição de objetos e classes JavaScript.
  • Carregando e usando módulos externos.
  • Escrever 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 infligir aos usuários. Isso vai desde o roubo de cookies do navegador, senhas e cartões de crédito até o download de vírus em seu computador.

Usando JavaScript

Vejamos alguns fundamentos do JavaScript com exemplos de código.

Declarando Variáveis

O JavaScript é digitado dinamicamente, o que significa que você não precisa declarar o tipo de suas variáveis ​​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

Arrays

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 loops.

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

// Writing a comment
/*Writing a multi-line comment
You can use as many lines as you like
to break up text and make comments more readable
*/

Em Uma Página Da Web

A maneira mais comum de carregar JavaScript em uma página da web é usar a tag HTML do 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 maneira:
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
  • JavaScript pode ser incorporado diretamente no HTML. Aqui está um
    <script type="text/javascript">
    alert("Page is loaded");
    </script>
    

Além desses métodos, existem maneiras de carregar código JavaScript sob demanda. Na verdade, existem estruturas dedicadas a carregar e executar módulos JavaScript com dependências adequadas resolvidas em tempo de execução.

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

Amostra De Snippets De Código JavaScript

Aqui estão alguns exemplos de código JavaScript simples para ilustrar como ele é usado em páginas da web. Estes são exemplos de código que funcionam com 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 de clique 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 do texto de um elemento de parágrafo ( p )? Defina a propriedade innerHTML do elemento conforme mostrado:
    <p id="first-para">Hello World</p>
    <button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button>
    

Esses exemplos de código oferecem apenas um vislumbre do que você pode fazer usando JavaScript em sua página da web. Existem muitos tutoriais que podem ensiná-lo a codificar para você começar. Você pode experimentar em qualquer página da web, mesmo nesta! Abra seu console e experimente alguns códigos JavaScript.

Agora Você Sabe O Que O JavaScript Faz

Esperançosamente, esta introdução trouxe alguns insights sobre JavaScript e deixou você animado com a programação da web. Você pode recapitular tudo em nossa útil folha de dicas de JavaScript . Há muito mais para aprender sobre JavaScript. Quando você se sentir mais confortável, por que não tentar aprender como usar o Document Object Model ? Você também pode estar interessado em aprender sobre o TypeScript .


Ajude-nos a crescer, visite SENASNERD no Twitter FacebookInstagram . e deixe o seu gosto, para ter acesso a toda a informação em primeira mão. E se gostou do artigo não se esqueça de partilhar o mesmo com os seus amigos.

SUBSCREVA-SE NO CANAL YOUTUBE SENASNERD

Mostar mais

Domingos Massissa

Fundador da SENASNERD. Acredito na tecnologia que torna a vida mais fácil para nós, que nos faz ir mais longe como humanos. Admirador de Jeff Bezos, Steve Jobs e Elon Musk. Cada artigo é uma parte de mim, na qual compartilho minha paixão por este mundo. Sou mais software do que hardware.

Deixe uma resposta

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.

Botão Voltar ao Topo
×

Ola !

Clique  abaixo para conversar no WhatsApp ou envie um email para  info@senasnerd.com

× Falé comigo. Em que posso ajudar ?