Практическое занятие №17

Наименование: Создание электронной визитной карточки

1. Цель: Научиться использовать функции prompt и возможностей динамического построения тела HTML – документа при помощи конструкции document.write

2. Подготовка к занятию: по предложенной литературе повторить тему «Основные понятия и определения языка JavaScript» и ответить на следующие вопросы:

2.1 Какие основные группы объектов существуют в языке JavaScript?

2.2 Чем может характеризоваться каждый объект JavaScript?

3. Литература:

3.1 Клименко Р.А. Веб – мастеринг на 100%. – СПб.: Питер. 2013.

3.2 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с.

3.3 Вилтон П., МакПик Дж. JavaScript. Руководство программиста. – СПб.: Питер, 2009

3.4 Соколов С.А. JavaScript в примерах, типовых решениях и задачах. Профессиональная работа. – М.: ООО “И.Д. Вильямс”, 2006.

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создать электронную визитную карточку с указанием своих

- имени и фамилии;

- должности;

- номера телефона;

- логотип фирмы (организации)

по следующему образцу:

5.2 Добавьте свой e-mail;

6. Порядок выполнения работы:

6.1 Сначала создается статический HTML – макет в текстовом редакторе. Создавать макет будем с использованием таблицы. Ширина таблицы будет 300px.

6.2 Для управления рамками таблицы и оформления текста воспользуйтесь средствами CSS.

6.3 Далее происходит динамическая верстка тела HTML – документа при помощи конструкции document.write (пример использования конструкции можно посмотреть в приложении)

6.4 Вводим переменные для обозначения имени и фамилии, должности и телефона. Присваиваем значения переменных к функции prompt

6.5 Тестируем свою программу

7 Содержание отчета:

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8 Контрольные вопросы:

8.1 Каким образом можно осуществить динамическое формирование содержимого HTML – документа?

8.2 Перечислите основные методы объекта window

ПРИЛОЖЕНИЕ:

Пример динамической верстки тела HTML – документа при помощи конструкции document.write приведен в следующем листинге:

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

document.write('<table width="300" border="1">');

document.write('<tr><td width="100">');

document.write('<img src="logo.jpg"></td>');

document.write('<td id="ot">');

document.write('<b>' + name + '</b><br><br>');

document.write('</td></tr>');

document.write('</table>');

</script>

Результат:

Чтобы осуществлять запрос на вывод фамилии и имени введите в свою программу функцию prompt.

Листинг:

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

var name=prompt('Введите свои фамилию и имя', ' ');

document.write('<table width="300" border="1">');

document.write('<tr><td width="100">');

document.write('<img src="logo.jpg"></td>');

document.write('<td id="ot">');

document.write('<b>' + name + '</b><br><br>');

document.write('</td></tr>');

document.write('</table>');

</script>

Результат: