Script.Htm:
<HTML>
<body
bgcolor=Turquoise>
</body>
<script language="JavaScript1.2">
var it=0
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
document.all.typing.style.visibility="visible"
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.onload=initialize
</script>
<big><span id="typing" style="visibility:hidden" align="left">Это пример DHTML - эффект печатной машинки. Далее на странице приведен пример JavaScript, в котором при нажатии на ссылку выскакивает окно-предупреждение. Следующий пример JavaScript позволяет изменять цвет фона при наведении курсора на ссылки Flaxen, Pink и Coral </span></big>
/* данный скрипт выводит заданный текст на экран с эффектом печатной машинки*/
<HEAD>
<title>Первый пример JavaScript</title>
</HEAD>
<BODY>
<center>
<h1>Примеры JavaScript</h1>
<hr>
</center>
В текст этого документа внедрена гипертекстовая ссылка
<a href="javascript:window.alert('Do you speak English?')">
"Don`t click here"</a>.
Любопытно, что будет,если все-таки выбрать?
</BODY>
/* пример JavaScript, в котором при нажатии на ссылку "Don`t click here" выскакивает окно-предупреждение 'Do you speak English?*/
<p align="left"><b>Выберите цвет фона:</b></p>
<p align="left">
<b>
[<a onmouseover="document.bgColor='flaxen'" href="/C:/">Flaxen</a>]<br>
[<a onmouseover="document.bgColor='pink'" href="/C:/">Pink</a>]<br>
[<a onmouseover="document.bgColor='coral'" href="/C:/">Coral</a>] <br>
</b>
/* пример JavaScript: при наведении курсора мыши на ссылки Flaxen, Pink и Coral цвет фона данного окна меняется на flaxen, pink и coral соответственно*/
</HTML>
Данное окно будет иметь следующий вид:
Практическая часть:
Фреймовая структура первого типа (варианты 1 - 10):
|
1 |
2 |
|
3 |
1) Создать меню, содержащее следующие ссылки
- главная страница (является исходным содержимым фрейма №3)
- фотоальбом
- биография
- страница с примером использования DHTML
2) Пример использования JavaScript
3) Фрейм для просмотра страниц
Фреймовая структура второго типа (варианты 11 - 20):
|
1 |
2 |
4 |
|
3 |
1) Создать меню, содержащее следующие ссылки
- главная страница (является исходным содержимым фрейма №3)
- фотоальбом
- биография
2) Пример использования JavaScript
3) Фрейм для просмотра страниц
4) Пример использования DHTML
Варианты заданий:
1: В фрейме №2 создать бегущую строку.
На странице с примером использования DHTML создать пароль для доступа на какую-либо страницу.
2: В фрейме №2 должна осуществляться автоматическая смена цветов фона.
На странице с примером использования DHTML создать психологический тест из 5-6 вопросов. Выбор варианта ответа осуществляется с помощью радио-кнопки, результаты обрабатываются автоматически и выдается результат.
3: В фрейме №2 создать часы, отображающие текущее время.
На странице с примером использования DHTML должен автоматически изменяться размер текста.
4: В фрейме №2 должен автоматически изменяться цвет текста.
На странице с примером использования DHTML создать выпадающий список.
5: В фрейме №2 должна осуществляться смена цветов фона через определенное время.
На странице с примером использования DHTML создать надпись, всегда следующую за курсором мыши.
6: В фрейме №2 должен осуществляться отсчет количества дней до дня рождения студента.
На странице с примером использования DHTML создать изображение, всегда следующее за курсором мыши.
7: В фрейме №2 должна отображаться текущая дата.
На странице с примером использования DHTML создать счетчик посещений.
8: В фрейме №2 создать переливающуюся ссылку на любую страницу.
На странице с примером использования DHTML создать выпадающий список.
9: В фрейме №2 должно осуществляться передвижение изображения в с помощью мыши.
На странице с примером использования DHTML создать пароль для доступа на другую страницу.
10: В фрейме №2 создать бегущую строку с кнопкой остановки и запуска.
На странице с примером использования DHTML создать психологический тест из 5-6 вопросов. Выбор варианта ответа осуществляется с помощью радио-кнопки, результаты обрабатываются автоматически и выдается результат.
11: В фрейме №2 создать бегущую строку.
В фрейме №4 создать кнопку, меняющую цвет фона фрейма №1.
12: В фрейме №2 создать счетчик посещений.
В фрейме №4 создать кнопку, меняющую цвет фона фрейма №2.
13: В фрейме №2 должен осуществляться отсчет количества дней до нового года.
В фрейме №4 создать психологический тест из 5-6 вопросов. Выбор варианта ответа осуществляется с помощью радио-кнопки, результаты обрабатываются автоматически и выдается результат.
14: В фрейме №2 должна осуществляться смена цветов фона через определенное время.
В фрейме №4 создать анкету из 5-6 пунктов и кнопку для очистки формы.
15: В фрейме №2 создать изображение, движущееся по определенной траектории.
В фрейме №4 создать таблицу. Сортировка полей таблицы должна осуществляться по алфавиту в прямом и обратном порядке.
16: В фрейме №2 должен быть салют при нажатии на любую из клавиш мыши.
В фрейме №4 создать таблицу. Сортировка полей таблицы должна осуществляться по номеру в прямом и обратном порядке.
17: В фрейме №2 должна осуществляться смена цветов фона через определенное время.
В фрейме №4 при нажатии на кнопку должно выскакивать окно с текстом.
18: В фрейме №2 должен автоматически изменяться размер текста.
В фрейме №4 создать бегущую строку с кнопкой остановки и запуска.
19: В фрейме №2 создать часы, отображающие текущее время.
В фрейме №4 создать счетчик посещений и кнопку сброса счетчика.
20: В фрейме №2 должно осуществляться передвижение изображения в с помощью мыши.
В фрейме №4 создать 3 кнопки изменяющие фона соответственно в первом, втором и четвертом фрейме.
Контрольные вопросы:
Зачем нужен язык разметки гипертекста?
Назовите основные элементы HTML - документа.
Перечислите базисные теги.
Перечислите теги, использующиеся для организации гиперссылок и вставки рисунков.
Перечислите теги, использующиеся для создания фреймовых структур.
Что такое Dynamic HTML?
Что обеспечивают технологии Dynamic HTML?
Какие для этого используются методы?
Что такое JavaScript?
Назовите две основные разновидности JavaScript.