Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...

Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...

Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...

Интересное:

Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...

Отражение на счетах бухгалтерского учета процесса приобретения: Процесс заготовления представляет систему экономических событий, включающих приобретение организацией у поставщиков сырья...

Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Лабораторная работа №3. Текстовая область textarea и интерактивные формы.

2017-11-27

133

0.00 из 5.00 0 оценок

Заказать работу

Текстовая область textarea позволяет ввести (и вывести) большой объем многострочного текста. Размер текстовой области определяется с помощью атрибутов (свойств) cols и rows (столбцов и строк). При этом атрибут cols определяет, сколько символов можно разместить в одной строке. Атрибут rows задает число строк, видимых в текстовой области.

Упражнение 3.1. В этом упражнении скрипт демонстрирует возможность языка JavaScript считывать информацию из текстовой области, превращать содержимое окна в текстовую переменную и выводить ее с помощью метода alert(). Создайте HTML-код и сохраните его как textarea.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<div align="center">

<b>ТЕКСТОВАЯ ОБЛАСТЬ</b>

<form name="formTa">

<textarea name="tar1" cols="40" rows="5">

Текстовая область textarea позволяет ввести (и вывести) большой объем многострочного текста. Размер текстовой области определяется с помощью атрибутов (свойств) cols и rows. При этом атрибут cols определяет, сколько символов можно разместить в одной строке. Атрибут rows задает число строк, видимых в текстовой области.

</textarea>

</form>

<form name="formBut">

<input type=Button value="Запуск"

onclick="javascript:Func1()">

</form>

<script language="JavaScript">

function Func1() {

var a=document.formTa.tar1.value;

// Переменной a присвоено содержимое текстовой области

alert(a);

}

</script>

</div>

</head>

<body>

</body>

</html>

Содержимое текстовой области можно изменить, например, набрать фразу «Другой текст». После щелчка по кнопке «Запуск» появится следующее сообщение:

Далее рассматривается интерактивное взаимодействие пользователя с компьютером. Наиболее просто это реализуется с помощью кнопок.

Упражнение 3.2. Тест для ученика начальных классов. Создайте HTML-код и сохраните его как interactive_form.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Интерактивные формы</title>

<script language="JavaScript">

function Verno1() {

alert("Вы - математик...");}

function Neverno() {

alert("Шутите?");}

</script>

</head>

<body>

<P align="center"><b>ВОПРОС: СКОЛЬКО БУДЕТ 2+3?</b>

<form name="form1">

<table align="center" cellspacing="2" cellpadding="2" border="3">

<tr>

<td>Возможные ответы</td>

<td><input type=Button value="4"

onclick="javascript:Neverno();"></td>

<td></td>

<td><input type=Button value="5"

onclick="javascript:Verno1();"></td>

<td></td>

<td><input type=Button value="6"

onclick="javascript:Neverno();"></td>

</tr>

</table>

</form>

</body>

</html>

Если щелкнуть по кнопке с изображением цифры 5, то появится сообщение:

Выбор цифр 4 или 6 приведет к появлению сообщения:

В данной программе неправильный выбор ответа обрабатывается с помощью функции Neverno(). Выбор правильного ответа запускает функцию Verno1(). Скрипт запускается однократным щелчком левой кнопки мыши (onclick) по кнопке с возможным ответом (Button).

Эта же задача тестирования может быть решена несколько иначе: с помощью переключателей

Упражнение 3.2. Создайте HTML-код и сохраните его как interactive_form_1.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Интерактивные формы</title>

</head>

<body>

<P align="center"><b>ВОПРОС: СКОЛЬКО БУДЕТ 2+3?</b>

<form name="Test2">

<table align="center" cellspacing="2" cellpadding="2" border="3">

<tr>

<td>Переключатель</td>

<td>Подсказки</td>

</tr>

<tr align="center">

<td><input type=radio value ="1" name="Otv"></td>

<td>4</td>

</tr>

<tr align="center">

<td><input type=radio value ="2" name="Otv"></td>

<td>5</td>

</tr>

<tr align="center">

<td><input type=radio value ="3" name="Otv"></td>

<td>6</td>

</tr>

<tr align="center">

<td colspan="2"><input type=button value="Проверка решения"

Name="Go" onclick="javascript:Rbut();"></td>

</tr>

</table>

</form>

<script language="JavaScript">

Function Rbut()

{

otv=document.Test2.Otv[1].checked;

if(otv){alert("Потрясающе!");}

else {alert("Увы…");}

}

</script>

</body>

</html>

Для запуска тестирующего скрипта нужно активировать одно из полей переключателя и нажать на кнопку «Проверка решения». В результате этого на экране появится одно из двух сообщений:

Поделиться с друзьями:

Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...