[Dúvida] Ajuda na criação de javascript | Front-end | Alura

const dataNascimento = document.querySelector('#nascimento');

dataNascimento.addEventListener('blur', (evento) =>{
    validaDataNascimento(evento.target);
})

function validaDataNascimento(input){
    const dataRecebida = new Date(input.value);
    maiorQue18(dataRecebida);
    let messagem = '';

    input.setCustomValidity(messagem)

    if(!maiorQue18(dataRecebida)){
        messagem = 'Você precisa ter 18 anos para se cadastrar'
    }
}

function maiorQue18(data){
    const dataAtual = new Date();
    const dataMaisDe18 = new Date(data.getUTFullYear() + 18, data.getUTMonth(), data.getUTDate());

    return dataMaisDe18 <= dataAtual
}

Olá estou tendo um serio problema em entender o javascript vocês podem me ajudar? Vou por como minha cabeça ve as coisas

dataNascimento, evento, validaDataNascimento, dataRecebida, maiorQue18, dataRecebida, messagem, dataAtual, dataMaisDe18,

São variaveis, então se eu colocasse qualquer outro nome funcinaria do mesmo jeito? E oque nessas variaveis junta o javascript com o html?

document = é a pagina inteira html, querySelector = ?, addEventListener = ?, blur = ?, target = ?, function = cria uma função, const = cria uma variavel, value = ?, let = cria uma variavel, setCustomValidity = ?, if = se algo acontece tal coisa então faça tal coisa, new = novo, Date() = data completa, dia, mes, ano, getUTFullYear() = ano, getUTMonth() = mes, getUTDate() = dia, return = me devolve algo ,

Esses são da linguagem javascripst correto?

#nascimento = id, input = class,

esses dois vem do html correto?

Bom dia, Yara!

dataNascimento, evento, validaDataNascimento, dataRecebida, maiorQue18, dataRecebida, messagem, dataAtual, dataMaisDe18,

São variaveis, então se eu colocasse qualquer outro nome funcinaria do mesmo jeito?

Sim, é tanto que está em português facilitando a identificação já que as palavras reservadas da sintaxe das linguagens de programação por padrão são derivadas da língua inglesa. O nome das variáveis são preferência ou conveniência do programador, então você é livre para atribuir qualquer nome e valor para armazenar na memória de seu programa. Existem três tipos de "variáveis" no Javascript var, let e const, a diferença entre elas você aprende com o tempo.

Uma página web é um documento, este documento é escrito através de códigos, nós chamamos este documento de (DOM) que significa Document Object Model, e o DOM por sua vez é uma interface de programação (API) para os documentos HTML. Isto significa basicamente que através do DOM podemos se conectar à página e ao arquivo HTML via uma linguagem de programação.

document é a pagina inteira html

Basicamente sim, com o document estamos acessando o DOM, ou seja o objeto de document representa o próprio documento da página, e através de querySelector estamos acessando um método deste documento (DOM):

const dataNascimento = document.querySelector('#nascimento');

Então no código acima basicamente estamos atribuindo à uma constante, o valor que document.querySelector retornar, basicamente o Javascript acessa o documento de sua página html e procura por um elemento que tenha o ID igual à nascimento, então este elemento html fica armazenado na variável dataNascimento.

querySelector, addEventListener, blur, target, value

Todos este valores são métodos, ou seja maneiras de acessar o documento da página via Javascript, e donde vem estes métodos? Exato, do DOM, por isso o DOM é uma API (Application Programming Interface ou Interface de Programação de Aplicação), pois ele fornece métodos e maneiras de acessar o documento da página, da mesma forma que uma interface fornece diversas funções para você realizar sem precisar saber o que está por baixo dos panos. Agora analisando o código:

dataNascimento.addEventListener('blur', (evento) =>{
    validaDataNascimento(evento.target);
})

Acessamos a variável dataNascimento que está armazenando o nosso elemento da página HTML, chamamos o método addEventListener que é um método para elementos HTML, o addEventListener basicamente ficará observando algum evento acontecer naquele elemento. Aí como parâmetros passamos o nome do evento (estes eventos são especificados na documentação, há diversas formas de interagir com um elemento html e todas possuem uma identificação), quando o evento blur ocorrer, nós dizemos que o evento foi disparado e assim pegamos o evento em uma função callback (evento) => { e aqui entre as chaves especificamos o que é para ser feito }, tudo o que estiver entre chaves nós dizemos que é o corpo da função, caso as chaves seja de uma estrutura condicional if por exemplo, dizemos que é o corpo do if, as chaves definem o escopo que aquele bloco lógico irar atuar.

Então o DOM torna possível acessar o documento HTML e oferece diversos métodos para trabalhar com estes métodos e elementos, com o tempo você conhecerá vários. E com isto, podemos acessar um elemento específico, detectar um evento específico e chamar uma função que nós mesmos criamos como validaDataNascimento() para validar a data de nascimento inserida pelo usuário.

validaDataNascimento(evento.target);

Por exemplo, em evento.target nós estamos pegando este evento e passando para nossa função:

function validaDataNascimento(input){
    const dataRecebida = new Date(input.value);
    // O evento vem através do paramêtro input (que você escolhe o nome do parâmetro que quiser)
    // E após isto pegamos o valor que foi inserido naquele evento com input.value
    maiorQue18(dataRecebida);
    let messagem = '';

    input.setCustomValidity(messagem)

    if(!maiorQue18(dataRecebida)){
        messagem = 'Você precisa ter 18 anos para se cadastrar'
    }

Isto pode ser muita informação no primeiro momento, se quiser entender bem como isto tudo se conecta sugiro você realizar as seguintes formações em ordem:

Com isto você vai entender esses conceitos de boa e construir uma base de como funciona a criação de interfaces web e sua programação.

Mergulhe em programação