Лабораторная работа №4. Методы вывода информации.

В данной лаб. работе изучаются способы вывода информации на экран монитора. Вывод можно осуществить с помощью окна браузера, текстовой области, текстового поля, методов write() и alert().

Упражнение 4.1. Вывод информации с помощью метода alert(). Создайте HTML-код и сохраните его как alert.htm.

<html>

<head>

<META http-equiv="Content-Type"

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

<title>Вывод информации метод alert</title>

<input type="button" value="Просмотр"

Onclick='alert("Метод alert позволяет выводить на экран текстовые сообщения")'>

</head>

<body>

</body>

</html>

Лабораторная работа №4. Методы вывода информации. - student2.ru

Щелчок по командной кнопке «Просмотр» вызовет появление сообщения:

Лабораторная работа №4. Методы вывода информации. - student2.ru

Упражнение 4.2. Вывод информации с помощью метода write(). Создайте HTML-код и сохраните его как write.htm.

<html>

<head>

<META http-equiv="Content-Type"

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

<title>Вывод информации метод write</title>

<script language="JavaScript">

x=8;

z=3;

yAdd=x+z;

document.write("Результат сложения: x+z="+yAdd);

</script>

</head>

<body>

</body>

</html>

Лабораторная работа №4. Методы вывода информации. - student2.ru

Упражнение 4.3. Вывод информации с помощью текстового поля. Создайте HTML-код и сохраните его как write.htm.

<html>

<head>

<META http-equiv="Content-Type"

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

<title>Вывод информации с помощью текстового поля</title>

<script language="JavaScript">

function summ() {

var a=document.form2.text11.value;

var b=document.form2.text21.value;

var c=1*a+1*b;

document.form2.text31.value=c;

}

</script>

</head>

<body>

<p align="center">

Введите слагаемые:

<form name="form2">

Первое слагаемое

<input type="text" name="text11" size="5" value="0"><br>

Второе слагаемое

<input type="text" name="text21" size="5" value="0"><br><br>

<input type="Button" value="Вычислить" onclick="summ()"><br><br>

Результат

<input type="text" name="text31" size="5" value="">

</form>

</body>

</html>

Лабораторная работа №4. Методы вывода информации. - student2.ru

В данном скрипте поля, предназначенные для ввода информации, имеют имена text11 и text21. Вывод информации происходит в поле с именем text31. Форме дано имя form2. Функция summ() осуществляет считывание двух чисел из полей text11 и text21, преобразование строковых переменных в числовые, их суммирование и вывод результата в поле text31. Первому слагаемому дано имя “a”, второму слагаемому – имя “b”, а результату суммирования – имя “c”.

Упражнение 4.3. Вывод информации с помощью созданных окон.

Информацию можно выводить в отдельные окна. Рассмотрим скрипт, который создает два окна (okno1 и okno2). Для создания окон используется метод open(). Формирование окон и запись в них информации происходит с помощью двух функций с именами winopen1() и winopen2(). Запускются указанные функции с помощью двух кнопок, в момент щелчка по ним. Одновременное закрытие созданных (открытых) окон происходит с помощью метода close() и соответствующей кнопки.

<html>

<head>

<META http-equiv="Content-Type"

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

<title>Вывод информации с помощью текстового поля</title>

</head>

<body>

<script>

Function winopen1()

{

okno1=window.open("","","top=150, left=250, width=150, height=80");

Okno1.document.write("Как дела?");

}

Function winopen2()

{

okno2=window.open("","","top=300, left=250, width=150, height=80");

Okno2.document.write("Всё в порядке.");

}

Function winclose()

{

okno1.close();

okno2.close();

}

</script>

<input type="Button" value="Создать окно 1" onclick="winopen1()">

<input type="Button" value="Создать окно 2" onclick="winopen2()">

<input type="Button" value="Закрыть окна" onclick="winclose()">

</body>

</html>

Лабораторная работа №4. Методы вывода информации. - student2.ru

Наши рекомендации