Примеры JavaScript

Written on . Posted in HTML, CSS, JavaScript

ОГЛАВЛЕНИЕ

Примеры JavaScript.

Как узнать ширину и высоту клиентской (рабочей) области окна браузера?

<script type="text/javascript">
//IE5+, Mozilla 1.0+, Opera 7+

function getClientWidth()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

</script>
Пример работы кода: показать ширину и высоту рабочей области окна


Как заменить выделенный текст в TEXTAREA на другой?

Как это ни "странно" :-), но реализация ветвится из-за разных методов работы с выделениями в IE и Mozilla/Gecko:

IE4+

В Internet Explorer используем объект selection, который представляет текущее выделение и его метод createRange, создающий объект TextRange из текущего выделения. Полученный TextRange объект имеет свойство text (для чтения и записи), которое и дает нам выделенный текст. Т.е. прочитали TextRange.text, сделали изменения и записали назад.

См. реальное использование в примере ниже.

Mozilla/Gecko

Ну, а здесь ситуация выглядит несколько по-другому: для достижения цели используем свойства selectionStart и selectionEnd самого объекта textarea, которые содержат начальную и конечную позицию выделения соответственно. А имея текст и зная в нем начало и конец для замены, мы можем легко заменить выделенный фрагмент на другой используя, например метод "substr()".

Пример: 
function replaceSelectedText(obj,cbFunc)
{
 obj.focus();
 
 if (document.selection) 
 {
   var s = document.selection.createRange(); 
   if (s.text)
   {
     eval("s.text="+cbFunc+"(s.text);");
     s.select();
     return true;
   }
 }
 else if (typeof(obj.selectionStart)=="number")
 {
   if (obj.selectionStart!=obj.selectionEnd)
   {
     var start = obj.selectionStart;
     var end = obj.selectionEnd;

     eval("var rs = "+cbFunc+"(obj.value.substr(start,end-start));");
     obj.value = obj.value.substr(0,start)+rs+obj.value.substr(end);
     obj.setSelectionRange(end,end);
   }
   return true;
 }

 return false;
}

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

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

//Определяем вспомогательную ф-ю которая
//принимает строку и возвращает её в нижнем регистре
function lCase(s){return s.toLowerCase();}

//заменяем выделенную строку в нижний регистр
replaceSelectedText(document.formName.textareaName,'lCase');



Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?

IE4+

Internet Explorer позволяет нам сделать это при помощи следующих методов :

createTextRange() - данный метод создает объект типа TextRange (текстовый диапазон) и позволяет манипулировать текстом. Пустой текстовый диапазон представляет собой курсор - точку ввода.

collapse() - данный метод объекта TextRange сужает текстовый диапазон до 0 (превращает его в курсор (в точку ввода)) и устанавливает точку ввода либо в начало диапазона (collapse(true) или просто collapse(), так как значение по умолчанию true) или в конец (collapse(false)).

select() - медод объекта TextRange нужный для визуального выделения текста включенного в диапазон. В случае пустого диапазона просто устанавливает текстовый курсор.

Пример: 

function moveCaretToStart(inputObject)
{
  if (inputObject.createTextRange)
  {
   var r = inputObject.createTextRange();
   r.collapse(true);
   r.select();
  }
}

function moveCaretToEnd(inputObject)
{
  if (inputObject.createTextRange)
  {
   var r = inputObject.createTextRange();
   r.collapse(false);
   r.select();
  }
}

в качестве аргумента ф-ям передается объект элемента ввода, например: moveCaretToStart(document.formName.textareaName)

Mozilla/Gecko

setSelectionRange(start, end) - данный метод создающий текстовое выделение в случае когда start и end совпадают установит курсор в нужную позицию

function moveCaretToStart(inputObject)
{
 if (inputObject.selectionStart)
 {
  inputObject.setSelectionRange(0,0);
  inputObject.focus();
 }
}
function moveCaretToEnd(inputObject)
{
 if (inputObject.selectionStart)
 {
  var end = inputObject.value.length;
  inputObject.setSelectionRange(end,end);
  inputObject.focus();
 }
}



После замены выделенного текста выделение пропадает. Как сделать так чтобы выделение оставалось?

IE

if (document.selection) 
 {
  var s = document.selection; //создаем объект из выделенного
  var r = s.createRange(); //создаем на основе выделенного объект TextRange

  var len = r.text.length; //вычисляем длину первоначального текста
  var newText= "сдесь текст который заменит первоначальный"; 
  r.text = newText;

  len = newText.length - len; //вычисляем разницу длин нового и первоначального текстов
  
  r = s.createRange(); //восстанавливаем первоначальный текстовый диаппазон
  r.moveEnd("character",len); //расширяем или сужаем первоначальный диапазон до нового
  r.select(); //выделяем
}

Mozilla/Gecko

Для этого после замены текста выделяем текст заново, используя метод setSelectionRange(start,end).




Как получить позицию текстового курсора в textarea элементе (textarea - позиция курсора)?

IE4+ Mozilla/Gecko

function getCaretPos(obj)
{
  obj.focus();
  
  if(obj.selectionStart) return obj.selectionStart;//Gecko
  else if (document.selection)//IE
  {
    var sel = document.selection.createRange();
    var clone = sel.duplicate();
    sel.collapse(true);
    clone.moveToElementText(obj);
    clone.setEndPoint('EndToEnd', sel);
    return clone.text.length;
  }
  
  return 0;
}

Ф-ии в качестве аргумента передается объект textarea.

Например: getCaretPos(document.formName.textareaName);




Как получить количество строк в textarea элементе?

IE4+

function textareaCurLineNum(obj)
{
  var rowHeight = obj.clientHeight/obj.rows;
  var curHeight = obj.createTextRange().boundingHeight;

  return parseInt(curHeight/rowHeight)+(obj.value!=''?1:0);
}

Обратите внимание на то, как ведется подсчет строк:

  • если текстовое поле пусто, то функция вернет 0 (хотя курсор и мигает в первой строке), ибо строк реально нет;
  • если вы нажали "Enter" и курсор переместился в новую строку, то это не значит что, появилась новая строка. Вот когда вы введете в этой строке что-то, то строка действительно появится, и будет учитываться при подсчете.

Пояснения: clientHeight возвращает высоту элемента textarea без учета всех отступов, границ, полос прокрутки;

boundingHeight возвращает размер в пикселах воображаемого пространства, занятого объектом TextRange (в нашем случае данный объект содержит весь текст и соответственно возвращает высоту занимаемую текстом в textarea элементе).




Запрет выделения текста

IE 
<body onselectstart="return false">
Mozilla 
document.onmousedown=function(){return false}
или 
<body style="-moz-user-select: none">



Проверка email-адреса с помощью регулярного выражения.

E-mail адрес состоит из двух частей разделенных символом "@": "Имя пользователя" @ "доменное имя". Имя пользователя, мы ограничим символами латинского алфавита (a-z), цифрами (0-9), символом подчеркивания "_", дефисом "-" и точкой "." Причем имя пользователя не может начинаться и заканчиваться точкой. Что касается доменного имени, то оно должно удовлетворять следующим критериям: в доменном имени могут присутствовать символы латинского алфавита, цифры и дефис "-"; домен не должен начинаться или заканчиваться дефисом; домен первого уровня (например, com, org, info, ru и т.д.) состоит только из символов латинского алфавита и ограничен длиной от 2 до 4 (или до 6 (домен museum)) символов.

function isValidEmail (email)
{
 return (/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i).test(email);
}

Ну, и при желании можно ввести ограничения на общую длину. Имя пользователя может быть длиной не более 64 символов, а доменное имя до 255 символов (RFC 2821), а вместо a-z0-9_ указать эквивалентый класс символов \w (что я не сделал в целях наглядности).

Javascript redirect

Javascript redirect, т.е. переадресация javascript делается следующим образом (вставлять в разделе HEAD документа HTML):

<script type="text/javascript">
 location.replace("http://www.cyberguru.ru"); 
</script>

Для того чтобы сделать более универсальный редирект с задержкой пропишите в разделе HEAD документа HTML следующий код:

<script type="text/javascript">

setTimeout('location.replace("http://www.cyberguru.ru")', 3000);
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

</script>

<noscript>

<meta http-equiv="refresh" content="3; url=http://www.cyberguru.ru">

</noscript>

Пояснение. Для универсальности совмещаем два способа: Javascript редирект и redirect html. Для редиректа с задержкой используем функцию setTimeout, а для самого перенаправления используем метод replace, чтобы заменить текщий адрес на новый и тем самым в хистори не оставлять промежуточной страницы. На тот случай если Javascript отключен дублируем перенаправление тэгом META refresh: <meta http-equiv="refresh" content="задержка в секундах до редиректа; url=адрес для редиректа">

Однако по возможности лучше использовать перенаправление с помощью серверного скрипта - PHP redirect или используя возможности самого вэб-сервера, так как meta refresh имеет недостатки, а Javascript у некоторых редких пользователей может быть отключен.




Как получить десятичное число в шестнадцатеричном представлении (конвертация десятичного числа в шестнадцатеричное)?

Пример: 
function decToHex(n){ return Number(n).toString(16); }
 
function hexTodec (hex){ return parseInt(hex,16); }
Часто встречается и описанный ниже вариант КОТОРЫЙ НЕ НУЖНО ИСПОЛЬЗОВАТЬ, ибо не нужно изобретать велосипед! Правльно использовать метод toString(radix), объекта Number, где radix задает основание числа (от 2 до 36), используемое для преобразования. Если параметр radix не указан, то по умолчанию используется 10. 
//Плохой пример
function poor_decToHex(n)
{
 var hexChars = "0123456789ABCDEF";

 if (n < 0) return "00";
 if (n > 255) return "FF";

 var h = Math.floor(n / 16)
 var l = n % 16

 return hexChars.charAt(h) + hexChars.charAt(l);
}



Как преобразовать значение цвета из rgb(n,n,n) в #HEX?

Например, rgb(255,255,255) или rgb(100%,100%,100%) в FFFFFF. Заодно функция расширяет сокращенную шеснадцатиричную запись цвета в полную, например, #FAE в FFAAEE. Возвращается шеснадцатиричное значение цвета без ведущего символа #. 

function getHexRGBColor(color)
{
  color = color.replace(/\s/g,"");
  var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);

  if(aRGB)
  {
    color = '';
    for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
  }
  else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
  
  return color;
}


RGB2HEX

function rgb2hex(r,g,b)
{
  return Number(r).toString(16).toUpperCase().replace(/^(.)$/,'0$1') + 
         Number(g).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
         Number(b).toString(16).toUpperCase().replace(/^(.)$/,'0$1');
}



Как получить отдельно значение красного (Red), зеленого (Green), синего (Blue) цветов из RGB значения цвета? splitRGB, HEX2RGB

Например, из цвета Lime (#00FF00, rgb(0,255,0) или rgb(0%,100%,0%)) получить массив из трех элементов (0,128,0), где нулевой элемент массива соответствует красному, первый зеленому, а второй синему цветам.

//hex2rgb это частный случай splitRGB
function splitRGB(color)
{
  color = getHexRGBColor(color); 
  var matches = color.match(/^#?([\dabcdef]{2})([\dabcdef]{2})([\dabcdef]{2})$/i);
    
  if (!matches) return false;
  
  for (var i=1, rgb = new Array(3);  i<=3; i++) rgb[i-1] = parseInt(matches[i],16);
  
  return rgb;
}

Пример:

var rgbArr = splitRGB("FEC400");
var R = rgbArr[0];
var G = rgbArr[1];
var B = rgbArr[2];

*Функция splitRGB() использует ф-ю getHexRGBColor(), описанную в вопросе "Как преобразовать значение цвета из rgb(n,n,n) в #HEX?".




Как получить #HEX значение цвета по его имени?

Функция nemedColor2Hex() .




Генерация случайного числа в Javascript

Для генерации случайных чисел в Javascript существует метод random объекта Math, который возвращает псевдо-случайное число от 0 (включительно) до 1 (не включая 1, т.е. число всегда меньше 1).

Для генерации целого псевдо-случайного числа от 0 до n включительно, используется следующая формула:

Math.floor(Math.random( ) * (n+1))

Для генерации целого псевдо-случайного числа в диапазоне от m до n включительно, используется следующая формула:

Math.floor(Math.random( ) * (n - m + 1)) + m

где m нижняя граница диапазона, а n верхняя граница диапазона.

Ниже приведена функция для генерации псевдо-случайного числа в диапазоне от m до n:

function randomNumber (m,n)
{
  m = parseInt(m);
  n = parseInt(n);
  return Math.floor( Math.random() * (n - m + 1) ) + m;
}
Начальное значение: Конечное значение:



Как перемешать массив случайным образом?

Если нужно перемешать эелементы массива в случайном порядке, то ... это придется сделать самим, в Javascript нет функции shuffle такой как в PHP:

/* Array.shuffle( deep ) - перемешать элементы массива случайным образом

deep - необязательный аргумент логического типа, указывающий на то, 
       нужно ли рекурсивно обрабатывать вложенные массивы;
       по умолчанию false (не обрабатывать)
*/
Array.prototype.shuffle = function( b )
{
 var i = this.length, j, t;
 while( i ) 
 {
  j = Math.floor( ( i-- ) * Math.random() );
  t = b && typeof this[i].shuffle!=='undefined' ? this[i].shuffle() : this[i];
  this[i] = this[j];
  this[j] = t;
 }

 return this;
};

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

var a = new Array(1,2,3,4,5);
alert( a.shuffle() );

alert( ['a','b','c', [1,2,3,4,5], 'D','E','F'].shuffle(true) );//Перемешать включая вложенные массивы



Как перенести текст на другую строку в окне alert?

Очень просто, используйте символ переноса строки \n.

alert("Диннный текст\n который нужно вывести\n в несколько строк.");

Пример ...

Внимание! В html файле текст внутри alert должен идти одной строкой без переносов, так как иначе в некоторых браузерах может возникнуть ошибка "Error: unterminated string literal".




Как удалить элемент массива? / Как добавить элемент в середину массива?

Для удаления элемента из ассоциативного массива используйте оператор delete 
var assoc = new Array();
assoc["a"] = "a";
assoc["b"] = "b";
assoc["c"] = "c";

delete assoc["b"];

Оператор delete поддерживается начиная с Nav2+, NES3+, IE 4+, Opera3+

Замечание: свойство length оператором delete не изменяется, но это для ассоциативных массивов значения не имеет ибо length всегда для них равен 0. Однако для числовых массивов это крайне важно и помните об этом! Почему не меняется свойство length? Потому что Array.length - это не длина массива, а максимальный индекс массива который только был у массива, хотя чаще всего length равно именно длине массива. Кстати свойству length можно присваивать значения, тем самым урезая массив или расширяя массив новыми элементами со значением "undefined".

Для удаления элементов из числового массива или вставки элементов с изменением индексов и свойства length используйте метод splice объекта Array.

Синтаксис: array.splice(start, delete, arg3,...,argN)

Параметры:

start - число, задающее индекс, с которого должно начаться удаление элементов и/или вставка новых элементов
delete - необязательный параметр указывающий количество элементов которое следует удалить начиная с индекса start
arg3,...,argN - необязательные параметры которые будут вставлены в массив в качестве новых элементов начиная с индекса start

Описание:

Если "delete" является числом больше нуля, то элементы начиная с индекса "start" до элемента с индексом start+delete будут удалены из массива. Если же delete равен нулю, то удаляться ничего не будет. Если delete не указан, то все элементы с индекса "start" до конца массива будут удалены. Если за аргуметом delete указаны какие-то параметры, то они будут добавлены к массиву как его элементы начиная с индекса "start". Существующие элементы перенумеровываются в сторону старших индексов предоставляя место новым элементам.

Метод splice объекта Array поддерживается начиная с Nav4+, IE5.5+, Opera5+

Замечание: помните, что индекс первого элемента в массивах начинается с 0.

Примеры:

var a = new Array(1,2,3,4,5);
// a.length равно 5

a.splice(1,2); // начиная с индекса 1 удалить 2 элемента
//a = (1,4,5)
// a.length равно 3

a.splice(2,0, 9, 8, 7); //добавить в массив начиная с индекса 2 новые элементы, ничего при этом не удаляя
// a = (1,4, 9,8,7, 5)

a.splice(3,2, -10);//удалить начиная с индекса 3 два элемента и добавить с индекса 3 элемент со значением -10
// a = (1,4,9, -10, 5)

a.splice(2);//удалить все элементы начиная с индекса 2 до конца массива
//a = (1,4)

Как узнать какие свойства есть у объекта (оператор for in)?

Как узнать все свойства объекта? В этом поможет оператор for in

Синтаксис оператора:

for ( variable in object )
{
  code;
}

Суть оператора в следующем: при каждой итерации цикла, переменной "variable" присваивается имя очередного свойства объекта "object".

Рассмотрим функцию, которая перебирает свойства объекта и возвращает их вместе со значениями в виде строки: 

function showProperties(obj, objName) 
{
  var result = "The properties for the " + objName + " object:" + "\n";
  
  for (var i in obj) {result += i + " = " + obj[i] + "\n";}
  
  return result;
}
Посмотреть свойства объекта window.navigator


Как проверить, загрузилась ли картинка в браузере (включена ли загрузка картинок)?

Для этого можно воспользоваться событием "onLoad" картинки, если картинка загружена, то выполнится упомянутое событие, если нет то нет.

Т.е. для проверки того, отображаются ли картинки в браузере можно поместить на странице следующее:

<html>
<head>
  <script type="text/javascript">
  
    var imageCheck = false;
    
  </script>

</head>

<body>

  <img src="check.jpg" onload="var imageCheck=true;">
  
</body>
</html>

www.tigir.com Картинка загружена?

А теперь ложка дегтя: Opera выполняет событие onLoad() даже если картинка не отображается, но находится в кэше, т.е. была ранее загружена и сохранена в кэше. Надеюсь это временное поведение :-(




Как убрать/вырезать пробелы (пробельные символы: tab, \r, \n, form feed, vertical tab) из строки?

<script type="text/javascript">

//IE4+, NN4+, Opera5+
function trim(s)
{
  return rtrim(ltrim(s));
}

function ltrim(s)
{
  return s.replace(/^\s+/, ''); 
}

function rtrim(s)
{
  return s.replace(/\s+$/, ''); 
}

</script>

Примеры:







Как перевести код символа в символ (получить символ по его коду; аналог chr() в Javascript)?

Получить символ по его коду можно с помощью метода fromCharCode объекта String.
Например: var c = String.fromCharCode(84);




Как обраться к элементу формы в имени которого есть квадратные скобки "[]"?

В JavaScript свойства объекта можно рассматривать как массив элементов. Таким образом, для формы существует массив document.имя_формы[], который содержит все элементы формы, и можно обратиться к "элементу[]" следующим образом:

document.имя_формы["имя_элемента[]"]



Как отметить/пометить/выделить все чекбоксы (checkbox) в группе?

Первым делом всем элементам chechbox в группе даем одинаковое имя (атрибут name тэга input). Если вы передаете данные скрипту на PHP, то удобно дать название вида name="cboxdata[]" со скобками вконце названия, для того чтобы в PHP скрипте данные были доступны через массив cboxdata. Теперь чтобы отметить или снять все отметки с чекбоксов нужно вызвать функцию checkAll(oForm, cbName, checked), где oForm - объект формы, cbName - строка с иенем элементов checkbox в группе, а checked это либо true, либо false, в зависимости что нужно, отметить или снять отметки.

<html>
<head>
<script type="text/javascript">
function checkAll(oForm, cbName, checked)
{
for (var i=0; i < oForm[cbName].length; i++) oForm[cbName][i].checked = checked;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="total" value="checkbox" onClick="checkAll(this.form,'checkbox[]',this.checked)">Отметить все
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">1
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">2
<br>
<input type="checkbox" name="checkbox[]" value="checkbox">3
</form>
</body>
</html>
All
1
2
3
4


Как выбрать все значения в ячейках таблицы (как обойти таблицу по ячейкам)?

Задача: имеется таблица с атрибутом id="idWalkTable" и требуется обойти все ряды, а в них все ячеки и выветси их содержимое.

1 2
3 4
Обойти таблицу 
<script type="text/javascript">
var table = document.getElementById('idWalkTable');
var trList= table.getElementsByTagName('tr');
for (var i=0;i<trList.length;i++)
{
  var tdList = trList[i].getElementsByTagName('td');
  
  for (j=0;j<tdList.length;j++) 
  {
  alert('trList['+i+'] tdList['+j+'].innerHTML='+tdList[j].innerHTML);
  }
} 
</script>
getElementById - Возвращает элемент с заданным идентификатором.
getElementsByTagName - Возвращает коллекцию всех элементов, имеющих данный тег.


Как убрать (удалить) страницу (адрес) из истории просмотра (browser history), чтобы она стала недоступной через кнопки Back/Forward (Назад/Вперед)?

Например, нужно направить пользователя со страницы 1.html на страницу 2.html, а страницу 1.html убрать из истории просмотра. Для этого переход со страницы 1.html на страницу 2.html нужно выполнить так: 

location.replace("http://www.cyberguru.ru/2.html");



Как узнать/изменить значение атрибута class элемента (свойство className)?

Javascript может получить доступ к атрибуту class элемента через свойство "className". Однако, следует иметь ввиду, что элементу можно задать не один класс, а сразу несколько, отделённых друг от друга пробелом.

Пример: <span class="bigText greenText">...</span>, показывает, что элементу span назначено два класса (bigText и greenText) .

Ввиду вышесказанного, нельзя использовать простое присваивание, типа: elem.className = "greenText", чтобы не затереть другие возможные значения, и следует новое значение, добавить к уже имеющимся через пробел (хотя если вы уверены, что свойство className пусто, то конечно же можно использовать и простое присваивание).

var elem = document.getElementById(elemId);

elem.className += " greenText";//добавляем новый класс к элементу
elem.className.replace(/\bgreenText\b/, ' ');//удаляем класс greenText из списка классов, назначенных элементу

if (elem.className.match(/\bgreenText\b/) { ... }//проверяем назначен ли класс greenText элементу

Для проверки наличия класса и удаления используется регулярное выражение: /\bgreenText\b/, где \b - это специальная конструкция (метасимвол) обозначающая границу слова, т.е регулярное выражение ищет строку greenText, которая является самомтоятельным словом, а не частью другого слова (под словом понимается строка без разделителей: пробелов, знаков пунктуации и т.п.). Использование метасимвола \b здесь в самый раз, но есть одно НО, не все браузеры его понимают (например, Opera 6 и ниже). Поэтому, если нужна поддержка таких "кривых" и старых браузеров, то следует заменить регулярное выражение "/\bимя класса\b/", на менее изящное "/(^| )имя класса($| )/".

*IE4+, Gecko, Opera7+ ... понимают \b как положено.




Функциии Javascript и значения по умолчанию...

Как это не печально, но в Javascript отсутствует такое понятие как значение аргумента функции по умолчанию. Но на самом деле это не большая проблема, хоть и ничего приятного в этом нет. Рассмотрим пример: 

function myFunc(s)
{
 if (typeof s == "undefined") s = "default value for s";
 alert(s);
}



Как подавить сообщения браузера об ошибках Javascript?

Для этого воспользуемся событием onerror объекта window.

<script type="text/JavaScript">
//подавить все сообщения об ошибках JavaScript 
window.onerror=null;
</script>

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

<script type="text/JavaScript">
function myErrHandler()
{
 ... //здесь выполняем нужные нам действия

 //Чтобы подавить стандартный диалог ошибки JavaScript, 
 //функция должна возвратить true
 return true;
}

//назначаем обработчик для события 
window.onerror = myErrHandler;
</script>

Во время возникновения ошибки вызывается обработчик события и ему передаются следующие параметры: текст сообщения, URL, номер строки с ошибкой. Для того чобы ими воспользоваться объявите их в качестве аргументов при описании функции обработчика: function myErrHandler(msg, url, lno){...}.

Обратите внимание на то, что все что расположено в скрипте после кода вызвавшего ошибку, выполняться не будет!




Как узнать на сколько прокручен документ (scrollLeft, scrollTop)? Почему scrollLeft, scrollTop всегда равны нулю? Как прокрутить содержимое окна документа?

Узнать на сколько прокручен объект вниз или влево или прокрутить его на определенную велечину можно с помощью свойств scrollTop и scrollLeft объекта.

Примечание: для старых браузеров Netscape (4-6), Opera 5 следует использовать свойства pageXOffset, pageYOffset

1

2

3

4

5

6

7

8

9

10

document.getElementById('Layer1').scrollTop//Прочитать значение scrollTop
 document.getElementById('Layer1').scrollTop = 50;  //Прокрутить от верха на 50 вниз

Но когда дело касается прокрутки всего документа, то нужно учитывать наличие в документе конструкции !DOCTYPE. Если !DOCTYPE переключает браузер в режим следования стандартам, то некоторые свойства объекта document.body становятся доступными лишь через объект document.documentElement, это относится и к свойствам scrollLeft, scrollTop.

Если браузер находится в режиме CSS1Compat (режим следования стандартам), что можно узнать из свойства document.compatMode, document.body.scrollLeft и document.body.scrollTop всегда будут равны нулю, а правильные значения можно получить через document.documentElement.scrollTop и document.documentElement.scrollLeft. Но все меняется наоборот если браузер находиться в режиме обратной совместимости (document.compatMode == "BackCompat").

Ниже показано как узнать значения scrollTop и scrollLeft для тела документа: 

function getBodyScrollTop()
{
  return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

function getBodyScrollLeft()
{
  return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}

* На заметку: методы scrollBy(numHorz, numVert) и scrollTo(numX, numY) так же позволяют прокуручивать содержимое объекта.

scrollBy(numHorz, numVert) - прокручивает на указанное смещение от текущего положения (numHorz, numVert могут принимать положительные, отрицательные значения, а так же 0 для того чтобы отсавить положение без изменения).

scrollTo(numX, numY) - прокручивает содержимое к определенной позиции.

Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселей



В чем разница, различия между outerText и innerText, чем они отличаются?

innerOuterShow(); Разница между свойствами outerText и innerText заключается в присвоении им новых значений. Если присвоить новое значение свойству innerText, то измениться только текст внутри тэга свойство innerText которого изменяется, а присвоение свойству outerText изменит и текст и при этом "затрет" сам тэг.


Как убрать рамку вокруг ссылки (вокруг картинки ссылки) при клике?

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

<a href="..." onfocus="this.blur()">...</a>

Однако помните, убирая таким образом фокус с элемента вы затрудняете передвижение по документы с помощью клавиши Tab.




Как узнать на сколько проскручена страница (проскролленность страницы)?

function getBodyScrollTop()
{
    return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

function getBodyScrollLeft()
{
    return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}



Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?

//Размер документа по вертикали
function getDocumentHeight()
{
    return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}

//Размер документа по горизонтали
function getDocumentWidth()
{
    return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}



Как узнать координаты центра окна с учетом скроллинга?

function getClientCenterX()
{
    return parseInt(getClientWidth()/2)+getBodyScrollLeft();
}

function getClientCenterY()
{
    return parseInt(getClientHeight()/2)+getBodyScrollTop();
}

Функции getClientWidth, getClientHeight и getBodyScrollLeft, getBodyScrollTop определены выше.




Как изменить размер окна после загрузки страницы?

Для этого используйте методы resizeBy и resizeTo объекта window. 
window.resizeBy(-100, 200);//Уменьшить ширину окна на 100 пикселей и увеличить высоту на 200
window.resizeBy(0, 50);//Ширину не менять, а высоту окна увеличить 50 пикселей
window.resizeTo(400,300);//Установить конкретные значения ширины и высоты, соответственно 400 на 300 пикселей

Следует заметить, что изменение размеров окна может быть запрещено в настройках браузера.




Как развернуть окно во весь экран (максимизировать)?

window.moveTo(0, 0); 
window.resizeTo(screen.availWidth, screen.availHeight);

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




Как открыть окно в полноэкранном режиме как при нажатии F11?

Для этого используем атрибут fullscreen при вызове window.open:

var myWin = window.open("page.html", "", "fullscreen");

Работет только в IE. Gecko просто максимизирует окно.

Если вы не хотите "достать" пользователя, то не используйте это.




Как узнать положение элемента на странице (определение координат элемента)?

function getElementPosition(elemId)
{
    var elem = document.getElementById(elemId);
    
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
    
    var l = 0;
    var t = 0;
    
    while (elem)
    {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}

Функция возвращает объект со свойствами left, top, width, height, определяющими координаты элемента относительно верхнего угла страницы, а так же его размеры.

Пример:

pos = getElementPosition("myDiv"); 
var left = pos.left; 
var top = pos.top; ...



Не получается обратиться к свойствам другого фрейма (окна). Что делать?

Получить доступ к фрейму (окну) со страницей загруженной с чужого сайта (домена) невозможено по соображениям безопасности. Однако, в случае, когда странички лежат на разных поддоменах одного домена, например, a.site.com и b.site.com, и вы имеете доступ к страницам на этих поддоменах, то пропишите на страницах из обоих поддоменах следующее: document.domain="site.com";.

Задержка при выполнении скрипта javascript (javascript sleep delay)

Как приостановить выполнение скрипта или функции? Приостановить выполнение кода Javascript невозможно, но можно сделать эмуляцию используя метод setTimeout.

function startPart()
{
  // Выполняем нужные нам действия
  ...
  //через 5 секунд запустить endPart
  setTimeout("endPart()", 5000);
}

function endPart()
{
  //выполняем оставшиеся действия после задержки
}

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




Как заполнить одну строку другой до определённой длины (аналог PHP ф-ии str_pad в Javascript)?

Добавим к стандартному объекту String свой метод String.pad(). Метод может принимать 3 параметра (но обязателен только первый): длина до которой нужно дополнить строку; строка заполнитель (по умолчанию пробел); тип заполнения (0 - заполнить слева, 1 - заполнить справа, 2 - заполнить с обеих сторон; по умолчанию берется 1). 

String.prototype.pad = function(l, s, t)
{
  if ((l -= this.length) > 0)
  {
    if (!s) s = " ";//по умолчанию строка заполнитель - пробел
    if (t==null) t = 1;//по умолчанию тип заполнения справа
  
    s = s.repeat(Math.ceil(l / s.length));
    var i = t==0 ? l : (t == 1? 0 : Math.floor(l / 2));
    s= s.substr(0, i) + this + s.substr(0, l - i);
  
    return s;
  }
  else return this;
}

//повторить заданную строку n раз
String.prototype.repeat = function(n)
{
  return new Array( n + 1 ).join(this);
}



Я хочу получить значение CSS свойства, но возвращается пустая строка. Например, хочу узнать цвет текста элемента и пишу document.getElementById("elemId").style.color, а результат пустая строка. Что делать?

Объект style элемента (document.getElementById("elementId").style), содержит только те значения, которые были заданны явно в атрибуте style в тэге элемента или были предварительно назначены через скрипт. Если Вы задаёте CSS свойства через тэг <STYLE></STYLE> или внешние листы стилей, то они не будут присутствовать в объекте style элемента.

Возникает вопрос, как узнать вычисленное значение свойства элемента, если оно не задано в атрибуте style элемента и не было инициализировано через скрипт?

Воспользуйтесь функцией (работает начиная с NN 6, IE 5, Opera 7):

function getElementComputedStyle(elem, prop)
{
  if (typeof elem!="object") elem = document.getElementById(elem);
  
  // external stylesheet for Mozilla, Opera 7+ and Safari 1.3+
  if (document.defaultView && document.defaultView.getComputedStyle)
  {
    if (prop.match(/[A-Z]/)) prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
    return document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop);
  }
  
  // external stylesheet for Explorer and Opera 9
  if (elem.currentStyle)
  {
    var i;
    while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2);
    return elem.currentStyle[prop];
  }
  
  return "";
}

Функция принимает два аргумента: id элемента или сам элемент и название свойства в формате W3C/CSS или аналогичное название свойства в JavaScript нотации (в таком же виде в котором вы его указываете при доступе через объект style).

Примеры:

var color = getElementComputedStyle("elemID", "color");

var elem = document.getElementById("elemID");

var bg = getElementComputedStyle(elem, "background-color");
//или так
var bg = getElementComputedStyle(elem, "backgroundColor");



Как узнать координаты мыши (положение курсора мыши) относительно окна документа?

Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.

IE5+, Mozilla/Gecko, Opera 7+ 

function mousePageXY(e)
{
  var x = 0, y = 0;

  if (!e) e = window.event;

  if (e.pageX || e.pageY)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)
  {
    x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
    y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
}

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

if (document.getElementById) { document.getElementById("mouseXYEx").onmousemove = function(e){var mCur = mousePageXY(e); window.status = "X:"+mCur.x+" - Y:"+mCur.y;}; document.getElementById("mouseXYEx").onmouseout = function(){window.status='';}; }

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

document.onmousemove = function(e){var mCur = mousePageXY(e); window.status = "X:"+mCur.x+" - Y:"+mCur.y;};



Как узнать координаты мыши (положение курсора мыши) внутри абсолютно позиционированного элемента?

function mouseLayerXY(e)
{
  if (!e) {e = window.event; e.target = e.srcElement}
  var x = 0;
  var y = 0;
  
  if (e.layerX)//Gecko
  {
    x = e.layerX - parseInt(getElementComputedStyle(e.target, "border-left-width"));
    y = e.layerY - parseInt(getElementComputedStyle(e.target, "border-top-width"));
  }
  else if (e.offsetX)//IE, Opera
  {
    x = e.offsetX;
    y = e.offsetY;
  }
  
  return {"x":x, "y":y};
}

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Функция getElementComputedStyle описывалась ранее.




Как узнать значение группы input radio (input type radio value)?

Javascript
CSS
HTML
PHP

Получить значение radio-группы 
function getRadioGroupValue(radioGroupObj)
{
  for (var i=0; i < radioGroupObj.length; i++)
    if (radioGroupObj[i].checked) return radioGroupObj[i].value;

  return null;
}

Использовать так:

var v = getRadioGroupValue(document.formName.radioName);

Если не отмечен ни один элемент, функция вернет null.




Посимвольное отображение строки с задержками

String.prototype.delayingWrite = function(obj, delay)
{
    if (this.lengt>0)
    {
        if (typeof obj == 'string') obj = document.getElementById(obj);
        
        obj.innerHTML += this.charAt(0);
        s = this.substr(1);

        if (s) setTimeout(function(){s.delayingWrite(obj, delay);},delay);
    }
}

Пример: "Вот такая печатная машинка!".delayingWrite('divID',50);

Пример в работе

>




Обращение к родительскому окну из дочернего

Допустим есть основное окно которое открывает дочернее, используя window.open(). Для обращения к родительскому окну, в дочернем существует объект window.opener, который ссылается на объект window родителя. Рассмотрим пример (перезагрузить родительское окно из дочернего):

/*Этот код находится в дочернем окне. Если родительское окно открыто, перегружаем его */  
if(window.opener) window.opener.location.reload();



Округление до N знаков после запятой

Для округления в Javascript вещественного числа до N знаков после запятой воспользуемся методом toFixed объекта Number:

(3.2489).toFixed(2); //3.24 
Math.PI.toFixed(4); //3.1416 - число π с 4 знаками после запятой

Метод toFixed возвращает число в виде строки с заданным числом цифр после запятой.

html форум