Warning: Undefined variable $cusrnd in /home2/discodur/public_html/discoduroderoer/wp-content/plugins/quick-adsense/includes/content.php on line 291
Warning: Undefined variable $cusrnd in /home2/discodur/public_html/discoduroderoer/wp-content/plugins/quick-adsense/includes/content.php on line 307
Hola a todos, hoy os dejo una serie de ejercicios de webcomponents para practicar todo aquello que hemos explicado en anteriores posts.
Todos los ejercicios que proponemos están resueltos en este mismo post, intenta hacerlo por ti mismo y si te quedas atascado puedes mirar la solución. Recuerda, que no tiene por que estar igual tu solución con la del post, el objetivo es que aprendas no que me copies la solución.
Si tienes alguna duda, recuerda que puedes consultarnos escribiendo un comentario en este post o enviándonos un e-mail a administrador@discoduroderoer.es
1. Crea un webcomponet que muestre un «Hola mundo» por pantalla y al clicar en él, muestre un alert «Hola mundo»
Spoiler
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> |
— javascript
|
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 |
class HelloWorld extends HTMLElement { constructor(){ super(); // Creamos un shadow para añadir contenido let shadow = this.attachShadow({ mode: 'open'}); // Creamos un span const span = document.createElement('span'); // Creamos un texto para un span const spanText = document.createTextNode('Hola mundo'); // Añadimos el texto al span span.appendChild(spanText); // Añado el span al shadow shadow.appendChild(span); } connectedCallback(){ // Añado evento de click this.addEventListener('click', function(){ alert('Hola mundo'); }) } } // Crea el webcomponent customElements.define('hello-world', HelloWorld); |
2. Crear un contador con webcomponet. Dos botones y un input, al hacer click en los botones, aumentamos el valor en el input
Spoiler
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> |
— javascript
|
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 |
class Counter extends HTMLElement { constructor() { super(); this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); this.value = 0; let shadow = this.attachShadow({ mode: 'open' }); const b1 = document.createElement('button'); const b1Text = document.createTextNode('+'); b1.appendChild(b1Text); shadow.appendChild(b1); this.buttonIncrement = b1; const input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('readonly', 'true'); input.setAttribute('value', this.value); shadow.appendChild(input); this.inputText = input; const b2 = document.createElement('button'); const b2Text = document.createTextNode('-'); b2.appendChild(b2Text); shadow.appendChild(b2); this.buttonDecrement = b2; shadow.appendChild(b2); } connectedCallback() { this.buttonIncrement.addEventListener('click', this.increment); this.buttonDecrement.addEventListener('click', this.decrement); } increment() { this.value++; this.inputText.setAttribute('value', this.value); } decrement() { this.value--; this.inputText.setAttribute('value', this.value); } } customElements.define('ddr-counter', Counter); |
3. Añadir atributos al contador del ejercicio anterior.
Spoiler
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> |
— javascript
|
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 |
class Counter extends HTMLElement { constructor() { super(); this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); let shadow = this.attachShadow({ mode: 'open' }); const b1 = document.createElement('button'); const b1Text = document.createTextNode('+'); b1.appendChild(b1Text); shadow.appendChild(b1); this.buttonIncrement = b1; const input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('readonly', 'true'); shadow.appendChild(input); this.inputText = input; const b2 = document.createElement('button'); const b2Text = document.createTextNode('-'); b2.appendChild(b2Text); shadow.appendChild(b2); this.buttonDecrement = b2; shadow.appendChild(b2); } connectedCallback() { this.buttonIncrement.addEventListener('click', this.increment); this.buttonDecrement.addEventListener('click', this.decrement); this.inputText.setAttribute('value', this.value); } increment() { let step = +this.step; // parseInt(this.step) if (!step) { step = 1; } const nextValue = +this.value + step; if (this.max && nextValue > +this.max) { this.value = this.max; } else { this.value = nextValue; } this.inputText.setAttribute('value', this.value); } decrement() { let step = +this.step; // parseInt(this.step) if (!step) { step = 1; } const nextValue = +this.value - step; if (this.min && nextValue < +this.min) { this.value = this.min; } else { this.value = nextValue; } this.inputText.setAttribute('value', this.value); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } } customElements.define('ddr-counter', Counter); |
Os dejo videos que os pueden ser de ayuda.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta