Para conseguirmos interagir o html com o css, temos que fazer a utilização de um id, esse id vai dentro do elemento dentro do html
Document é um comando especifico do js que representa a estrtutura da pagina HTML, quando escrevemos document nos estaremos nos referenciando a toda a estrutura do nosso HTML, e em seguida iremos selecionar o comando do elemento que queremos usar no js, porém, utilizando sempre um "." entre aonde queremos nos referenciar e o elemento que queremos pegar.
O ponto serve para que possamos indicar ao js que o elemento que queremos pegar estar naquela pagina que estamos nos referenciando.
O comando que vai buscar o nosso elemento h1 no nosso html é o getElementById, e tudo junto fica "document.getElementById" que significa que, dentro do nosso document (que é nosso html) pegue o elemento pelo id e vamos dizer qual id queremos pegar, para isso vamos adicionar ("o id que queremos pegar")
O comando para colocar um texto dentro do nosso elemento no html é o .textContent="nosso texto", ou seja, o comando todo ficaria da seguindo forma: document.getElementById("ola").textContent="Conteudo do texto"
As variaveis surgiram para que precisasse ficar escrevendo toda a frase ou numero que a gente qeu usar varias vezes. As variaveis são espaços dentro da memoria dentro do nosso programa que a gente vai dar um nome para poder guardar alguma informação, e essa informação vai poder ser acessada e manipulada ao longo do codigo inteiro