Ejercicio – Acoplamiento de javascript en un documento web

Ejercicio – Acoplamiento de javascript en un documento web

Print Friendly, PDF & Email
Ejercicio – Acoplamiento de javascript en un documento web
Valora esta entrada
En este ejercicio vamos a aplicar el concepto de acoplamiento de javascript en un documento web.

Hay varias formas de hacerlo:

  • En línea con el html mediante un atributo de nombre onclick=”” o similar.
  • Dentro de <script> en cualquier lugar del head o el body del documento web
  • En una hoja externa llamada desde una url en el atributo src. <script src=””>

Para resolverlo sin mayor dificultad te sugiero leer esta entrada dónde se explica la teoría y encontrarás ejemplos.

Vamos a repasarlo mediante un ejercicio.

Enunciado

Modifica el documento html y desvincula el máximo posible el html y el javascript.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejercicio acoplamiento Javascript">
        <meta name="author" content="Francesc Ricart">
        <title>Ejemplo de acoplamiento javascript</title>
        <script>
            window.alert("te saludo");
        </script>
    
    </head>
    <body>
        
    <p>En este ejercicio queremos que los scripts lean el código en hojas separadas</p>
        <script>
            window.alert("te saludo otra vez por si no te has percatado");
        </script>

    </body>
</html>
Ver solución (Haz clic)

Solución del ejercicio

Fijaros que el javascript ya está acoplado pero queremos que se cargue desde una hoja separada.

Separaremos el javascript escribiéndolo en otro documento de nombre functions.js

Es importante que tengas en cuenta en que carpeta pones functions.js

En el ejemplo hemos optado por crear el archivo functions.js en el mismo nivel que index.html

¿Como queda el documento html?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejercicio acoplamiento Javscript">
        <meta name="author" content="Francesc Ricart">
        <title>Ejemplo de acoplamiento javascript</title>    
    </head>
    <body>
        
    <p>En este ejercicio queremos que los scripts lean el código en hojas separadas</p>
    
    <script src="functions.js"></script> 
    
    </body>
</html>

¿Como queda el documento js?

window.alert("te saludo")
window.alert("te saludo otra vez por si no te has percatado")

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio – El pokemon corredor
- 138
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Carácteres escapados en Javascript
- 364
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 191
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Ejercicio JS – Susto emergente
- 114
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Funciones Javascript: declaración, uso y utilidad en programación
- 688
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Lista de la compra con javascript perfeccionada con cookies
- 85
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 61
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Acceder y modificar una web con javascript
- 583
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Como llamar nodos del DOM mediante javascript
- 588
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Ejercicio – Sumas con letras
- 187
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.