Dev

JavaScript – Começando do jeito certo

O que é JavaScript?

JavaScript é uma linguagem de programação, que foi criada originalmente para rodar em navegadores. Na tríade do Front-end, a linguagem é responsável por interagir com o usuário (como mensagens de erro e outros), sem a necessidade das informações irem até o servidor.

História do JavaScript

A história do JavaScript se confunde com a história dos navegadores. Eu não sei quantos anos você tem, mas quando tudo isso aqui era mato, nem existia Google Chrome.

A linguagem foi desenvolvida por Brendan Eich, quando ele trabalhava no Netscape. Só tem um detalhe, se chamava Mocha. Depois o nome foi mudado pra LiveScript. LiveScript foi lançado em 1995, junto com o Netscape 2.0.

Quando a Netscape adicionou suporte à Java (Applets) em seu navegador, ela mudou o nome da linguagem para JavaScript, e isso gera confusão até hoje. O Java tinha sido recém-lançado nessa época e tudo indica que foi uma baita estratégia de marketing. Mas isso gera uma confusão até hoje, e vamos esclarecer: JavaScript não é baseado em Java.

A linguagem bombou e a Microsoft, mais uma vez copiou a linguagem mas pra não ter problemas com copyright, usou o nome de JScript. Com um porém, não era apenas uma cópia, a Microsoft corrigiu alguns métodos do JavaScript, e incluiu o seu script no Internet Explorer 3.0, em 1996. JavaScript e JScript eram tão iguais, que muitas vezes eram confundidos, apesar da Microsoft sempre declarar que não era igual.

No fim de 1996 a Netscape informou que tinha submetido o Javascript para a ECMA.

Um instantinho pra te explicar o ECMA. European Computer Manufactures Association é uma associação dedicada a padronização de sistemas de informação. Várias linguagens são padronizadas pela ECMA, como C#, Eiffel, CLI e outras.

Portanto, oficialmente ECMAScript é a especificação do Javascript. Por isso, atualmente falamos em ES6, ES7 e outros. São as versões da especificação ECMA.

Em 2009 foi criado o projeto CommonJS. O objetivo desse projeto é especificar uma biblioteca padrão de desenvolvimento JavaScript fora do navegador. E aí amigo, o mundo é nosso.

V8

Um dos responsáveis, na minha humilde opinião, pela popularização do JavaScript e pela criação de inúmero frameworks, é o Interpretador V8 que foi lançado junto com o Google Chrome 2. E porque ele é um dos responsáveis, porque ele acelerou o desempenho da aplicação compilando todo o código para o formato nativo de máquina, antes de executá-lo, ou seja, ele roda com a mesma velocidade de um código binário compilado. Se você não entendeu muita coisa, apenas entenda que ficou muito rápido. Opera e Firefox atualmente tem bons interpretadores também, até o Edge. Mas o lançamento de V8 ali em 2008/2009 foi um divisor de águas.

Principais conceitos

Tipagem

JavaScript é uma linguagem não fortemente tipada. Tipagem refere-se as variáveis. A mesma variável pode ser uma string, depois um número e assim por diante. Se você aprendeu os conceitos de variáveis com as linguagens backend, isso pode até soar um pouco estranho para você, mas é comum entre as linguagens de script ter tipagem dinâmica.

Sintaxe

JavaScript tem os elementos de sintaxe de programação estruturada (if, while, switch), assim como C.

Objetos

Se eu pudesse resumir JavaScript num debate técnico eu diria algo como: é tudo objeto. JavaScript é quase toda baseada em objetos. Isso quer dizer que propriedades e seus valores podem ser adicionadas, mudadas e deletadas em tempo de execução em praticamente qualquer coisa em JavaScript.

Métodos/Funções

Em JavaScript método == função. Não tem diferença entre definir um método ou uma função. As funções são objetos que tem propriedades e métodos que podem ser passados como argumentos, atribuídos a variáveis ou ainda retornadas.

Protótipos

A linguagem não usa classes, mas usa protótipos para fazer herança. Dá pra usar muitas características de POO (Programação Orientada a Objetos), criando classes com protótipos.

Como começar?

Existem várias formas de inserir JavaScript nas nossas páginas HTML. Uma forma simples, mas não aconselhada é usar a tag script e s seus comandos dentro do próprio HTML. Bora colocar a mão na massa?

Passo 1

Vamos criar uma página HTML simples com o seguinte código. Salve onde você quiser, e abra no seu navegador favorito. Aqui entre nós, use o Chrome.

Passo 2

Temos duas formas de inserir o script na página, de forma bem similar ao CSS. Uma é o script inline. Vamos começar com essa forma. Antes do fechamento da tag body, criaremos a tag script, com uma pequena ação interna.

It’s a magic!

Passo 3

Mas como boa prática, vamos separar nossos arquivos por camadas. A página HTML é pra ter apenas a estrutura da página, não é pra ter também as ações, validações e outros. Então, de forma geral, sempre separe os arquivos. Bora fazer isso?

Crie um arquivo com o nome de script.js. Nele cole todo o conteúdo que colocamos dentro da nossa tag script.

Por último, volte ao html, e vamos alterar a tag script, para chamar um arquivo externo.

Bom, JavaScript é bem mais poderoso do que apenas escrever um texto na página. Então, pra que eu possa te ajudar mais, criei uma série – que se inicia com esse artigo, e vamos evoluindo os conhecimentos aos poucos.

Se você quiser dar uma olhada já num exemplo que fiz anteriormente para capturar propriedades de elementos na página e manipular outros elementos, dá uma olhada aqui.

Qualquer dúvida, deixa nos comentários!

André Felizardo

Share
Published by
André Felizardo

Recent Posts

Blockchain & Cripto

Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…

3 semanas ago

Automatize o deploy de uma aplicação React com Github Actions e FTP

O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…

10 meses ago

Github Satellite 2020 – Muitas novidades

Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…

4 anos ago

Web Components – Guia Geral

Neste guia veremos o que são web components, quando usar, sua estrutura e também um…

4 anos ago

Tipos de Frontend

A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…

4 anos ago

SVG – Guia definitivo

O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…

4 anos ago