EVENT HANDLERS AND CALLBACK FUNCTIONS

Observemos a estrutura do código:

var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
  // code that takes care of the server response
}

xhttp.open('GET', '/data.json', true)
xhttp.send()

Observe que a requisição para o servidor é enviada na última linha do código, mas o código de resposta é encontrado acima

Na linha

xhttp.onreadystatechange = function () {

um event handler para o evento onreadystatechange é definido para o objeto xhttp que realiza a requisição.

Quando o estado do objeto é alterado, o navegador realiza a chamada da função event handler

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // code that takes care of the server response
  }
}

A função checa se readyState é igual à 4 e o status code do HTTP é possue resposta 200.

O mecanismo de chamada de event handlers é muito comum em JavaScript

Event Handlers functions são chamadas de callback functions

O código da aplicação não invoca a função, mas o ambiente - o navegador, invoca a função em um momento específico, quando o evento ocorre (e por isso event handler)

DOCUMENT OBJETCT MODEL or DOM

Podemos representar uma página HTML como uma estrutura implícita de árvore

html
	head
		link
		script
	body
		div
			h1
			div
				ul
					li
					li
				ul
			form
				input
				input

O funcionamento do navegador é baseado nesta ideia, de que a estruturação da linguagem de marcação HTML se decorre em formato de árvore

DOM é uma API que habilita modificação de programação dos elementos de árvore correspondentes à páginas web