DEV Community

Cover image for Introduction to JavaScript
arjun
arjun

Posted on

Introduction to JavaScript

#javascript #webdev #web3 #programming

Day 1: Introduction to JavaScript

Welcome to Day 1 of your JavaScript learning journey! Today, we’ll cover the basics of JavaScript, its importance in web development, and how to start using it effectively.

What is JavaScript?

JavaScript (JS) is a versatile and powerful programming language primarily used to add interactivity and dynamic features to websites. Along with HTML and CSS, it’s one of the core technologies of web development.

Why JavaScript is Essential

  • Makes web pages interactive (e.g., sliders, forms, dynamic content).
  • Allows real-time updates without reloading the page (AJAX).
  • Forms the foundation of popular frameworks like React, Angular, and Vue.

Getting Started with JavaScript

Running JavaScript in Your Browser

Modern browsers like Chrome, Firefox, and Edge come with a built-in console.

  1. Open the browser.
  2. Right-click anywhere on the page and select "Inspect" or press F12.
  3. Go to the Console tab.

Try typing:

console.log("Hello, Arjun I am your Instructor!");
Enter fullscreen mode Exit fullscreen mode

You should see the output: Hello, Arjun I am your Instructor!

Linking JavaScript to HTML

To use JavaScript in a project:

  1. Create an HTML file (e.g., index.html).
  2. Link a JavaScript file using the <script> tag.

Example: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Welcome to JavaScript!</h1>
    <p>Open the console to see the magic.</p>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Create a file named script.js in the same directory and add: 
console.log("JavaScript is connected!");
Enter fullscreen mode Exit fullscreen mode

Open index.html in your browser and check the console to verify the connection.

Your First JavaScript Program

Let’s create a simple JavaScript program:

Example: 

// Declare a variable
let message = "Welcome to JavaScript!";

// Print the message to the console
console.log(message);

// Perform a simple calculation
let sum = 5 + 3;
console.log("The sum of 5 and 3 is:", sum);
Enter fullscreen mode Exit fullscreen mode

Summary of Day 1

Today, you learned:

  1. What JavaScript is and its importance in web development.
  2. How to run JavaScript in the browser console.
  3. How to link a JavaScript file to an HTML document.
  4. Writing a basic JavaScript program.

Practice for Day 1

  1. Create an HTML page and link a JavaScript file to it.
  2. Write a program in JavaScript to:
    • Print your name and favorite hobby.
    • Calculate the product of two numbers.

Ready for Day 2? Tomorrow, we’ll dive into variables and data types to strengthen your understanding of JavaScript!

Top comments (0)