Урок
<<  Открытое занятие Открытое занятие в подготовительной группе  >>
Открытое занятие
Открытое занятие
Создание окна
Создание окна
Проверка домашнего задания
Проверка домашнего задания
Задание 2. Укажите неверные записи команд, объясните ответ:
Задание 2. Укажите неверные записи команд, объясните ответ:
Создание окна
Создание окна
Открытое занятие
Открытое занятие
Код html-страницы будет следующим:
Код html-страницы будет следующим:
Код страницы im1
Код страницы im1
Открытое занятие
Открытое занятие
Страница script
Страница script
первый параметр указывает страницу, которую нужно загрузить в окно
первый параметр указывает страницу, которую нужно загрузить в окно
Другие параметры:
Другие параметры:
Метод confirm
Метод confirm
Пример
Пример
Код html-страницы для этого примера:
Код html-страницы для этого примера:
На странице script
На странице script
Метод prompt
Метод prompt
Пример
Пример
Код html-страницы:
Код html-страницы:
Метод setTimeout
Метод setTimeout
Пример
Пример
Код html-страницы:
Код html-страницы:
Код самой функции:
Код самой функции:
Метод clearTimeout
Метод clearTimeout
Пример
Пример
Html-код страницы:
Html-код страницы:
Метод setInterval
Метод setInterval
Пример
Пример
Код html-страницы:
Код html-страницы:
Закрепление нового материала
Закрепление нового материала
Домашнее задание
Домашнее задание
Спасибо за внимание
Спасибо за внимание

Презентация на тему: «Открытое занятие». Автор: Admin. Файл: «Открытое занятие.ppt». Размер zip-архива: 1341 КБ.

Открытое занятие

содержание презентации «Открытое занятие.ppt»
СлайдТекст
1 Открытое занятие

Открытое занятие

По дисциплине «web-программирование»

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

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

Управление окнами

3 Проверка домашнего задания

Проверка домашнего задания

Задание 1. Дана страница, которая содержит два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой.

Назовите полные команды, начиная с window, пусть имя изображения будет mypic, имя формы myform. Форма; Содержание поля lname (фамилия); Содержание поля fname(имя); Измените название картинки на "marigold.gif".

4 Задание 2. Укажите неверные записи команд, объясните ответ:

Задание 2. Укажите неверные записи команд, объясните ответ:

window.document.pic.src = "pic1.gif"; document.text.form; document.form.text.value; pic.src.document.

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

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

6 Открытое занятие
7 Код html-страницы будет следующим:

Код html-страницы будет следующим:

<html> <head> <title> javascript окно</title> <script src="script.js"> </script> </head><body><body background=ris50.gif><center> <form name="forma13"> <input type="button" value="рис.1" onClick="open_im1()"> <input type="button" value="рис.2" onClick="open_im2()"> <input type="button" value="рис.3" onClick="open_im3()"> </form><h4> Все рисунки взяты из книги А.Леонова и А.Соколова "Человек и Вселенная" издательство "Изобразительное искусство", 1984г. </h4> </body> </html>

8 Код страницы im1

Код страницы im1

html:

<html> <head> <title>окно рис.1</title> <script src="script.js"> </script> </head> <body> <img src="mal_pic_001.jpg" width="100"> <input type="button" value="Закрыть" onClick="close_pict()"> <h4> А.Соколов Старт первого искуственного спутника Земли.</h4> </body> </html>

9 Открытое занятие
10 Страница script

Страница 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

Метод confirm

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

14 Пример

Пример

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

Код html-страницы для этого примера:

<html> <head> <title>Пример использования метода confirm</title> <script src="script.js"></script> </head> <body> <form name="forma14"> <img src="чудик.gif" width="200"> <input type="button" value="Открыть окно" onClick="choiceof();"> </form> </body> </html>

16 На странице script

На странице 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

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

18 Пример

Пример

19 Код html-страницы:

Код html-страницы:

<html> <head> <title>Добро пожаловать! </title> <script language="JavaScript"> ima=prompt ( " Как тебя зовут?" , "Введи сюда свое имя"); alert("Привет, " + ima); </script> </head> </html>

20 Метод setTimeout

Метод setTimeout

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

21 Пример

Пример

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

Код html-страницы:

<html> <head> <title>Метод setTimeout</title> <script src="script.js"> </script> </head> <body> <form name="forma16"> <input type="button" value="Можно начинать?" onClick= "setTimeout('startMessage()',3000)"> </form> </body> </html>

23 Код самой функции:

Код самой функции:

function startMessage() { alert("Начинайте!") }

24 Метод clearTimeout

Метод clearTimeout

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

25 Пример

Пример

26 Html-код страницы:

Html-код страницы:

<html> <head> <title>Метод clearTimeout</title> <script src="script.js"></script> </head> <body><center><img src="anibugs.gif" width="100"></center> <form name="forma17"> <input type="button" value="Можно начинать?" onClick="timer1=setTimeout('startMessage()',3000)"> <input type="button" value="Отменить вопрос" onClick="clearTimeout(timer1)"> </form> </body> </html>

27 Метод setInterval

Метод setInterval

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

28 Пример

Пример

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

Код html-страницы:

<html> <head> <title>Метод setInterval</title> <script src="script.js"></script> </head> <body> <form name="forma18"> <input type="button" value="Можно начинать?" onClick="timer2= setInterval('startMessage()',3000)"> <input type="button" value="Я понял!" onClick="clearInterval(timer2)"> </form><center> <img src="Ris51.gif" width="150"></center> </body> </html>

30 Закрепление нового материала

Закрепление нового материала

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

31 Домашнее задание

Домашнее задание

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

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

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

!!

«Открытое занятие»
http://900igr.net/prezentacija/pedagogika/otkrytoe-zanjatie-77172.html
cсылка на страницу

Урок

30 презентаций об уроке
Урок

Педагогика

135 тем
Слайды