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:

El Document object model (DOM) de Javascript
- 253
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Como contar vocales y espacios en blanco en un texto mediante javascript
- 72
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
Función que crea un objeto y lo almacena en una lista en Javascript
- 397
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Resumen de carácteres extraños en Javascript
- 187
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Ejercicio – Escribir un texto almacenado en una variable
- 61
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio – Corregir errores de sintaxis en funciones
- 81
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
3 formas de cambiar la ubicación de búsqueda en Google
- 141
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Ejercicio – Crear una lista de recordatorios
- 57
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Ejercicio – El pokemon corredor
- 31
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 86
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
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.