Ответы пользователя по тегу JavaScript
  • Как брать данные методом GET c URL и выводить на странице в режиме лайв?

    copist
    @copist
    Empower people to give
    Это всё реализуется на JavaScript

    Технологии:
    • Single page Application - технология одностраничных приложений
    • Rich Internet Application - технология функционально насыщенных клиентских приложений


    Более детально:
    • HTML5 HistoryAPI (pushState) - навигация (смена URL) без перегрузки страницы + выбор логики в зависимости от URL страницы (две стороны одной технологии)
    • AJAX - передача данных через HTTP
    • шаблонизация, DOM или VirtulDOM- подстановка данных и формирование HTML


    Получается так:
    Сценарий А)
    • пользователь кликает по ссылке
    • ссылка не срабатывает
    • вместо этого вызывается код на JS, который
      • выполняет смену URL
      • выбирает, какой вариант представления показать пользователю
      • запрашивает недостающие данные с сервера через HTTP
      • интерпретирует полученный ответ в браузере (например, показывает в формате HTML)


    Сценарий Б
    • пользователь открывает страницу с неким URL
    • JS анализирует этот URL и
      • выбирает, какой вариант представления показать пользователю
      • запрашивает недостающие данные с сервера через HTTP
      • интерпретирует полученный ответ в браузере (например, показывает в формате HTML)



    Всё это реализуется в современных решениях типа Angular 1/2/..., Vue, React и дополнительными библиотеками
    Пример на Angular 1 plnkr.co/edit/nnHRWJ?p=preview
    Можно и на jQuery реализовать https://codepen.io/copist/pen/ZQRJeL
    Ответ написан
    Комментировать
  • Как закрывть div при клике вне этого дива?

    copist
    @copist
    Empower people to give
    Поисковая фраза в Google "hide click outside HTML JS"

    https://stackoverflow.com/questions/152975/how-do-...
    https://stackoverflow.com/questions/1403615/use-jq...
    https://stackoverflow.com/questions/13892375/how-t...

    Относительно указанного примера:
    var clickCount = 1;
    $('.button').click(function(event){ // при клике по кнопке - обработать тут, но не давать обработать дальше
      event.stopPropagation();
    	if(clickCount == 1){
    			$(this).children('.show-block').show();
    			clickCount = 2;
    		}else{
    			$(this).children('.show-block').hide();
    			clickCount = 1;
    		}
    });
    
    $('.button .show-block').click(function(event) { // при клике по блоку - вообще проигнорировать, иначе будет закрываться даже если в блок кликнуть
    	event.stopPropagation();
    });
    
    $(window).click(function(event) { // при клике в любом месте страницы - закрывать блок
    	$('.button .show-block').hide();
    });
    Ответ написан
    1 комментарий
  • Каким способом уменьшить связность между модулями в NodeJS?

    copist
    @copist
    Empower people to give
    В таких небольших проектах плюю на связность и делаю проект дальше.
    Модульность - это когда надо чтобы одна часть системы без другой работала.
    Тебе база нужна? Без базы сможешь работать? Если не сможешь, то распиливать бессмысленно.
    Тебе логер нужен? Без логера сможешь обойтись? Если не сможешь, то аналогично - живи с логером.

    Если модули отвязывать, то переходить на DI, события и очереди. Очереди можно в памяти держать, совсем не обязательно отдельно сервис поднимать.

    Можно как Yustas Alexu сказал - сделать модуль, который снаружи работает как адаптер к БД, а внутри - смесь адаптера базы, логера и прочих перделок.
    Ответ написан
    Комментировать
  • Почему браузер не обновляет сорцы?

    copist
    @copist
    Empower people to give
    1. Вагрантом пользуешься?

    Выключи sendfile в Nginx и Apache

    если nginx - в файле /etc/nginx/nginx.conf и поменяй опцию
    sendfile off

    если Apache - в зависимости от операционной системы - найди httpd.conf или apache.conf и поменяй опцию EnableSendfile off

    2. Заголовки Expiration устанавливаешь?
    Это на самом деле хорошая практика, но в разработке мешает
    Попробуй сделать так: на продакшене заведи файл VERSION.txt и записывай туда номер версии (например, 1.0) в тот момент, когда обновление выкатываешь. У себя такой файл не держи.
    Когда подключаешь CSS к странице, то проверяй наличие такого файла. Если файла нет, то ставь текущую метку времени.

    Пример на PHP
    <?php
    $versionPath = 'path/to/VERSION.txt';
    $version = is_file($versionPath) ? file_get_contents($versionPath) : time();
    ?>
    <link rel="stylesheet" href="/path/to/style.css?v=<?php echo $version ?>">


    На продакшене у тебя будет ссылка на CSS с фиксированной версией вида
    <link rel="stylesheet" href="/path/to/style.css?v=1.0">


    А на твоей машине будет всегда уникальный URL, который будет свежим, даже если заголовок Expiration выставлен.
    <link rel="stylesheet" href="/path/to/style.css?v=1494560580">


    То же самое - для JS и файлов изображений. Метка версии решает много проблем как у тебя, так и у пользователей твоего сайта после выкатки обновления на сервер.
    Ответ написан
    Комментировать
  • Как в PHP принять объект с файлом?

    copist
    @copist
    Empower people to give
    Отправлять файл черех AJAX - не простая задача. Есть несколько способов. Самый простой - если используются современные браузеры - использовать объект FormData. Этот JS класс умеет преобразовывать поля разного типа, включая file.

    <form id="form" action="send.php" method="post" enctype="multipart/form-data">
    <input type="file" name="UploadForm[attachment][]" multiple="">
    <button type="submit" class="btn btn-primary input-lg">Submit</button>
    </form>


    $.ajax({
        url: "send.php",
        data: new FormData($('#form').get(0)),
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        error: function(jqXHR, textStatus, errorThrown) { /** @var jqXHR jqXHR */
            console.log('error', textStatus, errorThrown);
        },
        success: function(data, textStatus, jqXHR) { /** @var jqXHR jqXHR */
            console.log('success', data);
        }
    });


    Рабочий пример: форма с аттачментами отправляется через AJAX (кнопка в подвале страницы, извиняюсь)

    Варианты без FormData описаны в статье https://blog.arvixe.com/how-to-send-multipart-data...
    Я раньше пользовался фреймами, а потом перешёл на библиотеку www.dropzonejs.com - она сама подбирает вариант в зависимости от возможностей браузера.
    Ответ написан
    1 комментарий
  • Как сохранить значение переменной в интернете?

    copist
    @copist
    Empower people to give
    Ну раз вы упомянули BaaS, то и смотрите на соответствующих сервисах, как это реализуется

    Например, Firebase и его пример приложения для Javascript по работе с хранилищем
    Ответ написан
    Комментировать
  • Как сделать так что бы при заполнении одной textarea заполнялась вторая?

    copist
    @copist
    Empower people to give
    В задаче не стояло указание не использовать jQuery :)
    <textarea id="t1"></textarea>
    <textarea id="t2"></textarea>

    $('#t1').on('keyup', function() {
       $('#t2').val($('#t1').val());  
    });

    Рабочий пример: codepen.io/copist/pen/GjKPzm
    Ответ написан
    2 комментария
  • Почему не собрались svg иконки в шрифт?

    copist
    @copist
    Empower people to give
    Символы для генерации шрифта должны быть максимально упрощены силами Adobe Illustrator или Inkscape.
    • Должен быть только один путь или другой примитив, без пересечений
    • Один цвет, любой
    • Без градиентов, клипов, анимации, текста, скриптов

    В твоём случае - скорее всего элемент чёрного цвета находится поверх квадратика белого цвета или прозрачного квадратика. Открой файл, удали этот квадратик.

    Спонсором ответа является сервис Icons8
    30 000+ иконок в 6 стилях, бесплатно, в любом цвете и размере + редактор + генератор шрифтов

    Я помогу разобраться. Приложи, пожалуйста, в вопросу или в комментариях несколько проблемных иконок и ZIP с результатом генерации (CSS, файлы TTF/OET/SVG/WOFF/WOFF2) и страницу HTML с подключенными файлами стилей c фрагментом, где используются эти символы.
    Ответ написан
    Комментировать
  • Как победить ошибку?

    copist
    @copist
    Empower people to give
    Посмотри лог ошибок на сервере - скорее всего была ошибка (исключение), которое в результате было отображено в формате HTML, а не JS или JSON

    Посмотри панель "Network" в Google Chrome - там возможно будет запись с кодом 4xx или 5xx - это ошибка
    5737225ce9db431faf67c054f2d2fffa.png

    И посмотри на текст ответа - там может быть HTML вместо JS
    ed296226618d458ba43dadaa33f29481.png
    Ответ написан
    Комментировать
  • Как в модальное окно JavaScript вставить див?

    copist
    @copist
    Empower people to give
    Я не нашёл упоминание про jQuery.esgbox - тут явно какая-то опечатка. Ссылка на документацию была бы очень кстати.

    Предположение, согласно принципам работы других плагинов для модальных окон под jQuery:

    Тут судя по всему используется привязка к какому-то элементу HTML по его id

    Скорее всего нужно чтобы на странице был блок, который потом станет модальным окном
    <div id="myModal"><p>Text</p></div>

    jQuery('#myModal').esgbox({ /* тут опции */ }); // скорее всего выбор этого блока через селектор jQuery
    Ответ написан
  • Все заголовки прописаны, но почему No 'Access-Control-Allow-Origin'?

    copist
    @copist
    Empower people to give
    7838d6ffbf39455099b6c005805e8e9a.png

    Посмотри реальные ответы сервера в Chrome Developer Tools в панели Network при отключенной опции "Disable Caching"

    Там может не быть CORS заголовков, или они могут быть не с тем access-control-allow-origin, если ты уже открывал тот же URL через прямой запрос из строки браузера или запрашивал тот же URL в том же браузере с другого домена.

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

    Решение, которое гарантирует, что ответ сервера не будет кэшироваться:
    1. в ответе сервера указывать заголовки, подавляющие кэширование
    2. делать запросы методом POST, который не кэшируется
    3. добавлять к URL "хвостик" из псевдослучайных символов, например ревизию кода, версию API, наименования вызывающего приложения или даже метку времени

    На практике мы пытались 1, 2 и в итоге пришли к 3 если гарантированно нужен незакешированный ответ сервера. Например, количество непрочитанных сообщений пользователя.
    Ответ написан
    Комментировать
  • UnderscoreJS. Возможно ли SEO?

    copist
    @copist
    Empower people to give
    Ответ написан
    Комментировать
  • Существует ли индексируемый поисковиками аналог AngularJS?

    copist
    @copist
    Empower people to give
    AngularJS + https://prerender.io/

    Пример: web-mastery-gauge.ru посмотрите исходник страницы - там только мета теги и ссылка на JS/CS. Откройте ту же страницу с UserAgent googlebot
    Ответ написан
    Комментировать
  • Как на нативном js получить ответ с сервера в виде массива или объекта?

    copist
    @copist
    Empower people to give
    Вот тут не делай конкатенацию console.log(ourServ+' our)');
    правильнее выводить два значения через запятую console.log(ourServ, 'our)');
    а лучше пользуйся пошаговой отладкой

    Вот: всё у тебя нормально вроде бы
    76f2305b29fa4e51bbd306698df8592f.png

    Ответ сервера надо перестроить, чтобы отображать более сложные данные. Может быть так:

    foreach ($data as $key) {
        $response[] = [
            'city' => $key['city'],
            'region' => $key['region'],
            'state' => $key['state'],
        ];
    }


    или так
    foreach ($data as $key) {
        $city = $key['city'];
        $stateRegion =  $key['region'] . (''!==$key['region'] && ''!==$key['state'] ? ' ' : '') . $key['state'];
        $response[] = $city . ''!==$stateRegion ? ' ( ' . $stateRegion . ' )' : '';
    }
    Ответ написан
    2 комментария
  • Выбор специализации в web разработке?

    copist
    @copist
    Empower people to give
    Фронт/Бэк - понятие неоднозначное. Это не обязательно или JS или RoR.
    Может быть пригодится copist.ru/blog/2015/08/26/backend-vs-frontend

    Fullstack - ещё более неоднозначное. Типа ни там, ни сям.
    На хабре по этому поводу большой спор был.
    А мне нравятся fullstack - с ними проще, они всё могут, не приходится задачи перекидывать и ждать.
    И сам я тоже - и ангуляр поправить/написать, и базу спроектировать, и сервачок настроить.
    Может это вопрос времени на подготовку?
    Ответ написан
    Комментировать
  • Отобразить текст по таймеру, чтобы клиенту не было видно в коде?

    copist
    @copist
    Empower people to give
    Фраза "Hello World" - это пример, что-то типа секретной информации.
    Думаю, автор имеет в виду, что ни JS, ни в HTML, ни в CSS нет этой фразы и её нельзя собрать из частей типа "Hello" + "World".

    В этом случае решение - AJAX с проверкой меток времени на сервере.

    В куки сохраняется код серверной сессии, а на сервере в сессию сохраняется когда секретная фраза будет доступна.

    У пользователя в HTML странице встраивается счётчик на JS, который некоторое время делает AJAX запрос на сервер.

    На сервере проверяется метка времени в сессии и текущий счётчик времени - "Достиг ли счётчик времени нужной отметки?" Если да - возвращается секретная строка. Если нет - возвращается ошибка.

    Возвращение ошибки нужно для того случая, если пользователь решил хакнуть систему и запросить URL раньше назначенного строка.

    Именно таким образом работают всякие там файло-качалки типа depositfiles: пока таймер не дотикает, пользователь не получит ссылку на файл, даже если полностью изучит JS код и отправит нужный запрос напрямую, не дожидаясь окончания таймера.

    Пример реализации:

    1. файл index.php
    <?php
    session_start();
    $_SESSION['secret_phrase'] = 'Hello, World'; // секретная фраза
    $_SESSION['time_to_show_secret'] = time() + 10; // через сколько времени фраза может быть доступна
    ?>
    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
    </head>
    <body>
      <div id="ajax"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      setTimeout(function(){
        $('#ajax').load('/secret.php'); // запросить данные через /secret.php и вставить внутрь <div id="ajax"></div>
      }, 10 * 1000); // через 10 секунд
    });
    </script>
    </body>
    </html>


    2. файл secret.php
    <?php
    session_start();
    if (isset($_SESSION['secret_phrase']) // если в сессии есть секретная фраза
            && isset($_SESSION['time_to_show_secret']) // и есть метка времени, когда фраза будет доступна
            && time() > $_SESSION['time_to_show_secret']) // и текущее время больше этой метки
        echo $_SESSION['secret_phrase']; // выдать секретную фразу
    else
        echo 'Секретная фраза пока не доступна'; // выдать ошибку


    Этот пример в архиве: https://www.dropbox.com/sh/54xk7ahezuandag/AABqbRa...
    Ответ написан
    Комментировать
  • Как это сделано, вращающиеся очки на сайте?

    copist
    @copist
    Empower people to give
    Через панель отладки в браузере тщательно просмотреть всё, что загрузилось при обновлении страницы без кэша
    В разделе"Media" нашёл видео
    6c53bf68269c4451896012b262078c1d.png
    Ссылку уже указал MaxKorz
    Ответ написан
    Комментировать
  • Как повесить обработчик события на изменение css-свойства?

    copist
    @copist
    Empower people to give
    Я бы порекомендовал пойти в обратную сторону.
    Чтобы поведение страницы реагировало на изменение какой-нибудь переменной в объекте.

    Речь идёт о концепции MVVM и библиотеках Angular, Aurelia.

    Или React, который обеспечивает рендеринг страницы и его можно привязать к модели в JS
    Ответ написан
    Комментировать
  • Как получить реальный опыт разработки без устройства в штат?

    copist
    @copist
    Empower people to give
    Соглашусь с Владислав Копылов
    Набить портфолио тестовыми заданиям - вариант хороший
    Во-первых - сделаешь сам. Может быть даже расскажут в чём косяки, если не понравится. Может быть даже дадут второй шанс на решение, если показать интерес и настоять.

    После тестового задания действительно могут дать задачи и это будут реальные задачи. Кроме того, можно подать своё резюме в несколько компаний и друг за другом пройти 3-4 собеседования с тестовыми заданиями. Пара месяцев работы и 4 задачи в портфолио есть.

    А вообще работодатель ожидает, что кандидат придёт с каким-нибудь набором практических навыков, а не с книжными знаниями. И, бывает, приходят и с отсутствием даже теории - "пусть меня научат". Работодателю нужно, чтобы ты выполнял работу, а не учился её выполнять. Есть компании, которые вкладываются в стажировку новичков и в обучение уже устроенных сотрудников, но при трудоустройстве смотрят именно на то, что уже умеешь делать и как интенсивно ты обучаешься самостоятельно.

    Пиши свой личный учебный проект, ищи союзников для написания мини-проекта в команде, участвуй в OpenSorce проектах
    Ответ написан
    Комментировать
  • Что значит оборачивание функции в скобки (function() { ... })?

    copist
    @copist
    Empower people to give
    Короткий ответ
    (function() { ... })()
    Это определение анонимной функции без параметров и непосредственный вызов её, так же, без параметров

    Длинный ответ
    Зачем оборачивать значение в круглые скобки?

    Оборачивание функции в скобки, так же как и оборачивание константы в скобки - это просто способ показать интерпретатору, что это значение внутри скобок может быть использовано как возвращаемое значение.
    var var_a = 5
    (var_a) /* или */ (5) // не является ошибкой, возвращает значение переменной или выражения
    function func_b() { }
    (func_b) /* или */ (function func_b() { }) // не является ошибкой, возвращает ссылку на функцию
    var var_c = { key: "val" }
    (var_c) /* или */ ({ key: "val" }) // не является ошибкой, возвращает объект
    var var_d = [ "one", "two" ]
    (var_d) /* или */ ([ "one", "two" ]) // не является ошибкой, возвращает массив


    Ну а раз (func_b) - это ссылка на функцию func_b, то значит её можно сразу же вызвать.
    A если (var_c) - это объект, то значит можно сразу же использовать его
    Аналогично (var_d) - это массив, то значит можно сразу же использовать его

    (func_b)() или (function func_b() { })() вызвать функцию
    (var_c).key или ({ "key": "val" }).key использовать объект
    (var_d)[0] или ([ "one", "two" ])[0] использовать массив

    Синтаксической ошибкой было бы использование функции, массива, объекта без скобок ( )
    function func_b() { }() ошибка "Unexpected token )"

    Хотя нет ошибки, по крайней мере в Google Chrome
    { key: "val" }["key"]
    ["one", "two"][0]

    Для чего вообще придумали самовызывающиеся функции?
    Для того, чтобы изолировать переменные и функции, чтобы они не попадали в глобальную область видимости.

    Сравни
    var a = "test"
    alert(a)

    по завершении этого блока переменная a болтается в глобальной области видимости

    и
    (function(){
        var a = "test"
    })()
    
    alert(a) // недоступно, потому что она была локальной переменной внутри анонимной функции


    Почему скобки ( ) пустые?
    В данном случае у функции function() { ... }нет формальных параметров, значит и вызывать можно без параметров.

    Но вообще в самовызывающуюся функцию можно передавать параметры. Это общая практика передачи ссылок на глобальные объекты:

    (function (w, d, $) {
       // некоторым нравится сокращать код путём использования коротких имён переменных
       w['fizz'] = "buzz" // вот так можно принудительно зарегистрировать
                           // глобальную переменную fizz
       $('body').css({background: 'red'}) // вот так можно работать с jQuery через привычную $
                           // даже если библиотека была загружена в режиме noСonflict
    }(window, document, jQuery))


    Некоторым не нравится длинный вариант проверки на undefined и они специально предусматривают лишний параметр, который не инициализируют

    (function (message1, message2, empty) {
        // это и есть проверка на undefined
        if (message1 === empty)
            alert('message1 is undefined')
        else
            alert('message1 = ' + message1)
    
        if (message2 === empty)
            alert('message2 is undefined')
        else
            alert('message2 = ' + message2)
    })("test") // вызвана только с одним параметром, значит второй по имени message2
    //  будет пустой, а третий empty специально ввели в качестве образца
    //  данных с типом "undefined", для служебного использования

    Зачем функция анонимная?
    Аналогично - чтобы не регистрировать её имя в глобальной области видимости, если она нужна один раз.
    Ответ написан
    7 комментариев