JavaScript - Variables, funciones y eventos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Funciones y Variables</title>
  <script defer src="../../examples/js/funciones_vars.js"></script>
</head>
<body>
  <h1>Funciones y Variables</h1>
  <button id="btn-saludo">Saludar</button>
  <div id="log" style="margin-top:10px;"></div>
</body>
</html>

Descargar ZIP Arquitectura del ejemplo

Archivos externos de este ejemplo

funciones_vars.js

const log=msg=>{
const el=document.getElementById('log');
const p=document.createElement('p');
p.textContent=msg;
el.appendChild(p)
}
;
document.addEventListener('DOMContentLoaded',()=>{
let contador=0;
function saludar(nombre='Mundo'){
contador++;
return `Hola, ${
nombre
}
! (#${
contador
}
)`
}
document.getElementById('btn-saludo').addEventListener('click',()=>{
log(saludar('Huber'))
}
)
}
);

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Eventos DOM</title>
  <script defer src="../../examples/js/dom_eventos.js"></script>
</head>
<body>
  <h1>Eventos DOM</h1>
  <input id="nombre" type="text" placeholder="Escribe tu nombre">
  <button id="btn">Decirme hola</button>
  <p id="msg"></p>
</body>
</html>

Descargar ZIP Arquitectura del ejemplo

Archivos externos de este ejemplo

dom_eventos.js

document.addEventListener('DOMContentLoaded',()=>{
const input=document.getElementById('nombre');
const btn=document.getElementById('btn');
const msg=document.getElementById('msg');
btn.addEventListener('click',()=>{
const nombre=input.value.trim()||'Mundo';
msg.textContent=`Hola, ${
nombre
}
!`;

}
);

}
);