In this GitHub repository, you can learn or revise JavaScript from scratch with simple examples. The JavaScript concepts are divided into proper chapters and sub-chapters for easy navigation.
You can download or clone this repository to start working with it. Here are two methods you can use:
- Using GitHub CLI 🚀 If you have the GitHub CLI installed, you can clone this repository using the following command:
gh repo clone MashoodAli-Official/JavaScript-From-Scratch
- Using HTTPS 🔗 If you prefer using HTTPS, use this command:
git clone https://github.com/MashoodAli-Official/JavaScript-From-Scratch.git
- After cloning the repository, navigate to the project directory:
cd JavaScript-From-Scratch
- Create a new branch to make your changes. This helps keep your changes organized and makes it easier to manage contributions:
git checkout -b your-branch-name
- Make the changes you want to the files in the repository.
- Add and commit your changes:
git add .
git commit -m "Description of your changes"
- Push the changes to your branch on GitHub:
git push origin your-branch-name
Once your changes are pushed, open a Pull Request on GitHub to merge your changes into the main branch. The repository maintainers will review your PR and merge it if everything looks good.
In the first chapter of this repository, you will learn the basics of JavaScript with complete basic concepts and code examples. For better understanding, it is recommended to review the code and check the console in the browser.
This chapter includes 24 separate sub-chapters/modules, covering a range of topics to get you started with JavaScript.
- 01-Comments
- 02-Variables
- 03-Prompt
- 04-Functions
- 05-String
- 06-ArithmeticOperators
- 07-Comparison
- 08-LogicalOperators
- 09-AssignmentOperators
- 10-TernaryOperator
- 11-TypeOFOperators
- 12-ConditionalStatement
- 13-SwitchStatement
- 14-ForLoops
- 15-ForInLoop
- 16-WhileLoop
- 17-DoWhileLoop
- 18-AdvancedLoop
- 19-Events
- 20-Cookies
- 21-PageRedirect
- 22-DialogBoxes
- 23-VoidOperator
- 24-PrintingThePage
Chapter 2 provides a thorough explanation of JavaScript objects, classes using clear and easy-to-understand code examples.
- 01-NumberObject
- 02-BooleanObject
- 03-StringObject
- 04-DateObject
- 05-Regular Expression
- 06-Arrays
- 07-MathsObject
- 08-DOM
- 09-Classes
- 10-ClassVariable
- 11-ClassFunction
- 12-StaticFunction
- 13-InstanceOf Operators
- 14-Class Inheritance
- 15-Method Overriding
- 16-SuperKeyword
This chapter dives into advanced JavaScript concepts and techniques essential for building robust and interactive applications. It covers error handling, validation, and multimedia controls, and explores advanced topics such as modules, scope, and hoisting. By mastering these topics, developers can write cleaner, more efficient, and maintainable JavaScript code.
- 01-Exception/Error Handling
- 02-Validation
- 03-Animation
- 04-Multimedia control
- 05-Modules
- 06-Maps
- 07-Maps Methods
- 08-Scope
- 09-Hoisting
- 10-ArrowFunction
- 11-URI
- 12-Template Literals
- 13-Set Collection
- 14-AJAX in Javascript
This chapter covers asynchronous programming in JavaScript, a crucial skill for managing tasks that take time to complete, such as data fetching and server requests. Understanding asynchronous concepts allows developers to handle these tasks effectively, keeping applications responsive and improving user experience. Key techniques like callbacks, promises, and async/await are introduced to manage asynchronous code in a clean, predictable way.
- 01-CallBack Function
- 02-Asynchronous Function
- 03-Promise (Promise Object)
- 04-Async Await
This chapter explores the concept of hoisting in JavaScript, a behavior that affects the accessibility of variables and functions before they are declared. Understanding hoisting is key to avoiding unexpected behaviors in code and ensuring that variables and functions are used in a predictable way. This chapter covers how JavaScript moves declarations to the top of their scope and how this impacts variables and functions.
- 01-Hoisting
- 02-Variable Hoisting
- 03-Function Hoisting
In this chapter, you'll learn about different types of functions and how they enhance programming flexibility and efficiency. Discover the basics of simple functions, the use of anonymous and arrow functions for more concise code, and the Function Constructor for dynamic function creation. Each type offers unique advantages for structuring your code effectively.
- 01-Simple Function
- 02-Anonymous Function
- 03-Arrow Function
- 04-Function Constructor
- 01-Simple-OOP-Intro OOP is a way of programming using objects to organize data and behavior.
- 02-ClassesAndObjects Class: A blueprint for creating objects. Object: A specific item created from a class.
- 03-Encapsulation Hiding details and protecting data inside an object.
- 04-Abstraction Showing only important features, hiding unnecessary details.
- 05-Inheritance A way for one class to reuse and extend another class.
- 06-Polymorphism The ability to use the same action in different ways for different objects.
- 01- Simple intro of memory management Managing how a program uses memory to store and free data efficiently.
- 02- Stack and heap Stack: Fast, for short-term data (e.g., function calls). Heap: Slower, for long-term data (e.g., objects).
- 03-Pure Function A function that doesn’t change external data and gives the same result for the same input.
- 01-High Order Function A function that either takes other functions as arguments, returns a function, or both.
- 02-Pure Function A function that always returns the same output for the same input and has no side effects (does not change anything outside its scope).
Immutability in JavaScript means an object's state cannot be changed after it's created. Instead of modifying the original, a new object or value is created when updates are needed.
- 01-Background Color Change
- 02-Clock
- 03-Counter
- 04-Letter Counter
- 05-Show hide text
- 06-Simple Even and odd checker
- 07-Number Doubler
- 08-Simple-Search
- 09-Word-Reverse
- 10-Password-Strength-Checker
- 11-Stop-Watch
- 12-Password-Strength-Checker
- 13-Palindrome-Checker
- 14-Tip-Calculator
- 15-Emoji-Picker
- 16-Digital-Dice-Game