From c829bd7ed749400bef75158b993d59409cbb101c Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Wed, 25 Feb 2026 23:07:07 +0530 Subject: [PATCH] started JS Docs --- .../javascript/data-types.mdx | 106 ++++++++++++++++++ .../javascript/dom-manipulation.mdx | 0 .../frontend-beginner/javascript/events.mdx | 0 .../javascript/functions.mdx | 0 .../javascript/js-challenge.mdx | 0 5 files changed, 106 insertions(+) create mode 100644 absolute-beginners/frontend-beginner/javascript/data-types.mdx create mode 100644 absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx create mode 100644 absolute-beginners/frontend-beginner/javascript/events.mdx create mode 100644 absolute-beginners/frontend-beginner/javascript/functions.mdx create mode 100644 absolute-beginners/frontend-beginner/javascript/js-challenge.mdx diff --git a/absolute-beginners/frontend-beginner/javascript/data-types.mdx b/absolute-beginners/frontend-beginner/javascript/data-types.mdx new file mode 100644 index 0000000..3ff460d --- /dev/null +++ b/absolute-beginners/frontend-beginner/javascript/data-types.mdx @@ -0,0 +1,106 @@ +--- +sidebar_position: 3 +title: Data Types in JS +sidebar_label: Data Types +description: "Learn the different types of data JavaScript can handle, from text to logic." +--- + +JavaScript needs to know what kind of data it is working with so it knows what it can do with it. For example, you can multiply two **Numbers**, but you can't multiply two **Sentences**. + +There are 7 "Primitive" data types in JS, but as a beginner, you only need to master the **Big 5**. + +## 1. Strings (Text) +A **String** is just plain text. It must always be wrapped in quotes: single `' '`, double `" "`, or backticks ` `. + +* **Analogy:** Like a "string" of pearls, it is a sequence of characters linked together. +* **Use for:** Names, addresses, or any messages. + +```javascript +const name = "Ajay Dhangar"; +const message = 'Welcome to CodeHarborHub'; +``` + +## 2. Numbers (Math) + +Unlike many other languages, JS only has one type for numbers. They can be whole integers or decimals. **Do not use quotes** for numbers, or JS will think they are text! + +* **Use for:** Scores, prices, age, or calculations. + +```javascript +const age = 25; +const price = 9.99; + +// Comparison: +const score = 10; // This is a Number (You can do math with this) +const points = "10"; // This is a String (This is just a picture of a 10) +``` + +## 3. Booleans (Logic) + +A Boolean can only be one of two values: `true` or `false`. + +* **Analogy:** Like a light switch. It is either **ON** or **OFF**. +* **Use for:** Checking if a user is logged in, if a game is over, or if a checkbox is clicked. + +```javascript +let isDarkMode = true; +let isGameOver = false; +``` + +## 4. Undefined (The Empty Box) + +When you create a variable but don't put anything in it yet, it is `undefined`. + +* **Analogy:** You bought a box (variable), but it's still empty and waiting for content. + +```javascript +let mySecret; +console.log(mySecret); // Result: undefined +``` + +## 5. Null (The Intentional Nothing) + +`null` is a value that represents "nothing" or "empty" on purpose. + +* **The Difference:** `undefined` is an accidental empty box. `null` is you specifically saying, "This box is intentionally empty." + +```javascript +let userAwards = null; // The user has zero awards right now +``` + +## Interactive Lab: The "Typeof" Tool + +How do you check what is inside a variable? We use a special command called `typeof`. + + + +### Challenge Tasks: + +1. In the JS tab, create a variable `let test = "5";`. +2. Use `console.log(typeof test);`. Is it a number or a string? +3. Remove the quotes around the `5`. Check the `typeof` again. See the difference? + +## Pro Tip: Template Literals + +When you want to mix a **String** with a **Variable**, use backticks ``` and the `${}` syntax. It’s much easier than using the `+` sign! + +```javascript title="index.js" +const username = "Ajay"; + +// The old way (Hard) +console.log("Hello " + username + "!"); + +// The modern way (Easy) +console.log(`Hello ${username}!`); +``` + +## Summary Checklist + +* [x] I know that **Strings** must be inside quotes. +* [x] I understand that **Numbers** do not use quotes. +* [x] I know that **Booleans** are for True/False logic. +* [x] I can use `typeof` to identify a data type. +* [x] I understand the difference between `null` and `undefined`. \ No newline at end of file diff --git a/absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx b/absolute-beginners/frontend-beginner/javascript/dom-manipulation.mdx new file mode 100644 index 0000000..e69de29 diff --git a/absolute-beginners/frontend-beginner/javascript/events.mdx b/absolute-beginners/frontend-beginner/javascript/events.mdx new file mode 100644 index 0000000..e69de29 diff --git a/absolute-beginners/frontend-beginner/javascript/functions.mdx b/absolute-beginners/frontend-beginner/javascript/functions.mdx new file mode 100644 index 0000000..e69de29 diff --git a/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx b/absolute-beginners/frontend-beginner/javascript/js-challenge.mdx new file mode 100644 index 0000000..e69de29