Задачи для решения
На работу с функциями
Если переменная a больше нуля - то в ggg запишем функцию, которая выводит один !, иначе запишем функцию, которая выводит два !.
Решение:
var a;
if (a > 0) {
var ggg = function() {
console.log('!');
}
} else {
var ggg = function() {
console.log('!!');
}
}
Функция ggg принимает 2 параметра: число и анонимную функцию, которая возводит число в квадрат. Возведите число в 4-тую степень с помощью ggg.
Решение:
var ggg = function(n, f) {return f(n);}
funcNew = function(a){return Math.pow(a, 2)};
num = 7;
alert(ggg( (ggg(num, funcNew)), funcNew));
Функция ggg принимает 2 параметра: анонимную функцию, которая возвращает 3 и анонимную функцию, которая возвращает 4. Верните результатом функции ggg сумму 3 и 4.
Решение:
var ggg = function(a, b){return a() + b();};
var f1 = function(){return 3};
var f2 = function(){return 4};
console.log(ggg(f1, f2));
Дана функция ggg. Она требует первым параметром число, вторым функцию, которая возводит в квадрат, а третьим параметром функцию, которая возводит в куб. Эти функции есть как Function Declaration - kvadrat, kub. Пусть функция ggg вернет сумму квадрата и куба числа.
Решение:
var ggg = function(a, b, c){return b(a) + c(a);};
var square = function(n){return Math.pow(n, 2)};
var cub = function(n){return Math.pow(n, 3)};
console.log(ggg(3, square, cub));
Сделайте функцию each, которая первым параметром принимает массив, а вторым - функцию, которая применится к каждому элементу массива. Функция each должна вернуть измененный массив.
Решение:
var each = function(startArr, f){return f(startArr)};
var arr = [64, 49, 36, 25, 16];
var myFunc = function(a){
var newArr = [];
for (var i = 0; i < a.length; i++) {
newArr[i]=Math.sqrt(a[i]);
}
return newArr;
}
document.write(each(arr, myFunc));
Сделайте функцию each, которая первым параметром принимает массив, а вторым - массив функций, которые по очереди применятся к каждому элементу массива: к первому элементу массива - первая функция, ко второму - вторая и так далее пока функции в массиве не закончатся, после этого возьмется первая функция, вторая и так далее по кругу.
Решение:
var each = function(numArr, funcArray) {
var newArr = [];
for (var i = 0; i < numArr.length; i++){
var current = funcArray[i % funcArray.length](numArr[i]);
funcArray.length через j++;
newArr.push(current);
}
return newArr
}
var f1 = function(a){return a + 3};
var f2 = function(a){return a + 2};
var f3 = function(a){return a + 1};
var funcAll = [f1, f2, f3];
var startArray = [0,1,2, 3, 4, 5, 6, 7, 8, 9,10, 11];
document.write(each(startArray, funcAll));
На замыкания
Сделайте функцию, которая считает и выводит количество своих вызовов.
func(); //выведет 1
func(); //выведет 2
func(); //выведет 3
func(); //выведет 4
Решение:
function counter() {
var i = 1;
return function() {return i++};
}
var func = counter();
console.log(func());
console.log(func());
console.log(func());
Даны кнопки. Привяжите к каждой кнопке событие по клику, которое будет считать количество нажатий по кнопке и выводить его в текст кнопки. Количество нажатий для каждой кнопки должно хранится в замыкании.
Решение:
<button>0</button>
<button>0</button>
<button>0</button>
var f1 = function(){
var k = 1;
return function() {
this.innerHTML = k;
return k++;
}
}
var all_buttons = document.getElementsByTagName('button');
for (var i = 0; i < all_buttons.length; i++) {
all_buttons[i].addEventListener('click', f1(this));
}
Дан массив цветов. Даны абзацы. По первому нажатию на абзац он должен покраситься в первый цвет из массива, по второму нажатию - во второй и так далее. Все абзацы работают независимо.
Решение:
<p>Текст1</p>
<p>Текст2</p>
<p>Текст3</p>
var colors = ['magenta', 'cyan', 'firebrick', 'springgreen', 'skyblue'];
var p_collect = document.getElementsByTagName('p');
var f1 = function() {
var k = 0;
return function() {
this.style.color = colors[k];
k++;
if (k == colors.length){k=0};
}
}
for (var i = 0; i < p_collect.length; i++) {
p_collect[i].addEventListener('click', f1());
}
Даны кнопки. Каждая кнопка по нажатию на нее выводить следующее число Фибоначчи. Кнопки работают независимо. Решить через замыкания.
Решение:
<button>Фибоначчи</button><span></span>
<button>Фибоначчи</button><span></span>
<button>Фибоначчи</button><span></span>
var f1 = function(){
var a = 0;
var b = 1;
var temp;
return function() {
this.nextElementSibling.innerHTML = a;
temp = a;
a = b;
b = temp +a;
}
}
var buts_collect = document.getElementsByTagName('button');
for (var i = 0; i < buts_collect.length; i++) {
buts_collect[i].addEventListener('click', f1());
}
Даны инпуты. Сделайте так, чтобы каждый инпут хранил историю своих изменений. Каждый инпут свою. Изменением считается событие onchange. История должна хранится в замыкании. Над каждым инпутом должны быть стрелочки назад и вперед, с помощью которых можно передвигаться по истории.
Решение:
<div id="conteiner">
<div>
<button>←</button><button>→</button>
<input /></div>
<div>
<button>←</button><button>→</button>
<input /></div>
</div>
</div>
Сделайте функцию, каждый вызов который будет генерировать случайные числа от 1 до 100, но так, чтобы они не повторялись, пока не будут перебраны все числа из этого промежутка. Решите задачу через замыкания - в замыкании должен хранится массив чисел, которые уже были сгенерированы функцией.
Решение:
<button>Жми</button>
<p></p>
var f1 = function() {
var already_used = [];
return function() {
var new_num = Math.floor(Math.random() * 100 + 1);
for (var i = 0; i < already_used.length; i++) {
if (already_used[i] == new_num) {return}
};
parag.innerHTML += new_num+', ';
already_used.push(new_num);
}
}
var but = document.querySelector('button').addEventListener('click', f1());
var parag = document.querySelector('p');