Метка «javascript» - 79

Задача: при вводе текста в одном текстовом поле («Title») нужно выводить его транслитерованное значение в другом («UserKey»), при этом в транслите допускаются только латинские буквы, цифры и тире.
Пример HTML с двумя полями: 

<input id="Title" name="Title" value="" type="text" />
<input id="UserKey" name="UserKey" value="" type="text" />

 Для включения транслитерации добавим следующий javascript-код на страницу:

    String.prototype.translit = (function () {
        var L = {
            'А': 'A', 'а': 'a', 'Б': 'B', 'б': 'b', 'В': 'V', 'в': 'v', 'Г': 'G', 'г': 'g',
            'Д': 'D', 'д': 'd', 'Е': 'E', 'е': 'e', 'Ё': 'Yo', 'ё': 'yo', 'Ж': 'Zh', 'ж': 'zh',
            'З': 'Z', 'з': 'z', 'И': 'I', 'и': 'i', 'Й': 'Y', 'й': 'y', 'К': 'K', 'к': 'k',
            'Л': 'L', 'л': 'l', 'М': 'M', 'м': 'm', 'Н': 'N', 'н': 'n', 'О': 'O', 'о': 'o',
            'П': 'P', 'п': 'p', 'Р': 'R', 'р': 'r', 'С': 'S', 'с': 's', 'Т': 'T', 'т': 't',
            'У': 'U', 'у': 'u', 'Ф': 'F', 'ф': 'f', 'Х': 'Kh', 'х': 'kh', 'Ц': 'Ts', 'ц': 'ts',
            'Ч': 'Ch', 'ч': 'ch', 'Ш': 'Sh', 'ш': 'sh', 'Щ': 'Sch', 'щ': 'sch', 'Ъ': '', 'ъ': '',
            'Ы': 'Y', 'ы': 'y', 'Ь': "", 'ь': "", 'Э': 'E', 'э': 'e', 'Ю': 'Yu', 'ю': 'yu',
            'Я': 'Ya', 'я': 'ya', ' ': '-', '_': '-', 
            '"': '', "'": '', '.': '', ',': '', '!': '', ':': '', ';': ''
        },
		r = '',
		k;
        for (k in L) r += k;
        r = new RegExp('[' + r + ']', 'g');
        k = function (a) {
            return a in L ? L[a] : '';
        };

        return function () {
            var text_string = this.replace(r, k).replace(' ', '-').toString();

            var literals = 'QqWwEeRrTtYyUuIiOoPpAaSsDdFfGgHhJjKkLlZzXxCcVvBbNnMm-0123456789';
            var newString = '';
            for (var i = 0; i < text_string.length; i++) {
                if (!(literals.indexOf(text_string.charAt(i)) == -1)) {
                    newString += text_string.charAt(i); 
                };
            };
            return newString;
        };
    })();

Читать полностью »

AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.

Дзен Angular

  • Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
  • Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
  • Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
  • Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
  • Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.

AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:

  • Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
  • Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
  • Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.

AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

Читать полностью »

Вместо предисловия

imageЭто первая статья из небольшой серии, которая написана разработчиками трехмерного javascript-движка на базе WebGL. Эта статья — обзорная, но в последующих планируется рассказать уже о самом движке и его возможностях — с примерами, демонстрациями и проч. И автор будет благодарен, если кто-нибудь поделится для него инвайтом, чтобы он мог не только отвечать на возможные вопросы в комментариях, но и последующие статьи на эту тему мог бы публиковать не через меня, а самостоятельно.

Обзор 3D в Web

Привет всем хабражителям. В этой статье я хочу немного рассказать о состоянии дел в области трехмерной графики в Web, и о том, что может предложить наша команда для тех, кто бы хотел реализовать проект, связанный с 3D, в вебе, но сомневается в выборе технологии или просто не знает в какую сторону «копать». Также надеюсь, что статья будет интересна всем, кто следит за развитием веб-технологий.
Читать полностью »

В общем передо мной встала задач переписать один из контролов построенный на репиттере, сделать его легче и отзывчивее для клиента. При этом решил использовать knockout. Только вот внутри для отображения цифровых данных использовались DevExpress'овские текстовые поля, они очень удобны и служили исправно, но тут встал вопрос, а как же при замене на обычные текстовые поля, я смогу добавить маску.

Читать полностью »

Привет!

Сегодня мы расскажем вам как использовать на веб-сайтах карты Nokia с помощью Nokia Maps JS API. Сервис «Карты Nokia» имеет не только очень простой в применении API, но ещё и отличную детализацию карт с огромной базой географических объектов, которая постоянно пополняется.

Больше информации про технологические возможности «Карт Nokia» вы можете узнать из выступления Сергея Руденко с Nokia Developer Days 2012 (ссылка), а мы приступим к описанию некоторых возможностей использования именно Nokia Maps JS API на примере интеграции карт и использовании возможностей геолокации и прокладывания маршрута. Выглядеть это будет примерно так:

Пишем простую карту с помощью Nokia Maps JS API

Читать полностью »

В этом посте я хотел бы показать основные возможности knockout по работе с данными в раскрывающихся списках (тег <select>). Как оказалось тут есть свои мелочи, на которые стоит обратить внимание при использовании, такого мощного инструмента как knockout.

Добро пожаловать под кат!

Читать полностью »

Главная морская конференция в этом году пройдет 17-23 сентября в Черногории, городке Петровац.

image

IT Sea — это не только доклады и новые знакомства, это — креативная среда, море, солнце, экскурсии, посиделки у костра.

В программе:

  • Круглый стол о будущем Frontend разработки, доклады о JavaScript, Flash (Stage3D), функциональном программировании (Erlang, Closure).
  • Докладчики из Германии, России, Беларуси, Черногории, Македонии.
  • Коллеги перебравшиеся жить в Черногорию поделятся своим опытом по смене обстановки и дадут несколько советов планирующим переезд.
  • Конференц — зал, расположенный в старой венецианской крепости =)

Читать полностью »

Leaflet 0.4 — новая версия открытой JS библиотеки для интерактивных карт

После 5 с половиной месяцев разработки при участии 33 разработчиков с момента выхода предыдущей стабильной версии, я очень рад наконец представить вам Leaflet 0.4 — новую версию легковесной JavaScript-библиотеки для интерактивных карт, которая одинаково хорошо работает и на полноценных компьютерах, и на мобильных устройствах.

Этот релиз несёт в себе более простой, удобный API и громадное множество улучшений и исправлений, и кроме этого сопровождается масштабным обновлением документации, запуском официального блога, и страничкой плагинов. Давайте рассмотрим улучшения по порядку.Читать полностью »

Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template.
Читать полностью »

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

Если окно модальное, то оно обязано быть модальным:

  1. Пользователю нельзя позволять прокручивать страницу под ним.
  2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

По этому принципу работает просмотр фото в Facebook и Вконтакте и, я считаю, что для модальных окон это правильный вариант.

Чтобы не мучать вас заранее деталями реализации, покажу сначала демо плагина jQuery: http://rmcreative.ru/playground/modals_plugin/demo.html.

Ну а теперь немного про реализацию.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js