Browse Source

HW_14 question about Person Prototype

Graf15 2 years ago
parent
commit
180cfc92d9
3 changed files with 137 additions and 0 deletions
  1. 16 0
      js/js_14_foop/index.html
  2. 64 0
      js/js_14_foop/index.js
  3. 57 0
      js/js_14_foop/style.css

+ 16 - 0
js/js_14_foop/index.html

@@ -0,0 +1,16 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+    
+</head>
+<body>
+    <script src="index.js"></script>
+</body>
+
+</body>
+</html>

+ 64 - 0
js/js_14_foop/index.js

@@ -0,0 +1,64 @@
+/*Person Constructor
+Переделайте задание createPerson на функцию конструктор Person.
+const a = new Person("Вася", "Пупкин")
+const b = new Person("Анна", "Иванова")
+const c = new Person("Елизавета", "Петрова")
+
+console.log(a.getFullName()) //Вася Пупкин
+a.fatherName = 'Иванович'    //Вася Иванович Пупкин
+
+console.log(b.getFullName()) //Анна Иванова
+Для этого методы и свойства заносите не в создаваемый объект, а в this внутри конструктора.*/
+
+{
+    const a = new Person("Вася", "Пупкин")
+    const b = new Person("Анна", "Иванова")
+    const c = new Person("Елизавета", "Петрова")
+
+    console.log(a.getFullName()) //Вася Пупкин
+    a.fatherName = 'Иванович'    //Вася Иванович Пупкин
+
+    console.log(b.getFullName()) //Анна Иванова
+
+    function Person(name, surname) {
+
+        this.name = name,
+        this.surname = surname,
+        this.getFullName = () => `${this.name} ${this.fatherName || ""} ${this.surname}`
+    }
+
+}
+
+/*Person Prototype
+Переделайте предыдущее задание, вынеся методы в прототип. Для этого вместо присвоения в this занесите их в объект Person.prototype. После этой переделки все должно работать по старому:
+const a = createPerson("Вася", "Пупкин")
+const b = createPerson("Анна", "Иванова")
+const c = createPerson("Елизавета", "Петрова")
+
+console.log(a.getFullName()) //Вася Пупкин
+a.fatherName = 'Иванович'    //Вася Иванович Пупкин
+
+console.log(b.getFullName()) //Анна Иванова*/
+
+{
+    const a = createPerson("Вася", "Пупкин")
+    const b = createPerson("Анна", "Иванова")
+    const c = createPerson("Елизавета", "Петрова")
+
+    console.log(a.getFullName()) //Вася Пупкин
+    a.fatherName = 'Иванович'    //Вася Иванович Пупкин
+    console.log(a.getFullName())
+    console.log(b.getFullName()) //Анна Иванова*/
+
+    function createPerson(name, surname){
+        function Person(name, surname) {
+            Person.prototype.getFullName = function () {return `${this.name} ${this.fatherName || ""} ${this.surname}`}
+    
+            this.name = name
+            this.surname = surname
+        }
+    
+        const a = new Person (name, surname)
+        return a
+    }
+}

+ 57 - 0
js/js_14_foop/style.css

@@ -0,0 +1,57 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    background-color: darkgrey;
+
+}
+
+.productCard{
+  padding: 10px;
+  margin: 20px;
+  width: 200px;
+  background-color: azure;
+  border-radius: 10px;
+}
+
+.productName{
+  text-align: center;
+  background-color: rgb(231, 30, 8);
+  padding: 5px;
+  color: white;
+  border-radius: 5px;
+  margin-top: 0px;
+}
+
+.productPrice{
+  text-align: center;
+  padding: 8px;
+  background-color: green;
+  color: white;
+  border-radius: 5px;
+}
+
+.showcase{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.productQuantity{
+  padding: 10px 0px 50px;
+  text-align: center;
+}
+
+.orderSection{
+  display: flex;
+  justify-content: center;
+}
+
+.orderSection * {
+margin: 10px
+}