|
|
|
Window objekt
Opozorilno okence
Prikaz opozorilnega okenca:
<script type="text/javascript">
alert("Pozdravljen svet!")
</script>
Potrditveno okence
Prikaz potrditvena okenca:
<script type="text/javascript">
var ime = confirm("Pritisnite gumb")
if (ime == true)
{
document.write("Pritisnili ste OK")
}
else
{
document.write("Pritisnili ste Cancel")
}
</script>
Vnosno okence
Prikaz vnosnega okenca:
<script type="text/javascript">
var ime = prompt("Prosim vpisite svoje ime","")
if (ime != null && ime != "")
{
document.write("Dobrodosel " + ime)
}
</script>
Odpiranje novega okna s pritiskom na gumb/povezavo
Kako prikazati novo okno, ko pritisnete na gumb ali tekstovno povezavo (link):
Ta del kode gre v glavo (head) strani:
<script language=javascript>
function odpriokno()
{
window.open("http://www.smrkec.com")
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type=button value="Odpri okno" onclick="odpriokno()">
</form>
<br />
<a href="javascript:odpriokno()">Odpri okno</a>
Odpiranje novega okna in kontroliranje izgleda le-tega
Kako prikazati novo okno, ko pritisnete na gumb ali tekstovno povezavo (link) in poleg tega se nastaviti izgled le-tega:
Ta del kode gre v glavo (head) strani:
<script type="text/javascript">
function odpriokno()
{
window.open("http://www.google.com","moje_novo_okno","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type="button" value="Odpri okno" onclick="odpriokno()">
</form>
<br />
<a href="javascript:odpriokno()">Odpri okno</a>
Nekaj pojasnil:
Prvi parameter je povezava do strani, ki se bo odprla, drugi parameter je ime okna (to ni naslov okna, ampak ime na katerega se lahko sklicujete, ko odprete kaksno drugo okno), tretji parameter pa je skupek lastnosti, no pa si oglejmo nekaj najbolj vaznih:
toolbar - vrstica kjer so gumbi nazaj (back), naprej (forward), stop, osvezi (refresh)...
location - to je vrstica kamor vpisete naslov strani, na katero zelite (address bar)
status - statusna vrstica okna (cisto spodaj)
menubar - to je vrstica na vrhu kjer so gumbi File (datoteka), Edit, View (pogled)...
scrollbars - lastnost ali bodo oknu omogoceni drsniki (scrollbars)
resizable - lastnost ali bo oknu dovoljeno spreminjati velikost
width - sirina okna
height - visina okna
Ce je lastnost ozacena z "yes", pomeni da je omogocena, ce pa z "no", pa je onemogocena (pri visini in sirini morate mere vpisati s stevilko).
Vec oken naenkrat
Kako odpreti vec oken naenkrat z enim klikom:
Ta del kode gre v glavo (head) strani:
<script language=javascript>
function odpriokna()
{
window.open("http://www.google.com/")
window.open("http://www.microsoft.com/")
window.open("http://www.mozilla.org/")
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type="button" value="Odpri okna" onclick="odpriokna()">
</form>
<br />
<a href="javascript:odpriokna()">Odpri okna</a>
Lokacija
Kako preusmeriti uporabnika na drugo lokacijo (URL/spletno stran):
Ta del kode gre v glavo (head) strani:
<script type="text/javascript">
function lokacija()
{
location="http://www.smrkec.com/"
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type="button" onclick="lokacija()" value="Nova lokacija">
</form>
<br />
<a href="javascript:lokacija()">Nova lokacija</a>
V primeru, da bi zeleli da obiskovalca preusmeri avtomatsko na novo bi vstavili le ta del kode:
<script type="text/javascript">
location="http://www.smrkec.com/"
</script>
Osvezitev (refresh)
Kako osveziti (refreshat) spletno stran:
Ta del kode gre v glavo (head) strani:
<script type="text/javascript">
function osvezitev()
{
location.reload()
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type="button" value="Osvezitev" onclick="osvezitev()">
</form>
<br />
<a href="javascript:osvezitev()">Osvezitev</a>
Statusna vrstica
Kako spremeniti text v statusni vrstici:
Ta del kode gre v glavo (head) strani:
<script type="text/javascript">
function statusnapis()
{
window.status = "Dobrodosli na nasi strani"
}
</script>
Vstavite v <body> tag vrstico onload="statusnapis()":
<body onload="statusnapis()">
Lahko naredimo, da se spremeni napis ob kliku na gumb/povezavo:
<form>
<input type="button" value="Status" onclick="statusnapis()">
</form>
<br />
<a href="javascript:statusnapis()">Status</a>
Tiskanje strani
Kako natisniti stran:
Ta del kode gre v glavo (head) strani:
<script type="text/javascript">
function natisni()
{
window.print()
}
</script>
Ta del kode gre v telo (body) strani:
<form>
<input type="button" value="Natisni" onclick="natisni()">
</form>
<br />
<a href="javascript:natisni()">Natisni</a>
Popolnoma enak rezultat bi dosegli tudi brez da bi vpisali karkoli v <head> del strani (torej, da bi izpustili celoten del kode, ki je v glavi strani):
<form>
<input type="button" value="Natisni" onclick="window.print()">
</form>
<br />
<a href="javascript:window.print()">Natisni</a>
To lahko naredimo v katerikoli kodi, ki smo jo v tem znalcu spisali, a pri vecjih funkcijah se s tem izgubi preglednost in je koda tezje berljiva.
V tem znalcu smo se naucili veliko o window objektu, onclick in onload dogodek, kako se naredi pop-up okno, kako se preusmeri obiskovalca na drugo stran, kako se natisne stran, kako se izdela opozorilo... in se mnogo vec.
No pa si oglejmo se vse te skripte skupaj v akciji (kliknite desno tipko na strani in View Source [prikazi izvorno kodo], da si boste lahko ogledali kako je vse skupaj narejeno; upam da se boste iz primera naucili se kaj novega):
KLIKNITE TUKAJ ZA PRIMERE
|
|
|
|
