Skip to content

Commit ed1624b

Browse files
José Miguel Sánchez AlésJosé Miguel Sánchez Alés
José Miguel Sánchez Alés
authored and
José Miguel Sánchez Alés
committed
Añade dos ejercicios sore Javascript y DOM
1 parent a42d265 commit ed1624b

File tree

9 files changed

+297
-1
lines changed

9 files changed

+297
-1
lines changed

‎docs/99.ejercicios/81-js-dom.html

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
2+
3+
4+
5+
6+
<!DOCTYPE html>
7+
8+
<html lang="es">
9+
<head>
10+
<meta charset="utf-8" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.19: https://docutils.sourceforge.io/" />
12+
13+
<title>Javascript y DOM &#8212; documentación de Lenguajes de Marcas - rolling</title>
14+
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
15+
<link rel="stylesheet" type="text/css" href="../_static/cloud.css" />
16+
<link rel="stylesheet" type="text/css" href="../_static/design-style.1e8bd061cd6da7fc9cf755528e8ffc24.min.css" />
17+
<link rel="stylesheet" href="../_static/general.css" type="text/css" />
18+
<link rel="stylesheet" href="../_static/particular.css" type="text/css" />
19+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noticia+Text:400,i,b,bi|Open+Sans:400,i,b,bi|Roboto+Mono:400,i,b,bi&amp;display=swap" type="text/css" />
20+
21+
<script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
22+
<script src="../_static/jquery.js"></script>
23+
<script src="../_static/underscore.js"></script>
24+
<script src="../_static/_sphinx_javascript_frameworks_compat.js"></script>
25+
<script src="../_static/doctools.js"></script>
26+
<script src="../_static/sphinx_highlight.js"></script>
27+
<script src="../_static/translations.js"></script>
28+
<script src="../_static/design-tabs.js"></script>
29+
30+
31+
32+
33+
<script src="../_static/jquery.cookie.js"></script>
34+
35+
36+
37+
38+
<script src="../_static/cloud.base.js"></script>
39+
40+
41+
42+
43+
<script src="../_static/cloud.js"></script>
44+
45+
46+
<link rel="index" title="Índice" href="../genindex.html" />
47+
<link rel="search" title="Búsqueda" href="../search.html" />
48+
<link rel="prev" title="Javascript: Sintaxis" href="80-js-basico.html" />
49+
<meta name="viewport" content="width=device-width, initial-scale=1">
50+
</head><body>
51+
<div class="relbar-top">
52+
53+
<div class="related" role="navigation" aria-label="related navigation">
54+
<h3>Navegación</h3>
55+
<ul>
56+
<li class="right" style="margin-right: 10px">
57+
<a href="../genindex.html" title="Índice General"
58+
accesskey="I">índice</a></li>
59+
<li class="right" >
60+
<a href="80-js-basico.html" title="Javascript: Sintaxis"
61+
accesskey="P">anterior</a> &nbsp; &nbsp;</li>
62+
<li><a href="../index.html">documentación de Lenguajes de Marcas - rolling</a> &#187;</li>
63+
64+
<li class="nav-item nav-item-this"><a href="">Javascript y <abbr title="Document Object Model">DOM</abbr></a></li>
65+
</ul>
66+
</div>
67+
</div>
68+
69+
70+
<div class="document">
71+
<div class="documentwrapper">
72+
<div class="bodywrapper">
73+
<div class="body" role="main">
74+
75+
<section id="javascript-y-dom">
76+
<h1>Javascript y <abbr title="Document Object Model">DOM</abbr><a class="headerlink" href="#javascript-y-dom" title="Enlace permanente a este encabezado"></a></h1>
77+
<ol class="arabic">
78+
<li><p>Tome <a class="reference download internal" download="" href="../_downloads/4c4c6343dd175f49ddf15805b97050fe/ejJH01.html"><code class="xref download docutils literal notranslate"><span class="pre">este</span> <span class="pre">primer</span> <span class="pre">documento</span> <span class="pre">HTML</span></code></a> y mediante
79+
Javascript añada:</p>
80+
<ol class="loweralpha simple">
81+
<li><p>Un elemento <code class="docutils literal notranslate"><span class="pre">H1</span></code> cuyo contenido sea exactamente el mismo que el
82+
del título de la página.</p></li>
83+
<li><p>Una lista con los N primeros números primeros.</p></li>
84+
<li><p>Un pie al documento anterior que incluya la fecha en la que se carga
85+
la página.</p></li>
86+
</ol>
87+
</li>
88+
<li><p>Con el siguiente código Javascript:</p>
89+
<div class="highlight-javascript notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">url</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Esto.es.una.direccion.URL&quot;</span><span class="p">;</span>
90+
91+
<span class="nx">fetch</span><span class="p">(</span><span class="nx">URL</span><span class="p">)</span>
92+
<span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">response</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
93+
<span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">()</span><span class="w"> </span><span class="c1">// La respuesta es un objeto JSON.</span>
94+
<span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">throw</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="ne">Error</span><span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">status</span><span class="p">);</span>
95+
<span class="w"> </span><span class="p">})</span>
96+
<span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
97+
<span class="w"> </span><span class="c1">// data contiene el objeto con los datos obtenidos de la URL.</span>
98+
<span class="w"> </span><span class="p">})</span>
99+
<span class="w"> </span><span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
100+
<span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="sb">`ERROR: </span><span class="si">${</span><span class="nx">err</span><span class="p">.</span><span class="nx">message</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
101+
<span class="w"> </span><span class="p">});</span>
102+
</pre></div>
103+
</div>
104+
<p>Podemos hacer una petición <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> para obtener datos <abbr title="JavaScript Object Notation">JSON</abbr> facilitados en
105+
una dirección web. Sabiendo esto, cree una página web que muestre en una
106+
tabla los ditintos tipos de carburante para automoción vendidos en España.</p>
107+
<div class="admonition note">
108+
<p class="admonition-title">Nota</p>
109+
<p>Échele un ojo a los ejemplos que introducen la unidad sobre <a class="reference internal" href="../05.almacenamiento/index.html#lm-ut5"><span class="std std-ref">Almacenamiento</span></a>
110+
para saber la <abbr title="Uniform Resource Locator">URL</abbr>.</p>
111+
</div>
112+
</li>
113+
</ol>
114+
</section>
115+
116+
117+
<div class="clearer"></div>
118+
</div>
119+
</div>
120+
</div>
121+
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
122+
<div class="sphinxsidebarwrapper">
123+
<p class="logo"><a href="../index.html" title="index">
124+
<img class="logo" src="../_static/logo.png" alt="Logo"/>
125+
</a></p>
126+
<div class="sphinxprev">
127+
<h4>Previous page</h4>
128+
<p class="topless"><a href="80-js-basico.html"
129+
title="Previous page">&larr; Javascript: Sintaxis</a></p>
130+
</div>
131+
<div role="note" aria-label="source link">
132+
<h3>Esta página</h3>
133+
<ul class="this-page-menu">
134+
<li><a href="../_sources/99.ejercicios/81-js-dom.rst.txt"
135+
rel="nofollow">Mostrar el código</a></li>
136+
</ul>
137+
</div>
138+
<div id="searchbox" style="display: none" role="search">
139+
<h3 id="searchlabel">Búsqueda rápida</h3>
140+
<div class="searchformwrapper">
141+
<form class="search" action="../search.html" method="get">
142+
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
143+
<input type="submit" value="Ir a" />
144+
</form>
145+
</div>
146+
</div>
147+
<script>document.getElementById('searchbox').style.display = "block"</script>
148+
</div>
149+
</div>
150+
151+
152+
<div class="sidebar-toggle-group no-js">
153+
154+
<button class="sidebar-toggle" id="sidebar-hide" title="Hide the sidebar menu">
155+
«
156+
<span class="show-for-small">hide menu</span>
157+
158+
</button>
159+
<button class="sidebar-toggle" id="sidebar-show" title="Show the sidebar menu">
160+
161+
<span class="show-for-small">menu</span>
162+
<span class="hide-for-small">sidebar</span>
163+
»
164+
</button>
165+
</div>
166+
167+
<div class="clearer"></div>
168+
</div>
169+
<div class="relbar-bottom">
170+
171+
<div class="related" role="navigation" aria-label="related navigation">
172+
<h3>Navegación</h3>
173+
<ul>
174+
<li class="right" style="margin-right: 10px">
175+
<a href="../genindex.html" title="Índice General"
176+
>índice</a></li>
177+
<li class="right" >
178+
<a href="80-js-basico.html" title="Javascript: Sintaxis"
179+
>anterior</a> &nbsp; &nbsp;</li>
180+
<li><a href="../index.html">documentación de Lenguajes de Marcas - rolling</a> &#187;</li>
181+
182+
<li class="nav-item nav-item-this"><a href="">Javascript y <abbr title="Document Object Model">DOM</abbr></a></li>
183+
</ul>
184+
</div>
185+
</div>
186+
187+
<div class="footer" role="contentinfo">
188+
&#169; Derechos de autor CC BY 4.0, 2023-2024, José Miguel Sánchez Alés.
189+
Creado usando <a href="https://www.sphinx-doc.org/">Sphinx</a> 5.3.0.
190+
</div>
191+
<!-- cloud_sptheme 1.4 -->
192+
</body>
193+
</html>

‎docs/_downloads/4c4c6343dd175f49ddf15805b97050fe/ejJH01.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html lang=es>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Ejercicio 1</title>
6+
7+
<script src="js/ejercicio1.js"></script>
8+
</html>

‎docs/_sources/99.ejercicios/81-js-dom.rst.txt

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
Javascript y |DOM|
2+
==================
3+
4+
#. Tome :download:`este primer documento HTML <files/ejJH01.html>` y mediante
5+
Javascript añada:
6+
7+
a. Un elemento ``H1`` cuyo contenido sea exactamente el mismo que el
8+
del título de la página.
9+
#. Una lista con los N primeros números primeros.
10+
#. Un pie al documento anterior que incluya la fecha en la que se carga
11+
la página.
12+
13+
#. Con el siguiente código Javascript:
14+
15+
.. code-block:: javascript
16+
17+
const url = "Esto.es.una.direccion.URL";
18+
19+
fetch(URL)
20+
.then(response => {
21+
if(response.ok) return response.json() // La respuesta es un objeto JSON.
22+
else throw new Error(response.status);
23+
})
24+
.then(data => {
25+
// data contiene el objeto con los datos obtenidos de la URL.
26+
})
27+
.catch(err => {
28+
console.error(`ERROR: ${err.message}`);
29+
});
30+
31+
Podemos hacer una petición |AJAX| para obtener datos |JSON| facilitados en
32+
una dirección web. Sabiendo esto, cree una página web que muestre en una
33+
tabla los ditintos tipos de carburante para automoción vendidos en España.
34+
35+
.. note:: Échele un ojo a los ejemplos que introducen la unidad sobre :ref:`lm-ut5`
36+
para saber la |URL|.
37+
38+
.. |AJAX| replace:: :abbr:`AJAX (Asynchronous JavaScript and XML)`
39+
.. |DOM| replace:: :abbr:`DOM (Document Object Model)`

‎docs/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ <h2>Ejercicios<a class="headerlink" href="#ejercicios" title="Enlace permanente
200200
<li class="toctree-l1"><a class="reference internal" href="99.ejercicios/70.selectores.html"><abbr title="Cascading Style Sheets">CSS</abbr>: Selectores</a></li>
201201
<li class="toctree-l1"><a class="reference internal" href="99.ejercicios/71.reglas.html"><abbr title="Cascading Style Sheets">CSS</abbr>: Reglas y maquetación</a></li>
202202
<li class="toctree-l1"><a class="reference internal" href="99.ejercicios/80-js-basico.html">Javascript: Sintaxis</a></li>
203+
<li class="toctree-l1"><a class="reference internal" href="99.ejercicios/81-js-dom.html">Javascript y <abbr title="Document Object Model">DOM</abbr></a></li>
203204
</ul>
204205
</div>
205206
</section>

‎docs/objects.inv

18 Bytes
Binary file not shown.

‎docs/searchindex.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/99.ejercicios/81-js-dom.rst

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
Javascript y |DOM|
2+
==================
3+
4+
#. Tome :download:`este primer documento HTML <files/ejJH01.html>` y mediante
5+
Javascript añada:
6+
7+
a. Un elemento ``H1`` cuyo contenido sea exactamente el mismo que el
8+
del título de la página.
9+
#. Una lista con los N primeros números primeros.
10+
#. Un pie al documento anterior que incluya la fecha en la que se carga
11+
la página.
12+
13+
#. Con el siguiente código Javascript:
14+
15+
.. code-block:: javascript
16+
17+
const url = "Esto.es.una.direccion.URL";
18+
19+
fetch(URL)
20+
.then(response => {
21+
if(response.ok) return response.json() // La respuesta es un objeto JSON.
22+
else throw new Error(response.status);
23+
})
24+
.then(data => {
25+
// data contiene el objeto con los datos obtenidos de la URL.
26+
})
27+
.catch(err => {
28+
console.error(`ERROR: ${err.message}`);
29+
});
30+
31+
Podemos hacer una petición |AJAX| para obtener datos |JSON| facilitados en
32+
una dirección web. Sabiendo esto, cree una página web que muestre en una
33+
tabla los ditintos tipos de carburante para automoción vendidos en España.
34+
35+
.. note:: Échele un ojo a los ejemplos que introducen la unidad sobre :ref:`lm-ut5`
36+
para saber la |URL|.
37+
38+
.. |AJAX| replace:: :abbr:`AJAX (Asynchronous JavaScript and XML)`
39+
.. |DOM| replace:: :abbr:`DOM (Document Object Model)`

‎source/99.ejercicios/files/ejJH01.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html lang=es>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Ejercicio 1</title>
6+
7+
<script src="js/ejercicio1.js"></script>
8+
</html>

‎source/99.ejercicios/soluciones/JS/ejJH01.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html lang=es>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Ejercicio 1</title>
6+
7+
<script src="js/ejercicio1.js"></script>
8+
</html>

0 commit comments

Comments
 (0)