O que é JavaScript e como funciona?

Propaganda

JavaScript tornou-se um item básico no desenvolvimento moderno da web. Essa linguagem poderosa evoluiu para uma ferramenta essencial para qualquer desenvolvedor da Web entender.

O JavaScript possui recursos especiais que o diferenciam das linguagens de programação tradicionais. Vamos descobrir o que é, como funciona e o que você pode fazer com isso. Vamos dividir.

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çada em junho de 2018.

JavaScript trabalha com HTML e CSS para criar aplicativos ou páginas da web. O 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 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 pelo JavaScript, oferecendo mais funcionalidades.

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

Blocos de construção de aplicativos da Web

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

• HTML é uma linguagem de marcação que cria o esqueleto da 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 são escritos 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 desenhos coloridos.
• O terceiro elemento é JavaScript. HTML e CSS criam a estrutura, mas eles não fazem nada a partir daí. JavaScript cria atividade dinâmica no 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 trabalham em harmonia entre si para criar aplicativos em grande escala. Seria uma boa ideia saiba mais sobre HTML e CSS Aprenda HTML e CSS com estes tutoriais passo a passoCurioso sobre HTML, CSS e JavaScript? Se você acha que tem talento para aprender a criar sites do zero - aqui estão alguns ótimos tutoriais passo a passo que vale a pena tentar. consulte Mais informação se você não estiver totalmente confortável com eles.

Como o JavaScript funciona?

Antes de escrever o JavaScript, é importante saber como funciona. Há duas partes importantes a aprender: Como o navegador da Web funciona e o DOM (Document Object Model).

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

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

O HTML e o CSS são reunidos pelo DOM para criar a página da Web primeiro. Em seguida, o mecanismo JavaScript dos navegadores carrega arquivos JavaScript e código embutido, mas não executa o código imediatamente. Ele aguarda o HTML e CSS concluir o carregamento.

Feito isso, o JavaScript é executado na ordem em que o código foi escrito. Isso resulta no DOM sendo atualizado pelo código JavaScript e renderizado pelo navegador.

A ordem aqui é importante. Se o JavaScript não esperasse o HTML e o CSS terminarem, não seria possível 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 comum como o Python. Esses incluem:

• Declarando variáveis Como declarar variáveis ​​em JavaScriptPara começar o JavaScript, você precisa entender as variáveis. Aqui estão três maneiras de declarar variáveis ​​em JavaScript. consulte Mais informação .
• Armazenando e recuperando valores.
• Definir e chamar 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.

Atenção: Desde a JavaScript é uma linguagem tão poderosa JavaScript e desenvolvimento da Web: usando o modelo de objeto de documentoEste artigo apresentará o esqueleto do documento com o qual o JavaScript trabalha. Tendo um conhecimento prático desse modelo de objeto de documento abstrato, é possível escrever JavaScript que funcione em qualquer página da web. consulte Mais informação , também é possível gravar malware, vírus e hacks no navegador para infligi-los aos usuários. Eles vão desde roubar cookies do navegador, senhas, cartões de crédito até baixar vírus no seu computador.

Usando JavaScript

Vamos ver alguns princípios básicos 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 ​​no seu código.

deixe num = 5; deixe myString = "Olá"; 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

deixe myArray = [1,2,4,5]; deixe stringArray = ["olá", "mundo"]; 

Funções

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

função addNumbers (num1, num2) { retornar num1 + num2; } >> addNumbers (10,5); >> 15.

rotações

O JavaScript pode executar loops para iteração, loops como para loops e enquanto loops.

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

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

Comentários

// Escrevendo um comentário. 

/ * Escrevendo um comentário com várias linhas. Você pode usar quantas linhas desejar. para dividir 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 o roteiro Tag HTML. Dependendo dos seus requisitos, você pode usar um dos seguintes métodos.

• Carregue um arquivo JavaScript externo em uma página da Web da seguinte maneira:
• Você pode especificar o URL completo se o javascript for de um domínio diferente da página da Web da seguinte maneira:
• JavaScript pode ser incorporado diretamente no HTML. Aqui está um.

Além desses métodos, existem maneiras de carregar o código JavaScript sob demanda. De fato, existem estruturas dedicadas ao carregamento e execução de 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.

Trechos de código JavaScript de amostra

Aqui estão alguns exemplos simples de código JavaScript para ilustrar como é usado nas páginas da web. Estes são exemplos de código que funcionam com o DOM.

• O seguinte seleciona todos negrito elementos no documento e define a cor do primeiro como vermelho.

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

• Deseja alterar a imagem em um img tag? A seguir, associa um manipulador de eventos para o clique evento de um botão.

  Alterar imagem

• Atualize o conteúdo do texto de um parágrafo (p) elemento? Colocou o innerHTML propriedade do elemento, como mostrado:

  Olá Mundo
  Clique em mim

Esses exemplos de código oferecem apenas um vislumbre do que você pode fazer usando JavaScript em sua página da web. tem muitos tutoriais que podem ensinar como codificar Brinde: Aprenda a codificar com 27 horas de tutoriais em vídeoO Ultimate Coding Bundle, que inclui cinco cursos em vídeo e 27 horas de instrução premium, é GRATUITO agora. consulte Mais informação para você começar. Você pode experimentá-lo em qualquer página da web, mesmo nesta! Abra seu console e experimente algum código JavaScript.

Agora você sabe o que o JavaScript faz

Felizmente, esta introdução trouxe algumas informações sobre o JavaScript e deixa você animado com a programação da web. Você pode recapitular tudo nossa útil planilha de JavaScript A Folha de Dicas Ultimate em JavaScriptReceba uma atualização rápida dos elementos JavaScript com esta folha de dicas. consulte Mais informação . Há muito mais para aprender sobre JavaScript. Quando você se sentir mais confortável, por que não tentar Aprenda a usar o modelo de objeto de documento? Você também pode estar interessado em aprender sobre o TypeScript O que é o TypeScript e por que os desenvolvedores devem experimentá-lo?Encontrando JavaScript difícil de se adaptar depois de aprender outra linguagem de programação? Veja como o TypeScript pode ajudá-lo a mudar. consulte Mais informação .