Esta é a 9ª semana da turma online: Todas em Tech - Front-end, nesta aula do dia 09/10/2021 teremos os seguintes conteúdos:
- Breve Revisão:
- DOM;
- Objetos;
- Arrays;
- Eventos;
- Projeto ToDoList
Lilit Bandeira, é uma travesti paraibana residente no Recife, Software Engineer na Sanar, desenvolvedora Fullstack, ex-aluna {reprograma} e estudante de Cinema e Audiovisual na UFPE;
- E-mail: devlilitbandeira@gmail.com
- GitHub
- Manter atenção nas explicações e codar nos momentos definidos a cada passo do projeto;
- Enviar dúvidas no chat para as monitoras ajudarem;
- Levantar a mão sempre que desejar falar, o que pode ser feito a qualquer momento;
- Manter microfones desligados sempre que alguém estiver falando;
- Manter as câmeras ligadas o máximo de tempo possível para cada aluna!
- Criaremos uma
To Do List: uma lista para organizar tarefas; - Este projeto tem como objetivo exercitar os conceitos aprendidos até aqui: Lógica, HTML, CSS e JavaScript;
- Não é permitido o uso de nenhuma biblioteca/framework para construção do projeto;
- Temos um layout que deve ser seguido, mas é permitido incrementar seu projeto para entregar;
1. Entre no repositório da aula e crie um fork; (isso criará uma cópia do repositório original no seu github)
git clone <link do repositório forkado>
git checkout -b "seu-nome"
├── README.md
├── projeto
├── nome-sobrenome
|
Criando um objeto:
const aluna = new Object()
aluna.nome = "Lilit"
aluna.curso = "frontend"
aluna.cidade = "Recife"
const monitora = {
nome: "Carol",
curso: "frontend",
cidade: "Brasília",
}
Acessando o valor de uma propriedade do objeto:
console.log(aluna.curso)
console.log(monitora.nome)
Desestruturando um objeto:
const { nome, curso, cidade } = aluna
Criando uma array:
const alunas = ["Lilit, Analu, Beatriz, Simara"]
const cidades = new Array('Recife', 'São Paulo', 'Manaus')
const cursos = "frontend backend".slit(' ')
const tecnologias = Array.of('HTML', 'CSS', JS)
Acessando o valor de um elemento da array:
console.log(alunas[1])
Desestruturando um objeto:
const [ frontend, backend ] = cursos
Interando uma array (Métodos)
arrays para exemplos:
const frutas = ['🍎', '🍇', '🍎', '🍌', '🍎', '🥑']
find:
const encontrarPrimeiro = frutas.find(element => element == 🍇')
console.log(encontrarPrimeiro) // retorno 🍇
filter:
const filtrarPor = frutas.filter(element => element == "🍎")
console.log(filtrarPor) // retorno ['🍎', '🍎', '🍎']
map:
const executarTodos = frutas.map(element => element = "🍇")
console.log(executarTodos) // retorn ['🍇', '🍇', '🍇', '🍇', '🍇', '🍇']
forEach:
const verTodos = frutas.forEach(element => console.log(element))
console.log(verTodos) // retorno 🍎🍇🍎🍌🍎🥑
> DOM é uma sigla que significa Document Object Model. Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do HTML. A forma mais fácil de acessar e manipular o DOM é usando JavaScript.
- Document: representa o documento HTML
- Element: são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM
- Text: é o conteúdo de texto que vai entre os elementos (tags).
- Attribute: são os todos atributos para um nó específico. No caso, o attribute href="http:// instagram .com/lilitbandeira" está associado ao elemento, outros exemplos de atributos são o class, o src, o id, entre outros.
> O DOM é a representação do objeto do documento HTML e atua como uma interface de programação que permite a manipulação de sua estrutura com o JavaScript ou outras linguagens. Podemos manipular o DOM para realizar alterações na estrutura do HTML, alterar estilos, modificar conteúdos e adicionar diversos eventos.
Um eventos é um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. Grande parte dos eventos nascem na interação da usuária com a aplicação.
Para manipular podemos usar Event listener que adiciona ou remove um evento sobre qualquer elemento. O Event Listener disponibiliza duas funções principais, são elas:
-
addEvent - Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.
-
removeEvent - Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.
elemento.addEventListener('click', function (evento) { //ação a ser executada no clique do elemento console.log(evento); });
Usamos o método preventDefault() para cancelar a ação padrão que pertence a um determinado evento.
-
1. HTML [ ] Criar estrutura da página;
-
2. CSS [ ] Adicionar estilo;
-
3. JavaScript [ ] 3.1 Capturar dados de Entrada da usuária; [ ] 3.2 Adicionar itens na lista; [ ] 3.3 Marcar item como realizado; [ ] 3.4 Limpar input após adicionar item; [ ] 3.5 Validar campo de texto para não entrar itens vazios ou somente com espaços; [ ] 3.6 Poder excluir itens da lista individualmente; [ ] 3.7 Marcar/Desmarcar todos os itens como feito; [ ] 3.8 Limpar lista, excluir todos os itens da lista; [ ] 3.9 Ao clicar em marcar todos, mudar texto do botão para desmarcar todos;
- Criar animação pata quando a usuária tentar criar uma tarefa com uma string vazia ou somente com espaços ao invés de somente um alert;
- Criar uma função que mude o texto do botão Marcar/Desmarcar todos: Se houver pelo menos uma tarefa desmarcada (Marcar todos) e caso todas sejam desmarcadas manualmente (Desmarcar todos)
| Conteúdo | Fonte | Link |
|---|---|---|
| Font Family | Google Fonts | https://fonts.google.com/specimen/Poppins?preview.size=33&query=po |
| Paleta cores | flat UI colors | https://flatuicolors.com/palette/ca |
| Objetos | MDN | https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Objects/Basics |
| Arrays | MDN | https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays |
| DOM | MDN | https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model |
| Eventos | MDN | https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events |
- Professora Lorena Rabelo, de quem usei o repositório do projeto da turma 10 como referência;
- Professota Barbara Aguilar, de quem peguei parte do conteúdo da revisão no repositório de JavascriptI da turma 8;
- Professora Anna Flávia, de quem também peguei parte do conteúdo da revisão no repositório de Revisão da turma 6;
E todas as minhas professoras e amigas do {reprograma} com quem sempre aprendo