diff --git a/index.html b/index.html index 8c322f1..60c8991 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,6 @@ - + \ No newline at end of file diff --git a/js/HomeWork.js b/js/HomeWork.js new file mode 100644 index 0000000..09599de --- /dev/null +++ b/js/HomeWork.js @@ -0,0 +1,38 @@ +//setTimeout +function printNumber(from, to) { + let current = from; + + setTimeout(function go() { + alert(current); + if (current < to) { + setTimeout(go, 1000); + } + + current++; + }, 1000); +} + +// printNumber(1, 12); + +//setInterval +function printNumberI(from, to) { + let current = from; + + let timerId = setInterval(function() { + alert(current); + if (current === to) { + clearInterval(timerId); + } + current++; + }, 1000); +} + +// printNumberI(5, 10); + + +// Promise +function delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +delay(3000).then(() => alert('виконалось через 3 секунди')); diff --git a/js/index.js b/js/index.js index 60bdb07..95fa7ed 100644 --- a/js/index.js +++ b/js/index.js @@ -1,135 +1,159 @@ -// console.log("1"); +// first synchronous code +// second asynchronous code +console.log("1"); -// setTimeout(() => (console.log("2"), 1)); +setTimeout(() => (console.log("2"), 1)); -// console.log("3"); -// console.log("4"); +console.log("3"); +console.log("4"); -// const hello = () => { -// console.log("hello"); -// }; +// setTimeout(function, time); -// const timeout = setTimeout(hello, 1000); +const hello1 = () => { + console.log("hello"); +}; + +const timeout = setTimeout(hello1, 1000); // clearTimeout(timeout); -// const hello = () => { -// console.log("hello"); -// }; +// for example logic ads on video +const hello = () => { + console.log("hello"); +}; + +const setInt = setInterval(hello, 1000); + +clearInterval(setInt); + +// add buttons to HTML + +const startBtn = document.querySelector("#start"); +const stoptBtn = document.querySelector("#stop"); -// const setInt = setInterval(hello, 1000); +let time = null; -// const startBtn = document.querySelector("#start"); -// const stoptBtn = document.querySelector("#stop"); +startBtn.addEventListener("click", () => { + time = setInterval(() => { + console.log("123"); + }, 1000); +}); -// let time = null; +stoptBtn.addEventListener("click", () => { + clearInterval(time); + console.log("stop"); +}); -// startBtn.addEventListener("click", () => { -// time = setInterval(() => { -// console.log("123"); -// }, 1000); -// }); +// this +// classic function reference to obj{this}Window +// ()=>{} reference to obj{this}Object +const a = { + classic() { + setTimeout(function () { + console.log(`${this}, classic in object`); + }); + }, + arr() { + setTimeout(() => { + console.log(`${this}, arr in object`); + }); + }, +}; -// stoptBtn.addEventListener("click", () => { -// clearInterval(time); -// console.log("stop"); -// }); +a.classic(); +a.arr(); -// const a = { -// classic() { -// setTimeout(function () { -// console.log(`${this}, classic in obj`); -// }); -// }, -// arr() { -// setTimeout(() => { -// console.log(`${this}, arr in obj`); -// }); -// }, -// }; +// setTimeout(variable, time 1-4); 1-4 work equally -// a.classic(); -// a.arr(); +// new Date(); +// we can get a lot methods date -// const data = new Date(2022, 4, 1, 10, 10, 0, 0); -// console.log(data); +const data = new Date(2022, 4, 1, 10, 10, 0, 0); // year, month, day = required / time don't required +console.log(data); -// const unixData = new Date(1677452273126); -// console.log(unixData); +const unixData = new Date(1677452273126); +console.log(unixData); -// const newUnixDate = Date.now(); -// console.log(newUnixDate); +const newUnixDate = Date.now(); +console.log(newUnixDate); const date = new Date(); -// console.log(date.getDate()); +console.log(date.getDate()); -// console.log(date.getMonth()); +console.log(date.getMonth()); -// console.log(date.getFullYear()); +console.log(date.getFullYear()); -// const options = { -// weekday: "long", -// year: "numeric", -// month: "long", -// day: "numeric", -// }; +// we can find this on Google +const options = { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", +}; -// const ukr = date.toLocaleString("Uk-uk", options); -// console.log(ukr); +const ukr = date.toLocaleString("Uk-uk", options); +console.log(ukr); ///////// -// let prom = new Promise(function (resolve, reject) { -// setTimeout(() => resolve("resolve"), 1000); -// setTimeout(() => reject("reject"), 1000); -// }); +// Promise || resolve & reject +// rosolve if OK +// reject if notOK +let prom = new Promise(function (resolve, reject) { + setTimeout(() => resolve("resolve"), 1000); + setTimeout(() => reject("reject"), 1000); +}); +// }).catch().then().finally(); // prom.then( -// (resolve) => console.log(resolve), -// (reject) => console.log(reject) +// (resolve) => console.log(resolve), +// (reject) => console.log(reject) // ); -// prom.catch(alert); +prom.catch(alert); // for finding Errors -// prom.finally() +prom.finally(); // for clearing loader or sth -// function load(src) { -// return new Promise(function (resolve, reject) { -// let script = document.createElement("script"); -// script.src = src; +function load(src) { + return new Promise(function (resolve, reject) { + let script = document.createElement("script"); + script.src = src; -// script.onload = () => resolve(script); -// script.onerror = () => reject(new Error(`Err ${script}`)); + script.onload = () => resolve(script); + script.onerror = () => reject(new Error(`Err ${script}`)); -// document.head.append(script); -// }); -// } + document.head.append(script); + }); +} -// let prom = load( -// "https://cdnjs.cloudflare.com/ajax/lodash.js/4.17.11/lodash.js" -// ); +let promi = load( + "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js" +); + +promi.then((script) => console.log(`Download ${script}`)); + +promi.catch((error) => console.log(`Error ${error.message}`)); + +promi.finally(console.log("Finally")); + +new Promise(function (resolve, reject) { + setTimeout(() => resolve(2), 1000); +}) + .then(function (result) { + console.log(result); + return new Promise((resolve, reject) => { + setTimeout(() => resolve(result + 5), 1000); + }); + }) + .then(function (result) { + console.log(result); + return new Promise((resolve, reject) => { + setTimeout(() => resolve(result + 5), 1000); + }); + }) + .then(function (result) { + console.log(result); + }); -// prom.then((script) => console.log(`Download ${script}`)); - -// prom.catch((error) => console.log(`Error ${error.message}`)); - -// prom.finally(console.log("Finally")); - -// new Promise(function (resolve, reject) { -// setTimeout(() => resolve(2), 1000); -// }) -// .then(function (result) { -// console.log(result); -// return new Promise((resolve, reject) => { -// setTimeout(() => resolve(result + 5), 1000); -// }); -// }) -// .then(function (result) { -// console.log(result); -// return new Promise((resolve, reject) => { -// setTimeout(() => resolve(result + 5), 1000); -// }); -// }) -// .then(function (result) { -// console.log(result); -// }); +// Required Promise && this \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..b33b946 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "lesson12", + "version": "1.0.0", + "lockfileVersion": 1 +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..06a3351 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "lesson12", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/legogoUA/Lesson12.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/legogoUA/Lesson12/issues" + }, + "homepage": "https://github.com/legogoUA/Lesson12#readme" +}