홈 탐색 도움말
로그인
GennadySht
/
HomeWork
Watch 1
Star 0
포크 0
파일 이슈 4 풀 리퀘스트 0 위키
소스 검색

HW<16>done

Gennadysht 2 년 전
부모
2714a86693
커밋
48d848864a
7개의 변경된 파일과 154개의 추가작업 그리고 0개의 파일을 삭제
분할 보기 변경상태 보기
  1. 0 0
      js/13_kiosk/index.html
  2. 0 0
      js/16_Promis/hw_16_01_fetch_basic.html
  3. 0 0
      js/16_Promis/hw_16_02_fetch_improoved.html
  4. 22 0
      js/16_Promis/hw_16_03_race.html
  5. 21 0
      js/16_Promis/hw_16_04_resolve.html
  6. 22 0
      js/16_Promis/hw_16_05_prompt_res.html
  7. 89 0
      js/16_Promis/hw_16_06_login form.html

js/HW_13_kiosk/index.html → js/13_kiosk/index.html
파일 보기


js/16/hw16_01_fetch_basic.html → js/16_Promis/hw_16_01_fetch_basic.html
파일 보기


js/16/hw_16_02_fetch_improoved.html → js/16_Promis/hw_16_02_fetch_improoved.html
파일 보기


+ 22 - 0
js/16_Promis/hw_16_03_race.html
파일 보기 

@@ -0,0 +1,22 @@
 
+<header>
 
+    Race
 
+</header>
 
+
 
+<body>
 
+    <script>
 
+        function delay(ms) {
 
+            function executor(fulfill, reject) {  //reject объявлен для вида.
 
+                setTimeout(() => fulfill(ms), ms) //setTimeout запустит функцию, которая запустит fulfill через ms миллисекунд. Результатом промиса будет время задержки
 
+            }
 
+            return new Promise(executor)
 
+        }
 
+
 
+        let fetchPromise = fetch('https://swapi.dev/api/people/1/')
 
+            .then(res => "fetch promise");
 
+        let delayPromise = delay(500)
 
+            .then(res => "delay promise");
 
+        let start = new Date();
 
+        Promise.race([fetchPromise, delayPromise])
 
+            .then(res => alert(`${res}:${new Date() - start}`));
 
+    </script>
 
+</body>

+ 21 - 0
js/16_Promis/hw_16_04_resolve.html
파일 보기 

@@ -0,0 +1,21 @@
 
+<header>
 
+    resolve
 
+</header>
 
+
 
+<body>
 
+    <script>
 
+        function confirmPromise(text) {
 
+            function executor(fulfill, reject) {
 
+                if (confirm(text))
 
+                    fulfill();
 
+                else
 
+                    reject();
 
+            }
 
+            return new Promise(executor);
 
+        }
 
+        confirmPromise('Промисы это сложно?')
 
+            .then(
 
+                () => console.log('не так уже и сложно'),
 
+                () => console.log('respect за усидчивость и внимательность'));
 
+    </script>
 
+</body>

+ 22 - 0
js/16_Promis/hw_16_05_prompt_res.html
파일 보기 

@@ -0,0 +1,22 @@
 
+<header>
 
+    prompt resolve
 
+</header>
 
+
 
+<body>
 
+    <script>
 
+        function promptPromise(text) {
 
+            function executor(fulfill, reject) {
 
+                let result = prompt(text);
 
+                if (result == null)
 
+                    reject();
 
+                else
 
+                    fulfill(result);
 
+            }
 
+            return new Promise(executor);
 
+        }
 
+        promptPromise("Как тебя зовут?")
 
+            .then(
 
+                name => console.log(`Тебя зовут ${name}`),
 
+                () => console.log('Ну зачем морозиться, нормально же общались'));
 
+    </script>
 
+</body>

+ 89 - 0
js/16_Promis/hw_16_06_login form.html
파일 보기 

@@ -0,0 +1,89 @@
 
+<header>
 
+    Promisify: LoginForm
 
+</header>
 
+
 
+<body>
 
+    <script>
 
+        function Login(parent) {
 
+            this.input = document.createElement("input");
 
+            parent.append(this.input);
 
+            this.setValue = function (value) {
 
+                this.input.value = value;
 
+            }
 
+            this.getValue = function () {
 
+                return this.input.value;
 
+            }
 
+            this.input.onchange = function () {
 
+                if (this.onChange)
 
+                    this.onChange(this.getValue());
 
+            }.bind(this);
 
+        }
 
+
 
+        function Password(parent, open) {
 
+            this.input = document.createElement("input");
 
+            parent.append(this.input);
 
+            this.setValue = function (value) {
 
+                this.input.value = value;
 
+            }
 
+            this.getValue = function () {
 
+                return this.input.value;
 
+            }
 
+            this.input.onchange = function () {
 
+                if (this.onChange)
 
+                    this.onChange(this.getValue());
 
+            }.bind(this);
 
+
 
+
 
+            this.setOpen = function (open) {
 
+                this.input.type = open ? "text" : "password";
 
+            }
 
+            this.getOpen = function () {
 
+                return this.input.type == "text";
 
+            }
 
+            let check = document.createElement("input");
 
+            parent.append(check);
 
+            check.onchange = function () {
 
+                this.setOpen(check.checked);
 
+                if (this.onOpenChange)
 
+                    this.onOpenChange(this.getOpen());
 
+            }.bind(this);
 
+
 
+            check.checked = open;
 
+            check.value = "open";
 
+            check.type = "checkbox";
 
+        }
 
+        function LoginForm(parent, open) {
 
+
 
+            let form = document.createElement("form");
 
+            parent.append(form);
 
+            this.login = new Login(form);
 
+            this.password = new Password(form, open);
 
+            this.button = document.createElement("button");
 
+            this.button.innerText = "OK";
 
+            form.append(this.button);
 
+
 
+            let setButtonStateCallback = function setButtonState() {
 
+                this.button.disabled = !this.login.getValue() || !this.password.getValue();
 
+            }.bind(this);
 
+            this.login.onChange = setButtonStateCallback;
 
+            this.password.onChange = setButtonStateCallback;
 
+            this.button.disabled = true;
 
+            this.button.onclick = function () {
 
+                if (this.onLogin)
 
+                    this.onLogin(this.login.getValue(), this.password.getValue());
 
+            }.bind(this);
 
+        }
 
+
 
+        function loginPromise(parent) {
 
+            function executor(fulfill, reject) {
 
+                const form = new LoginForm(parent);
 
+                form.onLogin = (login, password) => {
 
+                    fulfill({ 'login': login, 'password': password })
 
+                }
 
+            }
 
+            return new Promise(executor);
 
+        }
 
+        loginPromise(document.body)
 
+           .then(({ login, password }) => console.log(`Вы ввели ${login} и ${password}`));
 
+    </script>
 
+</body>