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:
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 ===
-
DocumentaçãoJavaScript substring(): selecionando parte de uma string
-
DocumentaçãoJavaScript split(): dividindo/separando strings
-
DocumentaçãoJavaScript replace(): substituindo valores em uma string
-
DocumentaçãoJavaScript indexOf(): encontrando a posição de um caractere ou string
-
DocumentaçãoJavaScript trim(): removendo espaços desnecessários
-
DocumentaçãoJavaScript slice(): selecionando elementos de uma string ou array
-
ArtigoJavaScript Concat: Concatenando arrays e strings
-
DocumentaçãoJavaScript forEach(): executando uma função para cada elemento de um array
-
ArtigoJavaScript Map: Mapeando elementos de um array
-
ArtigoJavaScript Reduce: Reduzindo uma coleção em um único objeto
-
DocumentaçãoJavaScript length: como e quando utilizar essa propriedade
-
DocumentaçãoJavaScript if/else: criando scripts com estruturas condicionais
-
ArtigoEstruturas condicionais if no JavaScript
-
DocumentaçãoJavaScript switch: o que é e como utilizar
-
DocumentaçãoJavaScript redirect: redirecionando o usuário com window.location
-
ArtigoJavaScript Date: trabalhando com data e hora
-
ArtigoExpressões regulares em JavaScript
-
ArtigoProgramação assíncrona em JavaScript com Promises
-
ArtigoTrabalhando com Módulos no JavaScript
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.
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:
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
-
DevCastCriando gráficos com o Google Charts
-
DevCastDesenhando Gráficos com a Google Chart Tools em JavaScript
Veja também outras formas de gerar gráficos em suas páginas HTML:
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:
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:
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:
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:
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 Angular
-
DevCastJá ouviu falar em Single Page Applications?
-
CursoO que é Angular?
-
CursoAngular: Preparando Ambiente de Desenvolvimento
-
CursoAngular: Olá Mundo! com Angular
-
CursoAngular: Exibindo dados no template do componente
-
CursoAngular: Property Binding
-
CursoAngular: Diretivas estruturais
-
CursoAngular: Event Binding
-
ArtigoNovidades do Angular 7
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 Angular
-
CursoAngular: Conectando com uma API RESTful
-
ProjetoAngular: Conectando com uma API RESTful
-
DevCastPor que autenticar com JWT?
-
MeetUpComo usar JWT no Angular com Inteceptors/Guards
-
MeetUpComo usar JWT no Angular com Inteceptors/Guards - Perguntas e respostas
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:
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:
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:
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>