Crear rutas del sitio

La palabra reservada async sirve para indicarle a nuestro JavaScript que vamos a definir una función asíncrona.
Cuando se llama una función async, esta devuelve un elemento Promise. Cuando la función async devuelve un valor. Promise se resolverá con el valor devuelto por la función async

La expresión await pausa la ejecución de la función async y espera la resolución de la Promise pasada. Una vez esta es resuelta. Reanuda la ejecución de la función async y devuelve el valor resuelto.

La finalidad de las funciones async/await es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de Promises. Del mismo modo que las Promises son semejantes a las devoluciones de llamadas estructuradas, async/await se asemejan a una combinación de generadores y promesas.

Esta info la he sacado de MDN 😄

Les recomiendo instalar el plugin Relative path para buscar rápidamente sus archivos.

Para los que le sale el error en cosola, a partir de Babel 7 debemos instalar @babel/polyfill deben… para eso deben hacer lo siguiente:

1. En la terminal ejecutan npm install --save @babel/polyfill

2. Van al archivo webpack.config.js y en “entry” agregan:

entry: ['@babel/polyfill', './src/index.js'],

Despues de eso corren el comando “build” y luego el comando “start” y chequen si ya no les sale el error en consola y lo mas importante que les aparezca el header!

Una hora buscando un bug y resulta que en webpack.config.js escribí templade , en lugar de template. Odio cuando eso pasa jaja.

Me voy a hacer bolas con tanto archivo index

todo esto se parece mucho a crear componentes en React

En muchos cursos veo el problema de que avanzan mucho con el codigo sin ir mostrando resultados de a pocos, creo que asi seria mas logico para alguien nuevo como y porque suceden las cosas.

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

// ROUTES TO BE RENDER
const  routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
};

//ROUTER
const router = async () => {
    // stablishing templates to dom
    const header = null || document.getElementById('Header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;```

Si llegas a tener un error referido a regeneratorRuntime es debido al asincronismo. Estuve toda la tarde de viendo cómo solucionarlo y resultó ser bastante sencillo. Les sugiero que lean y comprendan bien lo que pasa para saber el por qué del proceso

¿Por qué el problema?

Babel utiliza multiples modulos pequeños para hacer funcionar ciertas de sus caracteristicas. Una cosa a tener en cuenta es que transpilar el codigo no lo hace 100% compatible con navegadores antiguos, a veces es necesario acompañarlo de polyfills (fragmentos de código que emulan una funcion del lenguaje en caso de no tenerla disponible)

Una de las cosas que no soporta Babel de por sí son las funciones asíncronas, por lo que tenemos que darles soporte a partir de una librería. El profe en la clase de preparacion de webpack instala una, pero haciendo otro proyecto no me funcionó.

Para darle soporte general a metodos del lenguaje anteriormente Babel utilizaba un modulo propio llamado @babel/polyfill, que era una combinacion de 2 modulos independientes llamados core-js y regenerator-runtime. Este fue deprecado en la version 7. Por lo que ahora nos conviene directamente importar ambos módulos

Instalación de las librerías

Primero instalan las siguientes librerías en npm o yarn:

npm install core-js
npm install regenerator-runtime

luego en el archivo principal de su aplicacion (index.js) lo importan

// CommonJS
require("regenerator-runtime/runtime");
 
// ECMAScript 2015
import "regenerator-runtime/runtime.js";

Péro ¿Por qué estos archivos?

Core-JS es una librería super util que reune un monton de polyfills que podés importar de forma general o específica. COmo buena practica, para evitar que tu programa sea pesado, se recomienda importar solamente los polyfills de los features que vayas a utilizar (ej, async, promesas, clases) Pero comó descubrí todo esto ayer lo reduzco a importarlo de forma general como hice arriba jeje 😛

Regenerator-Runtime es una librería que principalmente le da soporte a las funciones asincronas en entornos donde no son soportadas. Me imagino que tendrá otras funciones, pero principalmente se la usa por ese motivo. Realmente para que no nos de error solo es necesario ésta librería, pero acordemonos de que nuestra intención es darle soporte a todos los navegadores posibles

Sugiero entender bien el uso de ambas librerías porque son muy importantes y les será de mucha ayuda cuando sean avanzados

Enlaces para entrar en contexto (en ingles)

regenerator-runtime - npm

core-js - npm

Babel polyfill is dead. Long live core-js!

What is regenerator-runtime npm package used for?

Esta es toda la explicación, es problable que no sea 100% rigurosa, por lo que si tienen algo que aclarar o corregir, su feedback es bienvenido ^-^

si hay que reiniciar el server para que funcione correcto!

Para los que no entienden porque el profe usa Await en la funcion Header().

1. Para esperar el Render del DOM.
2. El profe usa el evento “load” , este evento se utiliza para saber si la pagina ha cargado. Sin embargo, cuando hablamos de render en el DOM hablamos de estados.
3. Los estados son pasos que va cumpliendo el DOM hasta llegar al render final de la web, estos son:

• Loading: cargando
• Interactive: el documento ha cargado y ha sido parseado. Pero sub recursos como estilos, imagenes, scripts, frames aun no.
• DomContentLoaded, la pagina cargo correctamente. Sin necesidad de esperar que cargen los estilos, scripts y imagenes.
  (Y esto para que? Bueno aqui ya podemos acceder al DOM porque sus nodos esta fully cargados y no dependen de los estilos, es decir, el tree HTML esta listo Construido)
• Complete: La página cargó con todos los recursos, imagenes, estilos y scripts y esta a punto de lanzar el evento “Load”
  -Load: La página entera cargada y terminada.

Ahora, tenemos que esperar todos estos pasos para ejecutar esta función? No necesariamente, porque aunque sabemos que la construcción de todo esto se hace demaciado rapido. Cuando queremos acceder, nuestras funciones también acceden demasiado rapido, y podemos estar haciendo un request de algo al DOM que aun no existe.

Con await, le decimos a nuestra función. Ejecutante si y sólo si. El evento “load” ya ha sido lanzado, has un await de esto.

Aqui les muestro el LOG de los Eventos. Un imagen vale mas que 1000 palabras.

Espero les sirva de ayuda!

Ahora entiendo porque pusimos en el fichero Home.js lo siguiente:

<a href="#/1/">

Cuando pulsemos en el link. Nos llevará a la ruta personalizada de cada Character.js
En este caso cada id corresponderá a cada uno de los personajes que metamos.

😄 No lo entendía hasta ahora…

A los que tengan un error como este ReferenceError: regeneratorRuntime is not defined en consola, hagan lo siguiente:

instalar las siguientes dependencias :

npm install --save core-js
npm install --save regenerator-runtime  

Luego en el archivo index,js (el que se encuentra en el root de src), importar las siguientes librerias:

import "core-js/stable"; //importar esta lib
import "regenerator-runtime/runtime"; //importar esta otra lib
import router from './routes/index';

window.addEventListener('load', router);

Por esto me gusta mucho TypeScript por encima de Babel, nos ayuda a resolver posibles problemas antes de correr nuestra aplicacion.
Al principio se puede sentir muy pesado o inneceario para aplicaciones pequeñas, pero vale muchisimo la pena con el tiempo, con practica se te vuelve normal y desarrollas incluso mas rapido detectando errores mas temprano.

Avanzando super animado con el curso.

Me pareció más interesante utilizar ‘DOMContentLoaded’ en el addEventListener, la diferencia es que ‘load’ espera a que los estilos, imágenes, etc. de nuestro documento estén completamente cargados, en cambio, ‘DOMContentLoaded’ los omite así que sería más eficiente.

Espero haber entendido bien la documentación. 😅

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

A different event, load, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

Resumen de la clase:

Crear las rutas del sitio

Nos movemos a la carpeta routes y creamos el archivo index.js

import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;

En la versión actual de Webpack, para utilizar babel hace falta crear un archivo .babelrc y crear un objeto con una especificación de como manejará nuestro código. Pero primero hay que ir a npm y:
npm i @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime babel-loader -D

    "presets": [
        "@babel/preset-env" //Estó es lo que nos permite trabajar con JavaScript moderno y babel lo transpile a versiones entendibles para los navegadores.
    ],
    "plugins": [
        "@babel/plugin-transform-runtime" // ESTE ES MUY IMPORTANTE PARA LA CLASE. Este plugin nos permite trabajar con funciones asincronas(promesas, async/await, cb) Así que si vienes del curso de Webpack, recuerda utilizar estas configuraciones. Y si no lo has hecho. agrega estas configuraciones y espero te ayude
    ]
}```

En mi caso tenia un typo en “./public…” ufff ahhhaah

Por que me construye la aplicacion pero no me aparece el header?

Que genial! Seguramente si el reto hubiera sido detectar este bug hubiera sido un dolor de cabeza jaja

Si no van con afan, les recomiendo al terminar la seccion 4, borrar la carpeta y empezar otra vez el curso, se entiende mucho mas el repetir ya que js al inicio es complicado

Esto de implementar templates de HTML en Js dentro del DOM es muy interesante.

Podemos crear alias con webpack, para que sea un poco mas fácil importar las paginas y templates. Tenemos que ir al archivo de configuración de webpack y en resolve agregar una nueva propiedad llamada alias

    resolve: {
        extensions: ['.js'],
        alias: {
          '@styles': path.resolve(__dirname,'src/styles'),
          '@pages': path.resolve(__dirname,'src/pages'),
          '@routes': path.resolve(__dirname,'src/routes'),
          '@utils': path.resolve(__dirname,'src/utils'),
          '@template': path.resolve(__dirname, 'src/templates')

        }
     },****

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

//rutas
const routes = {
    '/': Home, // establecemos la ruta:hace render de Home
    '/:id': Character, // ruta con valor dinamico id: hace render en los personajes
    '/contact': 'Contact', // establecemos la ruta: y este hace render de Contact
}

//manejador(obtener valores y com utilizarlos)
const router = async() => {
    const header = null || document.getElementById('header'); // Elemento header hacia donde voy hacer el render
    const content = null || document.getElementById('content'); // Elemento content hacia donde voy hacer el render

    header.innerHTML = await Header();
};
export default router;```

Para los que NO les carga el codigo del template del header al final de este video, hagan los siguiente:

1. Instalen el plugin por linea de comando,escribanlo asi: npm install @babel/plugin-transform-runtime -D

2. Luego agreguen un archivo en la raiz del proyecto y llamenlo: .babelrc —> el punto al inicio es un indicador de que es un archivo oculto;

3. En este archivo agreguen este plugin de runtime, la forma como lo tienen que hacer lo pueden ver en el minuto 4:10 de la clase 6 llamado “Babel Loader para Javascript” , del curso de WEBPACK que tambien esta en esta escuela. En ese video, Oscar Barajas explica bien como se tiene que escribir tal plugin.

4. Por ultimo vuelva a ejecutar el codigo: npm run start

A mi me funcionó luego de tener en cuenta todo eso !!

Exitos !!

A mi no me salio el error de ‘innerHTML’

Yo he tenido problemas con webpack-cli porque desde la versión 4.0 ha habido cambios en su estructura de carpetas por lo que ya no es compatible con webpack-dev-server, ahora les recomiendo usar el siguiente script

"start": "webpack serve"

y agregar las siguientes lineas al webpack.config.js

devServer: {
    port: 3000,
    open: true,
  },

import router from './routes'

window.addEventListener('load', router);```

Parezco un niño, pero me emociono mucho cuando funciono 💚

Excelente que haya aparecido ese error, es lo que vivimos día a día, lo interesante es que mientras más programamos, más sencillo es resolver estos errores.

Dejo mi repositorio en el cual podrán encontrar una rama por cada clase en adelante.

https://github.com/ivallejo/Cientifico

Algo muy interesante que veo, es… que si el maestro se equivoca en algo js le sigue jalando. Como lo fue con --mode.

En la 4 clase al maestro le jaló el dist y en main le arrojó como si nada todo el código mientras que a mí no, ahora con esta solución que nos dio ahora si da al 100.

A mi no me estaba funcionando dado que en el HTML tenia los id de los objetos como ‘header’ en minúscula, y al momento de hacer el document.getElementById(‘Header’) colocaba ‘Header’ con mayúscula, por este sencillo typo no me funcionaba la aplicación, para que lo tengan en cuenta chicos.

tenia el mismo problema lo solucione y tampoco me dio pase mas de 1 hora tratando de solucionarlo hasta que lei un comentario donde decia reinicia lo hice y me funciono XD

import Home from '../Page/Home'
import Character from '../Page/Characters'
import Error404 from '../Page/Error404'
import Header from '../templates/Header'

const routes={
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
}

const router = async()=>{
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML=await Home();
};

export default router;

Un gran “tip”, para los que estén haciendo éste curso. Vayan ahora mismo (abrir otra ventana), y vean el curso de webpack (nuevo). Pueden ir viendo ambos cursos (complementan), para que les ayude a resolver dudas.

Si utilizan alias, no tienen que escribir esas rutas no tan friendlys para leer:
.
webpack.config.js

resolve: {
        extensions: [".js"],
        alias: {
            '@templates': path.resolve(__dirname, 'src/templates/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@utils': path.resolve(__dirname, 'src/utils/')
        }

    },

routes/index.js

import Header from "@templates/Header";
import Home from "@pages/Home";
import Character from "@pages/Character"; 
import Error404 from "@pages/Error404";
import getHash from "@utils/getHash";
import resolveRoutes from "@utils/resolveRoutes";

Routes/ index.js

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
};

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;

Para los que este usando webpack 5 los comandos para el package.json serían los siguientes.

  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  },

Si tienen errores de runtime, agregar:

npm install core-js regenerator-runtime

Luego importar al ‘index.js’:

    import "core-js/stable";
    import "regenerator-runtime/runtime";

Por si alguien tiene el siguiente error en consola:

Uncaught (in promise) TypeError: Object(...) is not a function
    at router

Solucion: deben de quitar los parentesis aqui:

header.innerHTML = await Header

Un error de comillas en el header …respiro profundo. vamos bien ahora

Me sale este error, alguien por ahi que me ayude? 😦 Gracias!

Una vez que ejecutamos en comando npm run start.
¿Que comando debo utilizar para poder seguir usando la terminal?

Despues de varios errores ya funciona jejeje

Profe Oscar y compañeros de Platzi, despejenme de una duda, de las muchas que tengo sobre JS. Se puede hacer una app que suba archivos PDF, los descargue, administre usuarios y maneje perfiles solo con Vanilla…?? O se debe usar alguna herramienta de JS como REACT JS o Angular…?

¿Si quiero usar Bootstrap donde tendría que poner los scripts?

tengo una duda en el archivo index el profe hace un import router from ‘…/routes’; no deberia agregar /index ejemplo :
import router from ‘…/routes/index.js’;

asi cuando te sale más de un error jajajajajajaja

Link del resumen Notion , por ahora es un draft, ya lo ire puliendo y sintentizando mas mientras avanzo en el curso pero igual les puede ser de ayuda.

Resumen de la clase:
Preparamos las rutas de la app en router/index.html , las exportmaos y las usamos en entry - ‘src/index.html’ (archivo de entrada) de nuestra app, añadimos un sensor (addEventListener) detectando el ‘load’ y renderizando nuestros templates llamando la funcion route que exportamos desde router/index.html

Tuve varios errores pero analizando cada linea de código pude verificar varios typos.

ayuaaaaa me vota esto

tml Webpack Plugin: 
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejer  cicio platzi\cientifico\public\index.html' in 'C:\Users\Juan Pablo\Desktop\eje  rcicio platzi\cientifico':
  Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico\  public\index.html' in 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico  '
  
  - child-compiler.js:122 
    [cientifico]/[html-webpack-plugin]/lib/child-compiler.js:122:18
  
  - Compiler.js:343 
    [cientifico]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [cientifico]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [cientifico]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [cientifico]/[webpack]/lib/Compilation.js:1423:35

Ese error no lo habría encontrado nunca

como haces para que el indexado te salga de colores??

Genial

import router from './routes'

window.onload = router```

Wow!!! Increíble. Dudo haber podido encontrar un problema así de específico en una herramienta que he usado tan poco 😃.

Recordatorio: Siempre mirar la documentación!

Oscar es un muy buen profesor, es de los pocos cursos que he hecho que no me estrello con errores graves.

Vaya, sin ayuda de Oscar creo que hubiera sido imposible encontrar ese error, Que gran curso, A pesar de no haber realizado algunos curso ya que sigo con la carrera de Desarrollo FrontEnd, se entiende perfectamente lo que estamos haciendo

A mi me paso que no reconocio el archivos Index.js importando de asi:

import router from './routes';

Fui más especifico:

import router from './routes/Index';

Por lo menos no fue necesaria la extension, casi se me rompe la cabeza buscando cual era el problema jeje.

…A mi, despues de revisar el codigo y darle un monton de vueltas me funciono agregandole en el html el script llamando a main.js y en la consola ejecutando la opcion npx webpack

Hola! una pregunta que no me quedo claro, por que coloca la funcion router como asincrona ? muchas gracias de antemano

Rutas

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
}

const router = async() => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
}

export default router;

Tengan cuidado cuando son confiados con el autocompletafo. Yo lo utilice para el getElementById y me colocó getElementsById jaja

Aguas con los typos

Algo que no aparece en los repos de esta clase es la línea que llama el JS en el archivo HTML. 😉
Recuerden que eso puede hacerse de muchas formas, pero
<script src="../src/index.js"></script>
Puede ser una de ellas

¡MIlagro! No tuve ni un solo error esta vez. 😃

¿Tengo todo bien, actualizado y al pie de la letra, sirvo para esto o por que no me carga?

Esa fue la pregunta que me dije cuando verifiqué el porqué del error de que no me cargara el Header.
Después de unos 30 minutos viendo código, me puse a pensar: "Mejor sigo los pasos como me dijo Diego de Granda del curso de ** Debugging con DevTools** "
¿Qué fue lo que pasó? Encontré algo importante: Un console.log que me decía “Hello”

Hello

Imposible! Pensé, por que ya había cambiado el código de index, pero al darle seguimiento me di cuenta que el navegador, no cargaba los cambios actualizados de index. Significaba que una fuerza sobrenatural (o simplemente, la caché xD) no dejaba acutualizar los cambios.

Mi solución Después de tantos cabezasos fue refresh de la caché (si no funciona intenta reiniciar el equipo, también es una forma de limpiarla a veces jaja)

Esas pequeñas cosas son por las cuales creo esos cursos pequeños son de gran ayuda Curso de Debugging con Chrome DevTools

me pase casi un día y medio tratando de encontrar un error que no se reflejaba en consola del navegador ni en la terminal, ya me había frustrado demasiado y observando mi código me percate de un typo el cual tenia puesto

 header.innerHtml = await Header();

y no funcionaba simplemente por que Html debe ir en mayúsculas de la siguiente manera

 header.innerHTML = await Header();

Quizás no iba a encontrar este error, solo por que lo comencé a comparar con el código de la clase me di cuenta

Dejo los imports por aqui por si ha alguien les sirve

import Header from "../templates/Header"
import Home from "../pages/Home"
import Charater from "../pages/Character"
import Error404 from "../pages/Error404"

Me aparece este error:
C:\Users\patricio\cientifico>npm run start

[email protected] start C:\Users\patricio\cientifico
webpack-dev-server --open --mode development

internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs’
Require stack:

• C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
  at Function.Module._load (internal/modules/cjs/loader.js:725:27)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at require (internal/modules/cjs/helpers.js:88:18)
  at Object.<anonymous> (C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
  at Module._compile (internal/modules/cjs/loader.js:1063:30)
  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: ‘MODULE_NOT_FOUND’,
  requireStack: [
  ‘C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js’
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] start: webpack-dev-server --open --mode development
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\patricio\AppData\Roaming\npm-cache_logs\2021-02-08T20_35_18_960Z-debug.log

Creo si no estoy mal, nativamente (sin un precompilador como webpack) un import sin la extension .js no se puede realizar, digamos JS vanilla, vanilla. xdd

¿Es normal que tengamos más de un archivo index.js?

Tengo este error y no he podido solucionarlo. Alguien podria ayudarme? Gracias.

f

porque en el router también se le llama index.js ¿se puede llamar router.js por ejemplo? o es necesario el index

Cuando ustedes le asignan un id a un elemento de HTML, también lo pueden llamar así:

<div id="miSeccion">

//En el archivo de JavaScript lo pueden obtener así

window.miSeccion

No es buena práctica, es sólo otra forma de obtener los elementos 😄