Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Топ:
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Основы обеспечения единства измерений: Обеспечение единства измерений - деятельность метрологических служб, направленная на достижение...
Интересное:
Отражение на счетах бухгалтерского учета процесса приобретения: Процесс заготовления представляет систему экономических событий, включающих приобретение организацией у поставщиков сырья...
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Дисциплины:
 2017-10-17 |
 1290 |
из
5.00
|
Заказать работу |
|
|
|
|
Сценарий в HTML-документе можно размещать тремя способами:
Контейнеры со сценариями могут размещаться в любом месте HTML-документа. Количество сценариев в одном HTML-документе не ограничено.
Выполнение сценариев происходит при загрузке HTML-документа и при наступлении событий. Во время загрузки HTML-документа браузер последовательно просматривает встречающиеся сценарии и пытается их выполнить. Если встретился вызов функции, то браузер ищет её описание в текущем и во всех ранее загруженных сценариях. Поэтому описание функции должно размещаться либо в одном сценарии с вызовом, либо в сценариях расположенных выше вызова функции.
Сценарий можно хранить в отдельном файле. Для вставки сценария в HTML-документ служит атрибут SRC тега <SCRIPT>. Сценарий, размещённый в отдельном файле, можно использовать на многих страницах сайта. В примере 1.2 рассматривается одна из страниц сайта сети магазинов.
Пример 1.2
html><!-- СКРИПТ загружается из файла primJs.js--> <HEAD>
<TITLE>Сеть</title>
</head>
<body>
<SCRIPT language="JavaScript" src="PrimJs.js">
</script>
<H2 align=center style="color:green">Магазин "ПОДАРКИ"</h2>
Адрес: Лесная ул., д.2<P>
Транспорт: трамваи 7, 23, автобусы 56, 93
</body>
</html>
// Файл primJs.js
a="background-color:#00ffff; color:#ff00ff;"
a+="font-size:24pt; font-family:'Times New Roman'"
naim='Сеть магазинов "ВСЁ ДЛЯ ДОМА"'
var da=new Date()
d=da.getDate()+"."+da.getMonth()+"."+da.getYear()
document.write('<P align=center style= "'+a+'">'+
naim+'</p><P>Сегодня '+d+'</p>')
Выполнить пример 1.2
Общие для страниц всех магазинов сети заголовок с названием сети и сегодняшняя дата формируются скриптом, размещённым в отдельном файле primJs.js. Метод write(HTML-код) служит для вставки в страницу размеченного текста (HTML-кода). Этот метод применяется только при загрузке страницы, так как его применение после окончания загрузки приведёт к стиранию старого содержимого страницы.
|
|
Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.
Лабораторная работа №2.2
События
Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.
Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.
Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.
Реакция на событие в отдельном элементе
Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.
Пример 2.1.
|
|
<HTML>
<BODY>
<P align=right ID='alfa'
onMouseOver="document.all.alfa.align='center'
"onMouseOut="this.align='left'">
События onMouseOver и onMouseOut </p>
</body>
</html>
Выполнить пример 2.1
Страница в примере 2.1 состоит из одной строки, заключённой в контейнер <P> …</p>. В объектной модели страницы событие, происходящее с объектом P, происходит также и с родительским объектом BODY. Чтобы локализовать реакцию на событие только пределами строки, то есть объекта P, сценарий реакции на события помещен в тег <P >.
В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0. Ключевое слово this означает ссылку на текущий объект.
Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.
Пример 2.2
<HTML>
<P align=right ID='alfa' onMouseOver="M_Over()"
onMouseOut="M_Out()">
Событие onMouseOver</p>
<SCRIPT>
function M_Over()
{ document.all.alfa.align='center'
document.all.alfa.style.color='FF00FF'
}
function M_Out()
{ document.all.alfa.align='left'
document.all.alfa.style.color='0000FF'
}
</script>
</html>
Выполнить пример 2.2
Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:
Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:
Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.
Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.
При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.
|
|
|
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!