Задать вопрос
  • Как во Vue.js присвоить значение полученное из props переменной?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    А для чего это нужно? Ведь значения из props рекативны. Можно через watch https://codepen.io/VladIT4/pen/MGJwGO?editors=1010

    UPD:
    как присвоить объект

    Объект еще проще, т.к. он ссылочный тип, то и watch делать не надо. Связь будет двух сторонняя. https://codepen.io/VladIT4/pen/VxPLVo?editors=1010 но так лучше не делать, нужна явная связь между компонентами, через v-bind и события.
    Ответ написан
    Комментировать
  • Вызов функции из другой функции JavaScript?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    document.write(1); из функции Test стирает документ, а значит удаляет элемент user_1. В функции Test1 вы пытаетесь на него сослаться, а его уже нет, поэтому в ошибке и пишется "Не могу установить свойство innerHTML в null"
    Ответ написан
    1 комментарий
  • Как сделать кнопку "Закрыть меню"?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    $('div.menu').prepend('<div id="menu-icon">Открыть меню</div>');
        
        $("#menu-icon").on("click", function(){
        $("ul.menu").fadeToggle();
         
         $("ul.menu").toggleClass("expanded");
         if ($("ul.menu").hasClass("expanded")) {
            $("ul.menu").html("Закрыть меню");
         } else {
            $("ul.menu").html("Открыть меню");
         }
     });

    Ну и поменяйте местами тексты если будет отображаться наоборот.
    UPD: Поменял немного код, вместо $this поставил $("ul.menu").
    Ответ написан
    Комментировать
  • Как реализовать клавиатурный тренажер на JavaScript + помощь с функцией?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вы немного не понимаете, как работают события (судя по этому, и предыдущему вопросу). Грубо говоря, метод document.addEventListener("keypress", checkKeyEvent) создает событие нажатия на клавишу клавиатуры, которое будет выполнять переданную функцию. Если нажать клавишу, то выполняется событие keypress, которое выполнит функцию checkKeyEvent, в которую передается объект события (а в нем и нажатая клавиша).
    Не нужно вызывать добавление события в цикле, вызовете один раз, и уже в функции checkKeyEvent делайте проверку.
    function checkKeyEvent(event) {
         // При нажатии на клавишу выполняется эта функция. Каждый раз.
    }
    document.addEventListener("keypress", checkKeyEvent);

    Ваш цикл while(counterLetters < levelText.length) { будет бесконечным, т.к. значение levelText или counterLetters не меняются. Даже если бы он не был вечен, он бы породил множество обработчиков событий, а нам нужно только одно. Циклы тут вообще не нужны. Вот такой код. Постарался подробно прокомментировать.
    let mistakesCounter = 0;
    // Это ваша getChar. Не знаю точно, такая же реализация, но это довольно известный код
    function getChar(event) {
        if (event.which == null) { // IE
            if (event.keyCode < 32) return null; // спец. символ
            return String.fromCharCode(event.keyCode)
        }
    
        if (event.which != 0 && event.charCode != 0) { // все кроме IE
            if (event.which < 32) return null; // спец. символ
            return String.fromCharCode(event.which); // остальные
        }
    
        return null; // спец. символ
    }
    
    function checkUsersKey(levelText) {
        var theEnd = false;
        var counterLetters = 0;
        var keyName;
    
        function checkKeyEvent(event) {
            // Делаем проверку, если текущий символ равен длинне символов...
            if (counterLetters >= levelText.length) {
                // То удаляем обработку события чтобы завершить печатанье.
                document.removeEventListener('keypress', checkKeyEvent);
                // Тут можете вывести сообщение пользователю, что задание закончено
                return;
            }
            keyName = getChar(event);
            // Это ваш код, проверяет, правильно ли пользователь ввел
            if (levelText[counterLetters] == keyName) {
                alert("Проверка 1 (значение true): работает"); //просто проверка
                counterLetters++;
                //тут будет код, который меняет css буквы
            } else if (keyName == null) {
                //do nothing
                alert("Проверка 2")
            } else {
                alert("Проверка 3 (else): работает");
                //тут будет код, оповещающий о том, что пользователь допустил ошибку
                mistakesCounter++;
            }
        }
        // Добавляем обработку события нажатия клавиши на функцию checkKeyEvent
        // Добавляем только один раз, она будет вызывать checkKeyEvent после каждого нажатия и удержания клавиши
        document.addEventListener("keypress", checkKeyEvent);
    }
    checkUsersKey("something");
    Ответ написан
    Комментировать
  • Можно ли получить имена аргументов функции в 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 комментариев