Como Adicionar e Manipular Objetos no Array - Curso de Javascript Puro Orientado a Objetos - Aula 3

Adicionar e Manipular Objetos no Array.
➡️ Curso Completo:

--- Links Importantes:
🎁 Curso Completo:
✅ Curso que Recomendo:
🎮 Desenvolvimento de Games:

--- Equipamentos que uso nos vídeos:

-
Nesta aula vamos aprender como adicionar e manipular objetos dentro de um array utilizando o javascript orientado a objetos.

Vamos entender passo a passo como acessar um objeto dentro de um array e como pegar o valor desse objeto para exibir na tabela para o usuário.

Os dados do array serão listados em uma table HTML de forma dinâmica.

Vamos receber os dados do formulário enviado pelo usuário, em seguida adicionar estes dados dentro de um array utilizando a função push() do javascript.

A tabela HTML será construída dinâmicamente, ou seja, criando linhas (tr) e colunas (td) utilizando as funções insertRow() e insertCell().

Vamos utilizar laço de repetição (for) para acessar cada objeto do array e montar a tabela no HTML.

Todo o projeto é construído com a estrutura orientada a objetos.

Para o vídeo não ficar muito longo, dividimos essa aula em 2 partes, sendo essa a primeira parte do vídeo. A segunda parte está aqui na descrição, logo abaixo (vídeo 4).

Esta aula é um verdadeiro passo a passo pra você dar um salto na sua caminhada como desenvolvedor(a).

Espero que te ajude!
Um grande abraço e até o próximo vídeo!
-

--- Curso Completo Pacote Fullstack:

⬇🔻 ASSISTA TODAS AS AULAS ⬇🔻
Aula 01 - Introdução O.O

Aula 02 - Criando o Front-End

Aula 03 - Adicionando Item na Lista com Array

Aula 04 - Listando Itens do Array na Tabela

Aula 05 - Removendo Itens do Array

🔻 Conecte-se comigo 🔻

#array #objetos #javascript #arrayJavascript #frontEnd #HTML #CSS #javascript #cursojs #cursoDeJavascript #js #OrientaçãoObjetos #programadorespartano

array, javascript, manipulando objetos e array, objetos array javascript, insertRow table, insertCell table, push js, listar dados array, criar tabela dinâmica javascript, laço de repetição js, for js, trabalhando com array js, front end e back end, html css javascript, orientada a objetos, curso de javascript, programação orientada a objetos, manipulação tabelas javascript, aprender programar, o que é orientação a objetos, paradigma de orientação a objetos, programador espartano.

[claudinoanthony]

Eu já tinha feito esse seu curso a 1 mês atrás, logo após concluir o curso básico de JS do Curso em Vídeo, sendo meu primeiro contato com programação. Fiz tudo que você disse no vídeo, não me aconteceu nenhum erro, mas eu estava apenas copiando código, não entendia nada do que você estava fazendo. Agora 1 mês depois, consigo entender tudo que você vez no vídeo, e sem dúvidas, aprendi muito com esse vídeo.

[helenoircardoso]

Quanta simplicidade para explicar orientação a objeto, tem prof... que leva 2 anos na faculdade e ainda não entendemos kkk. Gratidão pelo conhecimento.

[Lukazcns]

Até comentei em outro vídeo a mesma coisa pq gostaria muito que soubesse. Parabéns pelo trabalho!
Mano, surgiu uma oportunidade pra mim e tenho até hoje 08/09/21 para fazer uma prova. Tive somente 5 dias para fazer um intensivo de tudo que preciso, POO é uma delas. Sua forma de ensinar e o seu conteúdo tá salvando demais! Mesmo que eu não passe nessa prova, eu to feliz pra caramba pq acho nunca me dediquei tanto em uma coisa em tão pouco tempo... Sei que as condições são ruins pq dá para aprender somente o raso quando se trata de vários conteúdos. Contudo, seus vídeos estão me deixando mais confiante. Você é um ótimo professor!

[everaldosantos]

Muita disposição para ensinar de maneira correta. Muito obrigado Professor.

[jheanbrizadao]

valeu, professor Espartano, Eu juro seguir o senhor, a minha lealdade!!!

[FabianoVasconcelos]

Fala muito rápido, mas eu resolvi esse problema colocando na velocidade 0.75.
Tirando isso, nota 10 pro conteúdo e pra didática! Ganhou o meu respeito!

[latissia]

Gente! Não esqueçam de colocar no botão type="button", para não ficarem horas tentando compreender porque não apareciam os dados dos input's no console!

[HumbertoLins]

Quanta informação em 14 minutos ... Parabéns ... vou ter que rever várias vezes !

[chapahallss]

Fala meu brother. Aqui em junho de 2023 estudando JS e caí no seu vídeo. Excelente conteúdo e forma de explicar. Parabéns! 10 mil inscritos é pouco hein?

Deixa perguntar. Estou criando um site onde já tenho o array com as informações a serem filtradas e mostradas na tabela, como se fosse meu banco de dados, com id da pessoa, nome da pessoa, curso que a pessoa fez e um botão de download dos certificados (que é um link de download para cada documento).

Eu gostaria de ter um campo de pesquisa onde eu fizesse uma pesquisa por id ou nome da pessoa e trouxesse na tabela as linhas correspondentes a essa pesquisa, onde mostrasse todos os cursos que ela fez com os respectivos botões de download de certificados.

Se puder indicar se é possível desenvolver dessa maneira e quais funções do JS eu devo pesquisar e estudar para colocar isso em prática, caso seja possível. Ou se já tem algum vídeo que indique o caminho.

Forte abraço e, mais uma vez, obrigado por compartilhar seu conhecimento.

[nogueira]

Amigo, está ajudando muito! Parabéns pela iniciativa. Obrigado!

[jheanbrizadao]

Eu consegui fazer legal, mas vou assistir como vc vai fazer, sempre é bom analisar e aprender coisas novas com pessoas fazendo

[SNLR]

Gostei muito, muito bacana! Parabéns!

[eduardohenriquedeassis]

Caramba!! Que vídeo sensacional Bro!!

Ganhou mais um inscrito!

[matheuschagas]

Extremamente objetivo, didática excelente, cai aqui de paraquedas e virei aluno, você possui algum curso na udemy?

[FelipeAlves-zpdn]

Poderia mostrar como que faz pra ordenar .sort para que os itens sejam incluídos na parte de cima da tabela?

[pinkloucalouca]

O melhor canal...valew ganhou mais 1 inscrito.

[evellyvictoryvieirapinto]

a sua didática é muito boa, uma pena n ter a opção de dar like 1000 vezes

[ThiagoAlmeidaTech]

Perfeito man!! Ganhou um inscrito no canal!! Parabéns!!

[niza]

Estou com um problema, mesmo se não inserir dados em todos os campos está salvando o produto.
Aparece o alert corretamente mas incrementa o id e salva o produto com o campo vazio

[caiquemartins]

Quando você colocar essa class Produto, não precisa usar o function antes das funções? e é por ter usado a class e o.this que você pode pegar as variáveis que estão em uma função e usar em outras funções? eu nunca tinha visto código como no formato que você apresentou aqui