Entender cómo funcionan los sistemas de archivos y las rutas es fundamental para cualquier persona que quiera programar. Separar correctamente el código JavaScript del HTML no solo hace tu proyecto más limpio, sino que refleja una práctica profesional que facilita el mantenimiento y la escalabilidad de cualquier aplicación web.
¿Cómo funciona el sistema de archivos en tu computadora?
Todas las computadoras tienen un sistema de archivos, incluyendo los teléfonos. En Windows, el disco duro principal se identifica con la letra C: [0:10]. La razón histórica es curiosa: cuando existían los disquetes, se les asignaban las letras A y B, así que el disco duro quedó como C. Esa letra representa la raíz del disco, es decir, el punto donde arranca el árbol de carpetas.
Las carpetas funcionan como un árbol jerárquico, similar a la estructura de HTML. Por ejemplo:
C:\Users\Freddy\Documentos\Curso\codigo.htmlC:\Users\Freddy\Documentos\Curso\imagen.jpg
Un detalle importante: en Windows, las mayúsculas y minúsculas no importan al referirse a carpetas o archivos. Sin embargo, en el mundo de la programación esto importa muchísimo [1:17]. Como buena práctica, es mejor mantener todos los nombres de carpetas y archivos 100 % en minúscula.
¿Qué diferencia hay entre Linux, Windows e internet?
En Linux, la raíz no es una letra como C:, sino simplemente un slash (/) [1:30]. Dentro de esa raíz existe una carpeta llamada home, donde se almacenan los archivos de cada usuario. En el mundo de internet, la raíz es el dominio. Por ejemplo, platzi.com es la raíz, y a partir de ahí se organizan las rutas como /cursos/fundamentos [2:06]. Aunque el desarrollo backend permite personalizar estas rutas, conceptualmente funcionan igual que carpetas.
¿Qué son las rutas absolutas y las rutas relativas?
Una ruta absoluta es la dirección completa desde la raíz hasta el archivo [2:30]. Por ejemplo: C:\Users\Freddy\Documentos\Curso\codigo.html. Especifica cada carpeta del camino sin ambigüedad.
Una ruta relativa, en cambio, parte desde la ubicación actual del archivo que la invoca [2:50]. Si tienes una carpeta llamada Programar con esta estructura:
juego.htmljs/codigo.jsimagenes/photos.jpg
Desde juego.html puedes llegar a codigo.js escribiendo simplemente js/codigo.js, sin slash inicial ni ruta completa. Lo mismo aplica para las imágenes: imagenes/photos.jpg. No necesitas referirte a toda la ruta porque los archivos están al mismo nivel dentro de la misma carpeta.
¿Cómo separar JavaScript de HTML de forma profesional?
El paso práctico consiste en extraer todo el código JavaScript que vive dentro de la etiqueta <script> en el HTML y moverlo a un archivo independiente [3:40].
- Crear un nuevo archivo y guardarlo como
codigo.js dentro de una carpeta llamada js.
- Cortar todo el contenido JavaScript (solo lo que está dentro de
<script>, no el HTML) con Ctrl + X.
- Pegarlo en
codigo.js y corregir la indentación con tabuladores donde sea necesario [5:00].
- Guardar siempre con
Ctrl + S o Cmd + S en Mac.
De vuelta en el archivo HTML, la etiqueta <script> se modifica para incluir el atributo src [5:40], que indica la ruta relativa al archivo JavaScript:
html
<script src="js/codigo.js"></script>
El atributo src funciona de manera similar al parámetro charset en la etiqueta <meta>: le dice al navegador dónde buscar el recurso. Como se trata de una ruta relativa, no hace falta escribir C:\Users\..., solo la posición respecto al archivo HTML.
¿Por qué es importante mostrar las extensiones de archivo?
Si no configuraste tu sistema operativo para mostrar las extensiones de los archivos, los nombres pueden quedar incorrectos y el código fallará [4:30]. Los nombres y extensiones deben ser exactos: codigo.js, no codigo.js.txt.
Al recargar el navegador, el programa corre exactamente igual que antes, pero ahora con una estructura profesional de carpetas [6:20]. El HTML queda limpio, mostrando solo el título y la referencia al script, mientras que toda la lógica vive en su propio archivo.
¿Ya lograste separar tu código en archivos independientes? Comparte tu experiencia o dudas en los comentarios.
