Хай! Сегодня задача сделать игру "найди число" на JavaScript
Давайте сделаем игру, в которой будет квадратная таблица, в которой случайным образом будут числа от 1 до N, где N - количество ячеек в таблице. Суть игры будет заключаться в том, что нужно будет кликать по ячейкам в правильном порядке: сначала на 1, потом на 2, потом на 3 и так далее.
Если игрок кликает на правильную ячейку - пусть она активируется и делает красный фон. Если же он кликает на неправильную ячейку - ничего не происходит.
Когда игрок найдет последнее число - пусть игра начинается сначала, но таблица увеличивается на одну строку и одну колонку.
P.s Десять смайлов и скидываем решение
Давайте сделаем игру, в которой будет квадратная таблица, в которой случайным образом будут числа от 1 до N, где N - количество ячеек в таблице. Суть игры будет заключаться в том, что нужно будет кликать по ячейкам в правильном порядке: сначала на 1, потом на 2, потом на 3 и так далее.
Если игрок кликает на правильную ячейку - пусть она активируется и делает красный фон. Если же он кликает на неправильную ячейку - ничего не происходит.
Когда игрок найдет последнее число - пусть игра начинается сначала, но таблица увеличивается на одну строку и одну колонку.
P.s Десять смайлов и скидываем решение
Привет! Сегодня у нас задача сделать "Календарь"
Для простоты просто сделаем так, чтобы календарь выводился за текущий месяц. Но с прицелом на то, что его можно будет доработать так, чтобы можно было менять месяц и год. Образец того, что должно получится на фотографии)
P.s Десять смайлов и скидываем решение задачи)
Для простоты просто сделаем так, чтобы календарь выводился за текущий месяц. Но с прицелом на то, что его можно будет доработать так, чтобы можно было менять месяц и год. Образец того, что должно получится на фотографии)
P.s Десять смайлов и скидываем решение задачи)
Готовый Код | Frontend
Привет! Сегодня у нас задача сделать "Календарь" Для простоты просто сделаем так, чтобы календарь выводился за текущий месяц. Но с прицелом на то, что его можно будет доработать так, чтобы можно было менять месяц и год. Образец того, что должно получится…
Решение задачи "Календарь"
<div id="parent">
<div id="calendar">
<table>
<thead>
<tr>
<th>пн</th>
<th>вт</th>
<th>ср</th>
<th>чт</th>
<th>пт</th>
<th>сб</th>
<th>вс</th>
</tr>
</thead>
<tbody class="body"></tbody>
</table>
</div>
</div>
#parent {
text-align: center;
}
#calendar {
display: inline-block;
}
#calendar td, #calendar th {
padding: 5px 12px;
border: 1px solid black;
text-align: center;
}
let calendar = document.querySelector(' #calendar ');
let body = calendar.querySelector('.body');
let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
draw(body, year, month);
function draw(body, year, month) {
let arr = range(getLastDay(year, month));
let firstWeekDay = getFirstWeekDay(year, month);
let lastWeekDay = getLastWeekDay(year, month);
let nums = chunk(normalize(arr, firstWeekDay, 6 - lastWeekDay), 7);
createTable(body, nums)
}
function createTable(parent, arr) {
parent.textContent = '';
let cells = [];
for (let sub of arr) {
let tr = document.createElement('tr');
for (let num of sub) {
let td = document.createElement('td');
td.textContent = num;
tr.appendChild(td);
cells.push(td);
}
parent.appendChild(tr);
}
return cells;
}
function normalize(arr, left, right) {
for (let i = 0; i < left; i++) {
arr.unshift('');
}
for (var i = 0; i < right; i++) {
arr.push('');
}
return arr;
}
function getFirstWeekDay(year, month) {
let date = new Date(year, month, 1);
let num = date.getDay();
if (num == 0) {
return 6;
} else {
return num - 1;
}
}
function getLastWeekDay(year, month) {
let date = new Date(year, month + 1, 0);
let num = date.getDay();
if (num == 0) {
return 6;
} else {
return num - 1;
}
}
function getLastDay(year, month) {
let date = new Date(year, month + 1, 0);
return date.getDate();
}
function range(count) {
let arr = [];
for (let i = 1; i <= count; i++) {
arr.push(i);
}
return arr;
}
function chunk(arr, n) {
let result = [];
let count = Math.ceil(arr.length / n);
for (let i = 0; i < count; i++) {
let elems = arr.splice(0, n);
result.push(elems);
}
return result;
}
<div id="calendar">
<table>
<thead>
<tr>
<th>пн</th>
<th>вт</th>
<th>ср</th>
<th>чт</th>
<th>пт</th>
<th>сб</th>
<th>вс</th>
</tr>
</thead>
<tbody class="body"></tbody>
</table>
</div>
</div>
text-align: center;
}
display: inline-block;
}
padding: 5px 12px;
border: 1px solid black;
text-align: center;
}
let calendar = document.querySelector('
let body = calendar.querySelector('.body');
let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
draw(body, year, month);
function draw(body, year, month) {
let arr = range(getLastDay(year, month));
let firstWeekDay = getFirstWeekDay(year, month);
let lastWeekDay = getLastWeekDay(year, month);
let nums = chunk(normalize(arr, firstWeekDay, 6 - lastWeekDay), 7);
createTable(body, nums)
}
function createTable(parent, arr) {
parent.textContent = '';
let cells = [];
for (let sub of arr) {
let tr = document.createElement('tr');
for (let num of sub) {
let td = document.createElement('td');
td.textContent = num;
tr.appendChild(td);
cells.push(td);
}
parent.appendChild(tr);
}
return cells;
}
function normalize(arr, left, right) {
for (let i = 0; i < left; i++) {
arr.unshift('');
}
for (var i = 0; i < right; i++) {
arr.push('');
}
return arr;
}
function getFirstWeekDay(year, month) {
let date = new Date(year, month, 1);
let num = date.getDay();
if (num == 0) {
return 6;
} else {
return num - 1;
}
}
function getLastWeekDay(year, month) {
let date = new Date(year, month + 1, 0);
let num = date.getDay();
if (num == 0) {
return 6;
} else {
return num - 1;
}
}
function getLastDay(year, month) {
let date = new Date(year, month + 1, 0);
return date.getDate();
}
function range(count) {
let arr = [];
for (let i = 1; i <= count; i++) {
arr.push(i);
}
return arr;
}
function chunk(arr, n) {
let result = [];
let count = Math.ceil(arr.length / n);
for (let i = 0; i < count; i++) {
let elems = arr.splice(0, n);
result.push(elems);
}
return result;
}
Хай! Сегодня у нас сайт предсказаний на JavaScript
Сегодня твоя задача сделать сайт, который будет выдавать предсказания. Пусть на этом сайте будет кнопка, по нажатию на которую будет запускаться таймер, который будет каждые 0.1 секунд выводить в в какой-нибудь див случайное число от 1 до некоторого максимального.
Под дивом пусть будет другая кнопка, по нажатию на которую пользователь нашего сайта может остановить таймер и зафиксировать некоторое число в диве. Это число будет номером предсказания. После этого покажите пользователю предсказание с этим номером, а все лишние кнопки уберите с экрана, чтобы пользователь не мог получить еще одно предсказание. То есть на один заход на сайт - одно предсказание.
P.s Попытайтесь сделать сами, но для решения накидайте десять смайлов)
Сегодня твоя задача сделать сайт, который будет выдавать предсказания. Пусть на этом сайте будет кнопка, по нажатию на которую будет запускаться таймер, который будет каждые 0.1 секунд выводить в в какой-нибудь див случайное число от 1 до некоторого максимального.
Под дивом пусть будет другая кнопка, по нажатию на которую пользователь нашего сайта может остановить таймер и зафиксировать некоторое число в диве. Это число будет номером предсказания. После этого покажите пользователю предсказание с этим номером, а все лишние кнопки уберите с экрана, чтобы пользователь не мог получить еще одно предсказание. То есть на один заход на сайт - одно предсказание.
P.s Попытайтесь сделать сами, но для решения накидайте десять смайлов)
Хай! Сегодня у нас вопрос "Почему нам нужен Origin?"
Как вы, вероятно, знаете, существует HTTP-заголовок Referer, который обычно содержит адрес страницы, инициировавшей сетевой запрос.
Например, при запросе (fetch) http://google.com с http://javascript.info/some/url заголовки выглядят так:
Accept: */*
Accept-Charset: utf-8
Accept-Encoding: gzip,deflate,sdch
Connection: keep-alive
Host: google.com
Origin: http://javascript.info
Referer: http://javascript.info/some/url
Как вы можете видеть, присутствуют и Referer, и Origin.
Вопросы:
Почему нужен Origin, если Referer содержит даже больше информации?
Возможно ли отсутствие Referer или Origin, или это неправильно?
Как вы, вероятно, знаете, существует HTTP-заголовок Referer, который обычно содержит адрес страницы, инициировавшей сетевой запрос.
Например, при запросе (fetch) http://google.com с http://javascript.info/some/url заголовки выглядят так:
Accept: */*
Accept-Charset: utf-8
Accept-Encoding: gzip,deflate,sdch
Connection: keep-alive
Host: google.com
Origin: http://javascript.info
Referer: http://javascript.info/some/url
Как вы можете видеть, присутствуют и Referer, и Origin.
Вопросы:
Почему нужен Origin, если Referer содержит даже больше информации?
Возможно ли отсутствие Referer или Origin, или это неправильно?
Доброе утро!
Напишите функцию JavaScript, чтобы получить наименьшее общее кратное (LCM) из двух чисел.
Замечания :
Согласно Википедии - общее число - это число, кратное двум или более целым числам. Общие кратные 3 и 4 равны 0, 12, 24, .... Наименьшее общее кратное (LCM) двух чисел - это наименьшее число (не ноль), которое кратно обоим.
Тестовые данные :
console.log (lcm_two_numbers (3,15));
console.log (lcm_two_numbers (10,15));
Выход :
15
30
Напишите функцию JavaScript, чтобы получить наименьшее общее кратное (LCM) из двух чисел.
Замечания :
Согласно Википедии - общее число - это число, кратное двум или более целым числам. Общие кратные 3 и 4 равны 0, 12, 24, .... Наименьшее общее кратное (LCM) двух чисел - это наименьшее число (не ноль), которое кратно обоим.
Тестовые данные :
console.log (lcm_two_numbers (3,15));
console.log (lcm_two_numbers (10,15));
Выход :
15
30
Привет! Давай сделаем "Чеклист".
Условия:
Должен быть инпут с добавлением задачи, а над ним - список с задачами. Возле каждой задачи чекбос. Если нажать на чекбокс - задача становится выполненной, перечеркивается и становится серого цвета, чекбокс при этом пропадает. Справа от любой задачи должен быть крестик для удаления этой задачи.
Задачу также можно поредактировать, если сделать двойной клик по ней - в этом случае вместо пункта списка появляется инпут с текстом задачи, можно поредактировать текст задачи, нажать Enter и задача изменится. Инпут при этом исчезнет.
Условия:
Должен быть инпут с добавлением задачи, а над ним - список с задачами. Возле каждой задачи чекбос. Если нажать на чекбокс - задача становится выполненной, перечеркивается и становится серого цвета, чекбокс при этом пропадает. Справа от любой задачи должен быть крестик для удаления этой задачи.
Задачу также можно поредактировать, если сделать двойной клик по ней - в этом случае вместо пункта списка появляется инпут с текстом задачи, можно поредактировать текст задачи, нажать Enter и задача изменится. Инпут при этом исчезнет.
Привет! Сегодня у нас будет пару задач на массив!)
Напишите код, который преобразовывает и объединяет все элементы массива в одно строковое значение. Элементы массива будут разделены запятой. Получите результат двумя разными методами.
Код:
var vegetables = ['Капуста', 'Репа', 'Редиска', 'Морковка'];
// Ваш код
document.writeln(str1); // "Капуста, Репа, Редиска, Морковка"
document.writeln(str2); // "Капуста, Репа, Редиска, Морковка"
P.s Решение будет после пяти смайлов в комментариях)
Напишите код, который преобразовывает и объединяет все элементы массива в одно строковое значение. Элементы массива будут разделены запятой. Получите результат двумя разными методами.
Код:
var vegetables = ['Капуста', 'Репа', 'Редиска', 'Морковка'];
// Ваш код
document.writeln(str1); // "Капуста, Репа, Редиска, Морковка"
document.writeln(str2); // "Капуста, Репа, Редиска, Морковка"
P.s Решение будет после пяти смайлов в комментариях)
Хай! Пора решить ещё одну задачку)
Сегодня у нас будет задача "Замена регистра символов"
Пользователь вводит строку кириллицей разного регистра. Напишите функцию, которая принимает строку в качестве аргумента и заменяет регистр каждого символа на противоположный. Например, если вводится «КаЖдЫй ОхОтНиК», то на выходе должен быть массив [кАжДыЙ оХоТнИк].
const str = prompt('Введите слово', 'КаЖдЫй ОхОтНиК');
function changeRegister (str) {
// Ваш код
}
document.writeln(changeRegister(str)); // [кАжДыЙ оХоТнИк]
P.s Решение будет после пяти смайлов в комментариях)
Сегодня у нас будет задача "Замена регистра символов"
Пользователь вводит строку кириллицей разного регистра. Напишите функцию, которая принимает строку в качестве аргумента и заменяет регистр каждого символа на противоположный. Например, если вводится «КаЖдЫй ОхОтНиК», то на выходе должен быть массив [кАжДыЙ оХоТнИк].
const str = prompt('Введите слово', 'КаЖдЫй ОхОтНиК');
function changeRegister (str) {
// Ваш код
}
document.writeln(changeRegister(str)); // [кАжДыЙ оХоТнИк]
P.s Решение будет после пяти смайлов в комментариях)
Привет! Сегодня у нас задача "Парковка"
Напиши программу для определения типа транспорта на велосипедной парковке.
Оформи решение в виде функции checkVehicle с двумя параметрами: количество колёс у транспорта и вес этого транспорта. Названия параметров могут быть любыми.
Условие:
Если колеса два и вес транспорта меньше 100 кг, это велосипед. Функция должна возвращать строку 'Парковка разрешена'.
В остальных случаях функция должна возвращать строку 'Вам здесь не место"
P.s Накидайте смайлов на пост и скинем решение)
Напиши программу для определения типа транспорта на велосипедной парковке.
Оформи решение в виде функции checkVehicle с двумя параметрами: количество колёс у транспорта и вес этого транспорта. Названия параметров могут быть любыми.
Условие:
Если колеса два и вес транспорта меньше 100 кг, это велосипед. Функция должна возвращать строку 'Парковка разрешена'.
В остальных случаях функция должна возвращать строку 'Вам здесь не место"
P.s Накидайте смайлов на пост и скинем решение)
Хай! Напиши функцию bind, которая позволяет привязать контекст (значение this) к функции:
window.x = 1;
var ctx = { x: 2 };
function testThis(a) { console.log("x=" + this.x + ", a=" + a); }
console.log(testThis(100)); // x=1, a=100
var boundFunction = bind(testThis, ctx);
console.log(boundFunction(100)); // x=2, a= 100
В новых браузерах и функций есть метод bind(), делающий аналогичную вещь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
В библиотеках тоже есть такой метод: http://lodash.com/docs#bind
P.s "+" в комментариях - скину макет)
window.x = 1;
var ctx = { x: 2 };
function testThis(a) { console.log("x=" + this.x + ", a=" + a); }
console.log(testThis(100)); // x=1, a=100
var boundFunction = bind(testThis, ctx);
console.log(boundFunction(100)); // x=2, a= 100
В новых браузерах и функций есть метод bind(), делающий аналогичную вещь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
В библиотеках тоже есть такой метод: http://lodash.com/docs#bind
P.s "+" в комментариях - скину макет)
Привет! Пора решить задачу:
Напишите функцию JavaScript для преобразования метки времени Unix во время.
P.S. Наш канал с макетами -https://yangx.top/figma_makets
Напишите функцию JavaScript для преобразования метки времени Unix во время.
P.S. Наш канал с макетами -https://yangx.top/figma_makets
Хай! Что из перечисленного не является допустимым значением
Anonymous Quiz
17%
em
53%
dm
14%
cm
16%
mm