Cuando una página web se carga por primera vez, jQuery disparará un evento document.ready permitiéndonos ejecutar código antes de que la página empiece a renderizarse. Este es el momento oportuno para ejecutar cualquier código de inicialización.

Nuestros ejemplos de CoffeeScript con jQuery estarás basados en un archivo HTML básico con la siguiente estructura:

<!doctype html>

<html lang="es">

<head>
  <meta charset="utf-8">
  <title>Ejemplos jQuery</title>
</head>

<body>

  <!-- Tu código CoffeeScript va aquí -->
  <script type="text/coffeescript">

  </script>

  <!-- Referencia jQuery y CoffeeScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://coffeescript.org/extras/coffee-script.js"></script>
</body>

</html>

Usando esta plantilla podemos añadir nuestro código CoffeeScript dentro del tag

<SCRIPT TYPE=»text/coffeescript»>.

Existen dos métodos básicos para manejar el evento document ready:

  1. Podemos asignar un gestor de evento ready a un objeto documento envuelto en jQuery:
$(document).ready ->
  console.log 'Documento preparado...'

2. Podemos usar el atajo provisto por jQuery:

$ ->
  console.log 'Document preparado (atajo)...'

Veamos como funciona

En los códigos anteriores, hemos visto dos modos de vigilar a un evento document.ready.

El primer método vigila al evento ready disparado por el objeto document. En este ejemplo, nuestro código muestra Documento preparado… en la consola del navegador.

El segundo método lleva a cabo la misma tarea usando el atajo de jQuery para manejar el evento document.ready  como podemos ver en los ejemplos en CodePen:

NOTA: Para visualizar la consola, en result pulsa con el botón derecho sobre el fondo blanco e «inspeccionar elemento»

See the Pen CoffeeScript y jQuery I by 0utKast (@0utKast) on CodePen.

 

Anterior (¿Qué es CoffeScript?)         Siguiente (Manejar eventos DOM)              

Uso de CoffeeScript con jQuery

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>