Programacion de aplicaciones web teoria 4

Vista previa del material en texto

Programación de 
Aplicaciones Web
Javascript - Parte II
JAVASCRIPT
Temario:
● Práctica
● Eventos
● DOM
● JQUERY
Javascript - Repaso
● Validar formularios (lo que no permita HTML5)
● Reaccionar a lo que haga el usuario (click, teclear, etc)
● Cambiar algo al pasar el mouse (si no lo permite CSS)
● Partes de páginas que se muestran/ocultan
● Hacer cálculos complejos
Javascript - Repaso
Un evento es algo que ocurre en el sistema, originado por el 
usuario o otra parte del sistema y que se avisa al sistema.
● Ejemplos: 
○ El usuario hace click.
○ Se terminó de cargar la página.
○ Pasó un segundo desde que se terminó de procesar. 
Javascript - Repaso
Un evento es algo que ocurre en el sistema, originado por el 
usuario o otra parte del sistema y que se avisa al sistema.
● Ejemplos: 
○ El usuario hace click.
○ Se terminó de cargar la página.
○ Pasó un segundo desde que se terminó de procesar. 
Ej1: alert dentro de una función saludar
Ej2: Botón que llame a la función saludar
Javascript - Repaso
Ejemplos de eventos:
• onclick
• onkeydown
• onload
• onfocus
• onchange 
• ondrag
• oncopy
https://www.w3schools.com/jsref/dom_obj_event.asp
http://www.w3schools.com/jsref/event_onclick.asp
http://www.w3schools.com/jsref/event_onkeydown.asp
http://www.w3schools.com/jsref/event_onload.asp
http://www.w3schools.com/jsref/event_onfocus.asp
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_ondrag.asp
http://www.w3schools.com/jsref/event_oncopy.asp
Clicker!
let contador = 0;
function clickear() {
 //incrementa el valor de contador
 contador = contador + 1; 
 //forma corta: contador++ 
 alert("Hiciste " + contador + " clicks")
}
<div class="container">
 <h1>Bienvenido</h1>
 <p>Llegaste a nuestro contador de click!</p>
 <button onclick="clickear()">Contar click!</button>
</div>
<script type="text/javascript" src="js/main.js"></script>
use strict - consola 
"use strict";
console.log("Paso 1: declarando funciones");
let contador = 0;
function clickear() {
 //incrementa el valor de contador
 console.log("Paso 3: Valor anterior del contador:" + contador);
 contador++;
 console.log("Paso 4: El contador ahora vale:" + contador);
 alert("Hiciste " + contador + " clicks")
 //es lo mismo que contador = contador + 1
}
console.log("Paso 2: continua ejecución");
Funciones ya existentes
Arbol HTML - DOM
Una manera de comprender las dependencias y relaciones entre elementos es 
mediante un diagrama de árbol. 
Arbol HTML - DOM
● Representación estructurada del documento
● Permite modificar el contenido
● Es lo que conecta las páginas web con Javascript.
El DOM es un árbol de objetos…
Atributos
Métodos
Arbol HTML - DOM
Existen muchos objetos ya predefinidos. Algunos son:
● Window: La ventana/pestaña del navegador. Es quien 
tiene el método “alert” que usamos antes.
● History: El historial, nos permite ir adelante, atrás, etc
● Location:La URL de la barra de navegación.
● document: El DOM de los elementos del body y header de 
este archivo HTML.
Arbol HTML - DOM
● Al documento le pedimos el nodo del elemento que 
queremos editar
● A ese objeto (el nodo del arbol en cuestion) le modificamos 
los atributos que necesitemos con un nuevo valor
● Se pueden obtener elementos del DOM consultando por un 
ID, nombre, clase o un selector.
let elem = document.getElementById("identificador");
Arbol HTML - DOM
Las propiedades del DOM (HTML) se pueden leer/editar 
desde Javascript.
let lampImg = document.getElementById("lamp");
let lampImgAnterior = lampImg.src;
lampImg.src = "foto.png";
let unDiv = document.getElementById("unDiv");
unDiv.innerHTML = "Cambiar contenido";
Arbol HTML - DOM
Ejercicio: 
Un cuadro de texto para ingresar un nombre.
Un párrafo para mostrar un saludo al nombre ingresado.
Arbol HTML - DOM
Al DOM podemos:
● Agregar nodos (es como escribir nuevas etiquetas en el 
HTML).
● Editar nodos (es como cambiar el HTML) para alterar 
propiedades o el contenido interno (el HTML que 
contiene).
● Borrar nodos (es como borrar las etiquetas).
JAVASCRIPT - JQuery
Es un framework javascript
Framework: librerías de código que contienen procesos o rutinas ya listos para 
usar.
● Necesidades habituales
● Ya están programadas
● Múltiples pruebas
● Mejoras frecuentes
“Los programadores hacemos uso de los frameworks para facilitarnos las tareas.”
JAVASCRIPT - JQuery
El propósito de Jquery es hacer mucho más fácil el uso de JavaScript en un 
sitio web.
Jquery es una librería ligera de JavaScript.
Jquery toma un montón de tareas comunes que requieren muchas líneas de 
código de JavaScript por realizar, y las envuelve dentro de métodos que se 
pueden llamar con una sola línea de código.
JAVASCRIPT - JQuery
Jquery también simplifica un montón de cosas complicadas de JavaScript, 
como las llamadas a AJAX y la manipulación de DOM
La librería Jquery contiene las siguientes características:
•Manipulación HTML/DOM
•Manipulación CSS
•Métodos de eventos HTML
•Efectos y animaciones
•AJAX
JAVASCRIPT - JQuery
Utilización de JQuery en un sitio web
● Descargar
<Head>
<Script src = "jquery-1.10.2.min.js"> </ script>
</ Head>
● Referencia
<Head>
<Script src = "http://cdn.static.w3big.com/libs/jquery/1.10.2/jquery.min.js">
</ Script>
</ Head>
JAVASCRIPT - JQuery
Utilización de JQuery en un sitio web
● Sintaxis
$(Selector).Acción()
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Notación JSON
JSON (JavaScript Object Notation) es un formato sencillo para el intercambio de 
información. El formato JSON permite representar estructuras de datos (arrays) y 
objetos (arrays asociativos) en forma de texto. La notación de objetos mediante 
JSON es una de las características principales de JavaScript y es un mecanismo 
definido en los fundamentos básicos del lenguaje.
En los últimos años, JSON se ha convertido en una alternativa al formato XML
Características JSON
● JSON es un lenguaje de modelado de datos
● Consiste en pares "clave - valor"
● Los valores pueden cadenas, números o boleanos, así como 
otros objetos JSON, con cualquier nivel de anidación
● Es un formato flexible, ligero y fácilmente transferible a través de 
las redes
Ventajas de JSON
● La lectura del código resulta de fácil lectura y la información es 
suficientemente expresiva para poder ser leída por personas, además 
de máquinas.
● El tamaño de los archivos que se transfieren es ligero.
● El código está basado en el lenguaje Javascript, lo que es ideal para las 
aplicaciones web.
● Todos los lenguajes disponen de funciones para interpretar cadenas 
JSON y convertir datos en cadenas JSON válidas.
● Se escribe en archivos de texto plano con codificación UTF8, que es 
compatible con todos los sistemas.
Ventajas de JSON
{
 "nombre":"Jonh Doe",
 "profesion":"Programador",
 "edad":25,
 "lenguajes":["PHP","Javascript","Dart"],
 "disponibilidadParaViajar":true,
 "rangoProfesional": {
 "aniosDeExperiencia": 12,
 "nivel": "Senior"
 }
}
Reglas de sintaxis en JSON
Todos los archivos de JSON representan una de estas dos estructuras:
1. On objeto, es decir, una lista de pares clave / valor.
2. Una colección de elementos, lo que se conoce como array o arreglo
Llaves para representar objetos
Comas para separar los pares clave / valor
Corchetes para representar los arrays
Limitaciones JSON
No hay un esquema
No hay tipos
No es posible insertar comentarios
Lo que viene…
Uno de los mecanismos más frecuentes de 
las aplicaciones modernas es el acceso a 
datos de servicios web, generalmente 
implementados mediante un API REST que 
devuelve archivos en formato JSON.
Arbol HTML - DOM
Armar un formulario que contenga:
● Campo (sólo lectura) que cargue automáticamente la fecha 
actual.
● Desplegable que solicite ingresar texto en el caso de que 
se elija una de las opciones existentes.
● Desplegables relacionados
● Selección que habilita unbotón