Контрольные вопросы:
8.1 Какие методы ввода/вывода информации используются в JavaScript?
8.2 Как сценарий JavaScript внедряется в HTML – документ?
8.3 К каким языкам программирования относится JavaScript?
ПРИЛОЖЕНИЕ:
JavaScript — это объектно-ориентированный язык программирования, предназначенный для написания сценариев, работающих как на стороне клиента, так и на стороне сервера.
Рассмотрим основные методы ввода/вывода информации в сценариях JavaScript:
Метод alert () применяется для вывода на экран простейшей диалоговой панели, отображающей какое – либо сообщение. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку ОК в окне с сообщением. Синтаксис: alert (“Сообщение”)
С помощью метода confirm () можно отобразить на экране диалоговую панель с вашим сообщением, но она уже будет содержать две кнопки – ОК и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false.
Если вам необходимо получить от пользователя одну текстовую строку, то можете применить метод prompt (). Он отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка ОК. Когда пользователь нажимает эту кнопку, метод возвращает введенную строку.
Размещение сценариев JavaScript
Поскольку для написания сценариев предназначены различные языки, то в теге <SCRIPT> должен быть указан используемый язык. Под размещением сценария понимается расположение контейнера <SCRIPT> в документе. Этот контейнер может быть расположен как в заголовке документа (между тэгами <HEAD>), так и в теле документа, (между тэгами <BODY>).
Кроме размещения текста сценария в теле HTML – документа его можно поместить в отдельный файл. Это должен быть отдельный текстовый файл, с расширением *.js. В этом файле не должно быть ничего кроме операторов JavaScript. В тексте HTML- документа содержимое контейнера <SCRIPT> приведите к следующему виду:
<SCRIPT LANGUAGE="JavaScript" SRC=”*.js”> </SCRIPT>
Практическое занятие №2
Наименование: Создание электронной визитной карточки
Цель: Научиться использовать функции prompt и возможностей динамического построения тела HTML – документа при помощи конструкции document.write
Подготовка к занятию: по предложенной литературе повторить тему «Основные понятия и определения языка JavaScript» и ответить на следующие вопросы:
2.1 Какие основные группы объектов существуют в языке JavaScript?
2.2 Чем может характеризоваться каждый объект JavaScript?
Литература:
3.1 Шомас Е.А. Конспект лекций по МДК.В.01.03 «Веб - программирование»
3.2 Клименко Р.А. Веб – мастеринг на 100%. – СПб.: Питер. 2013.
3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с.
3.4 Вилтон П., МакПик Дж. JavaScript. Руководство программиста. – СПб.: Питер, 2009
3.5 Соколов С.А. JavaScript в примерах, типовых решениях и задачах. Профессиональная работа. – М.: ООО “И.Д. Вильямс”, 2006.
Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
Задание:
5.1 Создать электронную визитную карточку с указанием своих
- имени и фамилии;
- статуса;
- номера телефона;
- логотип КС ПГУТИ
по следующему образцу:
5.2 Добавьте свой e-mail;
Порядок выполнения работы:
Сначала создается статический HTML – макет в текстовом редакторе. Создавать макет будем с использованием таблицы. Ширина таблицы будет 400px.
Для управления рамками таблицы и оформления текста воспользуйтесь средствами CSS.
Далее происходит динамическая верстка тела HTML – документа при помощи конструкции document.write (пример использования конструкции можно посмотреть в приложении)
Вводим переменные для обозначения имени и фамилии, статуса, телефона и e-mail. Присваиваем значения переменных к функции prompt
Тестируем свою программу
Содержание отчета:
Наименование и цель работы
Задание, под каждым поместить код программы и полученные результаты в виде скринов.
Ответы на контрольные вопросы
Вывод о проделанной работе
Контрольные вопросы:
Каким образом можно осуществить динамическое формирование содержимого HTML – документа?
Перечислите основные методы объекта window
ПРИЛОЖЕНИЕ:
Пример динамической верстки тела HTML – документа при помощи конструкции document.write приведен в следующем листинге:
<script type="text/javascript" language="JavaScript">
document.write('<table width="400" border="1">');
document.write('<tr><td width="150">');
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>
Результат:
