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.
https://youtu.be/EerdGm-ehJQ?si=-qxaZj7xicccST4h I am learning from this video.
https://youtu.be/EerdGm-ehJQ?si=-qxaZj7xicccST4h I am learning from this video. https://youtu.be/EerdGm-ehJQ?si=-qxaZj7xicccST4h https://youtu.be/EerdGm-ehJQ?si=-qxaZj7xicccST4h 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 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. JavaScript makes things interactive For this tutorial, we’re using Google Chrome and the DevTools Console — no extra software required. For this tutorial, we’re using Google Chrome and the DevTools Console — no extra software required. Google Chrome DevTools Console 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 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 Inspect Select the Console tab Console In the console tab, type: alert('Hello there!'); alert('Hello there!'); This command pops up a browser alert. JS just ran your instruction. Now try: console.log('Logging to the console'); 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 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: PEMDAS 1 + 1 * 3        // 4
(1 + 1) * 3      // 6 1 + 1 * 3        // 4
(1 + 1) * 3      // 6 Beware of Decimal Errors In JavaScript (Floating Point Math) 0.1 + 0.2        // 0.30000000000000004 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) (2095 + 799) / 100     // 28.94 (represent $20.95 + $7.99) JavaScript Math.round Method Snippet Use Math.round() for accurate totals: Math.round() Math.round(2.7)      // 3
Math.round(2.3)      // 2 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 Math.round((2095 + 799) * 0.1) / 100   // $2.89 tax rounded Variables In JavaScript: Storing Values Use variables to store and reuse data. variables name = Dumebi's tutorial
console.log(name) 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 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. const Use const by default; switch to let if you need to reassign. const let need JavaScript Naming Conventions Use camelCase: itemPrice, not item_price
Start with letters (not numbers or symbols) Use camelCase: itemPrice, not item_price itemPrice item_price Start with letters (not numbers or symbols) Strings: Working With Text In JavaScript A string is just text wrapped in quotes: string 'hello'
"world"
`template` 'hello'
"world"
`template` Concatenation in JavaScript starterText = "The price is "
price = "$15"        
endText = starterText + price
console.log(endText)
// The price is $15 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 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: expression 3 + 4 3 + 4 A statement performs an action: statement let total = 3 + 4; let total = 3 + 4; Booleans & Comparison Operators In JavaScript Booleans are either true or false. Useful in decision making: true false true
false
5 > 3              // true
5 === 5            // true
'5' === 5          // false (strict equality) 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. === string Use booleans in conditions with if blocks: if const age = 16;
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
} 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')); 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()); 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 Access HTML elements Change their content React to user actions Example: Change a Heading HTML: <h1 id="main-heading">Original</h1> <h1 id="main-heading">Original</h1> JavaScript: document.getElementById('main-heading').textContent = 'Updated with JS!'; 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); 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> <button id="clickMe">Click Me</button> document.getElementById('clickMe').addEventListener('click', function() {
  alert('Button was clicked!');
}); 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. script head 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}`); 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> <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}`;
} 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 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. LinkedIn

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Google

Re-Learning JavaScript: A Guide to the Basics for Beginners

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

11 Books Every Software Developer Should Read

12 Common Java Mistakes Made by Newcomers

3 Key Questions You Need To Answer Before You Push That Code

56 Stories To Learn About Beginners To Coding

A Guide on How to Host Your Own Git-Server With Raspberry Pi

A Q&A With Ashwin Kumar Uppala, Coach at Major League Hacking, on "Learning in Public" for New Devs

11 Books Every Software Developer Should Read

12 Common Java Mistakes Made by Newcomers

3 Key Questions You Need To Answer Before You Push That Code

56 Stories To Learn About Beginners To Coding

A Guide on How to Host Your Own Git-Server With Raspberry Pi

A Q&A With Ashwin Kumar Uppala, Coach at Major League Hacking, on "Learning in Public" for New Devs

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps