O que você aprenderá
- O que é JavaScript e como funciona
- Variáveis e tipos de dados
- Matrizes e objetos
- Funções e seletores
- Como juntar tudo
Você precisará de alguns recursos para acompanhar o curso corretamente. Você pode prepará-los e prepará-los clicando no botão abaixo.
Baixe os arquivos do curso
Introdução
Assistir vídeo aula [0:00] ↗
Bem-vindo ao curso! Aqui, você aprenderá tudo sobre JavaScript da perspectiva de um web designer. As lições começam com o básico, como variáveis, tipos de dados e loops, e depois se aprofundam em assuntos mais complexos, como funções, seletores e eventos. O curso termina com 5 padrões de codificação comuns que usam JavaScript.
1. Trabalhando com JavaScript
Assistir vídeo aula [0:27] ↗
JavaScript é uma linguagem de programação poderosa e versátil que pode ser usada para criar sites interativos e aplicativos da web. Você o encontrará sendo usado em navegadores e também em servidores (usando Node.js). É uma das três principais tecnologias usadas para criar conteúdo para a web junto com HTML e CSS.
O JavaScript é ótimo para adicionar um pouco de interatividade aos seus sites ou aplicativos da web. Você pode executar o código JavaScript das três maneiras a seguir:
- No console do navegador
- Ao escrevê-lo em linha em um documento HTML
- Usando um arquivo JS dedicado
2. Variáveis
Assistir vídeo aula [4:54] ↗
Esta próxima lição lida com todas as coisas variáveis. Variáveis são um conceito central em JavaScript. Eles permitem que os desenvolvedores armazenem informações e dados em um formato específico. As variáveis podem conter números, sequências de caracteres, booleanos (verdadeiro ou falso) e até objetos.
Se você já usou um pré-processador CSS como LESS ou Sass, então você conhece o conceito de variáveis – funciona da mesma forma com JavaScript. As variáveis tornam mais fácil para os desenvolvedores armazenar e manipular dados no lado do cliente de forma rápida e eficiente.
3. Tipos de dados
Assistir vídeo aula [9:07] ↗
Existem sete tipos de dados disponíveis para você em JavaScript: cinco primários e dois compostos. Os tipos de dados primários são:
- Corda
- Número
- boleano
- Nulo
- Indefinido
O
typeof operador identifica o tipo de uma variável.
Os tipos de dados compostos incluem:
E é isso que abordaremos a seguir.
4. Matrizes
Assistir vídeo aula [13:17] ↗
O primeiro tipo de dados compostos que discutiremos é o array. Arrays são uma lista ordenada de valores que podem ser armazenados e manipulados. Arrays podem conter qualquer tipo de valor – números, strings, booleanos e até mesmo outros arrays. Arrays são usados para armazenar vários dados que podem ser acessados e trabalhados facilmente. Eles são frequentemente usados em loops e outras funções para armazenar os resultados de cálculos e operações.
5. Objetos
Assistir vídeo aula [20:04] ↗
Para entender os objetos, você precisa entender as propriedades. Uma propriedade é uma associação entre um nome e um valor. Por exemplo color = red.
Objetos em JavaScript são coleções de propriedades. Os objetos oferecem uma maneira mais poderosa de manipular dados do que as matrizes, pois podem armazenar informações mais complexas em um formato hierárquico. Eles também podem ser usados para criar objetos personalizados que tenham suas próprias propriedades e métodos exclusivos. No exemplo abaixo, criamos um objeto person e estabeleceu várias propriedades associadas, incluindo, age, heighte married (Estado civil):
6. Operadores
Assistir vídeo aula [25:25] ↗
operadores são símbolos especiais usados para executar operações em dados. Eles geralmente pegam dois ou mais valores como entrada e produzem um resultado como saída. Os operadores comumente usados incluem:
- Operadores de atribuição: como
= - Operadores de comparação: como
>,<e== - Operadores lógicos:
&&,||
7. Declarações If Else
Assistir vídeo aula [34:07] ↗
A instrução If Else é uma instrução de tomada de decisão usada em JavaScript que permite verificar o valor de uma expressão e executar um bloco de código se a expressão for verdadeira.
pode ser usado para criar uma lógica poderosa e personalizada combinando várias condições usando os operadores lógicos, como &&, ||, ! etc. Ele também permite instruções aninhadas onde um ou mais conjuntos de condições podem ser verificados em outra instrução. Isso permite maior controle sobre como e quando o código deve ser executado.
8. Voltas
Assistir vídeo aula [38:50] ↗
Um Loop é um pedaço de código que é executado repetidamente em um determinado número de vezes ou se uma determinada condição for atendida. Loops podem ser usados Existem 3 tipos principais de Loops em JavaScript. Eles incluem:
9. Funções
Assistir vídeo aula [45:01] ↗
Você pode pensar nas funções em JavaScript como seu próprio tipo de subprograma. Eles são pedaços de código reutilizáveis que aceitam parâmetros, executam operações neles e retornam um resultado. Eles permitem que o código seja organizado de maneira modular, dividindo as operações em componentes menores que podem ser reutilizados em todo o programa. As funções são declaradas usando o function palavra-chave seguida pelo nome da função, um conjunto opcional de parâmetros e o corpo do código entre chaves.
As funções também podem retornar diretamente um valor ou ter um valor implícito return instrução que retornará indefinido se nenhum valor for especificado.
10. Seletores
Assistir vídeo aula [51:17] ↗
Os seletores em JavaScript são usados para direcionar e acessar elementos do Document Object Model (DOM). Eles podem ser usados para obter uma referência a um ou vários elementos, criar um novo elemento e adicioná-lo ao DOM, remover elementos do DOM ou fazer alterações neles.
11. Eventos
Assistir vídeo aula [59:17] ↗
O termo “eventos JavaScript” talvez seja um pouco impróprio porque os eventos estão realmente acontecendo no lado HTML. Tudo o que você pode fazer no JS é ouvir esses eventos e reagir de acordo. Um evento pode ser algo acionado pelo navegador ou pelo usuário.
As próximas lições colocam tudo o que você aprendeu até agora em prática com alguns exemplos práticos.
12. Botão Voltar ao Topo
Assistir vídeo aula [1:06:15] ↗
Esta é a primeira de cinco demonstrações neste curso. O De volta ao topo botão é uma coisa popular para incluir em um site, pois ajuda a melhorar a experiência do usuário para os visitantes do site. Para criar este botão, você precisa usar o ID anexado ao cabeçalho do seu site. Use isso para informar ao script o destino do botão. O botão em si é colocado no rodapé.
Em seguida, no arquivo style.css, você pode fazer ajustes em como o De volta ao topo botão aparece e como ele funciona, incluindo seu posicionamento na página, cor, tamanho e assim por diante.
13. Preenchimento Automático da Caixa de Texto
Assistir vídeo aula [1:17:11] ↗
Nesta lição de demonstração, você criará uma caixa de texto compatível com preenchimento automático. Isso pode ajudar consideravelmente a experiência do usuário quando se trata de preencher formulários.
Para fazer isso, você precisará adicionar algumas variáveis ao seu arquivo de script, incluindo targetInput results para países, então você pode adicionar targetInput.addEventListener definido como keyup o que faz com que sempre que alguém comece a digitar no campo do formulário, o script começará a comparar essa entrada com a lista de países que já estabelecemos.
14. Controle deslizante de conteúdo simples
Assistir vídeo aula [1:41:42] ↗
Na terceira demonstração, você poderá criar um controle deslizante de conteúdo que contém imagens, texto, HTML e qualquer outra coisa de sua preferência. No exemplo, o controle deslizante contém aspas:
No arquivo de script, você definirá onde o cursor será colocado, se os botões avançar e voltar estarão ativos ou não, a largura e a altura do slide e o número de slides incluídos.
15. Caixa de luz de imagem
Assistir vídeo aula [1:39:50] ↗
Na quarta demonstração, você aprenderá como criar um lightbox de imagem. Uma caixa de luz geralmente é uma sobreposição que mostra uma versão muito maior de uma miniatura e pode ter muitos aplicativos. Neste exemplo, você está criando uma galeria de imagens e configurando o lightbox para aparecer quando uma imagem for clicada. Isso faz com que apareça uma sobreposição de uma versão maior dessa imagem. Quando você clica em qualquer lugar fora dessa imagem, a caixa de luz fecha.
16. Controle de abas
Assistir vídeo aula [1:44:02] ↗
Na última demonstração deste curso, você aprenderá tudo sobre como criar um controle de guia simples que permite aos visitantes clicar entre as guias para alternar conteúdo diferente.
A marcação para isso é bastante simples. A aba ativa tem a classe active e a tab-contents conter qualquer conteúdo a ser exibido em cada guia.
Palavras Finais
Assistir vídeo aula [1:46:43] ↗
Ao chegar à última lição do curso, você deve ter uma ideia muito mais clara do que pode fazer com JavaScript como web designer e como implementá-lo em seus próprios projetos. Boa sorte!
