Задать вопрос
  • Можно ли получить имена аргументов функции в JS?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Аргументы хранятся в arguments.
    UPD:
    Имена аргументов можно получить костыльным методом. Тупо разбивая строку func.toString() Другого выхода вроде нет. Вот нагуглил такой код
    function getArgs(func) {
      // First match everything inside the function argument parens.
      var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];
     
      // Split the arguments string into an array comma delimited.
      return args.split(',').map(function(arg) {
        // Ensure no inline comments are parsed and trim the whitespace.
        return arg.replace(/\/\*.*\*\//, '').trim();
      }).filter(function(arg) {
        // Ensure no undefined values are added.
        return arg;
      });
    }
    // Пример
    function a(b,c) { }
    getArgs(a); // ['b', 'c']

    Можете объединить этот код с arguments, чтобы получать и имена и значения.
    function  Worker(name, surname, rate, days) {
        var names = getArgs(Worker);
        for (var i = 0; i < names.length; i++) {
           var name = names[i];
           var value = arguments[i];
           console.warn(name, value); // Выведет имя аргумента и его значение. 
           // Значение будет undefined если оно не будет передано 
        };
      }

    Но это тупо, т.к. аргументы имеют имена только в том случае, если они явно объявлены, иначе они просто имеют индекс в arguments. Для этих задач лучше использовать объект.
    Ответ написан
    2 комментария
  • Хотите задать вопрос администрации Тостера?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Меня как "писателя кода" волнует две вещи:
    1) Будет ли тут встроенный jsfiddle как у Stackoverflow? С отображением консоли.
    Пример
    5ae3803005ff5932382337.jpeg

    2) Сочетания клавиш. Очень не хватает банальных сочетаний клавиш типа:
    • Табуляция, все время жму табуляцию и фокус переходит на кнопку "Опубликовать". Было бы круто, если бы хотя бы табуляция работала когда курсор находится внутри тега код.
    • CTRL+/ для комментирования
    • CTRL+{, CTRL+} для увеличения/уменьшения отступов (табуляции/пробелов)
    • Переместить строку выше/ниже
    • Мультикурсор... шучу конечно. Хотя было бы круто.

    Понятно, что можно делать в своем текстовом редакторе, а потом копировать сюда. Но не всегда отступы нормально копируются (тут бы помогло CTRL+{), да и часто лень запускать редактор (или нет возможности).
    3) Также не хватает сочетания клавиш для обычного текста, чтобы сделать выделенный текст жирным CTRL+B, курсивом CTRL+I и.т.д. Приходится мышкой делать.
    4) Не хватает тега для перечеркивания текста.
    5) Возможность пользователям с определенным рейтингом в определенном теге, помечать ответ "верным" в посте с в этом определенном теге. Многие тут пишут про автоматическое определение по кол-во лайков, или голосованием, но так будет корректнее, т.к. не будут помечаться юморные ответы, которые только из-за шутки набрали рейтинг. Можно сделать также голосованием, но экспертами в этом теге. Но есть риск, что не популярные вопросы не будут помечены, т.к. только один эксперт зайдет. Ну или банально плашку при заходе на сайт "В момента вашего вопроса прошло 2 недели, выберите верный ответ.
    6) Хотелось бы систему сниппетов ответов, или микроблог. Часто получается так, что приходится отвечать на одинаковые вопросы, или дополнять свой ответ своим старым ответом (и искать его долго), а своего блога нет. Можно было бы сделать в профиле пользователя публичный микроблог с рейтингом, где содержались бы какие-то ответы, интересные штуки, краткие уроки и.т.д. Вроде есть хабр, но там уровень выше в разы.

    PS: Было две вещи, дальше я что-то заигрался :-)

    UPD:
    7) Не хватает нумерации строк в коде, чтобы ссылаться на них в тексте ответа.
    Ответ написан
    1 комментарий
  • Прошу объяснить неопытному кодеру почему не работает этот чертов код...(?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Старый ответ
    let symbolsCounter = 0;
    let mistakesCounter = 0;
    function checkUsersKey (levelText) {
      var theEnd = false;
      var counterLetters = 0;
      var keyName;
      while (theEnd != true ) {
        document.addEventListener("keypress", (event) => {
          keyName = event.key;
          if(levelText[counterLetters] == keyName){
              alert("true");
          }
        })
        
    
        theEnd = true;
      }
    }
    checkUsersKey("something");



    Я переписал ваш код, прочитайте комментарии в нем.
    // Не очень понятно, зачем эти переменные
    let symbolsCounter = 0;
    let mistakesCounter = 0;
    
    function checkUsersKey (levelText) {
      var theEnd = false;
      var counterLetters = 0;
      var keyName;
      
      function checkKeyEvent(event) {
        keyName = event.key;
        // Это условие прекращает ваш "цикл". 
        if(theEnd) {
            document.removeEventListener('keypress', checkKeyEvent);
            return;
        }
        if(levelText[counterLetters] == keyName){
            alert("true");
        }
        // У вас в коде почему-то в конце цикла theEnd = true, это значит, что цикл не повторится.
        // Мне кажется это ошибка, но я все равно перенес ее в код для примера.
        // Можете изменять переменную в true например когда получите нужную клавишу. 
        theEnd = true;
      }
      document.addEventListener("keypress", checkKeyEvent);
    }
    checkUsersKey("something");
    Ответ написан
    Комментировать
  • Как сделать кастомные кнопки для HTML5 video?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Можно еще попробовать стилизовать существующие элементы при помощи теневого DOM. Вот псевдоэлементы
    video::-webkit-media-controls-fullscreen-button {}
    video::-webkit-media-controls-play-button {}
    video::-webkit-media-controls-timeline {}
    video::-webkit-media-controls-current-time-display{}
    video::-webkit-media-controls-time-remaining-display {}
    video::-webkit-media-controls-mute-button {}
    video::-webkit-media-controls-toggle-closed-captions-button {}
    video::-webkit-media-controls-volume-slider {}
    Ответ написан
    2 комментария
  • Как сделать сей декоративный элемент?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Блок с абсолютным позицированием, который имеет верхний, правый и нижний бордер. Левый бордер реализуется через псевдоэлементы :before (с top: 0px) и :after (с bottom: 0px).
    Ответ написан
    1 комментарий
  • Свойство box-sizing: border-box работает только для элементов с заданной шириной?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Изображение не будет уменьшаться, т.к. это контент, он задает ширину независимо от padding. Он задает ширину на основе установленной ширины и отступов. Возможно для вашей задачи лучше подойдет установка фиксированного размера, ну или же outline.
    Ответ написан
  • Vue, применение стилей к одному из нескольких одинаковых элементов?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Делайте получение стиля через метод, в который будете передавать Id по которому определять какой стиль вернуть. Ну или прямо в атрибуте пишите
    <div v-bind:class="{ 'класс_для_определенного': id === 10, 'класс_для_всех': true }></div>
    Ответ написан
    Комментировать
  • Как "проскроллить" страницу при открытии вниз на 300-500px?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Через CSS нельзя указать позицию скролла, только через JS
    document.addEventListener("DOMContentLoaded", function(event) { 
      window.scrollTo(0, 100); // Переместим позицию скрола на 100px
    });
    Ответ написан
    3 комментария
  • Как подгружать изображения по требованию (клику)?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы скорее всего делаете что-то не так. Вот так должна выглядеть превьюшка.
    <a href="fullimage.jpg">
       <img src="thumbimage.jpg">
    </a>

    Таким образом, браузер не будет загружать изображение из a href, а только превьюшку thumbimage.jpg
    Ответ написан
  • Как сгенерировать меню жанров фильмов, столбцами?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Можно использовать свойство columns, которое выводит список колонками, сверху-вниз, слева-направо. https://codepen.io/VladIT4/pen/RyWKpO
    Можно использовать слева-направо, сверху-вниз inline-block https://codepen.io/VladIT4/pen/bMVgWV
    Можно использовать слева-направо, сверху-вниз flex https://codepen.io/VladIT4/pen/erpgWE
    Еще можно через float.
    Вариантов куча.
    Ответ написан
  • Как обратится к объекту из динамически созданного div?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Используйте dataset, передавая в него ссылку на объект.
    $('#block').data('obj', { a: 10, b: 20});
    console.warn($('#block').data('obj').a); // Выведет 10

    В нем можно хранить ссылки на объекты, и потом их легко получать через метод data. Также и будете писать $(this).data('obj').name
    Ответ написан
    1 комментарий
  • Как сделать раскрытие списка select при наведении мышью?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Не уверен, что можно сделать на обычном select без костылей вида триггера на клик для раскрытия. Но в выбранном вами select2 точно можно, там API позволяет открывать список. Вот сделал пример https://codepen.io/VladIT4/pen/Xqmpda
    Ответ написан
    1 комментарий
  • Как отслеживается клик вне элемента?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Отслеживаете клик на document, и если event.target не является нужным элементом, то выполняем код закрытия.
    UPD: Пример https://codepen.io/VladIT4/pen/vjNOKW
    Ответ написан
    2 комментария
  • Замена процессора на более мощный. Какие могут быть проблемы?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Вы можете ставить хоть Core i7-840QM если сколхозите охлаждение. В обычной работе он не будет требовать хорошего охлаждения, а во время игр можете ставить его на охлаждающую подставку. Для совсем маньяков, на дней ноутбука прямо под вентилятором, можно просверлить дырки (это если таковых нет, и вентилятор берет воздух из под клавиатуры как у ноутбуков Toshiba Satellite). Также можно отломать пластиковые палочки корпуса ноутбука охраняющие радиатор, +1% к охлаждению =) Еще используйте хорошую термопасту, если сердечник радиатора медный, то можно жидкий метал. Еще можно повысить напряжение вентилятора (способов уйма, начиная от внешнего питания с переключателем на внутреннее, заканчивая DC-DC повышающим преобразователем). Звучит все это дико, но это работает.
    Ответ написан
    4 комментария
  • Как вызвать окно поделиться android на сайте html?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Думаю это вам поможет https://developers.google.com/web/updates/2016/09/...
    Ответ написан
    Комментировать
  • Какой плагин использовать для реализации такого слайдера?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы можете легко взять Slick Сверстать этот блок с кнопками отдельно, и для стрелок назначить параметры prevArrow/nextArrow на нужные кнопки. Кол-во слайдов можете посчитать путем поиска по селектору слайда $('.slide__item').length. А текущий слайд получать и менять в событии beforeChange в аргументе currentSlide.
    Ответ написан
    8 комментариев
  • Максимальный вес JS файлов?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Чем меньше, тем лучше. т.к. точно сказать сложно, например для человека с нормальным интернетом, скрипты на 1 Мб особо не помешают, а для человека с мобильным помешают еще как.
    120Кб с gzip превратятся в 20-40Кб. jQuery из 84 Кб превратится в 15-30. Особой проблемы в таком случае не вижу.
    Ответ написан
    Комментировать
  • Нужно ли у заказчика спрашивать про фреймворки?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Вам задали задачу, если явно не указали, что использовать (терпеть не могу, когда заставляют использовать bootstrap 3), то это на ваш выбор, главное чтобы на выходе все было стандартно, чтобы программист мог без проблем натягивать.
    Bootstrap пользуется популярностью на фрилансе, еще какой. Требуют даже там, где казалось бы он абсолютно не нужен.
    Ответ написан
    2 комментария
  • Как понять такой код?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Блок IF - в скобках идет перечисление команд через запятую.

    Оператор запятая. Выполняет все блоки, но возвращает последний. т.е. типа зачем-то туда засунули присваивание элементов.
    В третьем случае непонятно, зачем они это сделали, т.к. точно также бы работала ;. Видимо ожидалось, что в начале будет return, и тогда можно будет все в одну строчку написать через запятые.
    Почитать тут https://habrahabr.ru/post/116827/
    UPD: Вот я его вам перевел в нормальный вид.
    function LongClick(e, t, n) {
        "use strict";
        var i = this;
        
        this.trackingClick = false;
        this.trackingClickStart = 0;
        this.targetElement = null;
        this.touchStartX = 0;
        this.touchStartY = 0;
        this.touchBoundary = 10;
        this.time = t;
        this.handler = n;
        this.timer = null;
        this.layer = e;
    
        if (!e || !e.nodeType) {
            throw new TypeError("Layer must be a document node");
        }
        this.onTouchStart = function() {
            return LongClick.prototype.onTouchStart.apply(i, arguments);
        };
        this.onTouchMove = function() {
            return LongClick.prototype.onTouchMove.apply(i, arguments);
        }; 
        this.onTouchEnd = function() {
            return LongClick.prototype.onTouchEnd.apply(i, arguments);
        }; 
        this.onTouchCancel = function() {
            return LongClick.prototype.onTouchCancel.apply(i, arguments);
        };
        if(window.navigator.msPointerEnabled) {
            this.startEventName = "MSPointerDown"; 
            this.moveEventName = "MSPointerMove"; 
            this.endEventName = "MSPointerUp"; 
            this.cancelEventName = "MSPointerCancel"
        } else {
            this.startEventName = "touchstart"; 
            this.moveEventName = "touchmove"; 
            this.endEventName = "touchend"; 
            this.cancelEventName = "touchcancel";
        }
        e.addEventListener(this.startEventName, this.onTouchStart, false);
        e.addEventListener(this.moveEventName, this.onTouchMove, false);
        e.addEventListener(this.endEventName, this.onTouchEnd, false);
        e.addEventListener(this.cancelEventName, this.onTouchCancel, false);
    }
    Ответ написан
  • Почему не работает align-content, когда одна строка?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Используйте не align-content, а align-items
    UPD: align-content используется для выравнивания элементов при переносе на следующие строки (с flex-wrap: wrap).
    Ответ написан
    1 комментарий