Ocenite etot tekst:


Original is at Open Systems Magazine: #5/96
http://www.osp.ru/os/os_6_96/source/20.htm


Otkrytye sistemy · #6(20)/96 · str. 20-26

Irina Kuzina
RNC "Kurchatovskij institut", Moskva
ira@quest.net.kiae.su

Frejmy
Sozdanie mnogookonnogo interfejsa
Ispol'zovanie HTML dlya opredeleniya polej zagolovka soobshcheniya protokola HTTP
Programmirovanie scenariev prosmotra. JavaScript
Idushchie chasy i begushchaya stroka
Massivy
Grafika
Steki gipertekstovyh ssylok
Frejmy i okna
Nasledovanie koda skriptov razlichnymi stranicami
Java, JavaScript i moduli rasshireniya
Rasshirenie vozmozhnostej sozdaniya tablic
Zaklyuchenie
Literatura

Volna burnogo razvitiya tehnologij World Wide Web ne oboshla storonoj i sredstva upravleniya scenariyami prosmotra gipertekstovyh baz dannyh. Segodnya avtory domashnih stranic Web poluchili v svoe rasporyazhenie novye yazyki JavaScript i VBScript. Novye vozmozhnosti po formirovaniyu baz dannyh Vsemirnoj Pautiny priobrel takzhe uzhe zarekomendovavshij sebya yazyk HTML, chto osobenno vidno v ego versii 3.2 [1-8]. Temoj dannoj stat'i stanet rassmotrenie novyh vozmozhnostej HTML i JavaScript, ispol'zuemyh dlya programmirovaniya scenariev prosmotra stranic Web.

Kak izvestno, yazyk gipertekstovoj razmetki HTML (HyperText Markup Language) byl predlozhen Timom Bernersom-Li v 1989 godu v kachestve odnogo iz komponentov tehnologii razrabotki raspredelennoj gipertekstovoj sistemy World Wide Web. V osnovu gipertekstovoj razmetki byla polozhena tagovaya model' opisaniya dokumenta, pozvolyayushchaya predstavit' dokument v vide sovokupnosti elementov, kazhdyj iz kotoryh okruzhen tagami. Po svoemu znacheniyu tagi blizki k ponyatiyu skobok "begin/end" v universal'nyh yazykah programmirovaniya i zadayut oblasti dejstviya imen lokal'nyh peremennyh, opredelyayut oblast' dejstviya pravil interpretacii tekstovyh elementov dokumenta i t.p.

Obshchaya shema postroeniya elementa teksta v formate HTML mozhet byt' zapisana v sleduyushchem vide:

"element":= <"imya elementa" "spisok atributov">
soderzhanie elementa </"imya elementa">

Konstrukciya pered soderzhaniem elementa nazyvaetsya tagom nachala elementa, a konstrukciya, raspolozhennaya posle soderzhaniya elementa, - tagom konca elementa.

Struktura gipertekstovoj seti zadaetsya gipertekstovymi ssylkami. Gipertekstovaya ssylka - eto adres drugogo HTML dokumenta ili informacionnogo resursa Internet, kotoryj tematicheski, logicheski ili kakim-libo drugim sposobom svyazan s dokumentom, v kotorom eta ssylka opredelena.

Dlya zapisi gipertekstovyh ssylok v sisteme WWW byla razrabotana special'naya forma - Universe Resource Locator. Tipichnym primerom ispol'zovaniya etoj zapisi mozhno schitat' sleduyushchuyu zapis':

|tot tekst soderzhit <A HREF = "http://polyn.net.kiae.su/ altai/index.html">
 gipertekstovuyu ssylku </A>.

Zdes' element "A", kotoryj v HTML nazyvayut yakorem (anchor), ispol'zuet atribut "HREF", oboznachayushchij gipertekstovuyu ssylku dlya zapisi etoj ssylki v forme URL. Dannaya ssylka ukazyvaet na dokument s imenem "index.html" v kataloge "altai" na servere "polyn.net.kiae.su", dostup k kotoromu osushchestvlyaetsya po protokolu "http".

Struktura HTML-dokumenta pozvolyaet ispol'zovat' vlozhennye drug v druga kontejnery. Sobstvenno, sam dokument - eto odin bol'shoj kontejner s imenem "HTML":

<HTML> Soderzhanie dokumenta </HTML>

Sam element HTML ili gipertekstovyj dokument sostoit iz zagolovka dokumenta (HEAD) i tela (BODY):

<HTML>
<HEAD>
Soderzhanie zagolovka
</HEAD>
<BODY>
Soderzhanie tela dokumenta
</BODY>
</HTML>

Privedennaya forma zapisi opredelyaet klassicheskij HTML-dokument, naprimer:

Primer 1.

<HTML>
<!-
Author: Irina Kuzina
Date:   December 5, 1996
->
<HEAD>
<TITLE> This is a
        Baner</TITLE>
</HEAD>
<BODY BACKGROUND=www_wall.jpg
        VLINK=0000FF LINK=FF0000>
<CENTER>
<TABLE>
<TR><TD><IMG
        SRC="interne0.jpg"></TD>
<TD CENTER>
<H3> Administrirovanie
        Internet</H3>
<I> Spravochnoe rukovodstvo.
        </I>
</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Kazhdyj dokument v WWW imeet svoe imya, kotoroe ukazyvaetsya v ego zagolovke. Ego mozhno videt' v pervoj stroke programmy-interfejsa. Kontejner BODY otkryvaet telo dokumenta. V kachestve fona v etom elemente opredelena kartinka www_wall.jpg, kotoraya v primere 1 zadana chastichnoj formoj specifikacii URL bez ukazaniya polnogo adresa resursa v seti. Dalee v dokumente opredelena tablica, sostoyashchaya iz dvuh yacheek: kartinka i tekstovyj fragment. Tekst opredelen kak zagolovok tret'ego urovnya, kotoryj dolzhen otobrazhat'sya stilem Italic.

Frejmy

Kompaniya Netscape Communication rasshirila klassicheskuyu formu dokumenta vozmozhnost'yu organizacii frejmov, a v Microsoft byli razrabotany frejmy bez vizual'nyh granic, imeyushchie ili net mehanizm prokrutki - tak nazyvaemye, plavayushchie frejmy. Organizaciya frejma - eto vozmozhnost' razdelit' rabochee okno programmy prosmotra na neskol'ko nezavisimyh panelej (ili frejmov). V kazhdyj frejm mozhet byt' zagruzhena svoya stranica HTML. Plavayushchie frejmy pozvolyayut vstavit' odnu Web-stranicu v druguyu. Togda kak obychnye frejmy pozvolyayut lish' razdelit' oblast' prosmotra na neskol'ko chastej, plavayushchij frejm mozhno pomestit' gde ugodno na stranice, ukazav ego razmer i otstup sprava ili sleva.

Dlya opisaniya plavayushchih frejmov ispol'zuetsya tag <IFRAME>...</IFRAME>. V otlichie ot specifikacii Netscape, ne razreshayushchej peresechenie frejmov, notacii Microsoft pozvolyaet nakladyvat' odni frejmy na drugie s pomoshch'yu otricatel'nogo otstupa.

V kazhdyj frejm mozhet byt' zagruzhena svoya HTML-stranica, predstavlyayushchaya soboj klassicheskij HTML-dokument.

V primere 2 predstavlen dokument, sostoyashchij iz chetyreh okon vnutri rabochego okna programmy prosmotra, v kazhdoe iz kotoryh zagruzhaetsya obychnyj dokument. Verhnij i nizhnij frejmy imeyut razmer 100 pikselej, a ostavshayasya oblast' rabochego okna razbivaetsya na dve chasti: na levuyu otvoditsya 30%, a na pravuyu - 70% prostranstva. Esli programma prosmotra ne podderzhivaet organizaciyu frejmov: to otobrazhaetsya informaciya, zaklyuchennaya mezhdu tagami <NOFRAMES> ... </NOFRAMES>, esli zhe eta vozmozhnost' realizovana, to takaya oblast' na ekrane ne otobrazhaetsya.

Primer 2.

<HTML>
<!-
Author: Irina Kuzina
Date:   December 5, 1996
->
<HEAD>
</HEAD>
<FRAMESET ROWS = "100, *,
        100">
<NOFRAMES>
<BODY>
Sorry, there is not a frame
        support in your browser.
</BODY>
</NOFRAMES>
<FRAME SRC = booter.html
        NAME = boot>
<FRAMESET COLS = "%30, %70">
<FRAME SRC = menli.html NAME
        = left>
<FRAME SRC = t2.html NAME =
        right>
</FRAMESET>
<FRAME SRC = footer.html
        NAME = foot>
</FRAMESET>
</HTML>

Sozdanie mnogookonnogo interfejsa

S frejmami tesno svyazana vozmozhnost' imenovaniya okon - lyuboj frejm mozhet imet' svoe sobstvennoe imya. Dlya togo, chtoby dokument zagruzhalsya imenno v to okno, kotoroe opredelil avtor stranicy, v kontejner gipertekstovoj ssylki vvoditsya atribut TARGET. Pri organizacii frejmov (primer 2) kazhdomu iz nih bylo prisvoeno imya (atribut NAME kontejnera FRAME). Dlya zagruzki dokumenta v konkretnyj frejm (left), avtor dolzhen ispol'zovat' gipertekstovuyu ssylku vida:

<A HREF = frame.html TARGET = left>

V dannom sluchae dokument, ukazannyj v atribute HREF, budet zagruzhen vo frejm left.

Esli v programme prosmotra net okna s imenem left, to budet otkryto novoe okno s takim imenem i v nego budet zagruzhen trebuemyj dokument. Privedem primer otkrytiya dopolnitel'nogo okna (primer 3).

Primer 3.

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=#FFbcbc >
<H1> <A HREF = frame.html target = left> How to create
        a multi-window interface
        </A> </H1>
<h3>
In the document "frame.html"
        there is no frame named
        "left".<br>
That"s why the program will
        open a new window </h3>
</BODY>
</HTML>

Otkryvsheesya okno soderzhit razbienie rabochej oblasti na poimenovannye frejmy.

Esli teper' pol'zovatel' vyberet gipertekstovuyu ssylku iz okna notleft, to fajl new.html budet zagruzhen v okno frejma right (primery 4, 5).

Primer 4.

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS = "100,*,100">
<FRAME SRC = t2.html NAME =
        top>
<FRAMESET COLS = "%40, %60">
<FRAME SRC = t2.html NAME =
        notleft>
<FRAME SRC = t2.html NAME =
        right>
</FRAMESET>
<FRAME SRC = t2.html NAME =
        bottom>
</FRAMESET>
</HTML>

Primer 5.

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor = #AF0000>
<A HREF = new.html TARGET =
        right> <b> This is an
        example of loading into
        the right window </b> </A>
<center>
You can do it using the
        TARGET element
</BODY>
</HTML>

V kachestve real'nogo primera mozhno privesti otkrytie okna podskazki v baze dannyh proekta Radleg. http://www.polegn.kial.su/redleeg.

Okno podskazki poyavlyaetsya posle vybora gipertekstovoj ssylki "Help". Pri etom v dannoe okno zagruzhaetsya stranica s frejmami, gde srednee okno - eto kontekstnyj Help, verhnee - standartnaya zastavka bazy dannyh, a nizhnee okno - perehod k "domashnej" stranice Radleg i zakrytie okna podskazki.

Ispol'zovanie HTML dlya opredeleniya polej zagolovka soobshcheniya protokola HTTP

Vazhnym svojstvom sovremennyh versij HTML yavlyaetsya vozmozhnost' zapisi polej zagolovka soobshcheniya protokola HTTP. Realizuetsya eta vozmozhnost' cherez kontejner zagolovka HTML - dokumenta <META>. Ispol'zuya atribut HTTP-EQUIV, v zagolovok HTTP - soobshcheniya mozhno vklyuchit' lyuboe pole, kotoroe opredeleno standartom protokola HTTP (tekushchaya versiya 1.0). Rassmotrim v kachestve primera organizaciyu reklamnyh rolikov. Ideya sostoit v tom, chtoby ispol'zovat' vremya obnovleniya HTML stranic dlya ih avtomaticheskoj podmeny pri prosmotre. Vremya zhizni opredelyaetsya polem Refresh zagolovka soobshcheniya HTTP:

Refresh = vremya; URL = dokument <LF>

Ispol'zuya kontejner META s atributom HTTP-EQUIV, avtor HTML - dokumenta mozhet opredelit' sleduyushchij dokument ili kadr reklamnogo rolika:

<META HTTP-EQUIV = "Refresh", CONTENT = "0, URL=ref2.http">

V obshchem sluchae mozhno postroit' zamknutuyu ili nezamknutuyu cepochku kadrov, kotoraya i budet iz sebya predstavlyat' reklamnyj rolik.

V primere 6 opisan dokument, kotoryj posle svoej zagruzki budet nemedlenno zamenen dokumentom ref2.html. V real'noj praktike takaya nemedlennaya zamena proishodit ne mgnovenno i zavisit ot skorosti kommunikacij i osobennostej PO i OS.

Primer 6.

<HTML>
<HEAD>
<TITLE> type_Document_ Title_
        here </TITLE>
<META HTTP-EQUIV = "Refresh"
        CONTENT = "0; URL =
        ref2.htm">
</HEAD>
<BODY>
<H1>Document 1</H1>
</BODY>
</HTML>

Programmirovanie scenariev prosmotra. JavaScript

S zadachej upravleniya otobrazheniem vo frejmy i okna tesno svyazano napisanie scenariev prosmotra domashnih stranic Web. Takie scenarii chashche vsego pishutsya na yazyke Java Script.

Java Script - eto yazyk upravleniya scenariem otobrazheniya dokumenta. Vse operacii, kotorye mozhno ispolnyat' v programme na JavaScript, opisyvayut dejstviya nad horosho izvestnymi i ponyatnymi ob容ktam - elementami rabochej oblasti programmy Netscape Navigator i kontejnerami yazyka HTML. V Java Script ne realizovany klassy ob容ktov, nasledovanie, inkapsulyaciya i polimorfizm. Imeyutsya ob容kty s naborom svojstv i nabor funkcij nad ob容ktami, kotorye nazyvayutsya metodami. Funkciya pol'zovatelya vypolnyaetsya po nastuplenii nekotorogo sobytiya: onChange, onClick, onLoad i dr., a vnutrennie funkcii yazyka ispol'zuyutsya neposredstvenno.

Ne vdavayas' v podrobnosti opisaniya Java Script, skoncentriruem vnimanie na kontejnerah Java Script i primerah ispol'zovaniya Java Script kodov. Kontejner <SCRIPT LANGUAGE= "Java Script"> ... </SCRIPT> mozhet ispol'zovat'sya kak v zagolovke, tak i v tele dokumenta. Ne vse programmy prosmotra sposobny raspoznavat' i ispolnyat' skripty, poetomu samo telo skripta pomeshchaetsya v kontejner kommentariya. Luchshe vsego opisat' primenenie Java Script na primerah.

Idushchie chasy i begushchaya stroka

Dannyj tip ob容ktov naibolee chasto ispol'zuetsya na stranicah WWW. V primere 7 priveden fragment programmy, realizuyushchej eti ob容kty:

Primer 7.

<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT LANGUAGE =
        "JavaScript">
<!- Hide script from user
adv_string = "Internet\"
status_string = adv_string +
        adv_string + adv_string +
        adv_string + adv_string +
        adv_string
i=0
function background()
        {
window.status = status_
        string.substring (i,i+180)
...
current_date = new Date()
        window.document.form1.
                clock.value = current_
                date.getHours() + ":" +
                current_date.getMinutes
                () + ":" + current_
                date.getSeconds()
id = setTimeout("back
                ground()", 500)
        window.document.form1.
                kuku.value = "number"+i
        }
//This is the end of code
        definition ->
</SCRIPT>
</HEAD>
<BODY onLoad = "background()"
        BACKGROUND=www_wal0.jpg>
<H1>JavaScript</H1>
<FORM NAME=form1 ACTION =
        "new_window()">
<INPUT NAME = clock TYPE =
        text SIZE = 8MAXLENGTH=8>
<HR>
<INPUT TYPE=button NAME =
        help Value = "HELP"
        onClick = "window.open
        ("clock.htm",
        "Clock_Window",
        "scrollbars = yes,width =
        450, height=350") ">.
<HR>
<INPUT NAME = kuku type =
        text>
<HR>
</FORM
<P>
</BODY>
</HTML>

Dlya sozdaniya skripta v zagolovok dokumenta (kontejner HEAD) vklyuchen kontejner SCRIPT. Do nedavnego vremeni atribut LANGUAGE v etom kontejnere ne yavlyalsya obyazatel'nym. No s momenta poyavleniya VBSCRIPT smysl v ukazanii tipa yazyka poyavilsya - Navigator ne ponimaet skriptov na drugih yazykah. Otsutstvie atributa mozhet privesti k oshibkam pri otobrazhenii gipertekstovyh stranic. Dalee v tekste stranicy opredelen kommentarij, v kotoryj vklyuchen tekst skripta. Nachinaetsya kommentarij strokoj:

<!- Hide script from user

I konchaetsya strokoj:

// This is the end of code definition->

Funkciya, realizuyushchaya begushchuyu stroku, ispol'zuet metod open - vstroennuyu v JavaScript funkciyu, kotoraya opredelena nad ob容ktom window. V rezul'tate otkryvaetsya novoe okno Netscape Navigator i v nego zagruzhaetsya dokument. Vyzov funkcii osushchestvlyaetsya posle nazhatiya na sootvetstvuyushchuyu knopku. Takim obrazom, funkciya budet vypolnena tol'ko v tom sluchae esli proizojdet sobytie, opisannoe atributom onClick v kontejnere INPUT.

Iznachal'no predpolagalos', chto programma prosmotra, kotoraya podderzhivaet JavaScript budet ispolnyat'sya v srede mnogopotokovyh operacionnyh sistem. V etom sluchae k momentu porozhdeniya novogo potoka staryj uzhe zavershitsya i setTimeout budet porozhdat' posledovatel'no ispolnyaemye potoki. Odnako, iz-za neakkuratnoj realizacii JavaScript, komanda setTimeout stala prosto "pozhirat'" resursy komp'yutera. Sistemy Windows 3.x voobshche ne yavlyayutsya mnogopotochnymi i v nih prosto proishodit perepolnenie steka pri vypolnenii dannogo skripta, a kak bystro "upadet" sistema zavisit ot ob容ma ispolnyaemoj po setTimeout funkcii. Samoe luchshe, chto mozhno posovetovat', esli vdrug na ekrane poyavlyaetsya prokrutka - poskoree pokinut' takuyu stranicu. Spravedlivosti radi sleduet otmetit', chto prokrutku mozhno organizovat' i drugimi sposobami, poetomu ee poyavlenie ne obyazatel'no dolzhno vyzyvat' krah sistemy ili krah programmy prosmotra.

JavaScript - eto ne edinstvennyj yazyk upravleniya scenariyami prosmotra dokumentov. Imeetsya drugaya versiya analogichnogo yazyka - VBScript na osnove Visual Basic. Krome togo, upravlyat' scenariem prosmotra mozhno i iz Java-appletov, chto, konechno, slozhnee, no zato bolee nadezhno i bezopasno. Pri etom programmist poluchaet vozmozhnost' nasledovaniya i prochie atributy ob容ktno-orientirovannogo programmirovaniya. V konce koncov, dlya sozdaniya frejmov i okon mozhno ispol'zovat' atributy sootvetstvuyushchih kontejnerov HTML, kotorye pozvolyayut delit' rabochuyu oblast' ekrana na fragmenty, perekryvat' ob容kty i vosstanavlivat' pervonachal'nyj vid stranicy. V Navigator 3.0 poyavilis' novye tipy ob容ktov i funkcii nad nimi.

Massivy

Pervyj tip novyh ob容ktov, kotorye poyavilis' v JavaScript 1.1 - eto massivy. Tip "Array" vveden v JavaScript 1.1 dlya vozmozhnosti manipulirovaniya samymi raznymi ob容ktami, otobrazhaemymi navigatorom. |to - spisok vseh gipertekstovyh ssylok dannoj stranicy, spisok vseh kartinok na dannoj stranice, spisok vseh appletov dannoj stranicy, spisok vseh elementov formy i t.p. Pol'zovatel' mozhet sozdat' i svoj sobstvennyj massiv, ispol'zuya konstruktor Array(). Delaetsya eto sleduyushchim obrazom:

new_array = new Array()
new_array5 = new Array(5)
colors = new Array 
("red", "white", "blue")

Razmernost' massiva mozhet dinamicheski izmenyat'sya, trebuetsya lish' snachala opredelit' massiv, a potom prisvoit' odnomu iz ego elementov znachenie. Kak tol'ko eto znachenie budet prisvoeno, izmenitsya i razmernost' massiva:

colors = new Array()
colors[5] = "red"

V dannom sluchae massiv budet sostoyat' iz 6 elementov, pervym elementom schitaetsya element s indeksom 0.

Dlya massivov opredeleny tri metoda: join, reverse, sort. Join ob容dinyaet elementy massiva v stroku simvolov, v kachestve argumenta v etom metode zadaetsya razdelitel':

colors = new Array 
("red", "white", "blue")
string = acolors.join("+")

V rezul'tate vypolneniya operacii prisvaivaniya znacheniya stroke simvolov string poluchim sleduyushchuyu stroku:

string = "red"+"white"+"blue"

Metod reverse izmenyaet poryadok elementov massiva na obratnyj, a metod sort otsortirovyvaet ih v poryadke vozrastaniya.

U massivov est' dva svojstva: length i prototype. Length opredelyaet chislo elementov massiva. Esli nuzhno vypolnit' nekotoruyu rutinnuyu operaciyu nad vsemi elementami massiva, to mozhno vospol'zovat'sya ciklom tipa:

color = new Array
("red", "white", "blue")
n = 0
while(n != colors.length)
{... operatory tela cikla 
...}

Svojstvo prototype pozvolyaet dobavit' svojstva k ob容ktam massiva. Odnako naibolee chasto v programmah na JavaScript ispol'zuyutsya vstroennye massivy, glavnym obrazom graficheskie obrazy (Images) i gipertekstovye ssylki(Links).

Grafika

Do poyavleniya versii Navigator 3.0 v JavaScript ispol'zovalis' tol'ko vstroennye ob容kty tipa Image. V novoj versii yazyka poyavilsya konstruktor dlya etogo tipa ob容ktov:

new_image = new Image()
new_image = new Image (width,height)

CHasto dlya realizacii mul'tiplikacii sozdayut massiv graficheskih ob容ktov, kotorye potom prokruchivayut odin za drugim:

img_array = new Array()
img_array[0] = new Image(50,100)
img_array[1] = new Image(50,100)
....
img_array[99] = new Image(50,100)

U ob容kta Image sushchestvuet 10 svojstv, iz kotoryh samym vazhnym yavlyaetsya src. Dlya prisvaivaniya konkretnyh kartinok elementam massiva img_array sleduet vospol'zovat'sya sleduyushchej posledovatel'nost'yu komand:

img_array[0].src = "image1.gif"
img_array[1].src = "image2.gif"
...
img_array[99].src = "image100.gif"

V dannom sluchae mozhno bylo vospol'zovat'sya i ciklom dlya prisvoeniya imen, tak kak oni mogut byt' sostavleny iz konstant i znachenij indeksnoj peremennoj.

V novoj versii yazyka ob容kt tipa Image mozhno poimenovat' v HTML tage IMG, a zatem obrashchat'sya k nemu po imeni. Pri etom sleduet uchityvat', chto esli Image ispol'zuetsya vnutri formy, to on yavlyaetsya svojstvom etoj formy. |to znachit, chto dlya sleduyushchego graficheskogo ob容kta dolzhny primenyat'sya raznye sostavnye imena:

<img name=car src=car.gif> <-
document.car.src = "car1.gif"
<form name=kuku>
<img name=car src=car.gif>
</form>
document.kuku.car.src = "car1.gif"

Odnako naibolee chasto v primerah ispol'zovaniya skriptov mozhno vstretit' obrashchenie k Image po indeksu v massive vseh graficheskih ob容ktov dannoj stranicy. Esli nash ob容kt, naprimer, yavlyaetsya vtorym Image na stranice, to bud' on vnutri formy ili za ee predelami k nemu vsegda mozhno obratit'sya po indeksu:

document.images[1].src = "car1.gif"

Rasshiryaya primer s massivom Image, sozdadim dokument, v kotoryj budet vstroena mul'tiplikaciya, opredelennaya nashim massivom:

Primer 8.

<HTML>
<HEAD>
<SCRIPT>
function multi_pulti()
        {
                img_array = new Array()
                img_array[0] = new
                                Image(50, 100)
                ....
                img_array[99] = new
                                Image(50, 100)
                img_array[0].src =
                                "image1.gif"
                ...
                img_array[99].src =
                                "image100.gif"
                n=0
                while(n==0)
                        {
                                document.images[0].src =
                                                img_array[0].src
                                ...
                        }
        }
</SCRIPT>
</head>
<body onLoad="multi_pulti()">
<img src=image1.gif>
</body>
</html>

Dovol'no chasto ispol'zuyut ne mul'tiplikaciyu, a vybor kartinki cherez OPTION - eshche odin novyj ob容kt JavaScript. Pri etom mozhno cherez pole formy SELECT menyat' ne tol'ko samu kartinku, no i gipertekstovuyu ssylku, kotoraya mozhet byt' svyazana s etoj kartinkoj. Na gipertekstovuyu ssylku takzhe mozhno ssylat'sya po indeksu:

document.links[index].href = kuku.html

Dannyj priem opravdan i s tochki zreniya interfejsa navigatora. Pri ispol'zovanii takogo sorta massivov ssylok ne trebuetsya ih dlitel'noe perechislenie i listanie stranicy v rabochej oblasti navigatora - mozhno prosto vybrat' ssylku iz padayushchego menyu.

Drugoj sposob dlya sokrashcheniya chisla nazhatij na klavishi - apparat sobytij. V tom zhe ob容kte OPTION mozhno ispol'zovat' sobytie onChange, chto delaet neobyazatel'nym nazhatie knopok tipa submit. V etom sluchae dostatochno budet prosto vybrat' al'ternativu i perejti k novoj stranice srazu posle vybora.

Steki gipertekstovyh ssylok

V yazyk teper' vveden novyj tip ob容ktov Area - eto element kontejnera MAP, kotoryj opredelyaet client-site imagemap. Sobstvenno, glavnoe dostoinstvo takogo ob容kta sostoit v tom, chto gipertekstovye ssylki, opredelennye v AREA stali dostupny dlya pereopredeleniya. Oni poyavlyayutsya v massive obychnyh ssylok stranicy i mozhno kak poluchit' znachenie URL, tak i pereopredelit' ego. K ob容ktu AREA nel'zya obratit'sya po imeni, a mozhno ispol'zovat' tol'ko indeks massiva gipertekstovyh ssylok dokumenta.

V kontekste steka gipertekstovyh ssylok interesno rassmotret' eshche odnu vozmozhnost' JavaScript, svyazannuyu s perehodom po gipertekstovoj ssylke voobshche. V obychnom sluchae parametr HREF kontejnera A dolzhen imet' kakoe-nibud' znachenie. Esli, naprimer, po sobytiyu onClick neobhodimo otkryt' novoe okno i v starom sohranit' otobrazhennyj dokument, to ego URL sleduet ukazyvat' v kachestve znacheniya HREF. V protivnom sluchae, v staroe okno budet zagruzhena pustaya stranica, esli HREF = " ".

V novoj versii JavaScript vvedena funkciya void, tochnee, tip void, kotoryj oznachaet otsutstvie kakogo libo znacheniya. Esli neobhodimo vypolnit' nekotorye dejstviya pri vybore gipertekstovoj ssylki, no pri etom ne peregruzhat' tekushchie stranicy, to v parametre HREF mozhno ukazat' konstrukciyu:

<A HREF = "javascript: void(0)">kuku</A>

Takim priemom chasto pol'zuyutsya pri programmirovanii sobytij, svyazannyh s prohodom manipulyatora mysh' cherez pole gipertekstovoj ssylki.

Frejmy i okna

Pri rabote s frejmami i oknami v predydushchih versiyah JavaScript postoyanno prihodilos' otslezhivat' posledovatel'nost' otkrytiya okon i frejmov dlya togo, chtoby akkuratno ih potom zakryvat'. Na nekotoryh netochnostyah raboty s oknami byli osnovany tak nazyvaemye mail-bombs. Sut' etih "podarkov" zaklyuchalas' v tom, chto esli pol'zovatel' po pochte prinimaet dokument, sostoyashchij tol'ko iz odnoj komandy:

window.close(),

to sistema, ne sprashivaya pol'zovatelya, zakryvala tekushchee okno, a v etot moment takim oknom yavlyaetsya okno elektronnoj pochty. Teper', pered tem kak chto-libo zakryt', sistema budet sprashivat' razresheniya. Pravda, esli v moment polucheniya komandy na zakrytie okna na ekrane imeetsya tol'ko odno okno navigatora, to sistema ego zakroet bez kakih-libo kommentariev.

Rabota s oknami i frejmami na etom ne ischerpyvaetsya. V sistemu vvedeno novoe svojstvo opener, kotoroe opredeleno dlya tekushchego okna ili frejma, a metody blur i focus rasprostraneny na rabotu s oknami. Svojstvo opener opredelyaet okno dokumenta, vyzvavshego otkrytie okna tekushchego dokumenta. Svojstvo opredeleno dlya lyubogo okna i frejma. Esli neobhodimo vypolnit' nekotorye funkcii po otnosheniyu k oknu, otkryvshemu dannoe okno, to mozhno ispol'zovat' vyrazhenie tipa:

window.opener.[method]

Naprimer, esli trebuetsya zakryt' okno - predshestvennik, to mozhno prosto vypolnit' close:

window.opener.close()

Tochno takim zhe sposobom mozhno izmenit' soderzhanie etogo okna pri pomoshchi metodov write ili writeln.

Mozhno menyat' i drugie svojstva ob容ktov v okne - predshestvennike. Sleduyushchij primer vzyat iz dopolnenij k specifikacii JavaScript:

window.opener.document.bgColor = ScyanT

V dannom sluchae dlya okna - predshestvennika opredelen svetlo-goluboj cvet v kachestve cveta fona.

No samym zamechatel'nym yavlyaetsya to, chto predshestvennika mozhno menyat'. |to znachit, chto avtor poluchaet vozmozhnost' otkryvat' i zakryvat' okna ne v strogo ierarhicheskoj posledovatel'nosti, a v proizvol'nom poryadke. Upravlenie mnogookonnym interfejsom v etom sluchae stanovitsya bolee gibkim:

window.opener = new_window
window.opener = null

Pervyj primer perenaznachaet okno-predshestvennik, v to vremya kak vtoroj voobshche zashchishchaet predshestvennika ot kakih-libo dejstvij.

Vse chto bylo skazano ob oknah rasprostranyaetsya i na frejmy, kotorye yavlyayutsya prosto chastnym sluchaem okna. Frejm chasto mozhet byt' porozhden putem razbieniya drugogo frejma na chasti. Esli pri etom potrebuetsya obratit'sya k oknu frejma - predshestvennika, to svojstvo opener v etom sluchae nezamenimo.

Krome obrashcheniya k razlichnym svojstvam okon i frejmov bylo rasshireno dejstvie metodov blur i focus s frejmov do okon. Teper' ne tol'ko frejm, no i okno mozhet byt' sdelano tekushchim s ispol'zovaniem metoda focus ili, naoborot, perevedeno v fon pri pomoshchi metoda blur. V ryade sluchaev, naprimer, pri porozhdenii neskol'kih stranic obrashchenie k etim funkciyam byvaet dovol'no poleznym.

Nasledovanie koda skriptov razlichnymi stranicami

U kontejnera SCRIPT poyavilsya atribut SRC. |to daet vozmozhnost' avtoram stranic stroit' svoeobraznuyu biblioteku funkcij, k kotorym mozhno obrashchat'sya iz lyuboj stranicy, imeyushchej ssylku na takuyu biblioteku. Pri etom vovse ne obyazatel'no razmeshchat' samu biblioteku na tom zhe servere, gde razmeshcheny i gipertekstovye stranicy Web. Mozhno ispol'zovat' i chuzhie funkcii na yazyke JavaScript.

V atribute SRC primenyaetsya obychnyj URL. Vnutri fajla skriptov ne ispol'zuyutsya tagi SCRIPT - eto obychnyj fajl s opredeleniyami funkcij i peremennyh.

Drugoj vozmozhnost'yu raboty s funkciyami stalo vvedenie novogo ob容kta Function, porozhdaemogo konstruktorom Function:

new_Function = new Function 
(arg1, arg2, .., argn, function_body)

Glavnoe otlichie ot obychnogo deklarirovaniya funkcii zaklyuchaetsya v tom, chto v dannom sluchae porozhdena peremennaya new_Function, s kotoroj mozhno rabotat', kak s lyubym drugim ob容ktom. Pri obychnom opredelenii funkcii takoj peremennoj ne porozhdaetsya.

Kak lyuboj ob容kt, Function imeet svoi svojstva, no ne imeet metodov. V kachestve svojstv funkcii vystupayut argumenty i vozmozhnost' naznacheniya novyh svojstv cherez prototype.

Pri obrashchenii k ob容ktam stranicy-roditelya mozhno ispol'zovat' svojstvo opener okon i frejmov, chto pozvolyaet kompensirovat' otsutstvie nasledovaniya i apparat global'nyh peremennyh v JavaScript.

Java, JavaScript i moduli rasshireniya

V novoj versii yazyka HTML est' vozmozhnost' organizovat' vzaimodejstvie mezhdu Java appletami i JavaScript-skriptami. Dostigaetsya eto za schet ispol'zovaniya atributa MAYSCRIPT v kontejnere APPLET. Sobstvenno, v JavaScript opredelen ob容kt tipa APPLET, k kotoromu mozhno obrashchat'sya libo po imeni, libo po indeksu v massive appletov. U etogo ob容kta imeetsya tol'ko odno svojstvo - imya. Kakie-libo drugie svojstva ili metody dlya dannogo tipa ob容ktov ne opredeleny.

Krome appletov JavaScript pozvolyaet rabotat' i s Plug-ins, predstavlyayushchie soboj massiv sootvetstvuyushchego tipa, dlya kotorogo opredelen ryad svojstv. Ispol'zuya eti svojstva, mozhno opredelit' ustanovlennye plig-ins i ih sootvetstviya MIME-tipam. Naznachit' plug-ins ili manipulirovat' imi nel'zya.

Rasshirenie vozmozhnostej ispol'zovaniya graficheskih ob容ktov

K rasshireniyu vozmozhnostej sleduet otnesti:

  • obtekanie grafiki tekstom;
  • funkciya client-site imagemap.
  • Obtekanie dostigaetsya za schet ispol'zovaniya atributa ALIGN elementa IMG. ALIGN mozhet prinimat' znacheniya: TOP, MIDDLE, BOTTOM, LEFT, RIGHT. Poskol'ku risunok, vstraivaemyj po IMG, rassmatrivaetsya programmami prosmotra kak odin bol'shoj simvol, atribut ALIGN opredelyaet, gde otnositel'no drugih simvolov teksta v stroke budet raspolagat'sya etot risunok. Esli zadano znachenie TOP, to kartinka otobrazhaetsya kak podstrochnaya - ostal'nye simvoly stroki vyravnivayutsya po verhnemu krayu risunka, pri znachenii MIDDLE kartinka raspolagaetsya kak obychnyj simvol i tekst formatiruetsya po centru. Esli zadano znachenie BOTTOM, risunok otobrazhaetsya kak nadstrochnaya bukva, tekst vyravnivaetsya po ego nizhnemu krayu. Znacheniya LEFT i RIGHT etogo atributa ispol'zuyutsya dlya razmeshcheniya kartinki v levoj ili pravoj chasti stranicy, chto privodit k obtekaniyu kartinki tekstom sprava ili sleva sootvetstvenno.

    Client-site imagemap - eto sposob izbavit'sya ot mnogoobraziya realizacij steka graficheskih gipertekstovyh ssylok, kotorye primenyayutsya razlichnymi HTTP - serverami. Sposob organizacii client-site imagemap sostoit iz dvuh chastej: opredeleniya image kak client-site imagemap i opredeleniya fragmentov image kak gipertekstovyh ssylok. Privedem primer:

    Primer 9.

    <HTML>
    <!-
    Author: HTMLed User
    Date:   April 1, 1997
    ->
    <HEAD>
    <TITLE>Graphics</title>
    </HEAD>
    <BODY BGCOLOR = #FFbcbc>
    <center>
    <h4><img src = html.gif>YAzyk gi-
            pertekstovoj razmetki HTML</h4>
    <hr>
    <h1>Grafika v HTML</h1>
    <hr>
    <table border=2>
    <tr><td><a href = graph1.htm>
            Oboi</a>
    <td><a href = #img>IMG</a>
    <td><a href = move.htm> GIF89a</a>
    <td><a href = #map>client-site
            maps</a>
    </table>
    <hr>
    </center>
    <a name = map>
    <h2>Steki graficheskih ssylok</h2>
    <MAP name = "mymap">
    <AREA SHAPE = "RECT" COORDS =
            "6,0,43,34" HREF = #html1>
    <AREA SHAPE = "RECT" COORDS =
            "305,0,342,34" HREF = #img>
    <AREA SHAPE = "RECT" COORDS =
            "80,0,120,34" HREF = #html1>
    <AREA SHAPE = "RECT" COORDS =
            "156,0,194,34" HREF = #img>
    </MAP>
    <p>
    <img src = image.gif USEMAP = "#mymap"><br>
    <hr>
    <a name = img>
    <h2>Obychnyj IMG</h2>
    Obychno grafika vstavlyalas' v tekst
            dokumenta kak simvol.<br>
    <img src=htpdicon.gif><br>
    Poetomu prihodilos' vstavlyat' ee
            mezhdu strok teksta
    <p>
    <img src = htpdicon.gif align =
            left hspace = 10>V HTML 2.0
            Netscape Extensions poyavilas'
            vozmozhnost' obtekaniya grafiki
            tekstom pri primenenii atributa
            align:<br>
    <img src = htpdicon.gif align =
            left>
    <hr>
    <a name = html1>
    Primer perehoda po graficheskoj
            ssylke.
    <hr>
    </BODY>
    </HTML>

    V primere 9 graficheskij obraz, opredelennyj v kontejnere <IMG SRC =... USEMAP = ...>, yavlyaetsya ob容ktom, kotoryj razbit na pryamougol'niki. S kazhdym pryamougol'nikom svyazana gipertekstovaya ssylka. |ti ssylki opredeleny v kontejnere <MAP ...>... </MAP>, a svyaz' mezhdu kontejnerami IMG i MAP osushchestvlyaetsya cherez kontejner MAP.

    Rasshirenie vozmozhnostej sozdaniya tablic

    Dlya organizacii tablic ispol'zuetsya element TABLE, kotoryj yavlyaetsya kontejnerom dlya drugih elementov opisaniya tablicy. Atribut BORDER opredelyaet razdelyayushchie linii mezhdu grafami tablicy, obychno oni byvayut trehmernye ili prostye. Sama forma etih linij zadaetsya v fajle konfiguracii programmy prosmotra.

    |lementy TH (Table Header) i TD (Table Data) ispol'zuyutsya v primere 10 ne tol'ko dlya opisaniya graf tablicy, no i dlya ob容dineniya graf pri pomoshchi atributov ROWSPAN -propusk stroki i COLSPAN - propusk stolbca. Cifra v etih atributah opredelyaet kolichestvo posledovatel'no raspolozhennyh graf tablicy, ob容dinennyh v odnu.

    Primer 10.

    <HTML>
    <HEAD>
    <title>Versions</title>
    </HEAD>
    <BODY BGCOLOR = #FFbcbc>
    <center>
    <hr>
    <h1>Versii HTML</h1>
    <hr>
    <table border = 2>
    <tr><TD colspan = 3
            align=center>HTML 1.0
    <tr><td colspan = 3 align =
            center> HTML 2.0
    <tr><td>HTML+<TD>Netscape
            Extensions <td> Microsoft
            Extensions
    <tr><td align = center>HTML
            3.0<BR> (Project) <br>Arena<td align = center>
            Navigator 2.0 <td align =
            center> Explorer
    <tr><td colspan = 3 align =
            center>????? HTML3.0 ?????
    </table>
    </center>
    </BODY>
    </HTML>

    Zaklyuchenie

    Privedennye rasshireniya standarta yazyka HTML ne opisyvayut vsego mnogoobraziya vozmozhnostej, kotorye dostupny iz bol'shinstva programm prosmotra. Odnako, eto naibolee rasprostranennye sposoby formatirovaniya stranic v WWW. YAzyk HTML prodolzhaet razvivat'sya, a ego nyneshnij standart poka eshche ne tol'ko dalek ot ideala, no dazhe ne priobrel kakoj-libo zakonchennoj formy.


    Literatura

    [1] Chuck Musciano and Bill Kennedy, "HTML: The Definitive Guide", O"Reily&Associates, Inc (1996).

    [2] html.doc, "Vremya Microsoft", zhurnal Auramedia, specvypusk. "Resheniya Microsoft", vypusk 5 (1996).

    [3] Michael J. Hannah, "HTML Reference Manual" (1996), http://www.sandia.gov/ sci_compute/ html_ref.html

    [4] HTML 3.2. Features at a Glance, http://www.w3.org/pub/WWW/MarkUp/Wilbur/features.html

    [5] Netscape extensions to HTML 3.0, http://home.netscape.com/assist/net_sites/html_extensions_3.html

    [6] HTML 2.0 Standart, http://www.w3.org /pub /WWW/MarkUp/html-spec

    [7] Using JavaScript in HTML, http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/index.html

    [8] Stefan Koch, "Introduction to JavaScript" (1996), http://www.webcom.com/java/java-script/intro/index.htm


    Otkrytye sistemy · #6(20)/96
    Bottom Line


    Last-modified: Tue, 15 Jul 1997 06:32:49 GMT
    Ocenite etot tekst: