Открытое занятие по дисциплине «Web-программирование» - презентация

1 Открытое занятие по дисциплине «Web-программирование»

2 Создание окна. Управление окнами

3 Проверка домашнего задания Задание 1. Дана страница, которая содержит два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. Назовите полные команды, начиная с window, пусть имя изображения будет mypic, имя формы myform. 1)Форма; 2)Содержание поля lname (фамилия); 3)Содержание поля fname(имя); 4)Измените название картинки на "marigold.gif".

4 Задание 2. Укажите неверные записи команд, объясните ответ: a.window.document.pic.src = "pic1.gif"; b.document.text.form; c.document.form.text.value; d.pic.src.document.

5 Создание окна

6

7 Код html-страницы будет следующим: javascript окно Все рисунки взяты из книги А.Леонова и А.Соколова "Человек и Вселенная" издательство "Изобразительное искусство", 1984 г.

8 Код страницы im1.html: окно рис.1 А.Соколов Старт первого искусственного спутника Земли.

9

10 Страница script.js будет содержать следующие функции: function open_im1() {im1= window.open("im1.html","display_im1", "width=500,height=400,status=no,toolbar=no, menubar=no"); } function open_im2() {im2=window.open("im2.html","display_im2", "width=500,height=400,status=yes,toolbar=yes, menubar=yes"); } function open_im3() {im3=window.open("im3.html","display_im3", "width=500,height=500,status=no,toolbar=no, menubar=no"); } function close_pict() { window.close(); }

11 У этого метода существует три параметра, каждый из которых заключается в кавычки: -первый параметр указывает страницу, которую нужно загрузить в окно (например, im1.html), -второй параметр задает имя открываемому окну (в нашем примере display_im1), -третий параметр позволяет нам управлять процессом создания окна. Здесь можно задать размеры окна, указать, должно ли новое окно иметь строку статуса, панель инструментов или меню.

12 Другие параметры: toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д. menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д. scrollbars= отвечает за наличие полосы прокрутки; resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию; location= отвечает за наличие адресной строки, где виден URL страницы; status= отвечает за наличие строки состояния.

13 Метод confirm Показывает диалоговое окно с указанным сообщением и кнопками "OK" и "Cancel". Сообщение должно побуждать пользователя принять решение. Подтверждение возвращает методу true, если пользователь выбирает "OK" или false если пользователь выбирает "Cancel". Синтаксис: confirm ("сообщение")

14 Пример

15 Код html-страницы для этого примера: Пример использования метода confirm

16 На странице script.js напишем код функции choiceof(): function choiceоf() {if (confirm("Вы действительно хотите открыть окно?")) {im2=window.open("im2.html", "display_im2","width=200, height=200,status=no, toolbar=no,menubar=no"); }

17 Метод prompt Этот метод отображает диалоговое окно ввода пользователя. Синтаксис: prompt(сообщение, [значение по умолчанию]) где [] - означают, что параметр необязателен, т.е. его можно опустить.

18 Пример

19 Код html-страницы: Добро пожаловать! ima=prompt ( " Как тебя зовут?", "Введи сюда свое имя"); alert("Привет, " + ima);

20 Метод setTimeout Этот метод делает что-либо по истечении указанного в миллисекундах промежутка времени. Синтаксис: setTimeout (что делать, время в миллисекундах)

21 Пример

22 Код html-страницы: Метод setTimeout

23 Код самой функции: function startMessage() { alert("Начинайте!") }

24 Метод clearTimeout Этот метод отключает таймер, установленный при помощи метода setTimeout. Синтаксис: clearTimeout (timerID), где timerID - уникальный идентификатор таймера, полученный при его установке.

25 Пример

26 html-код страницы: Метод clearTimeout

27 Метод setInterval В отличие от setTimeout, этот метод выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи метода clearInterval. Синтаксис: timerID=setInterval(что делать, время в миллисекундах) где timerID - уникальный идентификатор таймера, полученный при его установке.

28 Пример

29 Код html-страницы: Метод setInterval

30 Закрепление нового материала Задание. Создать страницу, на которой: пользователь мог ввести свое имя в диалоговом окне ; расположены кнопки с именами рисунков; по щелчку по кнопке открывалось окно с соответствующим рисунком.

31 Домашнее задание 1.Конспект. 2. Создать страницу, в которой используется не менее 3 изученных методов объекта window.

32 Спасибо за внимание !!!