JavaScript

JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript - фирмой Netscape Communication Corporation. Первоначальное название - LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

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

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

Тег <script>

Сценарий JavaScript встраивается в HTML-документ с помощью тега <script>.

Пример

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Начнем?</h1>
<script><!--
    document.write("Привет!");
//--></script>
</body>
</html>

РЕЗУЛЬТАТ:

Начнем?

Привет!

Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа "/", т.к. некоторые браузеры рассматривает строку, состоящую только из символов "-->", как ошибочную.

В первом примере для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка "Привет!". Строка закрывается символом ";", которым отделяются друг от друга все операторы JavaScript.

Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку "Привет!". При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.

Для указания что скрипт вынесен в отдельный файл используется следующий код:
<script src="/js.js"></script>

Для ускорения загрузки страницы можно разрешить браузеру загружать скрипты паралельно с остальным кодом. Для указания паралельной неблокирующей загрузки скриптов используется атрибут async="async" или defer="defer":

<script src="/js.js" async="async"></script>
<script src="/js.js" defer="defer"></script>

В обоих случаях скрипты, помеченные как async или defer, начинают незамедлительно скачиваться, не вызывая при этом остановок парсера, причем оба скрипта поддерживают onload обработчик, позволяющий вызвать те или иные события, когда скрипт будет загружен. Каждый скрипт, помеченный async, будет выполнен в тот момент, когда для это появится возможность после его полной загрузки, но до того как будет выброшено событие о загрузке window. Это означает, что такие скрипты скорее всего будут выполнены не в том порядке, в котором они указаны на странице. А вот наличие defer скриптов гарантирует, что как они указаны, так они и будут загружаться. Их выполнение начнется после завершения работы парсера, но до появления события DOMContentLoaded.

Будьте внимательны и осторожны при неблокирующей загрузке, т.к. использовать функции из такого js-файла можно только после полной загрузки DOM-модели и всех скриптов. Т.к. браузер, если это позволит сервер, будет кешировать загружаемые внешние файлы, то при первом вызове функции будут доступны только после полной загрузки, а при обновлении страницы, т.к. браузер возьмет файл из кеша - сразу. И отлавить такую ошибку будет непросто.

Можно сокращать написание:

<script src="/js.js" async></script>

Имейте в виду, что JavaScript различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript - через backgroundColor.

Пример

Цвет фона объекта меняется с белого на красный при наведении на объект мыши:

<img src="attachment.png" style="border:none;float:right;margin-left:5px;"
     OnMouseOver="this.style.backgroundColor='red';"
     OnMouseOut="this.style.backgroundColor='white';" />

Переменные в JavaScript

Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript: abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanseof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, sinchronized, switch, this, throw, throws, transient, true, try, typeof, var, void, wich.

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

Например:
    var a;
    var a=13, A=22, b="Строка";
Типы данных:
  • Числа.
  • Логические значения. Могут принимать значение true и false.
  • Строки. Последовательность символов, заключенная в одинарные или в двойные кавычки. Строка, ограниченная одинарными кавычками может содержать двойные кавычки, а строка, ограниченная двойными кавычками, может содержать одинарные кавычки.
Например:
var str1=’Не говорите мне: ”Прощай! ”’;
var str2=”Не говорите мне: ’Прощай!’”;

Для определения типа переменной можно использовать typeof, например:

var a = 5
document.write(typeof a) // "number"

var b = 'test'
document.write( typeof(b) ) // "string"

document.write - используется для вывода результата в текущей поток вывода браузера.

Для проверки существования переменной можно использовать одну из следующих конструкций:

if (typeof(var) == "undefined") { ... }
В современном javascript лучше писать:
if ('var' in window) { ... }

Использовать просто if(var) нельзя, так как доступ к неопределенной переменной вызовет ошибку. В некоторых источниках рекомендуют использовать if(window.var), но так проверять тоже нельзя, т.к. переменная может быть, но иметь значение false.


Число преобразуется в строку автоматически. Например:

document.write(”145+263=”+(145+263));

РЕЗУЛЬТАТ:

В строку можно вставить специальные символы:

\’Одинарная кавычка
\”Двойная кавычка
\\Обратная косая черта
\nПереход на новую строку
\rВозврат каретки
\tТабуляция
Например:
alert(”черный\tblack\t#000000\nбелый\twhite\t#FFFFFF”);

Для преобразования строк в числа используют специальные функции parseInt и parseFloat.

Пример

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Пример преобразования типов</h1>
<script><!--
    var Buf="";
    Buf=100+" - число сто<br>";
    Buf+=(parseInt("50")+50)+" - число сто<br>";
    document.write(Buf);
//--></script>
</body>
</html>

РЕЗУЛЬТАТ:

Пример преобразования типов

Примеры использования простейших преобразований типов:
var myVar   = "3.14159",
    str     = ""+ myVar,//  в string
    int     = ~~myVar,  //  в integer
    float   = 1*myVar,  //  во float
    bool    = !!myVar,  //  в boolean - все непустые строки и числа кроме 0 будут true
    array   = [myVar];  //  в array

Конвертирование в даты (new Date(myVar)) и регулярные выражения (new RegExp(myVar)) нужно делать с использованием конструкторов. Для создания регулярных выражений используйте структуру: /регулярное_выражение/флаги.

Операторы языка JavaScript

Операторы JavaScript напоминают общеизвестные операторы языка С++.

Унарные операторы

-Изменение знака на противоположный
!Дополнение. Используется для реверсирования значения логических переменных
++Увеличение значения переменной. Может применяться и как префикс, и как суффикс
--Уменьшение значения переменной. Может применяться и как префикс, и как суффикс

Бинарные операторы

- Вычитание
+ Сложение
* Умножение
/ Деление
% Остаток от деления

Операторы для работы с отдельными битами

& И
| ИЛИ
^ ИСКЛЮЧАЮЩЕЕ ИЛИ
~ НЕ

Операторы сдвига

>> Сдвиг вправо
<< Сдвиг влево
>>> Сдвиг вправо с заполнением освобождаемых разрядов нулями

Операторы отношения

> Больше
>= Больше или равно
< Меньше
<= Меньше или равно
== Равно
!= Не равно

В условных операторах также применяются логические операторы: || (ИЛИ) и && (И).

Оператор присваивания и его комбинации

Допускается комбинирование оператора присваивания с другими, как и в языке С.

= Присваивание
+= Сложение или слияние строк (n=n+7; аналог. n+=7;)
–= Вычитание (n=n-7; аналог. n-=7;)
*= Умножение
/= Деление
>>= Сдвиг вправо
<<= Сдвиг влево
>>>= Сдвиг вправо с заполнением освобождаемых разрядов нулями
&= И
|= ИЛИ
^= ИСКЛЮЧАЮЩЕЕ ИЛИ

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

В языке JavaScript два условных оператора: if-else и ?:.

Пример оператора if-else

if(Vol<2)
{
    b=true;
    ss="w002.htm";
}
else if(Vol>100)
{
    b=true;
    ss="w100.htm";
}

Пример "скрипт приветствия (по времени суток)"

<script><!--
    var h=(new Date()).getHours();
    if (h < 6) document.write("Доброй ночи!");
    if (h > 5 && h < 12) document.write("С добрым утром!");
    if (h > 11 && h < 18) document.write("Добрый день!");
    if (h > 17 && h < 24) document. write("Добрый вечер!");
    //-->
</script>

РЕЗУЛЬТАТ:

Пример оператора ?:

b = (Vol<2 || Vol>100) ? true:false;

Пример оператора switch - case:

switch(variable) {
    case value_1: {
        //блок операторов_1
        break;
    }
    case value_2: {
        //блок операторов_2
        break;
    }
    case value_n: {
        //блок операторов_n
        break;
    }
    default: {
        //блок операторов по умолчанию
    }
}

Операторы цикла

В языке JavaScript три оператора цикла: for, for-in, while.

Пример оператора for

for(i=0; i<n; i++)
{
    text+=" ";
}

Пример оператора for-in

var sprops="<H2>Свойства объекта window</H2>"
for(props in window)
    sprops+="<b>" + props + "</b>" + ":" + window[props].toLocaleString().substr(0,90) + "<br>";
document.write(sprops);

РЕЗУЛЬТАТ:

Пример использования оператора while, continue, break

<script>
var i=0;
var n=10;
var text='';
while(i<n)
{
    text+=", "+i;
    i++;
    if(i<5)continue;
    text+=", ! ";
    if(i>8)break;
}
document.write(text);
</script>

РЕЗУЛЬТАТ:

Кроме этих операторов в организации цикла могут участвовать еще два оператора: break (выход из цикла) и continue (переход на следующий шаг).

Прочие операторы

. Доступ к полю объекта. ( document.write(Buf); )
[ ] Индексирование массива ( dim[i] )
( ) Изменение порядка вычислений или передача параметров функции
, Разделение выражений в многократном вычислении

Пример оператора "запятая"

for(i=0; i<n; i++, j++)

Неявное преобразование типов

Будьте внимательны при использовании неявного преобразований типов.
// Все эти сравнения выдадут 'true'!
console.log(false == '0');
console.log(null == undefined);
console.log(" \t\r\n" == 0);
console.log('' == 0);

// И эти тоже!
if ({}) // ...
if ([]) // ...

// а вот с NaN картина ещё интереснее:
console.log(NaN == NaN);    // false
console.log(NaN === NaN);   // false
console.log(isNaN(NaN));    // true



Встроенные функции JavaScript

Функции JavaScript

Все функции JavaScript рекомендуется помещать в контейнер <HEAD>...</HEAD>. Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.

Пример

<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <script><!--
        function ItR(a)
        {
            var o = document.getElementById(a);
            o.style.backgroundColor="red";
        }
        function ItW(a)
        {
            var o = document.getElementById(a);
            o.style.backgroundColor="white";
        }
        //-->
    </script>
</head>
<body>
<H2>Изменение фона при наведении </H2>
<img id="Ba" src="ba.gif" border="0" OnMouseOver="ItR('Ba')" OnMouseOut="ItW('Ba')">
<img id="Be" src="be.gif" border="0" OnMouseOver="ItR('Be')" OnMouseOut="ItW('Be')">
</body>
</html>

РЕЗУЛЬТАТ:

Изменение фона при наведении




Объекты JavaScript

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

В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.

JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.

Встроенный объект Array. Массивы в JavaScript

Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно следующими способами:

var a1 = new Array();
var a2 = new Array(3); // создает массив длиной 10
var a3 = new Array('раз','два','три');
var b1 = []
var b2 = [3] // создает массив из одного эллемента со значением 3
var b3 = ["a", 1, true]
a1 - массив, в котором нет ни одного элемента.
a2 - массив из трех элементов с неопределенным (undefined) значением.
a3 - массив, заданный списком своих элементов.

Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:

a3[5]='шесть';

Типы данных элементов массива в JavaScript могут быть различными:

a3[3]=4; a3[4]=5; a3[7]=false;

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

Для создания многомерного массива каждому элементу массива нужно присвоить другой массив:

var myArray = new Array(2);
for (i=0; i<3; i++){myArray[i] = new Array(2);}

Так можно создать массив, состоящий из трех строк и трех столбцов.

Это все числовые массивы. Также существуют и ассоциативные массивы:

var a=new Array()
a['top']='Верх'
a['bottom']='Низ'
//а потом обращатся:
var c=a['top']

Свойства объекта Array

  • length. Число элементов массива.
var c = new Array('раз','два','три',4,5);
document.write('Число элементов массива c: '+c.length+'\nc='+c);

РЕЗУЛЬТАТ:

Методы объекта Array

  • push( ). добавляюет значение с конца массива
  • pop( ). вынимает значение с конца массива
  • shift( ). добавляюет значение с начала массива
  • unshift ( ). вынимает значение с начала массива. shift/unshift обычно приводят к перенумерации всего массива. shift сдвигает все элементы на единицу влево, а unshift - вправо. Поэтому на больших массивах эти методы работают медленнее, чем push/pop.
  • concat( ). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b);
    Здесь элементы массива b добавляются к элементам массива a.
  • join([разделитель]). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; '); Чтобы преобразовать строку в массив используется метод split объекта String:
    // строка для преобразования
        var str = '1 2 3 4 5 6 7 8 9 10';
        // преобразуем в массив
        var arr = str.split(' ');
        // Переменная arr будет содержать элементы [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        // пример 2
        var arr2 = str.split(' ', 3);
        // Переменная arr2 будет содержать элементы [1, 2, 3]
  • reverse( ). Меняет порядок элементов массива на обратный.
  • slice(begin[, end]). Возвращает подмассив с индексами begin…end. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
  • splice(index, deleteCount[, element1,…, elementN]) Удалить deleteCount элементов, начиная с index, и вставить на их место element1…elementN
  • sort( fn ). Сортирует массив. Если функция не передана, то все элементы сортируются как строки. Вместо 0,6,18,24,25, он сортирует 0,18,24,25,6. Для сотрировки числового массива используйте следущий вариант:
    var a=[15,7,100,50];
    a.sort(function(a,b){return a-b;});
    alert(a.join()); // Выведет 7,15,50,100
  • toString( ) - преобразует элементы массива в строку, используя в качестве символа-разделителя запятую.
  • indexOf(искомый_элемент, индекс), lastIndexOf(искомый_элемент, индекс) - возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Первый аргумент метода указывает значение элемента, индекс которого нужно найти, второй аргумент (необязательный), указывает индекс с которого будет начинаться поиск. Если одинаковых вхождений несколько, выбирается наименьший (первый) индекс. Если элемент с искомым значением не найден, метод вернет -1. Внутри метода для поиска используется строгое сравнение ( === ) lastIndexOf() - ищет с конца.
    var a = [1,2,3,3,4,5,3];
    a.indexOf(3);    //вернет 2
    a.indexOf(3,4);  //вернет 6
    a.indexOf(35);   //вернет -1: нет элемента с таким значением
    a.lastIndexOf(3);  //вернет 7
  • forEach(callback, thisArg) - callback-функция, которую метод forEach() будет вызывать для каждого элемента массива, должна иметь три параметра: первый параметр принимает в качестве аргумента - значение элемента массива, второй - индекс элемента, и третий - сам массив. Однако, если нужно использовать только значения элементов массива, можно написать функцию только с одним параметром. Второй аргумент - thisArg (необязательный) будет передан в качестве значения this
    var arr = [2,3,4];
    
    function foo(value) {
        var sum = value * this;
        return document.write(sum + "<br>");
    }
    
    arr.forEach(foo, 5); //второй аргумент будет передан в качестве значения this
    
    //пример с тремя параметрами
    var a = [17,22,13];
    
    a.forEach(function(el, idx, a) {
            document.write('a['+idx+'] = '+el+' в ['+a+'] <br>');
        });
  • filter(callback, thisObject) - возвращает новый массив, который будет содержать только те элементы массива, для которых вызов функции callback возвратит true.
    function isBig(element, index, array) {  //возвращает числа, которые больше или равны 10
        return (element >= 10); //если значение элемента больше или равно 10 - выражение вернет true
    }
    var filtered = [11, 3, 7, 50, 25].filter(isBig);  //filtered[11, 50, 25]
  • map(callback) - возвращает новый массив, который будет состоять из результатов вызова функции callback(item, idx, ar) для каждого элемента массива.
    var a = [5, 6, 7];
    
        var b = a.map(function(item, idx, arr) {
        return item * item; }); // b = [25, 36, 49]
  • every(callback) - возвращает true, если для всех элементов массива указанная функция, используемая для их проверки, вернет true.
  • some(callback) - возвращает true, если во время проверки в указанной функции один или несколько элементов вернут true.
  • reduce(callback, initialValue), reduceRight(callback, initialValue) - применяет указанную функцию (callback) в отношении сразу двух значений в массиве, перебирая элементы слева направо, сохраняя при этом промежуточный результат. Аргументы функции callback: (previousValue, currentItem, index, array)
    previousValue - возвращаемый результат callback функции (он же промежуточный результат)
    currentItem - текущий элемент массива (элементы перебираются по очереди слева-направо)
    index - индекс текущего элемента
    array - обрабатываемый массив
    initialValue (инициализирующее значение) - объект, используемый в качестве первого аргумента первого вызова функции callback. Проще говоря, значение previousValue при первом вызове равно initialValue. Если initialValue нет, то оно равно первому элементу массива, а перебор начинается со второго

delete - Удалить элемент ассоциативного массива, например:

var arr = [];
// присваиваем значения
arr['first'] = 'Первое значение';
arr['second'] = 'Второе значение';
arr['third'] = 'Третье значение';
// удаляем элемент с ключом second
delete arr['second'];

Для обхода ассоциативного массива используется следующий цикл:

for (var x in ar_list) //выведем на экран все элементы
document.write(x+' : '+ar_list[x] + "<br>");

Встроенный объект Date

С помощью методов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта:

var today = new Date();

Методы объекта Date

  • getYear. Возвращает год:
    var nYear = today.getYear();
  • getMonth. Возвращает номер месяца:
    var nMonth = today.getMonth(); Имейте в виду, что январь - это 0, февраль - 1 и т.д.
  • getDate. Возвращает значение календарной даты в диапазоне от 1 до 31:
    var nDate = today.getDate();
  • getDay. Возвращает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
    var nDay = today.getDay();
  • getHours. Возвращает количество часов, прошедших после полуночи:
    var nHours = today.getHours();
  • getMinutes. Возвращает количество минут, прошедших с начала часа:
    var nMinutes = today.getMinutes();
  • getSeconds. Возвращает количество секунд, прошедших с начала минуты:
    var nSeconds = today.getSeconds();
  • getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
    var nMillisec = today.getTime();
  • getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах:
    var nOffsetMillisec = today.getTimeZoneOffset();
  • parse. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода можно просто сослаться на имя класса Date, а создавать объект класса Date не надо:
    var nMS = Date.parse(prm);
    Параметр prm может принимать значения: локальные дата и время ("21 Apr 2001 18:00:00"); дата и время по Гринвичу ("21 Apr 2001 14:00:00 GMT"); дата и время по Гринвичу cо смещением ("21 Apr 2001 18:00:00 GMT+0400").
  • UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. Для вызова этого метода, так же как и метода parse можно просто сослаться на имя класса Date:
    var nMSec = Date.UTC(year, month, date, hours, min, sec, ms);
    Имейте в виду, что январь - это 0, февраль - 1 и т.д.
  • setYear. Устанавливает год в объекте класса Date:
    today.setYear(nYear);
  • setMonth. Устанавливает номер месяца:
    today.setMonth(nMonth);
  • setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31:
    today.setDate(nDate);
  • setDay. Устанавливает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
    today.setDay(nDay);
  • setHours. Устанавливает количество часов, прошедших после полуночи:
    today.setHours(nHours);
  • setMinutes. Устанавливает количество минут, прошедших с начала часа:
    today.setMinutes(nMinutes);
  • setSeconds. Устанавливает количество секунд, прошедших с начала минуты:
    today.setSeconds(nSeconds);
  • setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
    var nMillisec = today.setTime();
  • toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу:
    "Sat, 21 Apr 2001 14:00:00 GMT"
  • toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени:
    "04/16/2001 18:00:00".



Объекты брaузера

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

Практически в любом сценарии JavaScript необходимы такие объекты, как окно - window и документ - document.

Свойства объекта window

  • name. Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>.
  • self, window. Синонимы имени окна. Относятся к текущему окну.
  • top. Синоним имени окна. Относится к окну верхнего уровня.
  • parent. Синоним имени окна. Относится к окну, содержащему набор фреймов.
  • frames. Массив всех фреймов данного окна.
  • length. Количество фреймов в родительском окне.
  • status. Текущее сообщение, отображаемое в строке состояния окна брaузера.

Методы объекта window

  • alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
    alert("Рад видеть Вас на моем сайте! Пошли дальше?");
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
    <!--
    if(confirm("Рад видеть Вас на моем сайте! Пошли
        дальше?"))
            {document.write("Пошли!");}
    else
    {document.write("Не хочешь - не надо... ");}
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script><!--
    var yourName=prompt("Как Вас зовут?", "Маша");
    if(yourName=="Маша")
        {document.write("Угадал!");}
    else
        {document.write("Не угадал. Вас зовут " + yourName);}
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна.
toolbar Отображение стандартной инструментальной линейки
[=yes|no] | [=1|0]
location Отображение поля ввода адреса документа
[=yes|no] | [=1|0]
status Отображение строки состояния
[=yes|no] | [=1|0]
menubar Отображение линейки меню
[=yes|no] | [=1|0]
scrollbars Отображение полос прокрутки
[=yes|no] | [=1|0]
resizable Изменение размеров нового окна
[=yes|no] | [=1|0]
width Ширина окна в пикселах
height Высота окна в пикселах
fullscreen Полноэкранный режим
copyhistory Сохранение истории загрузки документов в данное окно
[=yes|no] | [=1|0]
directories Наличие в данном окне кнопок групп новостей
[=yes|no] | [=1|0]

Пример

<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<body
    lang=RU>
<script
    language="JavaScript">
    <!--
    var
        newWindow=open("ann.htm","","toolbar=no,menubar=no,width=300,height=200")
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • close. Закрытие созданного или основного окна:
    newWindow.close();
    Текущее окно брaузера можно закрыть одним из следующих способов:
    window.close(); self.close();
  • setTimeout. Установка таймера. Применяется для ограничения времени ввода пароля, создания бегущих строк и всевозможных анимационных эффектов. Метод имеет два параметра. Первый задает выражение JavaScript, которое запускается по прошествии времени, указанного вторым параметром в миллисекундах. Заданное выражение запускается один раз.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<H3>Через 2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>
<img id="B_B" src="be.gif">
<script><!--
function change(){
    document.getElementById("B_B").src="ba.gif";
}
setTimeout("change()", 2000);
//-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • clearTimeout. Сброс таймера. Для останова таймера метод setTimeout нужно вызвать с возвратом идентификатора, т.е.
    idTimer=setTimeout("change()", 2000);
    а затем этот идентификатор передать методу clearTimeout в качестве параметра:
    clearTimeout(idTimer);

  • setInterval(prm1,prm2). Установка периодического таймера. Метод имеет два параметра. задает выражение JavaScript, которое периодически запускается по прошествии времени, указанного вторым параметром в миллисекундах.
  • clearInterval(prm). Сброс таймера, установленного методом setInterval. Для сброса таймера метод setInterval нужно вызвать с возвратом идентификатора, т.е. idTimer=setInterval(”change()”, 2000); а затем этот идентификатор передать методу clearTimeout в качестве параметра: clearInterval(idTimer);

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<H3>Через 2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>
<img id="B_B" src="be.gif">
<script><!--
    var a="be";
    function change(){
        a=(a=="be"?"ba":"be");
        document.getElementById("B_B").src=a+".gif";
    }
    setInterval("change()", 2000);
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

  • blur( ). При вызове метода окно теряет фокус.
  • focus( ). При вызове метода окно получает фокус.
  • MoveTo(x,y). Перемещает окно в точку с координатами.
  • MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз.
  • ResizeTo(x,y). Изменяет размер окна на указанные.
  • ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей.
  • print( ). Печать документа. Вызывает окно выбора параметров печати.
  • scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,y становится левой верхней точкой окна.
  • ScrollBy(x,y). Прокручивает окно на x,y пикселей.
  • stop( ). Прекращает загрузку документа в окно браузера.

Свойства объекта document

  • URL. Полный URL документа.
  • location. Полный URL документа.
  • referrer. URL вызывающего документа.
  • title. Заголовок документа, определенный тегом <TITLE>.
  • bgColor. Цвет фона документа.
  • fgColor. Цвет текста.
  • linkColor. Цвет cсылок.
  • alinkColor. Цвет выбранных cсылок.
  • vlinkColor. Цвет посещенных cсылок.
  • links. Массив всех cсылок в документе.
  • anchors. Массив локальных меток. Применяется для организации ссылок внутри документа.
  • applets. Массив аплетов Java.
  • forms. Массив форм в виде объектов.
  • images. Массив растровых изображений.
  • embeds. Массив объектов plug-in.
  • lastModified. Дата последнего изменения документа.
  • cookie. Значение cookie для текущего документа.

Пример

<html>
<head>
    <meta http-equiv=Content-Type
          content="text/html; charset=utf-8">
    <script type="text/javascript">
        <!--
        document.bgColor="FFFF00";
        document.fgColor="800080";
        document.linkColor="000000";
        document.alinkColor="FF0000";
        document.vlinkColor="0000FF";
        //-->
    </script>
</head>
<body lang=RU>
<H2>Изменение
    цвета фона, текста и ссылок</H2>
<a href="be.htm"><img
        src="be.gif" align="bottom">Кто это?</a><br>
<a href="ba.htm"><img
        src="ba.gif" align="bottom">Кто это?</a>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

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

  • anchor. Локальная метка, определенная тегом <A>.
  • form. Форма, определенная тегом <FORM>.
  • history. Список посещенных URL.
  • link. Текст или изображение, играющие роль гипертекстовой ссылки, созданной тегом <A>, в котором дополнительно заданы обработчики событий onClick и onMouseOver.

Методы объекта document

  • сlear. Удаление содержимого документа из окна просмотра.
  • write. Запись в документ произвольной HTML-конструкции.
  • writeln. Аналогичен write, но с добавлением символа перевода строки в конец строки.
  • open. Открытие выходного потока для записи в HTML-документ данных типа MIME при помощи методов write и writeln.
  • close. Закрытие потока данных, открытого методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.
  • getElementById(a) Получить объект по его ID
  • getElementsByTagName(tag) Получить массив объектов по имени тега

Ссылки в документе

Для каждой ссылки, размещенной в HTML-документе, создается отдельный объект. Все такие объекты находятся в объекте document как элементы массива links. Анализируя эти элементы, сценарий JavaScript может определить свойства каждой ссылки в HTML-документе:

  • length. Количество ссылок в HTML-документе, т.е. количество элементов в массиве links.
  • hash. Имя локальной ссылки, если она определена в URL.
  • host. Имя узла и порт, указанные в URL.
  • hostname. Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP.
  • href. Полный URL.
  • pathname. Путь к объекту, указанный в URL.
  • port. Номер порта, использумого для передачи данных с сервером, указанным в ссылке.
  • protocol. Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке.
  • search. Строка запроса, указанная в URL после символа "?".
  • target. Имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного тегом <FRAMESET>, или одно из зарезервированных имен - _top, _parent, _self, _blank.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<P><A HREF="http://kdg.HtmlWeb.ru/"
      TARGET="_top">Моя страница</A>
<P><A HREF="http://www.dstu.edu.ru/">Здесь учился</A>
<P><A HREF="http://www.tnk-ug.ru/">Здесь работаю</A>
<HR>
<H1>Свойства ссылок</H1>
<script type="text/javascript">
    <!--
    // Цикл по всем ссылкам
    for(i=0; i<document.links.length; i++)
    {
// Разделительная линия
        document.write("<HR>");
// Текст ссылки, выделенный жирным шрифтом
        var Txt=document.links[i] + "<br>";
        document.write(Txt.bold());
// Все свойства ссылки
        document.write("host: ".italics() + document.links[i].host +
            "<br>");
        document.write("hostname: ".italics() +
            document.links[i].hostname + "<br>");
        document.write("href: ".italics() + document.links[i].href +
            "<br>");
        document.write("pathname: ".italics() +
            document.links[i].pathname + "<br>");
        document.write("port: ".italics() + document.links[i].port +
            "<br>");
        document.write("search: ".italics() + document.links[i].search
            + "<br>");
        document.write("target: ".italics() + document.links[i].target
            + "<br>");
    }
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

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

navigator.userAgent - для Вашего браузера это:

Изменение содержимого страницы

Одной из часто встречающихся при разработке веб-приложений задач, является возможность добавления или удаления элементов страницы. Свойство innerHTML для любого элемента веб-страницы возвращает строку, содержащую HTML-код, заключенный между открывающим и закрывающим тегами элемента. Свойство outerHTML - аналогичное свойству innerHTML, но содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента. innerHTML может использоваться для замены содержимого элемента после формирования страницы в отличие от document.write:

<script>
    function addText(id,txt){
        document.getElementById(id).innerHTML+=document.getElementById(txt).value + '<br />';
    }
</script>
<div id="str"></div>
<form>
    <input id="text" type="text" value="" placeholder="Введите текст" />
    <input type="button" onclick="addText('str','text')" value="Нажми меня" />
</form>

РЕЗУЛЬТАТ:


Более подробно эта тема освещена в разделе DHTML->Динамическое содержаение


Аналогично можно изменять содержимое страницы используя DOM-модель html-документа:

<script>
    function addText2(id,txt){
        var str=document.getElementById(txt).value;
        var o=document.getElementById(id);
        o.appendChild(document.createTextNode(str));
        o.appendChild(document.createElement('br'));
    }
</script>
    <div id="str2"></div>
<form>
    <input id="text2" type="text" value="" placeholder="Введите текст" />
    <input type="button" onclick="addText2('str2','text2')" value="Нажми меня" />
</form>
</div>

РЕЗУЛЬТАТ:

  • appendChild - добавляет детёныша внутрь объекта
  • createTextNode - создает текстовый элемент
  • createElement - создает тег

Ознакомьтесь c более сложным примером, использующим DOM-модель: добавление строки в таблице с помощью DOM.

Более детально рассмотрим DOM модель в следющем разделе.

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

Создание cookie

В сценарии JavaScript cookie создается с помощью свойства document.cookie. Пары имя-значение не могут содержать пробелов, запятых и точек с запятыми. Поэтому все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript имеет две функции, обрабатывающие escape-последовательности: encodeURIComponent и decodeURIComponent.

Пара имя-значение является единственным необходимым параметром при создании cookie. Указание только пары имя-значение создает cookie, который сохраняется только на протяжении текущего сеанса брaузера. При создании cookie можно задать дату его автоматического удаления. В этой паре надо указать имя expires и значение в стандартном формате времени по Гринвичу (GMT). Простейшим способом преобразования в формат GMT является использование одного из методов встроенного класса Date: toGMTString. Кроме этого, создавая cookie, можно указать также путь (path), домен (domain) и информацию безопасности(secure). Извлечь эту информацию нельзя.

Удаление cookie

Самый простой способ удаления cookie - установить для него такое время автоматического удаления, которое уже прошло.

Практическое применение cookie

  • Индивидуальная настройки параметров Web-страниц.
  • Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ.
  • Хранение текущего состояния сетевой игры.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
    <!--
    function parseCookie() {
        // Разделение cookie.
        var cookieList = document.cookie.split(";");
        // Массив для каждого cookie в cookieList.
        var cookieArray = new Array();
        for (var i = 0; i < cookieList.length; i++) {
            // Разделение пар имя-значение.
            var name = cookieList[i].split("=");
            // Декодирование и добавление в cookie-массив.
            cookieArray[decodeURIComponent(name[0].trim())] = decodeURIComponent(name[1].trim());
        }
        return cookieArray;
    }
    function setCookie(visits) {
        /* Счетчик числа посещений и
         определение срока хранения в 1 год. */
        var expireDate = new Date();

        // Установка даты автоматического удаления.
        expireDate.setYear(expireDate.getYear() + 1);
        // Сохранение числа посещений.
        document.cookie = "visits=" + encodeURIComponent(visits) +
            "; expires=" + encodeURIComponent(expireDate.toGMTString()) + ";";
    }
    if ("" == document.cookie) {
        // Инициализация cookie.
        setCookie(1);
        document.write("<H3>Поздравляю Вас с первым посещением моего сайта.</H3>");
    }
    else {
        // Анализ cookie.
        var cookies = parseCookie();
        // Вывод приветствия, числа посещений и увеличение числа посещений на 1.
        document.write("<H3>Рад снова видеть Вас на моем сайте! Число Ваших посещений - " +cookies['visits'] + " !</H3>");
        // Обновление cookie.
        setCookie(isNaN(cookies['visits'])? 1 : (++cookies['visits']));
    }
    //-->
</script>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

Другой пример использования Cookie

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

Перехват и обработка событий

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

// Присвоить функцию свойству onload объекта Window.
// Функция - обработчик события: она вызывается, когда документ будет загружен
window.onload = function() {
// Отыскать элемент <form>
    var elt = document.getElementById("shipping_address");

    // Зарегистрировать обработчик события, который будет вызываться
    // непосредственно перед отправкой формы
    elt.onsubmit = function() { return validate(this); }
}

Новая схема перехвата и обработки событий:

<button id="mybutton">Щелкните меня!</button>
<script>
    var b = document.getElementById("mybutton");
    b.onclick = function() {
        alert("Спасибо, что щелкнули на мне!");
    };

    b.addEventListener("click", function() {alert('Еще раз спасибо!')}, false);
</script>

Вызов метода addEventListener() со строкой «click» в первом аргументе никак не влияет на значение свойства onclick. Во фрагменте, приведенном выше, щелчок на кнопке приведет к выводу двух диалоговых окон alert(). Но важнее то, что метод addEventListener() можно вызвать несколько раз и зарегистрировать с его помощью несколько функций-обработчиков для одного и того же типа события в том же самом объекте. При появлении события в объекте будут вызваны все обработчики, зарегистрированные для этого типа события, в порядке их регистрации.

Многократный вызов метода addEventListener() для одного и того же объекта с теми же самыми аргументами не дает никакого эффекта - функция-обработчик регистрируется только один раз и повторные вызовы не влияют на порядок вызова обработчиков.

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

Internet Explorer версии ниже IE9 не поддерживает методы addEventListener() и removeEventListener()


При вызове обработчика событий ему передается объект события в виде единственного аргумента. Свойства объекта события содержат дополнительную информацию о событии. Свойство type, например, определяет тип возникшего события. В IE версии 8 и ниже обработчикам событий, зарегистрированным установкой свойства, объект события при вызове не передается. Вместо этого объект события сохраняется в глобальной переменной window.event. Для переносимости обработчики событий можно оформлять, как показано ниже, чтобы они использовали переменную window.event при вызове без аргумента:

function handler(event) {
    event = event || window.event;
    // Здесь находится реализация обработчика
}

Объект события передается обработчикам событий, зарегистрированным с помощью метода attachEvent(), но они также могут использовать переменную window.event

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

if(e && e.stopPropagation){e.stopPropagation();e.preventDefault();}       // для DOM-совместимых браузеров
else if(window.event)window.event.cancelBubble=true; //для IE

Про захват и обработку событий читайте здесь: всплытие и захват событий.

В html5 добавлены новые обработчки событий объекта window: onafterprint onfocus ononline onresize onbeforeprint onhashchange onpagehide onstorage onbeforeunload onload onpageshow onundo onblur onmessage onpopstate onunload onerror onoffline onredo

обучение программированию
индивидуальные курсы
в Ростове-на-Дону

java script примеры
Читать дальше: DOM модель html-документа