javascript - это язык, дополняющий возможности языка HTML. С его помощью можно создавать анимационные страницы, которые будут реагировать на действия пользователя(можно ловить координаты курсора мыши, узнавать время и т.д.), влиять на работу броузера(например добавлять/убирать компонентов окна броузера, выдавать сообщения в новом окне и др.). Такие скрипты работают за счет компьютера, на котором их выполняют и могут существенно понизить быстродействие слабых машин. В настройках броузера можно отключить поддержку javascript, а старые версии броузеров могут его поддерживать, однако большая часть пользователей поддержку не выключают.
Примеры использования javascript:
1. Переадресация на другую страницу
Скрипт срабатывает автоматически и не спрашивает разрешения у пользователя.
Замените адрес http://bns-od.com на адрес страницы, куда необходимо сделать переадресацию.
<script language="javascript">window.location.href = "http://bns-od.com"</script>
2. HTML переадресация на другую страницу
Данный пример не является примером java скрипта, тем не менее мы решили опубликовать его в этом разделе, как альтернативу редиректа с помошью javascript-а.
Замените адрес http://bns-od.com на адрес страницы, куда необходимо сделать переадресацию.
<HTML><HEAD><META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://bns-od.com"></HEAD><BODY></BODY></HTML>
3. Бегущая строка
Скрипт на javascript, реализующий бегущую строку в статусной строке браузера.
Пример скрипта "Бегущая строка":
<html>
<head>
<SCRIPT LANGUAGE="javascript">
var scrollCounter = 0;
var scrollText = "IT-студия SoftTime приветствует вас!!!";
var scrollDelay = 70;
var i = 0;
while (i ++ < 140)
{
scrollText = " " + scrollText;
}
function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
{
scrollCounter = 0;
}
setTimeout("Scroller()", scrollDelay);
}
Scroller();
</SCRIPT>
</head>
<body>
</body>
</html>
4. Скрипт «Добавить в избранное»
Пример реализации скрипта на javascript для добавления страницы в «Избранное».
Пример скрипта "Добавить в избранное":
<html>
<head>
<script language="javascript">
var bookmarkurl="http://bns-od.com/"
var bookmarktitle="IT-студия SoftTime"
function addbookmark()
{
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
if (document.all)
document.write('<a href="javascript:addbookmark()">
Нажмите на ссылку, чтобы добавить этот сайт в закладки')
</script>
</head>
<body>
</body>
</html>
Скрипт на javascript, меняющий цвет фона браузера. Цвет фона выбирается из выпадающего списка и меняется автоматически по событию изменения значения выбранного элемента в выпадающем списке.
Пример скрипта "Смена цвета фона":
<html>
<head>
</head>
<body>
<FORM>
<SELECT onchange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="red"> красный
<OPTION VALUE="2E8B57"> морской волны
<OPTION VALUE="87CEEB"> голубой
<OPTION VALUE="brown"> коричневый
<OPTION VALUE="yellow"> желтый
<OPTION VALUE="blue"> синий
<OPTION VALUE="FFFFFF" SELECTED> белый
</SELECT>
</FORM>
</body>
</html>
6. Метод «Drag and Drop»Скрипт передвижения изображений в окне браузера с помошью мыши методом «Drag and Drop».
Изображение, которое вы будете двигать должно находится в той же папке, что и сама страничка со скриптом. В нашем примере изображение имеет имя - img.gif.
Пример скрипта «Drag and Drop»:
<html>
<head>
<!-- Приведенный ниже код заключается между тегами <head>...</head> -->
<script language="javascript">
flg = (document.all) ? 0 : 1;
var obj;
function mousedown(ev)
{
if (flg)
{
obj = document.layers[ev.target.name];
X=ev.x;
Y=ev.y;
return false;
}
else
{
obj = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function mousemove(ev)
{
if (obj)
{
if (flg)
{
obj.moveTo((ev.pageX-X), (ev.pageY-Y));
}
else
{
obj.pixelLeft = event.clientX-X + document.body.scrollLeft;
obj.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function mouseup()
{
obj = null;
}
if (flg)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
</script>
</head>
<body>
<-- В следующей строчке пропишите реальные пути, где находятся ваши картинки -->
<div id="a" style="position:absolute;left:90;top:100;">
<img src="img.gif" name="a">
</div>
<div id="b" style="position:absolute;left:90;top:150;">
<img src="img.gif" name="b">
</div>
<div id="c" style="position:absolute;left:150;top:100;">
<img src="img.gif" name="c">
</div>
<div id="d" style="position:absolute;left:150;top:150;">
<img src="img.gif" name="d">
</div>
</body>
</html>
Пример скрипта "Движение текста по контуру". Такого рода скрипты удобно реализовывать при помощи таймеров, которые автоматически отключаются после выполнения задачи.
Пример скрипта "Движение текста по контуру":
Движение текста по контуру квадрата размером в 100 пиеселей.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<script type="text/javascript">
var id = setInterval(function(){
// Работа таймера
var idt = document.getElementById('timer');
idt.innerHTML = parseInt(idt.innerHTML) + 1;
// Текст который движется
var txt = document.getElementById('txt');
// Размер квадрата
var ids = document.getElementById('id_size');
var size = parseInt(ids.innerHTML);
// Координаты
var idx = document.getElementById('id_x');
var x = parseInt(idx.innerHTML);
var idy = document.getElementById('id_y');
var y = parseInt(idy.innerHTML);
// Достигнут ли правый нижний угол
var idl = document.getElementById('id_lr');
var lr = parseInt(idl.innerHTML);
if(x >= size && y >= size)
{
// Достигнут правый нижний угол
idl.innerHTML = 1;
lr = 1;
}
// Идем вправо
if(lr == 0)
{
if(x < size)
{
idx.innerHTML = x + 1;
txt.style.paddingLeft = x;
}
// Идем вниз
else if(y < size)
{
idy.innerHTML = y + 1;
txt.style.paddingTop = y;
}
}
else
{
// Идем влево
if(y > 0 && x > 0)
{
idx.innerHTML = x - 1;
txt.style.paddingLeft = x;
}
// Идем вверх
else if(y > 0)
{
idy.innerHTML = y - 1;
txt.style.paddingTop = y;
}
else
{
// Мы достигли начальной точки
// отключаем таймер
clearInterval(id);
}
}
}, 20);
</script>
<div>size = <span id='id_size'>100</span>,
x = <span id='id_x'>0</span>,
y = <span id='id_y'>0</span>,
lr = <span id='id_lr'>0</span>,
timer = <span id='timer'>0</span></div>
<div id='txt'>Заданный текст</div>
</body>
</html>
Скрипт "Включены ли cookie?" позволяет проверить, включены ли cookie в браузере пользователя. Для такой проверки средствами PHP можно воспользоваться скриптом по ссылке http://softtime.ru/scripts/checkcookie.php.
Пример скрипта "Включены ли cookie?":
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
function loadpage()
{
var obj = document.getElementById ("id_cookie");
if(obj)
{
// Устанавливаем cookie
setcookie("ckeck_cookie", 1);
// Извлекаем cookie
var cookie = getcookie("ckeck_cookie");
if(cookie != "1")
{
obj.innerHTML = "У вас отключены cookie, ряд возможностей сайта вам будут не доступны";
}
else
{
obj.innerHTML = "У вас включены cookie, все в порядке";
}
}
}
// Устанавливаем cookie
function setcookie(name, val)
{
var putdate = new Date();
// Устанавливаем cookie на год
putdate.setTime(putdate.getTime() + (86400 * 365));
document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() + "; path=/";
}
// Извлекаем cookie
function getcookie(name)
{
var re = new RegExp(name + "=([\d])", "i");
arr = re.exec(document.cookie);
return arr[1];
}
</script>
</head>
<body onload="loadpage()">
<div id="id_cookie"></div>
</body>
</html>
Результаты работы такого скрипта не могут быть использованы за пределами компьютера, на котором он выполняется.
