Ответы пользователя по тегу JavaScript
  • Где ошибка в switch case?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Оператор case не аналог оператора if, он не умеет обрабатывать условия, а сравнивает переменную с фиксированным значением.

    https://learn.javascript.ru/switch

    switch (num) {
        // никогда не сработает потому что если num>60 то будет сравнивать num c true если мешьше 60 то с false
        case num > 60:
             console.log("Нет, переменная меньше 60");
             break;
    
    // никогда не сработает потому что если num<40 то будет сравнивать num c true если бльше 40 то с false
        case num < 40:
             console.log("Нет, переменная больше 40");
             break;
    
    // никогда не сработает потому что если num=50 то будет сравнивать num c true
        case num == 50:
             console.log("Да, переменная ровна 50");
             break;
    }


    Наглядная демонстрация:
    5cc06e799102a203388819.jpeg
    Ответ написан
  • Как вырезать нужное из строки с помощью regex?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    var query = "filter[last_modified][at]=YYYYMMDD";
    var result = query.match(/^filter\[(.+?)\](\[(.+?)\])?/);
    if( result && result[1] )
       console.log("profit!", result[1], result[3]);
    Ответ написан
    2 комментария
  • Как из браузера сохранить текстовый файл?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Уважаемые Роман Мирр, Руслан Лопатин, не обманывайте людей:)))

    вот живая демонстрация:


    PS: реально несколько костыльный прием))) и открывает много неприятных возможностей для различных злыдней.
    Идея и реализация честно скоммунизжена из исходного кода frontend фреймворка webix
    Ответ написан
    3 комментария
  • Как добавить произвольные ключи в объект localStorage?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Вы пишете:

    Нужно в localStorage хранить не только значения, но и ключи
    Примерно вот так:
    0: {
     id: id,
     p: текст параграфа
    },



    при этом у вас:

    <p><input class="check" id="check-option-1" name="name" type="checkbox">
      <label for="check-option-1"></label>
      </p>
      <p class="copy">1</p>
      <p class="copy-2">1.1</p>


    объясние, откуда должен взяться id, из какого именно элемента p долже браться текст?
    Ответ написан
    124 комментария
  • Как сделать такую регулярку?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    преобразовать путь в регулярку

    PS: в качестве саморекламы)
    Ответ написан
    Комментировать
  • Преобразование угла (0-360) в точки x1,y1,x2,y2 и обратно?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Исправил под Вашу ситуацию

    // получаем угол в радианах
    var angle = Math.atan2((x1*100/obj.width)-50,(y1*100/obj.height)-50); 
    
    // или в градусах
    var angle = 180*Math.atan2((x1*100/obj.width)-50,(y1*100/obj.height)-50)/Math.PI;


    PS: немного теории на примерах

    преобразование декартовых координат в полярные
    есть некая точка, заданная координатами x,y в декартовой системе координат. для вычисления ее полярных координат используем формулы
    // угол между осью X и отрезком, заданным координатами (0,0)-(x,y)
    var angle = Math.atan2(x,y); // в радианах
    var angle = 180*Math.atan2(x,y)/Math.PI; // в градусах
    
    // длинна отрезка (сежду точкми 0,0 и x,y)
    var radius = Math.sqrt( Math.pow(x, 2) + Math.pow(y, 2) );


    преобразование полярных координат в декартовы
    есть некая точка, заданная координатами angle, radius в полярной системе координат. для вычисления ее декартовых координат используем формулы
    // угол angle задан в радианах
    var x = radius*Math.cos(angle); 
    var y = radius*Math.sin(angle);


    векторные преобразования (самая малость)
    вариант 1. есть некий отрезок (вектор) заданный декартовыми координатами точек (начала и конца) x1,y1 и x2,y2 соответственно.
    // угол между осью X и отрезком, заданным координатами (x1,y1)-(x2,y2), он же направление вектора.
    var angle = Math.atan2(x2-x1,y2-y1); // в радианах
    var angle = 180*Math.atan2(x2-x1,y2-y1)/Math.PI; // в градусах
    
    // длинна отрезка, заданного координатами (x1,y1)-(x2,y2), он же длина (размер) вектора
    var radius = Math.sqrt( Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2) );


    вариант 2. есть некий отрезок (вектор) заданный декартовыми координатами точки (начала) x1,y1 и полярными координатами точки конца - angle и radius, указывающими направление отрезка и его длинну, относительно точки начала x1,y1.
    // находим декартовы координаты точки конца. угол angle задан в радианах
    var x2 = x1+radius*Math.cos(angle); 
    var y2 = y1+radius*Math.sin(angle);
    Ответ написан
    23 комментария
  • Как разобрать массив JSON без запятых?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Исправил)))

    Можно так:


    Или так:


    PS: должен отметить, что используемые регулярные выражения имеют ряд ограничений. Например если в данных будут вложенные массивы с объектами с пробелом перед закрывающей скобкой [{...}, {...}, ... ] то втарой вариант будет работать неверно. Если в данных будут строки с примерно таким содержимым "} {" или "}{" то оба варианта перестанут работать
    Ответ написан
    4 комментария
  • Canvas: как задать font, а затем изменить размер?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Похоже что изменяя canvas.width, параметры канваса сбрасываются в дефолтные, что на мой взгляд является логичным поведением. Если это так, то Вам надо либо искать решение с единожды заданной, фиксированной шириной канваса либо делать так как вы сделали (выставлять шрифт 2 раза)

    PS: как и говорил, изменения размера канваса сбрасывают часть его параметров в дефолтные
    https://www.w3.org/html/wg/spec/the-canvas-element.html
    Ответ написан
    7 комментариев
  • Как при достижении определённого значения сбрасывать счётчик?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    var div = document.querySelectorAll('div');
    for(var i = 0; i < div.length; i++) {
       div[i].setAttribute('data-index', i%4);
    }


    Остаток деления на 4 всегда будет в интервале 0:3

    Ответ написан
    Комментировать
  • Почему не срабатывает код?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Вот накидал пример, все работает как и должно (на мой взгляд). Если на Ваш взгляд оно работает неверно, напишите в чем оно не соответствует Вашим ожиданиям.
    Ответ написан
  • Чем заменить eval для простых выражений?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Можно сделать так. Только на выходе будет строка.

    var res = `${x > 5 && (y == 7.5)}`;

    https://jsfiddle.net/jey5xs2r/1/

    PS: могу предложить другое решение. Мной недавно была написана утилита для парсинга строк. Ее можно научить парсить как линейные структуры так и древовидные. Она возможно будет проигрывать в скорости узкоспециализированным решениям, но зато она универсальная, фактически швейцарский нож для парсинга структур любой сложности, что позволяет создать парсер и для HTML и для математических выражений и даже для кода при желании.

    А это пример использования для вашей задачи:
    код
    const Splitter = require("split-tools");
    
    var text = "x > 5 && (y == 7.5) || sin(Math.PI*a/360) || true";
    
    const splitter = new Splitter({
        matchers: {
            function: /\s*([a-z]\w*)\(\s*(.*)\s*\)/g,
            bracket: /\(\s*(.*)\s*\)/g,
            operator: /\s*(\>|\<|\=\=|\!\=|\&\&|\|\||\+|\-|\*|\/|\%)\s*/g,
            variable: /\s*([a-z][\w\.]*)\s*/gi,
            sting: /\s*\"(.*?)\"\s*/gi,
            boolean: /\s*(true|false)\s*/gi,
            value: /\s*(\d[\d\.]*)\s*/gi
        }
    });
     
     
    const tree = {
        "brackets": ["function", "bracket", "operator", "variable", "sting", "boolean", "value"]
    };
     
    function subSplit(id, text) {
        console.log("subSplit:", id, "[", text, "]");
        if(tree[id] && tree[id].length)
            return splitter.process(text, tree[id]);
        return text;
    }
     
     
    splitter.addParser("function",(match,name,body)=>{
        return {
            type: "function",
            name: name,
            body: subSplit("brackets", body)
        };
    });
    
    splitter.addParser("bracket",(match,body)=>{
        return {
            type: "bracket",
            body: subSplit("brackets", body)
        };
    });
    
    splitter.addParser("operator",(match,body)=>{
        return {
            type: "operator",
            body: body
        };
    });
    
    splitter.addParser("variable",(match,body)=>{
        return {
            type: "variable",
            body: body
        };
    });
    
    splitter.addParser("string",(match,body)=>{
        return {
            type: "string",
            body: body
        };
    });
    
    splitter.addParser("boolean",(match,body)=>{
        return {
            type: "boolean",
            body: !!body
        };
    });
    
    splitter.addParser("value",(match,body)=>{
        return {
            type: "value",
            body: +body
        };
    });
     
     
    const list = splitter.process(text, tree.tags);
     
    console.log("\n\nresult:\n",JSON.stringify(list, null, '  '));



    На выходе из парсера будет массив пройдясь по которому можно будет вычислить значение распарсенного математического выражения:
    результат
    [
      { "type": "variable", "body": "x" },
      { "type": "operator", "body": ">" },
      { "type": "value", "body": 5 },
      { "type": "operator", "body": "&&" },
      { "type": "bracket", "body": [
          { "type": "variable", "body": "y" },
          { "type": "operator", "body": "==" },
          { "type": "value", "body": 7.5 }
        ]
      },
      { "type": "operator", "body": "||" },
      { "type": "function", "name": "sin",   "body": [
          { "type": "variable", "body": "Math.PI" },
          { "type": "operator", "body": "*" },
          { "type": "variable", "body": "a" },
          { "type": "operator", "body": "/" },
          { "type": "value", "body": 360 }
        ]
      },
      { "type": "operator", "body": "||" },
      { "type": "variable", "body": "true" }
    ]
    Ответ написан
  • Как укоротить строку?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Можно как то так сделать:
    parseUserName = userName => {
        const splitted = userName.split(/\s+/);
        return splitted[0]+" "+splitted[1][0]+".";
    };


    Ответ написан
    Комментировать
  • Как вывести различия между двумя многомерными массивами в javascript?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Или руками:


    А при одинаковом порядке следования и одинаковых индексах элементов можно еще упростить:
    Ответ написан
    Комментировать
  • Как сделать валидацию формы с применением JSON?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Для этих целей существует json-schema.
    Описание дано в спецификации.

    Ознакомится можно прочитав ряд статей:


    погуглив json schema validator можно найти очень много обзоров, гайдов, отзывов и другой полезной информации по Вашему вопросу
    Ответ написан
    Комментировать
  • Как создать страницы, которые будут использовать данные из своей ссылки?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Для этих целей и существуют веб сервера с серверными скриптами и базами данных. Вместе они составляют так называемый backend. Суть бэкенда заключается в обработке запросов от клиента и формировании в ответ на эти запросы страниц либо данных, которые отдаются клиенту для дальнейшей обработки и/или отображения. В качестве сервера для бэкэнда может служить apache, nginx, express.js и др.. В качестве языка программирования для серверных скриптов может служить почти любой ЯП, но наиболее популярны PHP, python, node.js, Ruby и некоторые другие ЯП. Также существует множество бэкенд фрэймворков, написанных на различных языках. Целью этих фрэймворков служит разной степени упрощение/шаблонизация/автоматизация написания серверных скриптов.
    Привожу небольшой пример, отвечающий на ваш вопрос и иллюстрирующий данный подход. Пример написан на nodejs и использует бэкенд фрэймворк express.js

    var express = require('express');
    var app = express();
    
    app.get('/user/:user', function(req, res) {
      var user = req.params.user;
      // Тут дожны быть проверки
      // прав клиента на просмотр
      // запрашиваемых данных.
      // запросы в бд за данными пользователя,
      // и другими необходимыми данными.
      // затем для пользователя 
      // указанного в запросе формируются
      // данные для отдачи клиенту
      // это могут быть как именно данные,
      // например в формате json так и страница
      // (частично и полностью)
    
      // затем эти данные отдаются клиенту:
      res.send(data);
    });
    Ответ написан
    Комментировать
  • Как занести в переменную обрезанную ссылку, удалив всё что после ../news/?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Или так:
    link=link.replace(/(\/news\/).*/,"$1");

    Подправил чутка )
    Ответ написан
    4 комментария
  • 3D-движок для рендеринга карты высот?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    https://threejs.org точно подойдет. Инфа 146%.

    PS: вот даже примерчик имеется rainforest.arkivert.no
    Ответ написан
    Комментировать
  • Как ускорить (скликать) таймер обратного отсчета на сайте?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Вариант скликивания секунд:
    var _Seconds = $('.timer').text(),
    var _Clicks = 0; // счетчик кликов
    int;
    int = setInterval(function() { // запускаем интервал
    if (_Seconds - _Clicks > 1) {
    _Seconds--; // вычитаем 1
    $('.timer').text(_Seconds - _Clicks); // выводим получившееся значение в блок
    } else {
    clearInterval(int); // очищаем интервал, чтобы он не продолжал работу при _Seconds = 0
         $('.div_x').addClass('xxx'); //добавляем класс на элемент 1
         $('.div_y').addClass('yyy'); //добавляем класс на элемент 2
      }
    }, 1000);


    Тут необходимо понимать, что:
    1. Обработка происходит раз в секунду, а в ситуации когда до конца осталось пара секунд можно успеть кликнуть по кнопке несколько десятков раз, но это не остановит счетчик.Пользователь все равно будет ждать ближайшего срабатывания setInterval.
    2. Для более тонкой обработки алгоритм надр менять. Доберусь до компа, накидаю код.

    PS: вот обещанное решение, в нем многое можно изменить и доработать, но оно прекрасно демонстрирует подход, который я хотел Вам показать:

    Ответ написан
    3 комментария
  • Существует ли рандомизатор текстов для {JS|JAVASCRIPT}?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Не подскажу конкретное решение, но вы можете написать самостоятельно, вот несколько ссылок, которые помогут понять как подступиться к решению этой задачи:
    1. генераторы на марковских цепях (очень простой, палится поисковыми системами):
    - aftamat4ik.ru/generator-teksta-na-cepyakh-markova
    - https://tproger.ru/translations/markov-chains/
    2. генерация на основе шаблонов, автоматизированные (не автоматические) генераторы:
    - https://airat.biz/random/ (готовая реализация на php)
    - https://a-panov.ru/download/textgen/ (готовая реализация на js)
    - www.promotools.ru/services/anchors-large.php (готовая реализация на js)
    3. генераторы на на основе грамматик и нейросетей:
    - https://habr.com/company/meanotek/blog/271965/
    Ответ написан
    5 комментариев