Ссылка: https://pikabu.ru/page/interview/frontend/
14. Напишите, пожалуйста, функцию, которая принимает строку, и превращает ее в хэштег:
- строка должна начинаться с символа #;
- каждое слово должно начинаться с прописной буквы, все остальные буквы строчные;
- функция должна возвращать false, если длина хэштега превышает 100 символов или равна 0;
- хэштег может содержать только буквы, цифры и символ #.
// В задании не указано что такое "буквы". Китайские тоже?
function getHashTag(str) {
let ret = str.split(' ').map(
function(x){
return x
.toLowerCase()
.replace(/[^a-zа-я0-9]/g, '')
.replace(/^(.)/g, function($1) { return $1.toUpperCase()})
}
).join('');
if (ret.length > 100 || ret.length==0) return false;
return '#' + ret;
}
15. Юному специалисту поручили написать функцию валидации URL к сайту pikabu.ru:
- поддержка протоколов http/https;
- поддомен необязателен и может содержать только буквы, цифры и дефис;
- путь и параметры после домена не имеют значения.
Однако итоговая функция получилась некачественной и вам передали эту функцию на переработку.
Предложите, пожалуйста, вариант исправления данной функции:
function isValidUrl(url)
return /(?:http|https):\/\/(?:[0-9A-z\-]*.)*(?:pikabu)(?:.ru)/.test(url);
}
// В задании не указано что такое "буквы". Китайские тоже?
function isValidUrl(url) {
/http(s?):\/\/([0-9a-zA-Z\-]+\.)?(pikabu\.ru)/.test(url);
}
16. Имеется массив флагов изменения версий продуктов number[][], в котором каждый элемент является массивом, содержащим следующие значения: id продукта, флаг изменения мажорной версии, флаг изменения минорной версии, флаг изменения патча.
Например, запись продукта #12 без изменения - [12, 0, 0, 0], с изменением минорной и патча - [12, 0, 1, 1], с изменением только мажорной - [12, 1, 0, 0].
Необходимо написать код сортировки массива по "силе" изменения версии продуктов, где самые сильные вначале массива. Например, [12, 1, 0, 0] будет сильнее, чем [12, 0, 1, 1], но слабее, чем [12, 1, 0, 1]
Пример массива:
let products = [
[11, 0, 1, 0],
[8, 1, 0, 0],
[9, 1, 0, 1],
[3, 0, 1, 1],
[15, 0, 0, 1],
]
products.sort((a,b) => {
for (let i=1; i<=3; i++) {
if (a[i] < b[i]) return 1;
if (a[i] > b[i]) return -1;
}
return 0;
});
17. Необходимо реализовать функцию Caesar для кода ниже, которая будет применять шифр Цезаря с указанным ключом (сдвигом) для указанной строки. Алфивит - 256 символов.
let enc = Caesar(3);
enc('ABC'); // DEF
enc('hello'); // khoor
Caesar(10)('script'); // }m|sz~
function Caesar(d) {
return function(str) {
return str
.split('')
.map(function(x){
return String.fromCharCode((x.charCodeAt(0) + d) % 256);
})
.join('');
}
}
18. Реализуйте, пожалуйста, ES6 класс таким образом, чтобы выполнялось следующее условие:
class Base ....
if (Base.x + Base.x === 3 && (new Base().x) === Base.x + Base.x) {
console.log('Nice!');
}
class Base {
static get x(){
if (typeof this.d == "undefined") return 1.5;
return this.d;
}
constructor() {
this.d = 3;
return {x:3};
}
}
19. Есть функция, которая удаляет все элементы с data-role="user" внутри определенного контейнера. Однако в функции закралась ошибка, которая иногда дает о себе знать: некоторые элементы не удаляются. Необходимо исправить ошибку в данной функции:
function clearContainer() {
let cont = document.querySelector('#container'),
els = cont.childNodes;
for (let i = 0; i < els.length; i++) {
if (els[i].nodeType === Element.ELEMENT_NODE
&& els[i].dataset.role === 'user') {
cont.removeChild(els[i]);
}
}
}
function clearContainer() {
document
.querySelectorAll('#container [data-role="user"]')
.forEach(function(x) {
x.parentNode.removeChild(x);
});
}
20. Пожалуйста, опишите какие вы видете реальные и потенциальные проблемы в следующем HTML коде:
[тут очень длинный кусок херового HTML, см страницу по ссылке]
1) Нет тэга с кодировкой, желательно utf-8
2) Нет аттрибута lang у тэга <html>
3) Использование http-equiv="content-language" устарело
4) Использование аттрибутов type и aid у <div>
5) Использование аттрибута align и тэга <font> - это надо делать через CSS
6) Не использование семантических тэгов вроде <header>, <nav>, <section>, <footer>, ...
7) Загрузка CSS в самом конце документа, это надо в <head> переместить
8) Использование inline JS, который, к тому же, зависит от элементов вокруг
9) Использование inline CSS
10) Не использование настоящих кнопок <button type="button"> или хотя бы <input type="button">
11) Отсутствие href в ссылках
12) Пронумерованный список создан вручную, вместо семантического <ol>
21. Напишите, пожалуйста, наиболее точный CSS селектор (один, без запятых), который выберет в заданном HTML фрагменте SPAN элементы, справа от которых стоит комментарий <!-- этот -->
Однако не все так просто! :) Допускается в селекторе использовать только один раз псевдо-классы, начинающиеся с nth- (например, nth-child(), nth-of-type() и др).
[тут очень длинный кусок HTML, см страницу по ссылке]
form > div:not([class="line"]) > input + div span:nth-child(3n-1)
22. Напишите, пожалуйста, код, который будет преобразовывать строку в волну:
- Каждый символ, должен быть помещен в span;
- До середины строки каждый тег span должен иметь увеличенный на 5 пикселей шрифт по отношению к предыдущему, начиная с 10 пикселей;
- После середины размер шрифта должен уменьшаться обратно;
- Пробелы не должны влиять на изменение размера.
Для реализации используйте строку из тега input, результат поместите в тег .result
<div><input type="text"></div>
<div class="result"></div>
Ожидаемый внешний вид:
const s = document.querySelector('input').value;
// half the length, not counting spaces
const len = (s.replace(/\s/g, '').length -1) / 2;
let htm = '';
let idx = 0;
s.split('').forEach(function(c) {
let sz = 10 + (len - Math.abs(len - idx)) * 5;
let style = ' style="font-size:' + sz + 'px"';
if (c != ' ') {
idx++;
}
htm += '<span' + style + '>' + c + '</span>';
});
document.querySelector('.result').innerHTML = htm;
Если людям будет интересно, сделаю такой же пост для backend интервью.
