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

    dummyman
    @dummyman
    диссидент-схизматик
    Поддерживаю вас. В современных браузерах и других интерпретаторах js есть все необходимые средства для программирования без всяких там "jQuery и ко".

    Я могу что то написать в императивном стиле, все в одном файле, 100500 функций. Да может быть будет что то работать, но за хорошее инженерное решение это не сойдет.


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

    Хотя бы научиться этому, а потом уже браться за полезные инструменты в виде какие то зависимостей, те же фреймворки.


    На самом деле, мета-программирование на javascript - это не всегда положительная сторона. Есть тысяча и один фреймворк, которые могут послужить хорошим примером, как делать не надо!
    Вспомним хотябы GWT, YUI. Потом ExtJS4 - полная срака из кастомной структуры классов с наследованием двадцатого уровня. Для реализации того функционала можно было выкинуть 3/4 кода. Может быть, во времена популярности prototype.js+script.aculo.us, ExtJS 2 был "хорошим инженерным решением", но в 4й версии - с абстракциями явный перебор.

    На русском языке обязательно прочтите Гарден.
    Хорошую книгу написал Джон Резик. Есть русская версия, правда только первое издание.
    a4ab075560824f9e8283565363a7561f.jpg
    Поверьте, фреймворки - зло! Не пишите лишнего кода сверх решения задачи. Компенсируйте максимум структуры приложения в html и css.
    Ответ написан
    5 комментариев
  • Какие есть похожие на jsx решения написания HTML в JS?

    dummyman
    @dummyman
    диссидент-схизматик
    Никогда не понимал за что можно любить jsx...
    pug вам не подходит?
    На мой взгляд лучший шаблонизатор.
    Ответ написан
    3 комментария
  • Как сделать интерактивную карту?

    dummyman
    @dummyman
    диссидент-схизматик
    Есть такой фреймворк openlayers
    Вот ссылка на пример openlayers.org/en/latest/examples/select-features.html
    там разделение по государствам, нужно будет вместо https://openlayers.org/.../geojson/countries.geojson составить свой файл geojson по областям
    Данные берем отсюда gis-lab.info/qa/osm-adm.html
    Стили карт берем тут https://www.mapbox.com/maps/
    15-30 минут на все и карта готова.
    Ответ написан
    2 комментария
  • Как скрыть часть текста?

    dummyman
    @dummyman
    диссидент-схизматик
    " Сосна+Бук + 33 110 руб.".trim().replace(/^(\S+).*$/, '$1');


    Array.from(document.querySelectorAll("span"))
        .forEach(span => span.innerHTML = 
             span.innerHTML.trim().replace(/^(\S+).*$/, '$1')
    );
    Ответ написан
    Комментировать
  • Как делать бота для посещения сайта 1 раз минуту?

    dummyman
    @dummyman
    диссидент-схизматик
    Тут может помочь каспер
    docs.casperjs.org/en/latest/quickstart.html#now-le...

    var links = [];
    var casper = require('casper').create();
    
    function getLinks() {
        var links = document.querySelectorAll('h3.r a');
        return Array.prototype.map.call(links, function(e) {
            return e.getAttribute('href');
        });
    }
    
    casper.start('http://google.fr/', function() {
       // Wait for the page to be loaded
       this.waitForSelector('form[action="/search"]');
    });
    
    casper.then(function() {
       // search for 'casperjs' from google form
       this.fill('form[action="/search"]', { q: 'casperjs' }, true);
    });
    
    casper.then(function() {
        // aggregate results for the 'casperjs' search
        links = this.evaluate(getLinks);
        // now search for 'phantomjs' by filling the form again
        this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
    });
    
    casper.then(function() {
        // aggregate results for the 'phantomjs' search
        links = links.concat(this.evaluate(getLinks));
    });
    
    casper.run(function() {
        // echo results in some pretty fashion
        this.echo(links.length + ' links found:');
        this.echo(' - ' + links.join('\n - ')).exit();
    });


    Запускаем
    $ casperjs googlelinks.js

    Получаем
    20 links found:
     - https://github.com/casperjs/casperjs
     - https://github.com/casperjs/casperjs/issues/2
     - https://github.com/casperjs/casperjs/tree/master/samples
     - https://github.com/casperjs/casperjs/commits/master/
     - http://www.facebook.com/people/Casper-Js/100000337260665
     - http://www.facebook.com/public/Casper-Js
     - http://hashtags.org/tag/CasperJS/
     - http://www.zerotohundred.com/newforums/members/casper-js.html
     - http://www.yellowpages.com/casper-wy/j-s-enterprises
     - http://local.trib.com/casper+wy/j+s+chinese+restaurant.zq.html
     - http://www.phantomjs.org/
     - http://code.google.com/p/phantomjs/
     - http://code.google.com/p/phantomjs/wiki/QuickStart
     - http://svay.com/blog/index/post/2011/08/31/Paris-JS-10-%3A-Introduction-%C3%A0-PhantomJS
     - https://github.com/ariya/phantomjs
     - http://dailyjs.com/2011/01/28/phantoms/
     - http://css.dzone.com/articles/phantom-js-alternative
     - http://pilvee.com/blog/tag/phantom-js/
     - http://ariya.blogspot.com/2011/01/phantomjs-minimalistic-headless-webkit.html
     - http://www.readwriteweb.com/hack/2011/03/phantomjs-the-power-of-webkit.php
    Ответ написан
    Комментировать
  • Подключать несколько JS на странице или пихать все в один файл?

    dummyman
    @dummyman
    диссидент-схизматик
    В случае с монолитными приложениями, объединять js в один файл имеет смысл хотя бы даже для удобства отладки, сизнонизации между разными cdn.

    Бывают ситуации, когда, например, на одной из страниц сайта есть чатик. Разумеется, загружать код такого чатика на всех страницах сайта глупо. Не только из-за трафика, еще в целях минимизаций затрат ресурсов web-клиента.
    Ответ написан
    Комментировать
  • Как возвращать (добавить) в контейнер (div) код, помимо других результатов?

    dummyman
    @dummyman
    диссидент-схизматик
    <li code="код" caption="то, что отображается">Техт</li>

    вместо select_this(val):
    $('ul li').click(() => {
       var code=$(this).attr('code');
       var caption=$(this).attr('caption');
       //...
    })


    У формы используйте событие submit() вместо keyup() у inputa
    $("#autocomplete_search_box").keyup()

    Надеюсь, информация поможет.
    Ответ написан
  • Какие аналоги существуют к mongodb?

    dummyman
    @dummyman
    диссидент-схизматик
    Что может быть проще файлов? Только все в одном файле хранить - немного жесткач!
    А вот грамотно распределить по папкам/файлам, - имхо, в большинстве случаев самый профитный вариант.
    От MongoDB можно продолжить ряд CouchDB, PouchDB, Redis, MemCached, RelaxDB.
    Ответ написан
    2 комментария
  • Почему не корректно работает прелоадер?

    dummyman
    @dummyman
    диссидент-схизматик
    Во-первых, чтобы скрыть сайт без стилей под простыней, ее надо раздвинуть на 100% по высоте и ширине.
    Активировать его необходимо на чистом JS без CSS, т.к. стили должны загружаться после лоадера.
    Тег .preloader должен добавляться строго в body. Чтобы прелоадер отображался по центру, также необходимо дать 100% высоты тегам html и body (и тоже через JS). Перехватить управление в JS после окончания парсинга html но до отображения странички можно так:
    window.addEventListener('DOMContentLoaded', preloaderShow, false);
    window.addEventListener('load', preloaderHide);
    
    function preloaderShow() {
       alert('Контента еще нет');
    }
    
    function preloaderHide() {
       alert('Весь контент загружен');
    }

    Этот код должен быть объявлен в HEAD до всех остальных JS и CSS. И не в выделеном файле, а прямиком полностью в HEAD.

    Да, и делайте прелодер ваш без jQuery, а то самый гигантский файл странички должен загрузиться до прелодера для его отображения. Маразм какой-то.

    https://jsfiddle.net/q536qd70/

    Даже накидал вам почти весь код прелодера.
    Ответ написан
    5 комментариев
  • Можно ли передать значение переменной JS в переменную PHP?

    dummyman
    @dummyman
    диссидент-схизматик
    Можно без аякса, в js добавить кукой
    В php будет доступно по $_COOKIE['btn_id']
    Ответ написан
    Комментировать
  • PhantomJS делает скриншоты на динамической странице?

    dummyman
    @dummyman
    диссидент-схизматик
    Суть в том, что весь контент формируется после onLoadFinished(), установите задержку до появления тегов по определенному selector-у

    То есть, почти все вебмастеры делают выполнение своего яваскрипта по событию DOMContentLoaded у объекта document.

    Обратите внимание на примеры:
    https://github.com/ariya/phantomjs/blob/master/exa...
    https://github.com/ariya/phantomjs/blob/master/exa...
    page.render() стоит внутри window.setTimeout()

    Или вот пример каспера:
    docs.casperjs.org/en/latest/quickstart.html#now-le...

    Перед заполнением формы ввода выполняется
    this.waitForSelector('form[action="/search"]');
    Ответ написан
    Комментировать
  • Как вернуть результат, который вложен в несколько функций?

    dummyman
    @dummyman
    диссидент-схизматик
    Конкретно так, как вы хотите не получится. Но именно эту задачу решают промисы.
    Ответ написан
    8 комментариев
  • Делать скрин браузера пользователей. Есть такое?

    dummyman
    @dummyman
    диссидент-схизматик
    Скрин от пользователя вы получите врятли, но если вас интересуют скриншоты вашего сайта, то это легко можно провернуть на локальной машине.
    Вооружиться каспером, лизуном и призраком.
    У каспера самый простой универсальный api.
    Используя каспер+лизун получаем лисо-подобный браузер.
    Соответственно, из каспера+призрака получаем хромо-подобный браузер.
    В документации каспера найдете как устанавливать и куда прописывать пути.
    Скриптец, который необходимо скормить касперу выглядит просто:
    var casper = require('casper').create({
      viewportSize: {
        width : 800, /* Здесь можно указать требуемое */
        height: 600  /* разрешение очка браузера */
      }
    });
    casper.start('http://www.google.nl/', function() {
      this.capture('google.png');
    });
    casper.run();
    Можно повторить со всеми нужными вам разрешениями.
    Ответ написан
    Комментировать
  • Что не так с регулярным выражением?

    dummyman
    @dummyman
    диссидент-схизматик
    Эх вы, регулярщики-кулибины
    var arr = [
        'img/04_slider_food/1_fast_food//01_Chicken Burger.jpg',
        'img/04_slider_food/1_fast_food//02_Chicken Pizza.jpg',
        'img/04_slider_food/1_fast_food//03_Beef Burger.jpg',
        'img/04_slider_food/1_fast_food//07_Rolls.jpg',
        'img/04_slider_food/1_fast_food//08_Wendy’s Dave’s Hot ‘N Juicy.jpeg'
    ];
    
    var res = arr.map(uri => uri.replace(/^([\w\d\s_]*\/)+\d{2}_/,''));
    
    console.log(JSON.stringify(res, null, 4));

    Вывод:
    [
        "Chicken Burger.jpg",
        "Chicken Pizza.jpg",
        "Beef Burger.jpg",
        "Rolls.jpg",
        "Wendy’s Dave’s Hot ‘N Juicy.jpeg"
    ]
    Ответ написан
    Комментировать
  • Как грамотно сделать date- и timepicker?

    dummyman
    @dummyman
    диссидент-схизматик
    Datepicker по картинке прямо взят отсюда.
    А вот по поводу времени у вас все правильно нарисовано кроме самого поля.
    Я бы делал как то так:
    fa65789d434a491e89db78af7b708f25.png

    И в html оформлял бы двумя простыми select/option без какого либо js. - одинакого круто работает и на десктопе и на мобиле. Значение вводи хоть с клавиатуры. Если селекты будут скрыты и исчезать по удалению ховера, это будет менее удобно чем они бы отображались сразу.
    Ответ написан
    Комментировать
  • Новые возможности javascript являются частью спецификации языка?

    dummyman
    @dummyman
    диссидент-схизматик
    что jsx-скрипт распарсивается какой-то библиотекой написаной на стандартном javascript и транслирует в него же...

    А что вас так удивляет... Тут их целый зоопарк был еще до JSX: TypeScript, CoffeeScript, Angular, WebAssembly и все они из разных буферов данных формируют объекты Plain Old JavaScript Objects. Каждая либа считается по всем параметрам превосходит до безобразия жуткий JavaScript. Только вот друг с другом они не совместимы. Совместимы они только с JavaScript.
    Чуть не забыл clojure
    Ответ написан
    6 комментариев
  • Как ограничить скрипт спойлера?

    dummyman
    @dummyman
    диссидент-схизматик
    Во-первых, в классической реализации спойлера не было javascript:
    codepen.io/oloman/pen/odnqy
    Ответ написан
    Комментировать
  • Как унифицировать выборку элементов?

    dummyman
    @dummyman
    диссидент-схизматик
    https://jsfiddle.net/cen1xxn0/1/
    Немного поисправлял. Вы не проверяли, находит он что-нибудь или нет.
    Ответ написан
    7 комментариев
  • 3D движок с поддержкой JavaScript?

    dummyman
    @dummyman
    диссидент-схизматик
    Почему же, Unity работает на WebGL
    https://docs.unity3d.com/Manual/webgl.html
    Правда совместим код только JavaScript, некоторые плюшки несовместимы

    Может есть живой движок на примете с биндингами для node.js?

    nodejs оставьте в покое, все что идеологично для ноды - серверное ПО.
    Такие вещи как Electron - скорее исключение, чем призыв к действию)
    Ответ написан