Category Archive: Javascript

Парсинг DN (Distinguished Names)

В ЭЦП данные о её владельце и изготовителе хранятся в виде Distinguished Names (DN).
Например:

CN=БЛОГОВ БЛОГ,SURNAME=БЛОГОВ,SERIALNUMBER=IIN123456789012,C=KZ,L=АСТАНА,S=АСТАНА,G=БЛОГОВИЧ,O=ТОО \"Рога\, копыта 24\\7\",OU=BIN000111222333

Атрибуты отделяются между собой запятыми, каждый атрибут представляет из себя ключ и значение, разделенные символом равно (=). Так же некоторые символы экранируются, например: \" \,
Предлагаю следующую функцию, которая принимает строку в формате DN и возвращается объект с соответствующими полями и значениями (я использовал angular’овский цикл, но можно заменить на обычный).

function parseDN(value){
    var parts = value
        .replace(/\\,/g,'<comma>')
        .replace(/,/g,'<delim>')
        .replace(/<comma>/g,',')
        .replace(/\\\\/g,'<backslash>')
        .replace(/\\/g,'')
        .replace(/<backslash>/g,'\\')
        .split('<delim>');
    var map = {};
    angular.forEach(parts, function(part){
        var split = part.split('=');
        map[split[0]] = split[1];
    });
    return map;
}

Пример использования:

    var map = parseDN("YOUR_DN_STRING");
    console.log(map.CN);
    console.log(map.SERIALNUMBER);
    console.log(map.O);

Биржевая диаграмма на Flot

Как-то мне дали задание:

Сделать рандомно растущий график используя любые инструменты. 

Образцом была следующая gif-ка:
graph

Просмотрев несколько инструментов для рисования графиков, остановился на Flot.
Flot — JavaScript библиотека для jQuery для рисования графиков.
Скачать Flot с примерами можно с официального сайта http://www.flotcharts.org. Стоит отметить наличие хороших примеров использования Flot для построения различных графиков и диаграмм.

За вечерок смог реализовать на Flot задание.
В статике это выглядит так:
stock_chart

В динамике это выглядит так: http://kesh.kz/stock_chart/.

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

Перемешивание букв в словах

Не имеет значения в каком порядке расположены буквы в слове …

По рзелульаттам илссеовадний одонго анлигйсокго унвиертисета, не иеемт занчнеия, в кокам пряокде рсапожолены бкувы в солве. Галвоне, чотбы преавя и пслоендяя бквуы блыи на мсете. Осатьлыне бкувы мгоут селдовтаь в плоонм бсепордяке, все рвано ткест чтаитсея без побрелм. Пичрионй эгото ялвятеся то, что мы не чиатем кдаужю бкуву по отдльенотси, а все солво цликеом:))

Сегодня я приведу примеры реализации таких перемешиваний букв в словах. Первая реализация будет на языке Java, а вторая реализаций будет на JavaScript.

Реализация на Java

Цель: создать метод turn, который принимает строку, а возвращает строку со словами, в которых перемешаны все буквы, кроме первой и последней.
Например, turn(«По результатам исследований») вернет следующий текст: «По рзлуаьаттем иаслсеодинвй»

Необходимо подключить следующие пакеты для работы с регулярными выражениями:

import java.util.regex.Matcher;
import java.util.regex.Pattern;

Самое главное — регулярное выражение.
\p{L} — означает unicode символ
{4,} — задает количество от 4 до бесконечности

//регулярное выражение поиска unicode-последовательности из более 3-х символов
static final Pattern p = Pattern.compile("\\p{L}{4,}");

Реализация функции turn:

//функция принимает строку в обычном виде,
//а возвращает в перемешанном
static String turn(String str){
	//разбор строки
	Matcher m = p.matcher(str);
	//обработанные данные будем добавлять в переменную sb
	StringBuilder sb = new StringBuilder();
	//перебираем все фрагменты, которые нужно перемешать
	while(m.find()){
		//создаем массив из номеров позиций букв в массиве,
		//которые нужно перемешать
		int size = m.end() - m.start() - 2;
		int[] a = new int[size];
		int ndx = 0;
		for(int j = m.start() + 1;j < m.end() - 1;j++){
			a[ndx++] = j;
		}		
		//просто копируем все символы, которые не нужно перемешивать
		for(int i=sb.length();i<=m.start();i++){
			sb.append(str.substring(i, i+1));
		}
		//перемешиванием массив
		mix(a);
 
		//добавляем в переменную sb перемешанные буквы
		for(int el : a){
			sb.append(str.substring(el, el + 1));
		}
	}	
	//добавляем последние символы, которые перемешивать не нужно
	for(int i=sb.length();i<str.length();i++){
		sb.append(str.substring(i, i+1));
	}		
	return sb.toString();
}

Ниже приведена функция перемешивания массива:

//функция перемешивания массива
static void mix(int[] arr){
	for(int i=0;i<arr.length;i++){
		int rnd1 = (int)(Math.random() * arr.length);
		int rnd2 = (int)(Math.random() * arr.length);
		int swap = arr[rnd1];
		arr[rnd1] = arr[rnd2];
		arr[rnd2] = swap;
	}
}

Реализация на JavaScript
Из-за особенностей JavaScript реализация будет немного отличаться.
JavaScript поддерживает регулярные выражения, но не поддерживаются класс unicode-символов, а нам нужен класс символов \p{L}.
Для решения этой проблемы будем использовать плагин XRegExp.
Скачаем плагин с официального сайта http://xregexp.com/plugins/ или отсюда

Подключаем плагин к странице:

<script src="xregexp-all.js"></script>

Регулярное выражение создается с помощью функции XRegExp, в которую первым параметром передаем шаблон регулярного выражения(описание шаблона см.выше), а вторым параметром флаг g, означающий поиск всех совпадений.

var exp = XRegExp('\\p{L}{4,}','g');

В реализации функции turn есть несколько ньюансов:
1) Вместо ресурсозатратной операции конкатенации(склеивания) строк мы будет добавлять символы в массив с помощью метода push. В конце мы сольем все элементы массива с помощью функции join, которая параметром принимает разделитель между элементами, а в нашем случае это пустая строка.
2) В JavaScript при использовании такого синтаксиса: for(el in arr), в переменную el кладется не элемент массива, а ключ. Чтобы получить элемент нужно получить его из массива по ключу: arr[el].

//функция принимает строку в обычном виде,
//а возвращает в перемешанном
function turn(text){
	//обработанные данные будем добавлять в массив res
	var res = [];	
	//перебираем все фрагменты, которые нужно перемешать
	while(match = exp.exec(text)){	
		//создаем массив из номеров позиций букв в массиве,
		//которые нужно перемешать
		var first = match.index + 1;
		var last = match.index + match.toString().length - 2;
		var arr = [];
		for(i=first;i<=last;i++){
			arr.push(i);
		}
 
		fix(arr);//перемешиванием массив
 
		//просто копируем все символы, которые не нужно перемешивать
		for(i=res.length;i<=match.index;i++){
			res.push(text.substring(i,i+1));
		}
 
		//добавляем перемешанные символы
		for(el in arr){
			var ndx = arr[el];
			res.push(text.substring(ndx,ndx+1));
		}	
	}
	//добавляем последние символы, которые не нужно перемешивать
	for(i=res.length;i<text.length;i++){
		res.push(text.substring(i,i+1));
	}
	return res.join('');
}

Код перемешивания элементов массива:

//функция перемешивания массива
function fix(arr){
	for(i=0;i<arr.length;i++){
		var rnd1 = Math.floor(Math.random() * arr.length);
		var rnd2 = Math.floor(Math.random() * arr.length);
		var swap = arr[rnd1];
		arr[rnd1] = arr[rnd2];
		arr[rnd2] = swap;
	}
}

Готовую реализацию можно увидеть на странице: Перемешивание букв в словах (Пример)

Кодирование символов казахского языка в Web

 

Символ

Код в HTML

Код в JavaScript

Ә   ә

&#1240;   &#1241;

\u04D8   \u04D9

Ұ   ұ

&#1200;   &#1201;

\u04B0   \u04B1

І   і

&#1030;   &#1110;

\u0406   \u0456

Ң   ң

&#1186;   &#1187;

\u04A2   \u04A3

Ғ   ғ

&#1170;   &#1171;

\u0492   \u0493

Ү   ү

&#1198;   &#1199;

\u04AE   \u04AF

Қ   қ

&#1178;   &#1179;

\u049A   \u049B

Ө   ө

&#1256;   &#1257;

\u04E8   \u04E9

Һ   һ

&#1210;   &#1211;

\u04BA   \u04BB

Программный клик на ссылке в браузере Opera

Долгое время в проекте, над которым я работал, авторизация в браузере Opera проходила как-то не так.
Суть проблемы была в том, что в браузере Opera 12.10, когда я в текстовое поле вводил пароль и нажимал Enter, авторизация не происходила (по нажатию Enter должна была нажаться ссылка OK). Хотя в других браузерах все работало прекрасно: Firefox 17.0.1, IE 9 и Chrome 24.

Вот упрощенный пример:

<input value="" onkeypress="enterButtonClick(event)" />
 
<a id="link" href="#" onclick="alert('hello')">ОК</a>

Сам скрипт:

<script type="text/javascript" language="JavaScript">	
	function enterButtonClick(e){
		if(e.keyCode == 13){//Клавиша Enter
			document.getElementById('link').click();			
		}
	}
</script>

Долго искал решение. Оказалось в Opera нужно предотвращать стандарстное действие клавиши Enter, т.к. она перебивала клик на ссылке! Это делается методом preventDefault объекта event.

<script type="text/javascript" language="JavaScript">	
	function enterButtonClick(e){
		if(e.keyCode == 13){//Клавиша Enter
			document.getElementById('link').click();
			e.preventDefault();//предотвратить стандартное действие клавиши
		}
	}
</script>