DEV Community

Cover image for Introduction to JavaScript
arjun
arjun

Posted on

3

Introduction to JavaScript

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!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay