This content originally appeared on HackerNoon and was authored by Dumebi Okolo
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 from 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:
- Download/install any web browser of your choice, or you can use the default browser on your PC.
- Right-click on any webpage
- Click Inspect on the drop-down menu that pops up
- 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, notitem_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 of 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 value and type. '5', although a figure is of a type string because it is enclosed in quotations. The 5 on the left-hand side, however, 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 conditions more in-depth 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 manipulation 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 about 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.
This content originally appeared on HackerNoon and was authored by Dumebi Okolo
Dumebi Okolo | Sciencx (2025-07-08T00:24:18+00:00) Re-Learning JavaScript: A Guide to the Basics for Beginners. Retrieved from https://www.scien.cx/2025/07/08/re-learning-javascript-a-guide-to-the-basics-for-beginners/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.