Презентация на тему Графический интерфейс на web страницах средствами HTML и JavaScript

Создаем событие выполняемое при загрузке страницы

Связываем с этим событием дествие

Создаем событие выполняемое при щелчке мышкой

Связываем с этим событием действие

Указываем объект по которому надо щелкать мышкой

поле ввода
Значение отображаемое в поле ввода при загрузке

Размер (длина) текстового поля в символах

Идентификатор поля ввода

value="Счет" onclick="f()" >




Создаем кнопку
Надпись на кнопке
Связываем с кнопкой событие
Имя

5

value="Счет" onclick="f()" >

Результат=



Создадим поле ввода

6

a=parseFloat(document.getElementById("input1").value);
b=parseFloat(document.getElementById("input2").value);
s=a+b;
document.getElementById("output1").value =

7

Объявляем переменные

Преобразуем строку в число

Значение, записанное в первом окне ввода

document.getElementById - метод объекта document. Он возвращает ссылку на узел документа, которую можно использовать для изменения свойств и обращения к методам узла.

Находим сумму

Значение суммы помещаем в третье окно вывода

value="2" >Вычесть
Разделить
Умножить

10
Тег SELECT

Идентификатор раскрывающегося списка

Значение каждой строки списка

a=parseFloat(document.getElementById("input1").value);
b=parseFloat(document.getElementById("input2").value);
k=parseFloat(document.getElementById("menu").value);
if (k==1)

11

Определяем какую строку списка выбрал пользователь

В зависимости от номера строки выполняем действие

Вычесть


Умножить


Разделить

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

Создаем checkbox

Идентификатор checkbox

Надпись checkbox

Следующий checkbox с новой строки

14

a=parseFloat(document.getElementById("input1").value);
b=parseFloat(document.getElementById("input2").value);
if (document.getElementById('checkbox1').checked) s=a+b;
if

Если в checkbox поставлена галочка

15

id="r2" value="2">Вычесть

Умножить

18

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Имя поля (параметр name) для всех элементов группы должно быть одинаковым.

Создаем переключатель

Имя для всех одно

Идентификатор переключателя

Установить точку при создании

Надпись за переключателем

Ячейка 1

22

Объединим 4 ячейки в первой строке

Начало таблицы:

Ячейка 5
Ячейка

23

Окончание таблицы:

откроется новое окно с указанным URL
.
25
Полный синтаксис:
url -

name - имя нового окна

params - cтрока с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно

Метод window.open() возвращает ссылку на вновь открытое окно, т.е. объект класса Window. Его можно присвоить переменной, с тем чтобы потом можно было управлять открытым окном (писать в него, читать из него, передавать и убирать фокус, закрывать).

закрыть страницу?");
if(exit){
thisWindow.close();
}
26
Выводит сообщение в окне с двумя кнопками: "ОК"

Получаем доступ к свойствам текущего окна

Закрываем текущее окно

status=yes")

newWin.focus()
}
28
Открываемая страница
Ее имя
Свойства
Переводим фокус на новое окно