2009-08-21

Закачака файлов AJAX

Нашел занимательный пример по закачке файлов посредством AJAX. Решение, оказывается, простое ну просто до безобразия - у формы с файлом ставится target с именем невидимого фрейма, за счет этого форма с файлом не перегружается а перегружается этот самый невидимый фрейм. Гениально!

 

Оставить комментарий

 
  2009-08-18

Несколько полезных JS функций

Обнаружил что в квирк моде все браузеры определяют размер документа не так как в режиме соответствия стандартам, более того делают они это как бог на душу положит, поэтому сделал несколько полезных функций для того чтобы как то получить во всех браузерах в обоих режимах единообразные результаты. Тестировано в IE6, IE7, FF, Chrome, Opera

function getDocumentHeight(){
    var de = document.body.parentNode;
    var db = document.body;
    return ((db.clientHeight>de.clientHeight)?db.clientHeight:de.clientHeight);
}

function getDocumentWidth(){
    var de = document.body.parentNode;
    var db = document.body;
    return ((db.clientWidth>de.clientWidth)?db.clientWidth:de.clientWidth);
}

function getScreenHeight(){
    var de = document.body.parentNode;
    var db = document.body;
    if (window.opera) {
	return db.clientHeight;    	
    }
    if (document.compatMode=='CSS1Compat'){
	return de.clientHeight;    	
    }
    else {
	return db.clientHeight;
    }
}

function getScreenWidth(){
    var de = document.body.parentNode;
    var db = document.body;
    if(window.opera){
	return db.clientWidth;
    }
    if (document.compatMode=='CSS1Compat'){
	return de.clientWidth;
    }
    else {
    	return db.clientWidth;
    }
}

function getScrollTop(){
    return document.documentElement.scrollTop || document.body.scrollTop;
}

function getScrollLeft(){
    return document.documentElement.scrollLeft || document.body.scrollLeft;
}

 

Оставить комментарий

 
  2009-04-18

ztools.org

Проект ztools.org наконец дожил до состояния бета версии. Посетители сайта теперь могут скачивать оттуда выбранные компоненты в виде zip архива.

 

Коментариев: 2

 
  2009-03-16

Знак $ в именах переменных JavaScript

вот интересно MSDN пишет:

  • The first character must be an ASCII letter (either uppercase or lowercase), or an underscore (_) character. Note that a number cannot be used as the first character.

  • Subsequent characters must be letters, numbers, or underscores.

  • The variable name must not be a reserved word.

Чем в таком случае является переменная $ активно используемая в Prototype или в JQuery - буквой, цифрой или знаком подчекивания? Здравый смысл подсказывает что это скорее буква...

Бывают ли еще такие "странные" буквы которые можно бы было использовать в именах переменных. Например, @ или # использовать не получается.

 

Коментариев: 6

 
  2009-01-27

Browser Detection

Обнаружил что фрагмент кода из mootools выдает какой то странный результат для версии движка, может я не знаю каких нюансов, но все же хочется чтобы версия хоть как то коррелировала с версией браузера, кроме того писать каждый раз Browser.Engine.presto довольно длинно, хотелось бы чтобы было просто Browser.presto.

Mootools в отличие от jQuery и prototype определяет тип движка браузера по определенным особенностям объектной модели а не по navigator.userAgent, это неплохо, вот только версию движка таким образом можно определить очень приблизительно, поэтому версию будет логично определять по navigator.userAgent а сам движок по функционалу объектной модели.

Немного похозяйничав в коде получилось вот что:

var Browser = {	
	platform: (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase(),
	version: (navigator.userAgent.toLowerCase().match(/.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/) || [-1,-1])[1]
};

if (window.opera) Browser.presto = true;
else if (window.ActiveXObject) Browser.trident = true;
else if (!navigator.taintEnabled) Browser.webkit = true;
else if (document.getBoxObjectFor != null) Browser.gecko = true;

Ваш браузер:

Версия  
Платформа  
trident (IE)  
presto (Opera)  
webkit (Safary, Chrome)  
gecko (Firefox, Mozilla)  
 

Оставить комментарий

 
  2008-12-30

Скрипт для генерации снега

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

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

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

 

Читать далее...

 

Оставить комментарий

 
  2008-12-19

Ограничение области видимости в JavaScript

Иногда в JavaScript нужно создать пару методов которые должны быть видны только изнутри определенного куска кода. Для этого достаточно внести эти методы внутрь анонимной функции и сразу ее выполнить:

(function(){ //наша анонимная функция
function func1(){ //первая функция видимость которой нужно ограничить
   alert('!');
}

function func2(){ //вторая функция видимость которой нужно ограничить    
   func1();
}
func2();
//внутри блока func1 и func2 "видят" друг друга и могут быть вызваны!
})(); //выполнить

//при этом вне блока func1 и func2 оказываются невидны!

Этот принцип может быть также использован для создания приватных методов и свойств при программировании объектов.

 

Оставить комментарий

 
  2008-12-19

Корректный способ итерации сквозь объекты

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

Допустим, у нас есть объект созданный вот таким образом:

var obj = {property1:"свойство 1",property2:"свойство 2"};

вот самый распространенный НЕПРАВИЛЬНЫЙ способ показать все свойства объекта:

for(key in obj){
        alert(key);
}

Вроде все работает правильно и на экране действительно последовательно покажутся все свойства объекта. Почему такой способ является неправильным?

Добавим перед циклом вот такую строчку:

Object.prototype['test1'] = "test1 value";

При запуске скрипта еще раз оказывается, что наш объект волшебным образом приобретает еще одно свойство - test1, хотя мы его не создавали! Это значит что любая сторонняя библиотека которая таким способом расширяет функциональность стандартных классов JavaScript, например prototype.js способна непредсказуем образом изменить логику работы ваших программ. В данном случае хорошим тоном является сравнение текущего свойства и свойства прототипа при каждой итерации, если они равны, значит ничего не делаем:

for(key in obj){
   if (obj.constructor.prototype[key]!==obj[key]){
      alert(obj[key]);
   }
}

Обратите внимание, что здесь использовано строгое сравнение !==. Все просто, все логично, вот только набирать это каждый раз довольно утомительно, поэтому создадим вот такую функцию:

    function forEach(obj,fn){
        for(key in obj){
            if (obj.constructor.prototype[key]!==obj[key]){
                if (fn(key)===false) break;
            }
        }
    }

В этом случае итерация запишется совсем просто:

forEach(obj,function(key){
    alert(obj['key']);
});

Обратите внимание, что в функции forEach есть возможность остановить итерацию досрочно, что бывает полезно например при поиске элемента, для этого достаточно возвратить false:

forEach(obj,function(key){
    alert(obj['key']);
    if (key=='property1') return false;
});

 

 

Оставить комментарий

 
  2008-12-11

Native in Chrome

Обнаружил что в Google Chrome в JavaScript нельзя создать переменную с именем native - оказывается это ключевое слово зарезервированное на будущее. Интресно что Safari который работает на том же самом движке все работает.

 

Оставить комментарий

 
  2008-12-04

Эмбриопрограммирование

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

shortEvents:function(names){
     x.forEach(names,function(key){
       this[names[key]] = new Function("fn","remove","this.on('"+[names[key]]+"',fn,remove)");
     },this)
},

Кто догадается что это?

 

Коментариев: 4