Почему не работает JS-код?
Разница в том, когда выполняется код.
Первые две строки выполняются сразу при загрузке документа. Переменной num назначается значение пустого на тот момент input'а.
На btn вешается слушатель события. Он не выполняется сразу, а сидит и ждёт события. При каждом возникновении события, выполняется внутренний код функции getSquareNum()
Код внутри функции – вот этот alert() – выполняется позже, при нажатии кнопки. Выводит определённое в самом начале значение num в квадрате.  Или же берет свежее, «на сейчас», значение из input'а во втором варианте кода с «если вместо num подставить document.get...».
Потому что num - это копия значения элемента.
Лучше сделать так, чтобы num была указателем на сам элемент:var num = document.getElementById("number"); //здесь value опускаем
var btn = document.getElementById("btn");
 
btn.addEventListener("click", function() {
  alert(num.value*num.value); //получаем текущее значение
});