Ответы пользователя по тегу JavaScript
  • Как взять значение из элемента?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Допустим, у вас такая разметка:
    <section>
      <article>
        <a href="#">1 ссылка</a>
      </article>
    </section>


    Цифру "1" можно получить так:
    const el = document.querySelector('a'); // находит первый подходящий элемент
    const text = el.innerText;
    const digitText = text.substring(0,1); // тут будет текст единичка
    const digitNumber = +digitText; // тут уже число 1


    С тегом span так же:
    const el = document.querySelector('span'); // найдет самый первый элемент span в документе


    Если элементов span, например, много, а нужен единственный внутри, скажем, известного div'а
    <span>не нужный</span>
    <div id="theone">
      <span>300 спартанцев</span>
    </div>

    в таком случае можно указать id дива и внутри него искать первый элемент span:const span = div.querySelector('#theone span');
    Ответ написан
    Комментировать
  • Генерируемый список Js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    См. Node.insertBefore()

    Что-то типа:
    function insertFirst(id) {
      const li = document.createElement('li'); // создали новый листайтем
      li.innerText = "меня тут не стояло";
      const parent = document.getElementById(id); // это ul
      const first = parent.firstChild; // это первый li до вставки
      parent.insertBefore(li, first); // впихнули новый li перед бывшим первым
    }
    Ответ написан
  • Не могу понять работу метода .map?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    function camelize(str) { // на вход приходит строка
       return str      // вот тут пока ещё строка
         .split('-')   // здесь из этой строки сделали массив, разбив её по символу дефиса
                       // ниже пошёл массив ["lol", "kek", "cheburek"]
         .map((word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)) // что-то сделали с каждым элементом массива
         .join(''); // соединяет ['my', 'Long', 'Word'] в 'myLongWord'
     }


    Теперь упростим непонятную строку.
    К ней пришёл массив, у которого вызывается метод map() – он просто применит функцию в нём к каждому элементу массива. На выходе получится новый массив.
    .map((word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)) //**
    
    // то же самое, что:
    .map(
      function(word, index) {
         return index == 0 ? word : word[0].toUpperCase() + word.slice(1);
      }
    )
    
    // то же самое, что:
    .map(
      function(word, index) {
        if (index == 0) {
          return word;
        } else {
          return word[0].toUpperCase() + word.slice(1);
        }
      }
    )


    Метод массива .map() вызывает функцию, которая в нём аргументом, для каждого элемента массива и передёт в неё следующие три параметра:
    1. Текущий обрабатываемый элемент массива.
    2. Индекс текущего обрабатываемого элемента в массиве.
    3. Массив, по которому осуществляется проход.
    Ответ написан
    1 комментарий
  • Почему не получается перезаписать символ в двумерном массиве?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Строку разбили по пробелам на слова. И затем у каждого слова пытаетесь заменить первый символ на его заглавную версию. Но вот такой доступ к строке как к массиву букв работает только «для чтения»:
    mass[i][0]

    Нельзя просто взять и .. заменить символ в строке.

    См. Доступ к символам:
    отрывок документации
    Другим способом (введённым в ECMAScript 5) является рассмотрение строки как массивоподобного объекта, в котором символы имеют соответствующие числовые индексы:
    return 'кот'[1]; // вернёт "о"
    При доступе к символам посредством нотации с квадратными скобками, попытка удалить символ, или присвоить значение числовому свойству закончится неудачей, поскольку эти свойства являются незаписываемыми и ненастраиваемыми. Смотрите документацию по методу Object.defineProperty() для дополнительной информации.


    Вариант решения – сделать из каждого слова настоящий массив букв:
    const titleCase = str => str
        .toLowerCase()
        .split(' ')
        .map(word => {
          const chararr = word.split('');
          chararr[0] = chararr[0].toUpperCase();
          return chararr.join('');
        })
        .join(' ');
    
      titleCase("I'm a little pea"); // I'm A Little Pea
      titleCase("I love the sky and the trees"); // I Love The Sky And The Trees
    Ответ написан
  • Как привязать клик по элементу создаваемых в цикле?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вместо onClick используйте addEventListener()


    Upd. Корректнее вешать единственный общий обработчик на родительский элемент - он «поймает» все клики на элементы внутри себя.
    Ответ написан
    3 комментария
  • Танцы с обьектом и деструктуризацией?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    ({email} = body)
    Оно?

    Пример:
    {
      const body = {
        email: 'myEmail'
      };
    
      console.log(
        ({email} = body)   // Object { email: "myEmail" }
      );
    }


    См. Object Destructuring - Assignment without declaration
    Ответ написан
    Комментировать
  • Как можно созать видео динамичнеских графиков?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Точно можно сделать в Adobe After Effects: они умеют читать данные и связывать любые свойства с прочитанными параметрами. Но пока не придумал, как автоматизировать плавную смену позиций соседних стран, поднимающаяся всегда сверху над опускающейся.

    Другой вариант, сделать весь график и его анимацию в веб-среде, с помощью тех же D3.js и затем экспортировать её в видео программно или просто записью экрана.
    Ответ написан
    Комментировать
  • Корректировка JS кода ( сложение, вычитание )?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Раз используется jQuery почему бы сразу не отбирать нужные чекбоксы. И считать сумму их цен. При этом предыдущее значение цены никому уже не нужно, никаких вычитаний.
    function Check() {
      var price = 0;
      var PriceBoxes = $('[name=Price][type=checkbox]:checked');
      if (PriceBoxes.length) price = $.makeArray(PriceBoxes)
        .map(el => +el.value)
        .reduce((p,c) => p+c);
        
      $('.message').val(price);
    }


    Ответ написан
    4 комментария
  • Как один div спрятать, а другой вывести после нахождения на сайте более одной минуты?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬


    Только вместо 3000 (3 секунд) поставьте 6E4 (60000, минуту)
    Ответ написан
    Комментировать
  • Как отменить удаление элемента с помощью mutationobserver?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В коллбэк передаётся ссылка на удалённый(-е) элемент(ы).

    Аргумент коллбэка – массив MutationRecord'ов. При единичном удалении там один элемент. У него есть свойство removedNodes — это NodeList удалённых элементов.

    spoiler
    (1) […]
    ​  0: MutationRecord
    ​​  addedNodes: NodeList []
    ​​  attributeName: null
    ​​  attributeNamespace: null
    ​​  nextSibling: #text "
      "
    ​​  oldValue: null
    ​​  previousSibling: #text "
      "
    ​​  removedNodes: NodeList(1)
    ​​​    0: <li id="to-delete">
    ​​​    length: 1
    ​​​    <prototype>: NodeListPrototype { item: item(), keys: keys(), values: values(), … }
    ​​  target: <ul id="someElement">
    ​​  type: "childList"
    ​​  <prototype>: MutationRecordPrototype { type: Getter, target: Getter, addedNodes: Getter, … }
      length: 1
    ​  <prototype>: Array []


    Можно тут же их попробовать вставить назад в родителя, хотя бы в конец:
    Ответ написан
    Комментировать
  • Как передать id элемента через переменную js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Путаете id элемента и сам элемент.

    HTML:
    <div id="my-div">Привет!</div>

    JS:
    var id = "my-div"; // это id
    var el = document.getElementById(id); // элемент
    el.getBoundingClientRect() // должно работать
    Ответ написан
    1 комментарий
  • Как сделать проверку что если хотя бы один чек бокс выбран?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В обработчике проверять коллекцию чекбоксов до первого включенного и ставить класс родителю.

    По картине трудно посоветовать конкретнее. Лучше бы привели разметку.
    Ответ написан
    Комментировать
  • Как подсчитать числа в этом коде?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Надо понимать, что этот код делает. Он составляет все возможные комбинации из заданных чисел, длиной столько же цифр – и возвращает массив этих чисел. Вас интересует его длина.
    • Можно взять длину массива, который вернули.
    • Можно взять длину Nисходного массива и возвести её в степень себя: NN.
      Для трёх это будет 3 в кубе 3*3*3 = 27
    Ответ написан
    Комментировать
  • Как сделать цикл который генерирует числа из 1, 2, 3?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    const shred = arr => arr.reduce((p,c,i,a) => {
        const f = prefix => {
          for (let j=0; j<a.length; j++)
            if (prefix.length < a.length - 1) {
              f(prefix + a[j]);
            } else {
              p.push(+(prefix + a[j]));
            }
        }
        f(c.toString());
        return p;
      }, []);
      
      shred([1,2,3]);
    /*
    [111,112,113,121,122,123,131,132,133,211,212,213,221,222,223,231,232,233,311,312,313,321,322,323,331,332,333]
    */
    Ответ написан
    Комментировать
  • Как подключить все js библиотеки в 1 файл?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    UglifyJS

    Установить (понадобится nodejs + npm):
    npm install uglify-js

    Собрать и сжать несколько библиотек в один файл:
    uglifyjs --compress -o result.js -- jquery.js  lib2.js  lib3.js

    В результате получится один файл result.js, который содержит в себе все указанные выше билиотеки. Его одного и подключайте в страницу.
    Ответ написан
    Комментировать
  • Как реализовать поставленную задачу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно считать градиенты с соседними элементами, при этом следующий становится предыдущим:
    function countLocalMax(arr) {
        const last = arr.length;
        let prevGrad = 1;
        return arr.reduce((p,c,i,a)=>{
          const nextGrad = i === last ? -1 : a[i+1] - c;
          if (prevGrad >= 0 && nextGrad <= 0) p++;
          prevGrad = nextGrad;
          return p;
        }, 0);
      }
    
    countLocalMax([0,0,3,4,5,4,0,-1]); // 2

    Для нулевого элемента массива считаем "предыдущий" градиент положительным, для последнего – отрицательным.
    Элемент локальный максимум, если предыдущий градиент не отрицательный и следующий не положительный.
    Ответ написан
  • Как добавить элемент?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Как добавить элемент в конец ?

    appendChild()

    Неправильный, но легкий способ: если у родителя не навешаны слушатели событий, то просто заменить HTML:
    var runRo1 = document.getElementsByClassName('btn send-private-message-btn white');
    if(runRo1.length == 1){
      runRo1[0].innerHTML += '<div class="buy-deposit btn white" only-other-profile="">Забронировать на бирже</div>';
    }


    Но если вариант с innerHTML что-то порушит - перестанет там где-то реагировать на клики, то надо делать «правильно»: создавать элемент и вставлять в конец через appendChild():
    if(..) {
      const div = document.createElement('div');
      div.classList.add('buy-deposit', 'btn', 'white');
      div.setAttribute('only-other-profile', '');
      div.appendChild( document.createTextNode('Забронировать на бирже'));
      runRo1[0].appendChild(div);
    }
    Ответ написан
    Комментировать
  • Как сделать fetch запрос к сайду недоступном на территории РФ?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если запрос делать из браузера, то в настройках браузера сначала надо ввести этот прокси-сервер, и все запросы, включая fetch() пойдут через него.

    Если из Node.js, то, например, модуль TooTallNate/node-https-proxy-agent позволит в параметрах fetch() указывать прокси, через который выполнять подключение.
    fetch('https://www.google.com',{ agent:new HttpsProxyAgent('http://127.0.0.1:8580')})
    .then(function(res){
        //...
    })
    Ответ написан
    4 комментария
  • Как сгенерировать случайное число, содержащее две единицы?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно сыграть с девятиричной системой. Раз тут цифра "1" особенная, а остальные девять обычные. Берём случайное число, записываем его в девятиричной системе n.toString(9) – используются цифры от 0 до 8 и точно нет ни одной девятки. Единицы меняем на девятки. Остаётся добавить две единицы на случайных позициях.

    function tworandom() {
      const arr = Math.floor(Math.random() * 9e8).toString(9).replace(/1/g,9).split('');
      for (let i = 2; i > 0; i--) arr.splice(Math.floor(Math.random() * arr.length), 0, 1);
      return +arr.join('');
    }
    
    [...Array(5)].map(tworandom)
    // 6401715726, 950818173966, 915469690179, 4191464422, 223063891715
    Ответ написан
    Комментировать