PROGRAMACIÓN WEB

CON PYTHON Y JAVASCRIPT

 Usuarios en Django
Lo último que quedó pendiente de Django en la clase anterior es la idea de autenticación o permitir a los
usuarios iniciar y cerrar sesión en un sitio web.

Afortunadamente, Django hace que esto sea muy fácil, así que veamos un ejemplo concreto de cómo lo
haríamos.

Comenzaremos creando una nueva aplicación llamada usuarios. A continuación, realizaremos todos los
pasos normales para crear una nueva aplicación, pero en nuestro nuevo archivo urls.py, agregaremos
algunas rutas más:
urlpatterns = [
path('', views.index, name="index"),
path("login", views.login_view, name="login"),
path("logout", views.logout_view, name="logout")
]
 Usuarios en Django
Comencemos por crear un formulario en el que un usuario pueda iniciar sesión. Crearemos un archivo
layout.html como siempre y luego crearemos un archivo login.html que contiene un formulario y
que muestra un mensaje si existe.
{% extends "usuarios/layout.html" %}

{% block body %}
{% if mensaje %}
<div>{{ mensaje }}</div>
{% endif %}

<form action="{% url 'login' %}" method="post">

{% csrf_token %}
<input type="text", name="username", placeholder="Username">
<input type="password", name="password", placeholder="Password">
<input type="submit", value="Login">
</form>
{% endblock %}
 Usuarios en Django
Ahora, en views.py, agregaremos tres funciones:

def index(request):
# Si el usuario no esta logueado entonces volver al login
if not request.user.is_authenticated:
return HttpResponseRedirect(reverse("login"))
return render(request, "usuarios/user.html")

def login_view(request):
return render(request, "usuarios/login.html")

def logout_view(request):
# Pass es una forma sencilla de decirle a Python que no haga nada
pass
 Usuarios en Django
A continuación, podemos ir al sitio de administración y agregar algunos usuarios. Después de hacer eso, volveremos a
views.py y actualizaremos nuestra función login_view para manejar una solicitud POST con un username y un
password:
# Imports adicionales que vamos a necesitar:
from django.contrib.auth import authenticate, login, logout

def login_view(request):
if request.method == "POST":
# Acceder a los datos de username y password del formulario
username = request.POST["username"]
password = request.POST["password"]

# Verificar si user y pass son correctos, retornando el objeto Usuario si esta todo ok
usuario = authenticate(request, username=username, password=password)

# Si se retorna el objeto usuario, loguearse y redireccionar a la pagina index:

if usuario :
login(request, usuario)
return HttpResponseRedirect(reverse("index"))
# Sino, retornar a la pagina login con un nuevo contexto
else:
return render(request, "usuarios/login.html", {
"mensaje": "Credenciales no validas"
})
return render(request, "usuarios/login.html")
 Usuarios en Django
Ahora, crearemos el archivo user.html que la función index renderiza cuando un usuario está autenticado:

{% extends "usuarios/layout.html" %}

{% block body %}
<h1>Bienvenido, {{ request.usuario.nombre }}</h1>
<ul>
<li>Usuario: {{ request.usuario.apellido }}</li>
<li>Email: {{ request.usuario.email }}</li>
</ul>

<a href="{% url 'logout' %}">Desconectarse</a>

{% endblock %}
 Usuarios en Django
Finalmente, para permitir que el usuario cierre sesión, actualizaremos la función logout_view para que utilice la
función de cierre de sesión incorporada de Django:

def logout_view(request):
logout(request)
return render(request, "usuarios/login.html", {
"mensaje": "Ud. se ha desconectado."
})
 JavaScript

En la mayoría de las interacciones online, tenemos una relación entre un cliente/usuario con un servidor mediante un
HTTP Request, que envía una respuesta HTTP Response.
Todo el código Python que escribimos hasta ahora corre del lado del servidor mientras que JavaScript nos permite
correr código del lado del cliente lo que significa que no se requiere interacción con el servidor mientras está
corriendo, permitiendo que los sitios sean mas interactivos.
 JavaScript
Para poder añadir código JavaScript en nuestra página web agregamos las etiquetas <script></script> en cualquier
parte de nuestra pagina HTML.
Por ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola</title>
<script>
alert('¡Hola mundo!');
</script>
</head>
<body>
<h1>Hola!</h1>
</body>
</html>

Donde alert es una instrucción que permite colocar un mensaje en pantalla.

 JavaScript

Una de las características notables de JavaScript es que nos ayuda a implementar un estilo de programación
conocido como Programación Orientada a Eventos.

La programación orientada a eventos es un paradigma que se centra en la detección de eventos y acciones

que deben realizarse cuando un evento es detectado.

Un evento puede incluir cualquier cosa, desde el clic de un botón, mover el cursor, una respuesta al tipeo, o
la carga de una página.

Prácticamente todo lo que haga el usuario interactuando con la página puede considerarse como evento.
En JavaScript utilizamos Event Listeners que esperan un cierto evento y luego ejecutan código.
 JavaScript

Comencemos transformando nuestro código JavaScript anterior en una función llamada hola:
function hola() {
alert('¡Hola mundo!')
}

Ahora hagamos que cada vez que se cliquee un botón se llame a la función hola. Para hacer esto creamos
un botón HTML con un atributo onclick que le da las instrucciones necesarias al navegador para saber
que hacer cuando el botón es clickeado.

<button onclick="hola()">Clic Aquí</button>

 JavaScript

JavaScript es un lenguaje de programación como Python, C o cualquier otro lenguaje con el que haya trabajado antes, lo
que significa que tiene muchas de las mismas características que otros lenguajes, incluidas las variables. Hay tres
palabras clave que podemos usar para asignar valores en JavaScript:

• var: se usa para definir una variable globalmente

var edad = 20;
• let: se utiliza para definir una variable que tiene un alcance limitado al bloque actual, como una función o un bucle
let contador = 1;
• const: se usa para definir un valor que no cambiará
const PI = 3.14;
 JavaScript

Para ver un ejemplo de cómo podemos usar una variable, echemos un vistazo a una página que realiza un seguimiento
de un contador:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador</title>
<script>
let contador = 0;
function conteo() {
contador ++;
alert(contador);
}
</script>
</head>
<body>
<h1>Hola</h1>
<button onclick="conteo()">Contar</button>
</body>
</html>
 JavaScript

Además de permitirnos mostrar mensajes a través de alertas, JavaScript también nos permite cambiar elementos en la
página. Para hacer esto, primero debemos introducir una función llamada document.querySelector. Esta función busca y
devuelve elementos del DOM. Por ejemplo, usaríamos:
let cabecera = document.querySelector('h1');

para extraer un encabezado. Luego, para manipular el elemento que hemos encontrado recientemente, podemos
cambiar su propiedad innerHTML:
cabecera.innerHTML = `Adios`;
 JavaScript

Al igual que en Python, también podemos aprovechar las <!DOCTYPE html>

<html lang="es">
condiciones en JavaScript. Por ejemplo, digamos que en <head>
lugar de cambiar siempre nuestro encabezado a ¡Adiós !, <title>Contar</title>
<script>
deseamos alternar entre ¡Hola! ¡y adiós!. function hola() {
const cabecera = document.querySelector('h1');
if (cabecera.innerHTML === 'Hola') {
Nuestra página podría tener un aspecto similar a la cabecera.innerHTML = 'Adios';
siguiente. Tenga en cuenta que en JavaScript, usamos === }
else {
como una comparación más sólida entre dos elementos cabecera.innerHTML = 'Hola';
que también verifica que los objetos sean del mismo }
}

tipo. </script>
</head>
<body>
Normalmente queremos usar === siempre que sea <h1>Hola</h1>
posible. <button onclick="hola()">Click Aqui</button>
</body>
</html>
 JavaScript

Usemos esta idea de manipulación DOM para mejorar nuestra página de contador:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Contar</title>
<script>
let contador = 0;
function contar() {
contador ++;
document.querySelector('h1').innerHTML = contador;
}
</script>
</head>
<body>
<h1>0</h1>
<button onclick="contar()">Contar</button>
</body>
</html>
 JavaScript

Podemos hacer que esta página sea aún más interesante mostrando una alerta cada vez que el contador llega a un
múltiplo de diez.

En esta alerta, queremos formatear un string para personalizar el mensaje, lo que en JavaScript podemos hacer usando
template literals. Los template literals requieren que haya comillas invertidas (`) alrededor de toda la expresión y un $
y llaves alrededor de cualquier sustitución. Por ejemplo, cambiemos nuestra función de conteo

function conteo() {
contador++;
document.querySelector('h1').innerHTML = contador;

if (counter % 10 === 0) {
alert(`Conteo es ahora ${contador}`)
}
}
 JavaScript

Ahora, veamos algunas formas en las que podemos mejorar el diseño de esta página. Primero, así como intentamos
evitar el estilo en línea con CSS, queremos evitar JavaScript en línea tanto como sea posible.

Podemos hacer esto en nuestro ejemplo de contador agregando una línea de secuencia de comandos que cambia el
atributo onclick de un botón en la página y eliminando el atributo onclick dentro de la etiqueta del botón.

document.querySelector('button').onclick = conteo;
 JavaScript

Una cosa a tener en cuenta sobre lo que acabamos de hacer es que no llamamos a la función de recuento agregando
paréntesis después, sino que simplemente nombramos la función. Esto especifica que solo deseamos llamar a esta
función cuando se hace clic en el botón. Esto funciona porque, como Python, JavaScript admite la programación
funcional, por lo que las funciones pueden tratarse como valores en sí mismas.

Sin embargo, el cambio anterior por sí solo no es suficiente, como podemos ver al inspeccionar la página y mirar la
consola de nuestro navegador:
 JavaScript

Este error surgió porque cuando JavaScript buscó un elemento usando document.querySelector ('botón'), no encontró
nada. Esto se debe a que la página tarda un poco en cargarse y nuestro código JavaScript se ejecutó antes de que se
procesara el botón. Para dar cuenta de esto, podemos especificar que el código se ejecutará solo después de que la
página se haya cargado usando la función addEventListener. Esta función toma dos argumentos:

• Un evento para escuchar (por ejemplo: 'clic')

• Una función para ejecutar cuando se detecta el evento (por ejemplo: hola)
Podemos usar la función para ejecutar el código solo una vez que se haya cargado todo el contenido:

document.addEventListener('DOMContentLoaded', function() {
// Algo de código aquí
});
 JavaScript

En el ejemplo anterior, usamos una función anónima, que es una función a la que nunca se le da un nombre. Poniendo
todo esto junto, nuestro JavaScript ahora se ve así:
let contador = 0;

function conteo() {
contador ++;
document.querySelector('h1').innerHTML = contador;

if (contador % 10 === 0) {
alert(`Contador ahora es ${contador}`)
}
}

document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').onclick = conteo;
});
 JavaScript

Otra forma en que podemos mejorar nuestro diseño es moviendo nuestro JavaScript a un archivo separado.
La forma en que hacemos esto es muy similar a cómo colocamos nuestro CSS en un archivo separado para diseñar:
1. Escribes todo el código JavaScript en un archivo separado que termine en .js, por ejemplo: contador.js.
2. Agregas un atributo src a la etiqueta <script> que apunta a este nuevo archivo.
Para nuestra página de contador, podríamos tener un archivo llamado contador.html que se ve así con su
correspondiente archivo js:
let contador = 0;
<!DOCTYPE html>
function conteo() {
<html lang="es">
contador++;
<head>
document.querySelector('h1').innerHTML = contador;
<title>Contador</title>
<script src="contador.js"></script>
if (contador % 10 === 0) {
</head>
alert(`Contador ahora es ${contador}`)
<body>
}
<h1>0</h1>
}
<button>Contador</button>
</body>
document.addEventListener('DOMContentLoaded', function() {
</html>
document.querySelector('button').onclick = conteo;
});
 JavaScript

Tener JavaScript en un archivo separado es útil por varias razones:

• Atractivo visual: nuestros archivos HTML y JavaScript individuales se vuelven más legibles.
• Acceso entre archivos HTML: ahora podemos tener varios archivos HTML que comparten el
mismo JavaScript.
• Colaboración: ahora podemos hacer que una persona trabaje fácilmente en JavaScript mientras que
otra trabaja en HTML.
• Importación: podemos importar bibliotecas JavaScript que otras personas ya han escrito. Por ejemplo,
Bootstrap tiene su propia biblioteca de JavaScript que puede incluir para que su sitio sea más interactivo.
 JavaScript
Comencemos con otro ejemplo de una página que puede ser un poco más interactiva. A continuación, crearemos una
página en la que un usuario puede escribir su nombre para recibir un saludo personalizado.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const nombre = document.querySelector('#nombre').value;
alert(`Hola, ${nombre}`);
};
});
</script>
</head>
<body>
<form>
<input autofocus id="nombre" placeholder="Nombre" type="text">
<input type="submit">
</form>
</body>
</html>
 JavaScript
Podemos hacer más <!DOCTYPE html>
<html lang="es">
que simplemente <head>
agregar HTML a <title>Colores</title>
nuestra página usando <script>
document.addEventListener('DOMContentLoaded', function() {
JavaScript, ¡también document.querySelectorAll('button').forEach(function(button) {
podemos cambiar el button.onclick = function() {
estilo de una página! document.querySelector("#hola").style.color = button.dataset.color;
En la página siguiente, }
});
usamos botones para });
cambiar el color de </script>
nuestro encabezado. </head>
<body>
<h1 id="hola">Hola</h1>
<button data-color="red">Rojo</button>
<button data-color="blue">Azul</button>
<button data-color="green">Verde</button>
</body>
</html>
 JavaScript

La consola es una herramienta útil para probar pequeños fragmentos de código y depurar.
Puedes escribir y ejecutar código JavaScript en la consola, que se puede encontrar inspeccionando el elemento en su
navegador web y luego haciendo clic en consola. (El proceso exacto puede cambiar de un navegador a otro).
Una herramienta útil para depurar es imprimir en la consola, lo que puede hacer usando la función console.log.
Por ejemplo, en la página colores.html anterior, puedo agregar la siguiente línea:
console.log(document.querySelectorAll('button'));
 JavaScript

Además de la notación de función tradicional que ya hemos visto, JavaScript ahora nos da la capacidad de usar funciones
de flecha donde tenemos una entrada (o paréntesis cuando no hay entrada) seguida de => seguido de algún código para
ejecutar.
Por ejemplo, podemos modificar nuestro script anterior para usar una función de flecha anónima:

document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('button').forEach(button => {
button.onclick = () => {
document.querySelector("#hola").style.color = button.dataset.color;
}
});
});
 JavaScript

También podemos tener funciones nombradas que usan flechas, como en esta reescritura de la función de conteo:

contar = () => {
contador++;
document.querySelector('h1').innerHTML = contador;

if (contador % 10 === 0) {
alert(`Contar es ahora ${contador}`)
}
}
 JavaScript

<!DOCTYPE html>
Para tener una idea sobre otros eventos que podemos <html lang="es">
usar, veamos cómo podemos implementar nuestro <head>
<title>Colores</title>
selector de color usando un menú desplegable en lugar <script>
de tres botones separados. Podemos detectar cambios document.addEventListener('DOMContentLoaded', function() {
document.querySelector('select').onchange = function() {
en un elemento seleccionado usando el atributo document.querySelector('#hola').style.color = this.value;
onchange. En JavaScript, esta es una palabra clave que }
});
cambia según el contexto en el que se usa. En el caso </script>
de un controlador de eventos, se refiere al objeto que </head>
<body>
desencadenó el evento. <h1 id="hello">Hola</h1>
<select>
<option value="black">Negro</option>
<option value="red">Rojo</option>
<option value="blue">Azul</option>
<option value="green">Verde</option>
</select>

</body>
</html>
 JavaScript

Hay muchos otros eventos que podemos detectar en JavaScript, incluidos los comunes a
continuación:
• onclick
• onmouseover
• onkeydown
• onkeyup
• onload
• onblur
• …
 JavaScript

Una cosa a tener en cuenta sobre todos nuestros sitios hasta ahora es que cada vez que recargamos la página, se
pierde toda nuestra información. El color del título vuelve a ser negro, el contador vuelve a 0 y todas las tareas se
borran. A veces, esto es lo que pretendemos, pero en otras ocasiones querremos poder almacenar información que
podamos usar cuando un usuario regrese al sitio.

Una forma de hacerlo es mediante el almacenamiento local (local storage) que refiere a almacenar información en el
navegador web del usuario al que podemos acceder más tarde. Esta información se almacena como un conjunto de
pares clave-valor, casi como un diccionario de Python. Para utilizar el almacenamiento local, emplearemos dos funciones
clave:

• localStorage.getItem(clave): esta función busca una entrada en el almacenamiento local con una clave
determinada y devuelve el valor asociado con esa clave.
• localStorage.setItem(clave, valor): esta función establece una entrada en el almacenamiento local, asociando
la clave con un nuevo valor.
 JavaScript

// Verifica si ya existe un valor en el almacenamiento local

Veamos cómo podemos usar estas nuevas funciones if (!localStorage.getItem('contador')) {

para actualizar nuestro contador. En el siguiente código: // Si no, configura el contador a 0 en el almacenamiento local
localStorage.setItem('contador', 0);
}

function conteo() {
// Recuperar el valor del contador del almacenamiento local
let counter = localStorage.getItem('contador');

// actualizar contador
contador++;
document.querySelector('h1').innerHTML = contador;

// Almacenar el contador en el almacenamiento local

localStorage.setItem('contador', contador);
}

document.addEventListener('DOMContentLoaded', function() {
// Establecer el encabezado al valor actual dentro del almacenamiento local
document.querySelector('h1').innerHTML = localStorage.getItem('counter');
document.querySelector('button').onclick = contador;
});
 JavaScript

Un objeto de JavaScript es muy similar a un diccionario de Python, ya que nos permite almacenar pares clave-valor. Por
ejemplo, podría crear un objeto JavaScript que represente a Harry Potter:
let persona = {
nombre: 'Harry',
apellido: 'Potter'
};

Luego puedo acceder o cambiar partes de este objeto usando la notación entre corchetes o puntos:
 JavaScript

Una forma en que los objetos JavaScript son realmente útiles es en la transferencia de datos de un sitio
a otro, especialmente cuando se utilizan APIs.
Una API, o interfaz de programación de aplicaciones, es una forma de comunicación estructurada entre dos aplicaciones
diferentes.
Por ejemplo, es posible que deseemos que nuestra aplicación obtenga información de Google Maps, Amazon o algún
servicio meteorológico. Podemos hacer esto haciendo llamadas a la API de un servicio, que nos devolverá datos
estructurados, a menudo en formato JSON (JavaScript Object Notation). Por ejemplo, un vuelo en formato JSON
podría verse así:
{ "origen": "Buenos Aires", "destino": "Londres", "duracion": 14 }
Los valores dentro de un JSON no tienen que ser solo cadenas y números como en el ejemplo anterior. También
podemos almacenar listas, o incluso otros objetos JavaScript:

{"origen": {"ciudad": "Buenos Aires", "codigo": "EZE"}, "destino": {"ciudad": "Londres", "codigo": "LHR"}, "duracion": 14}
 JavaScript

Para mostrar cómo podemos usar las API en nuestras aplicaciones, trabajemos en la creación de una aplicación en la
que podamos encontrar tipos de cambio entre dos monedas. A lo largo del ejercicio, utilizaremos la API de tipos de
cambio la pagina DolarSI.
https://www.dolarsi.com/api/api.php?type=valoresprincipales.
Cuando visitas esta página, verás el tipo de cambio entre el peso argentino y el dólar estadounidense escrito en
formato JSON. También puede cambiar el parámetro GET en la URL de type de valoresprincipales a
cotizador para cambiar el tipo de información a obtener.

Veamos cómo implementar esta API en una aplicación mediante la creación de un nuevo archivo HTML llamado
cotización.html y vincularlo a un archivo JavaScript.
 JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
<title>Cotizador de Moneda</title>
<script src="cotizador.js"></script>
</head>
<body></body>
</html>
 JavaScript

Ahora, usaremos algo llamado AJAX, o Asynchronous JavaScript and XML, que nos permite acceder a
información de páginas externas incluso después de que nuestra página se haya cargado.

Para hacer esto, usaremos la función de recuperación fetch que nos permitirá enviar una solicitud HTTP request.
La función fetch devuelve una promise. No hablaremos de los detalles de lo que es una promise aquí, pero podemos
pensar en ella como un valor que se manifestará en algún momento, pero no necesariamente de inmediato.

Nos ocupamos de las promise dándoles un atributo .then que describe lo que se debe hacer cuando recibimos una
response. El fragmento de código a continuación registrará nuestra respuesta en la consola.
 JavaScript

document.addEventListener('DOMContentLoaded', function() {
// Enviar una GET request a la URL
fetch(' https://www.dolarsi.com/api/api.php?type=valoresprincipales ')
// Colocar la respuesta en una forma JSON
.then(response => response.json())
.then(datos => {
// Registrar info en la consola
console.log(datos);
});
});

Un punto importante sobre el código anterior es que el argumento de .then siempre es una función.
Aunque parece que estamos creando las variables response y datos, esas variables son solo los parámetros de dos
funciones anónimas.
 JavaScript

En lugar de simplemente registrar estos datos, podemos usar JavaScript para mostrar un mensaje en la pantalla, como en el
siguiente código:
document.addEventListener('DOMContentLoaded', function() {
// Enviar una GET request a la URL
fetch(' https://www.dolarsi.com/api/api.php?type=valoresprincipales ')
// Colocar la respuesta en una forma JSON
.then(response => response.json())
.then(datos => {

// Obtener el valor de un elemento del JSON

const dolar_compra = datos.casa.compra;

// Mostrar el valor en la pantalla

document.querySelector('body').innerHTML = `1 USD es igual a ${rate.toFixed(3)} ARS en tipo de
cambio oficial (compra).`;
});
});
 Interfaces de Usuario
 Hasta ahora, hemos discutido cómo crear páginas web simples usando HTML y CSS. También nos
familiarizamos con el lenguaje de programación Python, comenzamos a usar Django para crear
aplicaciones web y aprendimos cómo usar los Django Models para almacenar información en nuestros
sitios. Luego introdujimos JavaScript y aprendimos cómo usarlo para hacer que las páginas web fueran
más interactivas.

 Ahora, analizaremos paradigmas comunes en el diseño de la interfaz de usuario, utilizando JavaScript y

CSS para hacer que nuestros sitios sean aún más fáciles de usar.

 Una interfaz de usuario es la forma en que los visitantes de una página web interactúan con esa página.
Nuestro objetivo como desarrolladores web es hacer que estas interacciones sean lo más agradables
posible para el usuario, y hay muchos métodos que podemos utilizar para hacerlo.
 Interfaces de Usuario

Anteriormente, si queríamos un sitio web con varias páginas, lo lograríamos usando

diferentes rutas en nuestra aplicación Django. Ahora, tenemos la capacidad de cargar una
sola página y luego usar JavaScript para manipular el DOM.

Una ventaja importante de hacer esto es que solo necesitamos modificar la parte de la
página que realmente está cambiando. Por ejemplo, si tenemos una barra de navegación
que no cambia en función de su página actual, no querríamos tener que volver a
renderizar esa barra de navegación cada vez que cambiamos a una nueva parte de la
página.
 Aplicaciones de una sola página
Observa en el HTML de la derecha que tenemos tres <!DOCTYPE html>
<html lang="es">
botones y tres divs. <head>
<title>Una sola página</title>
<style>
Por el momento, los divs contienen solo una pequeña parte div {
de texto, pero podríamos imaginar que cada div contiene el }
display: none;

contenido de una página de nuestro sitio. </style>

<script src="unapagina.js"></script>
</head>
Ahora, agregaremos algo de JavaScript que nos permite <body>
usar los botones para alternar entre páginas. <button data-page="pagina1">Pagina 1</button>
<button data-page="pagina2">Pagina 2</button>
<button data-page="pagina3">Pagina 3</button>
<div id="pagina1">
<h1>Esta es la Pagina 1</h1>
</div>
<div id="pagina2">
<h1>Esta es la Pagina 2</h1>
</div>
<div id="pagina3">
<h1>Esta es la Pagina 3</h1>
</div>
</body>
</html>
 Aplicaciones de una sola página
<!DOCTYPE html> // Muestra una página y oculta las otras dos.
<html lang="es"> function mostrarPagina(pagina) {
<head>
<title>Una sola página</title> // Oculta todos los divs:
<style> document.querySelectorAll('div').forEach(div => {
div { div.style.display = 'none';
display: none; });
}
</style> // Muestra el div provisto en el argumento
<script src="unapagina.js"></script> document.querySelector(`#${pagina}`).style.display = 'block';
</head> }
<body>
<button data-page="pagina1">Pagina 1</button> // Espera que la pagina cargue:
<button data-page="pagina2">Pagina 2</button> document.addEventListener('DOMContentLoaded', function() {
<button data-page="pagina3">Pagina 3</button>
<div id="pagina1"> // Selecciona todos los botones
<h1>Esta es la Pagina 1</h1> document.querySelectorAll('button').forEach(button => {
</div>
<div id="pagina2"> // Cuando se clickea un boton muestra la pagina
<h1>Esta es la Pagina 2</h1> button.onclick = function() {
</div> mostrarPagina(this.dataset.pagina);
<div id="pagina3"> }
<h1>Esta es la Pagina 3</h1> })
</div> });
</body>
</html>
 Aplicaciones de una sola página

En muchos casos, será ineficaz cargar todo el contenido de cada página cuando visitemos un sitio por primera vez, por lo
que necesitaremos utilizar un servidor para acceder a nuevos datos.

Por ejemplo, cuando visitas un sitio de noticias, el sitio tardaría demasiado en cargar si tuviera que cargar todos los
artículos que tiene disponibles la primera vez que visita la página. Podemos evitar este problema usando una estrategia
similar a la que usamos mientras cargamos los tipos de cambio de moneda en la lección anterior.

Esta vez, analizaremos el uso de Django para enviar y recibir información desde nuestra aplicación de una sola página.
Para mostrar cómo funciona esto, echemos un vistazo a una aplicación simple de Django. Tiene dos patrones de URL en
urls.py:

urlpatterns = [
path("", views.index, name="index"),
path("secciones/<int:num>", views.seccion, name="seccion")
]
 Aplicaciones de una sola página

Y dos rutas correspondientes en views.py. Observe que la ruta de la sección toma un número entero y luego devuelve
una cadena de texto basada en ese número entero como una respuesta HTTP.
from django.http import Http404, HttpResponse
from django.shortcuts import render

# Create your views here.

def index(request):
return render(request, "unapagina/index.html")

# Los textos aca son mas cortos para ahorrar espacio

textos = ["Texto 1", "Texto 2", "Texto 3"]

def seccion(request, numero):

if 1 <= numero <= 3:
return HttpResponse(textos[num - 1])
else:
raise Http404("No hay tal seccion")
 <!DOCTYPE html>
<html lang="es">
<head>
<title>Una sola página</title>
<style>
Ahora, dentro de nuestro </style>
<script>
archivo index.html,
aprovecharemos AJAX, que // Muestra la sección dada
function mostrarSeccion(seccion) {
aprendimos sobre la última
lección, para hacer una solicitud // Encontrar el texto de la sección del servidor
fetch(`/secciones/${seccion}`)
al servidor para obtener el .then(response => response.texto())
.then(texto => {
texto de una sección en // Grabar texto y mostrarlo en la pagina
particular y mostrarlo en la console.log(texto);
document.querySelector('#contenido').innerHTML =
pantalla: texto;
});
}
document.addEventListener('DOMContentLoaded', function() {
// Agregar funcionalidad al boton
document.querySelectorAll('button').forEach(button => {
button.onclick = function() {
mostrarSeccion(this.dataset.seccion);
};
});
});
</script>
</head>
<body>
<h1>¡Hola!</h1>
<button data-seccion="1">Seccion 1</button>
<button data-seccion="2">Seccion 2</button>
<button data-seccion="3">Seccion 3</button>
<div id="contenido">
</div>
</body>
</html>
 Aplicaciones de una sola página
¡Ahora, hemos creado un sitio donde podemos // Cuando se hace clic en la flecha hacia atrás, muestra la sección anterior
window.onpopstate = function(event) {
cargar nuevos datos desde un servidor sin tener console.log(event.state.seccion);
que volver a cargar toda nuestra página HTML! }
mostrarSeccion(event.state.seccion);

Sin embargo, una desventaja de nuestro sitio es

que la URL ahora es menos informativa. Notarás function mostrarSeccion(seccion) {
fetch(`/seccions/${seccion}`)
en el video de arriba que la URL sigue siendo la .then(response => response.texto())
misma incluso cuando cambiamos de una sección .then(texto => {
console.log(texto);
a otra. document.querySelector('#contenido').innerHTML = texto;
});

Podemos resolver este problema utilizando la API }

de historial de JavaScript. Esta API nos permite document.addEventListener('DOMContentLoaded', function() {
enviar información al historial de nuestro document.querySelectorAll('button').forEach(button => {
navegador y actualizar la URL manualmente. button.onclick = function() {
const seccion = this.dataset.seccion;
Echemos un vistazo a cómo podemos utilizar esta
API. Imagina que tenemos un proyecto de Django // Agregar el estado actual al historial
history.pushState({seccion: seccion}, "", `seccion${seccion}`);
idéntico al anterior, pero esta vez deseamos mostrarSeccion(seccion);
alterar nuestro script para emplear la API de });
};

historial: });
 Aplicaciones de una sola página
En la función mostrarSeccion, empleamos la función // Cuando se hace clic en la flecha hacia atrás, muestra la sección anterior
window.onpopstate = function(event) {
history.pushState. Esta función agrega un nuevo console.log(event.state.seccion);
elemento a nuestro historial de navegación basado en mostrarSeccion(event.state.seccion);
tres argumentos: }

function mostrarSeccion(seccion) {
 Cualquier dato asociado con el estado. fetch(`/seccions/${seccion}`)
 Un parámetro de título ignorado por la mayoría de .then(response => response.texto())
.then(texto => {
los navegadores web. console.log(texto);
 Qué se debe mostrar en la URL document.querySelector('#contenido').innerHTML = texto;
});
El otro cambio que hacemos en el JavaScript anterior es }
la configuración del parámetro onpopstate, que
especifica lo que debemos hacer cuando el usuario hace document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('button').forEach(button => {
clic en la flecha hacia atrás. En este caso, queremos button.onclick = function() {
mostrar la sección anterior cuando se presiona el const seccion = this.dataset.seccion;
botón.
// Agregar el estado actual al historial
history.pushState({seccion: seccion}, "", `seccion${seccion}`);
Ahora, el sitio parece un poco más fácil de usar. mostrarSeccion(seccion);
};
});
});
 GRACIAS
[email protected]

PROGRAMACIÓN WEB
CON PYTHON Y JAVASCRIPT