Dla 4ego eto nujno?
Mexanizm bannerov pozvolaet ojivit' strani4ku i zritel'no sozdat' vpe4atlenie, 4to sayt vse vrema menaetsa. Naibolee polezna eta funkcia budet dla kontent-saytov - o4en' udobno sozdavat' banneri dla konkretnix statey i razme6at' ix v lokal'noy bannernoy sisteme. Lu46e vsego, kone4no, mexanizm prokrutki bannerov organizovat' na storone servera s primeneniem Perl, PHP ili ASP, no ne u vsex, k sojaleniu, est' dostup k CGI-skriptam. I, v etom slu4ae, dla re6enia zada4i mi mojem vospol'zovat'sa vstroennimi skriptovimi azikami.
Nesmotra na to, 4to a budu ob&asnat' kak napisat' nebol'6uu bannernuu sistemu s ispol'zovaniem JavaScript, izlojennie principi vpolne primenimi i dla lubix drugix azikov.
Uslovia zada4i i ograni4enia
A teper', davayte, bolee podrobno sformuliruem uslovia zada4i i vvedem rad ograni4eniy, kotorie uprostat programmirovanie. Bannernaa sistema doljna vipolnat' sleduu6ie funkcii:
- gde-to xranit' bazu dannix o bannerax
- slu4ayno vibirat', iz vi6eupomanutoy bazi, neskol'ko nepovtorau6ixsa bannerov
- obespe4ivat' mexanizmi otobrajenia bannerov i perexoda na nujnuu strani4ku pri najatii
Nakladivaem na eti uslovia nekotorie ograni4enia:
- banneri budut fiksirovannogo razmera, i xranit'sa v formate GIF ili JPEG
- na strani4ke mi budem odnovremenno pokazivat' 4etire bannera
Nu vot, uslovia i ograni4enia opredeleni. Teper', davayte, bolee podrobno rassmotrim, kakim obrazom lu46e vsego xranit' banneri. V ka4estve bazi dla xranenia parametrov bannerov mi vospol'zuemsa obi4nim massivom. O kajdom iz bannerov nam budet neobxodimo xranit' sleduu6uu informaciu:
- ima fayla
- al'ternativniy tekst
- adres strani4ki, na kotoruu ssilaetsa banner
Dla udobstva xranenia i obnovlenia bazi bannerov, lu46e vsego videlit' ee opisanie v otdel'niy fayl i podklu4it' pri pomo6i mexanizma vstavki vne6nego js-fayla. Eto delaetsa v sekcii zagolovka pri pomo6i sleduu6ey konstrukcii:
<script language="JavaScript" src="banners.js"></script>
A vot tak, budet vigladet' soderjimoe fayla banners.js
var banners = new Array(
"pic-01.gif", "Text #1", "http://www.link1.com/",
"pic-02.gif", "Text #2", "http://www.link2.com/",
"pic-03.gif", "Text #3", "http://www.link3.com/",
"pic-04.gif", "Text #4", "http://www.link4.com/",
"pic-05.gif", "Text #5", "http://www.link5.com/",
"pic-06.gif", "Text #6", "http://www.link6.com/",
"pic-07.gif", "Text #7", "http://www.link7.com/",
"pic-08.gif", "Text #8", "http://www.link8.com/",
"pic-09.gif", "Text #9", "http://www.link9.com/",
"pic-10.gif", "Text #10", "http://www.link10.com/"
)
Kak vidite, struktura massiva ne o4en' slojna. Pod kajdiy banner otvoditsa tri posledovatel'nie a4eyki, v kotorix i xranatsa: ima fayla, al'ternativniy tekst, adres ssilki.
Programmnaa 4ast'
Vot mi i dobralis' do programmirovania. I, sna4ala, razberemsa s nekotorimi momentami.
Na4nem s generacii nepovtorau6ixsa bannerov. Dla vibora proizvol'nogo bannera, nam neobxodimo sgenerirovat' slu4aynoe 4islo v diapazone ot nula do 4isla bannerov minus odin. Eto neslojno i delaetsa sleduu6im fragmentom koda:
n = Math.floor(Math.random()*(banners.length/3));
No, kak a uje upominal ran'6e, mi dogovorilis', 4to odnovremenno na strani4ke budut pokazivat'sa 4etire bannera. I, sledovatel'no, posle kajdoy generacii slu4aynogo 4isla nam neobxodimo proverit', 4to danniy banner ne sovpadaet s 3-ma drugimi. K tomu je nam nujno gde-to xranit' uje sgenerirovannie 4isla. Dla re6enia etix zada4, mi organizuem e6e odin massiv - slu4aynix 4isel i pri kajdoy generacii novogo 4isla budem sopostavlat' ego s naydennimi ranee. Polniy kod, kotoriy re6aet eti problemi, priveden nije:
var i, j;
var flag; // Flajok, ispol'zuemiy dla proverki sovpadenia
var banners_show = 4; // 4islo pokazivaemix na strani4ke bannerov
var rand = new Array(banners_show-1);
for (i=0; i<banners_show; i++) {
do {
flag=0;
n = Math.floor(Math.random()*(banners.length/3));
for (j=0; j<i; j++) {
if (n == rand[j]) {
flag=1;
}
}
} while (flag);
rand[i] = n;
}
Vvidu togo, 4to banneri budut generirovat'sa na letu, v processe zagruzki stranici, vi6eprivedenniy fragment koda neobxodimo razmestit' vne funkcii. V moment, kogda brouzer pereydet k otrisovke strani4ki, mi uje budem imet' gotoviy massiv slu4aynix 4isel.
Dla otrisovki bannerov, mi napi6em prostuu funkciu, i budem peredavat' ey v ka4estve parametra poradkoviy nomer bannera na strani4ke. Ispol'zua etot nomer, mi 4itaem iz massiva rand[] slu4aynoe 4islo dla konkretnogo bannera i uje ispol'zua ego, naxodim vse neobxodimie dla otrisovki dannie:
function Show_Banner(number) {
n=rand[number-1];
document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' +
banners[n*3] + '"' + 'border=0 width=' + banner_width + ' height=' +
banner_height + ' alt="' + banners[n*3+1] + '"></a>');
}
Vot, prakti4eski i vse, na6a lokal'naa bannernaa sistema gotova. Ostalos' tol'ko 4etire raza vizvat' funkciu Show_Banner() iz podxoda6ey 4asti strani4ki. Nujno, tol'ko ne zabit', 4to kod JavaScript otdelaetsa ot html tegami <script></script>:
<script>
<!--
Show_Banner(1);
//-->
</script>
.......
<script>
<!--
Show_Banner(4);
//-->
</script>
Dla proverki rabotosposobnosti lokal'noy bannernoy sistemi, neskol'ko raz najmite v brouzere knopku Reload i ubedites', 4to kajdiy raz generiruutsa raznie i ne sovpadau6ie drug s drugom banneri.
Arxiv s primerom skripta, rassmotrennogo v dannoy stat'e, mojno vzat' otsuda. citforum.ru/internet/webd/article_27.shtml
