alejandrofloresm/error-jquery.html

## error-jquery.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description">
  <title>File</title>
  <script>
    // Este método va a dar error por que jQuery no se ha cargado
    $('body').change(function() { });
  </script>
</head>
<body>
  <script>
    // Este método va a dar error por que jQuery no se ha cargado
    $('body').change(function() { });
  </script>
  <script>
    // Si por alguna razón no se puede poner el código antes de que
    // se cargue jquery entonces se tiene que hacer el binding con el
    // evento de carga de la página y después ejecutar el código de
    // jQuery
    document.addEventListener('DOMContentLoaded', function(){
      // Este método no va a dar error por que jQuery ya está cargado
      $('body').change(function() { });
    }, false);
  </script>
  <p>Nada</p>
  <script src="jquery.js"></script>
  <script>
    // Este método no va a dar error por que jQuery ya está cargado
    $('body').change(function() { });
    // Sin embargo es una mala práctica ejecutar las funciones de jQuery fuera de una
    // función o bien fuera del document ready como se debería de ejecutar es:

    // 1. Colocamos el document ready abreviado (https://api.jquery.com/ready/):
    $(function() {
      // 2. Hacemos el binding de la función
      $('body').change(function() { });

      // Ojo que se puede caer en el error de que se ponga todo el código dentro de está
      // función, eso es también una mala práctica, lo mejor es que se mande a llamar
      // funciones que ejecuten una sola cosa, así:
      BindBodyChange();
    });

    /**
     * Binds the change of the body
     */
    function BindBodyChange() {
      $('body').change(function() { });
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="Description">
	<title>File</title>
	<script>
	// Este método va a dar error por que jQuery no se ha cargado
	$('body').change(function() { });
	</script>
	</head>
	<body>
	<script>
	// Este método va a dar error por que jQuery no se ha cargado
	$('body').change(function() { });
	</script>
	<script>
	// Si por alguna razón no se puede poner el código antes de que
	// se cargue jquery entonces se tiene que hacer el binding con el
	// evento de carga de la página y después ejecutar el código de
	// jQuery
	document.addEventListener('DOMContentLoaded', function(){
	// Este método no va a dar error por que jQuery ya está cargado
	$('body').change(function() { });
	}, false);
	</script>
	<p>Nada</p>
	<script src="jquery.js"></script>
	<script>
	// Este método no va a dar error por que jQuery ya está cargado
	$('body').change(function() { });
	// Sin embargo es una mala práctica ejecutar las funciones de jQuery fuera de una
	// función o bien fuera del document ready como se debería de ejecutar es:

	// 1. Colocamos el document ready abreviado (https://api.jquery.com/ready/):
	$(function() {
	// 2. Hacemos el binding de la función
	$('body').change(function() { });

	// Ojo que se puede caer en el error de que se ponga todo el código dentro de está
	// función, eso es también una mala práctica, lo mejor es que se mande a llamar
	// funciones que ejecuten una sola cosa, así:
	BindBodyChange();
	});

	/**
	* Binds the change of the body
	*/
	function BindBodyChange() {
	$('body').change(function() { });
	}
	</script>
	</body>
	</html>