NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 21JavaScript Basics2 Hours Practical
Push to GitHub to Complete

JavaScript Introduction: <script> Tag, Variables (let, const) & Data Types

JavaScript is the programming engine of the web. While HTML provides the skeleton and CSS provides the skin, JavaScript provides the nervous system and dynamic brain, enabling computations, user interactions, and DOM modifications.

Interactive Learning Roadmap

Day 21 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Embed JavaScript inside HTML using the <script> tag.
✔Differentiate between const (immutable binding), let (reassignable), and legacy var.
✔Identify primitive data types: string, number, boolean, null, undefined, symbol.
✔Print diagnostics to browser DevTools using console.log() and inspect types with typeof.
Day 21 MasterclassJavaScript Basics

JavaScript Introduction: <script> Tag, Variables (let, const) & Data Types — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

JavaScript is the programming engine of the web. While HTML provides the skeleton and CSS provides the skin, JavaScript provides the nervous system and dynamic brain, enabling computations, user interactions, and DOM modifications.

<script> tag: Connects JavaScript logic to an HTML document, usually before </body>.
const: Use by default for all variables whose reference should not change.
let: Use strictly when you know a variable will be reassigned (e.g. counters, accumulators).
var: Legacy function-scoped declaration from ES5; avoid in modern professional development.
typeof operator: Returns the string description of a value's data type.
Dimaag Mein Bithane Ka Model

"Think of const like a student ID card number (permanent once issued), let like a whiteboard tally of test scores (erased and rewritten as marks update), and console.log like the airplane black-box cockpit recorder."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

See how const protects values from accidental reassignment while template literals cleanly inject variables into strings.

Declaring Variables and Inspecting Types in JavaScripthtml
<!DOCTYPE html>
<html>
<head><title>Day 21 JavaScript Demo</title></head>
<body>
  <h2>Open Chrome DevTools (F12 -> Console)</h2>
  <script>
    const studentName = "Aarav Sharma";
    const rollNumber = 240101;
    let currentSemester = 1;
    let isEnrolled = true;

    console.log(`Student: ${studentName} (Roll: ${rollNumber})`);
    console.log("Type of studentName:", typeof studentName);
    console.log("Type of rollNumber:", typeof rollNumber);
    console.log("Type of isEnrolled:", typeof isEnrolled);
  </script>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 21 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Declare const studentName and let attendanceScore

Declare a const variable named studentName with a string value, and a let variable named attendanceScore with a number value.

⏳ WAITING
Task 2Output via console.log

Call console.log to print studentName and attendanceScore to the terminal/browser console.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh233 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Illegal Assignment to Constant Variable

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
const semesterMarks = 450;
2
semesterMarks = 475; // Error occurs here
3
console.log("Updated Marks:", semesterMarks);
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Variables declared with const cannot be reassigned. Attempting to assign a new primitive value throws TypeError: Assignment to constant variable.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 developer-spec.html

Personal Developer Specification Script

  • •Create day-21/index.html with valid HTML5 boilerplate.
  • •Declare 5 variables covering string, number, boolean, null, and undefined types.
  • •Use template literals to print a 4-line developer summary to console.log.
  • •Inspect the script in Google Chrome DevTools console and verify zero errors.
Submission Evaluation Criteria: Push your day-21/index.html file with working <script> variables to your GitHub repo.
Exact Assignment Solution Code: developer-spec.html

Open Visual Studio Code on your PC (code .), create developer-spec.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 21 - JavaScript Variables & Data Types</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0b1120;
      color: white;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .spec-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 16px;
      padding: 32px;
      max-width: 480px;
      width: 100%;
    }
    h1 { font-size: 20px; color: #38bdf8; margin-bottom: 12px; }
    pre {
      background: #0f172a;
      padding: 16px;
      border-radius: 8px;
      font-size: 13px;
      color: #34d399;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <div class="spec-card">
    <h1>JavaScript Developer Profile Specification</h1>
    <pre id="output">Loading developer profile variables...</pre>
  </div>

  <script>
    // 1. Declare 5 variables representing core primitive types
    const developerName = "Er. Manoj Kumar";       // String
    const semester = 1;                           // Number
    const isEnrolledBCA = true;                   // Boolean
    const graduationProject = null;               // Null (intentional absence of value)
    let thesisAdvisor;                            // Undefined (unassigned)

    // 2. Format a multiline summary using ES6 Template Literals
    const summary = `Developer Name: ${developerName}
Semester: Semester ${semester}
Active Enrollment: ${isEnrolledBCA ? "Verified Active" : "Inactive"}
Capstone Project: ${graduationProject === null ? "In Progress (Sprint 1)" : graduationProject}
Thesis Advisor: ${typeof thesisAdvisor} (Assigned in Year 3)`;

    // 3. Log to browser console and render to DOM
    console.log(summary);
    document.getElementById("output").textContent = summary;
  </script>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the primary difference between let and const in modern JavaScript (ES6)?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-21
Create a new project folder (day-21)
2$
cd day-21
Change working directory to day-21
3$
git checkout -b feature/day-21-js-intro
4$
git add index.html
5$
git commit -m "feat(day-21): add javascript intro variables and data types"
Commit staged changes with a descriptive message
6$
git push origin feature/day-21-js-intro
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 21 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-21/ or bca-day-21/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 21
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 21
4$
mkdir day-21
Create a new project folder (day-21)
5$
cd day-21
Change working directory to day-21
6$
# 3. Create your code file: index.html
7$
# (Write your Day 21 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 21: JavaScript Introduction: <script> Tag, Variables (let, const) & Data Types"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-21/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/✨ CREATE THIS FOLDER FOR TODAY (Day 21)
└──index.htmlMust contain: <script>, const, let, typeof
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 21 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 20: Sprint 2 Capstone: Responsive University Campus Portal first.

Complete Day 20 First
Day 20: Sprint 2 Capstone: Responsive University Campus Portal
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal