<style>

.doc{--bg:#EDEFF0;--surface:#F8F9F9;--ink:#131A1F;--muted:#55636B;--rule:#D3D8DA;

--accent:#A34A2A;--accent-soft:rgba(163,74,42,.11);--link:#953F22;

--sans:"Chivo","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;

--serif:"Source Serif 4",Georgia,"Times New Roman",serif;

--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

max-width:760px;margin:0 auto;padding:.5rem 0 2rem;color:var(--ink);

font-family:var(--serif);font-size:1.15rem;line-height:1.7}

.doc *{box-sizing:border-box}

.doc a{color:var(--link);text-underline-offset:.14em;text-decoration-thickness:.06em}

.doc a:hover{color:var(--accent)}

.doc > section{margin-top:3rem}

.doc > section + section{border-top:1px solid var(--rule);padding-top:3rem}

.doc .eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;

color:var(--accent);margin:0 0 .9rem}

.doc h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,4.2vw,2.15rem);

line-height:1.15;letter-spacing:-.015em;margin:0 0 1.1rem}

.doc h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;line-height:1.25;margin:2rem 0 .6rem}

.doc p{margin:0 0 1.2rem}

.doc .lead{font-size:1.3rem;line-height:1.6}

.doc section p:last-child{margin-bottom:0}

.doc ul.plain{margin:0 0 1.2rem;padding-left:0;list-style:none}

.doc ul.plain li{position:relative;padding-left:1.4rem;margin-bottom:.7rem}

.doc ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;

background:var(--accent);border-radius:1px}

.doc ul.plain li strong{font-family:var(--sans);font-weight:700;font-size:.98em}

.doc .tablewrap{overflow-x:auto;margin:1.75rem 0 0;border:1px solid var(--rule)}

.doc table.xfer{border-collapse:collapse;width:100%;min-width:600px;font-family:var(--serif);font-size:1rem}

.doc .xfer th{font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;text-transform:uppercase;

text-align:left;color:var(--muted);padding:.95rem 1rem;border-bottom:1px solid var(--rule);

background:var(--surface);font-weight:500}

.doc .xfer td{padding:.9rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}

.doc .xfer tr:last-child td{border-bottom:0}

.doc .xfer td:nth-child(2),.doc .xfer td:last-child{color:var(--muted)}

.doc .pull{margin:2.75rem 0;padding-top:1.5rem;border-top:2px solid var(--accent)}

.doc .pull blockquote{margin:0;font-family:var(--serif);font-style:italic;

font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.45}

.doc .pull figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;

text-transform:uppercase;color:var(--muted)}

.doc .tracks{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}

.doc .track{border:1px solid var(--rule);border-radius:6px;padding:1.5rem 1.6rem;background:var(--surface)}

.doc .track .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;

color:var(--accent);margin:0 0 .8rem}

.doc .track h3{margin:0 0 .3rem;font-size:1.15rem}

.doc .track p{margin:0 0 .7rem;font-size:1.03rem}

.doc .track p:last-child{margin-bottom:0}

.doc .linkgroup{margin-top:2rem}

.doc .linkgroup .cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;

color:var(--muted);margin:0 0 .5rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule)}

.doc dl.links{margin:0}

.doc dl.links > div{padding:1rem 0;border-bottom:1px solid var(--rule)}

.doc dl.links dt{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.3rem}

.doc dl.links dd{margin:0;color:var(--muted);font-size:1.02rem}

.doc dl.links dd.u{font-family:var(--mono);font-size:.8rem;margin-top:.25rem;word-break:break-word}

.doc .cta{margin-top:4rem;border-top:2px solid var(--accent);padding-top:2rem}

.doc .cta .go{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;

color:var(--muted);margin:0 0 .7rem}

.doc .cta .url{font-family:var(--sans);font-weight:900;font-size:clamp(1.9rem,6vw,2.7rem);margin:0;letter-spacing:-.02em}

.doc .cta .url a{color:var(--ink);text-decoration:none}

.doc .cta .url a:hover{color:var(--accent)}

.doc .cta .fine{margin:1.2rem 0 0;font-size:.98rem;color:var(--muted);max-width:60ch}

.doc figure.ill-logo{margin:2.25rem 0 0}

.doc figure.ill-logo .logo-box{display:flex;align-items:center;justify-content:center;

background:var(--surface);border:1px solid var(--rule);border-radius:6px;

padding:2.5rem 1.5rem;min-height:160px}

.doc figure.ill-logo img{display:block;max-width:240px;max-height:160px;width:auto;height:auto;

object-fit:contain}

.doc figure.ill-logo figcaption{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;

letter-spacing:.04em;color:var(--muted)}

.doc .yt-wrap{margin:2.25rem 0;position:relative;padding-top:56.25%;

background:var(--surface);border:1px solid var(--rule);border-radius:6px;overflow:hidden}

.doc .yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.doc .yt-caption{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;

letter-spacing:.04em;color:var(--muted)}

</style>

<article class="doc">

<section>

<p>JavaScript es el lenguaje de la web en el navegador, y también un lenguaje de servidor muy extendido (Node.js). Es un buen segundo lenguaje, y un paso obligado para todo lo interactivo en una página.</p><p>Esta guía asume conocimientos básicos de HTML/CSS; si no, empieza por <a href="https://newtiv.com/article.html?slug=html-css-les-fondamentaux">HTML y CSS: los fundamentos</a>.</p>

</section>

<section>

<p class="eyebrow">01 — Dónde se ejecuta</p>

<h2>Navegador y servidor</h2>

<p>En el navegador, JavaScript reacciona a los clics, modifica la página, llama a APIs. Con Node.js, se ejecuta del lado del servidor para herramientas, APIs, scripts. El lenguaje es el mismo, el entorno cambia.</p>

</section>

<section>

<p class="eyebrow">02 — La base</p>

<h2>Lo que hay que saber antes que nada</h2>

<ul class="plain">

<li>Variables (let, const), tipos, operadores.</li>

<li>Condicionales, bucles, funciones (incluidas las funciones flecha).</li>

<li>Arrays y métodos (map, filter, reduce), objetos.</li>

<li>Programación asíncrona: promesas y async/await.</li>

</ul>

<figure class="ill-logo">

<div class="logo-box"><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=original" loading="lazy" decoding="async" alt="Logo JavaScript"></div>

<figcaption>JavaScript — <em>Chris Williams, dominio público</em></figcaption>

</figure>

<figure class="ill">

<img src="https://images.pexels.com/photos/34803998/pexels-photo-34803998.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" width="1200" height="800" loading="lazy" decoding="async" alt="Focused view of a computer screen displaying programming code with visible reflections.">

<figcaption>JavaScript para principiantes — <em>Foto de Daniil Komov, licencia Pexels</em></figcaption>

</figure>

</section>

<section>

<p class="eyebrow">03 — El DOM</p>

<h2>Actuar sobre la página</h2>

<p>Seleccionar elementos, escuchar eventos, modificar el contenido y las clases. Esto es lo que da vida a una página. Cuidado con las trampas: olvidar quitar un listener, manipular el DOM antes de que esté listo.</p>

</section>

<section>

<p class="eyebrow">04 — Un primer proyecto</p>

<h2>Pequeño, terminado, interactivo</h2>

<p>Una lista de tareas, un cuestionario, un conversor, un mini-juego, o una página que consuma una API pública con fetch. Publícala. Es tu prueba.</p>

</section>

<section>

<p class="eyebrow">05 — La continuación</p>

<h2>Elegir un framework más tarde</h2>

<p>Una vez adquirido el lenguaje, un framework (React, Vue, Svelte) se vuelve útil. Tomarlo demasiado pronto oculta fundamentos que luego harán falta.</p>

</section>

<section>

<p class="eyebrow">06 — Preguntas frecuentes</p>

<figure class="yt-wrap-outer">

<div class="yt-wrap"><iframe src="https://www.youtube-nocookie.com/embed/v3Ho7QVaTXM" title="Apprendre JavaScript en juste 5 MINUTES"></iframe></div>

<p class="yt-caption">Aprender JavaScript en solo 5 minutos (en francés) — Melvynx</p>

</figure>

<h2>Preguntas frecuentes</h2>

<h3>¿JavaScript o Python primero?</h3>

<p>Para la web interactiva, JavaScript. Para datos, automatización e IA, Python. Ambos se complementan.</p>

<h3>¿Hay que aprender React de inmediato?</h3>

<p>No. Primero la base del lenguaje y el DOM; React después, cuando sus ventajas se vuelvan evidentes.</p>

<h3>¿Cuándo toca TypeScript?</h3>

<p>Después de sentirte cómodo con JavaScript. TypeScript añade tipos útiles a medida que los proyectos crecen.</p>

</section>

<section>

<p class="eyebrow">07 — Recursos y enlaces</p>

<h2>A dónde ir, concretamente</h2>

<div class="linkgroup">

<p class="cat">Aprender</p>

<dl class="links">

<div>

<dt>MDN — Guía de JavaScript</dt>

<dd>La referencia, en español.</dd>

<dd class="u"><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide" target="_blank" rel="noopener">developer.mozilla.org/es/docs/Web/JavaScript/Guide</a></dd>

</div>

<div>

<dt>javascript.info</dt>

<dd>Curso moderno y progresivo.</dd>

<dd class="u"><a href="https://es.javascript.info" target="_blank" rel="noopener">es.javascript.info</a></dd>

</div>

</dl>

</div>

</section>

<footer class="cta">

<p class="go">¿Estás empezando con JavaScript?</p>

<p class="url"><a href="https://www.newtiv.com" target="_blank" rel="noopener">newtiv.com</a></p>

<p class="fine">Domina la base y el DOM antes que cualquier framework, y luego publica un pequeño proyecto interactivo: es el mejor punto de partida.</p>

</footer>

</article>