P - Tarea JS - 05

tareaTarea 05 - Ubicación de scripts, archivo JavaScript externo

 

Ejercicio: Crea un programa que permita cambiar, desde JavaScript, algún estilo css tanto del body como de un contenedor div con dos párrafos p dentro. Comprueba que colocando el código JS en la cabecera no se aplican los cambios y, sin embargo, colocándolo antes del cierre /body si se efectúan los cambios. Así mismo, termina encerrando todo el código que pongas dentro de la estructura addEventListener().


Guarda la tarea en una carpeta llamada [05-Ubicar_javascript] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.

Detalles teóricos

Para asegurarnos que todo lo que vamos a manipular desde JavaScript está cargado se utilizan los siguientes métodos. Normalmente colocando el código al final del body todo funciona, pero es más elegante ejecutar el código teniendo la certeza de que todo el DOM está construido. Aquí os indico las formas más habituales de ejecutar código JavaScript después de la carga de la página HTML.


// MÉTODO 1: Espera a cargar toda la página con todos los assets
// =============================================================
// window.onload = function(){
//     document.getElementById('contenedor').style.backgroundColor = "rgba(255,255,0,.5)";
// };

// MÉTODO 2: Espera a cargar toda la página con todos los assets, semejante a Método 1
// ====================================================================================
// window.addEventListener('load', function(){
//     document.getElementById('contenedor').style.backgroundColor = "rgba(255,0,255,.5)";
// });

// MÉTODO 3: Espera a cargar solo el contenido y crear el DOM (es el más rápido)
// =============================================================================
window.addEventListener('DOMContentLoaded', function(){
    document.getElementById('contenedor').style.backgroundColor = "rgba(0,255,0,1)";
});

Para realizar el ejercicio puedes utilizar esta estructura HTML.


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JavaScript">
    <meta name="author" content="(cc) 3con14" />
    <title>Dónde poner el código JS</title>
</head>
<body>
  <div id="contenedor">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde doloremque nemo ipsa deserunt eius at blanditiis iure illum a aut aspernatur, quod, deleniti beatae inventore quaerat vitae doloribus, minus quia.</p>
    <p>Quam ipsam facilis soluta minus, sint libero, voluptas, consectetur suscipit ad, dignissimos mollitia id fugiat cupiditate voluptate! Inventore nihil veritatis voluptas! Laboriosam consectetur, possimus consequatur aliquam consequuntur natus quidem! Quidem.</p>
  </div>

<script src="/code/js/codigo.js"></script>  
</body>
</html>

Imprimir Correo electrónico

Visitas...

Hoy ........ 0

Ayer ....... 3

Mes ........ 43

Total ........ 7871

En línea...

Hay 165 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS