[Dúvida] Duvidas sobre o exercício 1

Ola, tudo bem?

Gostaria de sanar uma grande duvida e dificuldade que obtive com o codigo.

let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora do Desafio!';

function exibirMensagemNoConsole() {
    console.log('o botao foi clicado')
}

function exibirAlerta() {
    alert('Eu amo JS!')
}

function exibirPrompt() {
    let nomeDaCidade = prompt('Informe aqui qual o nome da sua cidade:')
    alert(`estive em ${nomeDaCidade} e lembrei de voce!`)
}

function somandoDoisNumeros() {
    let primeiroNumero = parseInt(prompt('Digite o primeiro numero'));
    let segundoNumero = parseInt(prompt('Digite o segundo numero!'));
    let resultado = primeiroNumero + segundoNumero;
    alert(`${primeiroNumero} + ${segundoNumero} = ${resultado}`)
}

Esta seria a resolução, eu corrigi de acordo com o que estava escrito no portal e tudo estava correto, tive bastante dificuldade pra fazer esta tarefa para ser bem sincero. Não me dei bem como Index + JS. Tem algum modo de olhar para esse vinculo dos dois de forma mais pratica? Entendi todos os conceitos de utilizar o vinculo com function e tambem com document.querySelector. Mas na pratica, aparentou ser mais dificil do que parecia. Uma outra duvida, no index, eu preciso escrever o () nas marcalções?

     <h1></h1>
    </header>
    <main class="container">
        <button onclick="exibirMensagemNoConsole()" class="button">Console</button>
        //na parte de "exibirMensagemNoConsole() <= este () deve ser colocado sempre? eu funciona tambem sem o ()? Acredito que seja a unica coisa que estava diferente do meu codigo para o do professor.
        <button onclick="exibirAlerta()" class="button">Alert</button>
        <button onclick="exibirPrompt()" class="button">Prompt</button>
        <button onclick="somandoDoisNumeros()" class="button">Soma</button>
    </main>

Talvez sejam perguntas mais bobas, mas realmente fiquei um pouco confuso nesse modulo.