Programim ne Web
Download
Report
Transcript Programim ne Web
Programim ne Javascript
Programim ne Web
Leksion 13
Iralda Mitro
1
Shembull-1
<html>
<head>
Shembull me Javascript
</head>
<body>
<br>
Ky është një dokument Html
<br>
<script language="Javascript">
document.write("Ketu është Javascript!")
// kod Javascript
</script>
<br>
Vazhdimi i HTML
</body>
</html>
Iralda Mitro
2
Shembull-1
• Ky është rezultati:
Ky është një dokument Html
Ketu është Javascript!
Vazhdimi i HTML
Iralda Mitro
3
Funksionet
• Funksionet zakonisht deklarohen ndërmjet etiketave
<HEAD> të faqes HTML dhe më pas thirren nga
ngjarje të ndryshme.
• Ato ngarkohen më përpara se një përdorues të bëjë
diçka që mund të thërrasë një funksion.
Iralda Mitro
4
Shembulli-2
<html>
<head>
<script language="Javascript">
function shtyp() {
alert("MIRESEVINI!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value=“Kliko ketu"
onclick="shtyp()">
</form>
</body>
</html>
Iralda Mitro
5
Shembulli-2
• Ky skript do të krijojë një buton dhe kur ju ta shtypni atë një
dritare do të hapet duke thënë: "MIRESEVINI!".
• Në fillim funksioni load-ohet dhe mbahet në memorje.
• Pastaj një buton krijohet me etiketën <input> (HTML).
• Në etiketën <input> kemi 'onclick‘ qe i thotë browserit cilin
funksion duhet të thërrasë kur ky buton të shtypet
• Funksioni 'shtyp()' është deklaruar në fillim të HTML-së tek
etiketa <head>.
• Kur butoni shtypet ky funksion ekzekutohet.
• Metoda 'alert()‘ është deklaruar në JavaScript, kështu ju duhet
vëtëm ta thërrisni atë.
Iralda Mitro
6
Shembull-3: Leximi nga nje forme
<html>
<head>
<script language="Javascript">
function emrin(str) {
alert("MIRESEVINI zoti"+str+"!");
}
</script>
</head>
<body>
Ju lutemi jepni emrin:
<form>
<input type="text" name="Emri" onBlur="emrin(this.value)"
value="">
</form>
</body>
</html>
Iralda Mitro
7
Shembull-3
• Në këtë dokument HTML ju keni një element forme ku mund të
shkruani emrin tuaj.
• 'onBlur' tek etiketa <input> i tregon klientit se cilin funksion
duhet të thërrasë kur diçka është futur në form.
• Funksioni 'emrin(str)' do të thërritet kur ju të 'lini' këtë formë ose
keni shtypur enter pasi keni futur diçka. Funksioni do të marrë
stringun e futur nëpërmjet komandës 'emrin(this.value)'.
'This.value' nënkupton vlerën e futur në këtë element forme.
Iralda Mitro
8
Shembull-4: Funksioni Date
• Ne kete shembull klientit i printohet ndryshimi i fundit i dokumentit. Ju nuk
duhet të shkruani datën në dokument , ju vetëm shkruani një program të
vogël, një skript.
• Kur ju të bëni ndryshime në të ardhmen, data ndryshon automatikisht.
<html>
<head>
</head>
<body>
Kjo është një faqe e zakonshme HTML.
<br>
Ndryshimi i fundit:
<script language="Javascript">
document.write(document.lastModified)
</script>
</body>
</html>
Iralda Mitro
9
Shembull-5
<html>
<head>
<script language="Javascript">
function Hello(str) {
alert("MIRESEVINI !");
}
</script>
</head>
<body>
<a href ="" onMouseOver="hello()">link</a>
</body>
</html>
// Ketu perdoret metoda onMouseOver dhe funksioni hello()
// thërritet kur ngjarja ndodh.
Iralda Mitro
10
Shembull-5
• Nje rast tjeter i perdorimit te onMouseOver:
<a href="faqe.htm" onMouseOver=
"window.status='Një link që nuk të çon
askund'; return true">
• 'Window.status' ju lejon të shkruani në statusbar të webbrouserit.
• Siç e shihni ju duhet të alternoni thonjëzat teke me çiftet në
mënyrë që JavaScript të dallojë se kush është stringu që duhet
të shfaqet në statusbar.
• Pas stringut ju duhet të shkruani; return true. Ka dhe një
property tjerër që lidhët me mouse-in si: onMouseout.
Iralda Mitro
11
Funksione date te tjerë
•
•
•
Tani do të printojmë kohën lokale në dokumentin tonë.
Kjo metodë përdor kohën dhe datën e sistemit të makinës tuaj, kështu n.q.s ju
vendosin datën e makinës 5/17/1983 ju do të merrni datë të gabuar nga kjo
metodë.
Koha tani ështe: 10:51
Data është: 30/12/2011
<script language="Javascript">
sot=new Date()
document.write("Koha tani është:",sot.getHours(),":",
sot.getMinutes())
document.write("Data është:",
sot.getMonth()+1,"/",sot.getDate(),"/",sot.getYear(
));
</script>
Iralda Mitro
12
Funksione date te tjerë
• Në fillim ne krijojmë një variabël për të mbajtur datën. Kjo
bëhet me anë të 'sot=new Date()'.
• N.q.s ne nuk specifikojmë një datë dhe orë të caktuar
browseri përdor orën lokale dhe e vendos atë në variablin sot.
• Ne krijuam një objekt kohe i cili përmban orën lokale dhe
datën. Tani mund ti shfaqim ato në dokument.
• Ju duhet të shkruani 'sot' para cdo 'get-metode' sepse për
ndryshe browseri nuk do ta kuptojë se cilit objekt ti referohet.
• Metoda getMonth() kthen një numër midis 0 dhe 11 (0
nënkupton Janarin dhe 11 për Dhjetorin), kështu që ne duhet
ti shtojmë 1 numrit të kthyer nga metoda në mënyrë që të
marrim muajin e saktë.
Iralda Mitro
13
Funksione date te tjerë
• Ju mund të krijoni një datë, për shembull datën kur ju krijuat dokumentin.
Pastaj ju mund të llogarisni sa ditë më vonë dikush po lexon dokumentin
tuaj, dhe n.q.s është më i vjetër se 10 ditë ju mund ti thoni: Kjo është
shumë e vjetër mos e lexo!
• Për këtë ju duhet data e krijimit të dokumentit dhe data e sotme.
• Ju mund të inicializoni një datë kur krijoni një objekt date. Kjo do dukej
kështu: fillDoc= new Date(98,6,9). Ju duhet të specifikoni vitin të parin,
pastaj muajin dhe pastaj ditën .
• Ju gjithashtu mund të specifikoni dhe orën gjithashtu : fillDoc=new
Date(98,6,9,10,50,0). Numrat e parë janë përsëri data dhe pastaj vijnë ora,
minutat dhe sekondat.
• Javascript nuk ka një tip të vërtetë date, por siç e shihni ju mund të punoni
me të. Kjo punon sepse datat paraqiten nga numri i milisekondave që në
1/1/1970 0:0h.
Iralda Mitro
14
Numrat Random
• Një problem i zakonshëm është si të përdorni numrat random
në programim dhe në gjuhët e skriptimit.
• Ju mund të merrni kohën dhe datën të makinës tuaj dhe ta
manipuloni.
• Ju mund të merrni kohën dhe të kryeni veprime me të.
– Për shembull ju mund të llogarisni sinusin e një numri dhe të merrni vlerën
absolute të tij, që do ju japë një numër midis 0 dhe 1.
– Meqë koha ndryshon çdo milisekonda ju nuk do rrezikoni të merrni të njëjtin
numër dy herë.
– Në qoftë se ju doni të llogarisni shumë numra random në një kohë sa më të
shkurtër ju nuk duhet të përdorni vetëm sinusin sin(), sepse do merrni numra që
ndjekin një kurbë sinusi dhe kjo nuk është random.
– Por në qoftë se doni të llogarisni një numër random dhe le të themi në 20
seconda, ky funksion është ai i duhuri për ta bërë këtë.
Iralda Mitro
15
Shembull-6
<html>
<head>
<script language="Javascript">
function random() {
sot=new Date();
num=sot.getTime();
num=Math.round(Math.abs(Math.sin(num)*10000))
return num;
}
</script>
</head>
<body>
<a href ="" onMouseOver="alert('Ky është një numër
random:'+random()">link</a>
</body>
</html>
Iralda Mitro
16
Ndërtimi i Dritareve
• Ndërtimi i dritareve është një nga pjesët më të
bukura të JavaScript.
• Ju mund të ndërtoni dritare të reja dhe të
load-oni në to dokumente HTML-je.
Iralda Mitro
17
Shembull-7
Hapja e një dritareje dhe shkrimi i diçkaje në të.
<html>
<head>
<script language="Javascript">
function WinOpen() {
new_win=window.open("prova.htm","NewWin","width=300,height=400");
new_win.document.clear();
new_win.document.write("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" name="but" value=“Click me"
onClick="WinOpen();">
</form>
</body>
</html>
Iralda Mitro
18
Ndërtimi i Dritareve
• Funksioni WinOpen() krijon një dritare të re duke thërritur
metodën open().
• Parametri i pare përmban URL-në e faqes. Këtu ju mund të fusni
adresën e dokumentit HTML që doni të loadoni. Në qoftë se e
lini bosh asnjë faqe nuk ngarkohet dhe ju mund të shkruani në
të me JavaScript.
• Parametri i dyte specifikon emrin e dritares. Këtu ju mund të
shkruani çdo gjë, kjo nuk ka efekt në shembullin tonë.
• Parametrat e tjere specifikojnë veçoritë e dritares.
– Ju mund të tregoni , n.q.s doni, një toolbar, skrollbar...Në qoftë se ju shkruani
toolbar=yes atëherë ju do merrni një toolbar në dritare.
Iralda Mitro
19
Ndërtimi i Dritareve
• Këtu janë disa veçori të cilat ju mund ti ndryshoni.
• toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
• Pasi ta keni hapur dritaren dhe ta keni quajtur new_win (qëndron përpara
metodës open()), ju tani mund të shkruani në dritare.
• Ju këtu mund të shkruani kod normal HTML.
• Ju mund të ndërtoni një dokument HTML duke përdorur inputin e dhënë
nga një përdorues nëpërmjet formës.
• Ju mund të bëni një faqe ku një përdorues duhet të shkruaj emrin e tij në
një formë dhe pastaj të krijoni një dokument te ri HTML që përmban
emrin e tij.
Iralda Mitro
20
Shembull-8: Puna me Statusbarin
<html>
<head>
<script language="javascript">
function stabar(txt) {
window.status=txt;
}
</script>
</head>
<body>
<form>
<input type="button" name="but1" value="Shkruaj"
onClick="stabar('Hej ç'kemi?');">
<input type="button" name="but2" value="Fshi"
onClick="window.status=''; ">
</form>
</body>
</html>
Iralda Mitro
21
Shembull-8: Puna me Statusbarin
• Krijojmë dy butona të cilët thërrasin që të dy funksionin
statbar(txt).
• Kur ju shihni etiketën <form> ku butonat u krijuan, ju vëreni se
funksioni statbar(txt) thërritet, por ne nuk shkruajmë txt
tek statusbar?!
• Ju mund ta kuptoni këtë kështu: funksioni stabar(txt) thërritet
dhe përcakton variablin txt, i cili merr për vlerë, vlerën që ju i
kaluat nëpërmjet thirrjes së funksionit. Kështu kur të shtypni
butonin Shkruaj, funksioni stabar(txt) thërritet dhe txt merr
vlerën 'Hej ç'kemi?'.
• Ju mund ta përdorni variablin txt si të zakonshëm. Kjo metodë e
kalimit të variablave e bën funksionin shumë fleksibël. Dhe
butoni i dytë kryen po të njëjtën gjë por txt merr vlerën: txt= ''.
Iralda Mitro
22
Shembull-8: Puna me Statusbarin
• Tani çfarë bën funksioni statbar(txt)? Ai i jep vlerën e txt
variablit window.status. Kjo kryhet nëpërmjet
window.status=txt;. Shkrimi i një stringu bosh ('') e fshin
përmbajtjen e statusbar-it.
– Vëreni që kemi përdorur thonjëza teke sepse ne përdorim
thonjëzat çifte për përcaktimin e onClick.
• Ju e dini tashmë property-në onMouseOver :
<a href =“faqe.htm” onMouseOver=“window.status=‘ky eshte
nje link’; return true;”>
• Statusbari nuk e fshin tekstin kur ju hiqni mouse-in nga linku.
Ne shkruajmë një funksion i cili fshin statusbarin.
Iralda Mitro
23
Shembull-9
<html>
<head>
<script language="javascript">
function levizsipër (txt) {
window.status=txt;
setTimeout("fshih()",1000);
}
</script>
</head>
<body>
<a href="moskliko.htm"
onMouseOver="levizsipër('Hej tungjatjeta'); return
true;">link</a>
</body>
</html>
Iralda Mitro
24
Shembull-9
• Në faqen HTML ne kemi krijuar një link me property-në e njohur
onMouseOver.
• Funksioni lëvizsipër() thërritet duke i kaluar stringun "Hej tungjatjeta" i cili
i kalohet si argument nëpërmjet variablit txt. Variabli window.status
merr për vlerë vlerën e txt. Kjo është e njëjta gjë si në funksionin
stabar(txt).
• Funksioni setTimeout(...) vendos një kohë. Funksioni setTimeout(...)
përcakton sa kohë matësi i kohës do ekzekutohet dhe çfarë do të ndodh
mbasi koha do të mbarojë.
• Në shembullin tonë funksioni fshih() thërritet pas 1000 milisekonda.
Funksioni lëvizsipër(txt) mbaron pasi matësi i kohës fillon nga puna.
Browseri thërret funksionin fshih() pas çdo 1 sekonde.
• Pasi koha ka mbaruar matësi nuk rinis përsëri, por ju mund ta thërrisni
përsëri në funksionin fshih().
Iralda Mitro
25
Shembull-10
•
Tani do të shohim një script i cili ju lejon të navigoni përmes dokumentash. Ajo për
të cilën do flasim janë funksionet back() dhe forward(). Ju mund ta simuloni këtë
buton duke përdorur JavaScript. Scripti për këtë punë jepet mëposhtë:
<html>
<head>
<form name="butonbar">
<input type="button" value="Back“
onClick="history.back()">
<input type="button" value="Home"
onClick="location='script.htm'">
<input type="button" value="Next"
onClick="history.forward()">
</form>
</body>
</html>
•
Ju gjithashtu mund të shkruani 'history.go(-1)' dhe 'history.go(1)'.
Iralda Mitro
26
Futja e të Dhënave Nëpërmjet Formave
• Futja e të dhënave nëpërmjet <form> është shumë e
rëndësishme për disa faqe webi. Të dhënat të marra
nëpërmjet <form> dërgohen në server.
• Javascript ka aftësinë të vlerësojë të dhënat që futen nga
<form> para se ti dërgojë në server.
• Së pari do ju tregojmë se si mund të vlerësohen format. Pastaj
do shohim mundësitë për dërgimin e informacionit mbrapa
me Javascript ose HTML.
• Krijojmë një script të thjeshtë. Faqja HTML duhet të përmbajë
dy elemente teksti. Përdoruesi duhet të futë emrin e tij dhe
adresën e e-mail-it. Ju mund të futni çfarë të doni në
elementët e formës dhe pastaj të shtypni butonin. Gjithashtu
mos futni gjë dhe shtypni butonin.
Iralda Mitro
27
Futja e të Dhënave Nëpërmjet Formave
• Përsa i përket elementit të parë n.q.s nuk futni gjë do të
merrni një mesazh gabimi. Çdo gjë që ju do shkruani
konsiderohet si e vlefshme. Sigurisht ju mund të futni dhe
numra, kështu n.q.s futni 17 ju do të merni ' Hej 17!'.
• Forma e dytë është pak më e sofistikuar. Përpiquni të futni një
string të thjeshtë ose emrin tuaj. Ju do shihni që nuk do eci
derisa të futni një '@'. Kriteri për pranimin e stringut si të
vlefshëm është @. Kjo sepse çdo adresë e-mail ka një '@'
kështu që mjafton të kontrollosh për '@'.
Iralda Mitro
28
Shembull-10
<html>
<head>
<script language="Javascript">
function test1(form){
if (form.text1.value=="")
alert(“Futni një string!")
else
alert("Hej"+form.text1.value+"!
OK!");
}
function test2(form){
if(form.text2.value==“”
||form.text2.value.indexOf('@',0)
==-1)
alert("Adresa nuk është e
vlefshme!");
else
alert ("OK!");
}
</script>
</head>
<body>
<form name="first">
<p>FUTNI EMRIN:<br>
<input type="text" size="20"
name="text1"> <input
type="button" name="button1"
value="test input"
onclick="test1(this.form)"> </p>
<p>FUTNI ADRESEN E E-MAIL:<br>
<input type="text" size="20"
name="text2"> <input
type="button" name="button2"
value="test input"
onclick="test2(this.form)"> </p>
</form>
</body>
</html>
Iralda Mitro
29
Shembull-10
•
•
•
Së pari i hedhim një sy kodit HTML në seksionin e <body>. Ne krijojmë dy elementë
teksti dhe dy butona. Butonat thërrasin funksionet test1(...) ose test2(...) në varësi se
cili buton shtypet. Ne u kalojmë funksioneve 'this.form' me qëllim që të jemi në
gjendje tu adresohemi elementëve të duhur në funksione më vonë.
Funksioni test1(form) teston nëse stringu i futur është bosh, kjo bëhet nëpërmjet ' if
(form.text1.value=="")..... . 'form' është variabli i cili mer vlerën 'this.form' me thirrjen
e funksionit. Ne mund të marrim të dhënat duke përdorur 'value' në kombinacion me
'form.text1'. Për të parë nëse stringu është bosh ne e krahasojmë me "" dhe n.q.s
është i barabartë përdoruesi do marri një mesazh gabimi, në të kundërt do marrim
një 'OK!'.
Tani le të shohim funksionin e dytë test2(form). Ky funksion përsëri krahason stringun
e futur me stringun "" për tu siguruar që diçka është futur. Gjithashtu i është shtuar
dhe një krahasim tjetër bashkë me operatorin || OR. Instruksioni 'if ' kontrollon nëse
janë të vërtetë krahasimi i parë ose i dytë. N.q.s një nga krahasimet është i vërtetë
atëherë shprehja brenda if-it bëhet e vërtetë dhe ekzekutohet instruksioni
pasardhës. Kjo nënkupton që ju do të merrni një mesazh gabimi n.q.s stringu është
bosh ose nuk ka një '@'. Krahasimi i i dytë në instruksionin 'if ' shikon nëse stringu i
futur përmban '@'.
Iralda Mitro
30
Shembull-11
• Ju mund të përcaktoni se cilin element do të jetë në fokus që në
fillim ose ju mund ti thoni browserit që të fokusohet në form ku
informacioni i futur nuk është në rregull.
• Kjo nënkupton që browseri do ta vendosë kursorin në elementin e
specifikuar të formës, kështu përdoruesi nuk duhet të klikojë në
form para se të futë ndonjë gjë. Ju mund ta bëni këtë me scriptin e
mëposhtëm:
function setfocus() {
document.first.text1.focus();
return;
}
• Ky script do të vendosë në focus elementin e parë text të form së
skriptit të treguar më sipër. Ju duhet të specifikoni emrin e form
dhe emrin e elementit tekst që në këtë rast janë first dhe text1.
N.q.s doni të vendosni fokusin në këtë element kur faqja të
loadohet ju mund të shtoni ' onLoad ' tek etiketa <body>.
<body onLoad="setfocus()">
Iralda Mitro
31