JavaScript - Lesson 1: Introduction

A web page with HTML and CSS is a static site, it will always show you the same content. No matter how many animations you add to give it dynamism and fun, as soon as you refresh the browser everything will go back to its original state. None of your actions will have an effect that lasts over time, and the texts won't change depending on how you interact with the site. A place where nothing changes, and nothing ever will... but not all is lost!

This is where the third pillar of all web development comes in: web programming languages. They will give us tools so that sites become dynamic, where visitors' actions trigger new texts or functionality.

They are classified into 2 types:

Frontend languages, client-side logic (browser). JavaScript is usually used, but we can use other meta-languages like TypeScript, Elm or ClojureScript.
Backend languages, server-side logic. Pages are drawn and managed by the server. We won't cover any of that here, but you can learn more about these topics in my PHP course.

Which language are we going to learn?

JavaScript (abbreviated as JS) is a high-level programming language born in 1995 (its syntax is closer to human language than to machine language), multi-paradigm (it supports several ways of organizing it) and it is executed at compile time (there is no prior step of compiling the code into a binary). All of this will make it easier to learn and later develop with.

The goal of this course is to teach you the essential tasks that every professional frontend developer should know.

Basic syntax: variables, conditionals, functions, arrays and loops.
Manipulating HTML (the DOM).
Creating dynamic elements.
Reacting to user actions (events).
Managing forms.
Learning to work with storage.
Using internal APIs.
Interacting with other services (via HTTP requests to external APIs).
Connecting to a WebSockets server.
Connecting to a Server-side Events server.
Creating native components.

I don't harbor any hope that you'll understand all of the points above, but I do expect you to be aware that you'll be learning from a professional standpoint rather than an academic one. All the material will be practical, which means it won't always be fun.

Are you ready to build Web Apps? For visitors to be the protagonists of the experience? To be called a frontend developer?

Let's get started!

Tools for the course

A rich text editor or IDE, any from this list will be enough.
A web browser.
Order: both for the exercises and for your notes. It's easy to fall into chaos but hard to get out of it.

Where do I write my JavaScript code?

It must be inside the <script> tag, but you'll wonder... where should that tag be in my HTML? Yes and no.

Option 1: Bad

Loose inside <head>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        // Your code goes here
    </script>
</head>
<body>
    <!-- All my HTML -->
</body>
</html>

This isn't a good idea because the code will start running before the HTML has finished loading.

Option 2: Classic

At the end of <body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

        <!-- All my HTML -->

        <script>
            // Your code goes here
        </script>
</body>
</html>

It will never give you problems, although there are better ways.

Option 3: Good

We wait for everything to load before running it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Your code goes here
    });
    </script>
</head>
<body>
    <!-- All my HTML -->
</body>
</html>

Detect the DOMContentLoaded event, which notifies you when the document has finished loading, letting you include the code wherever you want.

Option 4: Modern

Isolated in a separate document, and called via the src attribute together with the defer attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script defer src="codigo.js"></script>
</head>
<body>
    <!-- All my HTML -->
</body>
</html>

It will load asynchronously and keep your page more organized.

How can I add comments?

Comments are ignored by the language, so don't save keystrokes on them. The more documented your code is, the easier it will be to modify and grow.

Inline

Must start with //.

// My comment

// Another comment on another line

Block

Starts with /* and closes with */.

/*
My comment
spanning
several
lines
*/

Now that you know the basics of JavaScript, we can move on to the syntax.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Sure, it's on me!

Comments

There are no comments yet.