Gennadysht 2 vuotta sitten
vanhempi
commit
3b02ef6105
3 muutettua tiedostoa jossa 146 lisäystä ja 71 poistoa
  1. 0 44
      js/11/hw11_06_personForm.html
  2. 12 27
      js/11/hw11_07_ .html
  3. 134 0
      js/hw11_06_personForm_closures.html

+ 0 - 44
js/11/hw11_06_personForm.html

@@ -1,51 +1,8 @@
 <head>person Form</head>
 
 <body>
-
-
     <script>
-        /*const addElement = (domEl, value, onInputFunc) => {
-            const input = document.createElement('input');
-            input.value = value;
-            input.oninput = onInputFunc;
-            domEl.append(input);
-        }*/
         const personForm = (domEl, obj) => {
-            /*addElement(
-                domEl,
-                obj.getName(),
-                () => {
-                    obj.setName(nameInput.value);
-                    fullNameInput.value = obj.getFullName();
-                });
-            addElement(
-                domEl,
-                obj.getSurName(),
-                () => {
-                    obj.setSurName(nameInput.value);
-                    fullNameInput.value = obj.getFullName();
-                });
-            addElement(
-                domEl,
-                obj.getFatherName(),
-                () => {
-                    obj.setFatherName(nameInput.value);
-                    fullNameInput.value = obj.getFullName();
-                });
-            addElement(
-                domEl,
-                obj.getAge(),
-                () => obj.setAge(ageInput.value));
-            addElement(
-                domEl,
-                obj.getFullName(),
-                () => {
-                    obj.setFullName(fullNameInput.value);
-                    nameInput.value = obj.getName();
-                    surNameInput.value = obj.getSurName();
-                    fatherNameInput.value = obj.getFatherName();
-                });*/
-
             const nameInput = document.createElement('input');
             const surNameInput = document.createElement('input');
             const fatherNameInput = document.createElement('input');
@@ -96,7 +53,6 @@
                 result.setFatherName(arrFullName[1]);
                 result.setSurName(arrFullName[2]);
                 result.setName(arrFullName[0]);
-
             }
             result.setName = (newName) => {
                 if (isUpperCase(newName[0])) {

+ 12 - 27
js/11/hw11_07_ .html

@@ -1,11 +1,10 @@
-<head>_____</head>
+<head>getSetForm</head>
 
 <body>
     <script>
         function getSetForm(parent, getSet) {
             const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
-            const inputs = {} //реестр
-
+            const inputs = {} 
             const updateInputs = () => {
                 for (key in inputs) {
                     getName = "get" + key;
@@ -13,16 +12,14 @@
                     if (getFunc) {
                         inputs[key].value = getFunc();
                     }
-                }//функция обновления полей ввода согласно всяким get....
-                //тут должен быть перебор
+                }
             }
-
             for (const getSetName in getSet) {
                 const isGet = getSetName.startsWith("get");//первые три буквы переменной getSetName. Так же можно использовать флаг isGet, который будет равен true или false
                 const fieldName = getSetName.substring(3);//остальные буквы getSetName - типа "Name" или "FullName"
                 //const setKey = `set` + fieldName
                 //const getKey = `get` + fieldName
-                input = inputs[fieldName];
+                let input = inputs[fieldName];
                 if (!input) {
                     input = document.createElement("input");
                     inputs[fieldName] = input;
@@ -31,32 +28,23 @@
                     parent.append(input);
                 }
                 if (isGet) {
-                    value = getSet[getSetName]();
-                    type = typeof value;
-                    htmlType = typesMap[type];
+                    let value = getSet[getSetName]();
+                    let type = typeof value;
+                    let htmlType = typesMap[type];
                     input.type = htmlType;
                     input.value = value;
                 }
                 else {
                     input.disabled = false;
                     input.oninput = () => {
-                        getSet[getSetName](input.value);
+                        value = input.value;
+                        if (input.type == "number")
+                            value = +value;
+                        getSet[getSetName](value);
                         updateInputs();
                     }
-
                 }
-                console.log(input);
-                /*   const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
-               let str = "<form>\n";
-               for (var name in obj) {
-                   value = obj[name];
-                   type = typeof value;
-                   htmlType = typesMap[type];
-                   str += ` <label>${name}: <input type="${htmlType}" value="${value}" /></label>\n`;
-               }*/
-                //допишите тут все шо надо, и не только тут
             }
-            updateInputs()
         }
 
         let car;
@@ -87,20 +75,17 @@
                     return volume
                 },
                 setVolume(newVolume) {
+                    type = typeof newVolume;
                     if (newVolume && typeof newVolume === 'number' && newVolume > 0 && newVolume < 20) {
                         volume = newVolume
                     }
                     return volume
                 },
-
                 getTax() {
                     return volume * 100
                 }
             }
         }
         getSetForm(document.body, car);
-        
-
-
     </script>
 </body>

+ 134 - 0
js/hw11_06_personForm_closures.html

@@ -0,0 +1,134 @@
+<head>person Form</head>
+
+<body>
+
+
+    <script>
+        /*const addElement = (domEl, value, onInputFunc) => {
+            const input = document.createElement('input');
+            input.value = value;
+            input.oninput = onInputFunc;
+            domEl.append(input);
+        }*/
+        const personForm = (domEl, obj) => {
+            /*addElement(
+                domEl,
+                obj.getName(),
+                () => {
+                    obj.setName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getSurName(),
+                () => {
+                    obj.setSurName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getFatherName(),
+                () => {
+                    obj.setFatherName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getAge(),
+                () => obj.setAge(ageInput.value));
+            addElement(
+                domEl,
+                obj.getFullName(),
+                () => {
+                    obj.setFullName(fullNameInput.value);
+                    nameInput.value = obj.getName();
+                    surNameInput.value = obj.getSurName();
+                    fatherNameInput.value = obj.getFatherName();
+                });*/
+
+            const nameInput = document.createElement('input');
+            const surNameInput = document.createElement('input');
+            const fatherNameInput = document.createElement('input');
+            const ageInput = document.createElement('input');
+            const fullNameInput = document.createElement('input');
+            domEl.append(nameInput);
+            nameInput.value = obj.getName();
+            domEl.append(surNameInput);
+            surNameInput.value = obj.getSurName();
+            domEl.append(fatherNameInput);
+            fatherNameInput.value = obj.getFatherName();
+            domEl.append(fullNameInput);
+            fullNameInput.value = obj.getFullName();
+            domEl.append(ageInput);
+            ageInput.value = obj.getAge();
+            nameInput.oninput = () => {
+                obj.setName(nameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            surNameInput.oninput = () => {
+                obj.setSurName(surNameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            fatherNameInput.oninput = () => {
+                obj.setFatherName(fatherNameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            ageInput.oninput = () => obj.setAge(ageInput.value);
+            fullNameInput.oninput = () => {
+                obj.setFullName(fullNameInput.value);
+                nameInput.value = obj.getName();
+                surNameInput.value = obj.getSurName();
+                fatherNameInput.value = obj.getFatherName();
+            }
+        }
+        const isUpperCase = (str) => str.toUpperCase() == str;
+        let createPersonClosure = function (name, surName) {
+            let result = {};
+            let age = 17;
+            let fatherName = "Пупкович";
+            result.getName = () => name;
+            result.getSurName = () => surName;
+            result.getFullName = function () {
+                return `${result.getName()} ${result.getFatherName()} ${result.getSurName()} `;
+            }
+            result.setFullName = (newFullName) => {
+                const arrFullName = newFullName.split(' ');
+                result.setFatherName(arrFullName[1]);
+                result.setSurName(arrFullName[2]);
+                result.setName(arrFullName[0]);
+            }
+            result.setName = (newName) => {
+                if (isUpperCase(newName[0])) {
+                    name = newName;
+                }
+                else
+                    alert("wrong Name format");
+            }
+            result.setSurName = (newSurName) => {
+                if (isUpperCase(newSurName[0])) {
+                    surName = newSurName;
+                }
+                else
+                    alert("wrong Surname format");
+            }
+            result.setFatherName = (newFatherName) => {
+                if (isUpperCase(newFatherName[0])) {
+                    fatherName = newFatherName;
+                }
+                else
+                    alert("wrong Fathername format");
+            }
+            result.getAge = () => age;
+            result.setAge = (newAge) => {
+                if (newAge >= 0 && newAge <= 100)
+                    age = newAge;
+                else
+                    alert("wrong age: " + newAge);
+            }
+            result.getFatherName = () => fatherName;
+            return result;
+        }
+        const person = createPersonClosure("Анна", "Иванова");
+        personForm(document.body, person);
+    </script>
+</body>