Asabeneh
3 years ago
committed by
GitHub
commit
1c0ea78188
@ -0,0 +1,407 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Document Object Model(DOM)</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 20](../dia_20_Escribiendo_Codigos_Limpios/dia_20_escribiendo_codigos_limpios.md) | [Día 22 >>](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md)
|
||||
|
||||
|
||||
|
||||
- [Día 21](#día-21)
|
||||
- [Document Object Model (DOM) - Día 1](#document-object-model-dom---día-1)
|
||||
- [Obtención del elemento](#obtención-del-elemento)
|
||||
- [Obtener elementos por nombre de etiqueta](#obtener-elementos-por-nombre-de-etiqueta)
|
||||
- [Obtener elementos por el nombre de la clase](#obtener-elementos-por-el-nombre-de-la-clase)
|
||||
- [Obtener un elemento por id](#obtener-un-elemento-por-id)
|
||||
- [Obtener elementos mediante métodos querySelector](#obtener-elementos-mediante-métodos-queryselector)
|
||||
- [Añadir atributo](#añadir-atributo)
|
||||
- [Añadir un atributo con setAttribute](#añadir-un-atributo-con-setattribute)
|
||||
- [Añadir atributo sin setAttribute](#añadir-atributo-sin-setattribute)
|
||||
- [Añadir una clase mediante classList](#añadir-una-clase-mediante-classlist)
|
||||
- [Eliminación de la clase mediante remove](#eliminación-de-la-clase-mediante-remove)
|
||||
- [Añadir texto a un elemento HTML](#añadir-texto-a-un-elemento-html)
|
||||
- [Añadir contenido de texto usando textContent](#añadir-contenido-de-texto-usando-textcontent)
|
||||
- [Añadir contenido de texto usando innerHTML](#añadir-contenido-de-texto-usando-innerhtml)
|
||||
- [textContent](#textcontent)
|
||||
- [innerHTML](#innerhtml)
|
||||
- [Añadir estilo](#añadir-estilo)
|
||||
- [Añadir estilo color](#añadir-estilo-color)
|
||||
- [Añadir estilo Background Color](#añadir-estilo-background-color)
|
||||
- [Añadir estilo Font Size](#añadir-estilo-font-size)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
|
||||
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
|
||||
- [DOM: Mini proyecto 1](#dom-mini-proyecto-1)
|
||||
|
||||
# Día 21
|
||||
|
||||
## Document Object Model (DOM) - Día 1
|
||||
|
||||
El documento HTML está estructurado como un objeto JavaScript. Cada elemento HTML tiene diferentes propiedades que pueden ayudar a manipularlo. Es posible obtener, crear, añadir o eliminar elementos HTML mediante JavaScript. Compruebe los ejemplos siguientes. La selección de elementos HTML mediante JavaScript es similar a la selección mediante CSS. Para seleccionar un elemento HTML, utilizamos el nombre de la etiqueta, el id, el nombre de la clase u otros atributos.
|
||||
|
||||
### Obtención del elemento
|
||||
|
||||
Podemos acceder al elemento o elementos ya creados mediante JavaScript. Para acceder u obtener elementos utilizamos diferentes métodos. El código siguiente tiene cuatro elementos _h1_. Veamos los diferentes métodos para acceder a los elementos _h1_.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Document Object Model - (Modelo de objeto de documento)</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title" id="first-title">First Title</h1>
|
||||
<h1 class="title" id="second-title">Second Title</h1>
|
||||
<h1 class="title" id="third-title">Third Title</h1>
|
||||
<h1></h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Obtener elementos por nombre de etiqueta
|
||||
|
||||
**_getElementsByTagName()_**:toma un nombre de etiqueta como parámetro de cadena y este método devuelve un objeto HTMLCollection. Una HTMLCollection es un objeto tipo array de elementos HTML. La propiedad length proporciona el tamaño de la colección. Siempre que usamos este método accedemos a los elementos individuales usando el índice o después de hacer un bucle a través de cada elemento individual. Un HTMLCollection no soporta todos los métodos de los arrays, por lo que deberíamos utilizar un bucle for normal en lugar de forEach.
|
||||
|
||||
```js
|
||||
// sintaxis
|
||||
document.getElementsByTagName("tagname");
|
||||
```
|
||||
|
||||
```js
|
||||
const allTitles = document.getElementsByTagName("h1");
|
||||
|
||||
console.log(allTitles); //HTMLCollections
|
||||
console.log(allTitles.length); // 4
|
||||
|
||||
for (let i = 0; i < allTitles.length; i++) {
|
||||
console.log(allTitles[i]); // imprime cada uno de los elementos de la HTMLCollection
|
||||
}
|
||||
```
|
||||
|
||||
#### Obtener elementos por el nombre de la clase
|
||||
|
||||
El método **_getElementsByClassName()_** devuelve un objeto HTMLCollection. Una HTMLCollection es una lista tipo array de elementos HTML. La propiedad length proporciona el tamaño de la colección. Es posible realizar un bucle a través de todos los elementos de HTMLCollection. Vea el siguiente ejemplo
|
||||
|
||||
```js
|
||||
//sintaxis
|
||||
document.getElementsByClassName("classname");
|
||||
```
|
||||
|
||||
```js
|
||||
const allTitles = document.getElementsByClassName("title");
|
||||
|
||||
console.log(allTitles); //HTMLCollections
|
||||
console.log(allTitles.length); // 4
|
||||
|
||||
for (let i = 0; i < allTitles.length; i++) {
|
||||
console.log(allTitles[i]); // imprime cada uno de los elementos de la HTMLCollection
|
||||
}
|
||||
```
|
||||
|
||||
#### Obtener un elemento por id
|
||||
|
||||
**_getElementsById()_** tiene como objetivo un único elemento HTML. Pasamos el id sin # como argumento.
|
||||
|
||||
```js
|
||||
//sintaxis
|
||||
document.getElementById("id");
|
||||
```
|
||||
|
||||
```js
|
||||
let firstTitle = document.getElementById("first-title");
|
||||
console.log(firstTitle); // <h1>First Title</h1>
|
||||
```
|
||||
|
||||
#### Obtener elementos mediante métodos querySelector
|
||||
|
||||
El método _document.querySelector_ puede seleccionar un HTML o elementos HTML por nombre de etiqueta, por id o por nombre de clase.
|
||||
|
||||
**_querySelector_**: se puede utilizar para seleccionar elementos HTML por su nombre de etiqueta, id o clase. Si se utiliza el nombre de la etiqueta, sólo se selecciona el primer elemento.
|
||||
|
||||
```js
|
||||
let firstTitle = document.querySelector("h1"); // seleccionar el primer elemento h1 disponible
|
||||
let firstTitle = document.querySelector("#first-title"); // selecciona el id con first-title
|
||||
let firstTitle = document.querySelector(".title"); // seleccionar el primer elemento disponible con clase title
|
||||
```
|
||||
|
||||
**_querySelectorAll_**: se puede utilizar para seleccionar elementos html por su nombre de etiqueta o clase. Devuelve un nodeList que es un objeto tipo array que soporta métodos de array. Podemos utilizar **_bucle for_** o **_forEach_** para recorrer cada elemento de nodeList.
|
||||
|
||||
```js
|
||||
const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page
|
||||
|
||||
console.log(allTitles.length) // 4
|
||||
for (let i = 0; i < allTitles.length; i++) {
|
||||
console.log(allTitles[i])
|
||||
}
|
||||
|
||||
allTitles.forEach(title => console.log(title))
|
||||
const allTitles = document.querySelectorAll('.title') // lo mismo ocurre con la selección mediante la clase
|
||||
```
|
||||
|
||||
### Añadir atributo
|
||||
|
||||
En la etiqueta de apertura de HTML se añade un atributo que proporciona información adicional sobre el elemento. Atributos HTML comunes: id, class, src, style, href, disabled, title, alt. Añadamos id y class para el cuarto título.
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles[3].className = "title";
|
||||
titles[3].id = "fourth-title";
|
||||
```
|
||||
|
||||
#### Añadir un atributo con setAttribute
|
||||
|
||||
El método **_setAttribute()_** establece cualquier atributo html. Toma dos parámetros: el tipo de atributo y el nombre del atributo.
|
||||
Agreguemos la clase y el atributo id para el cuarto título.
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles[3].setAttribute("class", "title");
|
||||
titles[3].setAttribute("id", "fourth-title");
|
||||
```
|
||||
|
||||
#### Añadir atributo sin setAttribute
|
||||
|
||||
Podemos utilizar el método normal de configuración de objetos para establecer un atributo, pero esto no puede funcionar para todos los elementos. Algunos atributos son propiedades de los objetos del DOM y se pueden establecer directamente. Por ejemplo, id y class
|
||||
|
||||
```js
|
||||
//otra forma de establecer un atributo
|
||||
titles[3].className = "title";
|
||||
titles[3].id = "fourth-title";
|
||||
```
|
||||
|
||||
#### Añadir una clase mediante classList
|
||||
|
||||
El método classList es un buen método para añadir clases adicionales. No anula la clase original si existe una clase, sino que añade una clase adicional para el elemento.
|
||||
|
||||
```js
|
||||
//otra forma de establecer un atributo: anexar la clase, no se sobrepone a
|
||||
titles[3].classList.add("title", "header-title");
|
||||
```
|
||||
|
||||
#### Eliminación de la clase mediante remove
|
||||
|
||||
De forma similar a la adición, también podemos eliminar la clase de un elemento. Podemos eliminar una clase específica de un elemento.
|
||||
|
||||
```js
|
||||
//otra forma de establecer un atributo: anexar la clase, no se sobrepone a
|
||||
titles[3].classList.remove("title", "header-title");
|
||||
```
|
||||
|
||||
### Añadir texto a un elemento HTML
|
||||
|
||||
Un HTML es un bloque compuesto por una etiqueta de apertura, una etiqueta de cierre y un contenido de texto. Podemos añadir un contenido de texto utilizando la propiedad _textContent_ o \*innerHTML.
|
||||
|
||||
#### Añadir contenido de texto usando textContent
|
||||
|
||||
La propiedad _textContent_ se utiliza para añadir texto a un elemento HTML.
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles[3].textContent = "Fourth Title";
|
||||
```
|
||||
|
||||
#### Añadir contenido de texto usando innerHTML
|
||||
|
||||
La mayoría de la gente se confunde entre _textContent_ y _innerHTML_. _textContent_ está pensado para añadir texto a un elemento HTML, sin embargo innerHTML puede añadir un elemento o elementos de texto o HTML como hijo.
|
||||
|
||||
##### textContent
|
||||
|
||||
Asignamos la propiedad del objeto HTML _textContent_ a un texto
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles[3].textContent = "Fourth Title";
|
||||
```
|
||||
|
||||
##### innerHTML
|
||||
|
||||
Usamos la propiedad innerHTML cuando queremos reemplazar o un contenido hijo completamente nuevo a un elemento padre.
|
||||
El valor que asignemos será una cadena de elementos HTML.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>JavaScript para todos:DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Asabeneh Yetayeh desafíos en 2020</h1>
|
||||
<h2>Reto 30DaysOfJavaScript</h2>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<script>
|
||||
const lists = `
|
||||
<li>30DaysOfPython Challenge Done</li>
|
||||
<li>30DaysOfJavaScript Challenge Ongoing</li>
|
||||
<li>30DaysOfReact Challenge Coming</li>
|
||||
<li>30DaysOfFullStack Challenge Coming</li>
|
||||
<li>30DaysOfDataAnalysis Challenge Coming</li>
|
||||
<li>30DaysOfReactNative Challenge Coming</li>
|
||||
<li>30DaysOfMachineLearning Challenge Coming</li>`;
|
||||
const ul = document.querySelector("ul");
|
||||
ul.innerHTML = lists;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
La propiedad innerHTML puede permitirnos también eliminar todos los hijos de un elemento padre. En lugar de utilizar removeChild() yo recomendaría el siguiente método.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>JavaScript for Everyone:DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Asabeneh Yetayeh challenges in 2020</h1>
|
||||
<h2>30DaysOfJavaScript Challenge</h2>
|
||||
<ul>
|
||||
<li>30DaysOfPython Challenge Done</li>
|
||||
<li>30DaysOfJavaScript Challenge Ongoing</li>
|
||||
<li>30DaysOfReact Challenge Coming</li>
|
||||
<li>30DaysOfFullStack Challenge Coming</li>
|
||||
<li>30DaysOfDataAnalysis Challenge Coming</li>
|
||||
<li>30DaysOfReactNative Challenge Coming</li>
|
||||
<li>30DaysOfMachineLearning Challenge Coming</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
const ul = document.querySelector("ul");
|
||||
ul.innerHTML = "";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Añadir estilo
|
||||
|
||||
#### Añadir estilo Color
|
||||
|
||||
Añadamos un poco de estilo a nuestros títulos. Si el elemento tiene índice par le damos color verde sino rojo.
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles.forEach((title, i) => {
|
||||
title.style.fontSize = "24px"; // todos los títulos tendrán un tamaño de letra de 24px
|
||||
if (i % 2 === 0) {
|
||||
title.style.color = "green";
|
||||
} else {
|
||||
title.style.color = "red";
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Añadir estilo Background Color
|
||||
|
||||
Añadamos un poco de estilo a nuestros títulos. Si el elemento tiene índice par le damos color verde sino rojo.
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles.forEach((title, i) => {
|
||||
title.style.fontSize = "24px"; // todos los títulos tendrán un tamaño de letra de 24px
|
||||
if (i % 2 === 0) {
|
||||
title.style.backgroundColor = "green";
|
||||
} else {
|
||||
title.style.backgroundColor = "red";
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Añadir estilo Font Size
|
||||
|
||||
Añadamos algo de estilo a nuestros títulos. Si el elemento tiene índice par le damos 20px sino 30px
|
||||
|
||||
```js
|
||||
const titles = document.querySelectorAll("h1");
|
||||
titles.forEach((title, i) => {
|
||||
title.style.fontSize = "24px"; // todos los títulos tendrán un tamaño de letra de 24px
|
||||
if (i % 2 === 0) {
|
||||
title.style.fontSize = "20px";
|
||||
} else {
|
||||
title.style.fontSize = "30px";
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Como has notado, las propiedades de css cuando lo usamos en JavaScript va a ser un camelCase. Las siguientes propiedades CSS cambian de background-color a backgroundColor, font-size a fontSize, font-family a fontFamily, margin-bottom a marginBottom.
|
||||
|
||||
---
|
||||
|
||||
🌕 Ahora, estás completamente dotado de un súper poder, has completado la parte más importante y desafiante del desafío y en general de JavaScript. Has aprendido DOM y ahora tienes la capacidad de construir y desarrollar aplicaciones. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Crear un archivo index.html y poner cuatro elementos p: Obtenga el primer párrafo utilizando **_document.querySelector(tagname)_** y el nombre de la etiqueta
|
||||
2. Obtener cada uno de los párrafos usando **_document.querySelector('#id')_** mediante su id
|
||||
3. Obtener todos los p como nodeList usando **_document.querySelectorAll(tagname)_** por su nombre de etiqueta
|
||||
4. Recorrer nodeList y obtener el contenido del texto de cada párrafo
|
||||
5. Establecer un textContent para el párrafo del cuarto párrafo,**_Fourth Paragraph_**
|
||||
6. Establezca los atributos id y class para todos los párrafos utilizando diferentes métodos de establecimiento de atributos
|
||||
|
||||
### Ejercicios: Nivel 2
|
||||
|
||||
1. Cambiar el estilo de cada párrafo mediante JavaScript (ej, color, fondo, borde, tamaño de la fuente, familia de la fuente)
|
||||
1. Seleccione todos los párrafos y haga un bucle a través de cada uno de los elementos y dé al primer y tercer párrafo un color verde, y al segundo y cuarto párrafo un color rojo
|
||||
1. Establecer textContent, id y class a cada párrafo
|
||||
|
||||
### Ejercicios: Nivel 3
|
||||
|
||||
#### DOM: Mini proyecto 1
|
||||
|
||||
1. Desarrolle la siguiente aplicación, utilice los siguientes elementos HTML para empezar. Obtendrá el mismo código en la carpeta de inicio. Aplique todos los estilos y la funcionalidad utilizando sólo JavaScript.
|
||||
|
||||
- El color del año cambia cada 1 segundo
|
||||
- El color de fondo de la fecha y la hora cambia cada dos segundos
|
||||
- El reto completado tiene fondo verde
|
||||
- El desafío en curso tiene fondo amarillo
|
||||
- Los próximos retos tienen fondo rojo
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>JavaScript para todos: DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Asabeneh Yetayeh retos en 2020</h1>
|
||||
<h2>Reto 30DaysOfJavaScript</h2>
|
||||
<ul>
|
||||
<li>Reto 30DaysOfPython Realizado</li>
|
||||
<li>Reto 30DaysOfJavaScript en curso</li>
|
||||
<li>Reto 30DaysOfReact próximamente</li>
|
||||
<li>Reto 30DaysOfFullStack próximamente</li>
|
||||
<li>Reto 30DaysOfDataAnalysis próximamente</li>
|
||||
<li>Reto 30DaysOfReactNative próximamente</li>
|
||||
<li>Reto 30DaysOfMachineLearning próximamente</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 20](../dia_20_Escribiendo_Codigos_Limpios/dia_20_escribiendo_codigos_limpios.md) | [Día 22 >>](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md)
|
||||
@ -0,0 +1,224 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Manipulación del Objeto DOM </h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](../dia_23_Event_Listeners/dia_23_event_listeners.md)
|
||||
|
||||
|
||||
|
||||
- [Día 22](#día-22)
|
||||
- [DOM(Document Object Model)-Día 2](#domdocument-object-model-día-2)
|
||||
- [Creando un elemento](#creando-un-elemento)
|
||||
- [Creación de elementos](#creación-de-elementos)
|
||||
- [Añadir un hijo a un elemento padre](#añadir-un-hijo-a-un-elemento-padre)
|
||||
- [Eliminar un elemento hijo de un nodo padre](#eliminar-un-elemento-hijo-de-un-nodo-padre)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
|
||||
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
|
||||
|
||||
# Día 22
|
||||
|
||||
## DOM(Document Object Model)-Día 2
|
||||
|
||||
### Creando un elemento
|
||||
|
||||
Para crear un elemento HTML utilizamos el nombre de la etiqueta. La creación de un elemento HTML mediante JavaScript es muy sencilla y directa. Utilizamos el método _document.createElement()_. El método toma un nombre de etiqueta de elemento HTML como parámetro de cadena.
|
||||
|
||||
```js
|
||||
// sintaxus
|
||||
document.createElement("tagname");
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
let title = document.createElement("h1");
|
||||
title.className = "title";
|
||||
title.style.fontSize = "24px";
|
||||
title.textContent = "Creating HTML element DOM Day 2";
|
||||
|
||||
console.log(title);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Creación de elementos
|
||||
|
||||
Para crear múltiples elementos debemos utilizar el bucle. Usando el bucle podemos crear tantos elementos HTML como queramos.
|
||||
Después de crear el elemento podemos asignar valor a las diferentes propiedades del objeto HTML.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
let title;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
title = document.createElement("h1");
|
||||
title.className = "title";
|
||||
title.style.fontSize = "24px";
|
||||
title.textContent = i;
|
||||
console.log(title);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Añadir un hijo a un elemento padre
|
||||
|
||||
Para ver un elemento creado en el documento HTML debemos añadirlo al padre como elemento hijo. Podemos acceder al cuerpo del documento HTML utilizando _document.body_. El _document.body_ soporta el método _appendChild()_. Vea el ejemplo siguiente.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// creación de múltiples elementos y anexión al elemento padre
|
||||
let title;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
title = document.createElement("h1");
|
||||
title.className = "title";
|
||||
title.style.fontSize = "24px";
|
||||
title.textContent = i;
|
||||
document.body.appendChild(title);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Eliminar un elemento hijo de un nodo padre
|
||||
|
||||
Después de crear un HTML, es posible que queramos eliminar uno o varios elementos y podemos utilizar el método _removeChild()_.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Removing child Node</h1>
|
||||
<h2>Asabeneh Yetayeh challenges in 2020</h1>
|
||||
<ul>
|
||||
<li>30DaysOfPython Challenge Done</li>
|
||||
<li>30DaysOfJavaScript Challenge Done</li>
|
||||
<li>30DaysOfReact Challenge Coming</li>
|
||||
<li>30DaysOfFullStack Challenge Coming</li>
|
||||
<li>30DaysOfDataAnalysis Challenge Coming</li>
|
||||
<li>30DaysOfReactNative Challenge Coming</li>
|
||||
<li>30DaysOfMachineLearning Challenge Coming</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
const ul = document.querySelector('ul')
|
||||
const lists = document.querySelectorAll('li')
|
||||
for (const list of lists) {
|
||||
ul.removeChild(list)
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
Como hemos visto en la sección anterior hay una forma mejor de eliminar todos los elementos HTML internos o hijos de un elemento padre utilizando el método _innerHTML_ propiedades.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Removing child Node</h1>
|
||||
<h2>Asabeneh Yetayeh challenges in 2020</h1>
|
||||
<ul>
|
||||
<li>30DaysOfPython Challenge Done</li>
|
||||
<li>30DaysOfJavaScript Challenge Done</li>
|
||||
<li>30DaysOfReact Challenge Coming</li>
|
||||
<li>30DaysOfFullStack Challenge Coming</li>
|
||||
<li>30DaysOfDataAnalysis Challenge Coming</li>
|
||||
<li>30DaysOfReactNative Challenge Coming</li>
|
||||
<li>30DaysOfMachineLearning Challenge Coming</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
const ul = document.querySelector('ul')
|
||||
ul.innerHTML = ''
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
El fragmento de código anterior borró todos los elementos hijos.
|
||||
|
||||
---
|
||||
|
||||
🌕 Eres muy especial, estás progresando cada día. Ahora, sabes cómo destruir un elemento DOM creado cuando es necesario. Aprendiste DOM y ahora tienes la capacidad de construir y desarrollar aplicaciones. Te quedan sólo ocho días para tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Crear un div contenedor en el documento HTML y crear 100 a 100 números dinámicamente y anexar al div contenedor.
|
||||
- El fondo de los números pares es verde
|
||||
- El fondo de los números impares es amarillo
|
||||
- El fondo de los números primos es rojo
|
||||
|
||||
|
||||
|
||||
### Ejercicios: Nivel 2
|
||||
|
||||
1. Utilice el array de países para mostrar todos los países. Vea el diseño
|
||||
|
||||
|
||||
|
||||
### Ejercicios: Nivel 3
|
||||
|
||||
Compruebe los requisitos de este proyecto a partir de ambas imágenes (jpg y gif). Todos los datos y el CSS se han implementado utilizando únicamente JavaScript. Los datos se encuentran en la carpeta de inicio del proyecto\*3. El botón desplegable se ha creado utilizando el [details\*](https://www.w3schools.com/tags/tag_details.asp) elemento HTML.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 21](../dia_21_DOM/dia_21_dom.md) | [Día 23 >>](../dia_23_Event_Listeners/dia_23_event_listeners.md)
|
||||
@ -0,0 +1,334 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Event Listeners</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 22](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md) | [Día 24 >>](../dia_24_Proyecto_Sistema_Solar/dia_24_proyecto_sistema_solar.md)
|
||||
|
||||
|
||||
|
||||
- [Día 23](#día-23)
|
||||
- [DOM(Document Object Model)-Día 3](#domdocument-object-model-día-3)
|
||||
- [Event Listeners](#event-listeners)
|
||||
- [Click](#click)
|
||||
- [Doble Click](#doble-click)
|
||||
- [Mouse enter](#mouse-enter)
|
||||
- [Obtener el valor de un elemento input](#obtener-el-valor-de-un-elemento-input)
|
||||
- [valor de entrada](#valor-de-entrada)
|
||||
- [evento de entrada y cambio](#evento-de-entrada-y-cambio)
|
||||
- [evento de desenfoque](#evento-de-desenfoque)
|
||||
- [keypress, keydow y keyup](#keypress-keydow-y-keyup)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 23
|
||||
|
||||
## DOM(Document Object Model)-Día 3
|
||||
|
||||
### Event Listeners
|
||||
|
||||
Eventos HTML comunes: onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload.
|
||||
Podemos añadir el método **event_listener** (escuchador de eventos) a cualquier objeto DOM. Utilizamos el método **_addEventListener()_** para escuchar diferentes tipos de eventos en los elementos HTML. El método _addEventListener()_ toma dos argumentos, un event listener y una función callback.
|
||||
|
||||
```js
|
||||
selectedElement.addEventListener("eventlistner", function (e) {
|
||||
// la actividad que quieres que ocurra después del evento estará aquí
|
||||
});
|
||||
// or
|
||||
|
||||
selectedElement.addEventListener("eventlistner", (e) => {
|
||||
// la actividad que quieres que ocurra después del evento estará aquí
|
||||
});
|
||||
```
|
||||
|
||||
#### Click
|
||||
|
||||
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
|
||||
|
||||
El siguiente es un ejemplo de evento de tipo click.
|
||||
|
||||
**Ejemplo: click**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button>Click Me</button>
|
||||
|
||||
<script>
|
||||
const button = document.querySelector("button");
|
||||
button.addEventListener("click", (e) => {
|
||||
console.log("e gives the event listener object:", e);
|
||||
console.log("e.target gives the selected element: ", e.target);
|
||||
console.log(
|
||||
"e.target.textContent gives content of selected element: ",
|
||||
e.target.textContent
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
También se puede adjuntar un evento directamente al elemento HTML como script en línea.
|
||||
|
||||
**Ejemplo: onclick**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button onclick="clickMe()">Click Me</button>
|
||||
<script>
|
||||
const clickMe = () => {
|
||||
alert("We can attach event on HTML element");
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Doble Click
|
||||
|
||||
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
|
||||
|
||||
El siguiente es un ejemplo de evento de tipo click.
|
||||
|
||||
**Ejemplo: dblclick**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button>Click Me</button>
|
||||
<script>
|
||||
const button = document.querySelector("button");
|
||||
button.addEventListener("dblclick", (e) => {
|
||||
console.log("e gives the event listener object:", e);
|
||||
console.log("e.target gives the selected element: ", e.target);
|
||||
console.log(
|
||||
"e.target.textContent gives content of selected element: ",
|
||||
e.target.textContent
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Mouse enter
|
||||
|
||||
Para adjuntar un event listener a un elemento, primero seleccionamos el elemento y luego adjuntamos el método addEventListener. El event listener toma como argumento el tipo de evento y las funciones de callback.
|
||||
|
||||
El siguiente es un ejemplo de evento de tipo click.
|
||||
|
||||
**Ejemplo: mouseenter**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button>Click Me</button>
|
||||
<script>
|
||||
const button = document.querySelector("button");
|
||||
button.addEventListener("mouseenter", (e) => {
|
||||
console.log("e gives the event listener object:", e);
|
||||
console.log("e.target gives the selected element: ", e.target);
|
||||
console.log(
|
||||
"e.target.textContent gives content of selected element: ",
|
||||
e.target.textContent
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
A estas alturas ya estás familiarizado con el método addEventListen y cómo añadir un event listener. Hay muchos tipos de event listeners. Pero en este reto nos centraremos en los eventos importantes más comunes.
|
||||
|
||||
Lista de eventos:
|
||||
|
||||
- click - cuando se hace click en el elemento
|
||||
- dblclick - cuando se hace doble click en el elemento
|
||||
- mouseenter - cuando el punto del mouse ingresa al elemento
|
||||
- mouseleave - cuando el puntero del mouse abandona el elemento
|
||||
- mousemove - cuando el puntero del mouse se mueve sobre el elemento
|
||||
- mouseover - cuando el puntero del mouse se mueve sobre el elemento
|
||||
- mouseout - cuando el puntero del mouse sale del elemento
|
||||
- input - cuando el valor entra en el input de entrada
|
||||
- change - cuando el valor cambia en el input de entrada
|
||||
- blur - cuando el elemento no está enfocado
|
||||
- keydown - cuando una tecla está pulsada
|
||||
- keyup - cuando una tecla está levantada
|
||||
- keypress - cuando pulsamos cualquier tecla
|
||||
- onload - cuando el navegador ha terminado de cargar una página
|
||||
|
||||
Pruebe los tipos de eventos anteriores sustituyendo el tipo de evento en el fragmento de código anterior.
|
||||
|
||||
### Obtener el valor de un elemento input
|
||||
|
||||
Normalmente rellenamos formularios y los formularios aceptan datos. Los campos de los formularios se crean utilizando el elemento HTML input. Vamos a construir una pequeña aplicación que nos permita calcular el índice de masa corporal de una persona utilizando dos campos de entrada, un botón y una etiqueta p.
|
||||
|
||||
### valor de entrada
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Body Mass Index Calculator</h1>
|
||||
|
||||
<input type="text" id="mass" placeholder="Mass in Kilogram" />
|
||||
<input type="text" id="height" placeholder="Height in meters" />
|
||||
<button>Calculate BMI</button>
|
||||
|
||||
<script>
|
||||
const mass = document.querySelector("#mass");
|
||||
const height = document.querySelector("#height");
|
||||
const button = document.querySelector("button");
|
||||
|
||||
let bmi;
|
||||
button.addEventListener("click", () => {
|
||||
bmi = mass.value / height.value ** 2;
|
||||
alert(`your bmi is ${bmi.toFixed(2)}`);
|
||||
console.log(bmi);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### evento de entrada y cambio
|
||||
|
||||
En el ejemplo anterior, hemos conseguido obtener los valores de entrada de dos campos de entrada haciendo click en el botón. Qué tal si queremos obtener el valor sin hacer click en el botón. Podemos utilizar el tipo de evento _change_ o _input_ para obtener los datos inmediatamente del campo de entrada cuando el campo está en el foco. Veamos cómo lo haremos.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Data Binding using input or change event</h1>
|
||||
|
||||
<input type="text" placeholder="say something" />
|
||||
<p></p>
|
||||
|
||||
<script>
|
||||
const input = document.querySelector("input");
|
||||
const p = document.querySelector("p");
|
||||
|
||||
input.addEventListener("input", (e) => {
|
||||
p.textContent = e.target.value;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### evento de desenfoque
|
||||
|
||||
A diferencia de _input_ o _change_, el evento _blur_ se produce cuando el campo de entrada no está enfocado.
|
||||
|
||||
```js
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Giving feedback using blur event</h1>
|
||||
|
||||
<input type="text" id="mass" placeholder="say something" />
|
||||
<p></p>
|
||||
|
||||
<script>
|
||||
const input = document.querySelector('input')
|
||||
const p = document.querySelector('p')
|
||||
|
||||
input.addEventListener('blur', (e) => {
|
||||
p.textContent = 'Field is required'
|
||||
p.style.color = 'red'
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
#### keypress, keydow y keyup
|
||||
|
||||
Podemos acceder a todos los números de teclas del teclado utilizando diferentes tipos de event listener. Usemos keypress y obtengamos el keyCode de cada tecla del teclado.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document Object Model:30 Days Of JavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Key events: Press any key</h1>
|
||||
|
||||
<script>
|
||||
document.body.addEventListener("keypress", (e) => {
|
||||
alert(e.keyCode);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
🌕 Eres muy especial, estás progresando cada día. Ahora, sabes cómo manejar cualquier tipo de eventos DOM. . Te quedan sólo siete días para tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Generar números y marcar pares, impares y primos con tres colores diferentes. Vea la imagen de abajo.
|
||||
|
||||
|
||||
|
||||
1. Generando el código del teclado usando even listener. La imagen de abajo.
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 22](../dia_22_Manipulacion_del_Objeto_DOM/dia_22_manipulacion_del_objeto_dom.md) | [Día 24 >>](../dia_24_Proyecto_Sistema_Solar/dia_24_proyecto_sistema_solar.md)
|
||||
@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Mini Proyecto Sistema Solar</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 23](../dia_23_Event_Listeners/dia_23_event_listeners.md) | [Día 25 >>](../dia_25_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_1/dia_25_visualizacion_de_datos_de_los_paises_del_mundo_1.md)
|
||||
|
||||
|
||||
|
||||
- [Día 24](#día-24)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 24
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Desarrollar una pequeña aplicación que calcule el peso de un objeto en un determinado planeta. La imagen gif no está completa revisa el video en el archivo de inicio.
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 23](../dia_23_Event_Listeners/dia_23_event_listeners.md) | [Día 25 >>](../dia_25_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_1/dia_25_visualizacion_de_datos_de_los_paises_del_mundo_1.md)
|
||||
@ -0,0 +1,39 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Visualización de Datos de los Países del Mundo</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 24](../dia_24_Proyecto_Sistema_Solar/dia_24_proyecto_sistema_solar.md) | [Día 26 >>](../dia_26_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_2/dia_26_visualizacion_de_datos_de_los_paises_del_mundo_2.md)
|
||||
|
||||
|
||||
|
||||
- [Día 25](#día-25)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 25
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Visualiza los diez países más poblados y los diez idiomas más hablados del mundo usando DOM(HTML, CSS, JS)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 24](../dia_24_Proyecto_Sistema_Solar/dia_24_proyecto_sistema_solar.md) | [Día 26 >>](../dia_26_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_2/dia_26_visualizacion_de_datos_de_los_paises_del_mundo_2.md)
|
||||
@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Visualización de Datos de los Países del Mundo 2 </h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 25](../dia_25_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_1/dia_25_visualizacion_de_datos_de_los_paises_del_mundo_1.md) | [Día 27 >>](../dia_27_Mini_Proyecto_Portafolio/27_Day_Mini_project_portfolio.md)
|
||||
|
||||
|
||||
|
||||
- [Día 26](#día-26)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 26
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Visualice el array de países de la siguiente manera
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 25](../dia_25_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_1/dia_25_visualizacion_de_datos_de_los_paises_del_mundo_1.md) | [Día 27 >>](../dia_27_Mini_Proyecto_Portafolio/27_Day_Mini_project_portfolio.md)
|
||||
@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Portafolio</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 26](../dia_26_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_2/dia_26_visualizacion_de_datos_de_los_paises_del_mundo_2.md) | [Día 28 >>](../dia_28_Mini_Proyecto_Tabla_De_Posiciones/dia_28_mini_proyecto_tabla_de_posiciones.md)
|
||||
|
||||
|
||||
|
||||
- [Día 27](#día-27)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 27
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Crea lo siguiente usando HTML, CSS y JavaScript
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 26](../dia_26_Visualizacion_De_Datos_De_Los_Paises_Del_Mundo_2/dia_26_visualizacion_de_datos_de_los_paises_del_mundo_2.md) | [Día 28 >>](../dia_28_Mini_Proyecto_Tabla_De_Posiciones/dia_28_mini_proyecto_tabla_de_posiciones.md)
|
||||
@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Tabla de Posiciones</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 27](../dia_27_Mini_Proyecto_Portafolio/27_Day_Mini_project_portfolio.md) | [Día 29>>](../dia_29_Mini_Proyecto_Animacion_De_Caracteres/dia_29_mini_proyecto_animacion_de_caracteres.md)
|
||||
|
||||
|
||||
|
||||
- [Día 28](#día-28)
|
||||
- [Ejercicio](#ejercicio)
|
||||
- [Ejercicio: Nivel 1](#ejercicio-nivel-1)
|
||||
|
||||
# Día 28
|
||||
|
||||
## Ejercicio
|
||||
|
||||
### Ejercicio: Nivel 1
|
||||
|
||||
1. Crea lo siguiente usando HTML, CSS y JavaScript
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 27](../dia_27_Mini_Proyecto_Portafolio/27_Day_Mini_project_portfolio.md) | [Día 29>>](../dia_29_Mini_Proyecto_Animacion_De_Caracteres/dia_29_mini_proyecto_animacion_de_caracteres.md)
|
||||
@ -0,0 +1,37 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Animación de Caracteres</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Día 28](../dia_28_Mini_Proyecto_Tabla_De_Posiciones/dia_28_mini_proyecto_tabla_de_posiciones.md) | [Día 30>>](../dia_30_Mini_Proyecto_Final/dia_30_mini_proyecto_final.md)
|
||||
|
||||
|
||||
|
||||
- [Día 29](#día-29)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
|
||||
# Día 29
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Crea la siguiente animación utilizando (HTML, CSS, JS)
|
||||
|
||||
|
||||
|
||||
🎉 ¡FELICITACIONES! 🎉
|
||||
|
||||
[<< Día 28](../dia_28_Mini_Proyecto_Tabla_De_Posiciones/dia_28_mini_proyecto_tabla_de_posiciones.md) | [Día 30>>](../dia_30_Mini_Proyecto_Final/dia_30_mini_proyecto_final.md)
|
||||
@ -0,0 +1,67 @@
|
||||
<div align="center">
|
||||
<h1> 30 Días de JavaScript: Proyecto Final</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Enero, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<small>Apoya al <strong>autor</strong> para que cree más material educativo</small> <br />
|
||||
<a href = "https://www.paypal.me/asabeneh"><img src='../../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
|
||||
</div>
|
||||
|
||||
[<< Día 29](../dia_29_Mini_Proyecto_Animacion_De_Caracteres/dia_29_mini_proyecto_animacion_de_caracteres.md)
|
||||
|
||||
|
||||
|
||||
- [Día 30](#día-30)
|
||||
- [Ejercicios](#ejercicios)
|
||||
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
|
||||
- [Testimonio](#testimonio)
|
||||
- [Apoyo](#apoyo)
|
||||
|
||||
# Día 30
|
||||
|
||||
## Ejercicios
|
||||
|
||||
### Ejercicios: Nivel 1
|
||||
|
||||
1. Crea la siguiente animación utilizando (HTML, CSS, JS)
|
||||
|
||||
|
||||
|
||||
2. Valide el siguiente formulario utilizando regex.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
🌕 Tu viaje a la grandeza se ha completado con éxito. Has alcanzado un alto nivel de genialidad. Ahora, eres mucho más brillante que antes. Yo sabía lo que se necesita para llegar a este nivel y tú llegaste a este punto. Eres un verdadero héroe. Ahora, es el momento de celebrar tu éxito con un amigo o con la familia. Estoy deseando verte en otro reto.
|
||||
|
||||
## Testimonio
|
||||
|
||||
Ahora es el momento de apoyar al autor y expresar su opinión sobre el autor y 30DaysOfJavaScript. Puedes dejar tu testimonio en este [link](https://testimonify.herokuapp.com/)
|
||||
|
||||
## Apoyo
|
||||
|
||||
Puedes apoyar al autor para que produzca más material educativo
|
||||
|
||||
[](https://www.paypal.me/asabeneh)
|
||||
|
||||
|
||||
|
||||
[<< Día 29](../dia_29_Mini_Proyecto_Animacion_De_Caracteres/dia_29_mini_proyecto_animacion_de_caracteres.md)
|
||||
Loading…
Reference in new issue