DEV Community

Cover image for What is JavaScript and Why You Should Learn It
Ridoy Hasan
Ridoy Hasan

Posted on

What is JavaScript and Why You Should Learn It

#web3 #javascript #learning #beginners

Post 1: What is JavaScript and Why You Should Learn It

Introduction

Welcome to the first post of our JavaScript series! If you're new to coding or web development, you've probably heard the term JavaScript before. So, what is JavaScript, and why should you learn it? Let’s break it down in simple terms.

What is JavaScript?

JavaScript is a programming language that allows you to make websites interactive. While HTML and CSS are used to structure and style web pages, JavaScript is the part that brings them to life.

Think of a simple web page like a document—you can read it, but you can’t really interact with it. With JavaScript, you can add features like:

  • Clicking buttons that trigger events.
  • Displaying live content (like weather updates).
  • Animations and effects.

JavaScript runs directly in your browser, making it incredibly powerful and widely used for both front-end and back-end development.

Why Learn JavaScript?

  • Widely Used: Almost every website uses JavaScript.
  • Versatile: It can be used for web development, server-side programming, mobile apps, and even game development.
  • Beginner-Friendly: JavaScript has a gentle learning curve, making it a great starting point for new coders.

Practical Example: Your First JavaScript Program

Let’s jump right in by writing our first JavaScript code. Don’t worry, it’s going to be super simple.

Step 1: Open Your Browser's Console

Most browsers like Chrome or Firefox come with built-in Developer Tools. We can use the Console to write and test JavaScript directly.

  1. Open your browser (Chrome is recommended).
  2. Press F12 or Ctrl + Shift + I (Cmd + Option + I for Mac) to open the Developer Tools.
  3. Click on the Console tab.

Step 2: Write Your First Code

In the console, type the following:

console.log("Hello, World!");
Enter fullscreen mode Exit fullscreen mode

And press Enter. You should see the text Hello, World! printed in the console.

What Just Happened?

  • console.log() is a function in JavaScript that outputs (or "logs") whatever is inside the parentheses to the console. In this case, it's logging the string "Hello, World!".
  • "Hello, World!" is a string of text, which is enclosed in double quotes. You can also use single quotes ('Hello, World!').

Next Steps

Congratulations! You’ve just written your first JavaScript program. In the upcoming posts, we’ll dive deeper into the basics of JavaScript and start creating more complex programs. In the next post, we’ll cover how to set up a development environment so you can start coding in your own files.

Stay tuned!

Pro Tip:

Try changing "Hello, World!" to "Hello, [Your Name]!" and run the code again. See what happens!

visit my website- ridoyweb.com

follow me on LinkedIn Ridoy Hasan

Top comments (2)

Collapse
 
pengeszikra profile image
Peter Vivo • • Edited

for simple js animation can use <pre> tag : fixed font width, space is space, so this is the way to turn html to character animation place.

const begin = Date.now();
const end = setIntervall(() => {
  const milisec = Date.now() - begin;
  document.querySelector('pre').innerText = animation(milisec);
}, 100);

// clearInterval(end);

// just write your animation function. Like this:
const animation = ms => (Math.random() * ms | 0 ).toString(16);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tdjdev profile image
Davy TISSOT •

Nice post! I really like the way you combine the article and the tutorial, but I'm one of those who would advise favoring CSS for animations and most effects.

PS: I'm not saying you're wrong, but rather that being able to do something doesn't mean you should. JavaScript is often used as a catch-all to the detriment of HTML and CSS.

Read next

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

bregwin profile image

Testing Troubles with Jest & ESM and how to fix it

Bregwin Jogi -

mikeyoung44 profile image

Memes Driving AI's Autonomous Evolution: Exploring Hyperstition in Finance and Computing

Mike Young -

matek075 profile image

Introducing FinanceFolio: Your Free Solution for Asset Management and Portfolio Tracking

Matek -