JS-16, array, obj, oop Class Notes

livrocky · Mar 15, 2022 · 6cb3ab0 · 6cb3ab0
commit 6cb3ab0
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/1.jpeg b/img/1.jpeg
diff --git a/img/2.png b/img/2.png
diff --git a/img/3.jpeg b/img/3.jpeg
diff --git a/img/4.jpeg b/img/4.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Array obj</title>
+    <script src="js/main.js" defer></script>
+    <!-- <script src="js/oop.js" defer></script> -->
+</head>
+
+<body>
+    <h1>Hello</h1>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,104 @@
+const users = [
+  {
+    id: 1,
+    username: "Bob",
+    password: "secret123",
+    department: "A",
+    avatar: "1.jpeg",
+    online: false,
+  },
+  {
+    id: 2,
+    username: "Jill",
+    password: "secret456",
+    department: "B",
+    avatar: "2.png",
+    online: true,
+  },
+  {
+    id: 3,
+    username: "James",
+    password: "secret789",
+    department: "B",
+    avatar: "3.jpeg",
+    online: true,
+  },
+  {
+    id: 4,
+    username: "Mike",
+    password: "secret111",
+    department: "C",
+    avatar: "4.jpeg",
+    online: false,
+  },
+];
+console.table(users);
+// 1. parasyti funkcija kuri atrenka visus online esancius vartotojus
+// const online = users.filter((uObj) => uObj.online === true);
+const usersOnline = userStatus(true);
+function userStatus(online) {
+  return users.filter((userObj) => userObj.online === true);
+}
+console.table(usersOnline);
+// 2. su funkcija atrinkti B ir C departameto userius
+function departmentUsers(arr) {
+  const filteredUsers = arr.filter((uObj) => uObj.department === "B" || uObj.department === "C");
+  return filteredUsers;
+}
+// array.includes()
+// extra
+const bcUsers = departmentUsers(users, ["B", "C"]);
+const aUsers = departmentUsers(users, ["A"]);
+console.table(bcUsers);
+
+// 3. parasyti funkcija kuri sugeneruoja htmle nuotrauku galerija is uzer paveikleliu, su username pavadinimu
+// {
+//   /* <figure>
+//       <img src="pic_trulli.jpg" alt="Trulli">
+//       <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
+//     </figure> */
+// }
+// 3.1 parasyti funkcija kuri gavusi toki objekta
+const u1 = {
+  id: 3,
+  username: "James",
+  password: "secret789",
+  department: "B",
+  avatar: "3.jpg",
+  online: true,
+};
+// pagamina
+// {
+//   /* <figure>
+//       <img src="3.jpg" alt="James">
+//       <figcaption>Image of James</figcaption>
+//     </figure> */
+// }
+// makeMeFig(u1)
+
+// 3.2 susikuriam div su klase 'grid'. ir tada funkcija makeCards(arr, dest) kuri suka cikla per arr
+// ir gamina korteles su auksciau aprasyta funkcija (3.1)
+
+// 4. parasyti funkcija kuriai paduodam id ir ji grazina objekta kurio id sutampa su duotu. jei toks nerandamas tai grazina
+{
+  found: false;
+  msg: "user not found";
+}
+function findById() {}
+findById(100);
+
+// 5. Parasyti funkcija kuriai paduodam username ir password.
+// 5.1 jei pasword ir username sutampa tai iskonsolinam loggin success
+// 5.2 jei pasword ir username nesutampa tai iskonsolinam loggin fail
+// 5.3 jei pasword ir username sutampa tai padarom vartotoja kad jis butu online
+
+function makeImg(userObj) {
+  const imgEl = document.createElement("img");
+  imgEl.className = "user-img";
+  imgEl.src = `img/${userObj.avatar}`;
+  imgEl.alt = `Image of ${userObj.username}`;
+  document.body.append(imgEl);
+}
+
+makeImg(users[0]);
+makeImg(users[1]);
diff --git a/js/oop.js b/js/oop.js
@@ -0,0 +1,56 @@
+const users = [
+  {
+    name: "James",
+    age: 25,
+    info: function () {
+      console.log(this.name + " " + this.age);
+    },
+    changeName: function (newName) {
+      this.name = newName;
+    },
+  },
+  {
+    name: "Bob",
+    age: 30,
+    info: function () {
+      console.log(this.name + " " + this.age);
+    },
+    changeName: function (newName) {
+      this.name = newName;
+    },
+  },
+];
+users[0].info();
+users[0].changeName("Mr James");
+console.table(users);
+
+function infoOutside(name, age) {
+  console.log(name + " " + age);
+}
+// infoOutside(users[0].name, users[0].age);
+// function User2(argName, argAge) {
+//   this.name = argName;
+//   this.age = argAge;
+// }
+class User {
+  constructor(argName, argAge) {
+    console.log("user created");
+    // pradines reiksmes
+    this.name = argName;
+    this.age = argAge;
+  }
+  // metodai
+  info() {
+    console.log(this.name + " " + this.age);
+  }
+  changeName(newName) {
+    this.name = newName;
+  }
+}
+
+const us1 = new User("Bob", 25);
+const us2 = new User("James", 33);
+us2.changeName("Mr James");
+us2.info();
+
+console.log(" us1 ===", us1, us2);