javascript docs addded

docs/javascript/Client-side-Frameworks.md

@@ -0,0 +1,75 @@
+---
+id: Client-side-frameworks
+title: Client side Frameworks of js
+sidebar_label: Client-side Frameworks
+sidebar_position: 42
+tags:
+  [ JavaScript, Framework,React , Ember , Angular , Web-Framework , Component , js-components , JS, js-frameworks ]
+description: "In this tutorial, we will learn about the best practices in JavaScript. We will learn about the coding standards, recommendations, conventions, rules, linting, ESLint, Prettier."
+---
+# Introduction to Client-side Frameworks
+
+Client-side frameworks have revolutionized web development, providing developers with powerful tools to build interactive and dynamic web applications. This comprehensive guide offers an in-depth overview of the history of JavaScript and frameworks, the major frameworks available, their purposes, considerations for choosing the right one, and alternatives to client-side frameworks.
+
+## Prerequisites
+Before diving into client-side frameworks, it's essential to have a solid understanding of the core web technologies, including HTML, CSS, and JavaScript. Familiarity with programming concepts and principles will also be beneficial.
+
+## Objective
+The objective of this guide is to equip developers with a thorough understanding of client-side frameworks, enabling them to make informed decisions about which framework to use for their projects. By the end of this guide, developers should feel confident in their ability to navigate the landscape of client-side frameworks and select the most suitable option for their needs.
+
+## A Brief History
+
+JavaScript, introduced in 1996, marked a pivotal moment in web development by enabling interactivity in web pages. As web applications became more complex, developers sought ways to manage the growing complexity. This led to the emergence of frameworks, which provided structured solutions to common development challenges.
+
+Over the years, JavaScript frameworks have evolved significantly, with new frameworks emerging and existing ones undergoing major updates. Today, there are numerous client-side frameworks available, each with its own unique features, advantages, and use cases.
+
+## Major Frameworks
+
+### Ember
+- **Release:** December 2011
+- **Description:** Ember is a mature framework derived from the SproutCore project. While it may have fewer users compared to newer alternatives, it offers stability, extensive community support, and follows clever coding principles. Ember's convention over configuration approach simplifies development by providing a predefined structure for applications.
+
+### Angular
+- **Release:** September 14, 2016
+- **Description:** Angular, developed by Google, is a comprehensive web application framework. It emphasizes component-based architecture, declarative HTML templates, and uses TypeScript to enhance developer productivity. Angular's dependency injection system and built-in features such as routing and form validation make it suitable for building large-scale applications.
+
+### Vue
+- **Release:** 2014
+- **Description:** Vue, created by Evan You, has gained popularity for its simplicity and flexibility. It extends HTML with modern JavaScript features and provides reactive data binding and component-based architecture. Vue's progressive nature allows developers to incrementally adopt its features, making it suitable for both small projects and large-scale applications.
+
+### React
+- **Release:** 2013
+- **Description:** React, developed by Facebook, is a library for building user interfaces. While technically not a framework, it is commonly used with ReactDOM to create dynamic web and mobile applications. React's component-based architecture and virtual DOM abstraction enable efficient rendering and seamless updates to the UI. React's ecosystem, including tools like Redux and React Router, provides comprehensive solutions for building complex applications.
+
+![Frameworks Image](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYitYe9CV_iVxq_yOMgLEGv7uV-755TXgLVA&s)
+
+## Why Frameworks Exist
+
+Frameworks address the challenges of modern software development by providing structure, conventions, and reusable components. They enable developers to manage application state, handle data flow, and update the UI efficiently.
+
+### The Verbosity of DOM Changes
+Manipulating the Document Object Model (DOM) to reflect changes in application state often results in verbose code. Frameworks abstract away DOM manipulation, simplifying the development process and reducing boilerplate code. By providing abstractions for common tasks such as state management, routing, and data fetching, frameworks enable developers to focus on building features rather than writing repetitive code.
+
+## How to Choose a Framework
+
+Selecting the right framework requires careful consideration of various factors, including project requirements, team expertise, and community support. Here are some key questions to consider:
+
+1. **Browser Support:** Ensure the framework supports the browsers targeted for your application. Consider compatibility with older browsers if your audience includes users with diverse browser preferences.
+
+2. **Languages:** Evaluate the framework's use of domain-specific languages such as TypeScript and its impact on development workflow. TypeScript offers static typing and other features that can enhance code quality and maintainability but may require additional learning for developers unfamiliar with the language.
+
+3. **Community and Documentation:** Assess the strength of the framework's community support, availability of documentation, and additional resources. A vibrant community can provide valuable support, resources, and contributions to the framework's ecosystem, making it easier for developers to troubleshoot issues, learn new concepts, and stay updated on best practices.
+
+## Alternatives to Client-side Frameworks
+
+While client-side frameworks offer powerful capabilities, they may not be suitable for every project. Consider alternative approaches to web development, such as:
+
+- **Content Management Systems (CMS):** Utilize platforms like WordPress or Joomla for content-driven websites. CMS platforms provide pre-built solutions for managing content, user authentication, and other common website features, reducing the need for custom development.
+
+- **Server-side Rendering (SSR):** Improve initial page load times by rendering HTML on the server. SSR frameworks like Next.js and Nuxt.js enable developers to build server-rendered applications with JavaScript, offering the benefits of client-side interactivity while ensuring fast initial page loads and improved SEO.
+
+- **Static Site Generators (SSG):** Generate static HTML files for simple, fast-loading websites. SSG tools like Gatsby and Hugo enable developers to build websites using modern web development techniques such as React and Vue, while generating static HTML files that can be served efficiently from a content delivery network (CDN).
+
+## Summary
+
+Client-side frameworks have transformed web development, providing efficient solutions for building dynamic and interactive applications. By understanding the history, purpose, and available options of frameworks, developers can make informed decisions and leverage the right tools for their projects. Dive into the world of frameworks with enthusiasm, prepared to explore, learn, and innovate! Whether you choose Ember, Angular, Vue, React, or explore alternative approaches, the possibilities for web development are limitless.

docs/javascript/array-methods.md

@@ -0,0 +1,167 @@
+---
+id: array-methods
+title: Array methods in JavaScript 
+sidebar_label: Array-methods
+sidebar_position: 18
+tags: [JavaScript, Arrays, Array Methods,Array length, Array Slice ]
+description: "This tutorial demonstrates how to use  Array methods in JavaScript with Example"
+---
+
+# JavaScript Array Methods
+
+JavaScript provides a variety of methods to manipulate and work with arrays efficiently. Here is a comprehensive overview of some basic and essential array methods.
+
+## Basic Array Methods
+
+### Array `length`
+
+The `length` property returns the length (size) of an array.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let size = fruits.length;
+console.log(size); // Output: 4
+```
+
+### Array `toString()`
+
+The `toString()` method converts an array to a string of comma-separated array values.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+console.log(fruits.toString()); // Output: "Banana,Orange,Apple,Mango"
+```
+
+### Array `at()`
+
+The `at()` method returns the element at the specified index. It also supports negative indexing.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let fruit = fruits.at(2);
+console.log(fruit); // Output: "Apple"
+```
+
+**Note:**
+Many languages allow negative bracket indexing like `[-1]` to access elements from the end of an array. This is not possible in JavaScript using `[]` because `[]` is used for accessing both arrays and objects. The `at()` method, introduced in ES2022, solves this problem.
+
+### Array `join()`
+
+The `join()` method joins all array elements into a string. You can specify a separator.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+console.log(fruits.join(" * ")); // Output: "Banana * Orange * Apple * Mango"
+```
+
+## Popping and Pushing
+
+When you work with arrays, it is easy to remove elements and add new elements.
+
+### JavaScript Array `pop()`
+
+The `pop()` method removes the last element from an array and returns it.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let fruit = fruits.pop();
+console.log(fruit); // Output: "Mango"
+console.log(fruits); // Output: ["Banana", "Orange", "Apple"]
+```
+
+### JavaScript Array `push()`
+
+The `push()` method adds a new element to an array (at the end).
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits.push("Kiwi");
+console.log(fruits); // Output: ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
+```
+
+## Shifting Elements
+
+Shifting is equivalent to popping, but working on the first element instead of the last.
+
+### JavaScript Array `shift()`
+
+The `shift()` method removes the first array element and "shifts" all other elements to a lower index.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits.shift();
+console.log(fruits); // Output: ["Orange", "Apple", "Mango"]
+```
+
+### JavaScript Array `unshift()`
+
+The `unshift()` method adds a new element to an array (at the beginning), and "unshifts" older elements.
+
+**Example:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits.unshift("Lemon");
+console.log(fruits); // Output: ["Lemon", "Banana", "Orange", "Apple", "Mango"]
+```
+
+## JavaScript Array `delete`
+
+**Warning!** Using `delete` leaves `undefined` holes in the array. Use `pop()` or `shift()` instead.
+
+## Merging Arrays (Concatenating)
+
+In programming languages, concatenation means joining strings end-to-end. Concatenating arrays means joining arrays end-to-end.
+
+### JavaScript Array `concat()`
+
+The `concat()` method creates a new array by merging (concatenating) existing arrays.
+
+**Example (Merging Two Arrays):**
+```javascript
+const myGirls = ["Cecilie", "Lone"];
+const myBoys = ["Emil", "Tobias", "Linus"];
+const myChildren = myGirls.concat(myBoys);
+console.log(myChildren); // Output: ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]
+```
+:::info Note
+
+The `concat()` method does not change the existing arrays. It always returns a new array and can take any number of array arguments.
+
+:::
+
+**Example (Merging Three Arrays):**
+```javascript
+const arr1 = ["Cecilie", "Lone"];
+const arr2 = ["Emil", "Tobias", "Linus"];
+const arr3 = ["Robin", "Morgan"];
+const myChildren = arr1.concat(arr2, arr3);
+console.log(myChildren); // Output: ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Morgan"]
+```
+
+### Array `copyWithin()`
+
+The `copyWithin()` method copies array elements to another position in an array.
+
+**Example: Copy to index 2, all elements from index 0:**
+```javascript
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits.copyWithin(2, 0);
+console.log(fruits); // Output: ["Banana", "Orange", "Banana", "Orange"]
+```
+
+
+Additional methods and their usage:
+
+- Array `slice()`
+- Array `splice()`
+- Array `toSpliced()`
+- Array `flat()`
+
+These methods provide additional flexibility and functionality when working with arrays in JavaScript.