Нужные примеры javascript
javascript, 18.02.2009 Среда, 01:21
Теги:
Теги:
Когда я начинал использовать js я постоянно сталкивался с проблемами получения различных параметров объектов. Как мне хотелось иметь под рукой справочник простых и доступных примеров... В итоге я решил сделать свой сборник простых, но очень нужных методов и функция javascript. Справочник будет пополнятся. Итак:
Горизонтальный и вертикальный скролл страницы
Очень часто нам бывает нужно получить высоту скролла (scroll) элемента. Это чень просто выполнить:Обратите внимание: при отсутствии скролла, IE выдаст значение реального скролла (размер контента), а Mozilla - размер окна.
Размер клиентской части окна
Клиентская часть окна, это то (та часть страницы), что видит пользователь в данный момент. Иногда бывает нужно получить её размеры, например чтобы позиционировать по ценру div или просто подогнать дизайн под окно. Вот код получения размеров клиентской части окна:Эти значения одинаково выдаются во всех браузерах.
Размер скрытой части окна
Размеры скрытой части страницы необходимы например тогда, когда вы создаете свободно перемещаемый div - в таком случае его координаты будут складываться из отступа от края экрана (margin) и размера скрытой части, если таковая есть. Значения эти в разных браузерах получают по разному, поэтому я приведу кроссбраузерный вариант:
Текущий url адрес
Очень часто необходимо получить адрес текущей страницы и не всегда известно, как это сделать. Вот подробный пример:Так же я встретился с проблемой, когда нужно было получить адрес страницы реферрера, то есть страницы, с которой пришел пользователь. Вот код запроса:
Получение текста, innerTEXT, textContent
Когда нужно получить текст, встает проблема кроссбраузерности. IE рабоает с innerTEXT а mozilla с textContent. Я разработал метод, который позволяет кроссбраузерно получить текст из элемента или вставить его в элемент:
Обращение к элементам в js
getElementById Для того, чтобы сделать с элементом что ни будь, надо его сначала определить, то есть найти на странице. В javascript существует достаточно много способов обратиться к элементу. Самый распространенный способ - обращение к элементу по его id. Напомню, что id - уникальный идентификатор элемента. На одной странице двух элементов с одинаковым id быть не должно! Вот код обращения к элементу по его id: getElementsByName Так же к элементу можно обратиться по его атрибуту name. Js может найти по name только определенные элементы - элементы которым данный тег свойственен (input.. etc). Например div найти по name не удастся. Обратите внимание на то, что при поиске по атрибуту name мы получим не конкретный элемент, а массив элементов. Это значит, что нам так же нужно будет указать номер нужного элемента. (счет ведется с нуля). При поиске по имени часто возникает ошибка из за неправильного написания функции - люди забывают писать "s" в cлове "elements" - ведь ищем то мы не один элемент а множество. Пример: getElementsByTagName В js реализован поиск по названию тега элемента (например div или table). При поиске по тегу так же необходимо указывать номер нужного элемента в массиве найденных значений. Пример: getElementsByClass Как ни странно, поиск по классу в js не реализован совсем (реализован только в новых версиях браузеров). Дабы исправить эту ошибку я написал функцию, которая способна найти элемент и по id, и по name, и по tagName, и по class тоже. Вот код функции универсального поиска:Вот и всё про обращение к элементам. Надеюсь вам это поможет.
Js редирект (перенаправление)
Редирект в Js осуществляется несколькими способами:
Js события
С помощью javascript можно отслеживать различные события, производимые (обычно) пользователем, будь то клик, изменение размеров окна, нажатие кнопки клавиатуры. Вот несколько примеров отслеживание различных событий.
Допустим, что у нас есть некий элемент (например div) который записан в переменную elem. Вот варианты привязки к этому элементу события onсlick, то есть клика мышкой:
AddEventListner Первый вариант - прикрепление через метод AddEventListner(). Синтаксис метода таков: Как, видите функция имеет три параметра, в первом параметре прописывается название события без приставки "on", во втором - код, который должен выполнится после выполнения в данном случае клика по элементу, или же название функции без скобок, третий параметр сложнее и врятли пригодится, его я рассматривать пока не буду. Данный метод не работает в IE.
attachEvent Варант прикрепления события для IE (обратите внимание на приставку "on"): elem.event И наконец кроссбраузерный метод назначения событий: Работает везде, но при использовании заменяет старое событие новым.
Загрузка DOM древа, onDOMload
Иногда бывает важно отследить момент, когда уже готов весь код и объектное древо, независимо от загрузки графики. Это поможет сделать вот эта функция:
Горизонтальный и вертикальный скролл страницы
Очень часто нам бывает нужно получить высоту скролла (scroll) элемента. Это чень просто выполнить:
Code
<script>
// горизонтальный скролл (в данном случае страницы)
var xScroll = document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.scrollWidth:document.body.scrollWidth;
// и вертикальный скролл
var yScroll = document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.scrollHeight:document.body.scrollHeight;
</script>
// горизонтальный скролл (в данном случае страницы)
var xScroll = document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.scrollWidth:document.body.scrollWidth;
// и вертикальный скролл
var yScroll = document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.scrollHeight:document.body.scrollHeight;
</script>
Размер клиентской части окна
Клиентская часть окна, это то (та часть страницы), что видит пользователь в данный момент. Иногда бывает нужно получить её размеры, например чтобы позиционировать по ценру div или просто подогнать дизайн под окно. Вот код получения размеров клиентской части окна:
Code
<script>
// ширина видимой части окна
var cliWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
// высота видимой части окна
var cliHeight = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
</script>
// ширина видимой части окна
var cliWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
// высота видимой части окна
var cliHeight = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
</script>
Размер скрытой части окна
Размеры скрытой части страницы необходимы например тогда, когда вы создаете свободно перемещаемый div - в таком случае его координаты будут складываться из отступа от края экрана (margin) и размера скрытой части, если таковая есть. Значения эти в разных браузерах получают по разному, поэтому я приведу кроссбраузерный вариант:
Code
<script>
// работает и в Gecko и в IE
var topScroll = document.body.scrollTop||document.documentElement.scrollTop;
var leftScroll = document.body.scrollLeft||document.documentElement.scrollLeft;
</script>
// работает и в Gecko и в IE
var topScroll = document.body.scrollTop||document.documentElement.scrollTop;
var leftScroll = document.body.scrollLeft||document.documentElement.scrollLeft;
</script>
Текущий url адрес
Очень часто необходимо получить адрес текущей страницы и не всегда известно, как это сделать. Вот подробный пример:
Code
<script>
// представим что адрес страницы:
// http://studioad.ru/blog/test.html?enother_data#diff_data
document.location
document.location.href
// действует примерно одинаково, вернет весь url целиком
document.location.protocol
// вернет http:
document.location.hostname
// вернет studioad.ru
document.location.pathname
// вернет /blog/test.html
document.location.hash
// вернет #diff_data
document.location.search
// вернет ?enother_data
</script>
// представим что адрес страницы:
// http://studioad.ru/blog/test.html?enother_data#diff_data
document.location
document.location.href
// действует примерно одинаково, вернет весь url целиком
document.location.protocol
// вернет http:
document.location.hostname
// вернет studioad.ru
document.location.pathname
// вернет /blog/test.html
document.location.hash
// вернет #diff_data
document.location.search
// вернет ?enother_data
</script>
Code
<script>
// вернет адрес последней посещенной страницы
document.referrer
</script>
// вернет адрес последней посещенной страницы
document.referrer
</script>
Получение текста, innerTEXT, textContent
Когда нужно получить текст, встает проблема кроссбраузерности. IE рабоает с innerTEXT а mozilla с textContent. Я разработал метод, который позволяет кроссбраузерно получить текст из элемента или вставить его в элемент:
Code
<script>
function txt(i,t){
if(t){if(i.innerText){i.innerText=t}else{i.textContent=t}}else
{if(i.innerText){i=i.innerText}else{i=i.textContent}}return i;
}
// теперь для вставки текста в объект obj
txt(obj,"Любой нужный вам текст");
// и для получения текста из obj:
txt(obj);
</script>
function txt(i,t){
if(t){if(i.innerText){i.innerText=t}else{i.textContent=t}}else
{if(i.innerText){i=i.innerText}else{i=i.textContent}}return i;
}
// теперь для вставки текста в объект obj
txt(obj,"Любой нужный вам текст");
// и для получения текста из obj:
txt(obj);
</script>
Обращение к элементам в js
getElementById Для того, чтобы сделать с элементом что ни будь, надо его сначала определить, то есть найти на странице. В javascript существует достаточно много способов обратиться к элементу. Самый распространенный способ - обращение к элементу по его id. Напомню, что id - уникальный идентификатор элемента. На одной странице двух элементов с одинаковым id быть не должно! Вот код обращения к элементу по его id:
Code
<script>
var obj = document.getElementById("myobj");
// где myobj - id элемента
</script>
var obj = document.getElementById("myobj");
// где myobj - id элемента
</script>
Code
<script>
var obj = document.getElementsByName("myobj")[0];
// где myobj - атрибут name элемента,
// а 0 - его номер на странице.
</script>
var obj = document.getElementsByName("myobj")[0];
// где myobj - атрибут name элемента,
// а 0 - его номер на странице.
</script>
Code
<script>
var obj = document.getElementsByTagName("div")[3];
// где div - название тега элемента,
// а 3 - его номер на странице.
</script>
var obj = document.getElementsByTagName("div")[3];
// где div - название тега элемента,
// а 3 - его номер на странице.
</script>
Code
<script>
Object.prototype.get= function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
var it;
if(type=='#'){it = node.getElementById(obj);} else
if(type=='@'){it = node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){it = node.getElementsByTagName(dat);} else
if(type=='.'){
var it = new Array();
var elems = node.getElementsByTagName('*');
var num = elems.length;
var pat = new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){it[j]=elems[i];j++;}}
}
if(it){return it;}else{return '';}
};
// чтобы получить элемент по id "mydiv" пишем:
get("#mydiv")
// по name "myinput" пишем:
get("@myinput")[0]
//по имени тега div пишем:
get("div")[0]
//по классу "wrapper" пишем:
get(".wrapper")[0]
</script>
Object.prototype.get= function(dat){
var node = this;
if(node==window){node = document;}
var type = dat.charAt(0);
var obj = dat.replace(type,'');
var it;
if(type=='#'){it = node.getElementById(obj);} else
if(type=='@'){it = node.getElementsByName(obj);} else
if(type!='@' && type!='#' && type!='.'){it = node.getElementsByTagName(dat);} else
if(type=='.'){
var it = new Array();
var elems = node.getElementsByTagName('*');
var num = elems.length;
var pat = new RegExp("(^|\\b)"+obj+"(\\b|$)");
for (i=0,j=0;i<num;i++){if(pat.test(elems[i].className)){it[j]=elems[i];j++;}}
}
if(it){return it;}else{return '';}
};
// чтобы получить элемент по id "mydiv" пишем:
get("#mydiv")
// по name "myinput" пишем:
get("@myinput")[0]
//по имени тега div пишем:
get("div")[0]
//по классу "wrapper" пишем:
get(".wrapper")[0]
</script>
Js редирект (перенаправление)
Редирект в Js осуществляется несколькими способами:
Code
<script type="text/javascript">
// скрипт помещается в тег HEAD
// перенаправит сразу же и не сохранит адрес в хистори
location.replace('http://studioad.ru');
// перенаправит сразу же и сохранит адрес в хистори
location.href = 'http://studioad.ru';
// перенаправит с задержкой в 1 секунду
setTimeout("location.replace('http://studioad.ru')", 1000 );
// перенаправит с предупреждением
alert("Сейчас вы будете автоматически перенаправлены!");
location.replace('http://studioad.ru');
</script>
// скрипт помещается в тег HEAD
// перенаправит сразу же и не сохранит адрес в хистори
location.replace('http://studioad.ru');
// перенаправит сразу же и сохранит адрес в хистори
location.href = 'http://studioad.ru';
// перенаправит с задержкой в 1 секунду
setTimeout("location.replace('http://studioad.ru')", 1000 );
// перенаправит с предупреждением
alert("Сейчас вы будете автоматически перенаправлены!");
location.replace('http://studioad.ru');
</script>
Js события
С помощью javascript можно отслеживать различные события, производимые (обычно) пользователем, будь то клик, изменение размеров окна, нажатие кнопки клавиатуры. Вот несколько примеров отслеживание различных событий.
Допустим, что у нас есть некий элемент (например div) который записан в переменную elem. Вот варианты привязки к этому элементу события onсlick, то есть клика мышкой:
AddEventListner Первый вариант - прикрепление через метод AddEventListner(). Синтаксис метода таков:
Code
<script type="text/javascript">
elem.AddEventListner("click", function(){ что то }, false);
// или
elem.AddEventListner("click", doIt, false);
function doIt(){ что то };
</script>
elem.AddEventListner("click", function(){ что то }, false);
// или
elem.AddEventListner("click", doIt, false);
function doIt(){ что то };
</script>
attachEvent Варант прикрепления события для IE (обратите внимание на приставку "on"):
Code
<script type="text/javascript">
elem.attachEvent("onclick", function(){ что то });
// или
elem.attachEvent("onclick", doIt);
function doIt(){ что то };
</script>
elem.attachEvent("onclick", function(){ что то });
// или
elem.attachEvent("onclick", doIt);
function doIt(){ что то };
</script>
Code
<script type="text/javascript">
elem.onclick = function(){ что то };
// или
elem.onclick = doIt;
function doIt(){ что то };
</script>
elem.onclick = function(){ что то };
// или
elem.onclick = doIt;
function doIt(){ что то };
</script>
Загрузка DOM древа, onDOMload
Иногда бывает важно отследить момент, когда уже готов весь код и объектное древо, независимо от загрузки графики. Это поможет сделать вот эта функция:
Code
<script>function onDOMload(b){function init(){if(arguments.callee.done){return}arguments.callee.done=true;b()};if(document.addEventListener){document.addEventListener("DOMContentLoaded",init,false)}if(/*@cc_on!@*/false){document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");var a=document.getElementById("__ie_onload");a.onreadystatechange=function(){if(this.readyState=="complete"){init()}}}if(/WebKit/i.test(navigator.userAgent)){var c=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(c);init()}},10)}window.onload=init};
//использование
onDOMload(function(){ что то });
</script>
//использование
onDOMload(function(){ что то });
</script>
