92 заметки с тегом

javascript РСС

Ctrl +  Позднее

6 ноября 2009, 7:45

Javascript: Делаем ненавязчивый алерт (попап хабр-стайл)

Тут всё просто, делаем контейнер в начале боди, с абсолютным позиционированием, или просто вставляем пустой тег, или можем по желанию создать тэг с помощью ДЖс и вставить в начало документа
<div id="messages"></div>
Дальше небольшой стиль, в котором мы сделаем уголки и прозрачности
div#messages {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 250px;
	margin: 0px;
	padding: 7px;
	background: transparent;
	z-index: 2;
	position: fixed;
}
	div#messages div {
		color: #fff;
		padding: 7px;
		margin-bottom: 7px;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
   	
    -moz-opacity: 0.65;
    -khtml-opacity: 0.65;
    opacity: 0.65;
    filter:alpha(opacity=65);
		
		background: #888;
		font: Georgia 12px #fff;
	}
	div#messages div.error {background: #98001b;}	
	div#messages div.message {background: #0d8529;}
	div#messages div.warning {background: #dd6; color: #333;}
А теперь JS
$ = function (oid){ return document.getElementById(oid); }
message = function (mtext, mtype, howlong) {
	var mtype = mtype || 'message';
	var howlong = howlong || 5000;
	var alarm = document.createElement ('div');
	alarm.className = mtype;
	alarm.innerHTML = mtext;
	
	alarm.onclick = function () {
		$('messages').removeChild (alarm);
	};
	
	$('messages').appendChild (alarm);
	setTimeout (alarm.onclick, howlong);
}
error = function (mtext, howlong) {
	var howlong = howlong || 10000;
	message(mtext,"error",howlong);
}
warning = function (mtext, howlong) {
	var howlong = howlong || 7000;
	message(mtext,"warning",howlong);
}
Вкратце:
  • Создаём дивку
  • Вешаем класс по типу
  • Дальше вставляем текст
  • Вешаем ивент, чтобы алерт исчез по клику
  • Вставляем в контейнер
  • и убираем по таймауту


HabraAlert   javascript

2 ноября 2009, 10:44

Javscript: get _GET :))) Параметры скриптом

Хеш мы уже можем достать, что же делать с параметрами?:
function getUrlVars(){
    var vars = [], hash;
    var hashes = window.location.href.slice
    (window.location.href.indexOf('?') + 1).split('#');
    hashes = hashes[0].split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

upd: вылечен баг с хешем
javascript

21 октября 2009, 5:57

Магия, отменяем загрузку CSS в браузере с включённым JS

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо... Код выглядит так:
<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->
И шо, и как? Всё довольно просто ;))
  1. JS пишет перед стилем комент
  2. На кондишинал.комментс эта штука закроется
  3. Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
  4. И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
  5. Работает везде!


javascript   css   crossbrowser   magik

12 октября 2009, 12:17

Javascript: Get url HASH

document.location.toString().split('#')[1]

upd: из опыта всплыло, что лучше использовать чуть более широкую версию
document.location.toString().split('#',2)[1].split('?',2)[0];
javascript

9 октября 2009, 9:21

Великий могучий javascript: Карринг

Каррирование (карринг) — Функция двух переменных x и y f(x,y) = x + y может быть рассмотрена как функция одной переменной x, возвращающая функцию одной переменной y, то есть как выражение . Такой приём работает точно так же для функций любой арности. Это показывает, что функции многих переменных могут быть без проблем выражены в &#955;-исчислении и являются «синтаксическим сахаром». Описанный процесс превращения функций многих переменных в функцию одной переменной называется карринг (также: каррирование), в честь американского математика Хаскелла Карри, хотя первым его предложил М. И. Шейнфинкель (1924).
function currying(a) {
	return function(b) {
		return function(c) {
			return (a+b+c);
		};
	};
}
currying(1)(2)(3); // => 6


javascript

8 октября 2009, 10:46

Динамическая загрузка javascript с обратной связью (load javascript on-demand with callback)

Ну скрипт предельно прост, и продолжает образно говоря тему предшественников
function require(url, callback){
	var script = document.createElement("script")
	script.type = "text/javascript";
	if (script.readyState) { //IE
		script.onreadystatechange = function() {
			if (script.readyState == "loaded" 
			|| script.readyState == "complete") {
				script.onreadystatechange = null;
				callback();
			}
		};
	} else { //Others
		script.onload = function() {
			callback();
		};
	}
	script.src = url;
	document.getElementsByTagName("head")[0].appendChild(script);
}
Использовать просто, вот на примере j.mp
require(
	"http://j.mp/javascript-api.js?version=latest&login=login&apiKey=app_key", 
	function () {
		BitlyCB.myShortenCallback = function(data) {
		var result;
		for (var r in data.results) {
			result = data.results[r];
			result['longUrl'] = r;
			break;
		}
		console.log(result['shortUrl']);
	};
	BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
	}
);


javascript   ondemand

4 октября 2009, 12:42

Распаковка JavaScript (JS unpacker)

У нас есть скрипт запаковыаный Дёней Едвардосом, в виде
eval(function(p,a,c,k,e,r){e=function(c){...
Сайт упаковки лежит здесь. Мы идём туда, вставляем наш запакованый код в нижний текстареа. Далье мы копируем бурмарклет что ниже, вставляем в адресную строку и запускаем.



У нас появится кпока «Decode», её мы нажимаем и получаем декодированный скрипт, в одну строчку.

Дальше мы хотим увидеть красивые отступы, используем jsbeautifier.
javascript   lifehacking

30 сентября 2009, 18:02

Добавляем в Google Analytics русскоязычные поисковики

try {
	var pageTracker = _gat._getTracker("Ваш ГА номер");
	pageTracker._setDomainName(".ваш.домен");
	
	pageTracker._addOrganic("mail.ru", "q");
	pageTracker._addOrganic("rambler.ru", "words");
	pageTracker._addOrganic("nigma.ru", "s");
	pageTracker._addOrganic("blogs.yandex.ru", "text");
	pageTracker._addOrganic("webalta.ru", "q");
	pageTracker._addOrganic("aport.ru", "r");
	pageTracker._addOrganic("akavita.by", "z");
	pageTracker._addOrganic("meta.ua", "q");
	pageTracker._addOrganic("bigmir.net", "q");
	pageTracker._addOrganic("tut.by", "query");
	pageTracker._addOrganic("all.by", "query");
	pageTracker._addOrganic("i.ua", "q");
	pageTracker._addOrganic("online.ua", "q");
	pageTracker._addOrganic("a.ua", "s");
	pageTracker._addOrganic("ukr.net", "search_query");
	pageTracker._addOrganic("search.com.ua", "q");
	pageTracker._addOrganic("search.ua", "query");
	pageTracker._addOrganic("poisk.ru", "text");
	pageTracker._addOrganic("km.ru", "sq");
	pageTracker._addOrganic("liveinternet.ru", "ask");
	pageTracker._addOrganic("gogo.ru", "q");
	pageTracker._addOrganic("gde.ru", "keywords");
	pageTracker._addOrganic("quintura.ru", "request");
	pageTracker._initData();
	pageTracker._trackPageview();
} catch(err) {}

Новый код ГА
var _gaq = _gaq || [];
_gaq.push(
		['_setAccount', 'UA-XXXXXX-X'],
		['_setDomainName', 'your.domain.name'],
		["_addOrganic", "mail.ru", "q"],
		["_addOrganic","rambler.ru", "words"],
		["_addOrganic","nigma.ru", "s"],
		["_addOrganic","blogs.yandex.ru", "text"],
		["_addOrganic","webalta.ru", "q"],
		["_addOrganic","aport.ru", "r"],
		["_addOrganic","akavita.by", "z"],
		["_addOrganic","meta.ua", "q"],
		["_addOrganic","bigmir.net", "q"],
		["_addOrganic","tut.by", "query"],
		["_addOrganic","all.by", "query"],
		["_addOrganic","i.ua", "q"],
		["_addOrganic","online.ua", "q"],
		["_addOrganic","a.ua", "s"],
		["_addOrganic","ukr.net", "search_query"],
		["_addOrganic","search.com.ua", "q"],
		["_addOrganic","search.ua", "query"],
		["_addOrganic","poisk.ru", "text"],
		["_addOrganic","km.ru", "sq"],
		["_addOrganic","liveinternet.ru", "ask"],
		["_addOrganic","gogo.ru", "q"],
		["_addOrganic","gde.ru", "keywords"],
		["_addOrganic","quintura.ru", "request"],
		['_trackPageview']
);


(function() {
  var ga = document.createElement('script');
  ga.src = ('https:' == document.location.protocol ?

'https://ssl' : 'http://www') + 
'.google-analytics.com/ga.js';
  ga.setAttribute('async', 'true');
  document.documentElement.firstChild.appendChild(ga);

})();
javascript   analytics   шпаргалка

27 сентября 2009, 18:13

Не индексируемый джаваскрипт ;)

Для того что бы поисковики не индексировали ваши ДЖсы, а браузеры не тупили на них при генерации страницы, скрипты лучше всего брать в специальные xml-комменты
<script type="text/javascript">
//<![CDATA[
  your.script = here;
//]]>
</script> 
Или просто html-комменты
<script type="text/javascript">
<!--
  your.script = here;
//-->
<script> 

javascript

24 сентября 2009, 13:19

Javascript nl2br

Скрипт с либы Kevin van Zonneveld. Не просто заменяет nl-ки на <br>, а доставляет <br> пред \n
function nl2br (str, is_xhtml) {
    var breakTag = '';
 
    breakTag = '<br />';
    if (typeof is_xhtml != 'undefined' && !is_xhtml) {
        breakTag = '<br>';
    }
 
    return (str + '').replace(/([^>]?)\n/g, '$1'+ breakTag +'\n');

}
javascript

13 сентября 2009, 15:17

Javascript advancent dump

Хорошо для кастомных объектов, то есть для отладки бизнес-логики, но не ДОМ.
Object.prototype.dump = function( excludePrototype, maxDepth, depth ){
    var output = [ "" ], key = "", indent = "";
    
    depth    = depth || [];
    maxDepth = maxDepth >= 0 ? maxDepth : -1;
    excludePrototype = !!excludePrototype;
    
    for( var i = 0; i < depth.length; i++ ) indent += "  ";
    if( maxDepth === -1 || depth.length < maxDepth ){
        for( key in this ) 
        	if( ( this.hasOwnProperty( key ) || excludePrototype ) ){
            if( depth.contains( this[ key ] ) ){
              output[ 0 ] = "{circular reference}";
            } else {
                depth.push( this[ key ] );
                output.push( 
                    indent + key + ": " + 
                    this[ key ].dump( excludePrototype, maxDepth, depth ) 
                );
                depth.pop( this[ key ] );
            }    
        }
    } else output[ 0 ] = "{object}";
    return output.join("\n");
};
Array.prototype.contains = function( obj ){
    for( var i = 0; i < this.length; i++ ){
        if( this[ i ] === obj ){
            return true; }
    }
    return false;
};
// default dumpster method
var defaultDumpster = function(){ return this.toString(); };
String.prototype.dump =
Number.prototype.dump =
RegExp.prototype.dump =
Boolean.prototype.dump = defaultDumpster;
Function.prototype.dump = function(){ return "{function}"; };
Date.prototype.dump = function(){ return "{" + this.getTime() + "}"; };
alert(obj.attributes.dump());

Распарсить атрибуты ДОМелемента, можна используя простой скрипт
var elm = obj.attributes;
for( var x = 0; x < elm.length; x++ ) 
	document.write(elm[x].name + ' ' + elm[x].nodeValue + '</br>');


javascript

9 сентября 2009, 13:30

Javascript: Get dynamic image dimensions

У объекта типа IMG есть стандартные свойства width & height, если картинка загружена в ДОМе, но если картинка грузится скриптом, динамически, они пустые (бага старых браузеров, в новых кажись всё ок).

И что же делать? ;) На самом деле всё просто, можно повесить на онлоад небольщой триггер о_О, ну и примерчик для затравочки
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod){
    return function(){
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload(){
    alert(this.width + " by " + this.height);

}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
javascript

1 сентября 2009, 23:56

JavaScript: submit buttons like default links

При попытке оформить submit как ссылку, мы напоремся на множество костылей, и толстый цсс в итоге. Если подумать, то проще заменить сам сабмит с помощью JavaScriptа на ссылку, с его екшеном и ивентами ;)
function submitToLinks(){
	// Если старые брозеры, уходим ;)
	if(!document.getElementById || !document.createTextNode){return;}
  
	var inputs,i,newLink,newText,leng;
	var formId = -1;
	// Соберём все инпуты и посчитаем
	inputs=document.getElementsByTagName('input');
	leng = inputs.length;
	
	// поехали по инпутам
	for (i = 0; i < leng; i++){
		// не определён - уходим
		if (typeof inputs[i] == "undefined") return;
		// проверка на тип инпута, нам нужны сабмиты
		check = inputs[i].getAttribute && inputs[i].getAttribute('type');
		// если тип пустой, не строка, или 0 - следующий
		if (typeof check != "string" || check.length == null || check.length == 0) continue;
		// если тип не сабмит - следующий
		if(check.toLowerCase()!='submit') continue;
		// приступим к операции на сабмите
		var submit2kill = inputs[i];
		// создадим тэг А, с равными value
		newLink=document.createElement('a');
		newText=document.createTextNode(submit2kill.getAttribute('value'));
		newLink.appendChild(newText);
		// если у сабмита был онКлик, прибиндим к ссылке
		if (typeof submit2kill.onclick == "function"){
			if (newLink.addEventListener){// не ИЕ
				newLink.addEventListener('click', submit2kill.onclick, false);
			} else if (newLink.attachEvent){// ИЕее
				newLink.attachEvent('onclick',submit2kill.onclick);
			}  
		}
		// пора узнать в какой мы форме, их то может много быть
		var ourform = submit2kill.parentNode;
		while (ourform.tagName.toLowerCase() != "form") {
			// наш шабмит можеть быть в яйце, а яйцо в курке и т.д.
			// то есть, если сабмит вложен, ищем пока форму не найдём
			// если нету формы, что мы сдесь забыли-то?
			if (ourform.tagName.toLowerCase() == "body") return;
			ourform = ourform.parentNode;
		}
		
		// у каждой формы есть порядковый номер по ДОМу
		// так его выцепить нельзя, ну мы тогда его приклеим	
		if (typeof ourform.number == "undefined") {
			formId++;
			ourform.number = formId;
		}
		
		// у формы может быть ещё и вент онСабмит, вешаем через ЕвилМагию ;)
		// чёрная сторона ДЖс
		if (typeof ourform.onsubmit == "function" 
		&& typeof ourform.submitReplacer == "undefined") {
			// в кратце, мы старый нативный сабмит, перебинживаем
			// и запускаем опосля ивента онСабмит.
			eval(
				"document.forms["+formId+"].submitReplacer = "
				+"document.forms["+formId+"].submit;"
				+"document.forms["+formId+"].submit = function(){"
					+"document.forms["+formId+"].onsubmit();"
					+"document.forms["+formId+"].submitReplacer();"
				+"}"
			);
		}
  	// делаем таки для ссылки/формы сабмит екшон
  	newLink.setAttribute('href','javascript:document.forms['+formId+'].submit()');
  	// убиваем старый добрый сабмит, и вешаем надёжный линк ;)
		submit2kill.parentNode.replaceChild(newLink,submit2kill);
		// после убийства, массив inputs странным образом худает
		// мы это начинаем учитывать декриментом
		i--;
	}
}
// по загрузке делаем магию
window.onload=submitToLinks;



По сути, функция не несёт какой-либо пользы, но на ней просто много фич %), и вообще хорошая тренировка для мозгов. Задача была придумана случайно, и от её решения получен клёвый сатисфекшен.

зы: может кто подскажет, как избавится от eval?
javascript

30 августа 2009, 17:24

DHTML&CSS: prohibit selection (как запретить выделение текста)

В ИЕ есть ивент onSelectStart, достаточно повесить return false; и будет счастье, а вот в других браузерх есть magik-css
.noselect {
  -moz-user-select: none; //Firefox
  -khtml-user-select: none; //Safari
  user-select: none; //работает в css3
}
В конечном итоге получаем нечто такое
<div onSelectStart="return false;" class="noselect">unselectable text</div>

Всё это можно делать и скриптом, для разных элементов, или привязать к jQuery
function prohibitSelection(obj){
	obj.style.cursor = "default";
	if (typeof obj.onselectstart!="undefined") //IE
		obj.onselectstart=function(){return false;}
	else if (typeof obj.style.MozUserSelect!="undefined") //Firefox
		obj.style.MozUserSelect="none";
	else if (typeof obj.style.KhtmlUserSelect!="undefined") //WebKit
		obj.style.KhtmlUserSelect="none";
	else obj.onmousedown=function(){return false;} //All other(Opera)
}


css   javascript

19 августа 2009, 7:37

Javascript: Емулируем прототип для IE (Element.prototype в ИЕ)

Как всем известно, в нашем «дорогом» ИЕ версий ниже 8, нету поддержки Element.prototype (а также HTMLElement, Node, Object), образно говоря, ИЕ просто ложил на стандарты, у него свой путь, и зачем им вообще был этот «стандарт» %)

Исходя из предыдущей моей статьи, нужно как-то заставить понимать этого ирода ;) нашу надстройку над прототипом.

Так как ИЕ довольно «гибкий» браузер, мы его будем учить этому стандарту. Для начала мы просто создадим функцию Element, и через прототайп добавим нужную нам функцию
if (typeof(Element) != "object") {
	Element = function () {};
}
	
Element.prototype.pSib = function() { 
	var node = this; 
	while (node = node.previousSibling) { 
		if (node.nodeType != 3) return node; 
	} 
	return null; 
}
И наши приключения только начались, ибо в ИЕ всё также пСиб не работает.

Следующий танец, это танец с бихейворами, или проще говоря css приблудами ИЕ, так называемыми файликами *.htc, ибо возможности раньше добавить паблик метод в старых ИЕ нету, всё обусловлено «архитектурой».
<PUBLIC:COMPONENT>
    <PUBLIC:METHOD NAME="pSib"
           INTERNALNAME="_pSib" />
    <script type="text/javascript">
        var el = new Element;
        _pSib = el.pSib;
    </script>
</PUBLIC:COMPONENT>
Не забываем подключить наш бихейвор
<!--[if lte IE 7]>
    <style type="text/css">
        * { behavior: url(test.htc); }
    </style>
<![endif]--> 
И что всё? А фигли ;)))

Дальше будет универсальная функция, которая добавит нашу функцию прототипа ко всем HTML-элементам (Только для ИЕ)
var __IEcreateElement = document.createElement;
document.createElement = function (tagName) {
    var element = __IEcreateElement(tagName);
    var interface = new Element;
    for (method in interface)
        element[method] = interface[method];
    return element;
}	
Образно говоря, мы расширяем ИЕ-метод createElement, нашим функционалом. Желательно запихать функцию под кондишинал комментс, или в ИФик где создаётся функция Element.
Вот и всё, поздравляем Вас, наш прототип для ИЕ работает, гип-гип ;) УРА!

javascript   prototype

18 августа 2009, 15:06

Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)

У нас есть простая Логин-форма
<form action="#" method="post">
	<div class="label_input">
		<label for="auth_login">Логин</label>
		<input type="text" name="auth_login" id="auth_login">
	</div>
	<div class="label_input">
		<label for="auth_password">Пароль</label>
		<input type="password" name="auth_password" id="auth_password">
	</div>
	<input type="submit" value="Отправить">
</form>
Метку (label) и инпут зарание возмём в див, пропишем ему в css относительное позиционирование, остальные елементы оформим на свой вкус.

Дальше будет JavaScript
function showLabels(inputs){
	// список инпутов приходит обьектом {'input_id':''}
	// если нет, то мы уходим
	if (typeof(inputs) != "object") return;
	// функция которая прячет лейбл, если в форме есть данные
	function inputValueSH(someinput){
		// что бы надёжно спрятать, запихнём повыше
		// почему-то свойство display не фурычит
		if (someinput.value) pSib(someinput).style.top = '-9999px'; // данные есть
		else pSib(someinput).style.top = '0'; // данных нет
	}
	for (var i in inputs){
		// дальше, разбиваем на список
		// аля foreach для бедных
		var obj = document.getElementById(i);
		// при блуре вызываем функцию проверки
		obj.onblur = function(){ inputValueSH(this);};
		// когда сфокусировались, убираем метку
		obj.onfocus = function(){ pSib(this).style.top = '-9999px';	};
		// проверим на всякий ешё разок
		inputValueSH(obj);
	}
	return;
}
addLoadEvent(function() {
	// настраиваем метки, для auth_login и auth_password
	showLabels({'auth_login':'','auth_password':''});
}); 	


foreach   css   javascript

16 августа 2009, 8:41

Javascript: получение/редактирование Doctype

Просто тривиальная задача, которая возникла в голове из-за комментариев к одному из топиков.

У нормальных браузеров есть гет-метод(функция) document.doctype из которой мы можем узнать о нашем Доктайпе, с помощью параметров name, publicId, systemId
<!-- вот такая строчка -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- соответствует такой -->
<!DOCTYPE name PUBLIC "publicId" "systemId">
У иных, темных браузерах, доступ к Доктайпу, организован через задницу двойной парентНод от тела документа, то есть
document.body.parentNode.parentNode.firstChild.nodeValue
Итого, что бы узнать о Доктайпе получаем простую функцию
function getdoctype() { 
	if (document.doctype) {
		alert("document.doctype:"
		+"\nname: " + document.doctype.name 
		+"\npublicId: " + document.doctype.publicId 
		+"\nsystemId: " + document.doctype.systemId);
	} else 
	if (document.body.parentNode) {
		var dbp = document.body.parentNode;
	  alert("document.body.parentNode:"
	  +"\n.parentNode.firstChild.nodeValue: " + dbp.parentNode.firstChild.nodeValue); 
	}
} 
Теперь мы знаем, как его получить, сразу становится интерестно, можно ли его изменить ;). В ИЕ и т. д. браузерах, мы просто меняем нодВалью, а в других, нормальных, барузерах мы имеем только гет-функцию, и при попытке передать значение, получим еррор, что функция онли геттер, и у неё нету возможности сеттер.

Но, как говорится, на каждого лалала, есть своя балда управа. Мы просто заменим доктайп новым чилдом, вместо его редактирования %)
var newDoctype = document.implementation.createDocumentType(name,publicId,systemId);
document.doctype.parentNode.replaceChild(newDoctype, document.doctype);



ПыСы: в опере, это я делал для неё, изменение доктайпа влеяет на рендеринг страниц, в других ничего не происходит. И ещё, изначально опера ведёт себя как нормбраузер, а потом, как ИЕ о_О гавнецо кароче говоря )))
javascript

10 августа 2009, 23:06

Javascript: Как изменить свойства Объекта, не создавая классы, то есть без ООП

Для этого нужна функция eval. Опа, взял и раскрыл все секреты ;)
Вкратце: у нас есть Объект (образно говоря дерево), и что бы им нормально управлять нужно написать куча ООП кода :( А иногда это делать просто лень. Ведь всегда проще написать
eval("delete tree['branch']['leaf'][123]");
// или
eval("delete tree.branch.leaf[123]");
// что по сути одно и тоже

Дальше будет ссылка на дурацкий пример, в котором можно:
  • вставлять (добавлять) ноды в объект;
  • переименовывать ноды (как со смещением позиции так и без);
  • удалять ноды.
А также реализованы функции:
  • подсчета вложенности дерева;
  • генерации евал-предложения (координаты объекта);
  • сделан экспорт объекта JSON-like :).
Навешаны фичи:
  • генерации дерева, используя простой JS/CSS (можно сворачивать/разворачивать);
  • прикручено контекстное меню (right-click);
  • прикручен даблклик.



ps:помните, так делать с объектами нельзя,только на свой страх и риск
!OOP   javascript

7 августа 2009, 23:50

Javascript: проверка объекта на родителя ;)

Какого такого родителя, вы спросите? :)) Ну их много: Javascript object, DOM node, DOM element, etc — и они как бы разные, и к каждому нужен свой подход ;)
// даст true если это ветка DOM
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );

}

// отдаст true если это DOM елемент
function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"

);
}
Если ни-то, ни-это ;) значит у нас JS-object ;)
javascript

4 августа 2009, 18:52

Javascript insert in html body some tag

Иногда нужно что-то добавить к телу документа, самый быстрый способ вот
if (document.body.firstChild){
	document.body.insertBefore(sometag,
	 	 document.body.firstChild);
} else {
	document.body.appendChild(sometag);
}
Есть конечно и извращенный метод
var Our_body = document.getElementsByTagName('body')[0];
Our_body.appendChild(sometag);
Но в итоге он короче ;) но медленнее
javascript
Ctrl +  Ранее