Форма:

<form onsubmit="return checkForm(this);">
<input type="hidden" />
Имя: <input type="text" name="name" /><br/>
E-mail: <input type="text" name="email" /><br/>
<br/>
Интересы:<br/>
<input type="checkbox" name="inter[]" value="music" /> Music<br/>
<input type="checkbox" name="inter[]" value="TV" /> TV<br/>
<br/>
Возраст:<br/>
<input type="checkbox" name="age" value="10-25″ /> 10-25<br/>
<input type="checkbox" name="age" value="25-50″ /> 25-50<br/>
<input type="checkbox" name="age" value="50+" /> 50+<br/>
<br/>
Любимое время суток: <br/>
<select>
<option value="0″ selected="1″>Выберите…</option>
<option value="1″>Утро</option>
<option value="2″>День</option>
<option value="3″>Вечер</option>
<option value="4″>Ночь</option>
</select><br/>
<br/>
Комментарий:<br/>
<textarea></textarea><br/>
<br/>
Прикрепить файл:<br/>
<input type="file" name="name" /><br/>
<br/>
<input type="submit" value="Отправить" />
</form>

В форму вошло максималное число разнообразных полей.
Теперь код JavaScript-функции:

function checkForm(form) {
// Заранее объявим необходимые переменные
var el, // Сам элемент
elName, // Имя элемента формы
value, // Значение
type; // Атрибут type для input-ов
// Массив списка ошибок, по дефолту пустой
var errorList = [];
// Хэш с текстом ошибок (ключ – ID ошибки)
var errorText = {
1 : "Не заполнено поле ‘Имя’",
2 : "Не заполнено поле ‘E-mail’",
3 : "Не прикреплен файл",
4 : "Не оставлен комментарий",
5 : "Не выбрано любимое время суток"
}
// Получаем семейство всех элементов формы
// Проходимся по ним в цикле
for (var i = 0; i < form.elements.length; i++) {
el = form.elements[i];
elName = el.nodeName.toLowerCase();
value = el.value;
if (elName == "input") { // INPUT
// Определяем тип input-а
type = el.type.toLowerCase();
// Разбираем все инпуты по типам и обрабатываем содержимое
switch (type) {
case "text" :
if (el.name == "name" && value == "") errorList.push(1);
if (el.name == "email" && value == "") errorList.push(2);
break;
case "file" :
if (value == "") errorList.push(3);
break;
case "checkbox" :
// Ничего не делаем, хотя можем
break;
case "radio" :
// Ничего не делаем, хотя можем
break;
default :
// Сюда попадают input-ы, которые не требуют обработки
// type = hidden, submit, button, image
break;
}
} else if (elName == "textarea") { // TEXTAREA
if (value == "") errorList.push(4);
} else if (elName == "select") { // SELECT
if (value == 0) errorList.push(5);
} else {
// Обнаружен неизвестный элемент
}
}
// Финальная стадия
// Если массив ошибок пуст – возвращаем true
if (!errorList.length) return true;
// Если есть ошибки – формируем сообщение, выовдим alert
// и возвращаем false
var errorMsg = "При заполнении формы допущены следующие ошибки:\n\n";
for (i = 0; i < errorList.length; i++) {
errorMsg += errorText[errorList[i]] + "\n";
}
alert(errorMsg);
return false;
}

Как видно из скрипта, он не подходит для всех случаев, а по-другому и быть не может. Требования к проверке каждой формы индивидуальны. Однако, незначительная модификация условий в этой функции позволит проверить передаваемые данные из любой формы.

Ниже представлен HTML код самой формы:

<form onsubmit="return checkmail(this.email.value)" action="#" method="post">
<input id="email" name="email" />
<input type="submit" value="Отправить" />
</form>

И код функции на JavaScript, которая и проверяет email.

<script language="javascript" type="text/javascript">
function checkmail(value) {
reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if (!value.match(reg)) {alert("Пожалуйста, введите свой настоящий e-mail");
document.getElementById(‘email’).value=""; return false; }
}
</script>

Впринципе если не хотите вникать в суть дела, можете просто скопирвать код, всё будет работать

Аргументы
func|code

Функция или строка кода для выполнения
delay
Задержка в миллисекундах, т.е 1000 это 1 секунда

Описание, примеры

Этот метод выполняет код(или функцию), указанный в первом аргументе, асинхронно, с задержкой в delay миллисекунд.

В отличие от метода setInterval, setTimeout выполняет код только один раз.

В каком виде указывать первый параметр – в виде строки кода или функции – разницы нет.

Следующие два вызова работают одинаково:

1    // первый аргумент – строка
2    setTimeout(‘alert("прошла секунда")’, 1000)

1    // первый аргумент – функция
2    function second_passed() {
3    alert("прошла секунда")
4    }
5    setTimeout(second_passed, 1000)

При указании строки кода – интерпретатор динамически создает анонимную функцию с телом из данной строки. Но более правильным считается объявление функции в явном виде, например так:

1    setTimeout(function() { alert(‘0.5 секунды’) }, 500)

Вызов со строкой существует для совместимости с прежними версиями javascript.
Контекст выполнения, this

Функция выполняется в другом контексте, отличном от контекста, в котором задается setTimeout.

При этом значение this = window, поэтому о передаче правильного this надо позаботиться отдельно.
Пример: Без передачи this

1    object = {
2    func: function() { alert(this) }
3    }
4
5    setTimeout( object.func , 1000) // this будет равно window
Пример: Передача this через call

1    object = {
2    func: function() { alert(this) }
3    }
4
5    // правильный вариант с передачей this
6    setTimeout( function() { object.func.call(object) } , 1000)

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

1    …
2    var self = this // промежуточная перменная
3    function fun() {
4    alert(self)
5    }
6    setTimeout(fun, 1000)

Отмена выполнения

Вы можете отменить выполнение setTimeout при помощи clearTimeout, используя для этого идентификатор таймаута.
var timeout_id = setTimeout(…)
clearTimeout(timeout_id)

01    <input type="button" onclick="on()" value="Запустить таймаут"/>
02    <input type="button" onclick="off()" value="Остановить отсчет"/>
03    <script>
04    function go() { alert(‘Я сработало’) }
05
06    function on() {
07    timeoutId = setTimeout(go, 3000)
08    }
09
10    function off() {
11    clearTimeout(timeoutId)
12    }
13    </script>

Для решения поставленной задачи необходимо иметь понятие о том как воздействовать на элемент SELECT из javascript скрипта.

Пусть у нас на странице есть элемент:

<FORM name="myForm">

  <select id="mySelectId" name="mySelect">
    <option value="str0"> Строка списка 0 </option>
    <option value="str1"> Строка списка 1 </option>
    <option value="str2"> Строка списка 2 </option>
  </select>

</FORM>

Как видно, SELECT состоит из элементов OPTION, которые представляют собой элементы списка. Сами элементы OPTION состоят из текстовой метки заключенной между тегами option и атрибута value в котором содержится значение соответствующее текстовой метке. Текстовая метка видна пользователю в списке, тогда как значение value не отображается на экране, а передается на сервер при отправке формы (на сервер передаются только значения выделенных элементов списка). Таким образом, для изменения элемента SELECT, мы должны воздействовать на элементы OPTION.

Для обращения к нашему элементу списка будем использовать DOM метод getElementById объекта document:

var objSel = document.getElementById("mySelectId");

Если список находится внутри формы, то к нему можно обратиться и через форму:

var objSel = document.myForm.mySelect;

Где, myForm имя формы заданное через атрибут name в теге FORM, а mySelect имя элемента формы, заданное через атрибут name в теге SELECT.

Как добавить новый элемент в список SELECT ?

Все HTML элементы OPTION доступны в javascript-скрипте через свойство options объекта Select, которое является коллекцией элементов (упрощенно говоря массивом) элементов Option.

var objSel = document.getElementById("mySelect");

//Создаем новый объект Option и заносим его в коллекцию options
objSel.options[0] = new Option("Строка списка 0", "str0");
objSel.options[1] = new Option("Строка списка 1", "str1");
objSel.options[2] = new Option("Строка списка 2", "str2");

Добавлять элементы в конец списка удобно так:

objSel.options[objSel.options.length] = new Option("текст", "значение");

Свойство length объекта options содержит количество элементов в списке. Данное свойство доступно как для чтения, так и для записи. Если установить свойству length значение больше чем текущее количество элементов, то в список будут добавлены пустые элементы. Если же установленное значение меньше текущего количества элементов списка, то список будет усечен до указанного количества элементов (лишние элементы будут удалены). Таким образом, добавить новый элемент в список можно и так (допустим у нас есть пустой список, добавим первый элемент):

objSel.options.length=1; //добавляем в конец списка пустой элемент
objSel.options[0].text = "Строка списка 0";
objSel.options[0].value = "str0";

Вернемся к функции-конструктору Option(). Помимо указания текста и значения можно указать является ли элемент выделенным по умолчанию (defaultSelected), т.е. будет ли элемент выделенным при сбросе формы методом reset() и является ли элемент выделенным в данный момент (selected). Полный синтаксис функции конструктора объекта Option имеет следующий вид:

var newOpt = new Option("text", "value", isDefaultSelected, isSelected);

Где, первые два аргумента – это строки, а третий и червертый булевы аргументы и принимают значения true или false.

До сих пор для добавления элемента мы использовали BOM, однако лучше, во всех отношениях, использовать методы DOM, и реализовывать добавление элемента так:

function addOption (oListbox, text, value, isDefaultSelected, isSelected)
{
  var oOption = document.createElement("option");
  oOption.appendChild(document.createTextNode(text));
  oOption.setAttribute("value", value);

  if (isDefaultSelected) oOption.defaultSelected = true;
  else if (isSelected) oOption.selected = true;

  oListbox.appendChild(oOption);
}

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

var objSel = document.getElementById("mySelect");
addOption(objSel, "текст", "значение", true);

И на последок о некоторых особенностях IE В IE 5+ исключена (ввиду нестабильной работы) возможность добавления элемента списка через new Option(), когда сам список SELECT находится в одном документе (окне, фрейме), а элементы добавляются из другого документа (окна, фрейма), например, если SELECT в родительском окне, а добавить элементы нужно из дочернего окна, открытого через window.open(). Используя DOM-методы вы сможете обойти данную проблему.

Доступ к элементам списка

var text  = objSel.options[2].text;
var value = objSel.options[2].value;

Элементы списка в массиве options индексируются с нуля, поэтому первый элемент списка имеет индекс 0:

objSel.options[0] – первый элемент списка.
objSel.options[objSel.options.length-1] – последний элемент списка

Изменение элемента списка

objSel.options[1].text = "Новый текст";
objSel.options[1].value = "новое значение";

objSel.options[2] = new Option("Новый текст", "новое значение");//полная замена элемента на новый

Как узнать какой элемент выбран и как выбрать нужный элемент?

У объекта элемента SELECT существует свойство selectedIndex, которое содержит индекс выделенного элемента, или -1 если нет выделенных элементов.

if ( objSel.selectedIndex != -1)
{
  //Если есть выбранный элемент, отобразить его значение (свойство value)
  alert(objSel.options[objSel.selectedIndex].value);
}

Здесь хочу заметить, что возможен выбор нескольких значений в списке, для этого нужно указать свойство multiple в теге SELECT и указать количество видимых без прокрутки списка элементов через атрибут size (т.е. установить высоту списка измеряемую в видимых элементах), например, разметка <select size="3″ multiple>…</select> создаст список высотой в 3 элемента, в котором разрешено выбирать несколько элементов сразу. Если вы указываете size больше 1, то список перестает быть выпадающим, а изменяет вид на обычный блок с полосой прокрутки (она доступка при необходимоти). Свойство size можно указывать и без multiple.

В случае когда доступен множественный выбор элементов, данное свойство содержит индекс первого выделенного в списке элемента (т.е. того элемента который в списке находиться выше). Чтобы в данном случае найти все выделенные элементы нужно перебрать в цикле все элементы массива options и проверить их свойство selected, которое равно true у выделенных элементов:

function getSelectedIndexes (oListbox)
{
  var arrIndexes = new Array;
  for (var i=0; i < oListbox.options.length; i++)
  {
      if (oListbox.options[i].selected) arrIndexes.push(i);
  }
  return arrIndexes;
};

Функция getSelectedIndexes принимает в качестве аргумента объект списка и возвращает массив индексов выделенных элементов.

Пример использования (отображение индексов выделеных элементов):

var objSel = document.getElementById("mySelect");

alert ( getSelectedIndexes(objSel) );

Описанные свойства selectedIndex и selected являются свойствами как для чтения так и для записи, поэтому присваивая им значения можно выделять нужные элементы.

//выбрать (выделить) второй элемент списка
objSel.selectedIndex = 1;
//или так
objSel.options[1].selected=true;

Для выбора нескольких элементов (при установленном свойстве multiple) нужно установить свойство selected=true для всех нужных элементов:

//выбрать (выделить) 1 и 3 элементы списка
objSel.options[0].selected=true;
objSel.options[2].selected=true;

Следует обратить внимание на баг в браузере Opera, проявляющийся при динамическом заполнении списка через скрипт и последующей установке выделенного пункта через свойство selectedIndex или selected. Баг проявляется в добавлении пустых элементов в список, доступ к которым из скрипта не возможен (скрипт их не видит, зато пользователь видит и может их выбрать). Эти пустые лже-элементы списка появляются после установки свойства selectedIndex или selected. Для обхода этой ошибки в Opera используйте установку этих свойств через setTimeout с задержкой в 1мс:

var objSel = document.getElementById("mySelect");

//Динамически создаем элементы списка
objSel.options[0] = new Option("Строка списка 0", "str0");
objSel.options[1] = new Option("Строка списка 1", "str1");

//Выделяем второй элемент списка
setTimeout( function(){objSel.options[1].selected=true;}, 1 );

Удаление i-го элемента списка

objSel.options[1] = null; //удалить элемент списка с индексом 1 (второй элемент списка)

Или используя DOM метод remove:

oListbox.remove(0); //удалить первый элемент списка

Как очистить список SELECT (как удалить все элементы списка)?

Для этого можно установить свойство length в ноль:

objSel.options.length = 0;

Либо вызвать DOM метод remove для каждого элемента списка:

function clearSelect(oListbox)
{
  for (var i=oListbox.options.length-1; i >= 0; i--)
  {
      oListbox.remove(i);
  }
};

Как сдвинуть элемент списка вверх или вниз

function shiftUpOption (oListbox, iIndex)
{
  if (iIndex > 0)
  {
    var oOption = oListbox.options[iIndex];
    var oPrevOption = oListbox.options[iIndex-1];
    oListbox.insertBefore(oOption, oPrevOption);
  }
};

function shiftDownOption (oListbox, iIndex)
{
  if (iIndex < oListbox.options.length - 1)
  {
    var oOption = oListbox.options[iIndex];
    var oNextOption = oListbox.options[iIndex+1];
    oListbox.insertBefore(oNextOption, oOption);
  }
};

Примеры:

var objSel = document.getElementById("mySelect");
shiftDownOption (objSel, 1); //переместить второй элемент списка (с индектом 1) на первую позицию (с индексом 0)

Динамические связанные списки Select – взгляд изнутри

Ну что же, теперь вы знаете достаточно, чтобы выполнить практически любую задачу связанную с элементом SELECT и Javascript, а так же понять пример реализации задачи, поставленной в самом начале статьи. Как это выглядит изнутри смотрите…

<html>
  <head>
  <title>Связанные селекты</title>

  <!-- Подключаем javascript-библиотеку функций -->
  <script type="text/javascript" src="linkedselect.js"></script>
</head>

<body>

<!-- Первый (главный) список (изначально заполнен вручную) -->
  <select size="4" id="List1">
    <option value="ie"> Internet Explorer </option>
    <option value="safari"> Safari </option>
  </select>

<!-- Подчиненный список 1 (изначально пуст) -->
  <select size="4" id="List2"></select>

<!-- Подчиненный список 2 (изначально пуст) -->
  <select size="4" id="List3"></select>

<script type="text/javascript">
// Создаем новый объект связанных списков
var syncList1 = new syncList;

// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {

/* Определяем элементы второго списка в зависимости
от выбранного значения в первом списке */

  'ie':{
      'ie_win':'Windows',
      'ie_mac':'Mac'
  },

  'safari':{
      'safari_mac':'Mac'
  },

/* Определяем элементы третьего списка в зависимости
от выбранного значения во втором списке */

  'ie_win':{
      'ie_win_5':'версия 5',
      'ie_win_6':'версия 6'
  },

  'ie_mac':{
      'ie_mac_5':'версия 5'
  },

  'safari_mac':{
      'safari_mac_1':'версия 1',
      'safari_mac_2':'версия 2'
  }
};

// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3");
</script>

</body>
</html>

Давайте разберем страницу. Первым делом в разделе head подключаем библиотеку linkedselect.js, которая определяет класс объектов syncList и собственно выполняет синхронизацию. Далее в теле документа (внутри тэга body) определяем HTML списки SELECT. Причем первый список (List1) уже содержит нужные значения (тэги option) , а два других (List2, List3), которые должны заполняться динамически, изначально пусты. Затем создаем объект связанного списка: var syncList1 = new syncList, и заполняем его свойство syncList1.dataList данными для пустых списков List2 и List3 (надеюсь, что разукрашенный код и комментарии позволят понять, как dataList-объект формируется). Ну и последний шаг, это запуск синхронизации – вызов метода syncList1.sync(). Данный метод принимает в качестве аргументов id селектов, которые нужно синхронизировать между собой, их может быть 2 и более (в нашем случае 3). Имейте в виду, что порядок следования аргументов важен и определяет подчиненность селектов (главный вначале, подчиненные за ним). Так же замечу, что создавать объект syncList и заполнять его данными можно и до определения самих селектов тэгами HTML (например, в разделе head документа), главное чтобы селекты уже были в документе на момент вызова метода syncList.sync().

P.S.: Не забудьте скачать и сохранить у себя библиотеку linkedselect.js

onload = function() {
document.onclick = function(e) {
if(!e) e = event;
alert([e.clientX, e.clientY]);
}
}

<script language="JavaScript">
var Netscape=(navigator.appName.indexOf("Netscape") != -1);
function Move(e) {
if (!document.getElementById) return;
obj=document.getElementById("mouse");
if (Netscape)
event=e;
if (event.pageX) { // Netscape…
xpointer=event.pageX;
ypointer=event.pageY;
}
else if (event.x) { // Internet Explorer…
xpointer=event.x;
ypointer=event.y;
}
obj.style.left=xpointer – 55;
obj.style.top=ypointer – 55;
}
function Setup() {
if (!document.getElementById) return;
if (Netscape)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=Move;
}
</script>

<body onLoad="Setup();" style="cursor:crosshair">
<div ID="mouse" style="position:absolute; left:50; top:50;">
<img src="yourimage.gif" width="50″ height="50″ alt="" border="0″>
</div>
</body>

Поэтому для создания программ на JavaScript не требуется никаких дополнительных средств , необходим лишь браузер, поддерживающий JavaScript (Браузеры Netscape Navigator 2.0 и выше или Microsoft Internet Explorer) и редактор для создания HTML документов.

Каждая вставка в JavaScript в HTML – документе начинается командой <SCRIPT> с необязательным параметром LANGUAGE и заканчивается командой </SCRIPT>
Например, следующий фрагмент:

<SCRIPT LANGUAGE="JavaScript">
document.write("Наш первый пример на JavaScript");
</SCRIPT>

Выводит на зкран строку:

Наш первый пример на JavaScript 

Скачать

Также там можно скачать разнообразные картинки для симпатичного оформления. После того как скачали, нужно:

1. Подключить lightbox.js к вашему сайту

<script type="text/javascript" src="lightbox.js"></script>

2. Добавить аттрибут rel="lightbox" ко всем ссылкам, где вы хотите использовать лайтбокс. Например:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Чтобы показывался заголовок можно использовать аттрибут title.

Также можно поменять цвета и вообще вывод:

1. Вот пример css:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

2. Чтобы использовать эффект затемнения, необходим полупрозрачный PNG файл, а также немного CSS:

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

3. Для того, чтобы показать пользователю ползунок загрузки, в самом верху lightbox.js поменяйте путь до картинки с ползунком.

var loadingImage = ‘loading.gif’;

4. Аналогично с кнопкой закрыть, путь до него меняется там же.

var closeButton = ‘close.gif’;

Ниже пример, а так же пример "мигающего скролл бара" – для тех кто соскучился по 90-ым

document.body.style.scrollbarFaceColor="colorname"
document.body.style.scrollbarArrowColor="colorname"
document.body.style.scrollbarTrackColor="colorname"
document.body.style.scrollbarShadowColor="colorname"
document.body.style.scrollbarHighlightColor="colorname"
document.body.style.scrollbar3dlightColor="colorname"
document.body.style.scrollbarDarkshadowColor="colorname"

Мигающий скролл бар, меняет цвета каждую секунду

<script>

function blinkscroll(){
if (mode==0)
document.body.style.scrollbarFaceColor="blue"
else
document.body.style.scrollbarFaceColor="green"
mode=(mode==0)? 1 : 0
}
setInterval("blinkscroll()",1000)
</script>