Pasos

Paso 1

En la última página, escribimos algo de jQuery que lucía como éste. Vamos a comentarlo por ahora, y veremos si podemos replicar la misma funcionalidad con JavaScript puro. Agrega etiquetas de comentario antes de estas líneas. En JavaScript, la manera más fácil de comentar una línea es poniéndole // al principio. Continuemos e intentemos esto:

//$("#copyright").click(function(){ 
//  $(this).css('color','purple'); 
//});"

Ahora si guardas la página, actualizas, y das click en copyright, nada debería pasar.

Paso 2

Debajo de las líneas que acabas de comentar, escribiremos la misma funcionalidad pero ahora con JavaScript. Hay muchas maneras elegantes de hacer esto; aquí vemos una no tan elegante, pero corta:

document.getElementById('copyright').onclick = function () { 
   this.style.color = 'purple';
}

Si guardas la página, actualizas, y das click, deberías ver el mismo resultado visual (texto púrpura), pero no es la mejor forma de hacerlo por dos razones. No sólo es escribir más, y difícil de leer, también se puede romper fácilmente. (Tú sólo puedes poner un atributo on click a una cosa, ¡entonces esto podría ser sobreescrito por otro script en la página y después no funcionará!) jQuery funciona de diferente forma, escuchando eventos, entonces diferentes funciones pueden ser escuchadas por el mismo evento, y puedes agregar una nueva respuesta a un evento sin preocuparte acerca de sobrescribir uno ya existente.