Javascript: Acoplamiento

Javascript: Acoplamiento

Print Friendly, PDF & Email
Javascript: Acoplamiento
Valora esta entrada
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!

Entradas relacionadas:

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.
Métodos javascript
- 439
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Como llamar nodos del DOM mediante javascript
- 590
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Como eliminar nodos del DOM mediante Javascript
- 781
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Ejercicio JS – Salva pantallas primitivo con javascript
- 104
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Ejercicio – ¿En qué día de la semana estamos?
- 155
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Ejercicio – Escribir un texto almacenado en una variable
- 178
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Como contar vocales y espacios en blanco en un texto mediante javascript
- 221
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.
Palabras reservadas que no se deben usar para declarar variables
- 263
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
- 284
Ejercicio práctico con solución sobre como crear un menú vertical con submenú vertical desplegable en javascript sin jquery. Incluye solució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

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.