Javascript: Acoplamiento

Javascript: Acoplamiento

5
(2)

En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar.

Este lenguaje de script nos permite modificar la estructura, el contenido, los estilos de las etiquetas html de un documento web y añadir dinamismo a una página.

Existen varios métodos para acoplar el javascript en un proyecto web:

  1. En el <head> dentro de las etiquetas <script></script>
  2. En el <body> dentro de las etiquetas <script></script>
  3. En la consola del navegador mediante la instrucción console.log(«mensaje») o escribiendo el código javascript directamente dentro de la consola.
  4. En una hoja .js externa llamada mediante la instrucción <script src=»aquí la url de la hoja .js»></script>
  5. Como atributo de una etiqueta html. Por ejemplo un <button>
Acoplamiento de javascript en un documento xhtml
javascript por pantalla

Atención: Si lo estás mirando desde un teléfono, algunos navegadores como Opera mini no tienen soporte para Javascript o incluso en Chrome podemos encontrar la opción deshabilitada la opción por defecto. Para habilitarlo te recomiendo este enlace explicativo.

Para ver el texto por la consola del navegador, tras hacer click en el botón tienes que ir a «más herramientas > herramientas para desarrolladores > consola«.

No escribiremos HTML ni Javacript entre:

  • La etiqueta de cierre </head> y la apertura del <body>
  • La etiqueta de cierre </body> y </html>
  • Dentro de <script src=»llamada a una hoja .js»> aquí no escribiríamos </script> cuando la etiqueta <script> hace una llamada a una hoja externa en el atributo
Actualización 25 de enero

Escribir todo el JS en una misma hoja externa

Ayer nos quedó este ejercicio un poco incompleto… vamos a ver si hoy le ponemos el lazo al concepto de acoplamiento en Javascript.

El siguiente paso sería dejar la hoja un poco bonita. No tiene ningún sentido declarar varios scripts en una misma hoja. Y además a los programadores les gusta ser muy ordenados. El html en el documento web, el css en una hoja separada y para el JS también un lugar a parte.

Para hacerlo bien reuniremos todo el código en la hoja que hemos nombrado funciones.js (dentro de la carpeta js). A excepción del botón, claro. Tener en cuenta que en este caso se trata de un atributo de una etiqueta html y que no lo podemos quitar así como así. En realidad si se puede, pero asignando una propiedad al botón durante la fase de carga del documento y interactuando con el DOM. Es pronto para esto…. llegaré de aquí a bastantes días.

El ejercicio a realizar sería pues «acoplar» todo el javascript posible fuera del documento html y dejar la hoja lo más limpia posible.

Si lo hacéis… el resultado será algo similar a la captura que se muestra. Os dejo que os esforcéis un poco y ya me diréis 😉

resultado tras aglutinar todo el JS en una hoja externa
Resultado tras aglutinar todo el JS en una hoja externa

¡Y hasta aquí el resumen de hoy y de una parte día siguiente 😉

¡Espero que os sea útil y vuestro feedback en los comentarios!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comentarios
  • Irene
    Publicado a las 14:01h, 04 julio Responder

    en este mes de julio me lo vuelvo a mirar 🙂 a ver si tengo mas suerte y consigo los estudios!

    todo bien o que? espero que si ^^

    un abraaaaaaaaaaaazo y gracias,por que lejos de desanimarte como hacen la mayoría de profesores, tu motivas

  • Francesc Ricart
    Publicado a las 08:58h, 05 julio Responder

    hola irene!
    una alegría verte por aquí!! 🙂
    nunca es tarde!! ¡¡muchísimo ánimo y si tienes dudas para eso estamos!!

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.