HOW TO LEARN JAVASCRIPT
Published: 2024-02-23 10:03:53

How to Learn JavaScript
#
javascript
#
beginners
#
webdev
#
codenewbie
When I first started learning frontend development, I was determined to avoid JavaScript.

I found it confusing – I didn't understand anything about how the DOM worked and I didn't think I'd use it that much anyway. I already knew HTML and CSS and that's pretty much all you need for designing websites, right?

Much to my dismay, I soon discovered that not only is JavaScript very much needed for designing websites but almost all websites depend on it.

JavaScript is used in some form or the other by 97% of all websites on the internet. There's just no getting away from it.

Since avoiding it didn't work, I decided to tackle the problem head on. I made an effort to write at least one line of JavaScript code everyday and started building applications to learn more.

To my surprise, once I got started I realised JavaScript wasn't the monster I thought it was. I was even - dare I say it - enjoying learning JavaScript.

If you're trying to move from HTML and CSS to JavaScript and you're finding it difficult like I was, then this is the article for you.

The reason JavaScript seems overwhelming at first is because there's a lot to learn.

So this article will serve as a high-level beginner's guide to learning JavaScript. I'll narrow things down, cover what JavaScript is and what it's used for, and recommend some courses to help you start your JS learning journey.

Table of Contents
What is JavaScript?
What is JavaScript Used For?
How to Write JavaScript Code
JavaScript Projects for Beginners
JavaScript Tutorials for Beginners
What is JavaScript?
JavaScript is a programming language that makes web pages interactive. This involves everything from changing colors to collecting user input and passing it to a server.

The relationship between HTML, CSS and JavaScript

JavaScript is used in conjunction with HTML and CSS to build fully functional webpages.

A common analogy is to think of a webpage as a human body: HTML is the skeletal structure responsible for how the body is formed, CSS is the skin and determines how the body looks, and JavaScript is the muscle that allows the body to be functional.

With the advent of JavaScript frameworks, a lot of modern websites are heavily reliant on JavaScript and won't work without it.

What is JavaScript Used For?
JavaScript is a very complex language that can be used for anything from client-side rendering to creating large-scale applications.

We'll be focusing on the more common uses of JavaScript when building webpages:

1. JavaScript lets you manipulate HTML and CSS
Photo by Pankaj Patel

You can use JavaScript to change the HTML of a page by adding or deleting elements from the DOM or by updating element attributes. You can also use it to change the styling of an element.

Most interactive actions on a webpage such as toggling a drop down menu or displaying a modal are usually done by using JavaScript to manipulate HTML and CSS as needed.

Recommended reading: How to Manipulate the DOM - A Beginner's Guide.

2. JavaScript lets you carry out mathematical operations and algorithms
Photo by JESHOOTS.COM

JavaScript is a programming language and can be used to compute complex mathematical equations and algorithms.

This allows us to carry out calculations on the client-side such as determining the number of characters in a form or getting the height of an element from the top of the screen.

Recommended reading: How to do Math in JavaScript with Operators.

3. JavaScript lets you manipulate complex data with data structures
Photo by Luke Chesser

You can use JavaScript to handle data structures in different formats such as arrays or objects.

There are multiple operations you can do on these data structures such as adding and deleting elements or filtering and sorting. This is widely used in real life situations to manipulate user data.

Recommended reading: JavaScript Data Structures.

4. JavaScript lets you detect and respond to user interactions on a page
Photo by Christin Hume

JavaScript uses event listeners such as scroll or click to monitor how the user interacts with a page. These listeners are used to carry out certain functions based on the event.

For example, you can use the onClick event listener to display an element when a user clicks a button.

Recommended reading: Understanding Events in JavaScript.

5. JavaScript lets you communicate with a server
Photo by Diego Fernandez

You can use JavaScript to communicate with a server or a database by sending and receiving data.

For example, when a user submits a form on a webpage, you can create a fetch request to POST the data in that form to a server and process the returned response from the server.

Recommended reading: How to Make a GET Request and POST Request in JavaScript