Dynamic load of content elements by ajax (23.06.2016)
Dynamic load of content elements (post, articles etc) by ajax in endless scrolling  
html:
<div class="content">
  <div class="element"></div>
  <div class="element"></div>
  ...
</div>

js

//useful to get GET-parameters from url, which may be used in sql WHERE
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
}

//elements counter, used in sql LIMIT operator on backend
var more = 10;

//send query to backend when we scrolled down to end of page
$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
      $.post( "/response.php", {more: more, search: getQueryVariable("search")}, function( data ) {
        if(data) {
          $(".content").append(data);
          more += 10;
        }
      });
  }
});

In this example we got prepared formatted content from backend.
Ajax, JavaScript
Pure JavaScript Ajax form handler example (27.11.2015)
Here we send all form fields as json to backend on form submit.

JavaScript
$("#form").submit(function(e) {
  e.preventDefault()
  var xhr = new XMLHttpRequest();
  var params = $('#form').serialize();
  xhr.open('POST', '/mail.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
       if(xhr.status == 200) {
       $('#form').css("display", "none");
           }
    }
  };
  xhr.send(params);
});
JavaScript
Textarea undo redo (20.11.2014)
Заведем объект для хранения истории контента поля ввода:
var buffer = {
  content: [],
  add: function(el) {
    this.counter = this.current = this.content.push(el)-1;
  },
  undo: function() {
    if(this.current>0) this.current-= 1;
    return this.content[this.current];
  },
  redo: function() {
    if(this.current<this.counter) this.current+= 1;
    return this.content[this.current];
  },
  counter: 0,
  current: 0
}
И установим обработчик событий:
window.onload = (function() {
  document.getElementById("content").onkeydown = function(e) {
    if(this.value!=buffer.content[buffer.current]) buffer.add(this.value);
    if (e.keyCode == 90 && e.ctrlKey) { //ctrl+z
      e.preventDefault();
      this.value = buffer.undo();
    }
    if (e.keyCode == 89 && e.ctrlKey) { //ctrl+y
      e.preventDefault();
      this.value = buffer.redo();
    }
  }
});
JavaScript
Динамический viewport (15.11.2014)
Screen есть у мобильников и планшетов, проверять его можно не ожидая [window].onload

<meta name="viewport" id="vp">
...
if(screen.width<=480) document.getElementById("vp").setAttribute("content", "width=480");
JavaScript
Постинг через API vk.com (13.11.2014)
Авторизация для JS-приложений (будут работать с разных ip и без редиректа токена):
https://oauth.vk.com/authorize?client_id=APP_ID&redirect_uri=https://oauth.vk.com/blank.html
&response_type=token&scope=friends,wall,offline&v=5.26
Параметр offline дает нам "вечный" токен до смены авторизовавшим его пользователем пароля. Токен будет получен в hash-части url.

Пример вызова метода:
https://api.vk.com/method/wall.post?owner_id=-PUBLIC_ID&access_token=TOKEN&message=MESSAGE&v=5.26

PHP и другие серверы: метод с получением code, затем token - херня и, хоть он до сих пор опубликован в документации, не работает. Токен все равно надо получать через браузер, как в примере выше.
$query = file_get_contents("https://api.vk.com/method/wall.post?owner_id=$public_id&message=Тест&v=5.26&access_token=$token")
JavaScript, PHP, API
Произведение, состоящее из чисел множителей (19.08.2014)
Поиск подобных пар чисел:
6880=86*80
1827=87*21
1395=93*15
для множителей менее ста.

http://jsfiddle.net/dystar/j51Ls53s/
JavaScript
Руководство по Brainfuck для новичков (16.08.2014)
[Оригинал]
[Текущее состояние перевода]

Final version 2012-08-11
Начало перевода 2014-07-18

Дословного перевода у меня не получилось, кое-где имеются отступления от текста. Также потребовалось изменить ряд примеров и исправить ошибки в них.

Содержание:
Введение. История создания языка.
Команды. Абстрактная модель.
Пример программы - ввод-вывод.
Hello World!
Простые конструкции. Арифметика.
Условный переход.
Сравнение.
Ответы на частые вопросы.

Мой интерпретатор Brainfuck на js
Я намеренно не стал добавлять выход из цикла по инструкции "]" при нулевой текущей ячейке, по-моему, эта проверка лишняя, ведь мы все равно вывалимся из цикла в его начале.
Brainfuck, JavaScript
Получить по клику слово из textarea (06.02.2014)
function caretPos(el)
{
  var pos = 0;
  // IE Support
  if (document.selection)
  {
    el.focus ();
    var Sel = document.selection.createRange();
    var SelLength = document.selection.createRange().text.length;
    Sel.moveStart ('character', -el.value.length);
    pos = Sel.text.length - SelLength;
  }
  // Firefox support
  else if (el.selectionStart || el.selectionStart == '0')
    pos = el.selectionStart; //нашли индекс кликнутого символа
  
  var str = el.value;
  var re = /(?!\d+)[\u00C0-\u1FFF\u2C00-\uD7FF\w]+/gi; //Это всего лишь аналог "\w+"
  while ((match = re.exec(str)) != null) {
    if (pos >= match.index && (pos <= match.index + match[0].length)) //если индекс в пределах слова
      alert(match);
  }
}
Вопрос на Google Answers
Поиск позиции в textarea
JavaScript, answers
Задание симферопольского Яндекса (20.10.2012)
Пропарсить "односвязный список в обратном порядке".
Самому было тяжело въехать, почему же оно так работает, но все же mission complete :).

function reversePrint (linkedList) {
  if (linkedList.next) reversePrint(linkedList.next);
  console.log(linkedList.value);
}

var someList = {
    value: 1,
    next: {
        value: 2,
        next: {
            value: 3,
            next: {
                value: 4,
                next: null
            }
        }
    }
};
reversePrint(someList); //4 3 2 1

Небольшой апдейт - раз имеется next, то хочется иметь и prev со ссылкой на родителя. Легким движением руки модифицируем функцию.

function reversePrint (linkedList) {
  if (linkedList.next) {
    linkedList.next.prev = linkedList;
    reversePrint(linkedList.next);
  }
  if (!linkedList.prev) console.log(linkedList);
}

Выдаст в консоль она самый старший элемент (у которого нет родителя) а в дереве появятся обратные ссылки.
Линк на задачу
JavaScript
Модель Солнечной системы (19.10.2012)
Точнее - модель планет земной группы с предельно упрощенными характеристиками - соотношение размеров планет и средних радиусов их орбит примерно соблюдено, в остальном же царит великий рандом. Все элементы являются объектами одного единственного конструктора.

Start  Hide names
JavaScript, Canvas
И снова про футер (18.10.2012)
Если вам надоело изобретать очередной замысловатый способ размещения контента и стили к нему для того, чтобы пресловутый подвал сайта отображался в отведенном для него месте, возможно, стоит обратиться к динамическому изменению его положения.
Данный способ предполагает смещение подвала вниз на разницу в высоте "экрана" и контента. В качестве "экрана" будет выступать высота тега body, а контент определим по высоте блока, обернутого вокруг всех элементов страницы (в том числе и подвала). Надо сказать, что везде, кроме хрома, внешний блок не требуется, т.к. высоту содержимого можно брать из величины offsetHeight тега body, но что поделаешь.
window.onload=function(){
  //var contentHeight = document.body.offsetHeight;
  var contentHeight = document.getElementById('content').offsetHeight;
  var bodyHeight = document.body.scrollHeight;
  if (contentHeight<bodyHeight) document.getElementById('footer').style.marginTop = bodyHeight-contentHeight;
}
JavaScript
Стрелочные часы (21.10.2012)
Для моделирования вращательного движения по окружности необходимо рассчитать лежащие на ней проходимые точки, при этом плавность хода, т.е. количество таких точек, определяется углом поворота за шаг. Координаты каждой точки определяются тригонометрическими функциями угла между проходящим через нее радиусом и положительным направлением оси абсцисс: синус равен координате по Y, косинус - по X.
Первый пришедший в голову вкусный и полезный пример использования всего этого добра - разместить на canvas'е стрелочные часы.
Для начала необходимо получить текущие значения для каждой стрелки и выразить их в углах.
  var date = new Date();
  var a = [Math.PI/30*date.getHours()*5, Math.PI/30*date.getMinutes(), Math.PI/30*date.getSeconds()];
Если использовать синусы и косинусы данных углов для рисования стрелок, то выйдет, что сутки начинаются в 3 часа, а сами часы идут задом наперед. Чтобы этого избежать, необходимо поменять местами X и Y, и изменить знак у Y.
На холсте стрелки будем рисовать методом lineTo:
  for (var i in a) {
    ...
    context340.moveTo(150,150); //центр
    n = parseInt(i)+1; //длина стрелки
    context340.lineWidth=2/n; //толщина
    context340.lineTo(Math.round(n*50*Math.sin(a[i])+150),Math.round(-n*50*Math.cos(a[i]))+150);
    ...
  }
JavaScript, Canvas
Три метода перемещения объекта на плоскости (15.10.2012)
Перенеся свои опыты по разработке двигательных поведенческих примитивов бегающих квадратиков на canvas, я наконец, чувствую, насколько просто и удобно, вкупе с объектным подходом, здесь все делать.
Первичное действие в анимации - движение предмета по прямой к установленной точке и я рассмотрю три способа это реализовать.
Первый способ я бы назвал "шашечками" - это передвижение по восьми возможным направлениям, где дистанция до цели определяется длиной наибольшей проекции на одну из осей координат. Способ предельно прост и каждый шаг четко укладывается в единицы системы координат, однако, не очень естественно выглядит предмет, нарезающий крутые углы по пути к цели.
Функции писались, как внутренние модификаторы объекта, поэтому this - это движущийся объект, а target - координаты цели. Переменная speed просто хранит количество единиц измерения на один шаг.

      if (this.x<target.x) this.x+=this.speed;
      if (this.x>target.x) this.x-=this.speed;
      if (this.y<target.y) this.y+=this.speed;
      if (this.y>target.y) this.y-=this.speed;

Следующий способ - тригонометрическое уравнение прямой. Путевая линия, конечно, строится, однако, функциональная зависимость вертикальной координаты от горизонтальной делает движение неравномерным в различных участках координатной плоскости и при часто выпадающих обстоятельствах, объект никогда не совместится с целевой точкой.

      var k = (target.y - this.y)/(target.x - this.x);
      var b = (target.x*this.y - this.x*target.y)/(target.x - this.x);
      if (this.x<target.x) this.x+=this.speed;
      else this.x-=this.speed;
      this.y = k*this.x+b;

Третий способ - движение по диагонали воображаемого прямоугольника, соединяющей объект и точку. Диагональ - или гипотенуза прямоугольного треугольника определяется по всем известной формуле. Далее представим на данной линии меньший прямоугольник, с диагональю, равной желаемой длине шага. По теореме подобия треугольников определим величины координат x и y.

      var distance = Math.round(Math.sqrt(Math.pow(Math.abs(this.x-target.x),2) + Math.pow(Math.abs(this.y-target.y),2)));
      this.x+=((target.x-this.x)*this.speed)/distance;
      this.y+=((target.y-this.y)*this.speed)/distance;

На данный момент я остановился на последнем варианте, как наиболее "прямом" и логичном. Примеры применения этих способов представлены ниже.

JavaScript, Canvas
JavaScript (13)
PHP (11)
Brainfuck (8)
adm (8)
Joomla (4)
Canvas (3)
answers (2)
API (2)
CMS (2)
Modx (2)
jQuery (1)
Ajax (1)
SQL (1)
Shell (1)
batch (1)
10-6