Classificação
0 %
Popularidade
Opine
Descrição:
Você sabe o que significa a sigla DOM? Sabe para que serve o Document Object Model? Sabe como criar uma árvore DOM para …
po n achei esse primeiro plugin watch in chrome
Essa extensão foi atualizada? não consegui encontrar, Watch in chrome….. Me ajudemmmm DEVs e DEVAs!!!!!
Assisti 3 vezes pra entender kkkk foi a mais difícil pra mim até agora
NOVIDADES:
O que é DOM?
DOM (Document Object Model), Modelo de Objeto para Documento, é uma *INTERFACE padronizada utilizada para REPRESENTAR um DOCUMENTO HTML. Este modelo utiliza uma linguagem neutra que, por meio de uma árvore hierárquica de diretórios, permite você ACESSAR e INTERAGIR com QUALQUER ELEMENTO de seu DOCUMENTO de maneira DINÂMICA com o uso do JavaScript. Desta forma, o JS tem o poder de:
alterar, excluir e adicionar: elementos HTML, atributos HTML, eventos HTML, estilos CSS.
*Interface, do latim INTER(entre) + FACIES(faces), significa: ligação física ou lógica entre 2 sistemas ou partes que não poderiam ser conectados diretamente.
Ou seja, o DOM é o INTERMEDIADOR da COMUNICAÇÃO da linguagem JavaScript com as tecnologias HTML5 e CSS3.
Ilustração de uma árvore DOM:
window
/ |
location document history
|
html
/
head body
/ | / | |
meta title h1 p p div
|
strong
Parent (pai) – é quem está ACIMA na árvore HIERARQUICA.
Child (filho) – é quem está ABAIXO na árvore HIERARQUICA.
É como se fosse uma árvore genealógica. Exemplos:
HEAD e BODY são FILHOS de HTML;
HTML é PAI de HEAD e BODY;
HTML é FILHO de DOCUMENT.
É importante ressaltar que: um DOCUMENTO HTML e sua REPRESENTAÇÃO DOM são a MESMA COISA. A única diferença é que estes estão REPRESENTADOS de FORMAS DIFERENTES. Ex:
("uma garrafa") e ("a bottle") são a MESMA COISA, só que representadas em línguas diferentes. É a mesma ideia.
Caso você altere o DOCUMENTO HTML você também alterará o seu DOM e vice-versa.
____________________________
Como ACESSAR/SELECIONAR ELEMENTOS através do DOM:
Lista de 5 MÉTODOS de acesso:
by Tag – getElementsByTagName("")
by ID – getElementByID("")
by Name – getElementsByName("")
by Class – getElementsByClassName("")
by Selector – querySelector (""); querySelectorAll ("");
O método getElementsByTagName() SELECIONA ELEMENTOS via TAG.
O método getElementById() SELECIONA UM ELEMENTO via ID.
O método getElementsByName() SELECIONA ELEMENTOS via NOME.
O método getElementsByClassName("") SELECIONA ELEMENTOS via CLASSE.
O método querySelector() SELECIONA UM ELEMENTO via SELETOR CSS.
O método queySelectorAll() SELECIONA ELEMENTOS via SELETOR CSS.
*Atente-se que alguns dos seletores estão no SINGULAR e outros no PLURAL (Element e Element*S*)
Caso utilize um seletor que está no PLURAL, para ESPECIFICAR qual TAG, NAME ou CLASS você deseja ACESSAR, você têm que usar, após os parênteses (), os colchetes [] e, dentro destes, você indicará qual a POSIÇÃO do elemento que você deseja ACESSAR.
Ex da aula:
document.getElementsByTagName('p')[1];
Neste exemplo selecionou-se, dentro dos parênteses, todas as tags <p>. E, dentro dos colchetes, selecionou-se a tag <p> que se encontra na 1° POSIÇÃO, ou seja, a 2° tag <p>.
*Lembrando que a contagem começa em 0. Portanto:
a posição 0 é a 1° tag <p>
a posição 1 é a 2° tag <p>
a posição 2 é a 3° tag <p> …
____________________________
Diferença entre .innerText e .innerHTML :
A propriedade .innerText serve para DEFINIR ou RETORNAR o CONTEÚDO de TEXTO de um ELEMENTO.
A propriedade .innerHTML serve para DEFINIR ou RETORNAR o CONTEÚDO HTML (texto+formatação) de um ELEMENTO.
ILUSTRAÇÃO (crie um outro documento, monte a estrutura básica HTML5 (!+enter) e insira este código dentro do body):
<body>
<h1>Diferença entre innerText e InnerHTML:</h1>
<p class="teste_1"></p>
<p id="teste_2"></p>
<script>
var variavel_1 = document.querySelector('.teste_1')
variavel_1.innerText = "Teste do <strong>innerText</strong>"
var variavel_2 = document.querySelector('#teste_2')
variavel_2.innerHTML = "Teste do <strong>innerHTML</strong>"
</script>
</body>
____________________________
ALGUMAS DEFINIÇÕES:
*Um OBJETO no JS é um CONTAINER de PROPRIEDADES e MÉTODOS.
*Uma FUNÇÃO no JS é um subprograma que pode receber PARÂMETROS e RETORNAR um resultado. São AÇÕES executadas assim que são CHAMADAS ou em decorrência de algum EVENTO. É um bloco de códigos projetado para executar uma tarefa ou calcular um valor.
*Um MÉTODO no JS é uma FUNÇÃO que está armazenada na forma de um CONJUNTO DE PROPRIEDADES dentro de um OBJETO. Ou seja, MÉTODOS são AÇÕES que podem ser performadas em OBJETOS.
*Um EVENTO no JS é uma CONDIÇÃO que, quando verdadeira, fará a CHAMADA de uma FUNÇÃO.
*O Seletor de Classe é representado por: .
*O Seletor de ID é representado por: #
Muito obrigado a todos que indicaram o live server, vcs são fodas
o meu não aparece "Watch in chrome"
sou fiel ao ViM
Guanabara, estou tentando localiza a extensão do Chrome no VS code mais não esta mais disponível. Você tem outra alternativa?
Gratidão pelo curso!!! Muito bom!!! 😊😊😊😊😊
náo tem mais esse aplicativo 'watch in chrome' no vs code,tem algum outro que posso usar?
Depois do minuto 21 do vídeo, não consegui mais ir!
Coloco tudo igual no vídeo, mas não atualiza!
Alguém poderia me ajudar?
ja fiz o html e css , agora to aqui !!!
alguém tem alguma grupo para estudos? ou quer criar um???
esse plugin de watch in crome esta desativado, isso vc pode fazer indo em configuraçãoes no visual estudio, pesquisa auto save, só altere os dois primeros campos para after delay, e o tempo para 500…
https://www.youtube.com/watch?v=yGzQRA-NC_Q
23:32 Pegou num embalo, kkkkk tive que parar umas 3 vezes
Pessoal, tive dificuldade com live server, mas agora entendi.
Ele transforma o Visual Studio em um browser. Instala o Live server, reinicie o Visual Studio, e aí No explorador de arquivo( onde vc visualiza os projetos do lado esquerdo) clica com o botão direito em cima do documento exe005.html e clica em " Mostrar versão prévia. Na própria extensão explica mas tá em inglês.
Meu cérebro morreu nessas duas aulas, 9 e 10, vou reve TD dnv
O meu "innerText" não aparece
obrigado pela dica do LIVE SERVER, salvou
Obrigado por toda dedicação em nos ensinar!
O Watch in Chrome não está mais na lista de extensões, e como o live server é um pouquinho pesado (para máquinas lentas e chromebooks sim), achei essa alternativa bem leve, da própria Microsoft que faz a mesma coisa: Live Preview! Funcionando e atualizada.
Após instalar e reiniciar o editor, na aba onde fica o nome do arquivo, está o ícone da extensão (retângulo dividido ao meio com uma lupinha) e o nome "Live Preview", irá mostrar a renderização do arquivo e lá em cima o endereço IP + nome do arquivo, a direita tem um menu, clica nele e depois em "Open in Browser". Pronto, qualquer mudança feita no seu aqruivo dentro do VS Code agora acontece ao vivo no browser.
Não ignorem suas dúvidas. Fiquei balançado na terceira pergunta porque não lembrava, e não anotei essa parte. Voltei, como o professor sempre recomenda, e não me arrependo do tempo investido, entendi e ainda observei algo curioso no operador ternário: o valor digitado após a interrogação (?) assume o posto de verdadeiro, enquanto após os dois pontos (:) assume falso e como uma variável só poder guardar um valor, nesse caso, ela guardou o que foi constatado como verdadeiro.
Não entendo qual poderia ser o motivo de fazer essas mudanças com o próprio css ou por js.
Muito top a aula! porém, fiquei com uma dúvida: todo objeto é um elemento ou há uma diferença entre os dois? Por exemplo, a tag <div> pode ser considerado um objeto?
A Tag strong não colocou a palavra DOM em negrito. No meu caso o window.alert exibiu a seguinte msg: Aprendendo a usar o <strong>DOM</strong> em JavaScript.
Usei a Tag <b></b> e também não colocou a palavra em negrito.
Alguém sabe dizer onde errei?
Qdo digitei o comando URL, não apareceu o nome da pasta 09 . Apareceu direto Ex005. Com vcs foi a msm coisa? Antes de iniciar o exercício, criei a pasta 09 e dentro dela o arquivo Ex005. O q errei será?
obrigado por essas aulas professor, Deus abençoe
Tem diferença o Visual Studio Community pro Code? Eu não consigo achar o Live Server pro community
O bom de ler os comentários é que eu sei que a dificuldade não é exclusiva minha, outras pessoas também passaram por isso no começo e é bom ler que o pessoal incentiva a não desistir e que a gente também consegue. Entre idas e vindas cá estou de novo tentando mais uma vez.
Galera, pra quem não ta conseguindo abrir o live server no chrome é so ir na engrenagem do lado do botão desinstalar, configuração de extensão , custom browser e mudar para o chrome
Guanabara meu amigo, estou acompanhando o curso mas chegou nesta aula e meu console deu a seguinte ms g: Uncaught TypeError: Cannot set properties of null (setting 'innerText'). O innertext não é identificado. E ja procurei soluçoes e nada.Tentei com o innerHTML ,mas tb deu a mesma msg
18:00
25:08 "Todo ID ele quis dizer, e não DIV."
Todo ID é representado pelo "#"
e toda Classe é representada por um pontinho "."