Skip to content

Commit 50209ed

Browse files
iesdavidiesdavid
committed
LM UA08
1 parent 8e01d73 commit 50209ed

File tree

10 files changed

+1022
-379
lines changed

10 files changed

+1022
-379
lines changed

‎LM/UA08/81_sintaxis.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@
3232
<li id="active"><a href="81_sintaxis.html" class="active no-ch">8.1. Sintaxis</a></li>
3333
<li><a href="82_acceso_a_los_valores.html" class="no-ch">8.2. Acceso a los valores</a></li>
3434
<li><a href="83_conversin.html" class="no-ch">8.3. Conversión</a></li>
35-
<li><a href="84_ajax.html" class="no-ch">8.4. AJAX</a></li>
35+
<li><a href="84_ajax.html" class="daddy">8.4. AJAX</a>
36+
<ul class="other-section">
37+
<li><a href="841_ejemplo.html" class="no-ch">8.4.1. Ejemplo</a></li>
38+
<li><a href="842_ejercicios.html" class="no-ch">8.4.2. Ejercicios</a></li>
39+
<li><a href="843_scroll_infinito.html" class="no-ch">8.4.3. Scroll Infinito</a></li>
40+
</ul>
41+
</li>
3642
</ul>
3743
</nav>
3844
<div id='topPagination'>

‎LM/UA08/82_acceso_a_los_valores.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@
3030
<li><a href="81_sintaxis.html" class="no-ch">8.1. Sintaxis</a></li>
3131
<li id="active"><a href="82_acceso_a_los_valores.html" class="active no-ch">8.2. Acceso a los valores</a></li>
3232
<li><a href="83_conversin.html" class="no-ch">8.3. Conversión</a></li>
33-
<li><a href="84_ajax.html" class="no-ch">8.4. AJAX</a></li>
33+
<li><a href="84_ajax.html" class="daddy">8.4. AJAX</a>
34+
<ul class="other-section">
35+
<li><a href="841_ejemplo.html" class="no-ch">8.4.1. Ejemplo</a></li>
36+
<li><a href="842_ejercicios.html" class="no-ch">8.4.2. Ejercicios</a></li>
37+
<li><a href="843_scroll_infinito.html" class="no-ch">8.4.3. Scroll Infinito</a></li>
38+
</ul>
39+
</li>
3440
</ul>
3541
</nav>
3642
<div id='topPagination'>

‎LM/UA08/83_conversin.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@
3030
<li><a href="81_sintaxis.html" class="no-ch">8.1. Sintaxis</a></li>
3131
<li><a href="82_acceso_a_los_valores.html" class="no-ch">8.2. Acceso a los valores</a></li>
3232
<li id="active"><a href="83_conversin.html" class="active no-ch">8.3. Conversión</a></li>
33-
<li><a href="84_ajax.html" class="no-ch">8.4. AJAX</a></li>
33+
<li><a href="84_ajax.html" class="daddy">8.4. AJAX</a>
34+
<ul class="other-section">
35+
<li><a href="841_ejemplo.html" class="no-ch">8.4.1. Ejemplo</a></li>
36+
<li><a href="842_ejercicios.html" class="no-ch">8.4.2. Ejercicios</a></li>
37+
<li><a href="843_scroll_infinito.html" class="no-ch">8.4.3. Scroll Infinito</a></li>
38+
</ul>
39+
</li>
3440
</ul>
3541
</nav>
3642
<div id='topPagination'>

‎LM/UA08/841_ejemplo.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html lang="es">
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="base.css" />
5+
<link rel="stylesheet" type="text/css" href="exe_highlighter.css" />
6+
<link rel="stylesheet" type="text/css" href="content.css" />
7+
<link rel="stylesheet" type="text/css" href="nav.css" />
8+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
9+
<title>8.4.1. Ejemplo | UA08 - Bases de datos en XML </title>
10+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
11+
<meta name="author" content="David Bermúdez" />
12+
<link rel="license" type="text/html" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" />
13+
<meta name="generator" content="eXeLearning 2.8.1 - exelearning.net" />
14+
<!--[if lt IE 9]><script type="text/javascript" src="exe_html5.js"></script><![endif]-->
15+
<script type="text/javascript" src="exe_jquery.js"></script>
16+
<script type="text/javascript" src="exe_highlighter.js"></script>
17+
<script type="text/javascript" src="common_i18n.js"></script>
18+
<script type="text/javascript" src="common.js"></script>
19+
<link rel="stylesheet" type="text/css" href="udl-content.css" />
20+
<script type="text/javascript" src="udl-content.js"></script>
21+
<meta name="viewport" content="width=device-width, initial-scale=1" />
22+
</head>
23+
<body class="exe-web-site" id="exe-node-18"><script type="text/javascript">document.body.className+=" js"</script>
24+
<div id="content">
25+
<p id="skipNav"><a href="#main" class="sr-av">Saltar la navegación</a></p>
26+
<header id="header" ><div id="headerContent">UA08 - Bases de datos en XML</div></header>
27+
<nav id="siteNav">
28+
<ul>
29+
<li><a href="index.html" class="daddy main-node">UA08. JSON</a></li>
30+
<li><a href="81_sintaxis.html" class="no-ch">8.1. Sintaxis</a></li>
31+
<li><a href="82_acceso_a_los_valores.html" class="no-ch">8.2. Acceso a los valores</a></li>
32+
<li><a href="83_conversin.html" class="no-ch">8.3. Conversión</a></li>
33+
<li class="current-page-parent"><a href="84_ajax.html" class="current-page-parent daddy">8.4. AJAX</a>
34+
<ul>
35+
<li id="active"><a href="841_ejemplo.html" class="active no-ch">8.4.1. Ejemplo</a></li>
36+
<li><a href="842_ejercicios.html" class="no-ch">8.4.2. Ejercicios</a></li>
37+
<li><a href="843_scroll_infinito.html" class="no-ch">8.4.3. Scroll Infinito</a></li>
38+
</ul>
39+
</li>
40+
</ul>
41+
</nav>
42+
<div id='topPagination'>
43+
<nav class="pagination noprt">
44+
<a href="84_ajax.html" class="prev"><span><span>&laquo; </span>Anterior</span></a> <span class="sep">| </span><a href="842_ejercicios.html" class="next"><span>Siguiente<span> &raquo;</span></span></a>
45+
</nav>
46+
</div>
47+
<div id="main-wrapper">
48+
<section id="main">
49+
<header id="nodeDecoration"><h1 id="nodeTitle">8.4.1. Ejemplo</h1></header>
50+
<article class="iDevice_wrapper UDLcontentIdevice em_iDevice" id="id35">
51+
<div class="iDevice emphasis1" >
52+
<header class="iDevice_header iDevice_header_noIcon"><h1 class="iDeviceTitle">Ejemplo funcional</h1></header>
53+
<div class="iDevice_inner">
54+
<div class="iDevice_content_wrapper">
55+
<div id="ta35_124_2" class="block iDevice_content">
56+
<div class="exe-udlContent exe-udlContent-engagement"><section class="exe-udlContent-block"><div class="exe-udlContent-content"><div class="exe-udlContent-content-main"><p>La Web&nbsp;<a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder - Free Fake REST API (typicode.com)</a>&nbsp; es una API (<strong>Application Programming Interface</strong>) para realizar pruebas.</p>
57+
<p>El siguiente código HTML mostrará una página con un título y un botón. Al pulsar el botón, se mostrará una información obtenida de la web dentro de un div.</p>
58+
<div class="highlighted-code code-style-2 language-markup">
59+
<div>
60+
<pre><code>&lt;!DOCTYPE html&gt;
61+
&lt;html lang="es"&gt;
62+
&lt;head&gt;
63+
&lt;meta charset="UTF-8"&gt;
64+
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
65+
&lt;title&gt;Ejemplo de AJAX&lt;/title&gt;
66+
&lt;/head&gt;
67+
&lt;body&gt;
68+
&lt;h1&gt;Consulta de Usuarios&lt;/h1&gt;
69+
&lt;button onclick="obtenerUsuarios()"&gt;Obtener Usuarios&lt;/button&gt;
70+
&lt;div id="resultado"&gt;&lt;/div&gt;
71+
72+
&lt;script src="script.js"&gt;&lt;/script&gt;
73+
&lt;/body&gt;
74+
&lt;/html&gt;</code></pre>
75+
</div>
76+
</div>
77+
<p>Código JavaScript necesario para la conexión a la API:</p>
78+
<div class="highlighted-code code-style-2 language-js">
79+
<div>
80+
<pre><code>function obtenerUsuarios() {
81+
var xhr = new XMLHttpRequest();
82+
83+
// Configurar la solicitud
84+
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
85+
86+
// Manejar la respuesta
87+
xhr.onload = function() {
88+
if (xhr.status == 200) {
89+
// Convertir la respuesta JSON a un objeto JavaScript
90+
var usuarios = JSON.parse(xhr.responseText);
91+
92+
// Manejar los datos obtenidos
93+
mostrarUsuarios(usuarios);
94+
} else {
95+
console.error("Error al realizar la solicitud. Código de estado: " + xhr.status);
96+
}
97+
};
98+
99+
// Manejar errores de red
100+
xhr.onerror = function() {
101+
console.error("Error de red al realizar la solicitud");
102+
};
103+
104+
// Enviar la solicitud
105+
xhr.send();
106+
}
107+
108+
function mostrarUsuarios(usuarios) {
109+
var resultado = document.getElementById("resultado");
110+
resultado.innerHTML = "&lt;h2&gt;Usuarios&lt;/h2&gt;";
111+
112+
// Crear una lista de usuarios
113+
var listaUsuarios = "&lt;ul&gt;";
114+
usuarios.forEach(function(usuario) {
115+
listaUsuarios += "&lt;li&gt;&lt;strong&gt;ID:&lt;/strong&gt; " + usuario.id + ", &lt;strong&gt;Nombre:&lt;/strong&gt; " + usuario.name + ", &lt;strong&gt;Email:&lt;/strong&gt; " + usuario.email + "&lt;/li&gt;";
116+
});
117+
listaUsuarios += "&lt;/ul&gt;";
118+
119+
resultado.innerHTML += listaUsuarios;
120+
}</code><code>
121+
</code></pre>
122+
</div>
123+
</div>
124+
<p>Este último código se guardará en <strong>script.js</strong> para que el botón tenga funcionalidad. Observa que no ha sido necesario un formulario ni una recarga web para adquirir la información.</p></div></div></section></div>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
</article>
130+
<div id="packageLicense" class="cc cc-by-nc-sa">
131+
<p><span>Obra publicada con</span> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0</a></p>
132+
</div>
133+
</section>
134+
</div>
135+
<div id='bottomPagination'>
136+
<nav class="pagination noprt">
137+
<a href="84_ajax.html" class="prev"><span><span>&laquo; </span>Anterior</span></a> <span class="sep">| </span><a href="842_ejercicios.html" class="next"><span>Siguiente<span> &raquo;</span></span></a>
138+
</nav>
139+
</div>
140+
</div>
141+
<p id="made-with-eXe"><a href="https://exelearning.net/" target="_blank" rel="noopener"><span>Creado con eXeLearning<span> (Ventana nueva)</span></span></a></p><script type="text/javascript" src="_style_js.js"></script></body></html>

‎LM/UA08/842_ejercicios.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html lang="es">
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="base.css" />
5+
<link rel="stylesheet" type="text/css" href="content.css" />
6+
<link rel="stylesheet" type="text/css" href="nav.css" />
7+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
8+
<title>8.4.2. Ejercicios | UA08 - Bases de datos en XML </title>
9+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
10+
<meta name="author" content="David Bermúdez" />
11+
<link rel="license" type="text/html" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" />
12+
<meta name="generator" content="eXeLearning 2.8.1 - exelearning.net" />
13+
<!--[if lt IE 9]><script type="text/javascript" src="exe_html5.js"></script><![endif]-->
14+
<script type="text/javascript" src="exe_jquery.js"></script>
15+
<script type="text/javascript" src="common_i18n.js"></script>
16+
<script type="text/javascript" src="common.js"></script>
17+
<link rel="stylesheet" type="text/css" href="udl-content.css" />
18+
<script type="text/javascript" src="udl-content.js"></script>
19+
<meta name="viewport" content="width=device-width, initial-scale=1" />
20+
</head>
21+
<body class="exe-web-site" id="exe-node-19"><script type="text/javascript">document.body.className+=" js"</script>
22+
<div id="content">
23+
<p id="skipNav"><a href="#main" class="sr-av">Saltar la navegación</a></p>
24+
<header id="header" ><div id="headerContent">UA08 - Bases de datos en XML</div></header>
25+
<nav id="siteNav">
26+
<ul>
27+
<li><a href="index.html" class="daddy main-node">UA08. JSON</a></li>
28+
<li><a href="81_sintaxis.html" class="no-ch">8.1. Sintaxis</a></li>
29+
<li><a href="82_acceso_a_los_valores.html" class="no-ch">8.2. Acceso a los valores</a></li>
30+
<li><a href="83_conversin.html" class="no-ch">8.3. Conversión</a></li>
31+
<li class="current-page-parent"><a href="84_ajax.html" class="current-page-parent daddy">8.4. AJAX</a>
32+
<ul>
33+
<li><a href="841_ejemplo.html" class="no-ch">8.4.1. Ejemplo</a></li>
34+
<li id="active"><a href="842_ejercicios.html" class="active no-ch">8.4.2. Ejercicios</a></li>
35+
<li><a href="843_scroll_infinito.html" class="no-ch">8.4.3. Scroll Infinito</a></li>
36+
</ul>
37+
</li>
38+
</ul>
39+
</nav>
40+
<div id='topPagination'>
41+
<nav class="pagination noprt">
42+
<a href="841_ejemplo.html" class="prev"><span><span>&laquo; </span>Anterior</span></a> <span class="sep">| </span><a href="843_scroll_infinito.html" class="next"><span>Siguiente<span> &raquo;</span></span></a>
43+
</nav>
44+
</div>
45+
<div id="main-wrapper">
46+
<section id="main">
47+
<header id="nodeDecoration"><h1 id="nodeTitle">8.4.2. Ejercicios</h1></header>
48+
<article class="iDevice_wrapper UDLcontentIdevice em_iDevice" id="id36">
49+
<div class="iDevice emphasis1" >
50+
<header class="iDevice_header iDevice_header_noIcon"><h1 class="iDeviceTitle">Ejercicio 1: APIs gratuitas para practicar</h1></header>
51+
<div class="iDevice_inner">
52+
<div class="iDevice_content_wrapper">
53+
<div id="ta36_125_2" class="block iDevice_content">
54+
<div class="exe-udlContent exe-udlContent-engagement"><section class="exe-udlContent-block"><div class="exe-udlContent-content"><div class="exe-udlContent-content-main"><p>En <a href="https://ed.team/blog/las-mejores-apis-publicas-para-practicar" target="_blank" rel="noopener">esta web</a> se muestran 6 APIs públicas para practicar.</p>
55+
<p>Echa un vistazo y crea una web que muestre sus datos.</p></div></div></section></div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</article>
61+
<div id="packageLicense" class="cc cc-by-nc-sa">
62+
<p><span>Obra publicada con</span> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0</a></p>
63+
</div>
64+
</section>
65+
</div>
66+
<div id='bottomPagination'>
67+
<nav class="pagination noprt">
68+
<a href="841_ejemplo.html" class="prev"><span><span>&laquo; </span>Anterior</span></a> <span class="sep">| </span><a href="843_scroll_infinito.html" class="next"><span>Siguiente<span> &raquo;</span></span></a>
69+
</nav>
70+
</div>
71+
</div>
72+
<p id="made-with-eXe"><a href="https://exelearning.net/" target="_blank" rel="noopener"><span>Creado con eXeLearning<span> (Ventana nueva)</span></span></a></p><script type="text/javascript" src="_style_js.js"></script></body></html>

0 commit comments

Comments
 (0)