<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 é a linguagem da web no navegador, e também uma linguagem de servidor muito difundida (Node.js). É uma boa segunda linguagem, e uma etapa obrigatória para tudo o que é interativo em uma página.</p><p>Este guia pressupõe noções básicas de HTML/CSS; caso contrário, comece por <a href="https://newtiv.com/article.html?slug=html-css-les-fondamentaux">HTML e CSS: os fundamentos</a>.</p>

</section>

<section>

<p class="eyebrow">01 — Onde é executado</p>

<h2>Navegador e servidor</h2>

<p>No navegador, JavaScript reage a cliques, modifica a página, chama APIs. Com Node.js, é executado no lado do servidor para ferramentas, APIs, scripts. A linguagem é a mesma, o ambiente muda.</p>

</section>

<section>

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

<h2>O que é preciso saber antes de tudo</h2>

<ul class="plain">

<li>Variáveis (let, const), tipos, operadores.</li>

<li>Condicionais, laços, funções (incluindo funções de seta).</li>

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

<li>Programação assíncrona: promessas e 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, domínio 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 iniciantes — <em>Foto de Daniil Komov, licença Pexels</em></figcaption>

</figure>

</section>

<section>

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

<h2>Agir sobre a página</h2>

<p>Selecionar elementos, escutar eventos, modificar o conteúdo e as classes. É isso que dá vida a uma página. Cuidado com as armadilhas: esquecer de remover um listener, manipular o DOM antes que esteja pronto.</p>

</section>

<section>

<p class="eyebrow">04 — Um primeiro projeto</p>

<h2>Pequeno, concluído, interativo</h2>

<p>Uma lista de tarefas, um quiz, um conversor, um minijogo, ou uma página que consome uma API pública com fetch. Publique-o. É a sua prova.</p>

</section>

<section>

<p class="eyebrow">05 — A continuação</p>

<h2>Escolher um framework mais tarde</h2>

<p>Depois de dominar a linguagem, um framework (React, Vue, Svelte) se torna útil. Adotá-lo cedo demais esconde fundamentos que farão falta depois.</p>

</section>

<section>

<p class="eyebrow">06 — Perguntas frequentes</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 em apenas 5 minutos (em francês) — Melvynx</p>

</figure>

<h2>Perguntas frequentes</h2>

<h3>JavaScript ou Python primeiro?</h3>

<p>Para a web interativa, JavaScript. Para dados, automação e IA, Python. Os dois se complementam.</p>

<h3>É preciso aprender React logo de início?</h3>

<p>Não. Primeiro a base da linguagem e o DOM; React depois, quando suas vantagens ficarem evidentes.</p>

<h3>Quando aprender TypeScript?</h3>

<p>Depois de se sentir confortável com JavaScript. TypeScript adiciona tipos úteis conforme os projetos crescem.</p>

</section>

<section>

<p class="eyebrow">07 — Recursos e links</p>

<h2>Para onde ir, concretamente</h2>

<div class="linkgroup">

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

<dl class="links">

<div>

<dt>MDN — Guia de JavaScript</dt>

<dd>A referência, em português.</dd>

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

</div>

<div>

<dt>javascript.info</dt>

<dd>Curso moderno e progressivo.</dd>

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

</div>

</dl>

</div>

</section>

<footer class="cta">

<p class="go">Está começando com JavaScript?</p>

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

<p class="fine">Domine a base e o DOM antes de qualquer framework, e depois publique um pequeno projeto interativo: é o melhor ponto de partida.</p>

</footer>

</article>