Архив рубрики: WEB

Полезные скрипты JavaScript

Несколько полезных скриптов.
Повесить обработчики на фрейме.
function Addhandler() { var input = window.frames['mainFrame'].document.getElementById('Lastname'); if (input == null) { return; } else { var inputs = window.frames['mainFrame'].document.getElementsByTagName('input'); } if (undefined !== inputs && inputs.length) { for (index = 0; index < inputs.length; ++index) { var input = inputs[index]; input.onkeyup = function (e) { var item; var itext = ''; itext = this.value.replace(' ', ''); itext = itext.replace('ё', 'е'); var items = [«тест», «привет»]; for (i = 0; i < items.length; ++i) { item = items[i].replace(' ', ''); item = item.replace('ё', 'е'); if (itext.toLowerCase() == item.toLowerCase()) { alert('Вы угадали секретное слово ' + itext + ' поздравляем'); } } } } } }

JavaScript, добавить обработчик на элемент
function Addhandler() { var inputs = document.getElementsByTagName(«input»); for (index = 0; index < inputs.length; ++index) { var input = inputs[index]; input.onkeyup = function (e) { var item; var itext = «»; itext = this.value.replace(» «, «»); itext = itext.replace(«ё», «е»); var items = [«тест», «привет»]; for (i = 0; i < items.length; ++i) { item = items[i].replace(» «, «»); item = item.replace(«ё», «е»); if (itext.toLowerCase() == item.toLowerCase()) { alert(alert('Вы угадали секретное слово ' + itext + ' поздравляем');  } } } }; }
Jquery, можно определить больше одного обработчика
function Addhandler() { $(document).ready(function () { $('input').each(function () { var element = $(this); var j = 0; var DomElement = element.get(0); var ev = $._data(DomElement, 'events'); if (ev != undefined && ev.keyup != undefined) { j = 1; } else { $(this).bind(«keyup«, function (e) { var item; var itext = «»; itext = this.value.replace(» «, «»); itext = itext.replace(«ё», «е»); var items = [«тест», «привет»]; for (i = 0; i < items.length; ++i) { item = items[i].replace(» «, «»); item = item.replace(«ё», «е»); if (itext.toLowerCase() == item.toLowerCase()) { alert('Вы угадали секретное слово ' + itext + ' поздравляем'); } } }); } }) }) }
Провер
ка ввода, должен работать с 9 версии IE
function Addhandler() { var newDiv = document.createElement('span');newDiv.className = 'myclass';newDiv.id = 'statemsg';newDiv.style.backgroundColor = 'red';document.body.appendChild(newDiv);var msg = document.getElementById('statemsg');document.body.addEventListener('keydown', function (e) {msg.textContent = 'keydown:' + e.keyCode;});document.body.addEventListener('keyup', function (e) {msg.textContent = 'keyup:' + e.keyCode;});document.body.addEventListener('keypress', function (e) {msg.textContent += 'keypress:' + e.keyCode;});}
Проверка клавиш для окна должен работать с 9 версии IE
function Addhandler() {document.body.addEventListener('keyup', function (e){var el = document.activeElement;var itext = «»;var item;if (el && (el.tagName.toLowerCase() == 'input' && el.type == 'text' ||el.tagName.toLowerCase() == 'textarea')) {itext = el.value.trim(); itext = itext.replace('ё', 'е');var items = [«тест», «привет»]; for (i = 0; i < items.length; ++i) {item = items[i].replace(' ', '');item = item.replace('ё', 'е');if (itext.toLowerCase() == item.toLowerCase()) { alert('Вы угадали секретное слово ' + itext + ' поздравляем'); } } }  });  }

Автор: Roman D
Дата публикации: 2016-04-13T07:53:00.001-07:00

Селекторы JQuery

Селекторы jQuery

Для изучения используйте jQuery Selector Tester
elements elements

Автор: Roman D
Дата публикации: 2016-04-01T01:51:00.000-07:00

Установка LAMP server на VirtualBox

Понадобился Linux-сервер для тестирования кое-каких своих идей. Для этого было принято решение поднять LAMP на виртуальной Ubuntu Server  VirtualBox.

Ниже некоторые моменты, которые пришлось для этого решить.

Я не буду расписывать здесь установку VirtualBox и Ubuntu Server внутри него. Установочный файл VB и образ Ubuntu скачаны с официальных сайтов, установка стандартная. Читать

Онлайн-ресурсы для создания инфографики

Люблю инфографику! На сервисе Pinterest у меня даже есть отдельная папка с понравившимися работами. Они и красивы, и интересны, и полезны одновременно.
Кстати, вы уже в Pinterest или еще нет? Присоединяйтесь и подписывайтесь на мои доски!
Правда, должен отметить один минус: увидев подходящую работу, я, как правило, несусь сохранить ее у себя, а вот вникать в ее содержание времени не нахожу. Сразу это сделать не получается, а когда откладываешь на потом, сами знаете, что получается. 🙂 Но иногда, бывает, дорвусь до своих сокровищ и чахну над ними, как Кощей над златом. 
Знаю, что те, кто используют в  своей работе инфографику, добиваются гораздо бОльших успехов, чем те, кто ее игнорируют. Сейчас, когда за внимание интернет-пользователей идет ожесточенная борьба, это особенно актуально. По статистике, более 45% пользователей кликнут на ссылку, если она ведет на инфографику, а у 30% пользователей возникает непреодолимое желание поделиться ею с другими.
В общем, чрезвычайно полезная и перспективная вещь!
Вот 8 онлайн-сервисов, которые помогут вам в вашем начинании:

Последние два сервиса предназначены для работы с графиками, диаграммами.

Сервис для создания инфографики

Автор: Gennady
Дата публикации: 2015-10-11T04:08:00.002-07:00

Выполняем тестовое задание на вакансию "Стажёр-разработчик на JavaScript"

За неделю прочитал развлекательное чтиво на 640 страниц: Изучаем программирование на JavaScript, чтобы как-то понять как сделать тестовое задание на позицию Стажёр-разработчик на JavaScript

Скажу честно, вбивал себе в голову принципы JavaScript с особым усердием, но за неделю, конечно, этот язык программирования не узнать, но отвел себе неделю на чтение литературы и неделю на разработку. Но что-то из книги понял…

Попробую сегодня (26.09.2015) начать делать задание.

Техническое задание: Сортировщик карточек путешественников.

Условие:
Вам дана стопка посадочных карточек на различные виды транспорта, которые доставят вас из точки A в точку B. Карточки перепутаны, и вы не знаете, где начинается и где заканчивается ваше путешествие. Каждая карточка содержит информацию о том, откуда и куда вы едете на данном отрезке маршрута, а также о типе транспорта (номер рейса, номер места и прочее).

Предоставьте JavaScript API, который отсортирует такой список карточек и вернет словесное описание, как проделать ваше путешествие. API должен принимать на вход несортированный список карточек в формате придуманном вами и возвращать, например, такое описание:

  • Take train 78A from Madrid to Barcelona. Seat 45B.
  • Take the airport bus from Barcelona to Gerona Airport. No seat assignment.
  • From Gerona Airport, take flight SK455 to Stockholm. Gate 45B. Seat 3A. Baggage drop at ticket counter 344.
  • From Stockholm, take flight SK22 to New York JFK. Gate 22. Seat 7B. Baggage will be automatically transferred from your last leg.

Требования:

  • Алгоритм должен работать с любым количеством карточек, если все карточки образуют одну неразрывную цепочку.
  • Время прибытия и отправления неизвестно и не важно. Подразумевается, что средство передвижения для следующего отрезка дожидается вас.  вычеркнул, чтобы не отвлекало, нас это на данный момент не интересует.
  • Структура кода должна быть расширяема для использования любых типов транспорта и информации, которая может быть связана с каждым типом транспорта.
  • API будет вызываться из других частей JavaScript-кода без необходимости дополнительных запросов между браузером и сервером.
  • Не используйте библиотеки и фреймворки, напишите все с нуля.
  • Задокументируйте в коде формат входных и выходных данных. 

 РЕШЕНИЕ

На самом деле это не решение, а мысли вслух, т.е. переложу то что понял из книги на решение поставленной задачи.
  1. У нас есть карточки путешественников. Это некий объект информации, в котором заключена следующая информация: Пункт отправления (А), Пункт назначения (B), способ передвижения, дополнительная информация (чисто разбавить сухой текст)
  2. Мы должны сортировать ПО ПОРЯДКУ пунктов отправления и назначения. Например: A1-B1(A2)-B2(A3)-B3 и так далее.
  3. Есть несколько способов передвижения: Ноги, Машина, Городской транспорт, Поезда, Самолеты, Параходы и так далее — нужно чтобы была возможность расширять перечень
  4. У каждого способа передвижения своя специфика на каждый вид транспорта
  5. Метод сортировки по массиву объектов An и Bn.
Какие у меня будут объекты?
Города
Способы передвижения

Какие у меня будут функции?
Сортировка

Черновой вариант сортировки и вывода 

Автор: Ilya Druzhinin
Дата публикации: 2015-09-26T06:12:00.001-07:00