From 982eb6b658d6c9ff21a0be795d8a7b56b0be695c Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Thu, 7 Dec 2023 22:50:07 +0530 Subject: [PATCH] added DSA Content --- courses/javascript/ex-1.md | 161 -------------------- docs/basics/_category_.json | 8 + docs/basics/javascript/_category_.json | 8 + docs/basics/javascript/ex-1.md | 202 +++++++++++++++++++++++++ docs/basics/javascript/ex-2.md | 100 ++++++++++++ docs/basics/javascript/ex-3.md | 12 ++ docs/data-structures/_category_.json | 8 + docs/data-structures/arrays/ex-1.md | 4 + docs/data-structures/arrays/ex-2.md | 5 + docs/data-structures/intro.md | 7 + docs/intro.md | 8 + docs/myMarkdownFile.mdx | 9 ++ src/pages/index.js | 2 +- 13 files changed, 372 insertions(+), 162 deletions(-) delete mode 100644 courses/javascript/ex-1.md create mode 100644 docs/basics/_category_.json create mode 100644 docs/basics/javascript/_category_.json create mode 100644 docs/basics/javascript/ex-1.md create mode 100644 docs/basics/javascript/ex-2.md create mode 100644 docs/basics/javascript/ex-3.md create mode 100644 docs/data-structures/_category_.json diff --git a/courses/javascript/ex-1.md b/courses/javascript/ex-1.md deleted file mode 100644 index 45d3ecd4c..000000000 --- a/courses/javascript/ex-1.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: variables-in-javascript -sidebar_position: 1 -title: Variables in JavaScript -sidebar_label: Variables in JS ---- - -Hey, everyone! Welcome back to our site. I'm Ajay Dhangar, and today we're diving into a fundamental concept in JavaScript – Variables. Whether you're a beginner or looking for a refresher, this video is for you. So, let's get started! - - -```mermaid -graph TD - style A fill:#010,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style B fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style C fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style D fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style E fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style F fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - style G fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow; - - A[Main Content] --> B("1. What are Variables?") - A --> C("2. Variable Declaration and Types") - A --> D("3. Variable Assignment and Dynamic Typing") - A --> E("4. Scope and Hoisting") - A --> F("5. Save Code") - A --> G("6. Best Practices") - - B --> C - C --> D - D --> E - E --> F - F --> G -``` - -### Section 1: What are Variables? - -So, what exactly are variables? Well, think of them as containers. They're like labeled boxes that hold different types of information in your program. - - - -```mermaid -graph TD - subgraph Variables - style Variables fill:#f57,stroke:#333,stroke-width:2px, stroke:#262626; - A(Variable) - end - - B["Data Type (e.g., Number, String)"] - C["Variable Name (e.g., age, name)"] - - A -->|Stores| B - A -->|Named| C - - B -->|Assigned Value| D["Value (e.g., 25, 'John')"] - C -->|Used in Code| E["Code (e.g., age = 25; console.log(name);)"] - -``` - -In JavaScript, we use variables to store and manage data. They can represent numbers, text, or more complex structures. - - - -```mermaid -graph TD - subgraph Variables - style Variables fill:#f9f,stroke:#333,stroke-width:2px; - A[Variable] - end - - BoxStyle(e.g., var, let, const) - style BoxStyle fill:#fff,stroke:#333,stroke-width:2px; - - B["Number"] - C["String"] - D["Boolean"] - E["Array"] - F["Object"] - - A -->|=| B["10"] - A -->|=| C["'Hello, World!'"] - A -->|=| D["true"] - A -->|=| E["[1, 2, 3]"] - A -->|=| F["{ key: 'value', age: 25 }"] -``` - - -### Section 2: Variable Declaration and Types: - -Now, let's talk about how to declare variables and the different types available in JavaScript. - - - -```mermaid -graph TD - subgraph Variables - style Variables fill:#f9f,stroke:#333,stroke-width:2px; - A[let age = 18;] - end - - - B["if (age >= 18) {"] - C[" console.log('You are an adult.');"] - D["} else {"] - E[" console.log('You are a minor.');"] - - A -->|Variable Declaration| B - B -->|Condition Check| C - B -->|Alternative Path| D - D -->|Alternative Output| E - -``` - -You can declare variables using 'var,' 'let,' or 'const.' 'Var' has been around for a while, but with ES6, we got 'let' and 'const.' - - - - -'Let' and 'const' are block-scoped, which means they're confined to the block of code where they're declared, providing better control over your variables. - - - -### Section 3: Variable Assignment and Dynamic Typing: - -Once you've declared a variable, you can assign values to it. JavaScript is a dynamically typed language, so the type of a variable can change during runtime. - - - -This flexibility is powerful, but it's essential to be aware of the types of data your variables hold to avoid unexpected behavior. - - - - -### Section 4: Scope and Hoisting: - -Understanding the scope of your variables is crucial. 'Var' variables are function-scoped, while 'let' and 'const' are block-scoped. - - - -Also, there's something called hoisting, where variable declarations are moved to the top of their scope during the compilation phase. This can lead to some interesting scenarios. - - - - -### Section 5: Best Practices: - -Before we wrap up, let's talk about best practices. In modern JavaScript, it's recommended to use 'const' by default. If you know the value will change, then use 'let.' - - - -And please, let's leave 'var' behind. It's a bit outdated and can cause unexpected issues. - - - - - -### Conclusion: - -That wraps up our exploration of variables in JavaScript. Remember, they're the building blocks of your programs, so understanding them is key. If you found this video helpful, give it a thumbs up, subscribe for more content, and hit that notification bell. - - \ No newline at end of file diff --git a/docs/basics/_category_.json b/docs/basics/_category_.json new file mode 100644 index 000000000..1038a5ea0 --- /dev/null +++ b/docs/basics/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Basics concepts", + "position": 3, + "link": { + "type": "generated-index", + "description": "5 minutes to learn the most important RoadMap for Basic Concepts of programming." + } + } \ No newline at end of file diff --git a/docs/basics/javascript/_category_.json b/docs/basics/javascript/_category_.json new file mode 100644 index 000000000..5764d6672 --- /dev/null +++ b/docs/basics/javascript/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "JavaScript", + "position": 1, + "link": { + "type": "generated-index", + "description": "5 minutes to learn the most important RoadMap for JavaScript Mastery." + } + } \ No newline at end of file diff --git a/docs/basics/javascript/ex-1.md b/docs/basics/javascript/ex-1.md new file mode 100644 index 000000000..25a38139d --- /dev/null +++ b/docs/basics/javascript/ex-1.md @@ -0,0 +1,202 @@ +--- +id: variables-in-javascript +sidebar_position: 1 +title: Variables in JavaScript +sidebar_label: Variables in JS +--- + +import Authors from '../../../src/components/Authors' + +--- + +--- + +Hey, everyone! I'm Ajay Dhangar, and today we're delving into a fundamental concept in JavaScript – Variables. Whether you're a beginner or seeking a refresher, this comprehensive guide will provide you with a solid understanding of JavaScript variables. Let's jump right in! + +## 1. What are Variables? + +In the world of programming, variables act as containers. Think of them like labeled boxes that hold various types of information in your program. These containers allow you to store, retrieve, and manipulate data, providing the foundation for dynamic and interactive code. + +### Visualizing Variables + +```mermaid +graph TD + subgraph Variables + style Variables fill:#f57,stroke:#333,stroke-width:2px, stroke:#262626; + A(Variable) + end + + B["Data Type (e.g., Number, String)"] + C["Variable Name (e.g., age, name)"] + + A -->|Stores| B + A -->|Named| C + + B -->|Assigned Value| D["Value (e.g., 25, 'John')"] + C -->|Used in Code| E["Code (e.g., age = 25; console.log(name);)"] +``` + +In JavaScript, we use variables to store and manage data, representing numbers, text, or more complex structures. + +```mermaid +graph TD + subgraph Variables + style Variables fill:#f9f,stroke:#333,stroke-width:2px; + A[Variable] + end + + BoxStyle(e.g., var, let, const) + style BoxStyle fill:#fff,stroke:#333,stroke-width:2px; + + B["Number"] + C["String"] + D["Boolean"] + E["Array"] + F["Object"] + + A -->|=| B["10"] + A -->|=| C["'Hello, World!'"] + A -->|=| D["true"] + A -->|=| E["[1, 2, 3]"] + A -->|=| F["{ key: 'value', age: 25 }"] +``` + +:::tip Definition +In JavaScript, variables are containers that hold information, allowing you to reference and manipulate values within your code. Variables are fundamental to programming, enabling you to work with data dynamically. + +In programming, variables are used to store and manage data. They act as symbolic names for values. In JavaScript, you can declare variables using the `var`, `let`, or `const` keywords. + +1. `var`: + + - Historically used for variable declaration, but it has some scoping issues. + - Variables declared with `var` are function-scoped, meaning they are only accessible within the function where they are declared. + +2. `let`: + + - Introduced in ECMAScript 6 (ES6) to address the scoping issues of `var`. + - `let` allows block-scoping, meaning the variable is limited to the block (enclosed by curly braces) where it is defined. + +3. `const`: + + - Also introduced in ES6, `const` is used to declare constants. + - Constants cannot be reassigned after declaration. + - They are block-scoped like variables declared with let. +::: + +## 2. Variable Declaration and Types + +Now, let's explore how to declare variables and the different types available in JavaScript. + +### Variable Declaration + +```mermaid +graph TD + subgraph Variables + style Variables fill:#f9f,stroke:#333,stroke-width:2px; + A[let age = 18;] + end + + B["if (age >= 18) {"] + C[" console.log('You are an adult.');"] + D["} else {"] + E[" console.log('You are a minor.');"] + + A -->|Variable Declaration| B + B -->|Condition Check| C + B -->|Alternative Path| D + D -->|Alternative Output| E +``` + +In JavaScript, you can declare variables using 'var,' 'let,' or 'const.' While 'var' has been around for a while, ES6 introduced 'let' and 'const.' + +**Comparison of 'var,' 'let,' and 'const':** + +```javascript +// Using var (function-scoped) +var x = 10; + +// Using let (block-scoped, reassignable) +let y = 'Hello'; + +// Using const (block-scoped, not reassignable) +const pi = 3.14; +``` + +### Variable Assignment and Dynamic Typing + +Once a variable is declared, you can assign values to it. JavaScript's dynamic typing allows the type of a variable to change during runtime. + +**Example of Variable Assignment and Dynamic Typing:** + + + +This flexibility is powerful, but it's crucial to be aware of the data types your variables hold to avoid unexpected behavior. + +## 3. Scope and Hoisting + +Understanding the scope of variables is crucial for writing robust and error-free code. JavaScript has function-scoped variables with 'var' and block-scoped variables with 'let' and 'const.' + +### Scope + +Scope defines the context in which variables are accessible. Let's explore function and block scope. + +```javascript +function exampleScope() { + if (true) { + var localVar = "I'm accessible inside the function"; + let blockVar = "I'm accessible only in this block"; + } + console.log(localVar); // Accessible + console.log(blockVar); // Error: blockVar is not defined +} +``` + +### Hoisting + +Variable and function declarations are hoisted to the top of their containing scope during compilation. + +```javascript +console.log(hoistedVar); // Outputs undefined +var hoistedVar = "I am hoisted!"; +``` + +## 4. Save Code + +To organize and reuse code effectively, consider saving reusable portions as functions or modules. This approach promotes maintainability and helps avoid redundancy. + +```javascript +// Example function +function greet(name) { + return `Hello, ${name}!`; +} + +// Using the function +let message = greet("Algo"); +console.log(message); // Outputs: Hello, Algo! +``` + +## 5. Best Practices + +Before we wrap up, let's discuss some best practices for working with variables in JavaScript. + +### Use `const` by Default + +In modern JavaScript, it's recommended to use `const` by default. If you know the value will change, then use `let`. + +```js +const maxAttempts = 3; +let currentAttempts = 0; +``` + +### Avoid `var` + +The `var` keyword is outdated and can lead to unexpected issues. Prefer `let` and `const` for better-scoped variables. + +```js +var oldWay = "I'm using var."; + +let modernWay = "I'm using let."; +``` + +***Congratulations! You've now gained a comprehensive understanding of variables in JavaScript.*** + diff --git a/docs/basics/javascript/ex-2.md b/docs/basics/javascript/ex-2.md new file mode 100644 index 000000000..759e43b56 --- /dev/null +++ b/docs/basics/javascript/ex-2.md @@ -0,0 +1,100 @@ +--- +id: datatype-in-javascript +sidebar_position: 2 +title: Data Type in JavaScript +sidebar_label: Data Type in JS +--- + +import Authors from '../../../src/components/Authors' + +--- + +--- + +## 1. **Primitive Data Types:** + These are the basic building blocks of data. + + ### String: + - A sequence of characters. + - Defined with single (' ') or double (" ") quotes. + ```javascript + let greeting = "Hello, World!"; + ``` + + ### Number: + - Represents both integers and floating-point numbers. + - No distinction between integers and floats. + ```javascript + let age = 25; + let price = 19.99; + ``` + + ### Boolean: + - Represents either `true` or `false`. + ```javascript + let isStudent = true; + ``` + + ### Undefined: + - Variable declared but not assigned. + ```javascript + let undefinedVar; + ``` + + ### Null: + - Represents the intentional absence of any object value. + ```javascript + let nullVar = null; + ``` + + ### Symbol (ES6 and later): + - Provides a unique value, often used as identifiers. + ```javascript + let id = Symbol('id'); + ``` + +## 2. **Composite Data Types:** + These are used to store collections of data. + + ### Array: + - Ordered list of values, accessed by index. + ```javascript + let colors = ['red', 'green', 'blue']; + ``` + + ### Object: + - Unordered collection of key-value pairs. + ```javascript + let person = { + name: 'John', + age: 30, + isStudent: false + }; + ``` + +## 3. **Special Data Types:** + ### Function: + - A reusable block of code. + ```javascript + function addNumbers(a, b) { + return a + b; + } + ``` + +## 4. **Type Coercion:** + - JavaScript automatically converts one data type to another when needed. + ```javascript + let numString = "10"; + let num = 5; + + console.log(numString + num); // "105" (string concatenation) + ``` + +## 5. **Checking Data Types:** + - Use `typeof` operator to check the data type of a variable. + ```javascript + let name = "John"; + console.log(typeof name); // "string" + ``` + +Understanding these data types is crucial for effective programming in JavaScript. They help you organize and manipulate data in your applications. \ No newline at end of file diff --git a/docs/basics/javascript/ex-3.md b/docs/basics/javascript/ex-3.md new file mode 100644 index 000000000..1286808c0 --- /dev/null +++ b/docs/basics/javascript/ex-3.md @@ -0,0 +1,12 @@ +--- +id: operator-in-javascript +sidebar_position: 3 +title: Operator in JavaScript +sidebar_label: Operator in JS +--- + +import Authors from '../../../src/components/Authors' + +--- + +--- \ No newline at end of file diff --git a/docs/data-structures/_category_.json b/docs/data-structures/_category_.json new file mode 100644 index 000000000..0c4f7a986 --- /dev/null +++ b/docs/data-structures/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Data Structure", + "position": 4, + "link": { + "type": "generated-index", + "description": "5 minutes to learn the most important RoadMap for React Mastery." + } + } \ No newline at end of file diff --git a/docs/data-structures/arrays/ex-1.md b/docs/data-structures/arrays/ex-1.md index 5e85ffc9b..9e1577daf 100644 --- a/docs/data-structures/arrays/ex-1.md +++ b/docs/data-structures/arrays/ex-1.md @@ -7,8 +7,12 @@ sidebar_label: Basics of arrays import Authors from '../../../src/components/Authors' +--- + +--- + ### Definition: An array is a fundamental data structure that stores a collection of elements, each identified by an index or a key. The elements are stored in contiguous memory locations, making it efficient to access, insert, or delete elements based on their position. diff --git a/docs/data-structures/arrays/ex-2.md b/docs/data-structures/arrays/ex-2.md index b791f0d54..c01fd09f8 100644 --- a/docs/data-structures/arrays/ex-2.md +++ b/docs/data-structures/arrays/ex-2.md @@ -5,3 +5,8 @@ title: Operations on arrays sidebar_label: Operations on arrays --- +import Authors from '../../../src/components/Authors' + +--- + +--- \ No newline at end of file diff --git a/docs/data-structures/intro.md b/docs/data-structures/intro.md index f6eb6cab2..1fa079598 100644 --- a/docs/data-structures/intro.md +++ b/docs/data-structures/intro.md @@ -5,6 +5,13 @@ title: Introduction to Data Structures sidebar_label: Introduction --- +import Authors from '../../src/components/Authors' + +--- + + + +--- ## 1. What are Data Structures? diff --git a/docs/intro.md b/docs/intro.md index 4fee3bf49..b32f6d793 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -5,6 +5,14 @@ title: Gateway to DSA Mastery! sidebar_label: Welcome to Algo --- +import Authors from '../src/components/Authors' + +--- + + + +--- + ## The Power of Algorithms and Data Structures Are you ready to embark on a journey of logic, problem-solving, and algorithmic brilliance? Welcome to Algo, your ultimate destination for mastering Data Structures and Algorithms (DSA). Whether you're a coding enthusiast, a student, or a professional looking to enhance your programming skills, Algo is here to guide you through the intricate world of DSA. diff --git a/docs/myMarkdownFile.mdx b/docs/myMarkdownFile.mdx index 49af768f0..b57131c4c 100644 --- a/docs/myMarkdownFile.mdx +++ b/docs/myMarkdownFile.mdx @@ -1,3 +1,12 @@ + +import Authors from '../src/components/Authors' + +--- + + + +--- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; diff --git a/src/pages/index.js b/src/pages/index.js index a8c47df36..aa6709894 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -21,7 +21,7 @@ function HomepageHeader() { - Algo Tutorial - 5min ⏱️ + Get Started DSA journey