Задать вопрос
  • Как получить соседние элементы?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    let children = Array.from(e.parentNode.children);
    let index = children.indexOf(e);
    if (index > -1) {
        children.splice(index, 1);
    }
    Ответ написан
    Комментировать
  • Как временно заблокировать событие window scroll?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    let isScrolling = false;
    
    window.addEventListener('scroll', function(e) {
      if(isScrolling) {
        e.preventDefault();
        return;
      }
      
      // handler
    });
    
    function scrollTo() {
      isScrolling = true;
    
      window.scrollTo({
        top: 100,
        behavior: "smooth"
      });
    
      setTimeout(() => isScrolling = false, 500);
    }
    Ответ написан
    1 комментарий
  • Как сделать, чтобы с помощью input можно было производить поиск(в моем случае книг, каждая книга-отдельный объект json в js файле)?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    // get DOM elements
    const searchInput = document.getElementById('searchInput');
    const resultsContainer = document.getElementById('resultsContainer');
    
    // search from array
    function searchBooks(query) {
        return CLASS5.filter(book => {
            return book.query.toLowerCase().includes(query.toLowerCase())
                || book.athor.toLowerCase().includes(query.toLowerCase())
                || book.pages.toLowerCase().includes(query.toLowerCase())
                || book.age.toLowerCase().includes(query.toLowerCase())
                || book.classn.toLowerCase().includes(query.toLowerCase());
        });
    }
    
    // print
    function displayResults(results) {
        resultsContainer.innerHTML = '';
    
        if (results.length === 0) {
            resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
            return;
        }
    
        results.forEach(book => {
            const bookCard = document.createElement('div');
            bookCard.innerHTML = `
                <h2>${book.query}</h2>
                <p>${book.athor}</p>
                <p>${book.pages}</p>
                <p>${book.age}</p>
                <p>${book.classn}</p>
                <img src="${book.images}" alt="Book Image">
            `;
            resultsContainer.appendChild(bookCard);
        });
    }
    
    // handler
    searchInput.addEventListener('input', (event) => {
        const query = event.target.value;
        const results = searchBooks(query);
        displayResults(results);
    });
    Ответ написан
    4 комментария
  • Проекты After effects в формат svg?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вопрос о правомерности такой практики зависит от условий, при которых Вы получили исходный проект After Effects. Если проект обладает лицензией, которая разрешает его использование, изменение и продажу производных работ, тогда такое использование может быть допустимым. Однако, если лицензия ограничивает такое использование, то перекодирование проекта в SVG и последующая продажа могут нарушать эти условия.

    Лицензия:
    Вы не можете перепродавать или перераспределять элементы.
    Вы не можете использовать элементы в услугах по запросу;
    Вы не можете продавать товары, основу которых составляют материалы Например, нельзя печатать не измененный логотип на футболках.

    такое продавать можно? Или это нарушение прав

    Нельзя, нарушение в последнем пункте. Но! Если Вы сделаете из этого эффекта не полную копию в виде svg, то можно.
    Ответ написан
    3 комментария
  • Какую функцию лучше использовать?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    - Вариант 1 (метод sameDay): Этот метод сравнивает год, месяц и дату двух объектов Date. Этот метод более надежен, поскольку он не изменяет исходные объекты Date. Он просто сравнивает их. Если Вы не хотите изменять исходные даты, это лучший выбор.
    - Вариант 2 (setHours): Этот метод устанавливает время обоих объектов Date на полночь (0 часов, 0 минут, 0 секунд, 0 миллисекунд) и затем сравнивает их. Это может быть проблемой, если Вы в дальнейшем планируете использовать исходные даты, так как метод setHours меняет исходные объекты. Важно помнить, что объекты Date в JavaScript передаются по ссылке, а не по значению. Поэтому, если вы используете этот метод и сохраняете исходные даты, Вам нужно будет клонировать их перед вызовом setHours.
    Ответ написан
    Комментировать
  • Почему не работает функция?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Скрипт выполняется до загрузки DOM?

    Попробуйте так:
    document.addEventListener('DOMContentLoaded', (event) => {
        const videoBtn = document.querySelector('#video-btn');
        const videoPicture = document.querySelector('.video__picture'); 
    
        videoBtn.addEventListener('click', function () {
            videoPicture.classList.add('none');
        });
    });
    Ответ написан
    2 комментария
  • Зачем next js нужен еще дополнительный сервер для задач на бэке?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Зачем вообще нексту еще другой сервер, если некст и так всё может делать сам?

    Сильное заявление. Next это в первую очередь - генератор сайтов, SSR, SSG итп, а вот Nest это целый комбаин бэкенда для JS:

    - Подключение и работа с базами данных: Nest.js может использовать различные ORM, такие как TypeORM, Sequelize или Mongoose, для работы с базами данных.
    - Создание RESTful API: В то время как Next.js предоставляет базовые возможности для создания API, Nest.js имеет более широкие возможности для создания сложных RESTful API.
    - Аутентификация и авторизация: Nest.js предоставляет поддержку для создания сложных систем аутентификации и авторизации.
    - Обработка ошибок: Nest.js предоставляет встроенные механизмы для обработки ошибок.
    - Валидация входных данных: С помощью библиотек, таких как class-validator, Nest.js может проверять входные данные на соответствие определенным правилам и структурам.
    - Middleware: Nest.js предоставляет встроенные механизмы для использования middleware, что позволяет производить предварительную обработку запросов.
    - Загрузка файлов: Nest.js может управлять загрузкой файлов и данных multipart/form-data.
    - Websockets и microservices: Nest.js имеет встроенные возможности для работы с веб-сокетами и микросервисами.
    - Dependency Injection: Nest.js имеет собственную систему внедрения зависимостей, основанную на TypeScript, что облегчает тестирование и повышает модульность кода.
    - CRON jobs и задачи в фоне: Nest.js позволяет легко создавать фоновые задачи и запускать задачи по расписанию.

    Почитать: https://habr.com/ru/articles/570886/
    Ответ написан
    Комментировать
  • Ссылка в заголовке или заголовок в ссылке — как правильно/лучше?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    но а как лучше и правильнее?

    a>h

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

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Кто знает в чем лучше делать адаптив в px или в %

    rem, который зависит от размера шрифта в html/body. Меняете размер шрифта - пропорционально меняется все, что задано в rem.
    Ответ написан
    Комментировать
  • Как создать функцию копирования объектов с подставным именем нового объекта?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Вы пытаетесь создать новый объект и дать ему имя, передав это имя в функцию. Это не работает, потому что в JavaScript имена переменных должны быть определены явно, они не могут быть созданы или изменены динамически во время выполнения.

    Возвращаем копию объекта, затем присваиваем эту копию новой переменной:
    let user = {
       name: "David",
       age: 25,
    }
    
    function objectClone(object) {
       let newObject = {};
    
       for (let key in object) {
          newObject[key] = object[key];
       }
    
       return newObject;
    }
    
    let user2 = objectClone(user);
    
    console.log(user2.name); // выводит "David"
    Ответ написан
    2 комментария
  • Как вставить в таблицу данные из массива?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Можно использовать индекс столбца как индекс для доступа к внутренним массивам данных:
    let Table = this.$refs.theTable
    
    // rows
    for(let rowIndex = 0; rowIndex < Table.rows.length; rowIndex++) {
        let row = Table.rows[rowIndex];
    
        // cells
        for(let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
    
            // is data?
            if(this.allDataOfDays[cellIndex] && this.allDataOfDays[cellIndex][rowIndex]) {
                row.cells[cellIndex].innerText = this.allDataOfDays[cellIndex][rowIndex];
            }
        }
    }
    Ответ написан
    Комментировать
  • Как создать текстовый файл, чтобы его можно было потом открыть?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    В браузере:
    // set localStorage
    localStorage.setItem('myKey', 'myValue');
    
    // get localStorage
    let value = localStorage.getItem('myKey');
    
    console.log(value); // myValue


    На диске, используя NodeJS:
    const fs = require('fs');
    
    // write
    fs.writeFile('myFile.txt', 'myValue', (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
    
    // read
    fs.readFile('myFile.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log(data); // myValue
    });
    Ответ написан
    1 комментарий
  • Как настроить сео в React?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    От использования React Helmet без генератора статики Вы не получили особо прироста эффективности ранжирования Вашего сайта (хоть поисковики и сообщают, что они уже эффективно индексируют js-динамический контент). Т.к. Вы используете React, то оптимальным выбором будет сразу использовать NextJS.
    Ответ написан
    Комментировать
  • Как можно реализовать выполнение кода независимо раз в какой-то период времени?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    эти функции выполняются только когда, пользователь находится на сайте

    Если Вы про "js из браузера", то да, как пользователь закроет вкладку - скрипт прекратит свою работу. Используйте Nodejs.

    Берете свой обычный "js из браузера" (за исключением работы с браузерным api) и выполняете его нодой node index.js.

    Почитать, мне понравился - https://metanit.com/web/nodejs/

    Как установить Node.js на Windows: пошаговая инструкция - https://timeweb.cloud/tutorials/nodejs/kak-ustanov...
    Ответ написан
    2 комментария
  • Как правильно пройтись по всем элементам на странице?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Пытаюсь через document.querySelectorAll но тоже выходит ошибка

    Надо лучше пытаться:
    <script>
    // Получаем все карточки товаров
    const cards = document.querySelectorAll('.cart');
    
    cards.forEach((card) => {
      const addToCartLink = card.querySelector('.buy_button');
      const inputElement = card.querySelector('.kolvo input');
      const plusButton = card.querySelector('.kolvo .plus');
      const minusButton = card.querySelector('.kolvo .minus');
    
      // Функция для обновления ссылки при изменении значения input
      const updateLink = () => {
        const inputValue = inputElement.value;
        const newLink = addToCartLink.getAttribute('href').replace(/q=\d+/, 'q=' + inputValue);
        addToCartLink.setAttribute('href', newLink);
      };
    
      // plus
      plusButton.addEventListener('click', () => {
        inputElement.stepUp();
        updateLink();
      });
    
      // minus
      minusButton.addEventListener('click', () => {
        inputElement.stepDown();
        updateLink();
      });
    
      // Обработчик события при изменении значения input
      inputElement.addEventListener('input', () => {
        updateLink();
      });
    });
    </script>
    <div class="cart">
    <a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>
    
    <div class="kolvo">
    <span class="minus">-</span>
    <input type="number" value="1" min="1">
    <span class="plus">+</span>
    </div></div>
    Ответ написан
    3 комментария
  • Какое техническое решение выбрать под проект?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Но не знаю, какое техническое решение взять? Писать на нативном РНР? Взять готовый фрэймворк?

    Что знаете, на том и пишите.

    Если Вы задаёте вопрос про "фреймворки или нет", значит Вам темболее необходимо использовать фреймворк. Свой велосипед Вы в любом случае напишите хуже.

    Если Вы не разработчик, то наймите ПМ или разраба, он Вам и сообщит, на чем именно он будет писать.
    Ответ написан
    1 комментарий
  • Из-за чего код не работает?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Обработчики событий в React должны быть написаны с большой буквы.

    Заменить:
    <button onclick={this.handleclick} >
    На:
    <button onClick={this.handleclick} >

    UPD: может все таки композиция, вместо классов?
    Ответ написан
    1 комментарий
  • Почему у введенного числа в input тип данных(typeof) -string?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Почему у введенного числа в input тип данных(typeof) -string?

    Так проще, т.к. неизвестно, что именно прилетит из input, а тут по умолчанию - string, а дальше Ваши проблемы.
    Ответ написан
    4 комментария
  • Как извлечь вложенный элемент json с помощью python?

    Mike_Ro
    @Mike_Ro Куратор тега Python
    Python, JS, WordPress, SEO, Bots, Adversting
    TypeError: string indices must be integers, not 'str'

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

    {
      "data": {
        "teamStanding": [
          {
            "id": "team_1",
            "score": 103,
            "players": [
              {
                "user": {
                  "name": "player_1",
                  "id": "player_1"
                },
                "score": 35
              },
              {
                "user": {
                  "name": "player_2",
                  "id": "player_2"
                },
                "score": 30
              }
              // и так далее...
            ]
          },
          // Другие команды...
        ]
      }
    }

    import json
    
    path = 'test.json'
    
    with open(path, 'r') as file:
        data = json.load(file)
    
    for team in data["data"]["teamStanding"]:
        if team["id"] == "team_1":
            for player in team["players"]:
                print(player["user"]["name"], player["score"])
    Ответ написан
    Комментировать
  • Как приостановить работу map до выполнения определённых условий пере return?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Пишу на React

    Какой интересный язык.

    const [imageUrls, setImageUrls] = useState([]);
    
    async function readAsDataURL(image) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = reject;
            reader.readAsDataURL(image);
        });
    }
    
    useEffect(() => {
        (async () => {
            try {
                const urlPromises = selectedImages.map(readAsDataURL);
                const urls = await Promise.all(urlPromises);
                setImageUrls(urls);
            } catch (error) {
                console.error(error);
            }
        })();
    }, [selectedImages]);
    
    return imageUrls.map((url, index) => <img src={url} alt="" key={`previewImage:${index}`} />);
    Ответ написан
    5 комментариев