JavaScript para maquetadores

JavaScript

  • Lenguaje de programación interpretado
  • Se utiliza principalmente en su forma del lado del cliente.
  • Implementado como parte de un navegador web
  • Permite mejoras en la interfaz de usuario y páginas web dinámicas
  • JavaScript y Java no están relacionados

Javascript

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Aprendiendo javascript</h1>
    <p><button onclick="document.getElementById('demo').innerHTML = Date();">
    Hacer click aquí para mostrar la fecha y hora</button></p>
    <p id="demo"></p>
  </body>

</html>

Javascript

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Aprendiendo javascript</h1>
  </body>


<script type="text/javascript">
    alert("hola gente");
</script>


</html>

jQuery

  • Librería de JavaScript
  • Permite simplificar la manera de interactuar con los documentos HTML
  • Permite manipular el árbol DOM
  • Permite manejar eventos
  • Permite desarrollar animaciones
  • Permite agregar interacción con AJAX
  • Es la más utilizada en la actualidad
  • Descargar de http://jquery.com/

JQuery

Ejemplo Base

  • Crear una carpeta /js donde pegar el archivo de jquery.
  • Crear el siguiente archivo html en la raíz de nuestro proyecto:
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo</title>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
  // El código va aquí.
  </script>
</body>
</html>

Agregando funcionalidad al inicio

$(document).ready() se ejecuta cuando el dom de todo el documento se ha cargado

$( document ).ready(function() {
    alert("Gracias por visitarnos!");
});

Todo lo que se encuentra entre llaves es un bloque de código, se ejecuta secuencialmente: una instrucción seguida de otra.

 

Las llamadas a funciones se escriben de la forma:

nombre_funcion(parametro1, parametro2);

Agregando funcionalidad a los enlaces

Es posible agregar funcionalidades a los eventos, en este caso, click en un enlace. Por ejemplo:

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "gracias por visitarnos!" );
    });
});

El a entre las comillas de $("a") es un selector, puede ser cualquiera de CSS3 y más, indica a qué elementos se va a escuchar cuando ocurra en evento click, existen muchos eventos que podemos escuchar. Dentro de su bloque escribimos nuestra funcionalidad.

Evitando que los enlaces ejecuten su funcionalidad por defecto

En el ejemplo anterior el browser sigue ejecutando la función normal (el ir al enlace). Si no queremos eso usamos event.preventDefault();

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Como puedes ver, este enlace ya no lleva a jquery.com" );
        event.preventDefault();
    });
});

Agregando y quitando clases

Por ejemplo, tenemos un estilo asignado al elemento a.test:

<style>
    a.test {
    font-weight: bold;
    }
</style>

y dentro de nuestro $(document).ready:

$( "a" ).hover(function() {
    $( "a" ).addClass( "test" );
}, function() {
    $( "a" ).removeClass( "test" );
});

Efectos especiales

JQuery brinda un conjunto de efectos especiales predefinidos, en este ejemplo ocultamos el enlace al hacer click:

$( "a" ).click(function( event ) {
    event.preventDefault();
    $( this ).hide( "slow" );
});

Ajax

Con javascript, es posible traer otras páginas o fragmentos de ellas y ponerlos dentro de nuestro DOM o hacer operaciones con lo que obtenemos.

<p>Este contenido está en otra página</p>
<p id="importante">Y esto es muy importante</p>

Como ejemplo creamos un archivo, mas_contenidos.html:

Ajax

Y a nuestro archivo principal, le añadimos el método .load, que es uno de muchos para trabajar con ajax:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo Ajax</title>
</head>
<body>

  <p id="contenidos">Tenemos los contenidos originales</p>
  <a href="mas_contenidos.html">Cargar más</a>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
	$( document ).ready(function() {
        $( "a" ).click(function( event ) {
            event.preventDefault();
            $( "#contenidos" ).load( "mas_contenidos.html" );
        });
	});
  </script>
</body>
</html>

Ajax

Si queremos  que pase algo luego de que se termine de cargar, lo agregamos como función de segundo argumento:

$( "#contenidos" ).load( "mas_contenidos.html" , function() {
    alert( "Se han cargado los contenidos." );
});

Si queremos  que sólo se lea una parte del documento de ajax, se agregan como fragmento al primer argumento, en forma de selector, luego de un espacio:

$( "#contenidos" ).load( "mas_contenidos.html #importante" );

Ajax

Un ejemplo mucho más completo:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo Ajax</title>
</head>
<body>

  <p id="contenidos">Tenemos los contenidos originales</p>
  <a href="mas_contenidos.html">Cargar más</a>
  <p id="cargando">Cargando ...</p>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
	$( document ).ready(function() {
    
        $("#cargando").hide();
    
        function cargar() {
            $( "#contenidos" ).load( "mas_contenidos.html #importante" , function() {
                $("#cargando").fadeOut("slow");
            });
        }
    
        $( "a" ).click(function( event ) {
            event.preventDefault();
            $("#cargando").fadeIn("slow", cargar);
        });
	});
  </script>
</body>
</html>

Enlaces útiles

Made with Slides.com