Готовый Код | Frontend
884 subscribers
470 photos
7 videos
240 links
Здесь ты найдешь готовый код для фронтенд разработки

По вопросам : @sul_furas
加入频道
Что означает локальная/глобальная переменная ?
Какая переменная в примере?
Var num = 10;
function info {
console.log(num)}
info();
В чём ошибка, как думаете?
<button onclick="alert("В чём ошибка????")">/button>
Promise API

Метод Promise.all принимает массив промисов (может принимать любой перебираемый объект, но обычно используется массив) и возвращает новый промис.

Каким будет вывод этого фрагмента кода?

console.log('start');

const promise1 = new Promise((resolve, reject) => {
console.log(1)
})

console.log('end');
Создайте функцию-конструктор Book, у которой есть свойства title и author, и методы toString (возвращает строку вида "Название: {title}, автор: {author}") и isWrittenBy (принимает имя автора и возвращает true, если автор совпадает с переданным именем).

```javascript
function Book(title, author) {
this.title = title;
this.author = author;
this.toString = function() {
return Название: ${this.title}, автор: ${this.author};
};
this.isWrittenBy = function(name) {
return this.author === name;
};
}

const book1 = new Book('Война и мир', 'Лев Толстой');
console.log(book1.toString()); // Название: Война и мир, автор: Лев Толстой
console.log(book1.isWrittenBy('Лев Толстой')); // true
console.log(book1.isWrittenBy('Федор Достоевский')); // false
Привет! Как отдохнули? Готовы решать задачки?

Найдите ошибки в коде:

1. Код должен вывести элемент объекта:
let obj = {x: 1, y: 2, z: 3};
console.log(obj[x]);

2. Код должен вывести элемент объекта по ключу из переменной:
let obj = {x: 1, y: 2, z: 3};
let key = 'x';

console.log(obj.key);

3. Код должен вывести сумму элементов объекта:

let obj = {x: 1, y: 2, z: 3};
let sum = obj[x] + obj[y] + obj[x];

console.log(obj);

4. Код должен вывести количество элементов объекта:

let obj = {x: 1, y: 2, z: 3};
console.log(obj.length);

P.s Возможно задачка имеет правильное решение)
Преимущества JavaScript :

- Незаменимость в веб-разработке. JS – это основная «технология» для клиент-серверных моделей и программирования «для интернета».
- Наличие полной интеграции с версткой страниц и серверной частью.
- Рациональность применения и простоту. Решить элементарную задачу при помощи JS удается за несколько минут. Сам - ЯП обладает понятным синтаксисом, который не требует углубленного изучения.
- Скорость работы. JS может сделать итоговое приложение более быстрым и удобным.
- Производительность.
- Комфортность использования пользовательских интерфейсов.
- Наличие собственной мощной экосистемы (инфраструктуры). Особо заметно в последние годы. Пример – появление огромного количества полезных фреймворков, которые подойдут для любого случая.
Хай! Давайте сделаем "Поиск исторических событий "
Этот поиск должен выводить все события за определённый год.

Вёрстка:
<div id="parent">
<input id="input" placeholder="введите год и нажмите Enter">
<table id="table"></table>
</div>
* {
box-sizing: border-box;
}
#parent {
margin: 0 auto;
width: 600px;
}
#input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
#table {
width: 100%;
}
#table td {
padding: 10px;
text-align: center;
border: 1px solid black;
}
Хай! Напишите функцию merge, которая будет принимать на вход несколько объектов (любое количество), и возвращать единственный объект, содержащий все поля из всех объектов. Если одно и то же поле было в нескольких объектах, необходимо оставить значение, которое встретилось раньше
Привет! Напишите функцию, которая заполняет новый массив предоставленным значением.

/**
* Описание задачи: Напишите функцию, которая заполняет новый массив предоставленным значением.
* Ожидаемый результат: (3, 'a') => ['a', 'a', 'a']
* Сложность задачи: 1 of 5
* @param {number} arraySize - размер массива
* @param {?} value - значение для массива
* @returns {Array}
*/

const fill = (arraySize, value) => {
throw new Error('Напишите здесь свое решение');
}

const data = 3;
const valueToFill = 'a';
console.log(fill(data, valueToFill)) // ['a', 'a', 'a']
Для вас задача:
Напишите код, который создает переменную company, в переменную вставьте два объекта post и name, со значениями developer и Ivan, после выведите значение объекта post в alert. Какой будет результат?

А вот и её решение:
let company = {
post: 'developer',
name: 'Ivan'
}

alert(
company.post);
Простенькое задание)
Какое значение будет выведено в консоль?
console.log([ ] + 1 + 2);

Результат 12
Какое значение будет на выходе?
const client = {
name: "Mr. Smith",
age: 21
}

const increaseAge = (x = { ...client }) => x.age += 1
const changeAgeAndName = (x = { ...client }) => {
x.age += 1
x.name = "Ivan"
}

increaseAge(client)
changeAgeAndName()

console.log(client)

A: {name: "Ivan", age: 22}
B: {name: "Ivan", age: 23}
C: {name: "Mr. Smith", age: 22}
D: {name: "Mr. Smith", age: 23}
У нас так же есть сообщество по задачам: https://yangx.top/htmlcssjstest и по макетам: https://yangx.top/figma_makets
А ещё не забываем, что у нас есть основной канал, где много различных фишек: https://yangx.top/dh_jun )
Хай ! Правильно ли решили задачу?

Нужно найти ошибки в коде

let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;

for (let elem in obj) {
if (elem[0] === '1' && elem[0] === '2') {
sum += +elem;
}
}

console.log(sum);

Сделали так:
let obj = { a: 10, b: 20, c: 30, d: 40, e: 50 };
let sum = 0;

for (let elem in obj) {
if (String(obj[elem])[0] === "1" || String(obj[elem])[0] === "2") {
sum += +obj[elem];
}
}

console.log(sum);
Некоторые проблемы иногда нужно показывать с помощью отдельно выделенных областей.
Поэтому решил поделиться хорошей программой ligtshot
Скачать можно по ссылке: https://app.prntscr.com/ru/
Попробуйте сделать задачу устно)
Чему равно g после выполнения следующего кода?
f = g = 0;
(function () {
try {
f = function() {
return f();
};
f();
} catch (e) {
return g++ && f();
} finally {
return ++g;
}
function f() { g += 5; return 0; }
}) ();

Результат: 2
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер с анимацией
Прокрутите колесико мышки или нажмите на квадратики внизу справа, чтобы отобразить следующий слайд с анимационным появлением текста.
https://codepen.io/fluxus/pen/rweVgp
Задачка может быть тестовым заданием)

Потенциальному разработчику предоставляется строка.
Напишите функцию, которая:

- вернет значение истины, если string – это палиндром;
- в противном случае на экран будет выведен результат false;
- делать все это с учетом пробелов и имеющихся знаков препинания.

Пример – при наличии строки, содержащей только слово cat, значение функции должно быть false. А если работать с лексемой racecar – true.
Задача: Возраст

Ваша функция принимает два аргумента:

текущий возраст отца (лет)
текущий возраст сына (лет)
Подсчитайте, сколько лет назад отец был вдвое старше сына (или через сколько лет он будет вдвое старше).

P.s Решение будет позже)
Хай! Сегодня мы ищем разницу в возрасте)
Используя набор данных из примера, подсчитайте среднюю разницу в возрасте между матерями и их детьми (это возраст матери во время появления ребёнка). Можно использовать функцию average, приведённую в главе.

Обратите внимание – не все матери, упомянутые в наборе, присутствуют в нём. Здесь может пригодиться объект byName, который упрощает процедуру поиска объекта человека по имени.

function average(array) {
function plus(a, b) { return a + b; }
return array.reduce(plus) / array.length;
}

var byName = {};
ancestry.forEach(function(person) {
byName[person.name] = person;
});

// Ваш код

// → 31.2