elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


  Mostrar Mensajes
Páginas: 1 2 3 4 5 6 7 [8] 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ... 47
71  Programación / Desarrollo Web / Curso de javascript | 14. Fuente de error: acceder a elementos que aún no existen en: 9 Septiembre 2022, 21:26 pm
Fuente de error: javascript intenta acceder a elementos que aún no existen
En el último capítulo vimos que el siguiente programa de javascript se canceló con el mensaje de error "Uncaught TypeError: Connot read property …".

Código
  3. 	<title>Titulo de la pagina</title>
  4. </head>
  6. let parrafo1 = document.getElementById('area1');
  7. document.write("<br>" + parrafo1.innerHTML);
  8. console.log("<br>" + parrafo1);
  11.     <h1>Encabezado 1</h1>
  12.     <p id="area1">Primer parrafo con texto</p>
  13.     <p>Segundo parrafo con texto</p>
  14.     <a href="https://foro.elhacker.net">Texto del link</a>
  16. </body>
  17. </html>

¿Por qué esto es así? Nuestro programa javascript intenta a través de document.getElementById('area1'); acceder a un área en HTML que aún no se "muestra" en ese momento. ¿Que se quiere decir con eso? Nuestro párrafo con la ID area1 recién se "ejecuta" más adelante en el programa y solo entonces estara disponible para javascript.


La prueba para una mejor comprensión
También podemos hacer que esto sea muy claramente visible al mostrar en la consola lo que actualmente está disponible para javascript.

Usando la instrucción console.log(document.children[0].innerHTML); vemos el “estado de carga”.

Código
  1. <html>
  2. <head>
  3. 	<title>Titulo de la pagina</title>
  4. <script>
  5. console.log(document.children[0].innerHTML);
  6. window.addEventListener("load", function() {
  7. 	let parrafo1 = document.getElementById('area1');
  8. 	// console.log(parrafo1.innerHTML);
  9. 	// console.log(parrafo1);
  10. 	console.log(document.children[0].innerHTML);
  11. } );
  12. </script>
  13. </head>
  14. <body>
  15. 	<h1>Encabezado 1</h1>
  16.     <p id="area1">Primer parrafo con texto</p>
  17.     <p>Segundo parrafo con texto</p>
  18.     <a href="https://foro.elhacker.net">Texto del link</a>
  19. <script>
  20. console.log(document.children[0].innerHTML);
  21. </script>
  22. </body>
  23. </html>

La salida de la consola en la línea 6 muestra que solo está presente la sección head; por otro lado, obtenemos el código completo a través del mismo comando en la salida de la consola.


Independiente de la ubicación de nuestro código javascript
Y aquí es exactamente donde queremos independizarnos.

Queremos decirle a nuestro programa javascript que no se ejecute hasta que se hayan cargado todos los elementos HTML de la página.


EventListener - esperar a eventos definidos usando javascript
En javascript existen EventListeners que podemos usar para eventos como un clic del usuario, pulsaciones de teclas o incluso la carga completa de todos los elementos HTML en una página. Así que podemos consultar cualquier cantidad de Events (inglés para evento), es decir, esperar y "escuchar" (Listen en inglés) si estos llegan a ocurrir. La traducción al español de EventListener es realmente agradable: es el oidor de eventos.

Veamos la estructura en javascript:

La declaración de javascript comienza con window.addEventListener(). Después de iniciar nuestro programa javascript, a nuestra ventana se monitorea constantemente para ver si ocurre un evento específico. Y aquí el énfasis está en permanente. Compara esto con lenguajes de programación como PHP, donde se ejecuta un programa y cuando este programa ha llegado a la última línea de código, este se completa y termina. Si usamos EventListener en javascript, el código asociado se ejecutará en una función tan pronto como ocurra un evento (Event) específico. No te tropiezcas con la nueva palabra de función aquí: las funciones se introduciran más adelante.

Ahora, por supuesto, aún tenemos que decirle a addEventListener() qué evento (Event) debe escuchar:

Código
  1. window.addEventListener("load" );

Por lo tanto, estamos esperando que nuestro archivo se cargue por completo; en otras palabras, todas las instrucciones HTML están disponibles y javascript puede consultarlas o usarlas. Nuestro evento "load" no significa nada más que nuestra página completa ha terminado de cargarse.

Ahora está claro cuándo nuestro EventListener debería de activarse - ahora falta la actividad. Primero echemos un vistazo a la estructura básica:

Código
  1. window.addEventListener("load", function() {
  2. } );

Y con acción, se debe de mostrarse que la página se cargó por completo:

Código
  1. window.addEventListener("load", function() {
  2.     console.log("Pagina completamente cargada");
  3. } );

En lugar de nuestra salida de control, por supuesto, se puede colocar cualquier cantidad de declaraciones de javascript entre las llaves.

Pero ahora el gran final: por razones históricas (suena siempre bien, pero se refiere a evitar problemas con los navegadores antiguos), siempre se debe de ingresar false después de las llaves.

Código
  1. window.addEventListener("load", function() {
  2. }, false );
  3.  

Y ahora podemos insertar el ejemplo inicialmente problemático a la nueva sección y todo está bien:

Código
  1. <html>
  2. <head>
  3. 	<title>Titulo de la pagina</title>
  4. </head>
  5. <script>
  6. window.addEventListener("load", function() {
  7.     let parrafo1 = document.getElementById('area1');
  8.     console.log(parrafo1.innerHTML);
  9.     console.log(parrafo1);
  10. }, false );
  11. </script>
  12. <body>
  13.     <h1>Encabezado 1</h1>
  14.     <p id="area1">Primer parrafo con texto</p>
  15.     <p>Segundo parrafo con texto</p>
  16.     <a href="https://foro.elhacker.net">Texto del link</a>
  17. </body>
  18. </html>
  19.  

En los siguientes tutoriales siempre trabajaré con esta construcción para evitar estos problemas. Por lo tanto, utilícenlo siempre, incluso si addEventListener("load", ...) no se muestra en los ejemplos que vienen en aras de la claridad.
72  Foros Generales / Foro Libre / Re: Un adolescente es operado de urgencia tras introducirse un cable USB en la uretra en: 9 Septiembre 2022, 21:05 pm
Cita de: **Aincrad** en  9 Septiembre 2022, 21:01 pm
Pero que demonioss!!!..... como le entro el cable, si ese agujero es pequeño!


Seguro ah detener mucho tiempo libre para que se le ocurran esta clases de cosas. Normalmente cuando tenia 15 o me la pasaba jugando futbol o videojuegos. no intentando meterme un cable por el pene.



Jajajajajajajajaj
73  Foros Generales / Dudas Generales / Re: Nuevo en el foro. "direcciones MAC no asignadas" en: 9 Septiembre 2022, 20:45 pm
Woww. Que groso que en las nuevas versiones SE pueda cambiar la mac.
74  Foros Generales / Foro Libre / Re: Un adolescente es operado de urgencia tras introducirse un cable USB en la uretra en: 9 Septiembre 2022, 20:43 pm
Que desagradable.
75  Comunicaciones / Android / Re: YoWhatsapp, un MOD de Whatsapp muy interesante. en: 9 Septiembre 2022, 20:41 pm
Ver el link del grupo sin ser administrador.
76  Comunicaciones / Dispositivos Móviles (PDA's, Smartphones, Tablets) / Re: Grabar encuentro de Zoom desde Android 8 (Audio) en: 9 Septiembre 2022, 20:39 pm
Que Tal, el-brujo?

Gracias por el dato. No me engere de ESO.

Con respecto al primer link que pusiste, en la mayoria de las Apps ponen que pueden grabar el audio interno solo a partir de Android 10. Mi pregunta es: ¿conoces una APP que pueda hacerlo tambien en Android 8?

Otra alternativa seria moddear Zoom, pero no creo que haya modders aqui que me puedan dar una mano.


Gracias y saludos
77  Comunicaciones / Dispositivos Móviles (PDA's, Smartphones, Tablets) / Grabar encuentro de Zoom desde Android 8 (Audio) en: 9 Septiembre 2022, 10:04 am
Hola a todos,

¿cómo puedo grabar un encuentro de Zoom (Audio) desde Android 8 sin permisos del administrador y sin root?


Gracias y saludos
78  Programación / Desarrollo Web / Curso de javascript | 13. Usar DOM a través de getElementById() en: 22 Agosto 2022, 14:36 pm
Usar DOM a través de getElementById()
Echemos un vistazo a getElementById().

Queremos apuntar a un elemento específico en nuestra página HTML.

Código
  3. 	<title>Titulo de la pagina</title>
  4. </head>
  6.     <h1>Encabezado 1</h1>
  7.     <p>Primer parrafo con texto</p>
  8.     <p>Segundo parrafo con texto</p>
  9.     <a href="https://foro.elhacker.net">Texto del link</a>
  10. </body>
  11. </html>

¿Cómo podemos usar javascript para obtener específicamente, por ejemplo, el primer párrafo? Para hacer esto, usamos la instrucción de javascript getElementById().

Nuestro elemento deseado ahora necesita un identificador único. Podemos agregar el atributo id y un nombre único a cualquier elemento HTML directamente en el código HTML. Aquí se aplican las siguientes reglas para un nombre único:

  • No deben de haber espacios.
  • No deben de haber guiones.
  • No deben de haber caracteres especiales (por lo que es mejor usar solo letras de la a a la z y números del 0 al 9).

En nuestro ejemplo, demos a nuestro primer párrafo el atributo HTML id y el nombre area1. Aquí el fragmento del código HTML extendido:

Código
  1. <p id="area1">Primer parrafo con texto</p>

Ahora podemos agregar el nombre a nuestro comando de javascript getElementById(). Además, a través de document., decimos que se use el documento HTML actual (es decir, nuestro árbol DOM):

Código
  1. document.getElementById('area1');

Si ejecutamos nuestro programa javascript, todavía no sucede nada visible.

Ahora podemos acceder a un elemento específico.

Nuestro elemento contiene el comando HTML completo y el contenido "Primer parrafo con texto" encerrado por el comando, es decir, la completa rama seleccionada, incluidas todas las ramillas y hojas de nuestro árbol DOM.

Si solo queremos el texto y no la rama completa - en otras palabras, no queremos que se devuelvan atributos ni comandos HTML - javascript nos ofrece la extensión a través de innerHTML.

Código
  1. document.getElementById('area1').innerHTML;

Por supuesto, estas notaciones de puntos hacen que las instrucciones en javascript sean cada vez más largas y, por lo tanto, más y más confusas. Y en la mayoría de las veces, en repetidas veces se necesita acceso al mismo elemento.

Por lo tanto, se construye a partir del siguiente código

Código
  1. document.getElementById('area1').innerHTML;

la siguiente construcción usando una variable:

Código
  1. let parrafo1 = document.getElementById('area1');
  2. console.log(parrafo1.innerHTML);
  3. console.log(parrafo1);
  4. alert(parrafo1.innerHTML);

Expandi nuestro programa existente y ve si hay una salida en la consola. Hay un 50% de posibilidades de que funcione (salvo por errores tipográficos).

¡Primero probalo antes de seguir leyendo!

¡En serio!

¿Funcionó? ¿Obtuviste el resultado esperado? Entonces nuestro programa javascript se insertó después de las salidas HTML en el archivo:

Código
  1. <html>
  2. <head>
  3. 	<title>Titulo de la pagina</title>
  4. </head>
  5. <body>
  6.     <h1>Encabezado 1</h1>
  7.     <p id="area1">Primer parrafo con texto</p>
  8.     <p>Segundo parrafo con texto</p>
  9.     <a href="https://foro.elhacker.net">Texto del link</a>
  10. <script>
  11. let parrafo1 = document.getElementById('area1');
  12. document.write("<br>" + parrafo1.innerHTML);
  13. document.write("<br>" + parrafo1);
  14. alert(parrafo1.innerHTML);
  15. </script>
  16. </body>
  17. </html>

Si no funcionó, nuestras instrucciones de javascript se insertaron antes de las salidas HTML de los párrafos. Entonces no viene ningún contenido, sino mensajes de error en forma de "Uncaught TypeError: Connot read property …".

¡Probalo, porque en el próximo capítulo nos haremos independientes de la posición de nuestras declaraciones de javascript en nuestro archivo!
79  Programación / Desarrollo Web / Re: Curso de javascript | 12. DOM - el Document Object Model en: 22 Agosto 2022, 13:05 pm
Siento responder a este tema, pero no lo pude editar. (Este subtítulo lo quise agregar entre el penúltimo subtítulo y el último subtítulo).

El Document Object Model como árbol
El DOM también se puede imaginar como un árbol. En la siguiente ilustración, el árbol está acostado de lado. La raíz sería el elemento "document".
80  Programación / Desarrollo Web / Curso de javascript | 12. DOM - el Document Object Model en: 21 Julio 2022, 17:45 pm
Introducción al DOM - Document Object Model
La interfaz se crea con HTML y CSS, y el contenido de la salida HTML se puede ampliar o intercambiar con javascript. De la misma forma, se puede utilizar javascript para reaccionar ante el uso del ratón o del teclado.

El primer paso para manipular la salida HTML es observar el DOM. DOM significa "Document Object Model" o en español: "Modelo de objetos del documento". El DOM está disponible para nosotros en cualquier navegador que nos muestre una página HTML.

A través del Modelo de objetos del documento (DOM) podemos:

  • abordar a cada elemento HTML individualmente (leer o cambiar).
  • insertar elementos adicionales antes o después de ciertos elementos.
  • ¡DOM es independiente de un lenguaje de programación! Además de javascript, también se puede trabajar con el DOM utilizando Java y ECMAScript.

El navegador nos proporciona dos objetos importantes como parte del DOM:

  • document
  • window

Numerosos métodos y propiedades están disponibles para nosotros a través de estos dos objetos.



Mostrar la consola para la visualización de posibilidades de document/window
Si ahora ingresamos la instrucción console.log(window); o console.log(document); en la consola, vemos una gran cantidad de información a la que podemos acceder y luego manipular a través de esos métodos.

Por ejemplo, se puede imprimir el ancho de la ventana del navegador a través de:

Código
  1. window.innerWidth


Árbol HTML y acceso a él a través de DOM
Podemos acceder a cada elemento individual de nuestro árbol a través de los elementos secundarios. Para hacer esto, se debe de moverse a lo largo del árbol HTML. Pero esto no es realmente divertido y, por lo tanto, hay opciones mucho más cómodas, como por ejemplo:

  • document.getElementById("id")
  • document.getElementsByClassName("color1")
  • document.getElementsByTagName("h2")
Páginas: 1 2 3 4 5 6 7 [8] 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ... 47
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines