От переводчика

От Переводчика и составителя

« W3Schools Home Следующая Глава »

Среди многочисленных Online электронных учебников по Web-разработкам, размещенных в Интернете, особое место, по моему мнению, занимают учебники, опубликованные на сайте www.w3schools.com.

Эти учебники особенно хороши для начинающих Web-разработчиков ("чайников").

Основные достоинства этих Учебников:

  • Легко воспринимаемый, лаконичный контент
  • Каждый учебник содержит около 100 примеров, содержание которых обучаемый может редактировать и тотчас видеть результат
  • Обучение построено по принципу: учитесь на примерах
  • Учебники содержат тестирующие модули, позволяющие обучаемым производить самоконтроль знаний
  • Каждый учебник содержит Справочник, позволяющий получить полную информацию по изучаемой теме

Недостатки этих Учебников:

  • Весь их контент (содержание) на английском языке
  • Обучение возможно только в режиме Online
Переводчик и составитель этого учебника:
Джерихов Вадим Вадимович,
доцент кафедры Информационных систем и технологий
Санкт-Петербургского государственного лесотехнического университета имени С.М. Кирова (СПБГЛТУ).

Что сделано:

  • Основной контент учебника переведен с английского языка на русский
  • Основной контент учебника скомпилирован в формате *.chm, с возможностью обучения в режиме Offline

Любые замечания по переводу будут с благодарностью приняты!

E-mail: vadvadd@mail.ru


JS Начало (HOME)

JavaScript Учебник (Tutorial)

« W3Schools Home Следующая Глава »

JavaScript

JavaScript это язык сценариев в Веб.

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

JavaScript прост в изучении. Вы получите удовольствие.

Начнем изучать JavaScript!

Примеры в каждой главе

Это Учебник JavaScript содержит более 200 примеров.

Используя встроенный редактор, вы можете изменить JavaScript-код любого примера и,
щелкнув сылку Попробуйте сами », просмотреть результат.

Пример

<html>
<body>

<script type="text/javascript">
document.write("Это мой первый JavaScript!");
</script>

</body>
</html>

Попробуйте сами »

Щелкните на ссылке, чтобы увидеть как она работает.

Примеры JavaScript

Учитесь на 200 примерах!

Используя встроенный редактор, вы можете изменить JavaScript-код любого примера и просмотреть результат.

  • JavaScript Примеры (Examples)
  • JavaScript Примеры Объектов (Objects Examples)
  • JavaScript Примеры Объектов Браузера (HTML DOM Examples)
  • JavaScript Примеры HTML DOM (HTML DOM Examples)

Тест по JavaScript

Проверьте ваши знания JavaScript в среде W3Schools!

Запуск JS Проверка знаний (Quiz)!

Справочники по JavaScript

На W3Schools вы найдете полный справочник по всем объектам JavaScript, объектам Браузера и объектам HTML DOM. Справочник содержит много примеров!

  • JavaScript Встроенные объекты (JavaScript Built-in objects)
  • Объекты браузера (Browser objects)
  • HTML DOM объекты
    • (HTML DOM objects)


JS Введение (Introduction)

JavaScript Введение (Introduction)

« Предыдущая Следующая Глава »

JavaScript является самым популярным языком сценариев в Интернет,
и работает во всех основных браузерах, таких как Internet Explorer, Firefox,
Chrome, Opera и Safari.

Что Вы уже должны знать

Прежде чем продолжить вы должны иметь базовые знания о следующем:

  • HTML / XHTML

Если вы хотите сначала изучать эти темы, найдите соответствующее руководство на нашей Home page.

Что такое JavaScript?

  • JavaScript был разработан для добавления интерактивности в HTML страницы
  • JavaScript это язык сценариев
  • Скриптовый язык представляет собой легкий язык программирования
  • JavaScript обычно встраивают непосредственно в страницы HTML
  • JavaScript является интерпретируемым языком (это значит, что скрипты выполняются без
    предварительная компиляция)
  • Каждый может использовать JavaScript без приобретения лицензии

Java и JavaScript это одно и тоже?

НЕТ!

Java и JavaScript это две совершенно разных языка как по концепции,
так и по дизайну!

Java (разработанный Sun Microsystems) является мощным и гораздо более сложным (чем JavaScript) языком программирования, той же категории, что C и C++.

Что может сделать JavaScript?

  • JavaScript дает HTML дизайнерам инструмент программирования - авторы HTML страниц, как правило, не программисты, но JavaScript это язык сценариев с очень простым синтаксисом! Почти каждый сможет поместить небольшие "лоскуты" JavaScript-кода в свои HTML страницы
  • JavaScript может поместить динамический текст в HTML страницу - JavaScript инструкция подобная этой: document.write("<h1>" + name + "</h1>") может записать изменяющийся текст в HTML страницу
  • JavaScript может реагировать на события - JavaScript может выполняться когда что-то происходит, например, когда завершена загрузка страницы, или когда пользователь щелкнет на HTML элементе
  • JavaScript может читать и писать элементы HTML - JavaScript может прочитать и изменить содержимое элемента HTML
  • JavaScript может быть использован для проверки данных - JavaScript может быть использована для проверки данных формы до их передачи на сервер. Это оберегает сервер от дополнительной обработки
  • JavaScript может быть использован для обнаружения посетителя браузера - JavaScript может быть использован для обнаружения посетителя браузера и - в зависимости от браузера - загрузки другой страницы, специально предназначенной для этого браузера
  • JavaScript может быть использован для создания cookies - JavaScript может быть использован для хранения и извлечения информации о посетителе компьютера

Настоящее имя - ECMAScript

JavaScript - официальное название ECMAScript.

ECMAScript разработан и поддерживается организацией ECMA.

ECMA-262 является официальным стандартом JavaScript.

Язык был изобретен Brendan Eich на Netscape (с Navigator 2.0) и появился во всех Netscape и Microsoft браузеров с 1996 года.

Развитие ECMA-262 началось в 1996 году, и первое издание было принято Генеральной Ассамблеей ECMA в июне 1997 года.

Этот стандарт был утвержден в качестве международного стандарта ISO (ISO / IEC 16262) в 1998 году.

Развитие стандарта все еще продолжается.


JS Как... (How To)

JavaScript Как... (How To)

« Предыдущая Следующая Глава »

HTML тег <script> используется для вставки JavaScript в HTML страницу.

Вставьте JavaScript в страницу HTML

В следующем примере показано, как использовать Javasript для вывода текста в HTML странице:

Пример

<html>
<body>
<script type="text/javascript">
document.write("Привет, Мир!");
</script>
</body>
</html>

Попробуйте сами »

В следующем примере показано, как добавить HTML теги в JavaScript:

Пример

<html>
<body>
<script type="text/javascript">
document.write("<h1>Привет, Мир!</h1>");
</script>
</body>
</html>

Попробуйте сами »

Объяснение примера

Чтобы вставить JavaScript в HTML-страницу, мы используем тег <script>. Внутри тега <script> мы используем атрибут type для определения языка сценариев.

Таким образом, <script type= "text/javascript"> и </script> сообщают где JavaScript начинается и заканчивается:

<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

Команда document.write является стандартной командой JavaScript для вывода на страницу.

Видя слова document.write между <script> и </script> тегами, браузер распознает их как команду и выполняет JavaScript код этой строки. В этом случае браузер выведет на страницу текст Привет, Мир!:

<html>
<body>
<script type="text/javascript">
document.write("Привет, Мир!");
</script>
</body>
</html>

Примечание: Если мы не введем <script> тег, то браузер будет рассматриваться команду document.write("Hello World!") как чистый текст и просто выведет всю строку на страницу. Попробуйте сами

Как тег <script> обрабатывается Браузерами

Браузеры, которые не поддерживают JavaScript, будет отображать JavaScript как содержание страницы.

Чтобы помешать им делать это и, как часть стандартного JavaScript, HTML теги комментарий должен быть использованы для "скрытия" JavaScript.

Просто добавьте тег HTML комментария <!-- перед первой инструкцией JavaScript и --> (конец комментария) после последней инструкции JavaScript следующим образом:

<html>
<body>
<script type="text/javascript">
<!--
document.write("Привет, Мир!");
//-->
</script>
</body>
</html>

Две косые черты в конце строки комментария (//) является символом JavaScript комментарий. Это предотвращает JavaScript от выполнения --> тега.


JS Куда... (Where To)

JavaScript Куда... (Where To)

« Предыдущая Следующая Глава »

Скрипты JavaScript могут быть помещены в раздел body и/или в раздел head HTML-страницы.

Куда поместить JavaScript

JavaScripts, расположенные внутри страницы, будут выполнены сразу при загрузке страницы в браузер. Это не всегда то, что мы хотим. Иногда мы хотим, выполнить скрипт при загрузке страницы, в другой раз, когда пользователь инициирует событие, например, щелчек по кнопке. В этом случае мы поместим скрипт внутри функции (function). Вы будите изучать функции в более поздней главе.

Скрипты в разделе <head>

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

Поместите свои функции в раздел head, тогда они все будут в одном месте
и не помешают контенту страницы.

Пример

<html>
<head>
<script type="text/javascript">
function message()
{
alert("Это окно alert было вызвано событием onload");
}
</script>
</head>

<body onload="message()">
</body>
</html>

Попробуйте сами »

Скрипты в разделе <body>

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

Пример

<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("Это сообщение написал JavaScript");
</script>
</body>

</html>

Попробуйте сами »

Скрипты в разделах <head> и <body>

Вы можете разместить неограниченное количество скриптов в вашем документе, причем они могут размещаться одновременно в обоих разделах head и body.

Пример

<html>
<head>
<script type="text/javascript">
function message()
{
alert("Это окно alert было вызвано по событию onload");
}
</script>
</head>

<body onload="message()">
<script type="text/javascript">
document.write("Это сообщение написал JavaScript");
</script>
</body>

</html>

Попробуйте сами »

Использование внешних JavaScript

Если вы хотите выполнить один и тот же JavaScript на нескольких страницах HTML без записи этого сценария на каждой странице, вы можете написать JavaScript во внешнем файле.

Сохраните внешний JavaScript файл с расширением *.JS.

Примечание: Внешний сценарий не может содержать <script> и </script> теги!

Для использования внешнего сценария, имя внешнего файла *.js указывают в атрибуте "scr" тега <script>:

Пример

<html>
<head>
<script type="text/javascript" src= "xxx.js"></script>
</head>
<body>
</body>
</html>

Попробуйте сами »

Примечание: Не забудьте разместить внешний JavaScript файл в той же папке, где будут размещены использующие его html-страницы!


JS Инструкции (Statements)

JavaScript Инструкции (Statements)

« Предыдущая Следующая Глава »

JavaScript представляет собой последовательность инструкций, которые будут выполняться в браузере.

JavaScript чувствителен к регистру

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

JavaScript Инструкции

Инструкция JavaScript является командой браузеру. Цель Инструкция - рассказать браузеру, что он должен сделать.

Эта Инструкция JavaScript дает браузеру команду вывести текст "Hello Dolly" на веб-страницу:

document.write("Hello Dolly");

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

Точка с запятой не является обязательной (в соответствии со стандартом JavaScript) и браузер ее предполагает при интерпретации конца строки как конец инструкции. Из-за этого вы часто будете видеть примеры инструкций без точки с запятой в конца.

Примечание: Использование точки с запятой дает возможность написания нескольких инструкций в одной строке.

JavaScript Код

JavaScript код (или просто JavaScript) представляет собой последовательность JavaScript инструкций.

Каждая инструкция выполняется браузером в последовательности ее записи.

Следующий пример будет выводить заголовок и два абзаца на HTML страницe:

Пример

<script type="text/javascript">
document.write("<h1>Это заголовок</h1>");
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
</script>

Попробуйте сами »

JavaScript Блоки

Инструкции JavaScript могут быть сгруппированы в блоки.

Блоки начинаются с левой фигурной скобки { и заканчиваются правой фигурной скобкой }.

Цель блока - сделать последовательность инструкций выполняемой вместе.

Следующий пример будет выводить заголовок и два абзаца на HTML страницe:

Пример

<script type="text/javascript">
{
document.write("<h1>Это заголовок</h1>");
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
}
</script>

Попробуйте сами »

Приведенный выше пример не очень полезен. Он просто демонстрирует использование блока. Обычно блок используется для группирования инструкций в функции или в условии (где группа инструкций должна быть выполнена, если соблюдается истинность условия).

Вы узнаете больше о функциях и условиях в последующих главах.


JS Комментарии (Comments)

JavaScript Комментарии (Comments)

« Предыдущая Следующая Глава »

JavaScript комментарии могут быть использованы, чтобы сделать код более читабельным.

JavaScript Комментарии

Комментарии могут быть добавлены чтобы пояснить JavaScript, либо сделать код более читабельным.

Однострочные комментарии начинаются с символов //.

В следующем примере используются однострочные комментарии для объяснения код:

Пример

<script type="text/javascript">
// Запись заголовка
document.write("<h1>Это заголовок</h1>");
// Запись двух абзацев:
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
</script>

Попробуйте сами »

JavaScript Многострочные Комментарии

Многострочные комментарии начинаются с /* и заканчиваются */.

В следующем примере используется многострочный комментарий для объяснения код:

Пример

<script type="text/javascript">
/*
Код ниже напишет
один заголовок и два абзаца
*/
document.write("<h1>Это заголовок</h1>");
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
</script>

Попробуйте сами »

Использование комментарий для предотвращения исполнения

В следующем примере комментарий используется для предотвращения исполнения однй строки кода (это может пригодиться, например, для отладки кода):

Пример

<script type="text/javascript">
//document.write("<h1>Это заголовок</h1>");
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
</script>

Попробуйте сами »

В следующем примере комментарий используется для предотвращения исполнения блока кода (это может пригодиться, например, для отладки кода):

Пример 4

<script type="text/javascript">
/*
document.write("<h1>Это заголовок</h1>");
document.write("<p>Это абзац.</p>");
document.write("<p>Это другой абзац.</p>");
*/
</script>

Попробуйте сами »

Использование комментарий в конце строки

В следующем примере комментарии находятся в конце строк кода:

Пример 5

<script type="text/javascript">
document.write("Hello"); // Напишет Hello
document.write(" Dolly!"); // Напишет Dolly!
</script>

Попробуйте сами »


JS Переменные (Variables)

JavaScript Переменные (Variables)

« Предыдущая Следующая Глава »

Переменные - "контейнеры" для хранения информации.

Помните ли Вы школьную алгебру?

Помните ли Вы школьную алгебру? x=5, y=6, z=x+y

Вы помните, что буква (например, x) может быть использована для хранения значения (например, 5), и что вы могли бы использовать указанную выше информацию для расчета стоимости z, которая будет равна будет 11?

Эти буквы называются переменными и переменные могут использоваться для хранения значения (x = 5) или значения выражения (z = x + y).

Переменные JavaScript

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

Переменная может иметь краткое имя, например, x или более содержательное имя, например, carname.

Правила для имен переменных JavaScript:

  • Имена переменных чувствительны к регистру (y и Y это две различные переменные)
  • Имена переменных должны начинаться с буквы или символа подчеркивания (_)

Примечание: Поскольку JavaScript чувствителен к регистру, то и имена переменных чувствительны к регистру.

Пример

Значение переменной может изменяться в ходе выполнения скрипта. Вы можете ссылаться на переменную по ее имени, чтобы вывести на экран или изменить ее значение.

Этот пример покажет вам, как это делается

Объявление (Создание) JavaScript переменных

Создание переменных в JavaScript наиболее часто называют "объявлением" переменных.

Вы можете объявить JavaScript переменные с помощью инструкции var:

var x;
var carname;

После объявления переменных, как было показано выше, переменные являются пустыми (они не имеют пока значений).

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

var x=5;
var carname="Volvo";

После выполнения этих инструкций, переменная x будет хранить значение 5, а переменная carname будет хранить значение Volvo.

Примечание: Когда Вы присваиваете переменной текстовое значение, заключайте значение в кавычки.

Присвоение значений необъявленным JavaScript переменным

Если присвоить значения переменным, которые еще не были объявлены, переменные будут автоматически объявлены.

Инструкции:

x=5;
carname="Volvo";

имеют тот же эффект, что и инструкции:

var x=5;
var carname="Volvo";

Переобъявления JavaScript переменных

Если вы переопределите переменную JavaScript, она не потеряет свое первоначальное значение.

var x=5;
var x;

После выполнения этих инструкций, переменная x будет по-прежнему имеют значение 5. Значение х не сбрасывается (не очищается), если ее переопределить.

Арифметика JavaScript

Как и в алгебре, вы можете выполнять арифметические операции с переменными JavaScript :

y=x-5;
z=y+5;

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


JS Операторы (Operators)

JavaScript Операторы (Operators)

« Предыдущая Следующая Глава »

= используется для присвоения значений.

+ используется для добавления значений.

Оператор присваивания = используется для присвоения значений переменным JavaScript.

Арифметический оператор + используется для добавления значений.

y=5;
z=2;
x=y+z;

Значение х, после исполнения этих инструкций будет равно 7.

Арифметические операторы JavaScript

Арифметические операторы используются для выполнения арифметических действий между переменными и / или значениями.

Учитывая, что у = 5, в таблице ниже объясняются арифметические операторы:

Оператор | Описание | Пример | Результат
+ | Сложение | x=y+2 | x=7
- | Вычитание | x=y-2 | x=3
* | Умножение | x=y*2 | x=10
/ | Деление | x=y/2 | x=2.5
% | Модуль (остаток от деления) | x=y%2 | x=1
++ | Инкремент | x=++y | x=6
-- | Декремент | x=--y | x=4

Операторы присваивания JavaScript

Операторы присваивания используется для присвоения значений переменным JavaScript.

Учитывая, что x = 10 и y = 5, в таблице ниже объясняются операторы присваивания:

Оператор | Пример | Также, как | Результат
= | x=y |  | x=5
+= | x+=y | x=x+y | x=15
-= | x-=y | x=x-y | x=5
*= | x*=y | x=x*y | x=50
/= | x/=y | x=x/y | x=2
%= | x%=y | x=x%y | x=0

Оператор +, используемый в Строках

Оператор + также может быть использован для присоединения (конкатенации) строковых переменных или текстовые значений.

Чтобы соединить две или более строковых переменных вместе, используется оператор +.

txt1="Сегодня очень";
txt2="приятный день";
txt3=txt1+txt2;

После выполнения этих инструкций, переменная txt3 будет содержать текст: "Сегодня оченьприятный день"

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

txt1="Сегодня очень ";
txt2="приятный день";
txt3=txt1+txt2;

или вставим пробел в выражение:

txt1="Сегодня очень";
txt2="приятный день";
txt3=txt1+" "+txt2;

После выполнения этих инструкций, переменная txt3 будет содержать текст:

"Сегодня очень приятный день"

Соединение Строк и Чисел

Правило: Если вы соединяете число и строку, то результатом будет строка!

Пример

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

Попробуйте сами »


JS Сравнение и Логические операторы(Comparison and Logical Operators)

JavaScript Операторы Сравнения (Comparison) и Логические (Logical) Операторы

« Предыдущая Следующая Глава »

Операторы сравнения и логические операторы используются для проверки true (истина) или false (ложь).

Операторы Сравнения

Операторы сравнения используются в логических инструкциях для определения равенства или различия между переменными или значениями.

Учитывая, что x = 5, в таблице ниже объясняются операторы сравнения:

Оператор | Описание | Пример
== | равно | x==8 есть false
=== | в точности равно (значение и тип) | x===5 есть true x==="5" есть false
!= | не равно | x!=8 есть true
> | больше | x>8 есть false
< | меньше | x<8 есть true
>= | больше или равно | x>=8 есть false
<= | меньше или равно | x<=8 есть true

Как это можно использовать

Операторы сравнения могут использоваться в условных инструкциях для сравнения значений и принятия действий в зависимости от результата:

if (age<18) document.write("Слишком молодой");

Вы узнаете больше об использовании условных инструкций в следующей главе учебника.

Логические Операторы

Логические операторы используются для определения логики между переменными или
значениями.

Учитывая, что x = 6 и y = 3, в таблице ниже объясняются логические операторы:

Оператор | Описание | Пример
&& | и | (x < 10 && y > 1) есть true
|| | или | (x==5 || y==5) есть false
! | не | !(x==y) есть true

Условный оператор

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

Синтаксис

имя_переменной=(условие)?значение1:значение2

Пример

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Если переменная visitor имеет значение PRES, то переменной greeting будет присвоено значение Dear President, иначе переменной будет присвоено значение Dear.


Инструкции If...Else (If...Else Statements)

JavaScript If...Else Инструкции (Statements)

« Предыдущая Следующая Глава »

Условные инструкции используются для выполнения различных действий основанных на различных условиях.

Условные Инструкции

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

В JavaScript имеются следующие условные инструкции:

  • if инструкция - эта инструкция используется для выполнения некоторого кода, только если указанное условие истинно (true)
  • if...else инструкция - эта инструкция используется для выполнения некоторого кода, если условие истинно (true), и другого кода, если условие ложно (false)
  • if...else if....else инструкция - эта инструкция используется, чтобы выбрать один из многих блоков кода, который будет выполнен
  • switch инструкция - эта инструкция используется, чтобы выбрать один из многих блоков кода, который будет выполнен

If Инструкция

Эта инструкция используется для выполнения некоторого кода, только если указанное условие истинно (true)

Синтаксис

if (условие)
{
код, который будет выполняться если условие истинно (true)
}

Обратите внимание, что if написано строчными буквами. Использование заглавных букв (IF), будет генерировать JavaScript ошибку!

Пример

<script type="text/javascript">
//Показать приветствие "С добрым утром" если
//текущее время меньше 10

var d=new Date();
var time=d.getHours();

if (time<10)
{
document.write("<b>С добрым утром</b>");
}
</script>

Попробуйте сами »

Обратите внимание на отсутствие .. Else .. в этом синтаксисе. Вы говорите, чтобы браузер выполнил некоторый код, только если указанное условие истинно (true).

If...else Инструкция

эта инструкция используется для выполнения некоторого кода, если условие истинно (true), и другого кода, если условие ложно (false)

Синтаксис

if (условие)
{
код, который будет выполняться если условие истинно (true)
}
else
{
код, который будет выполняться если условие ложно (false)
}

Пример

<script type="text/javascript">
//Если текущее время меньше 10, вы получите приветствие "С добрым утром!".
//Иначе вы получите приветствие "Добрый день!".

var d = new Date();
var time = d.getHours();

if (time < 10)
{
document.write("С добрым утром!");
}
else
{
document.write("Добрый день!");
}
</script>

Попробуйте сами »

If...else if...else Инструкция

Эта инструкция используется, чтобы выбрать один из многих блоков кода, который будет выполнен.

Синтаксис

if (условие1)
{
код, который будет выполняться если условие1 истинно (true)
}
else if (условие2)
{
код, который будет выполняться если условие2 истинно (true)
}
else
{
код, который будет выполняться если условие2 ложно (false)
}

Пример

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>С Добрым утром!</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Добрый день!</b>");
}
else
{
document.write("<b>Привет, Мир!</b>");
}
</script>

Попробуйте сами »

Examples

Еще Примеры

Случайная ссылка
Этот пример демонстрирует ссылку, при щелчке на которой Вы зайдете на сайты W3Schools.com или RefsnesData.no. Существует 50% вероятность для захода накаждый из них.


JS Инструкция Switch (Switch Statement)

JavaScript Switch Инструкция (Statement)

« Предыдущая Следующая Глава »

Условные операторы используются для выполнения различных действий, основанных на различных условиях.

Switch Инструкция

Используйте switch инструкцию для выбора одного из многих блоков кода, который должен быть выполнен.

Синтаксис

switch(n)
{
case 1:
выполняемый код блока 1
break;
case 2:
выполняемый код блока 2
break;
default:
код, который будет выполняться, если n отличается от случая 1 и 2
}

Вот как это работает: Сначала мы имеем одно выражение n (чаще всего это переменная), значение которого вычисляется один раз. Значение этого выражения затем сравнивается со значениями в каждом case (случае) в структуре. Если находится соответствие, то блок кода, связанный с этим case, выполняется. Затем используется break, чтобы предотвратить автоматический запуск кода в следующем case.

Пример

<script type="text/javascript">
//Вы получите различные приветствия
//в зависимости какой сегодня день. Обратите внимание, что Воскресенье=0,
//Понедельник=1, Вторник=2 и т.д.

var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Наконец-то Пятница!");
break;
case 6:
document.write("Суббота это Супер!");
break;
case 0:
document.write("Сонное воскресенье");
break;
default:
document.write("Я с нетерпением ожидаю выходных!");
}
</script>

Попробуйте сами »


JS Всплывающие Окна (Popup Boxes)

JavaScript Всплывающие Окна (Popup Boxes)

« Предыдущая Следующая Глава »

JavaScript имеет три вида всплывающих окон: alert, confirm и prompt.

Всплывающее окно alert

Окно alert часто используется, если вы хотите удостовериться, что информация приходит к пользователю.

Когда окно alert появится на экране, пользователь должен будеть щелкнуть кнопку "OK" для продолжения.

Синтаксис

alert("какой-нибудь текст");

Пример

<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("Я всплывающее окно alert!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="Показать всплывающее окно alert" />

</body>
</html>

Попробуйте сами »

Всплывающее окно confirm

Окно confirm часто используется, если вы хотите, чтобы пользователь проверил что-нибудь или согласился с чем-либо.

Когда окно Confirm появится на экране, пользователю придется щелкнуть кнопку "ОК" или "Отмена" для продолжения.

Если пользователь щелкает "ОК", окно confirm возвращает значение true. Если пользователь щелкает "Отмена", окно confirm возвращает значение false.

Синтаксис

confirm("какой-нибудь текст");

Пример

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Щелкните кнопку");
if (r==true)
{
document.write("Вы щелкнули OK!");
}
else
{
document.write("Вы щелкнули Отмена!");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Показать всплывающее окно confirm" />

</body>
</html>

Попробуйте сами »

Всплывающее окно prompt

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

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

Если пользователь щелкает "ОК" окно prompt возвращает введенное значение. Если пользователь щелкает "Отмена" окно prompt возвращает null.

Синтаксис

prompt("какой-нибудь текст","значение по умолчанию");

Пример

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Введите Ваше имя","Harry Potter");
if (name!=null && name!="")
{
document.write("Привет " + name + "! Как дела сегодня?");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_prompt()" value="Показать всплывающее окно prompt" />

</body>
</html>

Попробуйте сами »

Examples

Еще Примеры

Всплывающее окно alert с разрывом строк


JS Функции (Functions)

JavaScript Функции (Functions)

« Предыдущая Следующая Глава »

Функция будет выполняться по событию или после ее вызова.

JavaScript Функции

Чтобы браузер не выполнял скрипта при загрузке страницы, вы можете поместить ваш скрипт в функцию.

Функция содержит код, который будет выполняться по событию или после вызова функции.

Вы можете вызывать функцию из любой точки в пределах страницы (или даже из других страниц, если функция вложена во внешний файле с расширением .js).

Функции могут быть определены как в разделе <head>, так и в разделе <body> документа. Однако, чтобы гарантировать, что функция будет прочитана/загружена в браузер до ее вызова, разумно поместить функцию в разделе <head>.

Как Определить Функцию

Синтаксис

function имя_функции(var1,var2,...,varX)
{
какой-либо код
}

Параметры var1, var2, и т.д. это переменные или значения, передаваемые в функцию. Фигурные скобки { и } определяют начало и конец функции.

Примечание: Функция без параметров должна содержать скобки () после имени функции.

Примечание: Не забывайте о важности прописных букв в JavaScript! Слово function должны быть написаны строчными буквами, в противном случае возникает ошибка JavaScript! Также заметьте, что вы должны вызвать функцию с точно таким же заглавными буквами, как и в имени функции.

Пример JavaScript Функции

Пример

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Привет, Мир!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Щелкни меня!" onclick="displaymessage()" />
</form>
</body>
</html>

Попробуйте сами »

Если строка alert("Привет, Мир!") в приведенном выше примере не была бы помещена внутри функции, она была бы выполнена, как только была бы загружена. Теперь же, сценарий не будет выполняться до нажатия пользователем кнопки input. Функция displaymessage() будет выполняться, если щелкнуть кнопку input.

Вы узнаете больше о событиях JavaScript в главе JS События (Events).

Инструкция return

Инструкция return используется для определения значения, возвращаемого функцией.

Таким образом, функции, которые намерены возвратить значение, должны использовать инструкцию return.

В следующем примере возвращается произведение двух чисел (a и b):

Пример

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>

Попробуйте сами »

Время жизни JavaScript переменных

Если вы объявляете переменную в функции, переменная может быть доступна только внутри этой функции. При выходе из функции, переменная уничтожается. Эти переменные называются локальными. Вы можете иметь локальные переменные с одним и тем же именем в различных функций, поскольку каждая переменная распознается только функцией, в которой она объявлена.

Если вы объявляете переменную вне функции, все функции на странице имеют доступа к ней. Время жизни этих переменных начинается тогда, когда они были объявлены, и заканчивается при закрытии страницы.

Examples

Еще Примеры

Функция с параметром
Как передать значение функции и использовать переменную в функции.

Функция, возвращающая значение
Как разрешить функции возврат значения.


JS Цикл For (For Loop)

JavaScript Цикл For (For Loop)

« Предыдущая Следующая Глава »

Циклы выполняют блок кода заданное количество раз, или пока заданное условие истинно.

JavaScript Циклы

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

В JavaScript, существует два различных вида циклов:

  • for - циклы выполняют блок кода заданное число раз
  • while - циклы выполняют блок кода пока указанное условие истинно

Цикл for

Цикл for используется, когда вы заранее знаете, сколько раз он должен выполняться.

Синтаксис

for(var=начальное_значение;var<=конечное_значение;var=var+increment)
{
код для выполнения
}

Пример

Приведенный ниже пример определяет цикл, который начинается с i=0. Цикл будет продолжаться до тех пор, пока значение i меньше или равно 5. i будет увеличиваться на 1 после каждого выполнения цикла.

Примечание: Приращение параметра также может быть отрицательным, а <= может быть любым оператором сравнения.

Пример

<html>
<body>
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++)
{
document.write("Число " + i);
document.write("<br />");
}
</script>
</body>
</html>

Попробуйте сами »

Цикл while

Цикл while будет описан в следующей главе.

Examples

Еще Примеры

HTML Заголовки через цикл
Цикл шести различным HTML заголовкам.


JS Цикл While (While Loop)

JavaScript Цикл While (While Loop)

« Предыдущая Следующая Глава »

Циклы выполняют блок кода заданное количество раз, или пока заданное условие истинно.

Цикл while

Цикл while выполняет блок кода пока заданное условие истинно.

Синтаксис

while (var<=конечное_значение)
{
код для выполнения
}

Примечание: <= может быть любым оператором сравнения.

Пример

Приведенный ниже пример определяет цикл, который начинается с i=0. Цикл будет продолжаться до тех пор, пока i меньше или равно 5. i будет увеличиваться на 1 после каждого выполнения цикла:

Пример

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("Число " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

Попробуйте сами »

Цикл do...while

Цикл do...while loop является разновидностью цикла while. Этот цикл будет обязательно выполнять блок кода ОДИН раз, а затем будет повторяться, пока заданное условие истинно.

Синтаксис

do
{
код для выполнения
}
while (var<= конечное_значение);

Пример

Приведенный ниже пример использует цикл do...while. Цикл do...while всегда будет выполняться по крайней мере один раз, даже если условие ложно, потому что инструкции выполняются перед проверкой условия:

Пример

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("Число " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

Попробуйте сами »


JS Инструкции Break и Continue (Break and Continue Statements)

JavaScript Break и Continue Инструкции

« Предыдущая Следующая Глава »

Инструкция break

Инструкция break прерывает цикл и продолжает выполнение инструкций кода, которые следуют после инструкции цикла (если таковые имеются).

Пример

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("Число " + i);
document.write("<br />");
}
</script>
</body>
</html>

Попробуйте сами »

Инструкция continue

Инструкция continue прерывает текущий цикл и продолжает цикл со следующим значением.

Пример

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("Число " + i);
document.write("<br />");
}
</script>
</body>
</html>

Попробуйте сами »


JS Инструкция For...In (For...In Statement)

JavaScript For...In Инструкция

Инструкция for...in

Инструкция for...in организует цикл по элементам массива или по свойствам объекта.

Синтаксис

for (переменная in объект)
{
выполняемый код
}

Примечание: Код в теле цикла for...in выполняется один раз для каждого элемента /свойства.

Примечание: Переменная может быть именем переменной, элемента массива или свойством объекта.

Пример

Применение инструкции for...in для организации цикла по массиву:

Пример

<html>
<body>

<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>

</body>
</html>

Попробуйте сами »


JS События (Events)

JavaScript События (Events)

« Предыдущая Следующая Глава »

События это действия, которые можно обнаружить с помощью JavaScript.

События

С помощью JavaScript, у нас есть возможность создания динамических веб-страниц. События это действия, которые можно обнаружить с помощью JavaScript.

Каждый элемент на веб-странице обладает определенными событиями, которые могут запускать JavaScript. Например, мы можем использовать событие onclick элемента button чтобы указать, что функция будет выполняться, когда пользователь щелкает кнопку. Мы определяем события в тегах HTML.

Примеры событий:

  • Щелчок мышью
  • Загрузка Веб-страницы или изображения
  • Наведение указателя мыши на какую-либо область Веб-страницы
  • Выбор поля input в форме HTML
  • Отправка формы HTML
  • Нажатие клавиши

Примечание: События, как правило, используются в сочетании с функциями, и функция не будет выполняться прежде чем событие наступит!

Для получения полной информации о событиях, распознаваемых JavaScript, посетите Справочник JavaScript.

События onload and onunload

События onload и onunload возникают, когда пользователь входит на страницу или оставляет ее.

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

Оба события onload and onunload часто используются для общения с cookies которые должны установить, когда пользователь входит или покидает страницу. Например, вы могли бы вывести всплывающее окно, в котором будет запрос имени пользователя после его первого посещения вашей страницы. Имя пользователя будет храниться в cookie. Во время следующего посещения пользователем вашей страницы, вы могли бы вывести другое всплывающее окно, сообщающее что-то вроде: "Добро пожаловать John Doe!".

События onfocus, onblur и onchange

События onfocus, onblur и onchange часто используются для проверки полей формы.

Ниже приведен пример того, как использовать событие onchange. Функция CheckEmail() будет вызываться каждый раз, когда пользователь изменяет содержимое поля:

<input type="text" size="30" id="email" onchange= "checkEmail()">

Событие onsubmit

Событие onsubmit используется для проверки всех полей формы перед ее отправкой.

Ниже приведен пример того, как использовать событие onsubmit. Функция CheckForm() будет вызываться, когда пользователь щелкает кнопку submit на форме. Если значения полей не принимаются, отправка должна быть анулирована. Функция checkForm() возвращает true или false. Если она возвращает значение true, данные формы будут отправлены на обработку, в противном случае отправка будет отменена:

<form method="post" action="xxx.htm" onsubmit= "return checkForm()">

События onmouseover и onmouseout

События onmouseover и onmouseout часто используется для создания "анимированных" кнопкок.

Ниже приведен пример использования события onmouseover. Когда произойдет событие onmouseover, появится окно alert:

<a href="http://www.w3schools.com" onmouseover="alert('Событие onmouseover');return false"><img src="w3s.gif" alt= "W3Schools" /></a>


JS Инструкция Try...Catch (Try...Catch Statement)

Инструкция Try...Catch

Инструкция try...catch позволяет протестировать блок кода на наличие ошибок.

JavaScript - Перехват ошибок

При просмотре веб-страниц в Интернете, мы часто видели окно alert, сообщающее нам, что возникла ошибка времени выполнения (runtime error) и спрашивающее "Вы желаете отладить?". Подобное сообщение об ошибке может быть полезным для разработчиков, но не для пользователей. Когда пользователи видят ошибки, они обычно покидают веб-страницу.

Эта глава научит вас, как перехватывать и обрабатывать сообщения JavaScript об ошибках, чтобы вы не потеряли вашу аудиторию.

Инструкция try...catch

Инструкция try...catch позволяет протестировать блок кода на наличие ошибок. Try блок содержит код, который необходимо запустить, а catch блок содержит код, который будет выполняться, если произошла ошибка.

Синтаксис

try
{
//Здесь должен находиться какой-либо выполняемый код
}
catch(err)
{
//Здесь должен находиться обработчик ошибок
}

Обратите внимание, что try...catch записано строчными буквами. Использование прописных букв, будет порождать ошибку JavaScript!

Примеры

Пример ниже предполагает вывод окна alert с сообщением "Добро пожаловать гость!" после щелчка на кнопке. Однако, в функции message() имеется опечатка - alert() написано с ошибкой как adddlert(). Возникает ошибка JavaScript. Блок catch перехватывает ошибку и выполняет код пользователя в ее обработчике. Код обработчика выводит на экран сообщение об ошибке, информирующее пользователя о том, что произошло:

Пример

<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Добро пожаловать гость!");
}
catch(err)
{
txt="На этой странице есть ошибка.\n\n";
txt+="Описание ошибки: " + err.description + "\n\n";
txt+="Щелкните OK для продолжения.\n\n";
alert(txt);
}
}
</script>
</head>

<body>
<input type="button" value="Просмотр сообщений" onclick="message()" />
</body>

</html>

Попробуйте сами »

Следующий пример использует всплывающее окно confirm для отображения сообщения, информирующее пользователя, что он может щелкнуть кнопку OK, чтобы продолжить просмотр страницы, или щелкнуть кнопку Отмена, для перехода на Домашнюю страницу. Если метод confirm возвращает false, т.е. пользователь щелкнул кнопку Отмена, код перенаправляет пользователя. Если метод confirm возвращает true, код ничего не делает:

Пример

<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Добро пожаловать гость!");
}
catch(err)
{
txt="На этой странице есть ошибка.\n\n";
txt+="Щелкните кнопку OK для продолжения просмотра этой страницы,\n";
txt+="или щелкните кнопку Отмена для возврата на Домашнюю страницу.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>

<body>
<input type="button" value="Просмотр сообщений" onclick="message()" />
</body>

</html>

Попробуйте сами »

Инструкция throw

Инструкция throw может быть использована совместно с инструкцией try...catch, чтобы создать исключение для ошибки. Вы узнаете об иструкции throw в следующей главе.


JS Инструкция Throw (Throw Statement)

Инструкция Throw

Инструкция throw позволяет вам создать исключение.

Инструкция throw

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

Синтаксис

throw(исключение)

Исключение может быть строкой, целым числом, логическим значением или объектом.

Обратите внимание, что throw написано прописными буквами. Использование заглавных букв будет генерировать JavaScript ошибку!

Пример

Пример ниже определяет значение переменной, с именем x. Если значение x больше 10, меньше 0, или не число, ошибка обрабатывается через try. Затем ошибку захватывает catch и выводится соответствующее сообщение об ошибке:

Пример

<html>
<body>
<script type="text/javascript">
var x=prompt("Введите число между 0 и 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Ошибка! Значение слишком большое");
}
if(er=="Err2")
{
alert("Ошибка! Значение слишком маленькое");
}
if(er=="Err3")
{
alert("Ошибка! Значение не является числом");
}
}
</script>
</body>
</html>

Попробуйте сами »


JS Специальные Символы (Special Characters)

JavaScript Специальные символы

В JavaScript можно добавлять в текстовые строки специальные символы с помощью знака (\) обратной косой черты.

Вставка специальных символов

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

Посмотрите на следующий код JavaScript:

var txt="Мы - так называемые "Викинги" с севера.";
document.write(txt);

В JavaScript строка заключается в одиночные или двойные кавычки. Это означает, что указанная выше строка, будут обрезана к виду: Мы - так называемые

Для решения этой проблемы, вы должны поместить обратный слэш (\) перед каждой двойной кавычкой в слове "Викинги". Это возвратит каждую двойную кавычку в строковый литерал:

var txt="Мы - так называемые \"Викинги\" с севера";
document.write(txt);

Теперь JavaScript будет выводить текстовую строку правильно: Мы - так называемые "Викинги" с севера.

Другой пример:

document.write ("Вы \& Я - певцы!");

Приведенный выше пример выведет следующее:

Вы & Я - певцы!

В таблице ниже перечислены специальные символы, которые могут быть добавлены в текстовую строку со знаком обратной косой черты :

Код | Выполняет
\' | одиночная кавычка
\" | двойная кавычка
\& | амперсанд
\\ | обратный слэш
\n | новая строка
\r | возврат каретки
\t | символ табуляции
\b | символ забоя
\f | прогон


JS Рекомендации (Guidelines)

JavaScript Рекомендации (Guidelines)

« Предыдущая Следующая Глава »

Некоторые важные детали, о которых нужно знать при написании скриптов на JavaScript.

JavaScript чувствителен к регистру

Функция с именем "myfunction" это не тоже самое, что "myFunction" и переменная с именем "myVar" это не тоже самое, что "myvar".

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

Пробелы

JavaScript игнорирует дополнительные пробелы. Вы можете добавлять пробелы в ваш скрипт, чтобы сделать его более читабельным. Следующие строки эквивалентны:

name="Hege";
name = "Hege";

Разбивка строки кода

Вы можете разбить строку кода внутри текстовой строки с помощью обратной косой черты. Пример ниже будет отображаться правильно:

document.write("Hello \
World!");

Однако, вы не можете разбить строку кода подобно показанному ниже:

document.write \
("Hello World!");


JS Введение в объекты (Objects Introduction)

JavaScript Введение в объекты (Objects Introduction)

« Предыдущая Следующая Глава »

JavaScript является (ООП) Объекно-Ориентированным языком Программирования (Object Oriented Programming (OOP) language).

ООП язык позволяет Вам определять свои собственные объекты и создавать ваши собственные типы переменных.

Объектно-ориентированное программирование (Object Oriented Programming)

JavaScript является Объекно-Ориентированным языком Программирования(ООП). ООП язык позволяет Вам определять свои собственные объекты и создавать ваши собственные типы переменных.

Однако, создание Ваших собственных объектов будет объяснено позже в секции JS Расширенный (Advanced). Мы начнем с рассмотрения объектов, встроенных в JavaScript, и их использования. В следующих главах будет подробно объяснен каждый встроенный в JavaScript объект.

Заметим, что объект - это только специальная разновидность данных. У объекта есть свойства (properties) и методы (methods).

Свойства (Properties)

Свойства - это значения, ассоциированные с объектом.

В следующем примере мы используем свойство length объекта String для возврата числа символов в строке:

<script type="text/javascript">
var txt="Привет, Мир!";
document.write(txt.length);
</script>

Результатом выполнения этого кода будет:

12

Методы (Methods)

Методы - действия, которые могут быть выполнены в объектах.

В следующем примере мы используем метод toUpperCase() объекта String, чтобы показать текст в прописных буквах:

<script type="text/javascript">
var str="Привет, Мир!";
document.write(str.toUpperCase());
</script>

Результатом выполнения этого кода будет:

ПРИВЕТ, МИР!


JS Объект String (String Object)

JavaScript String Объект

Объект String используется, чтобы манипулировать частью текста.

Examples

Попробуйте сами - Примеры

Возврат длины строки
Как использовать свойство length, чтобы найти длину строки.

Style strings
How to style strings.

Метод indexOf()
Как возвратить позицию первого найденного местонахождения указанного строкового значения в строке.

Метод match()
Как искать специфицированное значение внутри строки

Замена символов в строке - replace()
Как использовать метод replace() для замены некоторых символов в строке другими символами.

Полный справочник по объекту String (Complete String Object Reference)

Для получения полной справки обо всех свойствах и методах, которые могут быть использованы с объектом String, обратитесь к нашей complete String object reference.

Справочник содержит краткое описание и примеры использования для каждого свойства и метода!

String object

The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length of a string:

var txt="Hello world!";
document.write(txt.length);

The code above will result in the following output:

12

The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters:

var txt="Hello world!";
document.write(txt.toUpperCase());

The code above will result in the following output:

HELLO WORLD!


JS Объект (Date (Date Object)

JavaScript Date Объект

The Date object is used to work with dates and times.

Examples

Try it Yourself - Examples

Return today's date and time
How to use the Date() method to get today's date.

getTime()
Use getTime() to calculate the years since 1970.

setFullYear()
How to use setFullYear() to set a specific date.

toUTCString()
How to use toUTCString() to convert today's date (according to UTC) to a string.

getDay()
Use getDay() and an array to write a weekday, and not just a number.

Display a clock
How to display a clock on your web page.

Complete Date Object Reference

For a complete reference of all the properties and methods that can be used with the Date object, go to our complete Date object reference.

The reference contains a brief description and examples of use for each property and method!

Create a Date Object

The Date object is used to work with dates and times.

The following code create a Date object called myDate:

var myDate=new Date()

Note: The Date object will automatically hold the current date and time as its initial value!

Set Dates

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();
myDate.setFullYear(2010,0,14);

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!

Compare Two Dates

The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();

if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}


JS Объект Array (Array Object)

JavaScript Array Объект

The Array object is used to store multiple values in a single variable.

Examples

Try it Yourself - Examples

Create an array
Create an array, assign values to it, and write the values to the output.

For...In Statement
How to use a for...in statement to loop through the elements of an array.

(You can find more examples at the bottom of this page)

Complete Array Object Reference

For a complete reference of all the properties and methods that can be used with the Array object, go to our complete Array object reference.

The reference contains a brief description and examples of use for each property and method!

What is an Array?

An array is a special variable, which can hold more than one value, at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

cars1="Saab";
cars2="Volvo";
cars3="BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The best solution here is to use an array!

An array can hold all your variable values under a single name. And you can access the values by referring to the array name.

Each element in the array has its own ID so that it can be easily accessed.

Create an Array

An array can be defined in three ways.

The following code creates an Array object called myCars:

1:

var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

2:

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

3:

var myCars=["Saab","Volvo","BMW"]; // literal array

Note: If you specify numbers or true/false values inside the array then the variable type will be Number or Boolean, instead of String.

Access an Array

You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.

The following code line:

document.write(myCars[0]);

will result in the following output:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index number:

myCars[0]="Opel";

Now, the following code line:

document.write(myCars[0]);

will result in the following output:

Opel

Examples

More Examples

Join two arrays - concat()

Join three arrays - concat()

Join all elements of an array into a string - join()

Remove the last element of an array - pop()

Add new elements to the end of an array - push()

Reverse the order of the elements in an array - reverse()

Remove the first element of an array - shift()

Select elements from an array - slice()

Sort an array (alphabetically and ascending) - sort()

Sort numbers (numerically and ascending) - sort()

Sort numbers (numerically and descending) - sort()

Add an element to position 2 in an array - splice()

Convert an array to a string - toString()

Add new elements to the beginning of an array - unshift()


JS Объект Boolean (Boolean Object)

JavaScript Boolean Объект

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

Examples

Try it Yourself - Examples

Check Boolean value
Check if a Boolean object is true or false.

Complete Boolean Object Reference

For a complete reference of all the properties and methods that can be used with the Boolean object, go to our complete Boolean object reference.

The reference contains a brief description and examples of use for each property and method!

Create a Boolean Object

The Boolean object represents two values: "true" or "false".

The following code creates a Boolean object called myBoolean:

var myBoolean=new Boolean();

Note: If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")!

All the following lines of code create Boolean objects with an initial value of false:

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

And all the following lines of code create Boolean objects with an initial value of true:

var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");


JS Объект Math (Math Object)

JavaScript Math Объект

The Math object allows you to perform mathematical tasks.

Examples

Try it Yourself - Examples

round()
How to use round().

random()
How to use random() to return a random number between 0 and 1.

max()
How to use max() to return the number with the highest value of two specified numbers.

min()
How to use min() to return the number with the lowest value of two specified numbers.

Complete Math Object Reference

For a complete reference of all the properties and methods that can be used with the Math object, go to our complete Math object reference.

The reference contains a brief description and examples of use for each property and method!

Math Object

The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and methods.

Syntax for using properties/methods of Math:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);

Note: Math is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it.

Mathematical Constants

JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.

You may reference these constants from your JavaScript like this:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Mathematical Methods

In addition to the mathematical constants that can be accessed from the Math object there are also several methods available.

The following example uses the round() method of the Math object to round a number to the nearest integer:

document.write(Math.round(4.7));

The code above will result in the following output:

5

The following example uses the random() method of the Math object to return a random number between 0 and 1:

document.write(Math.random());

The code above can result in the following output:

0.9989220000471586

The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:

document.write(Math.floor(Math.random()*11));

The code above can result in the following output:

2


JS Объект RegExp (RegExp Object)

JavaScript RegExp Объект

The RegExp object is used to specify what to search for in a text

What is RegExp

RegExp, is short for regular expression.

When you search in a text, you can use a pattern to describe what you are searching for. RegExp IS this pattern.

A simple pattern can be a single character.

A more complicated pattern consists of more characters, and can be used for parsing, format checking, substitution and more.

You can specify where in the string to search, what type of characters to search for, and more.

Defining RegExp

The RegExp object is used to store the search pattern.

We define a RegExp object with the new keyword. The following code line defines a RegExp object called patt1 with the pattern "e":

var patt1=new RegExp("e");

When you use this RegExp object to search in a string, you will find the letter "e".

Methods of the RegExp Object

The RegExp Object has 3 methods: test(), exec(), and compile().

test()

The test() method searches a string for a specified value. Returns true or false

Example

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:

true

Try it yourself »

exec()

The exec() method searches a string for a specified value. Returns the text of the found value. If no match is found, it returns null

Example 1

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:

e

Try it yourself »

You can add a second parameter to the RegExp object, to specify your search. For example; if you want to find all occurrences of a character, you can use the "g" parameter ("global").

For a complete list of how to modify your search, visit our complete RegExp object reference.

When using the "g" parameter, the exec() method works like this:

  • Finds the first occurence of "e", and stores its position
  • If you run exec() again, it starts at the stored position, and finds the next occurence of "e", and stores its position

Example 2

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

Since there is six "e" letters in the string, the output of the code above will be:

eeeeeenull

Try it yourself »

compile()

The compile() method is used to change the RegExp.

compile() can change both the search pattern, and add or remove the second parameter.

Example

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, but not a "d", the output of the code above will be:

truefalse

Try it yourself »

Complete RegExp Object Reference

For a complete reference of all the properties and methods that can be used with the RegExp object, go to our complete RegExp object reference.

The reference contains a brief description and examples of use for each property and method including the string object.


JS Распознавания браузера (Browser Detection)

JavaScript Распознавания браузера (Browser Detection)

« Предыдущая Следующая Глава »

The Navigator object contains information about the visitor's browser.

Browser Detection

Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - especially on older browsers.

So, sometimes it can be very useful to detect the visitor's browser, and then serve up the appropriate information.

The best way to do this is to make your web pages smart enough to look one way to some browsers and another way to other browsers.

The Navigator object can be used for this purpose.

The Navigator object contains information about the visitor's browser name, version, and more.

Note Note: There is no public standard that applies to the navigator object, but all major browsers support it.

The Navigator Object

The Navigator object contains all information about the visitor's browser. We are going to look at two properties of the Navigator object:

  • appName - holds the name of the browser
  • appVersion - holds, among other things, the version of the browser

Example

<html>
<body>

<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

document.write("Browser name: "+ browser);
document.write("<br />");
document.write("Browser version: "+ version);
</script>

</body>
</html>

Try it yourself »

The variable "browser" in the example above holds the name of the browser, i.e. "Netscape" or "Microsoft Internet Explorer".

The appVersion property in the example above returns a string that contains much more information than just the version number, but for now we are only interested in the version number. To pull the version number out of the string we are using a function called parseFloat(), which pulls the first thing that looks like a decimal number out of a string and returns it.

IMPORTANT! The version number is WRONG in IE 5.0 or later! Microsoft starts the appVersion string with the number 4.0. in IE 5.0 and IE 6.0!!! Why did they do that??? However, JavaScript is the same in IE6, IE5 and IE4, so for most scripts it is ok.

The example below displays a different alert, depending on the visitor's browser:

Example

<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
{
alert("Your browser is good enough!");
}
else
{
alert("It's time to upgrade your browser!");
}
}
</script>
</head>

<body onload="detectBrowser()">
</body>
</html>

Try it yourself »

Examples

More Examples

More details about the visitor's browser

All details about the visitor's browser


JS Cookie-файлы (Cookies)

JavaScript Cookie-файлы (Cookies)

« Предыдущая Следующая Глава »

A cookie is often used to identify a user.

What is a Cookie?

A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

Examples of cookies:

  • Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie
  • Password cookie - The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. Next time the visitor arrives at your page, the password is retrieved from the cookie
  • Date cookie - The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like "Your last visit was on Tuesday August 11, 2005!" The date is retrieved from the stored cookie

Create and Store a Cookie

In this example we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he or she will be asked to fill in her/his name. The name is then stored in a cookie. The next time the visitor arrives at the same page, he or she will get welcome message.

First, we create a function that stores the name of the visitor in a cookie variable:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

The parameters of the function above hold the name of the cookie, the value of the cookie, and the number of days until the cookie expires.

In the function above we first convert the number of days to a valid date, then we add the number of days until the cookie should expire. After that we store the cookie name, cookie value and the expiration date in the document.cookie object.

Then, we create another function that checks if the cookie has been set:

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

The function above first checks if a cookie is stored at all in the document.cookie object. If the document.cookie object holds some cookies, then check to see if our specific cookie is stored. If our cookie is found, then return the value, if not - return an empty string.

Last, we create the function that displays a welcome message if the cookie is set, and if the cookie is not set it will display a prompt box, asking for the name of the user:

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}

All together now:

Example

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}
</script>
</head>

<body onload="checkCookie()">
</body>
</html>

Try it yourself »

The example above runs the checkCookie() function when the page loads.


JS Валидация (проверка) Форм (Form Validation)

JavaScript Валидация (проверка) Форм (Form Validation)

« Предыдущая Следующая Глава »

JavaScript Form Validation

JavaScript can be used to validate data in HTML forms before sending off the content to a server.

Form data that typically are checked by a JavaScript could be:

  • has the user left required fields empty?
  • has the user entered a valid e-mail address?
  • has the user entered a valid date?
  • has the user entered text in a numeric field?

Required Fields

The function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true (means that data is OK):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

The entire script, with the HTML form could look something like this:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

E-mail Validation

The function below checks if the content has the general syntax of an email.

This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}

The entire script, with the HTML form could look something like this:

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false;}
}
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>


JS Анимация (Animation)

JavaScript Анимация (Animation)

« Предыдущая Следующая Глава »

With JavaScript we can create animated images.

JavaScript Animation

It is possible to use JavaScript to create animated images.

The trick is to let a JavaScript change between different images on different events.

In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between the images.

The HTML Code

The HTML code looks like this:

<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>

Note that we have given the image an id, to make it possible for a JavaScript to address it later.

The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.

The onMouseOut event tells the browser that once a mouse is rolled away from the image, another JavaScript function should be executed. This function will insert the original image again.

The JavaScript Code

The changing between the images is done with the following JavaScript:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>

The function mouseOver() causes the image to shift to "b_blue.gif".

The function mouseOut() causes the image to shift to "b_pink.gif".

The Entire Code

Example

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>
</head>

<body>
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>

Try it yourself »


JS Изображения-карты (Image Maps)

JavaScript Изображения-карты (Image Maps)

« Предыдущая Следующая Главаr »

An image-map is an image with clickable regions.

HTML Image Maps

From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link. Look at our simple HTML image-map.

Adding some JavaScript

We can add events (that can call a JavaScript) to the <area> tags inside the image map. The <area> tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

Here's the HTML image-map example, with some JavaScript added:

Example

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>

Try it yourself »


JS Таймирование событий (Timing Events)

JavaScript Таймирование событий (Timing Events)

« Предыдущая Следующая Глава »
1
2
3
4
5
6
7
8
9
10
11
12

JavaScript can be executed in time-intervals.

This is called timing events.

JavaScript Timing Events

With JavaScript, it is possible to execute some code after a specified time-interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

  • setTimeout() - executes a code some time in the future
  • clearTimeout() - cancels the setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

The setTimeout() Method

Syntax

var t=setTimeout("javascript statement",milliseconds);

The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example

When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

Example

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>
</body>
</html>

Try it yourself »

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself.

In the example below, when a button is clicked, the input field will start to count (for ever), starting at 0.

Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:

Example

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>

Try it yourself »

The clearTimeout() Method

Syntax

clearTimeout(setTimeout_variable)

Example

The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

Example

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

Try it yourself »

Examples

More Examples

Another simple timing

A clock created with a timing event


JavaScript Примеры (Examples)

Примеры по Основам JavaScript

Вывод текста с помощью JavaScript (Write text with JavaScript)
Вывод HTML тегов с помощью JavaScript (Write HTML tags with JavaScript)
JavaScript в разделе body (JavaScript in the body section)
JavaScript в разделе head (JavaScript in the head section)
Внешний JavaScript (An external JavaScript)

Примеры с пояснениями

JavaScript Инструкции, Комментарии и Блоки

JavaScript инструкции (JavaScript statements.)
JavaScript блоки (JavaScript blocks.)
Однострочные комментарии (Single line comments.)
Многострочные комментарии (Multiple lines comments.)
Однострочный комментарий для предотвращения выполнения (Single line comment to prevent execution.)
Многострочный комментарий для предотвращения выполнения (Multiple lines comment to prevent execution.)

Примеры с пояснениями

JavaScript Переменные

Объявить переменную, присвоить ей значение и показать значение (Declare a variable, assign a value to it, and display it)

Примеры с пояснениями

JavaScript Условные If ... Else

If инструкция (If statement)
If...else инструкция (If...else statement)
Случайная ссылка (Random link)
Switch инструкция (Switch statement)

Примеры с пояснениями

JavaScript Всплывающие Окна

Окно Alert (Alert box)
Окно Alert box с разрывами строки (Alert box with line breaks)
Окно Confirm (Confirm box)
Окно Prompt (Prompt box)

Примеры с пояснениями

JavaScript Функции

Вызов функции (Call a function)
Функция с аргументом (Function with an argument)
Функция с аргументом 2 (Function with an argument 2)
Функция, возвращающая значение (Function that returns a value)
Функция с аргументами, возвращающая значение (Function with arguments, that returns a value)

Примеры с пояснениями

JavaScript Циклы

Цикл For (For loop)
Организация цикла посредством HTML Заголовков (Looping through HTML headers)
Цикл While (While loop)
Цикл Do While (Do While loop)
Прерывание цикла (Break a loop)
Прерывание и продолжение цикла (Break and continue a loop)
Использование for...in инструкции для организации цикла посредством элементов массива (Use a for...in statment to loop through the elemenys of an array)

Примеры с пояснениями

JavaScript Обработка Ошибок

Инструкция try...catch (The try...catch statment)
Инструкция try...catch с окном confirm (The try...catch statment with a confirm box)
Событие onerror (The onerror event)

Примеры с пояснениями

Расширенные примеры JavaScript

Создание a welcome cookie ()
Кнопка анимации ()
Карта-изображений с добавлением JavaScript ()
Простой выбор времени (Simple timing)
Другой простой выбор времени (Another simple timing)
Timing event in an infinite loop
Timing event in an infinite loop - with a Stop button
A clock created with a timing event
Create a direct instance of an object
Create a template for an object
Обнаружение посетитель браузера и версии браузера
Подробнее о посетителе браузера
Все подробности о посетителе браузера
Оповещение пользователю, в зависимости от браузера


JS Примеры объектов (Objects Examples)

JavaScript Примеры объектов (Objects Examples)

« Предыдущая Следующая Глава »

Examples of using the built-in JavaScript objects.

String Object

Return the length of a string
Style strings
Return the position of the first occurrence of a text in a string - indexOf()
Search for a text in a string and return the text if found - match()
Replace characters in a string - replace()

More String object examples in our JavaScript reference.

Date Object

Use Date() to return today's date and time
Use getTime() to calculate the years since 1970
Use setFullYear() to set a specific date
Use toUTCString() to convert today's date (according to UTC) to a string
Use getDay() and an array to write a weekday, and not just a number
Display a clock

More Date object examples in our JavaScript reference.

Array Object

Create an array
Use a for...in statement to loop through the elements of an array
Join two arrays - concat()
Join three arrays - concat()
Join all elements of an array into a string - join()
Remove the last element of an array - pop()
Add new elements to the end of an array - push()
Reverse the order of the elements in an array - reverse()
Remove the first element of an array - shift()
Select elements from an array - slice()
Sort an array (alphabetically and ascending) - sort()
Sort numbers (numerically and ascending) - sort()
Sort numbers (numerically and descending) - sort()
Add an element to position 2 in an array - splice()
Convert an array to a string - toString()
Add new elements to the beginning of an array - unshift()

More Array object examples in our JavaScript reference.

Boolean Object

Check Boolean value

More Boolean object examples in our JavaScript reference.

Math Object

Use round() to round a number
Use random() to return a random number between 0 and 1
Use max() to return the number with the highest value of two specified numbers
Use min() to return the number with the lowest value of two specified numbers
Convert Celsius to Fahrenheit

More Math object examples in our JavaScript reference.


JS Примеры HTML DOM (HTML DOM Examples)

JavaScript Примеры HTML DOM (HTML DOM Examples)

« Предыдущая Следующая Глава »

Examples of using JavaScript to access and manipulate the HTML DOM objects.

Anchor Object

Change text, URL, and target attribute of a link
Using focus() and blur()
Add an accessKey to a link

Document Object

Write text to the output
Write text with formatting to the output
Return the title of a document
Return the URL of a document
Return the referrer of a document
Return the domain name of the document's server
Use getElementById()
Use getElementsByName()
Open a new document, specify MIME type and add some text
Return the number of anchors in a document
Return the innerHTML of the first anchor in a document
Count the number of forms in a document
Access an item in a collection
Count the number of images in a document

Event Object

Which mouse button was clicked?
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?

Form and Form Input Objects

View and change the action URL of a form
View the method that is to be used when sending form data
Alert id, type, and value of a Button object + disable button
Check and uncheck a checkbox
Checkboxes in a form
Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase.
Radio buttons
Reset a form
Submit a form
Form validation
Set focus to an input field when the page loads
Select the content of an input field
Dropdown list in a form
Another dropdown list
A dropdown menu
Jump to the next field when the current field's maxlength has been reached
Add accessKeys to form fields

Frame, Frameset, and IFrame Objects

Resizable and not resizable frames
Frames with and without scrollbars
Change the source / URL of two frames
Break out of a frame
Update two iframes

Image Object

Change the height and width of an image
Change the src of an image

Location Object

Send the client to a new location / URL
Reload a page
Break out of a frame
Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object

Detect the visitor's browser and browser version
More details about the visitor's browser
All details about the visitor's browser
Alert user, depending on browser

Option and Select Objects

Disable and enable a dropdown list
Get the id of the form that contains the dropdown list
Get the number of options in the dropdown list
Turn the dropdown list into a multiline list
Select multiple options in a dropdown list
Alert the selected option in a dropdown list
Alert the index of the selected option in a dropdown list
Change the text of the selected option
Remove options from a dropdown list

Screen Object

Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects

Change the width of a table border
Change the cellPadding and cellSpacing of a table
Specify frames of a table
Specify rules for a table
InnerHTML of a row
InnerHTML of a cell
Create a caption for a table
Delete rows in a table
Add rows to a table
Add cells to a table row
Align the cell content in a table row
Vertical align the cell content in a table row
Align the cell content in a single cell
Vertical align the cell content in a single cell
Change the content of a table cell
Change the colspan of a table row

Window Object

Display an alert box
Alert box with line-breaks
Display a confirm box
Display a prompt box
Open a new window when clicking on a button
Open a new window and control its appearance
Open multiple windows with one click
Send the client to a new location / URL
Reload a page
Write some text in the windows status bar
Print a page
Break out of a frame
Resize a window
Resize a window to a specified size
Scroll the window
Scroll the window to a specified position
Simple timing
Another simple timing
Timing event in an infinite loop
Timing event in an infinite loop - with a Stop button
A clock created with a timing event
Create a pop-up


JS Проверка знаний (Quiz)

JavaScript Проверка знаний (Quiz)

« Предыдущая Следующая Глава »

You can test your JavaScript skills with W3Schools' Quiz.

The Test

The test contains 20 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about JavaScript.

Your Score Will be Counted

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.

Good luck! Start the JavaScript Quiz


Объекты JavaScript (JavaScript Objects

JavaScript and HTML DOM Reference

« W3Schools Home Next Reference »

JavaScript

This section contains a complete reference of

  • All built-in JavaScript objects

  • All browser objects

  • All HTML DOM objects

JavaScript Objects Reference

The references describe the properties and methods of each object, along with examples.

  • Array object
  • Boolean object
  • Date object
  • Math object
  • Number object
  • String object
  • RegExp object
  • Global properties and functions

Browser Objects Reference

The references describe the properties and methods of each object, along with examples.

  • Window object
  • Navigator object
  • Screen object
  • History object
  • Location object

HTML DOM Objects Reference

The references describe the properties and methods of each object, along with examples.

  • Document object
  • Anchor object
  • Area object
  • Base object
  • Body object
  • Button object
  • Event object
  • Form object
  • Frame object
  • Frameset object
  • IFrame object
  • Image object
  • Input Button object
  • Input Checkbox object
  • Input File object
  • Input Hidden object
  • Input Password object
  • Input Radio object
  • Input Reset object
  • Input Submit object
  • Input Text object
  • Link object
  • Meta object
  • Object object
  • Option object
  • Select object
  • Style object
  • Table object
  • TableCell object
  • TableRow object
  • Textarea object


JS Создание ваши собственных объектов(Create Your Own Objects)

JavaScript Создание ваши собственных объектов (Create Your Own Objects)

« Предыдущая Следующая Глава »

Objects are useful to organize information.

Examples

Try it Yourself - Examples

Create a direct instance of an object

Create a template for an object

JavaScript Objects

Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you can also create your own.

An object is just a special kind of data, with a collection of properties and methods.

Let's illustrate with an example: A person is an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values of those properties will differ from person to person. Objects also have methods. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc.

Properties

The syntax for accessing a property of an object is:

objName.propName

You can add properties to an object by simply giving it a value. Assume that the personObj already exists - you can give it properties named firstname, lastname, age, and eyecolor as follows:

personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

document.write(personObj.firstname);

The code above will generate the following output:

John

Methods

An object can also contain methods.

You can call a method with the following syntax:

objName.methodName()

Note: Parameters required for the method can be passed between the parentheses.

To call a method called sleep() for the personObj:

personObj.sleep();

Creating Your Own Objects

There are different ways to create a new object:

1. Create a direct instance of an object

The following code creates an instance of an object and adds four properties to it:

personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";

Adding a method to the personObj is also simple. The following code adds a method called eat() to the personObj:

personObj.eat=eat;

2. Create a template of an object

The template defines the structure of an object:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

Notice that the template is just a function. Inside the function you need to assign things to this.propertyName. The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.

Once you have the template, you can create new instances of the object, like this:

myFather=new person("John","Doe",50,"blue"); myMother=new person("Sally","Rally",48,"green");

You can also add some methods to the person object. This is also done inside the template:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.newlastname=newlastname;
}

Note that methods are just functions attached to objects. Then we will have to write the newlastname() function:

function newlastname(new_lastname)
{
this.lastname=new_lastname;
}

The newlastname() function defines the person's new last name and assigns that to the person. JavaScript knows which person you're talking about by using "this.". So, now you can write: myMother.newlastname("Doe").


JS Вы изучили JavaScript, Что теперь? (You Have Learned JavaScript, Now What?)

Вы изучили JavaScript, Что теперь?

« Предыдущая Следующая Глава »

JavaScript Summary

This tutorial has taught you how to add JavaScript to your HTML pages, to make your web site more dynamic and interactive.

You have learned how to create responses to events, validate forms and how to make different scripts run in response to different scenarios.

You have also learned how to create and use objects, and how to use JavaScript's built-in objects.

For more information on JavaScript, please look at our JavaScript examples and our JavaScript reference.

Now You Know JavaScript, What's Next?

The next step is to learn about the HTML DOM and DHTML.

If you want to learn about server-side scripting, the next step is to learn ASP.

HTML DOM

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our HTML DOM tutorial.

DHTML

DHTML is a combination of HTML, CSS, and JavaScript. DHTML is used to create dynamic and interactive Web sites.

W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

If you want to learn more about DHTML, please visit our DHTML tutorial.

ASP

While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.

With ASP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.

Since ASP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.

W3Schools Certification

W3Schools' Online Certification Program

The perfect solution for professionals who need to balance work, family, and career building.

More than 4000 certificates already issued!

The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).


Tryit Editor v1.4

Результат после редактирования:

Отредактируйте код и щелкните кнопку, чтобы увидеть результат W3Schools.com - Попробуйте сами