initial

2026-11-04 00:33:23 +05:30 · 2026-11-04 00:33:23 +05:30 · 74ae93a96e
commit 74ae93a96e
1 changed files with 94691 additions and 0 deletions
--- a/Development/Javascript/Basics.md
+++ b/Development/Javascript/Basics.md
@ -0,0 +1,121 @@
+Basics
+https://www.w3schools.com/js/js_htmldom_document.asp
+- DOM manipulation
+    - To remove a node
+  use `formElement.remove()`
+    - To append at last
+  `formElement.appendChild()`
+  - `remove` only needs a reference to the child. `removeChild` needs a reference both to the parent and the child. The result is identical.
+    document.body.removeChild(formElement). here body is  upper section where formElement is lower one
+  - replaceChild(new, old)
+  - finding through collections : instead of finding though css selectors we can find through collections like body,head,forms,images,links. So to find form element through id use
+    `const x = document.forms["frm1"];` 
+	here `frm1` is id
+  - `insertBefore(newNode,referenceNode)` : insert new node before refernce node
+    ```js
+	 // Get a reference to the parent node
+  	const parentDiv = document.getElementById("childElement").parentNode;
+
+	  // Begin test case [ 1 ] : Existing childElement (all works correctly)
+	  let sp2 = document.getElementById("childElement");
+	  parentDiv.insertBefore(newNode, sp2);
+	```
+  - `insertAfter(newnode,referenceNode)` : insert new node after refernce node
+    we can create it by
+	```js
+	 function insertAfter(newNode, existingNode) {
+            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
+        }
+	```
+  - Insert at first position
+    `document.body.insertBefore(formElement,document.body.children[0])`
+  - access child and parent element
+     formElement.children => array of nodes
+	 formElement.parentElement => node
+   - write vs appendChild 
+     https://stackoverflow.com/questions/22172589/document-write-vs-appendchild
+	 There is a difference between sequence. appendChild will execute on last but write during the stream
+	 eg:
+	 index1.html
+		```html
+		<script>
+		console.log('1');
+		 var script = document.createElement('script');
+		 script.src = 'someScript.js';
+		 document.write(script.outerHTML);
+		</script>
+		<script>
+		console.log('3');
+		</script>
+		```
+		&nbsp;
+		index2.html
+		```html
+		<script>
+		console.log('1');
+		 var script = document.createElement('script');
+		 script.src = 'someScript.js';
+		 document.body.appendChild(script);
+		</script>
+		<script>
+		console.log('3');
+		</script>
+		```
+		Output in 1st case will be `1,2,3` and in second case will be `1,3,2`.
+	
+   - html
+   innerHTML, innerText, textContent,outerHTML
+   unlike innerHTML, outerHTML also include the outer structure too
+   eg
+	 ```js
+	 const div = document.createElement('div')
+	 div.innerHTML= `<p> Hello </p>`
+	 console.log(div.outerHTML) // outputs div and its innerHTML both
+	 ```
+	  &nbsp;
+
+js maps
+```js
+const map = new Map();
+
+map.set("a", 1);
+map.set("b", 2);
+map.set("c", 3);
+
+console.log(map.get("a"));
+// Expected output: 1
+
+map.set("a", 97);
+
+console.log(map.get("a"));
+// Expected output: 97
+
+console.log(map.size);
+// Expected output: 3
+
+map.delete("b");
+
+console.log(map.size);
+// Expected output: 2
+```
+
+forEach is also supported in maps in latest version of js, in old versions they may not be supported so use 
+`[...mapVariable].forEach` instead of `mapVariable.forEach`
+
+&nbsp;
+
+collect all arrays from something and also being unique
+```js
+
+
+const VIDEOS = [
+  {
+    folder: "Nature Docs",
+    title: "Coral Reef at Dawn",
+    tags: ["ocean", "wildlife", "4k"],
+    url: "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+  },
+]
+
+const allTags = [...new Set(VIDEOS.flatMap((v) => v.tags))].sort();
+```