Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

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

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

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

↑

⇐ ПредыдущаяСтр 11 из 25Следующая ⇒

Функции JavaScript

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

Пример

<html>

<head>

<!--

function ItR(a)

{

var o = eval(a);

o.style.backgroundColor="red";

}

function ItW(a)

{

var o = eval(a);

o.style.backgroundColor="white";

}

//-->

</script>

</head>

<H2>Изменение

фона при наведении </H2>

</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);

var a3 = new Array('раз','два','три');

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);}

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

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

length. Число элементов массива.

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

concat(). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b);
Здесь элементы массива b добавляются к элементам массива a.

join(). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; ');

reverse(). Меняет порядок элементов массива на обратный.

slice(). Выделяет часть из массива. В качестве параметров передаются значения начального и конечного индексов, между которыми происходит выделение. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.

Встроенный объект 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>

content="text/html; charset=windows-1251">

</head>

<!--

alert("Рад видеть Вас на моем сайте! Пошли дальше?");

//-->

</script>

</body>

</html>

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

Пример

<html>

<head>

content="text/html; charset=windows-1251">

</head>

<!--

if(confirm("Рад видеть Вас на моем сайте! Пошли

дальше?"))

{document.write("Пошли!");}

else

{document.write("Не хочешь - не надо... ");}

//-->

</script>

</body>

</html>

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

Пример

<html>

<head>

content="text/html; charset=windows-1251">

</head>

<!--

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=windows-1251">

</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=windows-1251">

</head>

<H3>Через

2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>

<!--

function change()

{document.getElementById("B_B").src="ba.gif";}

setTimeout("change()", 2000);

//-->

</script>

</body>

</html>

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

blur(). При вызове метода окно теряет фокус.

focus(). При вызове метода окно получает фокус.

MoveTo(x,y). Перемещает окно в точку с координатами.

MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз.

ResizeTo(x,y). Изменяет размер окна на указанные.

ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей.

print(). Печать документа.(не работает в IE 4)

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>

content="text/html; charset=windows-1251">

<!--

document.bgColor="FFFF00";

document.fgColor="800080";

document.linkColor="000000";

document.alinkColor="FF0000";

document.vlinkColor="0000FF";

//-->

</script>

</head>

<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. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.

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

Для каждой ссылки, размещенной в 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>

content="text/html; charset=windows-1251">

</head>

<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>

<!--

// Цикл по всем ссылкам

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>

Работа с формами

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

action. Значение атрибута ACTION тега FORM.

encoding. Значение атрибута ENCTYPE тега FORM.

method. Значение атрибута METHOD тега FORM.

target. Значение атрибута TARGET тега FORM.

elements. Массив всех элементов формы.

length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

Элементы форм

⇐ Предыдущая 6 7 8 9 101112 13 14 15 Следующая ⇒

Познавательные статьи:

Коммуникативные барьеры и пути их преодоления

Рынок недвижимости. Сущность недвижимости

Решение задач с использованием генеалогического метода

История происхождения и развития детской игры

Последнее изменение этой страницы: 2016-12-28; просмотров: 601; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 52.14.48.138 (0.008 с.)