Quer ter acesso a todos os cursos desse Guia?
Guia Completo de JavaScript
Nesse guia conheceremos a linguagem de programação JavaScript, baseada em scripts client-side de páginas web e orientada a objetos. Veremos a sintaxe básica e bibliotecas que vão nos ajudar a criar páginas ricas em recursos.
Introdução
O JavaScript é uma linguagem de programação amplamente utilizada no front-end para diferentes finalidades. Desde validação de campos à criação de menus, é possível fazer muita coisa usando essa linguagem que adiciona algum dinamismo às páginas que apenas com HTML e CSS são consideradas “estáticas”. Para entender como ela funciona e como mudou ao longo dos anos, assista o vídeo a seguir:

Nos cursos a seguir você aprenderá a usar o JavaScript, desde os recursos iniciais da linguagem até a manipulação de elementos da tela:
-
CursoIntrodução a linguagem JavaScript
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoHello World com a linguagem JavaScript
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoLinguagem JavaScript: variáveis e tipos de dados
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoIntrodução ao JavaScript
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoPrimeiros passos com JavaScript
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoJavaScript Tutorial
Ver introdução
free
Recursos da linguagem
Nesta seção você encontra conteúdos que apresentam determinados recursos da linguagem JavaScript, desde os mais básicos como operadores, strings e arrays até outros mais avançados, como promises.
-
ArtigoJavaScript: como e quando utilizar os operadores == e ===
Ver introdução
free -
DocumentaçãoJavaScript substring(): selecionando parte de uma string
Ver introdução
free -
DocumentaçãoJavaScript split(): dividindo/separando strings
Ver introdução
free -
DocumentaçãoJavaScript replace(): substituindo valores em uma string
Ver introdução
free -
DocumentaçãoJavaScript indexOf(): encontrando a posição de um caractere ou string
Ver introdução
free -
DocumentaçãoJavaScript trim(): removendo espaços desnecessários
Ver introdução
free -
DocumentaçãoJavaScript slice(): selecionando elementos de uma string ou array
Ver introdução
free -
ArtigoJavaScript Concat: Concatenando arrays e strings
Ver introdução
free -
DocumentaçãoJavaScript forEach(): executando uma função para cada elemento de um array
Ver introdução
free -
ArtigoJavaScript Map: Mapeando elementos de um array
Ver introdução
free -
ArtigoJavaScript Reduce: Reduzindo uma coleção em um único objeto
Ver introdução
free -
DocumentaçãoJavaScript length: como e quando utilizar essa propriedade
Ver introdução
free -
DocumentaçãoJavaScript if/else: criando scripts com estruturas condicionais
Ver introdução
free -
ArtigoEstruturas condicionais if no JavaScript
Ver introdução
free -
DocumentaçãoJavaScript switch: o que é e como utilizar
Ver introdução
free -
DocumentaçãoJavaScript redirect: redirecionando o usuário com window.location
Ver introdução
free -
ArtigoJavaScript Date: trabalhando com data e hora
Ver introdução
free -
ArtigoExpressões regulares em JavaScript
Ver introdução
free -
ArtigoProgramação assíncrona em JavaScript com Promises
Ver introdução
free -
ArtigoTrabalhando com Módulos no JavaScript
Ver introdução
free
A seguir temos uma documentação completa da linguagem, trazendo alguns recursos novos:

DOM
O DOM (Document Object Model) é a estrutura de elementos que compõem uma página HTML. Um dos principais usos do JavaScript é manipular esses elementos para realizar as mais diversas tarefas, desde capturar e exibir dados até criar menus.
Boas práticas
Como em toda linguagem de programação, existem algumas sugestões de boas práticas para a escrita de código JavaScript, que visam melhorar a qualidade das aplicações e facilitar sua manutenção.
-
ArtigoBoas Práticas de programação em JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoPadronizando código JavaScript com IIFE, AMD e RequireJS
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoMensagens de erro com abstração em JavaScript
Ver introdução
free
Orientação a Objetos
O JavaScript implementa a Orientação a Objetos a partir dos conceitos de função e protótipo, dois elementos fundamentais da linguagem, o que torna a criação de classes menos intuitiva que em outras linguagens como Java e C#.
Empregar esse paradigma, no entanto, contribui para a melhoria da organização e reusabilidade do código, como você poderá aprender nos artigos a seguir:
-
ArtigoOrientação a objetos com JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoPOO: Trabalhando com classes e objetos em JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoObjetos e vetores em JavaScript: conceitos básicos
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Gráficos
Gráficos são amplamente utilizados nos mais diversos tipos de aplicação para exibir dados de forma amigável e fácil de analisar pelos usuários. Em JavaScript é possível gerar gráficos a partir de diferentes bibliotecas, sendo a Google Charts uma das principais:
-
ArtigoGoogle Charts: Criando Gráficos dinâmicos com JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
DevCastCriando gráficos com o Google ChartsQuer ter acesso completo a todos os conteúdos?Saiba mais
-
DevCastDesenhando Gráficos com a Google Chart Tools em JavaScriptQuer ter acesso completo a todos os conteúdos?Saiba mais
Veja também outras formas de gerar gráficos em suas páginas HTML:
-
DevCastGráficos de linha na Web em tempo realQuer ter acesso completo a todos os conteúdos?Saiba mais
-
ArtigoGerando um gráfico de linhas dinâmico com JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoCriando HeatMaps com JavaScript e HTML
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Bibliotecas
O JavaScript conta com diversas bibliotecas que nos auxiliam na implementação de tarefas comuns no desenvolvimento de aplicações web e mobile. Nos links abaixo você conhecerá algumas delas:
-
ArtigoBibliotecas JavaScript: Aumentando a produtividade na web
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoIntrodução ao WinJS
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoIntrodução ao Google Closure
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Testes
Os testes representam uma etapa de extrema importância no processo de desenvolvimento de software, pois visam validar se a aplicação está funcionando corretamente e se atende aos requisitos especificados.
Os testes unitários têm por objetivo validar pequenas partes do software com base em suas entradas possíveis e saídas esperadas. As unidades usadas nesse tipo de teste são as menores partes testáveis de um sistema, normalmente funções, que recebem argumentos e retornam um determinado valor ou efetuam alguma ação cujo resultado pode ser analisado.
Veja a seguir como efetuar testes unitários em JavaScript e como implementar o TDD usando Node.js e Gulp:
-
ArtigoTestes unitários em JavaScript: Introdução
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoJavaScript QUnit: Conheça o Framework de testes unitários
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoTDD Contínuo em JavaScript com Node.js e Gulp
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Praticando
Nada melhor para fixar o conhecimento do que praticar, certo? Nesta seção separamos alguns conteúdos para que você possa aplicar na prática o que aprendeu até aqui.
jQuery
A jQuery é uma biblioteca JavaScript que tem por lema “escrever menos e fazer mais”, ou seja, ela permite fazer com menos linhas de código o que seria bem mais complexo com JavaScript “puro”. Entre seus principais recursos está a manipulação do DOM (Document Object Model), que é simplificado por suas funções e seletores.
Conheça mais sobre o que é a jQuery no curso abaixo:

Ver grade completa
Para mais conteúdos sobre essa biblioteca, consulte o Guia de Consulta de jQuery.
Assim como você pôde ver nos vídeos acima, TypeScript é a linguagem do Angular. É sobre ela que falamos nos cursos abaixo:
E com os artigos a seguir acompanhamos a criação do nosso primeiro Hello World e os tipos de dados dessa linguagem:
-
ArtigoHello World com TypeScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoTypeScript: Tipos de dados
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoTypeScript: variáveis e constantes Novo!
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Angular
Angular é, atualmente, uma plataforma para o desenvolvimento de aplicações cliente, que podem ser executadas tanto no navegador quanto em Smartphones ou Desktops, quando combinadas a outras tecnologias. A partir de um conjunto de APIs robustas, com o Angular podemos desenvolver sobre uma arquitetura baseada em componentes e em camadas. Confira!
-
DevCastUm Bate-papo sobre AngularQuer ter acesso completo a todos os conteúdos?Saiba mais
-
DevCastJá ouviu falar em Single Page Applications?Quer ter acesso completo a todos os conteúdos?Saiba mais
-
CursoO que é Angular?
Ver grade completa
free -
CursoAngular: Preparando Ambiente de Desenvolvimento
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoAngular: Olá Mundo! com Angular
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoAngular: Exibindo dados no template do componente
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoAngular: Property Binding
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoAngular: Diretivas estruturais
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoAngular: Event Binding
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoNovidades do Angular 7
Ver introdução
free
Agora você possui o necessário para se aprofundar no Angular e começar a criar as suas aplicações cliente. Siga em frente com esses conteúdos:
-
DevCastConceitos do REST para desenvolvedores AngularQuer ter acesso completo a todos os conteúdos?Saiba mais
-
CursoAngular: Conectando com uma API RESTful
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ProjetoAngular: Conectando com uma API RESTfulQuer ter acesso completo a todos os conteúdos?Saiba mais
-
DevCastPor que autenticar com JWT?Quer ter acesso completo a todos os conteúdos?Saiba mais
-
MeetUpComo usar JWT no Angular com Inteceptors/GuardsQuer ter acesso completo a todos os conteúdos?Saiba mais
-
MeetUpComo usar JWT no Angular com Inteceptors/Guards - Perguntas e respostasQuer ter acesso completo a todos os conteúdos?Saiba mais
React
O React foi desenvolvido no Facebook para atender as demandas da aplicação web dessa rede social, cuja interface é complexa e composta por várias partes que atuam em conjunto ou isoladamente. Usando o conceito de componentes o React propõe a divisão das interfaces em partes menores e desenvolvidas separadamente, o que as torna mais fáceis de manter e reutilizar. Conheça mais sobre essa biblioteca nos posts abaixo:
-
DevCastO que é React?Quer ter acesso completo a todos os conteúdos?Saiba mais
-
ArtigoComo instalar o Node.js, NPM e o React no Windows
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoPrimeiros passos com React
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
CursoMinha Primeira Single Page Application com React
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ProjetoFullstack JavaScript: API RESTful com Node.js e ReactQuer ter acesso completo a todos os conteúdos?Saiba mais
Vue.js
O Vue.js é um framework JavaScript utilizado na construção das views de aplicações baseadas em HTML. Seu principal objetivo é permitir a interação uni e bidirecional dos elementos HTML com os dados e métodos definidos via JavaScript.
Veja nos cursos abaixo uma introdução a esse framework:
Em seguida consulte os artigos abaixo para conhecer mais detalhes do Vue.js:
-
ArtigoVue.js Tutorial
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoVue.js: Utilizando data bind unidirecional e bidirecional
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoVue.js: Diretivas condicionais
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais
Conteúdo extra
Nesta seção trazemos reunimos diversos posts que lhe permitirão aprimorar seus conhecimentos sobre o JavaScript, ampliando seus horizontes no uso dessa linguagem:
-
ArtigoProgramação funcional com JavaScript
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
DevCastBoas práticas de usabilidadeQuer ter acesso completo a todos os conteúdos?Saiba mais
-
ArtigoUsabilidade e experiência do usuário em aplicativos sensíveis ao contexto
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoIBM MobileFirst: Autenticação de usuários
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
DevCastAPI Google Places: AutocompleteQuer ter acesso completo a todos os conteúdos?Saiba mais
Mais sobre Front-End
Além dos cursos, exemplos e DevCasts contidos nesse guia a DevMedia publica com frequência novos conteúdos sobre front-end, os quais você pode conferir nos Guias de Consulta abaixo:
Além disso, você pode conferir todo o conteúdo de Front-end clicando aqui.
<Perguntas frequentes>