advance javascript done

Wcoder547 · Wcoder547 · commit c2715069cd3c · 2024-06-23T11:23:11.000+05:00
diff --git a/09_advance_One/index.html b/09_advance_One/index.html
@@ -25,7 +25,7 @@ <h1>ajax programing</h1>
     // d8 folder must see line 104
     // console.log(XMLDocument);
     // console.log(XMLHttpRequest);
-    const requestUrl = "https://api.github.com/users/hiteshchoudhary";
+    const requestUrl = "https://api.github.com/users/wcoder547";
     const xhr = new XMLHttpRequest();
     xhr.open("GET", requestUrl);
     xhr.onreadystatechange = function () {
diff --git a/10_object_oriented_programing/bind.htm b/10_object_oriented_programing/bind.htm
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React</title>
+  </head>
+  <body>
+    <button>button clicked</button>
+  </body>
+  <script>
+    console.log("dr mashoor gulati is speaking");
+    class React {
+      constructor() {
+        this.library = "React";
+        this.server = "https://localhost:3000";
+        document
+          .querySelector("button")
+          .addEventListener("click", this.hadnleclick.bind(this));
+      }
+
+      hadnleclick() {
+        console.log("this button is clicked");
+        console.log(this); //before bind this present the context in which this calling wich means that button it return a button ..
+        //but after giving bind(this) this context change and it give us complete class ...
+      }
+    }
+
+    const app = new React();
+  </script>
+</html>
diff --git a/10_object_oriented_programing/call.js b/10_object_oriented_programing/call.js
@@ -0,0 +1,14 @@
+function setUserName(username) {
+  //console.log("called");
+  //   console.log(this);
+  this.username = username;
+}
+function createUser(username, email, password) {
+  setUserName.call(this, username);
+  this.email = email;
+  this.password = password;
+}
+
+const chai = new createUser("waseemakram", "mw5667155@gmail.com", 123);
+
+console.log(chai);
diff --git a/10_object_oriented_programing/classes.js b/10_object_oriented_programing/classes.js
@@ -0,0 +1,40 @@
+// // //ES6
+// // console.log("is js working")
+
+// class user {
+//   constructor(username, email, password) {
+//     this.username = username;
+//     this.email = email;
+//     this.password = password;
+//   }
+
+//   encrytPassword() {
+//     return `${this.password}abc`;
+//   }
+//   changeUserName() {
+//     return `${this.username.toUpperCase()}`;
+//   }
+// }
+
+// const fc1 = new user("wcoder547", "malik@gmail.com", 234);
+// console.log(fc1.changeUserName());
+// console.log(fc1.encrytPassword());
+
+//behind the scenes
+
+function user(username, email, password) {
+  this.username = username;
+  this.email = email;
+  this.password = password;
+}
+
+user.prototype.encrytPassword = function () {
+  return `${this.password}abc`;
+};
+user.prototype.changeUserName = function () {
+  return `${this.username.toUpperCase()}`;
+};
+
+const fc2 = new user("waseemmalik547", "hafiz@gmail.com", 234);
+console.log(fc2.encrytPassword());
+console.log(fc2.changeUserName());
diff --git a/10_object_oriented_programing/getter_setter.js b/10_object_oriented_programing/getter_setter.js
@@ -0,0 +1,16 @@
+// console.log("this is user1");
+
+class user {
+  constructor(username, password) {
+    this.username = username;git
+    this.password = password;
+  }
+  get password() {
+    return this._password.toUpperCase();
+  }
+  set password(value) {
+    this._password = value;
+  }
+}
+const user1 = new user("waseem", 123);
+console.log(user.password);
diff --git a/10_object_oriented_programing/inheritance.js b/10_object_oriented_programing/inheritance.js
@@ -0,0 +1,33 @@
+//=========================INHERITANCE ========================
+
+class user {
+  constructor(username) {
+    this.username = username;
+  }
+  logIn() {
+    console.log(`the user login is : ${this.username}`);
+  }
+}
+
+class Teacher extends user {
+  constructor(username, email, password) {
+    super(username);
+    this.email = email;
+    this.password = password;
+  }
+  addCourse() {
+    console.log(`this course is added by : ${this.username}`);
+  }
+}
+
+const teach1 = new Teacher("coffee", "coffee@gmail.com", 123);
+teach1.addCourse();
+teach1.logIn();
+
+const us1 = new user("vin252");
+us1.logIn();
+
+console.log(teach1 === us1); //false
+console.log(us1 === user); //false
+console.log(us1 instanceof user); //true
+console.log(teach1 instanceof Teacher); //True..
diff --git a/10_object_oriented_programing/mathpi.js b/10_object_oriented_programing/mathpi.js
@@ -0,0 +1,64 @@
+// console.log("is js working");
+
+const desc = Object.getOwnPropertyDescriptor(Math, "PI");
+//console.log(desc);
+/*
+{
+  value: 3.141592653589793,
+  writable: false,
+  enumerable: false,
+  configurable: false
+}
+*/
+
+const intro = {
+  name: "waseemakram",
+  skill: "developer",
+  isAvailable: true,
+  anythingElse: function () {
+    console.log("nothing is remaining");
+  },
+};
+
+// const intro1 = Object.getOwnPropertyDescriptor(intro, "name");
+// console.log(intro1);
+/*
+{
+  value: 'waseemakram',
+  writable: true,
+  enumerable: true,
+  configurable: true
+}
+*/
+
+Object.defineProperty(intro, "name", {
+  writable: false,
+  enumerable: false,
+});
+
+const intro1 = Object.getOwnPropertyDescriptor(intro, "name");
+//console.log(intro1);
+/*
+{
+  value: 'waseemakram',
+  writable: false,
+  enumerable: false,
+  configurable: true
+}
+*/
+
+// for (let [key, values] of intro) {
+//   console.log(`Key : ${key} values : ${values}`);
+// }  //TypeError: intro is not iterable
+
+for (let [key, values] of Object.entries(intro)) {
+  if (typeof values !== "function") {
+    console.log(`Key : ${key} values : ${values}`);
+  }
+}
+
+/*
+name ni aya q ke hmne usko enumerable false kr dia tha ...is wja se wo iterate ni hoga 
+Key : skill values : developer
+Key : isAvailable values : true
+*/
diff --git a/10_object_oriented_programing/notes.md b/10_object_oriented_programing/notes.md
@@ -0,0 +1,29 @@
+# javascript and classes
+
+## OOP
+
+## object
+
+-collection of properties and methods
+-toLowercase()
+
+## why use OOP
+
+-for DRY (don't repeat yourself)
+
+## parts of OOp
+
+object literal
+
+-constructor function
+-prototypes
+-classes
+
+- instances (new,this )
+
+## 4 pillars
+
+Abstraciton ---(just like fetch ..chze behind the scene ho rhi hoti chupa leta he chze )
+Encapsulation (wrap up the data ...hide the data ...private or public )
+Inheritance
+Polymorphism (Many roops )
diff --git a/10_object_oriented_programing/object.js b/10_object_oriented_programing/object.js
@@ -0,0 +1,48 @@
+function multiply(num) {
+  return num * 5;
+}
+//console.log(multiply(5)); //25
+multiply.power = 2;
+//console.log(multiply.power); //2
+//console.log(multiply.prototype); //{}
+//IMP : javascript me hr chz object hoti he Almost ..function function bhi he sth object bhi he
+//Function-> object->null
+//array-> object-> null
+// string -> object ->null
+
+function createUser(username, score) {
+  this.username = username;
+  this.score = score;
+}
+createUser.prototype.increment = function () {
+  this.score++;
+};
+createUser.prototype.printMe = function () {
+  console.log(`Score: ${this.score}`);
+};
+
+const tea = new createUser("Tea", 255);
+const coffe = new createUser("coffee", 455);
+console.log(tea); //object pore ka pora object hme mil gya he return
+tea.printMe();
+coffe.increment(); //cofee ki value ko increment kre ga .
+console.log(coffe); // ab pora object return kre ga and the coffe value is 455+1=456..
+
+/* =============Notes About New Keyword ====================
+  
+  Here's What happens behind the scenes when new keyword is used :
+  
+  -> A new object is created: the new keyword initiates the creation of the new javascript object .
+  
+  -> A Prototype is linked : the newly created object gets linked to the prototype property of the constructor function .
+  this means it has the access to properties and  methods defined on the constructor 's prototype.
+  
+  -> The constructor is called :  the constructor function is called with the specified arguments and this is bond to 
+  the newly created object . if no explict return value is specified from the constructor javascript assume this ,
+  newly created object to be intended return value .
+  
+  -> The new object is returned: After the constructor function has been called , if it does not return a non-premitive value 
+  (object,fucntion ,array etc). the newly created object is returned 
+  
+  
+  */
diff --git a/10_object_oriented_programing/oop.js b/10_object_oriented_programing/oop.js
@@ -0,0 +1,51 @@
+//===========================Object literal=========================
+
+const user = {
+  name: "waseem akram",
+  isLoggedIn: true,
+  loggedincount: 8,
+
+  getUserDetails: function () {
+    console.log("user data is coming from database");
+    console.log(this);
+    console.log(`hello :${this.name}`);
+  },
+};
+
+//console.log(user.loggedincount);
+//console.log(user.getUserDetails());
+//console.log(this); //{}
+
+//==============constructor function===============
+
+// function Loggin(username, password) {
+//   this.username = username;
+//   this.password = password;
+//   return this;
+// }
+// const userOne = Loggin("wcoder547", "123");
+// const userTwo = Loggin("fahad547", "456"); //it will override the values ....
+// console.log(userOne);
+// console.log(userTwo);
+
+function Loggin(username, password) {
+  this.username = username;
+  this.password = password;
+}
+const userOne = new Loggin("wcoder547", "123");
+const userTwo = new Loggin("fahad547", "456"); //it will override the values ....
+//console.log(userOne);
+//console.log(userTwo);
+
+console.log(userOne.constructor); //return function
+
+console.log();
+
+//IMPORTANT ABOUT NEW KEYWORD ..
+//step1:sbse phle ik empty object{} create hota he jisko instance bola jata he .
+
+//step2: constructor function called through new...
+
+//step-3 : this keyword inject in this
+
+//step 4 : end pe hme mil jate he ..
diff --git a/10_object_oriented_programing/prototype.js b/10_object_oriented_programing/prototype.js
diff --git a/10_object_oriented_programing/static.js b/10_object_oriented_programing/static.js
