Scribd
Cargar
9 vistas

Javascript Parte 2

Cargado por

gyme.987
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas

Javascript Parte 2

Cargado por

gyme.987
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 29

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
Clicker!
<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>

let contador = 0;
function clickear() {
//incrementa el valor de contador
contador = contador + 1;
//forma corta: contador++
alert("Hiciste " + contador + " clicks")
}
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 un botón

También podría gustarte