22 Sep Ejercicio – Acoplamiento de javascript en un documento web
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>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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Puntuación media 5 / 5. Votos: 1
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
La consola del navegador es una herramienta imprescindible para cualquier aprendiz de Javascript. ¿Podemos darle un poco más de color y utilidad?
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Veamos como podemos deshabitar el envío de un formulario web mediante javascript haciendo uso del evento submit() y preventDefault()
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
No hay comentarios