DEV Community

Cover image for 🧠10-Day JavaScript Learning Challenge - Day1
Smriti Singh
Smriti Singh

Posted on

🧠10-Day JavaScript Learning Challenge - Day1

#javascript #webdev #programming #learning

📅 Day 1: JavaScript Basics & Setup
Welcome to Day 1 of your JavaScript Learning Challenge! Today, we’re laying the foundation by understanding what JavaScript is, how to add it to your webpage, and how to use basic syntax to interact with the browser console.

🚀 What is JavaScript?
JavaScript (JS) is a programming language used to add interactivity and dynamic behavior to websites. It allows you to build responsive web applications, handle user actions, and manipulate content without reloading the page.

🔗 How to Add JavaScript to HTML
There are 3 main ways to include JavaScript in your HTML file:

✅ Inline JavaScript

<button onclick="alert('Hello!')">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

✅ Internal JavaScript
Use a script tag inside your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First JS</title>
    <script>
      console.log("This is internal JS");
    </script>
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

✅ External JavaScript
Recommended for cleaner code and reusability:

<!-- index.html -->
<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode 
// script.js
console.log("Hello from external JS file!");
Enter fullscreen mode Exit fullscreen mode

🧾 Basic Syntax to Know
✅ console.log()
Outputs information to the browser console.

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

✅ Comments


// This is a single-line comment

/*
This is a 
multi-line comment
*/
Enter fullscreen mode Exit fullscreen mode

✅ Variables

let name = "Dev.to";
const age = 24;
var color = "Blue";
console.log(name, age, color);
Enter fullscreen mode Exit fullscreen mode

Use let and const over var in modern JavaScript.

✅ Mini Task: Console Identity Card
Create a script that prints the following info to the browser console:

Your name

Your age

Your favorite color

Example:

let name = "Smriti";
let age = 24;
let favoriteColor = "Teal";
console.log("Name:", name);
console.log("Age:", age);
console.log("Favorite Color:", favoriteColor);
Enter fullscreen mode Exit fullscreen mode

👉 Open your browser’s DevTools > Console to see the output.

❓ Interview Questions (Day 1 Topics)
Here are 5 commonly asked questions related to JavaScript basics:

  1. What is the difference between let, const, and var?
  2. How do you include JavaScript in an HTML file? Name all three methods.
  3. What is the purpose of console.log() in JavaScript?
  4. What are the main data types supported by JavaScript? (Hint: string, number, boolean, null, undefined...)
  5. What is the difference between single-line and multi-line comments in JavaScript?

🎉 You’ve completed Day 1!
Tomorrow we’ll explore JavaScript Data Types & Operators.

Top comments (0)