Javascript Como colocar input em Javascript?

Eli Almeida · 8 de maio

Como colocar input em Javascript para capturar dados dos usuários?

É possível fazer isso utilizando o Node js?

A única maneira de capturar dados do usuário é utilizando o window.prompt?

Como capturar dados no usuário utilizando o Visual studio code? É a mesma coisa para capturar dados no Node js?

UserX_ · 8 de maio

Não, não é só com window.prompt, há outras formas e vai da sua criatividade. Veja esse exemplo aqui que fui melhorando com o tempo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Gerador de tabuada</title>

</head>

<script>



var initial = 1;

var num = 50;



//___________________________________________________________________________________________________________________




function Tecla(){

    var empty = ""

    var x = document.getElementById("tabuada").innerHTML = empty




var teclaP = event.key;



if(teclaP == "Enter"){



    var getNumber = Number(document.getElementById("Escolha").value);



    for(var i=initial;i<=num;i++){

   



   var resultado = getNumber * i

    var x = document.getElementById("tabuada").style = "display: block"

   

    var y = document.getElementById("tabuada").innerHTML +="<ul><li>"+getNumber+" x "+i+"="+(resultado)    

}



} else {



    var y001 = document.getElementById("tabuada").style ='display: none;';



}




}



  function funcao(){

    var empty = ""

    var x = document.getElementById("tabuada").innerHTML = empty

    var getNumber = Number(document.getElementById("Escolha").value);



    if(getNumber===0){

        window.alert("Nenhum valor foi informado.")



    } else {



    for(var i=initial;i<=num;i++){

   

       var resultado = getNumber * i

        var x = document.getElementById("tabuada").style = "display: block"

        var y = document.getElementById("tabuada").innerHTML +="<ul><li>"+getNumber+" x "+i+"="+(resultado)      

    }  

}



  }




</script>

<style>

    body {



        text-align: center;

        background-image: url("https://i.gifer.com/1kc1.gif");

        background-size: cover;

        color: yellow;



    }

    div {

     

     margin: auto;

     height: auto;

     background-color: gray;

     width: 300px;

     border: 1px solid gray;

     font-family: Verdana;

     line-height: 10px;

position: absolute;

left: 570px;



    }

</style>

<body>

    <h2 id="numeroE" style='margin-left: 70px;'></h2>

    <label for="Escolha" style='font-weight: bold;color: yellowgreen'>Número:

        <input type="number" onkeypress="Tecla()" id="Escolha" style="width: 150px; padding: 10px; border: 2px solid #2575fc; border-radius: 6px; font-size: 16px; text-align: center; outline: none; transition: 0.3s ease;"

        onfocus="this.style.borderColor='#6a11cb'" onblur="this.style.borderColor='#2575fc'">

            <br>

    <br>

    <button id="botao" onclick="funcao()" style="margin-left: 70px;background: linear-gradient(45deg, #ff7e5f, #feb47b); border: none; border-radius: 8px; padding: 12px 20px; color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s ease;">Gerar Tabuada</button>

    <br>

    <br>

    <div style="display: none" id="tabuada">

   



    </div>

</label>

   <script>

    var y = document.getElementById("numeroE").innerHTML = "Gerador de tabuada "+num;  

   </script>

</body>

</html>

Esse código é um gerador de tabuada, mexer nos números de cima reflete lá embaixo. Tem-se initial, num, empty que é vazio, etc.

https://www.youtube.com/watch?v=deSvO6vouM4

Nesse vídeo era só de 10, mas eu coloquei para dizer do número que for colocado em initial, num. Entende?

Swalls · 9 de maio

@Eli Almeida respondendo sua pergunta, não, usar window é errado, você deve aprender html (a DOM e CSS), não é para dominar e sim para saber os conceitos.

Usar métodos como window.prompt() ou alert() é considerado invasivo e não recomendado para aplicações modernas, você aprende isso, por ex, no curso de javascript da cisco, que é o recomendado como preparatorio para certificação oficial do javascript. (o da cisco é gratis)

o mais comum é usar esses básicos:

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()

se tiver um inglês de nível básico já dá para entender o que eles fazem.

mas há outros também, todos eles retornam o objeto (elemento) e suas propriedades. (você precisa saber OOP e, no caso de js com html, prototipagem)

espero ter ajudado.

Também pode surgir a duvida de como lidar com ações, e para isso eu recomendo você estudar como lidar com eventos e entender o pattern observer.

Eli Almeida · domingo às 23:41

@Swalls , valeu. Utilizar querySelector substitui todas essas formas: getElementsByTagName(), getElementById(), getElementsByName() e getElementsByClassName()?
Ou seja, o querySelector consegue acessar elementos por ID, classe, tag e nome?
Se sim, então seria mais viável utilizar o querySelector?

DiF · segunda-feira às 05:13

@Eli Almeida Sim. extamente isto...

Por exemplo:

document.getElementById("nome");
document.querySelector("#nome");


getElementsByClassName("box");
document.querySelector(".box");

Quanto ao getElementsByTagName(), retorna uma coleção de objetos através das tags html. Neste caso, para o mesmo efeito com querySelector, podes usar o document.querySelectorAll()

O document.querySelector() retorna apenas um objeto através de um seletor CSS.

Swalls · segunda-feira às 13:58

sim, o queryselector funciona para todos, mas não, porque é preferivel você usar os outros.

motivo? performance! aqui o exemplo: https://www.measurethat.net/Benchmarks/ShowResult/608065.

query_selector executa 3 milhões por segundo enquanto getelement executa 13 mihões por segundo.

Ambos são números massivos e você pode achar de inicio que não faz diferença, mas se você pensar em algo além de "um site comum", como um minerador de dados (scrapper) ou no aprendizado de uma IA, aí a coisa muda.

Eli Almeida · ontem às 17:27

@Swalls, @DiF , obrigada. Qual é a diferença entre NodeList e HTMLCollection? Pesquisei até no ChatGPT, mas não consegui entender bem. Eles só são visíveis quando usamos console.log? Só aparecem no console do navegador?

DiF · 22 horas atrás

@Eli Almeida Falando por cima, sem delongar muito, O nodeList é um array de objetos, na qual retorna os nós de um elemento.

Em um exemplo prático seria algo como:

<div class= "box-area" id = "box1">
    <div class="box" id="box-1">
        <h1>Titulo</h1>
  		<h2>sub-título</h2>
  		<div class="conteudo">Conteúdo</div>
    </div>

    <div class="box" id="box-2">
        <h1>Titulo</h1>
  		<h2>sub-título</h2>
  		<div class="conteudo">Conteúdo</div>
    </div>      
</div>

Se no seu script box.js escrever o seguinte comando:

var boxes = document.querySelector(".box")

O resultado seria um nodeList contendo todos os nós identificados com a classe box.

NodeList é uma coleção de nós, como no caso do exemplo acima, cada box é um nó do nodeList boxes.

Objetos NodeList são coleções de nodos semelhantes aos objetos retornados pelos métodos Node.childNodes e document.querySelectorAll().

Em suma, são coleções de objetos. Então, o DOM é formado de objetos, que podem conter NodeList de outros objetos.

Já o HTMLColection é uma coleção de elementos HTML (div, p, a, img, etc...).
Vou deixar um trecho de uma explicação que está bem legal de entender:

Citação

Um HTMLCollectioné uma lista de elementos DOM que correspondem a determinados critérios. Por exemplo, eles podem ter o mesmo nome de tag ou classe. Ou podem estar relacionados em um contexto específico, como filhos de um elemento específico.

Expandir

Fonte: https://www.freecodecamp.org/news/dom-manipulation-htmlcollection-vs-nodelist/

Recomendo ler este link acima, que explica com detalhes, a diferença entre eles, e as semelhanças.

Swalls · 4 horas atrás

Node é tudo no DOM: tags, textos, comentários... literalmente tudo que aparece no HTML é considerado um node (ou "nó") na árvore do DOM.

Element é um tipo específico de node: apenas os que são tags HTML, ou seja, aqueles delimitados por < >. Esses nós são chamados de Element nodes.

Quando você usa o método querySelectorAll em algum nó, ele retorna uma NodeList contendo os elementos (tags) que correspondem ao seletor CSS fornecido. essa lista não inclui nós de texto ou comentários — apenas elementos.

Já quando você usa a propriedade children em um nó, ela retorna somente os filhos que são elementos (ou seja, tags HTML), dentro de uma HTMLCollection.

Mas por que não se chama "ElementList"?

Porque uma HTMLCollection não é uma lista tradicional (como NodeList). Ela é um objeto array-like, ou seja, você consegue acessar os itens por índice e ela tem a propriedade length, mas não possui todos os métodos de array como forEach, map, etc.

Além disso, a HTMLCollection é viva (live): ela sempre reflete o estado atual do DOM.
É como olhar pela janela: cada vez que você olha, vê o estado atual do mundo — não uma foto tirada antes.

Já a NodeList pode ser viva ou estática, dependendo do método que a gerou:

childNodes → retorna uma NodeList viva

querySelectorAll → retorna uma NodeList estática

Ou seja: a NodeList retornada por querySelectorAll não se atualiza automaticamente se você mudar o DOM depois da chamada.

"Mas a NodeList é uma cópia?" Quase, ela não é uma cópia total da DOM (isso seria muito pesado). A NodeList é uma lista de referências para os elementos da DOM naquele momento.
Isso significa que, se você mudar propriedades de um elemento na DOM (como classes, atributos, estilos), essas mudanças serão refletidas nos objetos da NodeList.

"Mas e se eu excluir um desses elementos da DOM? Ele some da NodeList?"
Não! aquele dado continua existindo enquanto houver uma referência para ele, se você apagar a referência, a lista em sí ou renomear a variavel que mantém essa lista sem ter outra para ela, o coletor de lixo (garbage collector) do JavaScript o eliminará, caso não haja mais nada apontando.

E se eu quiser uma cópia real de um nó?

Aí você pode usar o método .cloneNode(deep). Ele cria uma cópia real (e opcionalmente profunda, com filhos) do nó, e não apenas uma referência.

Mas use com cautela: clonar nós pode ser pesado em termos de desempenho, e normalmente só é necessário em situações bem específicas.

metadados não são nodes. Por exemplo, atributos de um elemento (<div class="teste">) não são nodes, são propriedades de Element nodes.

ps: isso é como eu entendo do tempo que estudei javascript, não é minha linguagem principal. @DiF me corrija se errei algo.

DiF · 1 hora atrás

@Swalls Que colocação perfeita. Não há nada para ser corrigido. Basicamente é isso.

Deixando mais claro em poucas palavras para o colega @Eli Almeida

A principal diferença entre um HTMLCollection e um NodeList reside na forma como são atualizados e no tipo de nós que contêm. Um HTMLCollection é uma coleção dinâmica que se atualiza automaticamente quando tem mudanças no DOM, enquanto que um NodeList é geralmente estático.

Exemplo prático

Quando usar HTMLCollection?

Quando precisa de uma lista dinâmica que se atualiza automaticamente.

Em um formulário, por exemplo, tem o campo adicionar arquivo em um campo file, porém, você tem mais de um arquivo... então clica no botão "adicionar novo arquivo" este botão de adcionar, cria um novo elemento de input file. Se porventura, listar os elementos, de botão, vai retornar um HTML collection.

Quando pretende acessar elementos por nome, ID ou índice, vai ser sempre uma HTML collection.

Quando usar NodeList?

Quando precisa de uma coleção estática.

Se você não precisa que a lista seja atualizada dinamicamente, então nodeList é usado.

Quando quer trabalhar com uma variedade de nós, se você precisa de uma coleção que contenha todos os tipos de nós do DOM (elementos, texto, comentários, etc.), o NodeList é mais flexível.

Estudo de caso:

Vamos supor que você tenha uma lista <ul> com alguns elementos <li>. Se você quiser uma coleção que reflita automaticamente as mudanças (como adicionar ou remover elementos), você pode usar um HTMLCollection obtido com

document.getElementById('Lista').children

.

Se você quiser uma coleção que contenha todos os nós dentro da lista, incluindo os elementos e o texto entre eles, você pode usar um NodeList obtido com

document.getElementById('Lista').childNodes

.

Entrar

Javascript Como colocar input em Javascript?

Posts recomendados

Eli Almeida

UserX_

Swalls

Eli Almeida

DiF

Swalls

Eli Almeida

DiF

Swalls

DiF

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 1 usuário está online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos