Объектно-ориентированная модель документа JavaScript
Основные объекты браузера и их свойства и методы
имя_перемен_окна=window.open( [имя_файла] , [имя_ссылки_окна] , [параметры] )
<SCRIPT>
msgWindow=window.open("","displayWindow","toolbar=no,scrollbars=yes")
msgWindow.document.open();
msgWindow.document.write(“<html><body>Динамическая страница</body>”)
msgWindow.document.write(“</html>”)
msgWindow.document.close();
msgWindow.document.bgColor="#AAAAAA";
</SCRIPT>
window.document.location.href=”http://www.google.com”;
window.document.location.href= window.history.previous;
window.go(-1);
Основные объекты JavaScript и их свойства и методы
Объект Array
имя_массива = new Array([элемент0, элемент1, . . ., элементы]);
имя_массива = new Array([длина_массива]);
var arr=new Array(“1”, “2”, “3”, “4”)
for (i=0;i<arr.length; i++) alert(arr[i])
var arr=new Array(“a”, “b”, “c”, “d”)
arr3 = arr.Concat(arr2);
str=arr3.join(‘#’);
arr3.sort();
Объект Date
Xmas = new Date(2009, 1, 7)
Xmas = new Date (2009, 1, 7, 12, 0, 0)
// Прибавить к текущей дате 1 час
Xmas=new Date(2009, 1, 7)
Xmas.setHours(Xmas.getHours()+1)
Объект Math
var b=2;
var a=Math.exp(b);
alert(a);
Объект String
var g=new String(“Строка”);
g=“Строка”;
var d=g.substring(2,4); // Результат "тро"
var г=g.toUpperCase(); // Результат "СТРОКА"
Основные свойства dhtml
className
<style>
a.warning
{ text-decoration: none; }
a.warning:hover
{ color:#878187; }
</style>
<A id=”aaa” HREF="warning.htm" CLASS="warning"> the warning </A>
Document.getElementById(“aaa”).className=”warning”;
filters
<IMG ID="logo" SRC="images/logo.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" > logo.filters.item(0).Apply() logo.style.visibility="" logo.filters.item(0).Play()
id
Document.getElementsByTagName(“td”).id=”aaa”
…
Document.getElementById(“aaa”).className=”warning”;
innerHTML
Var menu1 = ‘<A HREF="warning.htm" CLASS="warning"> Меню 1 </A>'
Function menu()
{
Document.getElementById(“menu”). innerHTML=menu1;
}
….
<p onClick=’menu()’>
</p>
<div id=’menu’>
</div>
Пример меню на JavaScript
<script type="text/javascript">
// Признак наведения на любое из полей
var naved=false;
function buildsubmenus(menuids)
{
for (var i=0; i<menuids.length; i++)
{
var litags=document.getElementById(menuids[i]).getElementsByTagName("li");
for (var t=0; t<litags.length; t++)
{
litags[t].onmouseover=function()
{
event.cancelBubble=true;
// Закрыть все меню текущего и вложенных уровней
sub=this.parentNode.getElementsByTagName("ul");
for (i=0;i<sub.length;i++)
{
sub[i].style.display="none";
sub[i].style.visibility="hidden";
}
// Открыть текущее меню
sub=this.getElementsByTagName("ul");
if (sub.length!=0)
{
sub[0].style.display="block";
sub[0].style.visibility="visible";
}
this.style.backgroundPosition="bottom right";
// Установить признак наведения
naved=true;
// Запустить таймер очистки меню
clear();
}
litags[t].onmouseout=function()
{
// Установить признак наведения
naved=false;
this.style.backgroundPosition="top right";
}
}
}
}
function clear()
{
// Гасит меню, если курсор мыши
// не наведен ни на один из его пунктов
if (naved==true)
setTimeout("clear()",1000);
else
{
var ultags=document.getElementById("menu").getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++)
{
ultags[t].style.display="none";
ultags[t].style.visibility="hidden";
}
}
}
function buildmenus()
{
var menu=document.getElementById("menu");
var tdtags=menu.getElementsByTagName("td");
var menuids=Array();
countsubmenus=0;
for (var i=0; i<tdtags.length; i++)
{
ultags=tdtags[i].getElementsByTagName("ul");
// Если есть подменю
if (ultags.length!=0)
{
menuids[countsubmenus]="submenu"+countsubmenus;
ultags[0].id="submenu"+countsubmenus;
countsubmenus++;
}
// Обработчик наведения
tdtags[i].onmouseover=function()
{
// Закрыть все меню текущего и вложенных уровней
sub=this.parentNode.getElementsByTagName("ul");
for (i=0;i<sub.length;i++)
{
sub[i].style.display="none";
sub[i].style.visibility="hidden";
}
// Открыть текущее меню
sub=this.getElementsByTagName("ul");
if (sub.length!=0)
{
sub[0].style.display="block";
sub[0].style.visibility="visible";
}
// Установить признак наведения
naved=true;
this.style.backgroundPosition="bottom right";
// Запустить таймер очистки меню
clear();
}
tdtags[i].onmouseout=function()
{
// Установить признак наведения
naved=false;
this.style.backgroundPosition="top right";
}
}
buildsubmenus(menuids);
menu.style.display="";
}
if (window.addEventListener)
window.addEventListener("load", buildmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildmenus)
</script>