Ответы пользователя по тегу HTML
  • Как заменить функционал Sublime Text 3 У visual studio code?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    1. cmd + F2 (на маке) выделит все включения текущего слова. Мульти-курсор, можно заменить или допечатать/удалить часть – везде и сразу ©
    2. поиск в VSCode офигенный. И по документу, и по всему проекту, причем можно открыть несколько «редакторов поиска». Искать и с учётом регистра, совпадением слова целиком, регулярными выражениями. Белый/черный список расширений файлов, папок. Исключить / включить папки типа vendors или node_modules.
    3. cmd + shift + P и начать печатать "Emmet: Balance (inward)" – и выбрать команду
    4. плагин PHP Intelephense, и не забыть отключить VSCode PHP Language Features, как пишут по ссылке в разделе Quick Start


    Скачайте/распечатайте самые популярные клавишные команды VSCode под Windows, под Mac или под Linux.
    Ответ написан
    5 комментариев
  • Что надо сделать что бы таймер не сбрасывался при обновлении страницы?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    лучше один раз в начале определить дату-время окончания отсчёта, и её 1 раз сохранить сразу же в LocalStorage.

    По таймеру показывать разницу текущего времени и «времени Че».

    Таймеры не точны. Поэтому лучше зарядить этот таймер не на 1 секунду, а чаще, на 250 мс, например — это поможет избежать иногда проскакивания секунды или, наоборот, чуть более быстрой смены.
    Ответ написан
    Комментировать
  • Как задать :hover для самого элемента?

    Никак.

    Только через таблицу стилей.
    Или имитировать, обрабатывая события JavaScript'ом.

    Отчего бы не назначать один из трёх классов налету:
    switch (Model[i].Type) {
      case EventType.Call:
        className = 'my-class-call';
        break;
      case EventType.Meeting:
        className = 'my-class-meeting';
        break;
      // ...
    }
    
    <a class="@className" id="user-event-@i" href="@Url.Action("Details", "Event", new { @id = @Model[i].Id })">
      <div style="width: 100%; min-height: 110px; border-top: 2px solid #CFCED1; border-left: 1px solid #CFCED1; border-right: 1px solid #CFCED1; background-color: @backgroundColor; cursor: pointer;">
      </div>
    </a>


    И определить однажды в начале стили
    .my-class-call { ... }
    .my-class-call:hover { ... }
    
    .my-class-meeting { ... }
    .my-class-meeting:hover { ... }
    Ответ написан
    4 комментария
  • Как создать функцию, которая принимает текст, разделённый переносами строк и возвращает новый текст, в котором каждая строка обернута в тег?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Разбить такой текст по символу новой строки в массив.
    Каждую строку обернуть в тег.
    Снова склеить строки в одну, с помощью символа новой строки:
    text.split('\n')
      .map(row => `<p>${row}</p>`)
      .join('\n');
    Ответ написан
    Комментировать
  • Будут ли разной скорость загрузки трех изображений из одного источника и трех изображений из разных?

    HTML
    • Три тега с общим одинаковым src загрузят картинку один единственный раз и покажут в трёх местах.
    • Три тега с разными src загрузят три разные картинки.

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

    HTTP

    Случай трёх разных картинок ещё интересно рассмотреть с т.з. передачи от сервера в браузер.

    Если веб сервер работает по протоколу HTTP/1.1, то 3 картинки это 3 разных запроса. Для каждого устанавливается новое соединение. Скачивание идёт параллельно.
    Если по протоколу HTTP/2, то соединение одно, и 3 запроса выстроятся последовательно. Экономия на установлении новых соединений.

    В теории оба варианта используют доступный канал по максимуму, поэтому HTTP/2 должен быть быстрее за счёт экономии на времени установления новых соединений.
    Какой из двух протоколов окажется быстрее на практике, зависит ещё и от внешних факторов, поэтому сложно однозначно заявить.

    В любом случае, скачивание трёх разных картинок не быстрее скачивания одной из них.
    Ответ написан
    Комментировать
  • Почему при нажатии на второй чек бокс срабатывает первый?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    id должны быть уникальными.
    <?php
    foreach ($logs as $i => $val) { ?>
    ...
    <input type="checkbox" id="switch-1-<?php echo $i; ?>" 
    ...
    <input type="checkbox" id="switch-2-<?php echo $i; ?>"
    Ответ написан
  • Как с html формы собирать данные в .txt?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Начните с упрощенной формы с единственным полем и кнопкой submit. Добейтесь, чтобы данные записывались в файл.

    Полям надо давать имя: атрибут name Например
    <input type="text" name="first_name" placeholder="First name">
    
    <select name="day_of_week">
      <option value="1">Monday</option>
      <option value="2">Tuesday</option>
      <option value="3">Wednesday</option>
    </select>


    PHP примерно такой:
    <?php
    $filename = 'form_responses.txt';
    
    if (!empty($_POST)) {
        $record = [
            // перечисляются поля формы
            'first_name' => filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING),
            'day_of_week' => filter_input(INPUT_POST, 'day_of_week', FILTER_SANITIZE_NUMBER_INT),
        ];
    
        $recordString = implode('; ', $record) . PHP_EOL; // склеить значения через точку с запятой
    
        file_put_contents($filename, $recordString, FILE_APPEND);
    }
    Ответ написан
    Комментировать
  • Как понять какой элемент был нажат, без использования id и аттрибутов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно слушать события клика выше в дереве, на общем родителе. Да хоть на document, как в примере.
    Это называется «делегирование событий» — мы поручаем обработку событий не каждой кнопке по отдельности, а общему предку.

    Из события клика сразу вытаскивать event.target – это кликнутый элемент.
    Проверять, кнопка ли это вообще, и есть ли нужный класс. Т.к. ловиться будут вообще все клики в документе.
    document.addEventListener('click', ({ target }) => {
      if (!target.classList.contains('button')) return; // не тот клик
      target.classList.toggle('active');
    });


    Ответ написан
    Комментировать
  • JS. Как задать размер canvas?

    именем ctx традиционно обозначают не элемент canvas, а взятый из него context (который бывает 2d, webgl и др.

    В вашем случае раз есть элемент, ему можно задать атрибуты:
    ctx.width = 100;
    ctx.height = 100;
    Ответ написан
    Комментировать
  • Кнопка создать select?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Вывести данные для опций один раз, и положить их в константу:
    spoiler
    $options = [
        [null, $_LNG['TYPE_ORDER']],
        ['select_all', $_LNG['ALL_TYPES']],
        ['select_domain', $_LNG['DOMAIN']],
        ['select_server', $_LNG['SERVER']],
        ['select_ssl', $_LNG['SSL']],
        ['select_desing', $_LNG['DESING']],
        ['select_script', $_LNG['SCRIPT']],
        ['select_layout', $_LNG['LAYOUT']],
        ['select_adv', $_LNG['ADV']],
        ['select_seo', $_LNG['SEO']],
    ];
    
    printf('const options = %s;', json_encode($options));


    Вот такая JS функция динамически создаёт из этих options полноценный элемент select со всеми опциями:
    createSelect = () => {
      const select = document.createElement('select');
      options.forEach(([value, title]) => {
          const option = document.createElement('option');
          option.innerText = title;
          if (value) {
            option.value = value;
          } else {
            option.setAttribute('disabled', true);
            option.setAttribute('selected', true);
          }
          select.appendChild(option);
        });
      return select;
    };

    Создали селект – одновременно создаём кнопку, но пока её прячем. Референс на созданный селект и кнопку держим. По событию выбора в свежесозданном селекте – показать изначально скрытую кнопку "Добавить".

    Нажатие на кнопку создаёт ещё один селект-с-кнопкой.

    Ответ написан
    3 комментария
  • Как сменить фон на всех открытых страницах?

    Использовать shared web worker:
    при «установке» цвета, в shared worker уходит сообщение, которое принимают все открытые страницы с этого домена в этом же браузере.

    Цвет меняется от полученного от воркера сообщения.
    Ответ написан
    Комментировать
  • Как конвертировать HTML-текст в обычный?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1. создать элемент
    2. в него положить исходный HTML как innerHTML
    3. забрать из него уже textContent

    const textFromHTML = html => {
      const el = document.createElement('div');
      el.innerHTML = html;
      return el.textContent;
    }
    
    textFromHTML('на уровне около &#036;300') // "на уровне около $300"
    Ответ написан
    Комментировать
  • Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Не очень удачно, что таймеры часто обновляют содержание страницы, по сути ничего не меняя – текст остаётся тот же большую часть срабатываний.

    Один вариант — использовать Shadow DOM, можно с React или Vue – те берут на себя задачу обновления реальной DOM только фактически изменившимися участками. Но освоение нового инструмента займёт какое-то время.

    Другой вариант – использовать события. Что-то меняется только когда впервые наступает момет «Че». Например, время 08:40. В этот момент можно выбросить событие. Считайте, что «Событие» == «Звонок».
    Слушать это событие будет каждый компонент урока. И менять своё состояние, если время – его.

    Как я понимаю, там ещё обычные часы должны тикать. Вот в них же можно отслеживать моменты, когда из 08:39 стало 08:40 – предыдущее значение ещё-не, а текущее уже-да. Вот тогда и выбрасывать событие.

    У компонента урока может быть одно из трёх состояний: "Upcoming", "Ongoing", "Completed". В обработчике события можно принимать решение, какое из трёх переключиться, исходя из времени события и собственных отметок времени начала и конца.
    Ответ написан
  • Как сделать так, чтобы когда наступало время 8:00, то выводилось "Урок начался!", а когда наступало 8:40 - "Урок закончился!"?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    1-й вариант: поймать однократное «событие» — предыдущее время было «не то», и вот сейчас стало «то» – тогда вывести что-то. Это можно ловить в таймере, который обновляет часы. И его стоит запускать чаще, чем раз в секунду, чтобы время точнее щелкало, иначе могут пропускаться отдельные секунды.

    2-й вариант, менее точный, т.к. таймеры в JavaScript могут здорово отклоняться от реального времени. В момент запуска вычислить, сколько там времени осталось до 08:00 и до 08:40, и зарядить два setTimeout() на нужные количества миллисекунд.
    Ответ написан
    Комментировать
  • Как убрать галочки через checkbox?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    поможет setAttribute("checked", 1) и removeAttribute("checked") на очередном чекбоксе:
    Ответ написан
    Комментировать
  • Для чего нужен HTML элемент samp?

    Документация элемента <samp>:
    (всё на англ.)
    Ответ написан
    Комментировать
  • Как я могу добавлять элементы в DOM дерево?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    если элемент с классом "GrandMuther" всего 1, то так:
    const sourceElement = document.querySelector('.GrandMuther');
    
    // во что заворачивать
    const wrapper = document.createElement('div');
    wrapper.classList.add('Mother');
    
    Array.from(sourceElement.children)
      .forEach(el => wrapper.appendChild(el));
    sourceElement.appendChild(wrapper);
    Ответ написан
    1 комментарий
  • Кто поможет решить задачу по JavaScript?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    узнать, есть ли атрибут у элемента: element.hasAttribute('maxlength')

    установить атрибут: element.setAttribute('maxlength', 20)

    выбрать все: document.querySelectorAll('input[type=password]')

    План:
    1. выбрать все с типом password;
    2. пройти по ним циклом forEach()
    3. внутри смотреть, есть ли уже атрибут maxlength;
    4. если нет, добавить атрибут
    5. выполнить alert() в любом случае
    Ответ написан
    Комментировать
  • Как узнать сколько лет человеку через input?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Слушать событие изменения — "input", брать значение – это будет строка типа "2022-01-19"
    Из неё конструировать объект Date.
    Втрой объект Date создать на сейчас. И сдвинуть год на 18 назад.
    Сравнить, какой больше:

    Ответ написан
    Комментировать
  • Как svg sprite сделать обычной картинкой?

    сделать снимок экрана
    Ответ написан
    Комментировать