Var timeStr;

function clock()

{

var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds();

timeStr = " " + hours;

timeStr +=((minutes < 10? ":0":":") + minutes;

timeStr +=((seconds < 10? ":0":":") + seconds;

}

После вызова этой функции в timeStr сохранится строчка вида 13:04:09.

Методы установки даты-времени.

setDate	Установка числа (1-31)
setDay	Установка дня недели (0-6, воскресенье = 0)
setHours	Установка часов в 24-часовом формате
setMinutes	Установка минут (0-59)
setSeconds	Установка секунд (0-59)
setTime	Установка миллисекунд с 1.1.70 00:00:00 GMT
setYear	Установка года (четырехзначного) (1970-...)

ПРИМЕР Js26c

Объект Math

ПРИМЕР Js27

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

Свойства

E	Постоянная Эйлера
LN10	Значение натурального логарифма числа 10
LN2	Значение натурального логарифма числа 2
LOG10E	Значение десятичного логарифма экспоненты (числа e)
LOG2E	Значение двоичного логарифма экспоненты
PI	Значение числа пи
SQRT1_2	Значение квадратного корня из 1/2
SQRT	Значение квадратного корня из 2

Методы

abc(x)	Возвращает модуль (абсолютное значение) числа x.
sin(x)	Возвращает синус x.
cos()	Возвращает косинус x.
tan(x)	Возвращает тангенс x.
asin(x)	Возвращает арксинус x.
acos(x)	Возвращает арккосинус x.
atan(x)	Возвращает арктангенс x.
exp(x)	Возвращает е в степени x.
log(x)	Возвращает натуральный логарифм x.
ceil(x)	Округляет x до ближайшего целого сверху.
floor(x)	Округляет x до ближайшего целого, меньшего, чем заданное.
min(x1,x2)	Возвращает меньшее из чисел x1, x2.
max(x1,x2)	Возвращает большее из чисел x1, x2.
pow(x1,x2)	Возвращает x1 в степени x2.
round(x)	Округляет x до ближайшего целого.
sqrt(x)	Возвращает квадратный корень из x.
random()	Возвращает случайное число между 0 и 1.

Пример:

var S = Math.pow(x, z);

В S будет результат возведения x в степень z.

var dist = Math.sqrt((x-x0)*(x-x0) + (y-y0)*(y-y0));

В dist будет расстояние от точки (x0, y0) до точки (x, y).

Объект Function.

ПРИМЕР Js27a, Js27b, Js27c

Этот класс позволяет пользоваться функцией как объектом. Конструктор объекта Function имеет вид:

var myFunc = new Function("аргумент1", "аргумент2", …." тело функции")

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

Объекты типа Function можно вызывать таким же способом как и функции, объявленные обычным способом:

myFunc("a","b").

Примеры:

Объект Function можно использовать как обработчик событий:

window.onload=new Function("document.bgColor = 'red' ");

При загрузке страницы цвет фона станет красным.

Рассмотрим два разных способа задания функции:

f unction sample(a, b)

{ return (a+b)/2; }

sample = new Function("a", "b", "return (a+b)/2"));

Эти две функции выполняют одну и ту же операцию, и их вызов одинаков:

z = sample(3, 5)

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

length - количество параметров, указанных в определении функции.

caller - содержит ссылку на функцию, из которой была вызвана данная функция. Если функция не вызывалась из другой функции, то значение этого свойства равно null.

Класс String

Класс String - это реализация строк в JavaScript. Конструктор объекта выглядит следующим образом:

var str = new String(строка);

где строка – это начальное значение переменной str.

Свойство объектов класса String:

length – возвращает количество символов в строке, т.е. её длину.

ПРИМЕР Js28a

Методы объектов класса String:

anchor(имя)	Помещает строку внутр тега <a>, создавая якорь: <a name="имя">строка</а> Js28b
big()	Отображает строку так если бы она находилась в теге BIG. Js28c
blink()	Отображает строку так если бы она находилась в теге BLINK.
bold()	Отображает строку так если бы она находилась в теге B. Js28d
small()	Отображает строку так если бы она находилась в теге SMALL. Js28d
strike()	Отображает строку так если бы она находилась в теге STRIKE.
sub()	Отображает строку так если бы она находилась в теге SUB.
sup()	Отображает строку так если бы она находилась в теге SUP.
fixed()	Отображает строку так если бы она находилась в теге TT.
italics()	Отображает строку так если бы она находилась в теге I.
charAt()	Возвращает символ определенный индексом, индексация производится с нуля.

ПРИМЕР Js28d

Методы объектов класса String для редактирования строк.

indexOf(подстрока, n)	Возвращает индекс первого появления заданной подстроки. Если подстрока не обнаруживается - возвращает -1. (если задана переменная n, то поиск ведётся начиная с n-ной позиции). Находится первое вхождение подстроки. Js28e, Js28f
lastIndexOf(подстрока, n)	Аналогично, поиск идёт с конца. Находится последнее вхождение подстроки. Js28g
split(разделитель, n)	Разделяет строку на массив подстрок, находящихся между разделителями. Необязательная переменная n указывает длину массива подстрок. Js28h
substring(s1, s2)	Возвращает подстроку, начиная с элемента с номером s1 и заканчивая элементом с номером s2. Js28i
slice(s1, s2)	Возвращает строку, являющуюся подстрокой объекта, начиная с символа с номером s1 и заканчивая символом с номером s2. Js28j
toLowerCase()	Преобразовывает все символы строки в нижний регистр. Js28k
ToUpperCase()	Преобразовывает все символы строки в верхний регистр. Js28l
match(регулярное выражение)	Используется для поиска с помощью регулярного выражения.
replace(рег. выражение, текст)	Используется для нахождения совпадения между регулярным выражением и строкой, и замены сочетающейся подстроки новой подстрокой.
concat(s1,s2, ….)	Возвращает строку, которая образуется в результате объединения строк, передаваемых параметрами. Js28m
search()	Поиск строки с помощью регулярного выражения.
substr(n, l)	Возвращается строка, являющаяся подстрокой, начиная с символа с номером n, длины l. Js28n

Модель DOM

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

Рассмотрим приблизительную иерархическую схему DOM:

Иерархическая структура классов броузера

Объекты Window и Document существуют всегда и их не надо создавать конструктором.

Главный объект DOM(Document Object Model) – это объект Window.

Коллекции

Кроме объектов в модель входят коллекции.

Коллекции - это множества объектов, не связанных объектной иерархией. По сути они проедставляют собой массив объектов. Элементы нумеруются, начиная с нуля и доступ к ним осуществляется по индексу, например:

window.document.images[0]

Это обращение к первому изображению на странице.

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

window.frames(0)

В этом случае индекс играет роль парметра функции-метода item, имя которой опускается по умолчанию, как это общепринято:

window.frames.item(0).

ПРИМЕР Js29b

К элементам коллекции можно обращаться как к элементам ассоциативного массива (со строковыми индексами):

document.all["image1"]

ПРИМЕР Js29d

………………………………………….

<img src="im1.jpg" id="image1">

……………………………………

document.all(1)

document.all[1]

document.all.image1

ПРИМЕР Js29c

document.images("image1")

ПРИМЕР Js29e

Атрибут id играет ту же роль, что и атрибут name, но в объектном представлении элемента. Он не используется с фреймами, так как для них атрибут id не определен.

Если имеется несколько элементов с одинаковыми значениями атрибута id, нужно указать второй параметр (индекс) при обращении к коллекции:

document.all("image1",2)

Пример.

Просматривается коллекция all и выводится список всех элементов страницы.

<html>

<head> <title>Моя страница</title>

<script>

var elements="";

function start()

{

for (var loop=0;loop<document.all.length;++loop)

elements+="<br>"+document.all[loop].tagName;

pText.innerHTML+=elements;

}

</script>

</head>

<body onload="start()" >

<p id="pText"> Список элементов страницы: </p>

</body>

</html>

ПРИМЕР Js29a

Каждый элемент страницы имеет свою коллекцию all, состоящую из всех, входящих в него элементов. Кроме того, у каждого элемента имеется коллекция children - это коллекция прямых потомков данного элемента.

Например, у элемента html есть только два дочерних элемента - head и body.

Объект style

Объект style возвращает текущие параметры настройки таблицы стилей для данного элемента. Именно с его помощью и осуществляется их динамическое изменение.

Пример Js29g

<div id="myDiv" style="width:100;height:100;"></div>

<button onclick="myDiv.style.backgroundColor='blue';">

Изменить цвет</button>

Пример Js29f

Объект Window

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

window.имя_элемента

Коллекции объекта window

Объект window имеет единственную коллекцию frames, которая представляет собой массив из всех элементов frame объекта.

Основные свойства объекта window

parent	Ссылка на родительское окно.
self	Ссылается на текущее окно.
top	Ссылка на главное окно броузера.
name	Содержит имя окна.
opener	Окно, создаваемое текущим.
closed	Определяет, был ли экземпляр window закрыт.
status	Ссылка на объект содержащий адрес сайта и сообщение, отображаемое в строке состояния броузера. Js30a
document	Ссылается на документ, находящийся в данном окне.
event	Ссылка только для чтения на объект окна document.
history	Ссылка только для чтения на объект окна history.
location	Ссылка только для чтения на объект окна location. Содержит основные сведения о сайте.
navigator	Ссылка только для чтения на объект окна navigator.

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

open ( )	Открывает новое окно браузера.
close( )	Закрывает текущее окно браузера.
showHelp( )	Показывает окно справки.
alert( )	Показывает окно предупреждения с сообщением и кнопкой ОК.
prompt( )	Показывает диалоговое окно приглашения с сообщением, текстовым полем и кнопками ОК и Cancel.
confirm( )	Показывает окно подтверждения с сообщением и кнопками ОК и Cancel.
navigate( )	Загружает другую страницу с указанным адресом.
blur( )	Убирает фокус с текущей страницы; соответствующее событие — onblur.
focus( )	Устанавливает страницу в фокус; соответствующее событие — onfocus.
scroll( )	Разворачивает окно на заданные ширину и высоту.
setInterval( )	Указывает процедуре выполняться периодически через заданное количество миллисекунд.
setTimeOut( )	Запускает программу через заданное количество миллисекунд после загрузки страницы.
clearInterval( )	Обнуляет таймер, заданный методом setlnterval.
clearTimeout( )	Обнуляет таймер, заданный методом setTimeout.
execScript( )	Выполняет код сценария, по умолчанию JScript.

open (param1, param2, param3, param4 )

param1 - URL документа для изображения

param2 - (необязательный атрибут) строка, название окна

param3 - (необязательный атрибут) атрибуты нового окна

param4 - (необязательный атрибут) логическое значение, указывающее, заменять ли запись в истории текущим документом.

ПРИМЕР Js31a

window.open("new.html")

открывает новое окно в котором отобразится страница находящаяся в файле "new.html" текущего каталога.

<button onclick="window.close( )";> Текст </button>

showHelp(param1, param2)

param1 - URL справочного файла с расширением .hlp

param2 - (необязательный атрибут) выбранный раздел справочника.

window.showHelp('http://www.nnnn.com');

alert(param)

param - строка сообщения

alert("Привет!");

ПРИМЕР Js31d

prompt(param1, param2)

param1 - сообщение, отображаемое в окне.

param2 - (необязательный атрибут), заданное по умолчанию значение для поля ввода

window.prompt("Введите Ваше имя")

ПРИМЕР Js31e, Js31j, Js31jj

confirm(param1)

param1 - сообщение, отображаемое в окне.

ПРИМЕР Js31f

timeID=window.setTimeOut("Myfunc", 10000)

запустит на выполнение функцию Myfunc через 10 секунд, после загрузки страницы.

ПРИМЕР Js31g

timeID=window.setInterval("Myfunc", 5000)

функция Myfunc будет выполняться каждые 5 секунд.

ПРИМЕР Js31i

События объекта window

onblur	Выход окна из фокуса.
onfocus	Окно становится активным.
onhelp	Нажатие пользователем клавиши F1.
onresize	Изменение пользователем размеров окна.
onscroll	Прокрутка окна пользователем.
onerror	Ошибка при передаче.
onbeforeunload	Перед выгрузкой страницы, что позволяет сохранить данные.
onload	Страница полностью загружена.
onunload	Непосредственно перед выгрузкой страницы.

ПРИМЕР Js31kk, Js31LL

ПРИМЕР Js31в, , Js31bb

Объект Document

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

Основные свойства

activeElement	Извлекает активный элемент документа.
alinkColor	Устанавливает цвет активных ссылок на странице.
bgColor	Определяет цвет фона элемента.
fgColor	Устанавливает цвет текста
filesize	Размер файла документа (в байтах).
height	Высота всего документа в пикселах.
linkColor	Устанавливает цвет еще не посещенных гиперссылок на странице.
title	Устанавливает строку в элементе title
url	Возвращает URL-адрес документа
vlinkColor	Цвет посещенных ссылок на странице.
width	Ширина всего документа.

ПРИМЕР Js29

ПРИМЕР Js30b

ПРИМЕР Js31m

ПРИМЕР Js31n

При наведени на картинку меняется картинка, а также фон.

<HTML>

<HEAD>

<script type="text/JavaScript" language=”JavaScript”>

<!--

function BlueToRed()

{

document.bgColor="#ff0000";

document.images("picture").src="http://www.redroza.com/img/logo.gif";

}

function RedToBlue()

{

document.bgColor="#0000ff";

document.images("picture").src="http://www.e1.ru/news/images/285/551/285551/300x225_golubaya_roza.jpg";

}

//-->

</script>

</HEAD>

<BODY bgcolor = #0000ff topmargin = 100 buttommargin = 0 rightmargin = 0 leftmargin = 100>

<IMG src="http://www.e1.ru/news/images/285/551/285551/300x225_golubaya_roza.jpg" id="picture" onMouseout="RedToBlue();" onMouseover="BlueToRed();">

</BODY>

</HTML>

Основные методы

write( )	Записывает текст и код HTML в документ, находящийся в указанном окне.
writeln( )	Записывает текст и код HTML, заканчивающийся пробелом
close( )	Закрывает текущее окно браузера.

Коллекции

all	Массив всех элементов на странице
anchors	Все якоря на странице (элементы <a>).
forms	Содержит все формы, размещённые на странице.
applets	Содержит все апплеты, размещённые на странице.
images	Содержит все изображения, размещённые на странице.
layers	Содержит все слои, размещённые на странице.
links	Содержит все ссылки, размещённые на странице.
scripts	Содержит все скрипты, размещённые на странице.
styleSheets	Содержит все каскадные таблицы стилей, размещённые на странице.

Коллекция all – это все созданные HTML-дескрипторы (теги) на странице, в порядке их создания. Элементы нумеруются с нуля, для обращения к элементам используются круглые () скобки.

Основные свойства элементов из коллекции all:

className – имя класса

clientWidth – ширина элемента в пикселах

height – если в теге задан соответствующий атрибут, то это свойство содержит его значение, в противном случае не определено

id – идентификатор объекта, имеется у любого элемента

tagName – имя соответствующего тега

width - если в теге задан соответствующий атрибут, то это свойство содержит его значение, в противном случае не определено

children – коллекция элементов, являющихся прямыми потомками данного элемента (например для тега <html> прямыми потомками будут теги <head> и <body>)

Таким образом мы можем добраться до элементов нашей страницы и изменять их свойства (положение, размер и.т.д.). Для этого используются именованные свойства объектов в виде ассоциативных массивов (индексами являются строковые переменные).

length – количество элементов в коллекции.

item - метод, возвращающий элемент коллекции с указанным индексом.

Рассмотрим DOM на примере страницы

Примеры

1. Рассмотрим HTML код самой страницы:

<html>

<body>

<img src="pic1.gif" name="image1">

<form name="Myform">

имя: <input type="text" name="xname" value="">

<br>

email:<input type="text" name="email" value="">

<br><br>

<input type="button" name="myButton" value="Нажмите">

</form>

<img src="pic2.gif" name="image2">

<a href="www.my.ru">ссылка</a>

</body>

</html>

Теперь к любому элементу страницы можно обращаться через объект document, например:

document.forms(0).elements(2) – даст нам кнопку.

ПРИМЕР Js32a

Получить текст, который пользователь ввел в поле ввода можно, используя свойство value элемента ввода:

document.forms(0).elements(0).value

ПРИМЕР Js32b, Js32c

2.

obj.["objproperty"]="red" – свойству "objproperty" объекта obj присваивается значение "red".

...

ПРИМЕР Js32e

<layer ... name = "myLayer">...</layer>

document.layers["myLayer"]... - доступ к объекту "myLayer"через коллекцию layers.

ПРИМЕР Js32f, Js32g

Заметим, что до одного и того же элемента можно добраться различными способами.

3.

Рассмотрим фрагмент:

<img src="im1.gif" id="image1">

Как говорилось ранее доступ к объекту можно получить несколькими способами. Следующие два способа одинаковы и дают один и тот же результат.

document.all("image1").outerHTML="Текст"

document.images("image1").outerHTML="Текст"

<a id="somelink" href="my.html">

document.links("somelink").href="my1.html" – изменяет адрес на который указывает ссылка

<p id="par" class="someclass">Текст</p>

document.all("par").className = "anotherClass" – изменяет имя класса у "par"

<table id="mytable" border=2>

document.all("mytable").border=0 – делает размер границы у таблицы "mytable" равным нулю

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

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

Самый простой способ организации ссылки на элемент - задать ему атрибут id. При этом элемент будет представлен как объект, а его свойства будут доступны из скрипта. Если элемент страницы, к которому нужно обратиться, имеет уникальное ID-имя, то удобнее использовать прямое обращение к элементу, т.е. обращаться к нему не как к элементу коллекции, а как к отдельному объекты, Такое прямое обращение происходит быстрее. Обращение к коллекции требуется в тех случаях, когда нужно использовать свойства и методы самой коллекции.

Internet Explorer позволяет опускать ссылку на document, но у клиентов могут быть и другие броузеры:

<img id="image2" …………….>

…………………………………………………..

document.images["image2"].src="MyImg.jpg";

document.image2.height=50;

image2.weight=30%;

Примеры.

1. Загружается страница с исходным текстом. Затем выводится окно alert, после чего выводится новый текст на странице.

ПРИМЕР 26

<html>

<head> <title>Моя страница</title>

<script>

function start()

{alert(pText.innerText);

pText.innerText="Спасибо за визит!";

}

</script>

<body onLoad="start()">

<p id="pText">Привет!</p>

</body>

</html>

2. Из кода скрипта можно менять параметры документа и его элементов.

<script>

………………………….

someImage.src="image2.gif";

someImage.height=40;

………………………………

</script>

……………………………..

<body>

………………………………

<img id="someImage” src="im.gif">

………………………………

</body>

3. Можно изменить адрес, на который указывает гиперссылка.

<script>

………………………….

someLink.href="Site2.html";

……………………………

</script>

<body>

………………………………

<a id="someLink" href="Site122.html"> Текст</a>

Для доступа к свойствам элементов страницы можно использовать их объектные свойства. По синтаксису их названия совпадают с названиями из CSS, при этом у сложных наименований убирается дефис и второе слово пишется с большой буквы, например:

border-width соответствует borderWidth

font-family соответствует fontFamily

document.body.style.backgroundColor="green";

Доступ к элементам форм можно осуществить через коллекцию forms:

document.forms["MyForm"]

Здесь MyForm - id-имя соответствующей формы.

Можно обращаться и по имени как любому элементу:

document.MyForm

Элементы текущей формы доступны через ее коллекцию elements или через их id-имена:

document.MyForm.elements["txtName"]

или

document.MyForm.txtName

Здесь txtName - id-имя поля ввода.

Свойства позволяющие выделить фрагмент страницы:

innerHtml – текст внутри элемента, содержит все теги HTML, находящиеся внутри элемента.

innerText – текст внутри элемента (без тегов).

outerHTML – содержание элемента исключая содержимое вложенных тегов.

outerText – текст, внутри элемента, исключая текстовые фрагменты вложенных тегов.

Методы элементов из all для работы с текстом

insertAdjacementHTML(место, текст) – вставить код HTML – "текст" на место – "место", псевдоэлемент CSS.

insertAdjacementText(место, текст) – вставить просто текст на указанное место.

<p id="par1">Текст<b>1</b></p>

par1.innerHTML = Текст<b>1</b>

par1.outerHTML = вся строка

par1.innerText = Текст

document.all("par1").insertAdjacementHTML("BeforeBegin", "<big>i</big>");

перед началом тега par1 вставит "<big>i</big>":

<big>i</big><p id="par1">Текст<b>1</b></p>

События

ПРИМЕР 28

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

obj.событие().

Например:

function My.OnClick() {описание функции}

……………………………………………….

<h2 id="My">Текст</h2>

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

<script>

function Myfunc() {описание функции}

</script>

…………………………………………..

<h2 onclick="Myfunc()">Текст</h2>

События поддерживаемые всеми элементами страницы:

onClick	Нажатие на левую кнопку мыши.
onContextMenu	Нажатие на правую кнопку мыши.
onDblClick	Двойной щелчок левой кнопкой мыши.
onHelp	Нажатие на клавишу F1.
onKeyDown	Нажатие на любую клавишу(но не отпуская её).
onKeyUp	Отпускание любой клавиши.
onKeyPress	Просто нажатие на любую клавишу.
onMouseDown	Нажатие на кнопку мыши(не отпуская её).
onMouseMove	Движение мыши.
onMouseout	Выход курсора из окна браузера.
onMouseover	Вход курсора в окно браузера.
onMouseUp	Отпускание кнопки мыши.
onStop	При нажатии на кнопку броузера "остановить".

Пример Js33d. Движение объекта по диагонали вниз.

Примеры Js35, Js36, Js37.

Пользовательские классы и объекты.

Примеры Js33b.

Здесь использовано свойство объектов constructor. Это свойство только для чтения. Это строка, которая содержит функциональный запрос, который был создан для создания объекта. Это свойство возвращает такую же строку, как и метод toSource().

Создание класса:

function Point(a, b, c)

{ this.x = a; this.y = b; this.color = c; }

……………………………………………………..

var SomePoint = new Point("50", "100", "red");

Примеры Js33b, Js33f

Изменение свойств:

SomePoint = (x:50, y:70, color:"green");

Пример Js33c

Добавление метода:

function Test()

{

if (this.x > 0 && this.x < 400) { return this.y > 0 && this.y < 400; }

else return false;

}

function Point1(x, y, color)

{

this.x = x || 20; // По умолчанию, если не задан x будет использоваться //число 20

this.y = y || 50;

this.color = color || "red";

this.Test = Test;

}

Здесь this.Test – переменная процедурного типа.

Пример Js33h

Использование метода: