Ответы пользователя по тегу JavaScript
  • Как перевести объект в массив?

    kshshe
    @kshshe
    Frontend developer
    let array = Object.values(obj).map(({ name, item, type, summ }) => ([ name, item, type, sum ]));

    (Писал с телефона, мог отпечататься)
    Ответ написан
    Комментировать
  • Как сделать объект, у которого все ключи одинаковые?

    kshshe
    @kshshe
    Frontend developer
    JSON можно сформировать вручную в виде строки, но не стоит так делать. Лучше всего будет договориться с бэкендом и поменять формат.
    Ответ написан
    Комментировать
  • Workers или *** - как сделать скрипт не прекращающий работу при перезагрузке страницы?

    kshshe
    @kshshe
    Frontend developer
    Воркеры для этого действительно могут подойти, но лучше всего для гарантированной непрерывающейся работы подойдет сервер, который вы можете контролировать. Воркеры же вы контролируете не в полной мере, браузер вполне может их остановить.
    В варианте с сервером вы можете делать что-то на нем, а с фронтом всегда держать открытое соединение, например, по websocket, и управлять этой работой.
    Ответ написан
    Комментировать
  • Как сделать чтобы placeholder не исчезал, а перемещался вверх при заполнении поля?

    kshshe
    @kshshe
    Frontend developer
    Это должен быть не placeholder, а какой-нибудь label, который при input:focus будет перемещаться.

    Что-то вроде такого:
    input + label {
        // Стили для label при фокусе
    }
    input:focus + label {
        // Стили для label при фокусе
    }

    <div>
        <input />
        <label />
    </div>
    Ответ написан
    Комментировать
  • Как извлечь данные из функции объекта с цикличным вызовом?

    kshshe
    @kshshe
    Frontend developer
    function getSession(session, oid) {
    	return new Promise((resolve) => {
    		session.get([oid], (err,res) => { 
                 if(err) throw new Error(err);
                 //Какой-то код
                 resolve(/* Результат для сессии */)
            });
    	})
    }
    
    async function getTypes(sessions) {//Устройства есть 2х видов нужно, обойти их, чтобы узнать их тип и что делать дальше
        const results = [];
        for (session of sessions) { // Избавляемся от функции
        	results.push(await getSession(session, oid));
        }
    }
    Ответ написан
    4 комментария
  • Что делать после изучения основ js?

    kshshe
    @kshshe
    Frontend developer
    Я за этот вариант:
    Продолжать пытаться решить задачи на codewars, при не понимании что делать идти и гуглить.

    Почему — скорее всего, ваша проблема в том, что вы пока просто не знаете, с какой стороны подходить к задачам. Увидев несколько решений (но нужно честно разобраться, что они делают), вы поймёте практические основы и делать дальше будет просто.

    Гуглить — не плохо, если вы понимаете, что из найденного вы используете, и что оно делает. Плохо это тогда, когда такого понимания нет.
    Ответ написан
    1 комментарий
  • Почему данный код сработает?

    kshshe
    @kshshe
    Frontend developer
    Потому что когда вы пишете a = 2, не объявляя ее, значение записывается в глобальную переменную a. Если внутри функций заменить a = 2 на let a = 2, поведение поменяется.
    Ответ написан
    6 комментариев
  • Как можно скрыть ошибку в консоли?

    kshshe
    @kshshe
    Frontend developer
    Просто поменяйте код ответа на любой из диапазона 200-299. Код 400+ означает, что клиент сделал что-то неправильно, поэтому он увидит ошибку. Иногда без консоли не увидит, иногда увидит в каком-нибудь плагине число ошибок и станет хуже относиться к вашему сервису.
    Ошибки 400+ нужно отдавать тогда, когда кто-то делает неправильный запрос. То есть тогда, когда клиент (человек или js-приложение) может знать, что так делать нельзя. А если это проверка на авторизацию, то это нормальный запрос, в котором нет ошибки.
    Когда запрос корректный, клиент не ошибся, нужно отдавать код 200-299.
    Ответ написан
    Комментировать
  • Почему браузеры разрешают скриптам доступ к полю пароля?

    kshshe
    @kshshe
    Frontend developer
    Потому что, например, вам может понадобиться отправлять эти данные с помощью js на сервер без перезагрузки страницы. Или хотя бы валидировать. Поле с типом password – такое же поле, как и text, оно защищает только от того, что кто-то рядом с пользователем увидит, что введено.
    Для того, чтобы эти данные были в безопасности, браузер предпринимает разные меры – не разрешает выполнять js из адресной строки, предотвращает инъекции скриптов, предупреждает, когда вы устанавливаете дополнения, что они будут иметь доступ к вашим данным и т.д.
    То есть в обычном варианте на страницу какого-либо сайта не попадет никакой скрипт кроме того, который туда поместят те, кто его делают. А в таком случае это безопасно.

    Насчет разрешения "доступ к паролям" – никто не запрещает сделать заявку ко всем основным браузерам с тем, чтобы это реализовали. Если это будет на самом деле востребовано, вполне же может появиться.
    Ответ написан
    Комментировать
  • Как попрактиковаться в js с минимум знаний?

    kshshe
    @kshshe
    Frontend developer
    Я в начале пути просто игрался с консолью. Менял поведение каких-нибудь штук на сайтах, собирал какие-нибудь данные и тд.
    Ответ написан
    Комментировать
  • Как сделать задержку в цикле for in в jQuery?

    kshshe
    @kshshe
    Frontend developer
    Так? Поменял ваш пример

    Можно обернуть всю работу в асинхронную функцию, тогда вам будет доступна удобная работа с асинхронностью.
    // Где-то выше
    const delay = (ms) => new Promise((resolve) => {
    	setTimeout(resolve, ms);
    });
    
    // Это уже в асинхронной функции
    /*
       Можно вызвать в любом месте в асинхронной функции, тогда код, условно, 
       остановится там на 1000 миллисекунд и продолжится, когда Promise из delay зарезолвится
    */
    await delay(1000);


    Вот именно ваш случай:
    const delay = (ms) => new Promise((resolve) => {
    	setTimeout(resolve, ms);
    });
    
    (async () => {
      for (var key in contact) {
        var obj = contact[key];
        for (var prop in obj) {
          $('[name="'+prop+'"]').val(obj[prop]);
          console.log(key + " " + obj[prop]);
        }  			
        await delay(1000);
      }
    })()
    Ответ написан
    2 комментария
  • Как на js вызвать hover?

    kshshe
    @kshshe
    Frontend developer
    .elem {
        width: 100px;
        height: 100px;
        background: yellow;
    }
    .elem:hover,
    .elem.hover {
        background: blue;
    }


    document.querySelector('.elem').classList.add('hover');
    Ответ написан
  • Почему логический оператор в выражении возвращает вместо булевского значения строку?

    kshshe
    @kshshe
    Frontend developer
    По ссылке из предыдущего ответа: https://learn.javascript.ru/logical-ops
    оператор && вычисляет операнды слева направо до первого «ложного» и возвращает его, а если все истинные – то последнее значение.
    Ответ написан
    Комментировать
  • Как сменить background-image по таймеру?

    kshshe
    @kshshe
    Frontend developer
    var bg = ["img/background.jpg", "img/background_2.jpg"];
    var index = 0;
    
    var timer = setInterval(() => {
        var s = document.getElementById('main').style;
        s.backgroundImage = 'url('+bg[index++ % bg.length]+')';
    }, 2000);


    Пояснение:
    Раз в 200 миллисекунд вызывается эта функция:
    () => {
        var s = document.getElementById('main').style;
        s.backgroundImage = 'url('+bg[index++ % bg.length]+')';
    }


    Мы увеличиваем счетчик:
    index++

    Берем остаток от деления на длину массива (в данном случае 2):
    index++ % bg.length

    Получаем индекс фона, который при увеличении счетчика будет таким:
    index, index % 2
    0        0
    1        1
    2        0
    3        1
    И так далее


    Когда вы добавите в массив элементы, то таким:
    index, index % 2
    0        0
    1        1
    2        2
    3        0
    4        1
    5        2
    И так далее
    Ответ написан
    1 комментарий
  • Как передать в функцию аргументы?

    kshshe
    @kshshe
    Frontend developer
    Замените iduse(k) на () => iduse(k)
    Ответ написан
    Комментировать
  • Как можно вывести фразу с помощью цикла Js?

    kshshe
    @kshshe
    Frontend developer
    Циклы обязательны? Можно без них:
    "Ура! ".repeat(3) + "Это победа!"

    Если важны циклы, то так:
    let string = "";
    for (let i = 0; i < 3; i++) {
    	string += "Ура! ";
    }
    string += "Это победа!";
    Ответ написан
  • Как парсить json с вложениями?

    kshshe
    @kshshe
    Frontend developer
    Поиск по несортированному массиву потребует перебора всех элементов (O(n)). Лучшее, что тут можно сделать -- проиндексировать этот массив:

    // Займет O(n) времени, но только один раз
    let indexedItems = {};
    marketAPI.items.forEach(item => {
    	indexedItems[item.market_hash_name] = item;
    });
    
    // Это уже займет O(1)
    let name = 'Anterior of the Abysm';
    let object = indexedItems[name];

    Но это имеет смысл только если у вас получение объекта по значению его поля происходит больше одного раза. Если только один, и это не поменяется, улучшить никак не выйдет, если нельзя поменять выдачу.
    Ответ написан
  • Нужно ли руками удалять события, которые вешались на элемент с помощью метода addEventListener?

    kshshe
    @kshshe
    Frontend developer
    Лучше удалить вручную. Они удалятся, если на элемент в памяти не останется никаких ссылок, но это потенциальное место для утечек, так что будет лучше удалять.
    Ответ написан
    Комментировать
  • Возле каждого li вывести количество вложенных в него li, как это сделать?

    kshshe
    @kshshe
    Frontend developer
    Подсказка

    Можно делать так:
    const someElement = document.getElementsByTagName("someTag");


    А можно так:
    const someChild = someElement.getElementsByTagName("someTag");
    Ответ написан
    Комментировать
  • Как записать данные из асинхронной функции?

    kshshe
    @kshshe
    Frontend developer
    Поскольку два ответа добавлять нельзя, у этого ответа будет две части.

    Часть 1, если нужно решить только эту проблему.

    Скорее всего, вы делаете что-то такое:
    var file;
    getFiles("./",[], function(result){
        file = result;
        return file;
    });
    console.log(file);

    Если да, то это распространенная ошибка тех, кто начинает разбираться с асинхронностью.

    Если сделать так, то вот, что будет происходить:

    1. Объявилась переменная
    var file;

    2. "Создай запрос на получение файлов. Когда они будут получены, вызови коллбек" (очень примерно)
    getFiles("./",[], function(result){
        file = result;
        return file;
    });


    3. Выводите file (пустой)
    console.log(file);

    4. Файлы получены, вызывается коллбек. Return отсюда никуда не попадает.
    file = result;
    return file;


    Как можно сделать

    Вариант 1:
    getFiles("./",[], function(result){
        var file = result;
        // Дальше работаем с file здесь
    });


    Вариант 2:
    function getFiles(directoryPath) {
        return new Promise((resolve, reject) => {
        	fs.readdir(directoryPath, (err, files) => {
    	       let arrFiles = [];
    	       // ... Добавляете в arrFiles нужную информацию
                   if (err) {
    	        	console.log(err);
    	        	reject(err);
    	        }
    	        resolve(arrFiles);
    	    });
        })
    };
    
    // где-то выше
    async function someFunction() { // Функция, где находится var file и остальное
    	// ...
    
    	try {
    		var file = await getFiles("./"); // Здесь await заставит ваш код "ждать", пока из Promise в getFiles не будет вызван resolve
    		console.log(file);
    	} catch (e) {
    		// Сделать что-то с ошибкой
    	}
    
    	// ...
    }


    Часть 2, если нужно понять, как быть в таких ситуациях в дальнейшем.

    Добавьте в свой код перед вызовом getFiles ключевое слово debugger, вот так:
    var file;
    debugger;
    getFiles("./",[], function(result){
        file = result;
        return file;
    });

    Перед запуском скрипта откройте chrome://inspect. Нажмите на "Open dedicated DevTools for Node".
    Запустите скрипт с параметром --inspect, вот так:
    node --inspect myScript.js

    После запуска скрипт остановится и вы сможете выполнять его постепенно, понимая, где находится ошибка. В дебаггере справа-сверху будет несколько кнопок с разными вариантами переходов, вам нужен "Step", это точка и прямая стрелка вправо. Когда вы будете на нее нажимать, будет выполняться текущая операция и на следующей код снова остановится.
    Ответ написан