Curso de JavaScript — Parte 1/3
Introdução de JavaScript — O Início
Clique aqui para ir para a parte 2!
Clique aqui para ir para a parte 3!
O que é JS?
JavaScript é uma linguagem de programação que ajuda a manipular informações na WEB.
História
O Javascript foi criado em apenas 10 dias, em maio de 1995, por Brendan Eich a serviço da Netscape. de início a linguagem se chamava Mocha, e depois passou a se chamar LiveScript. logo depois a Netscape recebeu uma licença de marca registrada da Sun e mudou o nome novamente para JavaScript, usando de uma estratégia de marketing para popularizar a linguagem, porém acabou confundindo muitas pessoas fazendo-as a pensar que o javascript era baseado em java. Em 1997, JavaScript foi submetido à ECMA (European Computer Manufacturers Association) para criação de uma especificação, O nome JavaScript já era patenteado pela Sun Microsystems (hoje Oracle) e não poderia ser usado. Portanto, o nome composto por ECMA e JavaScript foi usado, resultando em ECMAScript. Mesmo com esse nome, até hoje a linguagem é conhecida carinhosamente por JavaScript. ECMAScript só é usado para se referir às versões da linguagem.
Vanilla JS
Existem diversos frameworks js, e a cada dia surge algo novo, por esse motivo fizeram uma pequena brincadeira criando um ‘framework’ chamado vanilla.js, que no fim nada mais é do que javascript puro, e mostrando que nem sempre o melhor caminho é usar uma biblioteca ou framework, as vezes criando a funcionalidade puramente com o javascript, é bem mais simples e rápido.
A piada
Existe um site que denomina o Vanilla JS como um framework, apresentando como leve e rápido.
Vanilla JS é um framework multiplataforma rápido, leve para construir aplicativos JavaScript incríveis e poderosos.
Em inglês existe a expressão “Vanilla alguma coisa”, é usado para se referir a versão mais comum de alguma coisa.
Pois o sabor baunilha (vanilla) é o mais comum entre biscoitos e doces.
Ferramentas
Navegadores:
Editores:
Adicionando JavaScript na página
O JavaScript é inserido na sua página usando o elemento <script>, ele tem duas formas de ser inserido, de forma interna e de forma externa.
JavaScript interno
O JavaScript interno é usado dentro da tag <script>, da seguinte forma:
<script>alert(‘ok’);</script>
JavaScript externo
Para usar de forma externa, também usamos a tag <script> porém adicionamos o atributo src para definir aonde se encontra nosso arquivo de script.
<script src="script.js”></script>Estratégias para o carregamento de scripts
Existem diversos problemas envolvendo o carregamento de scripts na ordem correta. Infelizmente, nada é tão simples quanto parece ser! Um problema comum é que todo o HTML de uma página é carregado na ordem em que ele aparece. Se você estiver usando Javascript para manipular alguns elementos da página, seu código não irá funcionar caso o JavaScript for carregado e executado antes mesmo dos elementos HTML estarem disponíveis, temos algumas soluções para isso.
A primeira forma é adicionar um evento que só executa após todo o documento está carregado.
document.addEventListener("DOMContentLoaded", function() {});
Isso é um event listener (ouvidor de eventos), que ouve e aguarda o disparo do evento “DOMContentLoaded” vindo do browser, evento este que significa que o corpo do HTML está completamente carregado e pronto. O código JavaScript que estiver dentro desse bloco não será executado até que o evento seja disparado, portanto, o erro será evitado.
Usando o Javascript externo, podemos usar um recurso moderno do JavaScript para resolver esse problema: Trata-se do atributo defer, que informa ao browser para continuar renderizando o conteúdo HTML uma vez que a tag <script> foi atingida.
<script src="script.js" defer></script>Neste caso, ambos script e HTML irão carregar de forma simultânea e o código irá funcionar.
Nota: No caso externo, nós não precisamos utilizar o evento DOMContentLoaded porque o atributo defer resolve o problema. Não utilizamos defer como solução para os exemplos internos pois defer funciona apenas com scripts externos.
Uma solução à moda antiga para esse problema era colocar o elemento script bem no final do body da página (antes da tag </body>). Com isso, os scripts iriam carregar logo após todo o conteúdo HTML. O problema com esse tipo de solução é que o carregamento/renderização do script seria completamente bloqueado até que todo o conteúdo HTML fosse analisado. Em sites de maior escala, com muitos scripts, essa solução causaria um grande problema de performance e deixaria o site lento.
Assíncrono vs Adiado (async e defer)
O atributo async (Assíncrono)
O atributo async é usado para indicar ao navegador que o script pode ser executado assincronamente. A análise do HTML não será pausada quando encontrar esse elemento script — sua requisição ocorrerá paralelamente e sua execução pode acontecer a qualquer momento em que o script seja completamente carregado.
<script async src="script.js">Esse atributo só está disponível para script localizados em arquivos externos. Quando um script externo contém esse atributo, o arquivo pode ser requisitado enquanto o HTML está sendo analisado. Assim que terminado, a análise do HTML é pausada e a execução do script é realizada.
O atributo defer (Adiado)
O atributo defer diz ao navegador para executar o script apenas quando a análise do HTML estiver finalizada.
Assim como ocorre com o async, com o defer o download do script é feito de forma assíncrona, mas sua execução ocorre apenas quando todo o processo de renderização estiver concluído, como o próprio nome desse atributo informa (to defer=adiar), ele “adia” algo, que no caso se refere a execução do script.
<script defer src="script.js">O script será requisitado assincronamente, seu download será completado e, apenas quando a análise do documento HTML estiver finalizada, ele será executado. Mesmo se o download completo do script acontecer antes da análise completa do HTML, ele só será executado depois.
Caso você venha a ter múltiplos elementos script com o atributo defer.
<script defer src=“jquery.js"><script defer src=“bootstrap.js">
Eles serão requisitados paralelamente e executados na sequência declarada.
Execução normal, async ou defer?
Depois de entendermos e analisarmos cada situação, fica a pergunta: quando devemos usar execução normal, async ou defer? Como sempre, depende da situação! E temos outros pontos a considerar também!
Onde o elemento script está localizado?
O elemento script com async e defer fazem mais diferença quando eles não estão localizados no final do documento HTML. A análise de documentos HTML acontece da esquerda para direita, de cima para baixo, começando com o primeiro elemento declarado até quando ele é fechado. Se algum script externo está localizado logo antes do elemento /body, torna-se redundante o uso dos atributos async e defer. Como a análise do documento já está quase completa naquele momento, esses elementos script não tem muito o que bloquear.
Esse script não depende de outros?
Se os scripts externos que você está carregando não dependem de outros arquivos e/ou não tem nenhuma dependência própria, o atributo async geralmente é bem útil. Como você não precisa se importar muito a que momento ele será executado, carregá-lo assincronamente é a opção correta!
Ordem de execução do JavaScript
Quando o navegador encontra um bloco de código JavaScript, ele geralmente executa na ordem, de cima para baixo. Isso significa que você precisa ter cuidado com a ordem na qual você coloca as coisas.
Lado do servidor vs Lado do cliente
Você pode também ouvir os termos lado do servidor (server-side) e lado do cliente (client-side), especialmente no contexto de desenvolvimento web. Códigos do lado do cliente são executados no computador do usuário — quando uma página web é visualizada, o código do lado do cliente é baixado, executado e exibido pelo navegador.
Códigos do lado do servidor, por outro lado, são executados no servidor e o resultado da execução é baixado e exibido no navegador. Exemplos de linguagens do lado do servidor populares incluem PHP, Python, Ruby, e ASP.NET. E JavaScript! JavaScript também pode ser usada como uma linguagem server-side, por exemplo, no popular ambiente Node.js.
Dinâmico vs Estático
A palavra dinâmica é usada para descrever tanto o JavaScript client-side como o server-side — essa palavra se refere a habilidade de atualizar a exibição de uma página web/app para mostrar coisas diferentes em circunstâncias diferentes, gerando novo conteúdo como solicitado. Código do lado do servidor dinamicamente gera novo conteúdo no servidor, puxando dados de um banco de dados, enquanto que JavaScript do lado do cliente dinamicamente gera novo conteúdo dentro do navegador do cliente, como criar uma nova tabela HTML com dados recebidos do servidor e mostrar a tabela em uma página web exibida para o usuário. Os significados são ligeiramente diferentes nos dois contextos, porém relacionados, e ambos (JavaScript server-side e client-side) geralmente trabalham juntos.
Uma página web sem atualizações dinâmicas é chamada de estática — ela só mostra o mesmo conteúdo o tempo todo.
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊Até mais! 😊😊
