Olá, meu caro leitor. Estou iniciando como autor na Geek e assumi a missão de escrever sobre JavaScript.
Eu preferi começar a escrever sobre JavaScript para quem não conhece JavaScript.
Então, se você ainda não é um desenvolvedor JavaScript mas está considerando esta possibilidade, seja para Web ou Back-End, espero sinceramente que este artigo seja um bom ponto inicial para você.
Então, vamos começar pelo simples:
O que é a linguagem JavaScript?
A definição mais correta e completa que posso proferir é que JavaScript é uma linguagem de programação leve, dinâmica e interpretada, que permite que o programador utilize tanto a programação imperativa quanto a procedural, ou mesmo a orientada a objetos.
Ao contrário do que alguns novatos podem imaginar, o JavaScript não tem relação com linguagem de programação Java — a não ser uma estratégia de marketing que não vem ao caso agora — e uma similaridade de sintaxe, que foi utilizada para facilitar o aprendizado desta linguagem por programadores Java e C++.
Desta forma, estruturas if, try… catch, laços for e while funcionam de maneira semelhante no JavaScript e em Java e C++.
Bem, se você já programa em outra linguagem como Python ou Java não deve estar vendo nada demais nas características do JavaScript.
>>Leitura Recomendada:
Angular vs React vs Vue: conheça os três principais frameworks JavaScript
Então vamos a outra pergunta importante:
Por que é importante?
O linguagem surgiu como exclusivamente para programação de aplicações Web, mais especificamente dando dinamismo às páginas no lado cliente (navegadores).
Essa aplicação inicial por si só já é motivo suficiente para que qualquer pessoa interessada em desenvolvimento Web se dedique ao aprendizado do JavaScript.
Hoje ela é a linguagem mais utilizada para esse fim e é suportada por todos os grandes navegadores do mercado (Firefox, Chrome, Edge e Safari) sem que o usuário tenha que instalar nenhum plug-in para tal.
Com o tempo, o JavaScript ganhou espaço e hoje poder utilizada no desenvolvimento Back-End com Node.JS e Express.
Assim, um desenvolvedor JavaScript pode atuar como desenvolvedor Back-End ou mesmo Full-Stack, habilidades muito requisitadas no mercado de desenvolvimento moderno.
Ainda temos o CouchDB e o PouchDB, que são banco de dados que, além de uma API que retorna objetos JSON (JavaScript Object Notation), utilizam internamente o JavaScript.
Podemos utilizar funções JavaScript com o CouchDB para verificação de dados e criação de Views, por exemplo.
O PouchDB é inteiramente desenvolvido em JavaScript.
>>Leitura Recomendada:
Um guia para usar React JS
O JavaScript e o Mobile
O que me seduziu no mundo JavaScript foi a programação Mobile.
Exatamente! Com JavaScript é possível criar aplicações para dispositivos móveis. E estou falando de aplicações Nativas.
Libraries e Frameworks modernos de JavaScript como NativeScript e React Native convertem componentes desenvolvidos com XML, CSS e JavaScript em componentes nativos, gerando aplicações para Android e IOS altamente performáticas e bonitas.
Assim, um bom desenvolvedor JavaScript pode atuar como desenvolvedor Mobile, Desenvolvedor Front-End, Desenvolvedor Back-End ou mesmo como desenvolvedor Full-Stack e modelar os bancos de dados utilizados pelas suas aplicações.
Particularmente eu considero este um verdadeiro empoderamento do desenvolvedor JavaScript. E você?
A popularidade da linguagem JS
Bem, já que estou puxando a brasa pra sardinha do JavaScript, vamos falar da sua popularidade e mercado de trabalho.
O vídeo abaixo mostra o histórico de popularidade de diversas linguagens de programação no decorrer dos anos.
Veja que sempre se encontrou entre as linguagens de programação mais populares:
De acordo com a pesquisa do StackOverflow, o JavaScript encontra-se entre as cinco linguagens mais desejadas.
Entre as mais amadas encontramos o TypeScript, que é um superset do JavaScript desenvolvido pela Microsoft.
O código TypeScript, quando “compilado” é convertido em código JavaScript, que pode ser executado por qualquer Browser ou pelo Node.
Eu, particularmente, me encontro entre as pessoas que amam o TypeScript.
No índice TIOBE Programming Community, que mede popularidade das linguagens de programação pelo número de buscas relacionadas ao tema em mecanismos como Goggle, Yahoo e Bing, o JavaScript encontrava-se na oitava posição em 2018 e subiu para a sétima.
O GitHub Octoverse Report, demonstra uma liderança constante do JavaScript nos projetos que possuem o repositório nesta plataforma.
>>Leitura Recomendada:
Iniciando na programação? Leia nosso artigo com dicas para devs iniciantes.
Iniciando a Aprendizagem da linguagem
Se você ainda está acompanhando o artigo, acredito que minhas argumentações foram suficientes para despertar o desejo em você de aprender JavaScript.
Então, vamos começar a trabalhar? Eu preparei para você um ambiente online no StackBlitz.
Assim, teremos um ambiente comum para desenvolver nossas atividades.
Ambiente é simples, e é integrado ao github e ao Firebase, facilitando a publicação de Webapps.
Abaixo uma pequena referência das ferramentas que esta IDE oferece.
Se você abrir o Explorador de Arquivos, e observar o arquivo index.html, verá uma construção HTML simples:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <h1>JavaScript com a Geek</h1> <h2>Venha aprender com a gente</h2> <div id="app"></app> </html>
Nós utilizaremos a div app para exibir os resultados gerados pelo código JavaScript.
Princípios da Programação.
Bem, agora podemos iniciar a programação de fato.
E, apenas para não fugir ao padrão universal dos tutoriais de introdução à programação, vamos fazer um “hello”.
No arquivo index.js, que deve conter o código JavaScript da aplicação, vamos inserir o código:
let greeting = `<h3>Olá, Geek!</h3>`;
const appDiv = document.getElementById("app");
appDiv.innerHTML = greeting;
Se você já conhece alguma linguagem de programação, você pode tranquilamente deduzir o que este código está fazendo, mas talvez os iniciantes desejem alguma explicação:
Primeiro, criamos uma variável chamada greeting, que armazena um valor. Você pode perceber que esse “valor” é uma tag HTML com o texto “Olá, Geek!”.
Em seguida usamos document.getElementById(“app”) para obter uma referência do elemento de id app, que está no documento HTML.
No caso, é a div app. Por fim inserimos nesta div o conteúdo da variável greeting.
Pode parecer um pouco confuso, mas iremos clarear um pouco.
>>Leitura Recomendada:
Que tal ler o artigo que fizemos sobre as melhores linguagens de programações pro dev iniciante aprender?
Variáveis e Constantes
Variáveis e constantes são espaços de memória que o programador solicita para armazenar valores.
Quando solicitamos uma variável, estamos dizendo que os valores que serão armazenados ali podem ser modificados.
Quando solicitamos uma constante dizemos que este valor não deve ser alterado, e deve ser protegido de alterações acidentais.
Para criar uma variável utilizamos a instrução var ou let.
As diferenças entre estas instruções vão ficar para um outro artigo. Para a criação de uma constante, utilizamos const.
Então, no nosso programa anterior criamos uma variável com let greet e uma constante com const appDiv.
As constantes e variáveis podem armazenar valores do tipo: String (texto), Number (números), Boolean (verdadeiro e falso), Objetos, Null, Undefined e Symbol.
Vamos nos ater ao tipo string neste artigo.
>>Leitura Recomendada:
Meus desafios e evolução como fullstack
String
Strings são declaradas entre aspas ou apóstrofes.
Também podemos criar templates colocando o texto entre crases.
Abaixo declaramos 4 novas strings, curiosidade1, curiosidade2 e curiosidade 3. Então, criamos um template e inserimos as variáveis que criamos nele. Por fim, inserimos o template no documento HTML:
let greeting = `<h3>Olá, Geek!</h3>`;
let curiosidade1 = "O JavaScript foi criado por Brendan Eich, na Mozilla Corporation"
let curiosidade2 = "O JavaScript pode ser utilizado para manipulação dinâmica de documentos HTML"
let curiosidade3 = "Templates podem ser usados para inserir variáveis em strings, formando strings complexas"
let euSouUmTemplate = `
${greeting}
<p>Veja algumas curiosidades a respeito do JavaScript:</p>
<ul>
<li>${curiosidade1}</li>
<li>${curiosidade2}</li>
<li>${curiosidade3}</li>
</ul>
`
const appDiv = document.getElementById("app");
appDiv.innerHTML = euSouUmTemplate;
