Welcome & JavaScript Fundamentals

🟨 JavaScript (ES2026+) 🟢 Lesson 1 📂 Phase 01: JavaScript Fundamentals 📅 2026 Edition

📌 Covered in this lesson: JS ante enti? · History & Uses · JS vs Java · Browser Role & V8 Engine · First Program · 3 Methods to Add JS to HTML (Inline/Internal/External) · console.log() · Strict Mode ("use strict")

Welcome to the Complete JavaScript Masterclass (Phase 1: JavaScript Fundamentals)! JavaScript (JS) is the world's most popular programming language and the undeniable backbone of the Web. Over 98% of all websites on the internet run JavaScript to deliver responsive user interfaces, dynamic interactivity, and server-side APIs via Node.js. In this comprehensive lesson, we will cover what JavaScript is, its history, browser execution engines, methods to include JS in HTML, console.log(), and modern strict mode ("use strict").

1JavaScript Ante Enti? (What is JavaScript?)

JavaScript anedhi oka high-level, dynamically typed, prototype-based, interpreted/JIT-compiled programming language. Idi HTML (structure) mariyu CSS (styling) tho kalisi web pages ni dynamic & interactive ga marusthundi.

Traditional static web page lo HTML/CSS undhi anukundam — adhi purely static content chupisthundhi. Kani JavaScript tho meeru animations, form validations, button clicks, live search suggestions, dark mode toggles, and server data fetching (API calls without reloading page) acheive cheyyavachu.

2JavaScript History & Modern Industry Uses

1995 lo Netscape Communications lo unna Brendan Eich direct ga just 10 days lo JavaScript language ni create chesaru! Modatlo dheeni peru Mocha, tharvatha LiveScript, mariyu aurojullo popular ga unna Java language marketing trend ni thagattu final ga JavaScript ani perupettaru.

Ippudu JavaScript ECMAScript (ES6 / ES2026+) standard dwara manage cheyyabaduthundhi.

🌐 1. Front-End Web Development

React, Vue.js, Angular, Next.js frameworks dwara dynamic single-page applications (SPAs) build cheyyavachu.

🖥️ 2. Back-End Server Development

Node.js & Express.js dwara server-side backend REST APIs and microservices run cheyyavachu.

📱 3. Mobile & Desktop Apps

React Native for iOS/Android apps & Electron.js for desktop apps (VS Code, Discord, Slack are built on JS!).

3JavaScript vs Java (Crucial Differences)

Chaala mandhi beginners Java & JavaScript renduu okate anukuntaru. Kani avi renduu completely different languages! A famous developer quote says: "Java is to JavaScript as Car is to Carpet!" 🚗 vs 🧹

Feature	Java	JavaScript
Language Type	Statically Typed (Type specified at compile time)	Dynamically Typed (Type determined at runtime)
Execution Model	Compiled to Bytecode (`.class`) → Runs on JVM	Interpreted / JIT-compiled directly in JS Engine
OOP Model	Strict Class-based Object Oriented	Prototype-based Object Oriented
Variable Syntax	`int score = 95;`	`let score = 95;`
Primary Ecosystem	Enterprise Backends, Android, Banking	Web Browsers, Full-Stack Web, Node.js

4Browser lo JavaScript Role & JS Engines

Web Browser (Chrome, Firefox, Safari, Edge) lo JavaScript key role play chesthundi. Computer CPU ki direct ga JavaScript execution theliyadhu, andhuke prati browser lo oka JavaScript Engine built-in ga untundhi:

Web Browser	JavaScript Engine Name	Developer / Maintainer
Google Chrome & Node.js	V8 Engine	Google (Written in C++)
Mozilla Firefox	SpiderMonkey	Mozilla Foundation
Apple Safari	JavaScriptCore (Nitro)	Apple Inc.
Microsoft Edge	V8 Engine (Chromium-based)	Microsoft / Google

5Adding JavaScript to HTML (3 Methods)

HTML page lo JavaScript add cheyyadaniki 3 main approaches unnaayi:

Method 1: Inline JavaScript (Not Recommended for Large Apps)

Direct ga HTML element tag inner event attributes lo code rayadam:

<button onclick="alert('Button clicked!')">Click Me</button>

Method 2: Internal JavaScript

HTML file lo <script> tags lopala JavaScript logic rayadam:

<!DOCTYPE html>
<html>
<head>
    <title>Internal JS Demo</title>
</head>
<body>
    <h1>Welcome to Our Compiler</h1>
    <script>
        console.log("Internal JavaScript Executed!");
    </script>
</body>
</html>

Method 3: External JavaScript (Industry Best Practice ⭐)

Separate script.js file maintain chesi, HTML file lo <script src="script.js" defer></script> dwara link cheyyadam. Code organization, caching, and maintainability ki idhe standard!

6console.log() & Strict Mode ("use strict")

JavaScript lo debugging and console output print cheyyadaniki console.log() vadathamu. Browser DevTools Console (F12) or terminal lo idhi print avthundhi.

Strict Mode ("use strict";)

ECMAScript 5 lo introduce chesina Strict Mode JavaScript engine ki strict execution rules enforcement isthundi. Undeclared global variables, accidental silent bugs, and unsafe operations ni errors ga throw chesthundi.

JavaScript — Strict Mode & console.log ▶ Run Code

"use strict";

// 1. Standard Console Output
console.log("Hello, JavaScript!");
console.log("Welcome to Our Compiler Masterclass 🚀");

// 2. Logging Variables
let userRole = "Full Stack Engineer";
let experienceYears = 2026;
console.log("Role:", userRole, "| Year:", experienceYears);

// 3. Strict Mode Error Prevention:
// Without "use strict", x = 10 creates an accidental global variable.
// With "use strict", the line below throws: ReferenceError: x is not defined
// x = 10;

💻 Try It Yourself — First JS Challenge

Run this interactive JavaScript program that calculates portfolio stats and logs formatted messages:

JavaScript ▶ Run Code

"use strict";

console.log("=================================");
console.log("⚡ DEVELOPER PROFILE CARD");
console.log("=================================");

let developerName = "Balaji Nayak";
let targetStack = "JavaScript (React & Node.js)";
let isCompletedPhase1 = true;

console.log("Name:", developerName);
console.log("Stack:", targetStack);
console.log("Phase 1 Status:", isCompletedPhase1 ? "Completed ✅" : "In Progress ⏳");
console.log("=================================");

Run This Code in Our Compiler →

Written and reviewed by Our Compiler Technical Team · Updated for JavaScript ES2026+