Practica 3

Universidad Tecnológica de Puebla Aplicaciones Web Orientadas a
Servicios
Universidad Tecnológica de Puebla

NO. 3
TÉCNICO SUPERIOR UNIVERSITARIO EN TECNOLOGÍAS DE LA
INFORMACIÓN ÁREA DESARROLLO DE SOFTWARE PÁGINA 1 DE 15
MULTIPLATAFORMA EN COMPETENCIAS PROFESIONALES
Práctica de la Asignatura: Aplicaciones Web Orientadas a Servicios VERSIÓN: ESTUDIANTE
Título De La Practica: Tipos De Datos En JSON – Impresión Variable FECHA DE ACTIVACION:30/09/2022

Asignatura: Aplicaciones Web Orientadas a Servicio ELABORO: Edwin Jaret Reyes López
Unidad Temática: Unidad II Interfaz de Programación de Aplicaciones
Número de Participantes recomendable: 1
DURACIÓN: 90 minutos LUGAR: Laboratorio K5-101
GRADO DE DIFICULTAD: Bajo
I.- OBJETIVO DE LA PRÁCTICA :
Conocer, identificar los distintos objetos que se empleara dentro de los
objetos JSON y la impresión a través de rótulos utilizando una
variable.
II.- M ATERIAL SOFTWARE Y HARDWARE PARA REALIZAR PRACTICA : Aprobación de Practica:

Marca y modelo de la PC: HP
Editor o framework: Visual Studio Code
Navegador: Google chrome Fabián Abel Nava Conde
Herramienta adicional: Fabian.nava@utpuebla.edu.mx
III.- EXPOSICIÓN TEÓRICA DE LA PRÁCTICA:

Código guía de uso de tipos de datos y impresión en JSON
I
IV.- RESULTADOS ESPERADOS:
Instrucciones:
Realizar la implementación del código en visual Studio Code
1.- Documenta el código solo las líneas significativas que dan respuesta a la solución.
2.- Copia el código generado y pégalo en el apartado indicado (no captures pantalla).
3.- Genera un código JSON para el registro de pago de Liverpool (imagen de referencia en este punto) utilizando los tipos de
Coache ANC
fabian.nava@utpuebla.edu.mx
Servicios
datosque se requieran para la implementación,así como la impresión de todo el registro que aparecen en este formulario, utilizando
una variable con todos rótulos requerido.
Se requiere:
a.- Enviar la información a la página web resultante (Visualizar).
b.- Validación del objeto JSON en https://jsonlint.com, con captura de pantalla.
Ejemplo:
Correcto JSON Incorrecto JSON

c.- La evidencia de la creación del objeto JSON en consola.
Coache ANC
Servicios
4.- Ejecuta y captura la ejecución del JSON en el navegador Google Chrome.
V.- EVIDENCIA DE CODIGO DE VISUAL STUDIO CODE(C OPIA Y P EGA CODIGO TXT):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liverpool</title>
</head>
<body>
<section id="contenedor">
<h2>Forma de pago</h2>
<table border="1">
Coache ANC
Servicios
<tr>
<td>Usuario</td>
<td id="nombre"></td>
<td>No. tarjeta</td>
<td id="no_tarjeta" colspan="3"></td>
</tr>
<tr>
<td>Tarjeta habiente</td>
<td id="tarjetahabiente"></td>
<td>Banco</td>
<td id="banco" colspan="3"></td>
</tr>
<tr>
<td>Vence</td>
<td id="vence"></td>
<td>Afilación</td>
<td id="afilacion"></td>
<td>CF</td>
<td id="cf"></td>
</tr>
</table>
<br><br>
<h2>Datos de Tarjetahabiente</h2>
<table border="1">
<tr>
<td>Nombre</td>
<td id="nombree"></td>
</tr>
<tr>
<td>País</td>
<td id="pais"></td>
</tr>
<tr>
<td>Estado</td>
<td id="estado"></td>
</tr>
<tr>
<td>Ciudad</td>
<td id="ciudad"></td>
</tr>
<tr>
<td>Delegación o municipio</td>
<td id="delegacionomunicipio">
</td>
</tr>
Coache ANC
Servicios
<tr>
<td>Colonia o Asentaminedo</td>
<td id="coloniaoasentamiento"></td>
</tr>
<tr>
<td>C.P</td>
<td id="cp"></td>
</tr>
<tr>
<td>Calle</td>
<td id="calle"></td>
</tr>
<tr>
<td>No. Exterior</td>
<td id="noexterior"></td>
</tr>
<tr>
<td>No. Interior</td>
<td id="nointerior"></td>
</tr>
<tr>
<td>Edificio</td>
<td id="edificio"></td>
</tr>
<tr>
<td>Entre calle</td>
<td id="entrecalle"></td>
</tr>
<tr>
<td>y calle</td>
<td id="ycalle"></td>
</tr>
<tr>
<td>Tel. particular con lada</td>
<td id="telparticularconlada"></td>
</tr>
<tr>
<td>Tel. de oficina con lada</td>
<td id="teldeoficinaconlada"></td>
</tr>
<tr>
<td>Celular</td>
<td id="Celular"></td>
</tr>
</table>
Coache ANC
Servicios
<br><br>
<h2>Dirección de entrega</h2>
<table border="1">
<tr>
<td>Nombre</td>
<td id="nombreee"></td>
</tr>
<tr>
<td>País</td>
<td id="paiss"></td>
</tr>
<tr>
<td>Estado</td>
<td id="estadoo"></td>
</tr>
<tr>
<td>Ciudad</td>
<td id="ciudadd"></td>
</tr>
<tr>
<td>Delegación o municipio</td>
<td id="delegacionomunicipioo">
</td>
</tr>
<tr>
<td>Colonia o Asentaminedo</td>
<td id="coloniaoasentamientoo"></td>
</tr>
<tr>
<td>C.P</td>
<td id="cpp"></td>
</tr>
<tr>
<td>Calle</td>
<td id="callee"></td>
</tr>
<tr>
<td>No. Exterior</td>
<td id="noexteriorr"></td>
</tr>
<tr>
<td>No. Interior</td>
<td id="nointeriorr"></td>
</tr>
<tr>
Coache ANC
Servicios
<td>Edificio</td>
<td id="edificioo"></td>
</tr>
<tr>
<td>Entre calle</td>
<td id="entrecallee"></td>
</tr>
<tr>
<td>y calle</td>
<td id="ycallee"></td>
</tr>
<tr>
<td>Tel. particular con lada</td>
<td id="telparticularconladaa"></td>
</tr>
<tr>
<td>Tel. de oficina con lada</td>
<td id="teldeoficinaconladaa"></td>
</tr>
<tr>
<td>Celular</td>
<td id="Celularr"></td>
</tr>
</table>
<br><br>
<h2>Datos Tiempo Aire</h2>
<table border="1">
<tr>
<td>Número de teléfono</td>
<td id="numerodetelefono" colspan="11"></td>
</tr>
<tr>
<td>Tiempo Aire Telcel</td>
<td id="tiempoairetelcel"></td>
<td>Presupuesto LIV/FF</td>
<td id="presupuesto" colspan="5"></td>
</tr>
<tr>
<td>Número de boleta</td>
<td id="boleta"></td>
<td>Folio</td>
<td id="folio"></td>
<td>Autorización Bancaria</td>
<td id="bancaria"></td>
<td>Subtotal</td>
Coache ANC
Servicios
<td id="subtotal"></td>
</tr>
<tr>
<td>Total mi bolsa</td>
<td id="bolsa" colspan="11"></td>
</tr>
</table>
</section>
<script type="text/javascript">
var Pago_de_liverpool={
"Forma_de_pago": [{
"Usuario": "Julio@yahoo.com.mx",
"Tarjeta_habiente": "Julio Hernández Pérez",
"Vence": "08/2010",
"Afilación": 4851678,
"No_Tarjeta": "xxxxxxxxxxxx4023",
"Banco": "VISA",
"CF": "DERG39387510248890"
}],
"Datos_Tarjetahabiente": [{
"Nombre": "Julio Hernández Pérez",
"Pais": "México",
"Estado": "Estado de México",
"Ciudad": "Metepec",
"Delegación_o_Municipio": "Metepec",
"Colonia_o_Asentamineto": "Col.Izcalli",
"CP": 52176,
"Calle": "Gardenias",
"Num_exterior": 33,
"Num_interior": " ",
"Edificio": " ",
"Entre_calle": "San Isidro",
"y_calle": "Asunción",
"Tel_particular_con_lada": 7222165619,
"Tel_de_oficina_con_lada": 7222152511,
"Celular": 7224891354
}],
"Dirección_de_Entrega": [{
"Nombre": "Julio Hernández Pérez",
"Pais": "México",
"Estado": "Estado de México",
"Ciudad": "Metepec",
"Delegación_o_Municipio": "Metepec",
Coache ANC
Servicios
"Colonia_o_Asentamineto": "Col.Izcalli",
"CP": 52176,
"Calle": "Gardenias",
"Num_exterior": 33,
"Num_interior": " ",
"Edificio": " ",
"Entre_calle": "San Isidro",
"y_calle": "Asunción",
"Tel_particular_con_lada": 7222165619,
"Tel_de_oficina_con_lada": 7222152511,
"Celular": 7224891354
}],
"Datos_Tiempo_Aire": [{
"Número_de_Teléfono": 555268300,
"Tiempo_Aire_Telcel": "sku 78352352",
"Presupuesto_LIVFF": "1 $ 1000.00 M.N $ 1000.00 M.N",
"No_de_Boleta": 4236,
"Folio": 4924515,
"Autorizaciión_Bancaria": 62338,
"Subtotal": "$ 100.00 M.N",
"Total_mi_bolsa": "$ 23,502.00 M.N"
}],
};
//Forma de pago
console.log(Pago_de_liverpool);
document.getElementById('nombre').innerHTML=Pago_de_liverpool.Forma_de_pago[0].Usuario;
document.getElementById('no_tarjeta').innerHTML=Pago_de_liverpool.Forma_de_pago[0].No_Tarjeta;
document.getElementById('tarjetahabiente').innerHTML=Pago_de_liverpool.Forma_de_pago[0].Tarjeta_habiente;
document.getElementById('banco').innerHTML=Pago_de_liverpool.Forma_de_pago[0].Banco;
document.getElementById('vence').innerHTML=Pago_de_liverpool.Forma_de_pago[0].Vence;
document.getElementById('afilacion').innerHTML=Pago_de_liverpool.Forma_de_pago[0].Afilación;
document.getElementById('cf').innerHTML=Pago_de_liverpool.Forma_de_pago[0].CF;
//Datos de tarjetahabiente
document.getElementById('nombree').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Nombre;
document.getElementById('pais').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Pais;
document.getElementById('estado').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Estado;
document.getElementById('ciudad').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Ciudad;
document.getElementById('delegacionomunicipio').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Delegación_o_Municipio;
document.getElementById('coloniaoasentamiento').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Colonia_o_Asentamineto;
document.getElementById('cp').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].CP;
document.getElementById('calle').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Calle;
document.getElementById('noexterior').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Num_exterior;
document.getElementById('nointerior').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Num_interior;
Coache ANC
Servicios
document.getElementById('edificio').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Edificio;
document.getElementById('entrecalle').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Entre_calle;
document.getElementById('ycalle').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].y_calle;

document.getElementById('telparticularconlada').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Tel_particular_con_lada;
document.getElementById('teldeoficinaconlada').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Tel_de_oficina_con_lada;
document.getElementById('Celular').innerHTML=Pago_de_liverpool.Datos_Tarjetahabiente[0].Celular;
//Datos de Dirección de entrega

document.getElementById('nombreee').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Nombre;
document.getElementById('paiss').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Pais;
document.getElementById('estadoo').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Estado;
document.getElementById('ciudadd').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Ciudad;
document.getElementById('delegacionomunicipioo').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Delegación_o_Municipio;
document.getElementById('coloniaoasentamientoo').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Colonia_o_Asentamineto;
document.getElementById('cpp').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].CP;
document.getElementById('callee').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Calle;
document.getElementById('noexteriorr').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Num_exterior;
document.getElementById('nointeriorr').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Num_interior;
document.getElementById('edificioo').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Edificio;
document.getElementById('entrecallee').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Entre_calle;
document.getElementById('ycallee').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].y_calle;

document.getElementById('telparticularconladaa').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Tel_particular_con_lada;
document.getElementById('teldeoficinaconladaa').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Tel_de_oficina_con_lada;
document.getElementById('Celularr').innerHTML=Pago_de_liverpool.Dirección_de_Entrega[0].Celular;
//Datos tiempo aire

document.getElementById('numerodetelefono').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Número_de_Teléfono;
document.getElementById('tiempoairetelcel').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Tiempo_Aire_Telcel;
document.getElementById('presupuesto').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Presupuesto_LIVFF;
document.getElementById('boleta').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].No_de_Boleta;
document.getElementById('folio').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Folio;
document.getElementById('bancaria').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Autorizaciión_Bancaria;
document.getElementById('subtotal').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Subtotal;
document.getElementById('bolsa').innerHTML=Pago_de_liverpool.Datos_Tiempo_Aire[0].Total_mi_bolsa;
</script>
</body>
</html>
Coache ANC
Servicios
VI.- EVIDENCIA DE EJECUCION EN GOOGLE CHROME(P ANTALLA ):
Coache ANC
Servicios
Coache ANC
Servicios
Coache ANC
Servicios
Tablas visuales:
VII.- EVIDENCIA DE LA VALIDACION DE JSON EN https://jsonlint.com (P ANTALLA ):
Coache ANC
Servicios
VIII.- C ONCLUSIONES :
¿Cómo se relacionas en tu entorno el tema? Sobre los objetos y variables en JSON
¿Para qué te sirve tema? Para emplear objetos e imprimirlos para que el usuario final vea el resultado.
¿Qué aprendiste del tema? Como imprimir a través de rótulos utilizando una variable.
Coache ANC

Practica 3

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practica 3

Cargado por

Copyright:

Formatos disponibles

Universidad Tecnológica de Puebla Aplicaciones Web Orientadas a

Universidad Tecnológica de Puebla

Práctica de la Asignatura: Aplicaciones Web Orientadas a Servicios VERSIÓN: ESTUDIANTE

Título De La Practica: Tipos De Datos En JSON – Impresión Variable FECHA DE ACTIVACION:30/09/2022

II.- M ATERIAL SOFTWARE Y HARDWARE PARA REALIZAR PRACTICA : Aprobación de Practica:

III.- EXPOSICIÓN TEÓRICA DE LA PRÁCTICA:

Correcto JSON Incorrecto JSON

4.- Ejecuta y captura la ejecución del JSON en el navegador Google Chrome.

//Datos de Dirección de entrega

//Datos tiempo aire

VI.- EVIDENCIA DE EJECUCION EN GOOGLE CHROME(P ANTALLA ):

VII.- EVIDENCIA DE LA VALIDACION DE JSON EN https://jsonlint.com (P ANTALLA ):

También podría gustarte