Ответы пользователя по тегу JavaScript
  • Срочно! Как запустить 2 Яндекс Карты на одной странице?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы делаете
    placing.geoObjects.add(home_point).add('zoomControl');

    но zoomControl - это ни разу не geoObject, это control (см. официальню документацию). В этом месте возникает ошибка Uncaught TypeError: child.getParent is not a function, которую сразу видно в консоли. В вышеупомянутой документации есть пример того, куда нужно добавлять zoomControl.

    P.S.: Не стоит плодить одинаковые вопросы - это не ускорит получение вами ответа. Более эффективным подходом было бы сразу указать на ошибку, которая возникает и показать на строку, в которой она возникает.
    Ответ написан
    Комментировать
  • Как в jQuery случайные числа от 1 до 100, исключая выведенных?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Ответ написан
    Комментировать
  • Scroll-behavior не работает в Хроме?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    scroll-behavior работает только в firefox.
    scrollintoview тоже работает только в firefox. Хром частично умеет, но smooth его печалит. Вообщем все, что вы пробуете находится в стадии "черновика", до поддержки браузерами еще очень далеко.
    Ответ написан
    2 комментария
  • Как поставить 2 цвета в placeholder?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно использовать label - с его стилизацией проблем не будет, а при фокусе на input его поднимать/уменьшать/убирать.
    Ответ написан
    Комментировать
  • Как собрать стайлгайд?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Пробовал использовать DSS (если быть точнее grunt-dss, поскольку все остальное собиралось с помощью grunt). Несмотря на то, что этот проект давно не обновляется, использовать его вполне можно. Вся идея состоит в том, чтобы в css (less/sass/...) писать комментарии вида
    // @name Button
    // @description Button component
    //
    // @state -small     - Smaller button
    // @state -large     - Larger button
    // @state -dangerous - Indicates danderous action
    // @state -ghost     - Button with transparent background
    //
    // @see button-group
    //
    // @markup
    //      <a class="button" href="">button</a>

    и из них генерируется стайлгайд. Инструмент очень простой и поэтому легко кастомизируется - можно дописывать свои парсеры для чего-то кастомного (например если нужна информация о js для компонента или что-то еще), шаблон для всего этого - обычный html со вставками вида {{property}}.
    Ответ написан
    1 комментарий
  • Актуальны ли еще видео Sorax'a?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Да, видео Sorax`a все еще актуальны. Единственное что стоит помнить, так это то, что в видео про JS он рассказывал все используя ES5, а сейчас в наш мир медленно но верно приходит ES6, т.е. все, что он говорил до сих пор актуально, но немного дополнилось новым стандартом (который можно разобрать как дополнение к предыдущему за пару дней).
    Ответ написан
    2 комментария
  • Что значат восклицательные знаки?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Это преобразование к типу boolean, т.е. запись вида
    !! variable
    по смыслу соответствует вот этому:
    Boolean(variable)
    Ответ написан
    Комментировать
  • Как проверить колличесвто символов в строке?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    [].forEach.call(document.getElementsByClassName('num'), function(element) {
        if (element.textContent.length > 6) {
            element.classList.add('someclass');
        }
    });
    Ответ написан
    Комментировать
  • Сижу разбираюсь в JS и вот наткнулся на вот такую запись, может кто-нибудь объяснить?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Можно ее записать в более привычном виде?

    Да, это тоже самое что
    if (0 == cr) {
        a[i] = 0;
    }
    
    d.clearRect(13 * i + 3, 13 * cr_l + 3, 10, 10);
    
    k[i] = ((0,1 == b[i]) && (b[i] = a[i] = 0));
        
    if (0 == a[i]) {
        a[i] = q++;
    }
    Ответ написан
    Комментировать
  • Javascript найти элемент?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы просто вешаете обработчики события на элементы до того, как они создаются, т.е. у вас сначала выполняется
    var todoItem = document.querySelectorAll('.todo_item'); 
    [].forEach.call(todoItem, function (item) {
        item.addEventListener ....
        ....

    А сами то элементы с классом .todo_item создаются только после нажатия кнопки. Соответственно вам нужно добавлять обработчик события click к каждому элементу класса .todo_item в момент его создания.

    P.S.: хорошей практикой считается не менять CSS свойства из скриптов (в вашем случае display: none), а делать CSS классы и добавлять их к элементу или удалять (например сделать класс .hide { display: none; } и его добавлять к элементам).
    Ответ написан
    1 комментарий
  • JS(jQuery) Как получить случайный элемент массива без повторений?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В общем случае можно генерировать случайную перестановку для множества из N элементов (в вашем случае 12):
    let getRandomPermutation = (n) => {
        let arr = Array.from(Array(n).keys());
        
        for (let i = (n - 1); i > 0; i--) {
            let j = Math.floor(Math.random() * i);
            
            [arr[i], arr[j]] = [arr[j], arr[i]];
        }
        
        return arr;
    }


    И затем:
    let permutation = getRandomPermutation(colors.length);
    let temp = colors.slice();
    
    for (let i = 0; i < colors.length; i++) {
        colors[i] = temp[permutation[i]];
    }


    У вас получается отсортированный в случайном порядке массив цветов. Если нужно начать сначала - генерируете перестановку заново и круг замыкается. Разумеется можно не генерировать перестановку отдельно, а сразу сортировать нужный массив - здесь я разделил для наглядности.

    codepen.io/sfi0zy/pen/yVOMmK?editors=0012
    Ответ написан
    Комментировать
  • Как сделать ввод только float чисел и замену "," на "." через keyup?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Почему бы не добавить type="number" к вашему инпуту и не поиспользовать уже готовый функционал (вместо того, чтобы придумывать свой велосипед)? codepen.io/sfi0zy/pen/YpXgeM
    Ответ написан
    Комментировать
  • Какие альтернативы можно выбрать для JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Так как Java script это мейнтсрим

    JavaScript - это то, что будет работать в браузере у клиента. Все языки вроде CoffeeScript, ClojureScript, Dart, TypeScript и.т.д. транслируются в JavaScript. Таков мир.

    какие минусы выше перечислинных технологий относительно JS

    Не всякий JS разработчик захочет учить тот же самый Dart. В остальном - минусов особых нет, вы просто пишете на "другом" языке, а дальше система сборки за вас все делает сама.

    Какая разница между UI который можно создать на GWT и JS ?

    Никогда не использовал GWT, но возвращаясь к пункту 1 - все, что умеет JS вы в любом случае имеете в том или ином виде, следовательно разницы никакой.

    повлияет ли это на скорость загрузки станиц

    Если и повлияет, то незначительно.

    стоит ли влаживать время для изучения одного из них ?

    Стоит ли познакомиться с еще одним языком? В общем случае ответ положительный. Тем более что все эти языки достаточно простые и первое знакомство займет 2-3 дня максимум.
    Ответ написан
    Комментировать
  • Как реализовать вывод дополнительной информации для наведении?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как верно заметила Ankhena W решение на чистом CSS вполне работает. Но стоит помнить, что это действие должно происходить не только на :hover, но и на :focus (есть люди, работающие с клавиатуры). Соответственно к элементу, на который вешается hover и focus, скорее всего будет нужно добавить tabindex = 0, чтобы дать этим людям возможность перемещаться по вашим элементам с помощью tab. Пример с плавным появление дополнительной информации: codepen.io/sfi0zy/pen/KNwZGE?editors=1100
    Ответ написан
    Комментировать
  • Доступ к IP посетителя из JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Скрипт от Google Analytics выполняет запрос по адресу
    https://www.google-analytics.com/collect?....
    где вместо многоточия что-то около 20 параметров, включающие в себя все то, что смог собрать этот скрипт. Соответственно на стороне сервера к этой информации уже добавляется IP адрес (сервер в любом случае знает откуда этот запрос пришел) и все вместе уже сохраняется в вашу статистику. Другие подобные сервисы действуют аналогичным образом.
    Ответ написан
    2 комментария
  • Как сократить код?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Продолжая мысль Алексей Ярков, можно вспомнить про стрелочные функции:
    myElement.onclick = () => alert("Та-да-дам!");
    :)
    Ответ написан
    Комментировать
  • Насколько корректно пользоваться LocalStorage для взаимодействия между вкладками бразуера?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Смущает тот факт, что браузер должен записывать эти данные на диск и при частом их изменении будет лишняя паразитная нагрузка на диск.


    Провел небольшой эксперимент:
    VK_STORAGE=https_vk.com_0.localstorage
    
    cd ~/.config/google-chrome/Default/Local\ Storage
    
    while inotifywait -q -e modify $VK_STORAGE >/dev/null; do
        stat $VK_STORAGE | grep Modify
    done


    При этом слушал музыку в ВК, читал сообщения, имел несколько открытых вкладок. Эксперимент показал следующее:

    Modify: 2016-10-27 20:22:12.327308601 +0300
    Modify: 2016-10-27 20:23:12.328580890 +0300
    Modify: 2016-10-27 20:24:12.325855398 +0300
    Modify: 2016-10-27 20:25:12.327132042 +0300


    Похоже, что Chrome (53) достаточно умный и сбрасывает все это добро на диск раз в минуту, так что можно не беспокоиться о паразитной нагрузке. Полагаю, что другие современные браузеры тоже стараются работать с оперативной памятью, а не писать постоянно на диски.
    Ответ написан
    1 комментарий
  • Как сделать чтобы сумма отнималась при выборе checkbox?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В демке есть специальный скрипт, который позволяет выбрать только 1 checkbox из двух

    Не придумывайте велосипед и используйте radio button.
    Ответ написан
  • Что нужно скорректировать в коде, чтобы он начал работать?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Во-первых:
    Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

    Соответственно нужно по крайней мере что-то такое:
    document.getElementsByClassName("input-field")[0].appendChild(crElement);


    Во вторых - document.createTextNode принимает один параметр, так что если уж используете - используйте как полагается
    var crInfo = document.createTextNode(getNumber + " " + getSurname + " " + getNumber);

    И было бы очень логично заменить в этой строке первый getNumber на getName. А вообще, на будущее - лучше не называть переменные, содержащие какие-то данные, глаголами.

    В третьих - значения инпутов нужно доставать с помощью value, а не innerhtml:
    var getName = document.getElementById("name").value;
    var getSurname = document.getElementById("surname").value;
    var getNumber = document.getElementById("number").value;


    Да, и еще на будущее: прикладывайте ссылку на codepen/jsfiddle - это приятно отвечающим, не нужно самим брать ваш код, выдирать из него части и копировать туда.
    Ответ написан
    Комментировать