JavaScript Concepts & Practical Examples

A comprehensive repository documenting JavaScript concepts with practical examples and hands-on practice files. This collection covers everything from core language fundamentals to browser APIs and modern asynchronous programming patterns.

📚 Repository Structure

📖 Documentation (docs/)

1. JavaScript Language Fundamentals (1_javascript_language/)

Core JavaScript concepts with detailed explanations:

• overview.md - JavaScript language overview and introduction
• code_fundamentals.md - Basic programming concepts and syntax
• javascript_execution_model.md - How JavaScript code executes
• data_types.md - Primitive and reference types
• objects_in_js.md - Object creation, manipulation, and patterns
• special_notes_on_types.md - Type coercion, comparison, and edge cases
• expressions_and_scope.md - Variable scope, hoisting, and expressions
• basic_syntax_extended.md - Advanced syntax features
• object_oriented_js.md - Classes, inheritance, and OOP patterns
• promises_async_await.md - Asynchronous programming patterns
• modules.md - ES6 modules and module patterns
• additionals.md - Additional concepts and advanced topics

2. Browser & DOM APIs (2_Browser_document_event_interfaces/)

Browser-specific JavaScript features and APIs:

• Document.md - DOM manipulation and document interface
• coordinates.md - Working with element positioning and coordinates
• events.md - Event handling and event-driven programming
• drawing_on_canvas.md - HTML5 Canvas API and graphics
• stylesAndClasses.md - Dynamic styling and CSS manipulation
• browser_and_storage.md - Local storage, session storage, and cookies
• forms.md - Form handling and validation

3. Additional Topics (3_Additional/)

Extended concepts and modern web development:

• Fetch.md - Fetch API and HTTP requests
• event_loops.md - JavaScript event loop and concurrency model
• network_requests.md - Various methods of making network requests
• basic_animations.md - CSS and JavaScript animations

💻 Practical Examples (practice/)

Browser & DOM Practice (Browser_document_event_interfaces/)

Interactive examples demonstrating browser APIs:

• Cookie Management: cookie.html, cookie.js - Working with browser cookies
• Canvas Drawing: draw.html, draw.js, drawStyles.css - HTML5 Canvas examples
• Form Handling: form.html, form.js - Form validation and processing
• DOM Manipulation: index.html, index.js, indexStyles.css - Basic DOM operations
• Fetch API: randomFetch.html, randomFetch.js - HTTP requests and API calls
• Web Storage: storage.html, storage.js - Local and session storage examples

Additional Concepts (additionals/)

Advanced topics with practical implementations:

• Animations: basic_animation.html, basicAnimationStyles.css - CSS/JS animations
• Network Requests: network.html, network.js - Various networking approaches

Core JavaScript Practice (javascript_language/)

Hands-on examples of JavaScript language features:

• JSON.js - JSON parsing and manipulation
• Map&Set.js - ES6 Map and Set data structures
• asyncAwait.js - Async/await patterns and examples
• callAndBind.js - Function context manipulation
• callback.js - Callback patterns and higher-order functions
• classes.js - ES6 classes and inheritance
• closure.js - Closures and lexical scoping
• destructure.js - Destructuring assignment patterns
• functions.js - Function declarations, expressions, and arrow functions
• newFunction.js - Function constructor and dynamic functions
• objectEntries.js - Object iteration and manipulation methods
• objects.js - Object creation patterns and methods
• promiseAPIs.js - Promise utility methods and patterns
• promises.js - Promise creation and chaining
• this.js - Context binding and 'this' keyword
• variableScope.js - Variable scoping examples
• test.js - Testing and experimentation file

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/rashidpbi/js-practice.git
   cd js-practice

2. Explore the documentation: Start with docs/1_javascript_language/overview.md for a comprehensive introduction.

3. Run the examples: Open any HTML file in the practice/ directory in your browser to see the concepts in action.

4. Experiment: Use the JavaScript files in practice/javascript_language/ to experiment with core concepts.

📋 Learning Path

Beginner

1. Start with docs/1_javascript_language/ - read through the fundamentals
2. Practice with files in practice/javascript_language/
3. Experiment with basic DOM manipulation using practice/Browser_document_event_interfaces/index.html

Intermediate

1. Dive into asynchronous programming with promises and async/await examples
2. Explore browser APIs and storage mechanisms
3. Practice with fetch API and network requests

Advanced

1. Study the event loop and execution model
2. Work with canvas drawing and animations
3. Explore advanced object-oriented patterns and modules

🛠️ Technologies Covered

• Core JavaScript (ES5/ES6+)
• DOM Manipulation
• HTML5 APIs (Canvas, Storage, etc.)
• Asynchronous Programming (Promises, Async/Await)
• Modern JavaScript Features (Classes, Modules, Destructuring)
• Browser APIs (Fetch, Events, Coordinates)
• Web Storage (LocalStorage, SessionStorage, Cookies)

📝 Contributing

This repository serves as a personal learning collection, but feel free to:

• Suggest improvements or corrections
• Share additional examples or use cases
• Report any issues or outdated information

📄 License

This project is open source and available for educational purposes.

---

Happy Learning! 🎓

This repository is continuously updated as new concepts are learned and practiced.