Лоренс Ларс Свекис , Майке ван Путтен , Роб Персиваль - JavaScript с нуля до профи

слова: enjoy avaScript.
2. Да.
3. Это удалит файлы cookie с сайта.

462  Приложение. Ответы на практические занятия, проекты и вопросы

4. hello world
5. a is not defined
6. a
с
b

Глава 13. Параллелизм
Практические занятия
Практическое занятие 13.1
function greet(fullName){
console.log(`Welcome, ${fullName[0]} ${fullName[1]}`)
}
function processCall(user, callback){
const fullName = user.split(" ");
callback(fullName);
}
processCall("Laurence Svekis", greet);

Практическое занятие 13.2
const myPromise = new Promise((resolve, reject) => {
resolve("Start Counting");
});
function counter(val){
console.log(val);
}
myPromise
.then(value
.then(value
.then(value
.then(value

=>
=>
=>
=>

{counter(value); return "one"})
{counter(value); return "two"})
{counter(value); return "three"})
{counter(value);});

Практическое занятие 13.3
let cnt = 0;
function outputTime(val) {
return new Promise(resolve => {
setTimeout(() => {
cnt++;
resolve(`x value ${val} counter:${cnt}`);

Глава 13. Параллелизм  463
}, 1000);
});
}
async function aCall(val) {
console.log(`ready ${val} counter:${cnt}`);
const res = await outputTime(val);
console.log(res);
}
for (let x = 1; x < 4; x++) {
aCall(x);
}

Проект
Проверка паролей
const allowed = ["1234", "pass", "apple"];
function passwordChecker(pass) {
return allowed.includes(pass);
}
function login(password) {
return new Promise((resolve, reject) => {
if (passwordChecker(password)) {
resolve({
status: true
});
} else {
reject({
status: false
});
}
});
}
function checker(pass) {
login(pass)
.then(token => {
console.log("Approve:");
console.log(token);
})
.catch(value => {
console.log("Reject:");
console.log(value);
})
}
checker("1234");
checker("wrong");

464  Приложение. Ответы на практические занятия, проекты и вопросы

Вопросы для самопроверки
1. Обновленный код будет выглядеть так:
function addOne(val){
return val + 1;
}
function total(a, b, callback){
const sum = a + b;
return callback(sum);
}
console.log(total(4, 5, addOne));

2. На экране появится сообщение об ошибке: Error: Oh no.
3. Обновленный код:
function checker(val) {
return new Promise((resolve, reject) => {
if (val > 5) {
resolve("Ready");
} else {
reject(new Error("Oh no"));
}
});
}
checker(5)
.then((data) => {console.log(data); })
.catch((err) => {console.error(err); })
.finally(() => { console.log("done");});

4. Новый код будет выглядеть следующим образом:
async function myFun() {
return "Hello";
}
myFun().then(
function(val) { console.log(val); },
function(err) { conole.log(err); }

Глава 14. HTML5, Canvas и JavaScript
Практические занятия
Практическое занятие 14.1

const message = document.getElementById("message");
const output = document.querySelector(".output");
const myInput = document.querySelector("input");

Глава 14. HTML5, Canvas и JavaScript  465
myInput.addEventListener("change", uploadAndReadFile);
function uploadAndReadFile(e) {
const files = e.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const img = document.createElement("img");
img.classList.add("thumb");
img.file = file;
output.appendChild(img);
const reader = new FileReader();
reader.onload = (function (myImg) {
return function (e) {
myImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}


Практическое занятие 14.2



Canvas HTML5

#canvas {
border: 1px solid black;
}



Not Supported

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 500, 300); // закрашенная фигура
ctx.strokeRect(90, 90, 520, 320); // контур
ctx.clearRect(150, 150, 400, 200); // прозрачность




Практическое занятие 14.3




466  Приложение. Ответы на практические занятия, проекты и вопросы
Canvas HTML5

#canvas {
border: 1px solid black;
}



Not Supported

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 130, 100, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(250, 120, 20, 0, Math.PI * 2);
ctx.moveTo(370, 120);
ctx.arc(350, 120, 20, 0, Math.PI * 2);
ctx.moveTo(240, 160);
ctx.arc(300, 160, 60, 0, Math.PI);
ctx.fill();
ctx.moveTo(300, 130);
ctx.lineTo(300, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300, 230);
ctx.lineTo(300, 270);
ctx.lineTo(400, 270);
ctx.lineTo(200, 270);
ctx.lineTo(300, 270);
ctx.lineTo(300, 350);
ctx.lineTo(400, 500);
ctx.moveTo(300, 350);
ctx.lineTo(200, 500);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(200, 50);
ctx.lineTo(400, 50);
ctx.lineTo(300, 20);
ctx.lineTo(200, 50);
ctx.fill();
ctx.stroke();




Глава 14. HTML5, Canvas и JavaScript  467

Практическое занятие 14.4



Canvas HTML5

#canvas {
border: 1px solid black;
}



Not Supported

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 130, 100, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(250, 120, 20, 0, Math.PI * 2);
ctx.moveTo(370, 120);
ctx.arc(350, 120, 20, 0, Math.PI * 2);
ctx.moveTo(240, 160);
ctx.arc(300, 160, 60, 0, Math.PI);
ctx.fill();
ctx.moveTo(300, 130);
ctx.lineTo(300, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300, 230);
ctx.lineTo(300, 270);
ctx.lineTo(400, 270);
ctx.lineTo(200, 270);
ctx.lineTo(300, 270);
ctx.lineTo(300, 350);
ctx.lineTo(400, 500);
ctx.moveTo(300, 350);
ctx.lineTo(200, 500);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(200, 50);
ctx.lineTo(400, 50);
ctx.lineTo(300, 20);

468  Приложение. Ответы на практические занятия, проекты и вопросы
ctx.lineTo(200, 50);
ctx.fill();
ctx.stroke();




Практическое занятие --">