Проект
<<  Центра управления вдв Новые технологии и онтологическая перспектива человечества  >>
Учебный курс Введение в JavaScript и CGI Лекция 2 Управление окнами
Учебный курс Введение в JavaScript и CGI Лекция 2 Управление окнами
Иерархия классов JavaScript
Иерархия классов JavaScript
Пример
Пример
Пример
Пример
Объекты класса window
Объекты класса window
Window: поле статуса
Window: поле статуса
Window: поле статуса
Window: поле статуса
Программируем location
Программируем location
Программируем location
Программируем location
История посещений страниц
История посещений страниц
Тип браузера: Объект Navigator
Тип браузера: Объект Navigator
Методы управления окнами
Методы управления окнами
Метод alert
Метод alert
Метод confirm
Метод confirm
Метод prompt
Метод prompt
Метод open
Метод open
Управление окнами
Управление окнами
Метод close
Метод close
Метод focus
Метод focus
Метод setTimeout
Метод setTimeout
Метод clearTimeout
Метод clearTimeout
Фреймы
Фреймы
Фреймы
Фреймы
Фреймы
Фреймы
Фреймы
Фреймы
Именование фреймов
Именование фреймов
Именование фреймов
Именование фреймов
Именование фреймов
Именование фреймов
Передача фокуса в фрейм
Передача фокуса в фрейм
Передача фокуса в фрейм
Передача фокуса в фрейм

Презентация на тему: «Управление окнами». Автор: paul. Файл: «Управление окнами.ppt». Размер zip-архива: 175 КБ.

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

содержание презентации «Управление окнами.ppt»
СлайдТекст
1 Учебный курс Введение в JavaScript и CGI Лекция 2 Управление окнами

Учебный курс Введение в JavaScript и CGI Лекция 2 Управление окнами

кандидат технических наук Павел Брониславович Храмцов paul@kiae.su

2 Иерархия классов JavaScript

Иерархия классов JavaScript

Window self, parent, top

Самый старший класс JavaScript

navigator

Встроенные массивы браузера (программы и поддерживаемые MIME-типы) Фреймы окна – сами окна Location – URL документа История визитов

plugins[]

mimeTypes[]

frames[] location history document

forms[]

elements[] Buttons Checkbox FileUpload Hidden Password Radio Reset Select Submit Text textarea

Элементы формы – одни из основных объектов программ JavaScript

Массивы документа

anchors[] links[] images[] applets embeds[]

Вложенные документы

layers[]

document

Packages[]

2

3 Пример

Пример

<script> document.write(window.location); document.write("<br>"); document.write(document.location); </script> Результат исполнения http://webclass.polyn.kiae.su/classes/jsi/objects.htm http://webclass.polyn.kiae.su/classes/jsi/objects.htm

3

4 Пример

Пример

<script> w=toString(window.location); d=toString(document.location); h=window.location.href; document.write(w.length); document.write(d.length); document.write(h.length); </script> Результат исполнения window.location - 8 document.location - 8 window.location.href - 53

4

5 Объекты класса window

Объекты класса window

Свойства

Методы

События

status location history navigator

open close focus

Событий нет

5

6 Window: поле статуса

Window: поле статуса

6

7 Window: поле статуса

Window: поле статуса

Программируем status: <a href=#status onMouseover="window.status='Jump to status description';return true;" onMouseout="window.status='Status bar programming';return true;">window.status</a> Программируем DefaultStatus: <body onLoad="window.defaultStatus='Status bar programming';">

7

8 Программируем location

Программируем location

8

9 Программируем location

Программируем location

Свойства location: http://kuku.ru:80/r/dir/page?search#mark Методы location: window.location.reload(true); window.location.replace('#top');

9

10 История посещений страниц

История посещений страниц

<form> <input type=button value=Назад onClick=history.back()> </form>

10

11 Тип браузера: Объект Navigator

Тип браузера: Объект Navigator

<form><input type=button value="Тип навигатора" onClick="window.alert(window.navigator.userAgent);"> </form> Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506) <script> if(navigator.mimeTypes['image/gif']!=null) document.write("Ваш браузер поддерживает GIF<br>"); if(navigator.mimeTypes['image/kuku']==null) document.write("Ваш браузер не поддерживает KUKU"); </script>

11

12 Методы управления окнами

Методы управления окнами

alert() confirm() prompt() open() close() focus() setTimeout() clearTimeout() scroll() blur()

12

13 Метод alert

Метод alert

<a href="javascript:window.alert('Кара-у-у-ул!!!')">Во дворе злая собака</a>

13

14 Метод confirm

Метод confirm

<form> <input type=button value="Что вы знаете о JavaScript?“ onClick="if(window.confirm('Знаю все')==true) { document.forms[0].elements[1].value='Проверка на вшивость';} else {document.forms[0].elements[1].value='Знал бы - не читал';};"><br> <input size=30> </form>

14

15 Метод prompt

Метод prompt

<form> <input type=button value="Открыть окно ввода" onClick= "document.forms[1].elements[1].value= window.prompt('Введите чего-нибудь Христа ради!');"> <input size=30> </form>

15

16 Метод open

Метод open

Open("url","window_name","param,...",Replace); где - url - страница, которая будет загружена в новое окно, window_name - имя окна, которое можно использовать в атрибуте target в контейнерах a и form, replace - позволяет при открытии окна управлять записью в массив history

16

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

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

Параметр

Назначение

width

Ширина окна в пикселях

height

Высота окна в пикселях

toolbar

Создает окно с системными кнопками браузера

location

Создает окно с полем location

directories

Создает окно с меню предпочтений пользователя

status

Создает окно с полем статуса status

menubar

Создает окно с меню

scrollbar

Создает окно с линейками прокрутки

resizable

Создает окно, размер которого можно будет изменять после создания

17

18 Метод close

Метод close

window.close(); self.close(); window.opener.close(); id=window.open(); ... id.close();

18

19 Метод focus

Метод focus

function myfocus(a) { id = window.open("","example","scrollbars,width=300,height=200"); if(a==1) { id.document.open(); id.document.write("<center>Открыли окно в первый раз"); } if(a==2) { id.document.open(); id.document.write("<center>Открыли окно во второй раз"); } if(a==3) { id.focus(); id.document.open(); id.document.write("<center>Открыли окно во второй раз"); } id.document.write("<form><input type=button onClick='window.close();' value='Закрыть окно'></center>"); id.document.close(); }

19

20 Метод setTimeout

Метод setTimeout

idt = setTimeout("JavaScript_код",Time); var flag=0;var idp=null; function myclock() { if (flag==1) { d = new Date(); window.document.c.f.value = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); } idp=setTimeout("myclock();",500); } function flagss() { if(flag==0) flag=1; else flag=0; } ... <form name=c> Текущее время:<input name=f size=8><input type=button value="Start/Stop" onClick=flagss()></form>

20

21 Метод clearTimeout

Метод clearTimeout

var idp1 = null; function start() { d = new Date(); window.document.c1.f1.value = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); idp1=setTimeout("start();",500); } function stop() { clearTimeout(idp1);idp1=null; } ... <form name=c1> Текущее время:<input name=f1 size=8> <input type=button value="Start" onClick="if(idp1==null)start();"> <input type=button value="Stop" onClick="if(idp1!=null)stop();"> </form>

21

22 Фреймы

Фреймы

Именование фреймов top.frames[1].images[1].src="kuku.gif"; или top.right.images[1].src="kuku.gif"; Передача фокуса window.open("./framer.htm","mytop"); self.top.frames[2].document.open(); self.top.frames[2].document.close();

22

23 Фреймы

Фреймы

top (_parent)

left

right

top (_parent)

<html> <head> </head> <frameset cols="50%,*"> <frame name=left src=./left.htm> <frame name=right src=./right.htm> </frameset> </html>

left

right

23

24 Фреймы

Фреймы

top (_parent)

left

left

top

bottom

top (_parent)

<frameset cols="50%,*"> <frame name=left src=./left.htm> <frameset rows="50%,*"> <frame name=top src=./top.htm> <frame name=bottom src=./bottom.htm> </frameset> </frameset>

left

top

bottom

24

25 Фреймы

Фреймы

Первый документ: <html><head></head> <frameset cols="50%,*"> <frame name=left src=./left.htm> <frame name=right src=./right.htm> </frameset> </html> Второй документ (right.htm): <html><head></head> <frameset rows="50%,*"> <frame name=top src=./top.htm> <frame name=bottom src=./bottom.htm> </frameset> </html>

top (_parent)

left

right

top

bottom

25

26 Именование фреймов

Именование фреймов

<Html> <head> ... </head> <frameset cols="20%,*"> <frame name=left src=frame1.Htm> <frame name=right src=frame2.Htm> </frameset> </html> top.Frames[1].Images[1].Src="kuku.Gif"; или top.Right.Images[1].Src="kuku.Gif";

26

27 Именование фреймов

Именование фреймов

frame[0] (top)

frame[0] (top)

frame[0] (top)

frame[1] (left)

frame[2] (center)

frame[3] (right)

frame[4] (bottom)

frame[4] (bottom)

frame[4] (bottom)

<frameset rows="20,*,20"> <frame name=top src=top.htm> <frameset cols="50,*,50"> <frame name=left src=left.htm> <frame name=center src=center.htm> <frame name=right src=right.htm> </frameset> <frame name=bottom src=bottom.htm> </frameset>

27

28 Именование фреймов

Именование фреймов

frame[0] (left)

frame[0] (left)

frame[0] (left)

frame[1] (top)

frame[1] (right)

frame[1] (right)

frame[1] (right)

frame[2] (center)

frame[1] (bottom)

<frameset cols="20,*,20"> <frame name=left src=top.htm> <frameset rows="50,*,50"> <frame name=top src=left.htm> <frame name=center src=center.htm> <frame name=bottom src=right.htm> </frameset> <frame name=right src=bottom.htm> </frameset>

28

29 Передача фокуса в фрейм

Передача фокуса в фрейм

function load() { if(self.document.f.s.options[document.f.s.selectedIndex].text=="top") { document.f.target = "mytop"; self.top.frames[2].document.open(); self.top.frames[2].document.close(); else { document.f.target = "mybottom"; self.top.frames[1].document.open(); self.top.frames[1].document.close(); } return true; }

29

30 Передача фокуса в фрейм

Передача фокуса в фрейм

function load() { if(self.document.f.s.options[document.f.s.selectedIndex].text=="top") { window.open("./framer.htm","mytop"); self.top.frames[2].document.open(); self.top.frames[2].document.close(); } else { window.open("./framer.htm","mybottom"); self.top.frames[1].document.open(); self.top.frames[1].document.close(); } return false; }

30

«Управление окнами»
http://900igr.net/prezentacija/ekonomika/upravlenie-oknami-246153.html
cсылка на страницу
Урок

Экономика

125 тем
Слайды