Лабораторные работы МИРЭА JavaScript (1017114), страница 6
Текст из файла (страница 6)
<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>
<body lang=RU>
<H3>Через
2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>
<img id=B_B src="be.gif">
<script type="text/javascript">
<!--
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>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<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. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.
Ссылки в документе
Для каждой ссылки, размещенной в 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=windows-1251">
</head>
<body lang=RU>
<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>
2. Задание для самостоятельного выполнения
1. Создать html-файл lab_javascript_1.htm который будет выводит текст в тело документа. Обратите внимание на то как включен JavaScript в документ и на то, как осуществляется вывод в тело документа:
2. Дополните скрипт циклом так, что бы сообщение выводилось 10 раз:
3. Измените скрипт таким образом, что бы после слова Хеллоу, и до слова мир выводился номер текущей строки. Для сложения строк в JavaScript используется знак сложения.
4. Создайте файл test.js содержащий следующий код:
5. Что делает это фрагмент кода?
6. Создайте новый файл test.html:
7. Добавьте на страничку кнопку и сделайте так, что бы скрипт срабатывал при нажатии именно на эту кнопку.
8. Добавьте в документ картинку и сделайте так что бы скрипт срабатывал при наведении курсора на это изображение. А именно: выводилось окно с вопросом «Нравится ли вам картинка?».
9. Создайте пользовательскую функцию, которая будет запрашивать имя пользователя (метод prompt()), и выводить в документе (document.write()) фразу «Добрый день, Имя». Имя необходимо выделить зеленым цветом.
10. Модернизируем функцию из задания 9 и просим ввести пользователя Фамилию, Имя и Отчество. Вне зависимости ввели ли фамилию имя и отчество большими или маленькими буквами надо вывести в документ «Добрый день, ИВАНОВ А.В. Мы рады приветствовать вас на сайте <имя сайта>». Для этого делаем следующие:
- в три различные переменные вводим фамилию, имя и отчество;
- для переменной хранящей фамилию примените метод toUpperCase() результат запишите в новую переменную. Таким образом вы получите фамилию в верхнем регистре.
- для переменной хранящей имя используя метод string.substring(from, to) выберите первую буку и запишите ее в новую переменную. Теперь используя метод toUpperCase() переведите эту вашу новую переменную в верхний регистр.
- то же что делали для имени проделайте для отчетсва.
- в четвертую переменную необходимо получить адрес сайта на котором находится пользователь. Сделать это можно обратившись к объекту location а именно к свойству hostname объекта location и записав его в новую переменную.
- выведите на экран нужную фразу используя document.write(); /
* Обычно браузеры устроены так, что они игнорируют ошибки, которые могут возникнуть в скриптах. Но что бы отследить эти ошибки можно перейти на вкладку Консоль (в FireBug’e). Активировать консоль и после этого все ошибки будут видны в консоле.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
