Scribd
Carregar
7 visualizações3 páginas

Funções Java Script

O documento aborda funções de arrays em JavaScript, como length, push, pop, shift, filter, every, some e includes, com exemplos de uso. Também discute a manipulação do DOM, incluindo seleção de elementos com métodos como getElementsByTagName, getElementById, getElementsByClassName, querySelector e querySelectorAll, além de eventos de clique. Por fim, menciona a manipulação de elementos e o método children para acessar filhos diretos de um elemento.

Enviado por

Sergio Chrisanto
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
7 visualizações3 páginas

Funções Java Script

O documento aborda funções de arrays em JavaScript, como length, push, pop, shift, filter, every, some e includes, com exemplos de uso. Também discute a manipulação do DOM, incluindo seleção de elementos com métodos como getElementsByTagName, getElementById, getElementsByClassName, querySelector e querySelectorAll, além de eventos de clique. Por fim, menciona a manipulação de elementos e o método children para acessar filhos diretos de um elemento.

Enviado por

Sergio Chrisanto
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 3

Java Script - Funções de Arrays

length - mostra quantos itens tem no arrays


exemplo: nome_do_array.length
push - adiciona um item no array
exemplo: nome_do_array.push('novo_item')
pop - remove o ultimo item do array
exemplo: nome_do_array.pop()
shift - remove o primeiro item do array
exemplo: nome_do_array.shift()
filter - filtra os itens do array
exemplo: nome_do_array.filter((value) => value.length > 4)
retorna os itens com mais de 4 caracteres
every - se todos os itens atenderem uma determinada condição, retorna
true
exemplo: nome_do_array.every((valeu) => value.length > 3)
retorna true caso todos os itens do array tiverem mais de 3 caracteres, caso
contrário retorna false
some - se algum(s) itens atenderem a uma determinada condição, retorna
true
exemplo: nome_do_array.every((valeu) => value.length > 3)
caso no array exista algum item com mais de 3 caracteres, retorna true
includes - filtra o item informado no parâmetro
exemplo: if(nome_do_array.includes('Uva') {console.log('Tem uva sim')}
else {console.log('Não tem uva')})
caso no array exista algum item com a string Uva, retorna true

DOM - Document Object Model


Selecionando elementos

document.getElementsByTagName("h1")
seleciona todos os elementos h1 do documento gerando um array
let elementos = document.getElementsByTagName("h1")
elementos[0]
<h1> Olá Javascript </h1>
elementos[1]
<h1> Outro título </h1>
documento.getElementById("teste")
<div id="teste"> Bla bla bla></div>
seleciona o elemento pelo ID
document.getElementsByClassName("botao")
<button class="botao">Clique aqui</buttom>
seleciona o elemento pela classe
document.querySelector("#teste")
<div id="teste"> Bla bla bla </div>
document.querySelector(".botao")
<button class="botao">Clique em mim</button>
document.querySelector("h1")
<h1>Olá Javascript</h1>
O querySelector seleciona o elemento(s) como no css e retorna o elemento
e não um array como no querySelectorAll

document.querySelectorAll("#teste ul li")
NodeList(2) [li, li]
O querySelectorAll seleciona o elemento(s) como no css e sempre retorna
um array

DOM - Document Object Model


Eventos de click

<button class="botao" onClick="clicou()">Clique em mim</button>

function clicou() {
console.log("Clicou no botão")
}

Outra opção é fazer toda a rotina pelo javascript

<button class="botao">Clique em mim</button>

let botao = document.querySelector('.botao')


botao.addEventListener("click", () => {
clicou()
})

DOM - Document Object Model


Manipulação de elementos
Método children – Retorna um array com os filhos diretos do elemento

function clicou() {
const teste = document.querySelector('#teste')
console.log(teste.children)
}

Retorno
<div id="teste">
<ul>
<li>Algum item</li>
<li>Algum item 2</li>
</ul>
</div>

Para retornar o filho do filho

function clicou() {
const teste = document.querySelector('#teste')
console.log(teste.children[0].children)
}

Você também pode gostar