JavaScript for Beginners

<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 is the language of the web on the browser side, and also a widely used server-side language (Node.js). It's a good second language, and a mandatory step for anything interactive on a page.</p><p>This guide assumes HTML/CSS basics; if not, start with <a href="https://newtiv.com/article.html?slug=html-css-les-fondamentaux">HTML &amp; CSS: the fundamentals</a>.</p>

</section>

<section>

<p class="eyebrow">01 — Where it runs</p>

<h2>Browser and server</h2>

<p>In the browser, JavaScript reacts to clicks, modifies the page, calls APIs. With Node.js, it runs server-side for tools, APIs, scripts. The language is the same, the environment changes.</p>

</section>

<section>

<p class="eyebrow">02 — The fundamentals</p>

<h2>What you need to know first</h2>

<ul class="plain">

<li>Variables (let, const), types, operators.</li>

<li>Conditionals, loops, functions (including arrow functions).</li>

<li>Arrays and methods (map, filter, reduce), objects.</li>

<li>Asynchronous programming: promises and 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, public domain</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 for beginners — <em>Photo by Daniil Komov, Pexels license</em></figcaption>

</figure>

</section>

<section>

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

<h2>Acting on the page</h2>

<p>Selecting elements, listening for events, modifying content and classes. This is what makes a page come alive. Watch for pitfalls: forgetting to remove a listener, manipulating the DOM before it's ready.</p>

</section>

<section>

<p class="eyebrow">04 — A first project</p>

<h2>Small, finished, interactive</h2>

<p>A to-do list, a quiz, a converter, a mini-game, or a page that consumes a public API with fetch. Publish it. It's your proof.</p>

</section>

<section>

<p class="eyebrow">05 — What comes next</p>

<h2>Choosing a framework later</h2>

<p>Once you've got the language down, a framework (React, Vue, Svelte) becomes useful. Picking it up too early hides fundamentals you'll miss later.</p>

</section>

<section>

<p class="eyebrow">06 — Frequently asked questions</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">Learn JavaScript in just 5 minutes (in French) — Melvynx</p>

</figure>

<h2>Frequently Asked Questions</h2>

<h3>JavaScript or Python first?</h3>

<p>For interactive web, JavaScript. For data, automation and AI, Python. The two complement each other.</p>

<h3>Should I learn React right away?</h3>

<p>No. The language fundamentals and the DOM first; React next, once its benefits become obvious.</p>

<h3>When should I learn TypeScript?</h3>

<p>After becoming comfortable with JavaScript. TypeScript adds useful types as projects grow.</p>

</section>

<section>

<p class="eyebrow">07 — Resources &amp; links</p>

<h2>Where to go, concretely</h2>

<div class="linkgroup">

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

<dl class="links">

<div>

<dt>MDN — JavaScript Guide</dt>

<dd>The reference, in English.</dd>

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

</div>

<div>

<dt>javascript.info</dt>

<dd>A modern, progressive course.</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">Just getting started with JavaScript?</p>

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

<p class="fine">Master the fundamentals and the DOM before any framework, then publish a small interactive project: it's the best starting point.</p>

</footer>

</article>