A tecnologia está avançando rapidamente, e o desenvolvimento web não é diferente. Novas ferramentas e serviços estão constantemente surgindo para ajudá-lo a construir a próxima grande novidade. É ótimo ter tanta inovação no desenvolvimento web, mas pode ser muito intimidante para pessoas que estão começando na área e não têm ideia por onde começar.
Você provavelmente já ouviu termos como JavaScript, jQuery, React e assim por diante. Entender o JavaScript não é tão difícil quanto você pensa. Neste artigo, usarei uma abordagem muito amigável para iniciantes para explicar o que essas palavras significam, com um foco especial em como JavaScript está relacionado a jQuery e React, entre outras palavras-chave que você ouvirá com frequência como desenvolvedor front-end .
Antes de começarmos, quero mencionar nosso curso online gratuito sobre Como se tornar um desenvolvedor web. Acompanhe este curso e você aprenderá todas as principais tecnologias da Web, como HTML, CSS, JavaScript e PHP!
O que é uma linguagem de programação?
Se você é um iniciante absoluto no campo e nunca fez nenhum tipo de codificação antes, talvez nem tenha certeza do que é exatamente uma linguagem de programação.
Pense em um programa de computador como um conjunto de instruções sobre como fazer algo. Tenho certeza de que você viu como precisamos dar instruções passo a passo cuidadosas às crianças sobre como fazer algo pela primeira vez. O idioma para instruções pode ser inglês, chinês, hindi, espanhol ou qualquer outro. O ponto é que as crianças devem ser capazes de entender o que você quer que elas façam.
É um pouco mais complicado, mas os computadores são semelhantes às crianças dessa maneira. Você precisa dar a eles instruções muito específicas para fazer as coisas. A diferença é que os computadores precisam de muito mais instruções e sempre farão o que você mandar. As linguagens que são usadas para dar essas instruções aos computadores são chamadas de linguagens de programação.
Esta é apenas uma visão simplista do trabalho das linguagens de programação. Se você quiser entender a história e a teoria das linguagens de programação mais profundamente, sugiro que comece com este artigo.
Assim como as linguagens humanas, existem muitas linguagens de programação por aí. Todos eles têm seus próprios pontos fortes e fracos, tornando-os úteis para diferentes tarefas. Alguns são usados para desenvolver aplicativos para smartphones (como Swift e Java), alguns são usados para criar sites (como JavaScript e PHP), enquanto outros podem ser usados para criar sistemas operacionais (por exemplo C e C++). A lista continua.
O que é JavaScript?
Você pode criar um site inteiro usando apenas HTML bruto. Ele fornece instruções aos computadores sobre o que exibir em uma página da web. No entanto, HTML não é uma linguagem de programação. É uma linguagem de marcação, como sugere seu nome completo: HyperText Markup Language. Uma linguagem de marcação destina-se a descrever o conteúdo, não a fornecer instruções a um computador. Além disso, as páginas criadas apenas com HTML geralmente não são muito bonitas e não são muito interativas.
Você pode tornar um site mais visualmente atraente adicionando CSS que acompanha o HTML. CSS é usado para dizer aos navegadores como eles devem exibir uma parte específica do HTML. CSS também não é uma linguagem de programação adequada. Ele apenas informa ao computador como estilizar uma página da Web. Assim, o HTML diz ao computador o que exibir e o CSS diz como deve ser.
Perguntando o que é JavaScript? Entender o JavaScript não é tão difícil quanto você pensa. eu vou explicar JavaScript. Agora, JavaScript é uma linguagem de programação adequada. Ele é executado dentro do navegador da web ou no servidor e pode fazer muitas coisas. O JavaScript é usado por desenvolvedores da Web front-end para adicionar interatividade e funcionalidade a uma página da Web. Isso pode incluir coisas como mostrar notificações ou mensagens pop-up, responder a cliques do mouse, criar animações ou validar dados. Ele também pode ser usado para atualizar dinamicamente o conteúdo de uma página da Web após o carregamento. Também é usado no back-end, para armazenar e compartilhar dados. Como você vê, você não precisa de muitos termos técnicos para explicar JavaScript.
O que são jQuery, React, Angular e Vue.js?
Há uma boa chance de você ter ouvido um desses termos mencionados no contexto de desenvolvimento web. Eles são basicamente todas as bibliotecas e estruturas baseadas em JavaScript escritas para resolver um conjunto único de problemas.
Embora o JavaScript seja muito poderoso e possa ser usado para criar quase qualquer tipo de aplicativo baseado em navegador, pode ser demorado e repetitivo codificar todos os aplicativos do zero. É aí que entram as bibliotecas e estruturas — elas codificam alguns padrões comuns e práticas recomendadas para criar aplicativos. Ao criar uma plataforma para criar aplicativos, bibliotecas e estruturas JavaScript economizam muito tempo dos desenvolvedores.
Nesta seção, fornecerei uma breve explicação dessas bibliotecas e estruturas.
jQuery
jQuery tem sido uma das bibliotecas mais populares para JavaScript. Ajudou muitos programadores a acelerar o ritmo de seu desenvolvimento web. Não é a biblioteca mais avançada, mas cuida de muito trabalho que precisava ser feito pelos desenvolvedores front-end para fornecer uma experiência de usuário consistente em todos os navegadores. A biblioteca também vem com muitos métodos que tornam a travessia e manipulação do DOM (alterando o conteúdo de uma página da web) uma tarefa fácil.
As coisas melhoraram muito desde os primeiros dias do jQuery, mas a biblioteca ainda pode ser usada para fazer as coisas mais facilmente do que o JavaScript vanilla.
Reagir
O React também é uma biblioteca front-end gratuita e de código aberto baseada em JavaScript. Seu objetivo é construir interfaces de usuário interativas. Você pode usá-lo para criar aplicativos de página única.
Angular
Angular é um framework para construir aplicações web móveis e desktop. Semelhante ao React, seu objetivo é construir interfaces de usuário interativas e aplicativos de página única. Angular na verdade usa TypeScript, não JavaScript, mas as linguagens são muito semelhantes.
Vue.js
Essa é mais uma estrutura que você pode usar para criar aplicativos de página única e aplicativos da Web. É menor e mais fácil de aprender que o Angular.
Existem muitas outras bibliotecas e estruturas sobre as quais você pode ouvir falar de vez em quando. Se você está apenas começando, não se preocupe com todas essas bibliotecas e frameworks. Comece com o básico do JavaScript. Tente criar alguns projetos simples usando a linguagem sem depender de nenhuma biblioteca.
Aprender a linguagem em si é mais importante do que apenas pular diretamente em uma estrutura. Você sempre precisará ter uma compreensão profunda de JavaScript se decidir criar algo complicado, independentemente da biblioteca ou estrutura que estiver usando.
Como começar? Aprenda os conceitos básicos de JavaScript
É importante se familiarizar com o básico do JavaScript antes de começar a pensar em criar algo prático. Algumas das habilidades e conceitos podem parecer muito estranhos para você se você nunca fez nenhuma programação antes.
As coisas ficam fáceis quando você aprende pelo menos uma linguagem de programação, porque os conceitos fundamentais permanecem os mesmos. Idiomas diferentes podem introduzir novos recursos e eliminar algumas das limitações de outros idiomas, mas esses serão fáceis de aprender.
Se JavaScript é a primeira linguagem que você quer aprender, existem alguns conceitos básicos que você deve considerar entender. Eles geralmente serão úteis quando você começar a aprender outros idiomas também.
Variáveis
As variáveis são uma parte importante de todas as linguagens, não apenas do JavaScript. Você pode usá-los para armazenar e manipular informações sobre qualquer coisa, como acompanhar o número total de imagens em uma página da web.
Diferentes linguagens têm suas próprias regras sobre como declarar variáveis e onde o valor dessas variáveis permanecerá bem definido, etc. MDN fornece uma boa quantidade de informações sobre variáveis em suas séries introdutórias.
Matrizes
Digamos que você queira acompanhar o valor do src atributos de diferentes imagens em uma página da web. Criar um nome de variável exclusivo para armazená-los será propenso a erros e não terá muita utilidade. Você provavelmente vai querer manipulá-los como um grupo. É aqui que os arrays se tornam úteis.
Este tutorial MDN cobre muito bem os conceitos básicos de Arrays em JavaScript.
Cordas
Strings são usadas para armazenar informações textuais. Isso pode ser um único caractere ou frases e parágrafos inteiros. JavaScript lhe dá acesso a muitos métodos úteis, uma vez que sabe que você está armazenando uma string em uma variável.
Mais uma vez, o MDN ensinará a você todos os conceitos básicos de strings que você precisa saber.
Funções
Há algumas coisas que você gostaria de fazer repetidas vezes ao escrever código. Isso pode incluir coisas como criar tons mais escuros de uma determinada cor. O uso de funções ajuda a evitar a duplicação de código. Você escreve seu código e lhe dá um nome para chamá-lo novamente de diferentes lugares.
As funções também são descritas em detalhes no MDN. Há muitas coisas que você aprenderá lá sobre funções na página.
Aprenda JavaScript com um curso online gratuito
Se você quer se tornar um desenvolvedor web, este é o curso para você. Neste curso, o instrutor do Envato Tuts+, Jeremy McPeak, ensinará tudo o que você precisa saber para começar a desenvolver web. Você começará aprendendo como para criar páginas da web usando HTML, CSS e JavaScript.
Você aprenderá como fazer manipulação de DOM em jQuery e JavaScript vanilla, buscar dados JSON, usar transições CSS e muito mais.
Não apenas isso, mas você também aprenderá um dos linguagens fundamentais para desenvolvimento web back-end: PHP. Você aprenderá como configurar um servidor em seu próprio computador para desenvolvimento e como criar um aplicativo PHP simples para renderizar uma página da web. Ao final, seu aplicativo poderá receber dados do usuário e responder a eles.
Quer saber para que serve o JavaScript no web design? Você também pode conferir alguns de nossos tutoriais e recursos de aprendizado para começar:
É mais fácil do que você pensa!
Onde e como posso praticar minhas habilidades de JavaScript?
A melhor maneira de aprender qualquer habilidade é começar a fazê-lo. Isso é aplicável a qualquer nova linguagem de programação que você queira aprender também. Nesta seção, mostrarei as etapas que você pode seguir para levar suas habilidades de JavaScript para o próximo nível.
Console do navegador
Não há necessidade de instalar nenhum aplicativo especial para executar o JavaScript. Você pode começar a escrever e executar código JavaScript em seu navegador de desktop. Os navegadores de desktop vêm com um console JavaScript que você pode usar. Aqui está uma captura de tela do console do navegador no Firefox.
Ferramentas on-line
Escrever código em um console de navegador é ótimo se você está apenas começando, mas precisará escrever um código mais complicado em algum momento. Há uma variedade de sites com interfaces amigáveis que permitem que você escreva seu código JavaScript junto com HTML e CSS.
Dois populares que vêm à mente são JSFiddle e CodePen.
Lendo código de projetos de código aberto
Uma coisa incrível sobre programação é que as pessoas resolvem problemas diferentes de acordo com seus próprios processos de pensamento, resultando em algumas soluções únicas.
Você deve começar a implementar suas próprias soluções para coisas diferentes quando estiver confiante de que conhece o básico do JavaScript. Você pode então acessar o GitHub e ler o código-fonte de projetos que fazem algo semelhante ao seu. Isso é benéfico, independentemente de você poder implementá-lo por conta própria ou não.
Pensamentos finais
Nosso objetivo neste artigo foi ajudar as pessoas que podem nunca ter aprendido nenhuma linguagem de programação e querem começar com JavaScript. Espero que agora você tenha uma ideia básica do que é programação e como pode começar sua jornada para aprender JavaScript.
