I Started Learning JavaScript Again—A Beginner-Friendly Guide to the Basics

You can tell from the title of this article that I am learning Javascript again from scratch and will build my way up to React and Node.Js.
You might be wondering why.
Well, I wrote an article for an organization recently, and this is part of the feedback I received: "... the repo is somewhat improved with the last update, but it is still not the best code quality."
Safe to say that I felt horrible. But it was a constructive review nonetheless. It made me look within, and I found that I have lost touch with a lot of my coding abilities.

I am on a journey to refresh myself with the basics, and I am taking you along with me!
You can think of this as a beginner-friendly tutorial, but it is also designed for people with pre-existing knowledge. It doesn't go too in-depth and just basically gives snippets with little explanations for those looking for a quick refresher.

• I am learning with this video.

This article is part of a series I am starting.

In this tutorial, we’ll:

• Understand what JavaScript is and why it’s powerful
• Write and test our first JS code using the browser console
• Explore data types like numbers and strings
• Learn about variables, expressions, and statements
• Dive into the Document Object Model (DOM)
• Use logic and functions to build a simple shopping cart

Let’s get started.

What is JavaScript?

JavaScript (JS) is a programming language used to make websites dynamic.
It is good to remind yourself of the basics sometimes so that you don't abuse or underutilize the potential of JavaScript.
While HTML gives structure and CSS adds style, JavaScript makes things interactive — like dropdown menus, popups, calculators, games, and real-time feedback.

For this tutorial, we’re using Google Chrome and the DevTools Console — no extra software required.

Your First JavaScript Code (No Setup Required)

How to Open the JavaScript Browser Console:

1. Download/install any web browser of your choice, or you can use the default browser on your PC.
2. Right-click on any webpage,
3. Click Inspect on the drop-down menu that pops up,
4. Select the Console tab

In the console tab, type:

alert('Hello there!');

This command pops up a browser alert. JS just ran your instruction.

Now try:

console.log('Logging to the console');

This logs a message in the console, a very important tool for debugging.

Numbers and Operations In JavaScript

JS handles all basic math operations:

2 + 2          // 4 addition
10 - 3         // 7 subtraction
10 * 3         // 30 multiplication
10 / 2         // 5 divison
15 % 2         // 3 modulus
10^3           // 1000 exponential

JavaScript Order of Operations

JS follows PEMDAS rules:

1 + 1 * 3        // 4
(1 + 1) * 3      // 6

Beware of Decimal Errors In JavaScript (Floating Point Math)

0.1 + 0.2        // 0.30000000000000004

Because of how computers handle decimal numbers, small inaccuracies can occur.

In that case, when calculating for money, use cents (a smaller currency).

(2095 + 799) / 100     // 28.94 (represent $20.95 + $7.99)

JavaScript Math.round method snippet

Use Math.round() for accurate totals:

Math.round(2.7)      // 3
Math.round(2.3)      // 2

You can round tax or totals like this:

Math.round((2095 + 799) * 0.1) / 100   // $2.89 tax rounded

Variables In JavaScript: Storing Values

Use variables to store and reuse data.

name = Dumebi's tutorial
console.log(name)

let and const in JavaScript

let quantity = 3;
quantity = quantity + 1;    // 4

const taxRate = 0.1;

// taxRate = 0.2; ❌ Error — const can’t be reassigned

What the last comment is saying is that once a variable name is predicated with const, its value or content cannot be changed later on in the code.

Use const by default; switch to let if you need to reassign.

JavaScript Naming Conventions

• Use camelCase: itemPrice, not item_price
• Start with letters (not numbers or symbols)

Strings: Working with Text In JavaScript

A string is just text wrapped in quotes:

'hello'
"world"
`template`

Concatenation in JavaScript

starterText = "The price is "
price = "$15"        
endText = starterText + price
console.log(endText)
// The price is $15

Template Literals in JavaScript

We use backticks, the dollar sign, and curly braces ${} for template literals:

num1 = 5
num2 = 6
add = num1 + num2 
addt = "Total number is:" + `${add}`
console.log(addt)
// Total number is:11

Template literals are used to concatenate two types if data in JavaScript. In DOM manipulation, it can also be used to add JavaScript to a DOM expression

Expressions vs. Statements In Javascript

An expression is a piece of code that produces a value:

3 + 4

A statement performs an action:

let total = 3 + 4;

Booleans & Comparison Operators In JavaScript

Booleans are either true or false. Useful in decision making:

true
false
5 > 3              // true
5 === 5            // true
'5' === 5          // false (strict equality)

The last statement is false because the strict equality operator in JavaScript === is true when the values are exactly the same in vLalue and type. '5', although a figure is of a type string because it is enclosed in quotations. The 5 on the left hand side, howevevr is a figure of the type integer.

Use booleans in conditions with if blocks:

const age = 16;
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

We will talk about conditional more indepth in the next article.

Functions In JavaScript: Reusable Code Blocks

Functions help you avoid repeating yourself:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Chris'));

You can pass data (arguments) into them and return a result.

function greet(name = 'Chris') {
  return `Hello, ${name}!`;
}

console.log(greet());

Introducing the DOM (Document Object Model) in JavaScript

The DOM is a live tree of all elements on a webpage. With DOM mnaipulations in JavaScript, you can:

• Access HTML elements
• Change their content
• React to user actions

Example: Change a heading

HTML:

<h1 id="main-heading">Original</h1>

JavaScript:

document.getElementById('main-heading').textContent = 'Updated with JS!';

Create Elements on the Fly

const newElement = document.createElement('p');
newElement.textContent = 'I was added with JavaScript';
document.body.appendChild(newElement);

DOM Events in JavaScript: Listen to User Actions

<button id="clickMe">Click Me</button>

document.getElementById('clickMe').addEventListener('click', function() {
  alert('Button was clicked!');
});

Remember that for this to work, the JavaScript file containing the code must have been added to the HTML file via a script tag at the head element.

JavaScript Beginner Project: Shopping Cart Calculator

const item1 = 2095; // in cents
const item2 = 799;
let total = item1 + item2;

let shipping = total <= 1000 ? 499 : 0;
const tax = Math.round(total * 0.1);

const finalAmount = total + shipping + tax;

console.log(`Final Total: $${finalAmount / 100}`);

Let’s connect it to the DOM:

<button onclick="calculateCart()">Calculate</button>
<p id="result"></p>

function calculateCart() {
  const item1 = 2095;
  const item2 = 799;
  const shipping = (item1 + item2 <= 1000) ? 499 : 0;
  const tax = Math.round((item1 + item2) * 0.1);
  const final = item1 + item2 + shipping + tax;

  document.getElementById('result').textContent = `Total: $${final / 100}`;
}

Now when you click the button, it calculates and shows the total.

All the code in this article was written in the browser console.
In this first article, we covered:

• Writing JS in the browser console
• Numbers, strings, variables, expressions, and statements
• Booleans, comparisons, and conditional logic
• Functions to reuse code
• DOM manipulation: changing elements, handling clicks

We even built a simple cart system using JavaScript and connected it to the webpage. Not bad for day one! I am excited for what is to come next. Hopefully, I can make this a weekly endeavor.

Thanks for learning with me. Let’s keep going!
Find me on Linkedin.