-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patharticle-misapuntes-1.html
More file actions
244 lines (207 loc) · 12.4 KB
/
article-misapuntes-1.html
File metadata and controls
244 lines (207 loc) · 12.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carles Hervera Website</title>
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500|Roboto+Condensed:300,400,700|Roboto:300,400,400i,500"
rel="stylesheet">
<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./node_modules/highlight.js/styles/monokai-sublime.css" />
</head>
<body>
<article id="article">
<section id="header">
<h1 class="h1">Mis apuntes - Javascript30 de Wes Bos - Dia 1 Drums</h1>
</section>
<section id="subheader">
<span>Mis apuntes y cosas interesantes que he sacado del primer día de curso Javascript30 - Drums</span>
</section>
<section id="header-img" style="background-image: url(assets/img/articles/mis-apuntes-js30-dia-1.jpg); background-position-y: center;"></section>
<div id="central">
<section id="content">
<p>
<a href="https://javascript30.com/" target="_blank">Javascript30</a> es un conjunto de tutoriales
para hacer, en principio, uno por día durante 30 días.<br />
Todos tratan de vanilla Javascript ( "a pelo" sin frameworks, sin jQuery, sin Angular...).<br />
Son muy entretenidos ya que Wes Bos, el creador y speaker, los hace sencillos pero muy útiles. <br />
Se realizan en muy poco tiemo, sobre los 25 minutos, ya que todo el HTML y CSS lo aporta él
mediante un repositorio en
<strong>GitHub</strong>.
<br />
Ahí van mis apuntes del curso:
</p>
<h2 class="h2">Mis apuntes sobre <span class="code javascript">Javascript</span></h2>
<h3 class="h3">Atributos data-<i>cualquiercosa</i></h3>
<p>
Este tipo de atributos se añadieron en la versión de HTML 5.<br />
Los atributos <span class="code minnor">data</span> se emplean para definir datos que se usarán desde Javascript ya que el
motor de renderizado del navegador no los va a tener en cuenta.
Gracias a ellos, por ejemplo, podemos tener un enlace así:
<pre><code class="html"><a href="mienlace.html" data-thumb="asset/thumb/imagen-1.png">Ver buena foto</a></code></pre>
Y mediante Javascript podríamos hacer que al pasar por encima con el ratón nos mostrase la foto que indicamos en <span class="code minnor">data-thumb</span>.
<div class="separator"></div>
</p>
<h3 class="h3">Añadir eventos con addEventListener</h3>
<p>
La función <span class="code minnor">addEventListener</span> nos permite asociar funciones (<i>handlers</i>) a
eventos que son producidos por algunos elementos. <br />
Por ejemplo:<br />
<pre><code class="js">closeButton.addEventListener('click', function(event){console.log(this)});</code></pre>
Es importante tener en cuenta que <span class="code minnor">this</span> dentro de la función
que ha disparado evento, hace referencia al elemento disparador, en este caso al <span class="code minnor">link</span>.<br /><br />
Se pueden añadir también eventos al elemento <span class="code minnor">window</span>, por
ejemplo, si añadimos un handler al click, se disparará sea cual sea el sitio que cliquemos.
<div class="separator"></div>
</p>
<h3 class="h3">Funciones querySelector y querySelectorAll</h3>
<p>
Éstas sirven para seleccionar nodos del DOM de nuestra aplicación.<br /><br />
<span class="code minnor">querySelector(selectores)</span> busca y devuelve un elemento que
concuerde con los selectores pasados por parametro. El formato de los selectores es el mismo que utilizamos <span class="code minnor">CSS</span>.<br />
Hay que tener en cuenta que si hay más de un resultado nos devolverá el primero que encuentre.
<span class="code minnor">Null</span> si no encuentra ninguno.<br />
<br />
<span class="code minnor">querySelectorAll(selectores)</span> funciona igual que el anterior pero
devuelve una lista de nodos del DOM (NodeList).<br />
<br />
Ejemplos:
<pre><code class="js">
//El primer elemento que tenga la clase 'featured'
const featured = document.querySelector('.featured');
//El primer elemento que tenga la clase 'child' y esté dentro del elemento featured
const child = featured.querySelector('.child');
//Un listado con todos los nodos que tengan la clase 'children'
const children = document.querySelector('.children');
</code></pre>
<div class="separator"></div>
</p>
<h3 class="h3">Utilizar elemento <AUDIO> desde Javascript</h3>
<p>
La versión 5 de HTML añadió el elemento <a href="https://www.w3schools.com/HTML/html5_audio.asp"
target="_blank">audio</a> al estándar como forma de reproducir audio.<br />
<pre><code class="html">
<audio controls>
<source src="bejo-mucho.mp3" type="audio/mpeg">
</audio>
</code></pre>
También, añadió a su API métodos para controlarlo desde Javascript. Con el método play(), éste
empezará a sonar. Si se vuelve a ejecutar el método mientras éste está sonando, no se reiniciará.
Para que esto suceda hay que <i>settear</i> el atributo <span class="code minnor">currentTime</span> a 0.<br />
</p>
<h2 class="h2">Mis apuntes sobre <span class="code css">CSS</span></h2>
<h3 class="h3">Transiciones entre cambios de propiedades</h3>
<p>
Desde la aparición de CSS3 y las <a href="https://www.w3schools.com/css/css3_transitions.asp"
target="_blank">transiciones</a> ya no es necesario recurrir a Javascript para animar nuestras
Webs.<br />
Nos permite especificar la propiedad sobre la que queremos que se aplique, el tiempo y la función
de tiempo.<br />
Por ejemplo:
<div class="rectangle">Ponte encima mío</div>
<style>
.rectangle {
padding: 15px;
background: #66ffa6;
width: 155px;
transition: width 1s ease-in-out;
}
.rectangle:hover {
width: 300px;
}
</style>
<pre><code class="css">.rectangle{
padding: 15px;
background: #ce66ff;
width: 155px;
transition: width 1s ease-in-out;
}
.rectangle:hover{
width: 300px;
}
</code></pre>
Asimismo, al finalizar las transiciones, se dispara el evento <span class="code minnor">transitionend</span>
al que podemos suscribirnos.<br />
<pre><code class="javascript">element.addEventListener('transitionend', function(){})</code></pre>
Hay que tener en cuenta que se lanzará un evento por cada propiedad modificada ya que podemos poner
transiciones en una o varias propiedades a la vez separándolas por comas o simplemente poniendo
<span class="code minnor">all</span> en el selector de propiedad.
<div class="separator"></div>
</p>
<p>
Y estos son mis apuntes del curso de Javascript30 día 1.
</p>
<div class="fotoby">
<span>Fotografía de portada de:</span>
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px"
href="https://unsplash.com/@jeshoots?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge"
target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from JESHOOTS.COM"><span
style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white"
viewBox="0 0 32 32">
<title>unsplash-logo</title>
<path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path>
</svg></span><span style="display:inline-block;padding:2px 3px">JESHOOTS.COM</span></a>
</div>
</section>
<section id="footer" class="dark">
<div class="tags-list featured type2">
<span>Etiquetas:</span><br />
<a href="#">Usabilidad</a>
</div>
</section>
</div>
<section id="comments">
TODO: comments
</section>
</article>
<script src="assets/js/main.js"></script>
<script>
var decode_entities = (function () {
// Remove HTML Entities
var element = document.createElement('div');
function decode_HTML_entities(str) {
if (str && typeof str === 'string') {
// Escape HTML before decoding for HTML Entities
str = escape(str).replace(/%26/g, '&').replace(/%23/g, '#').replace(/%3B/g, ';');
element.innerHTML = str;
if (element.innerText) {
str = element.innerText;
element.innerText = '';
} else {
// Firefox support
str = element.textContent;
element.textContent = '';
}
}
return unescape(str);
}
return decode_HTML_entities;
})();
const pres = document.querySelectorAll('pre');
pres.forEach(element => {
const clipBoardButton = document.createElement('a');
clipBoardButton.text = 'Copy';
clipBoardButton.dataset.code = element.querySelector('code').innerHTML;
clipBoardButton.addEventListener('click', function () {
const textToCopy = decode_entities(this.dataset.code);
var textArea = document.createElement('textarea');
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('Copy');
textArea.remove();
this.classList.add('copied');
});
const clipBoardContainer = document.createElement('div');
clipBoardContainer.classList.add("copy-clipboard");
clipBoardContainer.appendChild(clipBoardButton);
element.insertBefore(clipBoardContainer, element.firstChild);
});
</script>
<script>
hljs.initHighlightingOnLoad();
</script>
</body>
</html>