JavaScript | Personal magazin
Personal magazin > Početak » Archive by category 'Software » Razvoj » JavaScript'

Stranica 1 od 3123

Sledeća stranica »

JavaScript

CSS preusmerivač

17.05.2007

Da bi vaše web stranice izgledale konzistentno u svim browser-ima, trebalo bi da pripremite odgovarajuće CSS fajlove i izvršite preusmeravanje browser-a na odgovarajući stil

css%20selekcija CSS preusmerivačK ao što smo rekli u jednom od prethodnih prilogu, da bi vaše web stranice izgledale konzistentno u svim browser-ima, trebalo bi da pripremite odgovarajuće CSS fajlove i izvršite preusmeravanje browser-a na odgovarajući stil. Ovo je pogotovo bitno kod veličine fontova. Zato ćemo kreirati rutinu za detekciju čitača, koja će potom u odnosu na rezultat usmeriti browser na odgovarajući spoljni CSS fajl.

Pošto većina posetilaca nema poslednje verzije popularnih Web čitača, potrebno je napraviti i posebne stilove za različite verzije istog browser-a, kojim ćemo prebroditi limite starijih verzija.

Koristeći JavaScript moguće je proveriti “dolazeći” browser i zatim ga preusmeriti na korišćenje određenog eksternog CSS skupa stilova, korišćenjem <LINK> taga. Evo i samog koda:

<html>
<head>
<title>CSS redirekcija</title>
<script language=”JavaScript”>
var IE4 = (document.all && !document.getElementById) ? true : false;
var IE5 = (document.all && document.getElementById) ? true : false;
var NS4 = (document.layers) ? true : false;
var NS6 = (document.getElementById && !document.all) ? true : false;
if (IE4)
document.write(‘<link rel=”stylesheet” type=”text/css” href=”ie4.css”>’);
else {
if (IE5)
document.write(‘<link rel=”stylesheet” type=”text/css” href=”ie5.css”>’);
else
if (NS4)
document.write(‘<link rel=”stylesheet” type=”text/css” href=”ns4.css”>’);
else
if (NS6)
document.write(‘<link rel=”stylesheet” type=”text/css” href=”ns6.css”>’);
}
</script>
</head>
<body>
Probna Web stranica.
</body>
</html>

U prve četiri linije vršimo detekciju browser-a korišćenjem provere specifičnih objekata za svaku vrstu browser-a, a potom rezultate smeštamo u odgovarajuće varijable.

Sa gledišta JavaScript-a, osnovna razlika između Internet Explorer-a 4.x i 5.x je ta što verzija 4.x podržava objekat document.all, a ne podržava document.getElementById.

Slično ovome, Netscape Navigator 4.x podržava objekat document.layers, a verzija 6.0 poseduje novi metod nazvan document.getElementById. Za razliku od Internet Explorer-a, NN 6.0 ne podržava objekat document.all. end CSS preusmerivač

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Pozadinski slideshow

17.05.2007

Kako kreirati slideshow u pozadini vaših stranica (background-u) tj. “ispod” sadržaja samih stranica?

slide Pozadinski slideshow
Checkiranje
D onosimo vam prikaz vrlo efektivnog JavaScript koda, koji će vam omogućiti da kreirate slideshow u pozadini vaših stranica (background-u) tj. “ispod” sadržaja samih stranica.

Korišćenjem odgovarajućeg style skripta, slike se prikazuju samostalno unutar površine stranica. Ovaj efekat je podržan u Internet Explorer-u 4.0 i novijim verzijama, i Netscape-u 6.0.

Prvo što treba da uradimo je da definišemo pozadinski stil:

 <style>
 body{
 background-repeat: no-repeat;
 background-position: 200 100;
 }
 </style>

Ovom definicujom, koju treba da smesite unutar HEAD taga, podešavamo poziciju (koordinate X i Y) pozadinskog sloja u kome će biti smeštene slike slideshow-a, u odnosu na samu stranicu. Odmah ispod ove definicije dodajte sledeći JavaScript kod: 

 <SCRIPT LANGUAGE="JavaScript">
 <!-- Begin
 // brzina u millisekundama
 var brzina = 1000

 // Definisanje slika za slideshow
 var Slika = new Array()
 Slika[0] = '1.gif'
 Slika[1] = '2.gif'
 Slika[2] = '3.gif'
 Slika[3] = '4.gif'

 var t
 var j = 0
 var velicina = Slika.length

 var ucitavanje = new Array()
 for (i = 0; i < velicina; i++){
    ucitavanje[i] = new Image()
    ucitavanje[i].src = Slika[i]
 }

 function pokreniSlideShow(){
    if (document.body){
    document.body.background = Slika[j];
    j = j + 1
    if (j > (velicina-1)) j=0
    t = setTimeout('pokreniSlideShow()', brzina)
    }
 }
 //  End -->
 </SCRIPT>

Preostaje vam da još samo u BODY tag ubacite obrađivač događaja “onLoad” i poziv funkcije “pokreniSlideShow()”: 

  <BODY OnLoad="pokreniSlideShow()">

end Pozadinski slideshow

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Potvrda CheckBox polja, klikom na tekst

17.05.2007

Kada u formularima imate veliki broj CheckBox polja rešenje u pogledu optimizacije i usability-ja bi moglo da bude u omogućavanju čekiranja polja jednostavnim klikom na tekst pored polja.

check Potvrda CheckBox polja, klikom na tekstA ko na vašem sajtu imate formulare, koje popunjavaju posetioci, a koji sadrže veliki broj CheckBox polja bilo bi dobro da im na neki način olakšate popunjavanje. Ovo je pogotovo bitno kada su CheckBox polja “načičkana”, jedno do drugog. U ovakvim slučajevima rešenje bi moglo da bude u omogućavanju čekiranja polja jednostavnim klikom na tekst pored polja. Znači, posetioci neće morati da precizno kliknu na mali kvadratić, već treba samo da “pogode” tekstualni naslov.

Prvo ćemo kreirati funkciju koju ćemo ubaciti u HEAD tag stranice:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function PromenaPolja(polje) {
box = eval(polje);
box.checked = !box.checked;
}
//  End -->
</SCRIPT>
</HEAD>

Kao što vidite, funkcijom “PromenaPolja()” vrši se samo promena osobine “checked”. Ovu funkciju ćete pozivati iz tela fomulara, i to kod svakog CheckBox polja. Primer fomulara sa samo jednim poljem se nalazi u sledećim redovima. Ovaj kod iskopirajte unutar BODY taga stranice: 

<FORM name=probnaforma>
<input type=checkbox name=ppolje>
<a href="" onClick="PromenaPolja('document.probnaforma.ppolje');
return false">
Kliknite za izbor!</a>
</FORM>

Tekstu pored polja smo dodelili link, na čiji klik pozivamo funkciju za promenu statusa osobine “checked” (pogledajte sliku). end Potvrda CheckBox polja, klikom na tekst

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Optimizacija kôda keširanjem objekata

17.05.2007

“Keširanjem” dramatično možemo povećati brzinu izvršavanja Javascript programa

cash Optimizacija kôda keširanjem objekataJ avaScript aplikacije vremenom postaju sve veće i komplikovanije, tako da raste potreba za efikasnijim skriptovima. Ako se vratimo na početke JavaScript-a, kada smo uz pomoć skriptova samo menjali boju pozadine, ili vršili neke jednostavnije validacije formulara, tada zbog malog koda efikasnost skriptova nije bila u pitanju. Sada kada imamo gotovo cele aplikacije na jednoj .html stranici, efikasnost programskog koda nije više nešto što možemo preskočiti. Zato ćemo vam u ovom prilogu pokazati jedan od momenata za povećanje efikasnosti vaših skriptova.

Radi se zapravo o tzv. “keširanju objekata”, kojim dramatično možemo povećati brzinu izvršavanja programa. Često vaši skriptovi višestruko pristupaju određenim objektima, kao u sledećem primeru:
<script language=”JavaScript”>
for (i=0; i<document.images.length; i++)
document.images[i].src = “blank.gif”
</script>

U gornjem kodu, objektu “document.images” se višestruko pristupa. Ovaj kod je totalno neefikasan, pošto browser mora dinamički da dva puta pristupi objektu tokom jednog ponavljanja petlje (prvi put pri proveri “if i Keširanje objekata znači da objekte kojima često pristupamo, smestimo unutar korisnički definisane varijable, i da onda tu varijablu koristimo umesto višestrukog pozivanja objekta. Poboljšanje performansi može biti značajno. U sledećim redovima ćemo navesti modifikovanu verziju prethodnog koda, koristeći keširanje objekta:

<script language=”JavaScript”>
var slike = document.images

for (i=0; i < slike.length; i++)
slike[i].src=”blank.gif”
</script>

Ovim kodom, ne samo da je smanjen broj referenciranja objekata za pola, nego i svaki put kada pozivamo objekat, browser više ne mora ide na document.images, već samo treba da pristupi formiranom nizu. end Optimizacija kôda keširanjem objekata

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Nizovi

17.05.2007

Iako u JavaScriptu nemate tip podataka “niz”, uz pomoć objekta Array i njegovih metoda možete manipulisati nizovima

nizovi2 NizoviU JavaScript-u nemate niz kao tip podataka, ali zato možete iskoristiti objekt “Array” i njegove metode za rad sa nizovima u vašim aplikacijama. Ovaj objekt ima različite metode za manipulisanje nizovima, kao što su dodavanje elemenata nizu, sortiranje, iščitavanje elemenata itd. Poseduje različite osobine pomoću kojih određujemo dužinu niza i druge osobine koje nam služe za bliže određenje niza.

Array – niz je uređeni skup vrednosti koji ima naziv i indekse. Na primer, možete imati niz nazvan “Radnik” koji će sadržati imena zaposlenih, i koji je indeksiran putem šifre radnika. Tako da član niza “Radnik[1]” predstavlja ime radnika sa šifrom jedan, “Radnik[2]” predstavlja ime radnika koji ima šifru dva itd. Evo kako se kreira niz:

NazivNiza = new Array([element0, ..., element n])
NazivNiza = new Array([DuzinaNiza])

nizovi1 Nizovi* NazivNiza – predstavlja naziv novog objekta ili osobinu postojećeg objekta. Kada koristite osobine i metode objekta Array, NazivNiza predstavlja postojeći niz ili osobinu postojećeg objekta.
* element0, element1, …, element n – je lista članova niza. Kada na ovaj način specifikujete niz, niz je inicijalizovan uz pomoć navedenih elemenata, i osobina dužine niza je postavljena na broj navedenih članova niza.

“Array” objekt poseduje sledeće metode:

* concat – metoda koja spaja dva niza u jedan novi niz.
* join – metoda koja spaja sve elemente jednog niza u jedinstveni string.
* pop – metod uklanja poslednji element niza i vraća vrednost datog člana niza.
* push – dodaje jedan ili više elemenata na kraj niza i vraća poslednji element koji je dodat.
* reverse – vrši transponovanje elemenata niza: prvi element postaje poslednji, a poslednji postaje prvi.
* shift – uklanja prvi element niza i vraća njegovu vrednost.
* slice – iz postojećeg niza izdvaja određeni segment i stvara novi niz.
* splice – dodaje i/ili uklanja elemente iz niza.
* sort – sortira elemente niza.
* unshift – dodaje jedan ili više elemenata na početak postojećeg niza i vraća dužinu novog niza.

Za primer, definisaćemo jedan niz:

mojNiz = new Array(“Novi Sad”,”Beograd”,”Nis”)

I navešćemo nekoliko metoda:

* mojNiz.join() – vraća “Novi Sad,Beograd,Nis”
* mojNiz.reverse – transponuje postojeći niz tako da je element niza mojNiz[0] – �Nis�, mojNiz[1] je �Beograd�, i mojNiz[2] je “Novi Sad”. end Nizovi

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Centralno otvaranje prozora

17.05.2007

Predstavljao vam vrlo efektan JavaScript kod kojim možemo dobiti animirano centralno otvaranje prozora lokaciji koja je linkovana

cent prozor Centralno otvaranje prozoraEvo JavaScript koda koji će uneti malo dinamičnosti u vaše web stranice. Radi se o skriptu koji će klikom na neki link, otvoriti i predstaviti sadržaj sa tog linka, ali sa dinamičnom uvodnom sekvencom.

Na početku sekvence prozor se smanjuje na najmanju meru, u centralnom delu ekrana, i onda se putem “for” petlje vrši širenje prozor na ceo ekran kroz više koraka. Skript je vrlo jednostavan i sastoji se od funkcije “otvori()” koja će biti pozvana sa nekog linka: 

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function otvori() {
for(x = 0; x < 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100,
screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50,
screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}
// -->
</SCRIPT>
</HEAD>

<BODY>
<a href="http://www.personalmag.co.yu" onClick="otvori();">
Personal magazin</a>
</BODY>

end Centralno otvaranje prozora

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Objekat “history”

17.05.2007

Objekat [History] čuva informacije o URL adresama koje su prethodno bile posećene i o adresama koje su posećene nakon posete tekućoj stranici, a u sebi sadrži metode za kretanje

history Objekat historyObjekat “history” je naslednik objekta “window”. Ovaj objekat čuva informacije o URL adresama koje su prethodno bile posećene i o adresama koje su posećene nakon posete tekućoj stranici, a u sebi sadrži metode za prelazak na prethodnu, odnosno sledeću stranicu. Objekat ima samo jednu osobinu, a to je “length” (dužina), koja predstavlja zapravo veličinu “history” liste, tj. broj različitih lokacija koje je posetilac posetio. Možda ćete misliti da nedostaje još jedna osobina, a to je podatak o samim URL lokacijama. Ova osobina je nekad postojala, ali ju je Netscape uklonio iz sintakse iz razloga privatnosti korisnika Interneta. U suprotnom bi velike kompanije preuzimale vaše “history” liste i upotrebljavali ih u statističke ili marketinške svrhe.

Sledeće metode objekta “history” vam omogućavaju da posetioca preusmerite na druge lokacije:

  • history.back() – upućuje posetioca na prethodno posećenu stranicu. Ovo je ekvivalentno kliku na dugme “Back” u browser-u.
  • history.forward() – upućuje posetica na sledeću stranicu. Ovo je ekvivalentno kliku na dugme “Forward” u browser-u.
  • history.go() – upućuje posetioca na određenu lokaciju iz “history” liste. Upotrebom pozitivnih brojeva idete napred, a upotrebom negativnih nazad, ili možete upotrebiti određeni string za pretragu “history” liste i iskoristiti tu informaciju za preusmeravanje.

U sledećim redovima ćemo navesti jedan primer, kako možete da na vaše stranice, radi bolje navigacije vaših posetilaca, implementirate dugmad [Napred] i [Nazad]:

<HTML>
<HEAD>
<TITLE>Primer "Napred-Nazad"
</TITLE>
</HEAD>
<BODY>
<HR>
Ova stranica vam omogućava da idete<BR>
napred i nazad u odnosu na tekuću<BR>
stranicu.
<HR>
<FORM NAME="form1">
<INPUT TYPE="button" VALUE="< - NAZAD"
onClick="history.back();">
...
<INPUT TYPE="button" VALUE="NAPRED - >"
onClick="history.forward();">
<HR>
</BODY>
</HTML>

end Objekat history

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Cross Browser kôdovi

17.05.2007

Iza ovog naziva u stvari stoji JavaScript kod koji optimizuje stranice radi izvršavanja datog programskog koda u uglavnom dva najpoznatija browser-a

pozicija Cross Browser kôdoviPrikaz neke stranice u browser-u zavisi od mnogo faktora, među one osnovne spadaju: rezolucija ekrana na kome stranica prikazuje, broj boja (kolorna paleta), vrsta browser-a, vrsta operativnog sistema, platforma itd. Da bi se ovakve razlike prevazišle, i jedna stranica na istovetan način prikazala na što većem broju platformi, koriste ze tzv. cross browser programski kodovi. Iza ovog naziva u stvari stoji JavaScript kod koji optimizuje stranice radi izvršavanja datog programskog koda u uglavnom dva najpoznatija browser-a (Internet Explorer i Netscape Navigator).

U sledećem primeru videćemo jedan cross browser Javascript kod, koji će očitava poziciju scroll bar-ova i veličinu web stranice u pikselima. 


function ocitavanje() {
   if (navigator.appName == "Netscape") {
       x_koord = window.pageXOffset
       y_koord = window.pageYOffset
       visina = document.height
       sirina = document.width
       }
       else {
       x_koord = document.body.scrollLeft
       y_koord = document.body.scrollTop
       visina = window.document.body.scrollHeight
       sirina = window.document.body.scrollwidth
   }
   status = "X scroll: " + x_koord + "/
Y scroll:" + y_koord + "/ Visina:
" + visina + "/Sirina" + sirina
}
setInterval ("ocitavanje ()", 100)

Ovaj programski kod će na svakih 100 milisekundi pokretati funkciju “ocitavanje ()”. A u datoj funkciji se najpre proverava browser, a potom se kroz odgovarajući objektni model očitavaju osobine objekata koje predstavljaju:

  • x_koord – pozicija x scroll bar-a
  • y_koord – pozicija y scroll bar-a
  • visina – visina stranice
  • sirina – širina stranice

Ovako očitani podaci mogu da se iskoriste za recimo drugačiji prikaz stranice u zavisnosti od širine prozora u kojem se stranica prikazuje. Naročitu primenu ovakvo očitavanje ima kod pozicioniranja slojeva (layer-a). end Cross Browser kôdovi

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Tag Marquee na zabavniji način

17.05.2007

Uz pomoć JavaScripta možemo vrlo lako iskontrolisati smer i brzinu kretanja teksta koji je ubačen unutar taga Marquee

marquee Tag Marquee na zabavniji načinSigurno već poznajete tag <MARQUEE>, koji podržava Internet Explorer (i nove verzije Netscape-a), koji omogućava da određeni tekst scroll-uje (klizi) sa jedne da drugu stranu. U ovom prilogu ćemo vam prikazati kako da ovaj tag učinite još zabavnijim, tj. kako da uslovite brzinu i smer scroll-ovanja poruke. Primenom sledećeg JavaScript koda, učinićete da se tekst – poruka kreće u zavisnosti od kretanja pokazivača miša (onako kako ga posetilac pokreće). Smestite sledeći kod unutar <HEAD> taga:
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var statican = false;

function stoj() {
tekst.scrollAmount = 0;
statican = true;
}

function kreni() {
tekst.scrollAmount = 5;
statican = false;
}

function scrolldir() {
mid = screen.width / 2;
mis = event.x;
if (mis > mid)
if (statican == false) {
speed = (mis – mid) / 25;
tekst.scrollAmount = speed;
}
tekst.direction = “right”;
}
else {
if (statican == false) {
speed = (mid – mis) / 25;
tekst.scrollAmount = speed;
}
tekst.direction = “left”;
}
}
//–>
</SCRIPT>

A sledeći programski kod dodajte u telo stranice:
<BODY ONMOUSEMOVE=”scrolldir()”>
<MARQUEE NAME=”tekst” ID=”tekst” BEHAVIOR=”scroll” DIRECTION=”left” SCROLLAMOUNT=”5″ SCROLLDELAY=”1″ HSPACE=”0″ VSPACE=”0″ ONMOUSEOVER=”stoj()” ONMOUSEOUT=”kreni()”>

<B>Ovo je tekst koji scroll-uje!</B> </MARQUEE>

Kada učitate stranicu, pojaviće se “klizeći” tekst, i u slučaju da pokazivač miša pomerate levo ili desno u datom smeru će se pomerati i tekst. Isto važi i za brzinu scroll-ovanja, ako brže pokrećete miša, brže će se kretati i scroll-tekst. end Tag Marquee na zabavniji način

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Kontrola multimedije

17.05.2007

Koja veza postoji između multimedijalnih zapisa i JavaScript-a? Pa ona najbitnija je da uz pomoć JavaScripta i njegovih događaja možemo da kontrolišemo multimediju

mm Kontrola multimedijeMultimedija na web stranicama, uglavnom predstavljaju zvuk i video. Zajedno sa slikama, tekstom, animiranim slikama, bojama i sl. predstavljaju, možemo reći, kompletnu informaciju koja se nudi korisniku. Za zvuk se koriste uglavnom dva formata: wav i midi, a standardni način predstavljanja video informacija je mpeg i AVI format. Ubacivanje ovih multimedijalnih informacija na web stranicu se uglavnom vrši preko EMBED taga (nezatvarajući tag), koji ima sledeće atribute: width, height, play_loop, controls i autostart. Na primer za ubacivanje nekog zvučnog fajla u stranicu napisali bi:
<EMBED NAME=”muz_podloga” src=”zvuk.mid”
LOOP=”False” AUTOSTART=”False”>

Koja veza postoji između multimedijalnih zapisa i JavaScript-a? Pa ona najbitnija je da uz pomoć JavaScripta i njegovih događaja možemo da kontrolišemo multimediju. U sledećem primeru pokrenućemo jedan muzički (.midi) fajl, koga će inicirati događaj – klik mišem na određeni link.

<A href=”#” onClick = “sviraj()”> Sviraj </A>
<A href=”#” onClick = “zaustavi()”> Stop </A>

Kao što smo rekli, poziva se jedna od funkcija za pokretanje i zaustavljanje muzike:

<SCRIPT Language=”JavaScript”>
<!–
if (document.layers)
{n=1; ie=0}
if (document.all)
{n=0; ie=1}
function sviraj () {
if (n) document.muz_podloga.play ()
if (ie) document.muz_podloga.run ()
}
function zaustavi () {
document.muz_podloga.stop ()
//–>
</SCRIPT>

U primeru, pored iniciranja multimedije, možete videti i jedan od načina određivanja browser-a. Određivanje vršimo na osnovu različitih objektnih modela ova dva browser-a. Dalje u programskom kodu možemo videti kako se vrši pozivanje različitih metoda (za inicijaciju), u odnosu na to u kom browser-u je otvorena data web stranica (play i run). Metoda “stop( )” je ista za oba objektna modela. end Kontrola multimedije

Priredio Redakcija · Pripada kategorijama JavaScript, Razvoj 

Sledeća stranica »

Stranica 1 od 3123