Programim ne javascript
Download
1 / 31

Programim ne Javascript - PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on

Programim ne Javascript. Programim ne Web Leksion 13. 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 >

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Programim ne Javascript' - dimaia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Programim ne javascript

Programim ne Javascript

Programim ne Web

Leksion 13

Iralda Mitro


Shembull 1
Shembull-1

<html>

<head>

Shembullme Javascript

</head>

<body>

<br>

KyështënjëdokumentHtml

<br>

<script language="Javascript">

document.write("KetuështëJavascript!")

// kodJavascript

</script>

<br>

Vazhdimii HTML

</body>

</html>

Iralda Mitro


Shembull 11
Shembull-1

  • Kyështërezultati:

    KyështënjëdokumentHtmlKetuështëJavascript!Vazhdimii HTML

Iralda Mitro


Funksionet
Funksionet

  • Funksionetzakonishtdeklarohenndërmjetetiketave <HEAD> tëfaqes HTML dhemë pas thirrenngangjarjetëndryshme.

  • Atongarkohenmëpërpara se njëpërdoruestëbëjëdiçkaqëmundtëthërrasënjëfunksion.

Iralda Mitro


Shembulli 2
Shembulli-2

<html>

<head>

<script language="Javascript">

function shtyp() {

alert("MIRESEVINI!");

}

</script>

</head>

<body>

<form>

<input type="button" name="Button1" value=“Klikoketu" onclick="shtyp()">

</form>

</body>

</html>

Iralda Mitro


Shembulli 21
Shembulli-2

  • Kyskript do tëkrijojënjëbutondhekurjutashtypniatënjëdritare do tëhapet duke thënë: "MIRESEVINI!".

  • Nëfillimfunksioniload-ohetdhembahetnëmemorje.

  • Pastajnjëbutonkrijohet me etiketën<input> (HTML).

  • Nëetiketën <input> kemi 'onclick‘ qeithotëbrowseritcilinfunksionduhettëthërrasëkurkybutontështypet

  • Funksioni'shtyp()' ështëdeklaruarnëfillimtë HTML-sëteketiketa <head>.

  • Kurbutonishtypetkyfunksionekzekutohet.

  • Metoda 'alert()‘ ështëdeklaruarnë JavaScript, kështujuduhetvëtëmtathërrisniatë.

Iralda Mitro


Shembull 3 leximi nga nje forme
Shembull-3: Leximinganjeforme

<html>

<head>

<script language="Javascript">

function emrin(str) {

alert("MIRESEVINI zoti"+str+"!");

}

</script>

</head>

<body>

Julutemijepniemrin:

<form>

<input type="text" name="Emri" onBlur="emrin(this.value)" value="">

</form>

</body>

</html>

Iralda Mitro


Shembull 3
Shembull-3

  • Nëkëtëdokument HTML jukeninjë element formekumundtëshkruaniemrintuaj.

  • 'onBlur' teketiketa <input> itregonklientit se cilinfunksionduhettëthërrasëkurdiçkaështëfuturnë form.

  • Funksioni 'emrin(str)' do tëthërritetkurjutë 'lini' këtëformëosekenishtypur enter pasikenifuturdiçka. Funksioni do tëmarrëstringun e futurnëpërmjetkomandës 'emrin(this.value)'. 'This.value' nënkuptonvlerën e futurnëkëtë element forme.

Iralda Mitro


Shembull 4 funksioni date
Shembull-4: Funksioni Date

  • Ne keteshembullklientitiprintohetndryshimiifunditidokumentit. Junukduhettëshkruanidatënnëdokument , juvetëmshkruaninjë program tëvogël, njëskript.

  • Kurjutëbënindryshimenëtëardhmen, data ndryshonautomatikisht.

    <html>

    <head>

    </head>

    <body>

    Kjoështënjëfaqe e zakonshme HTML.

    <br>

    Ndryshimiifundit:

    <script language="Javascript">

    document.write(document.lastModified)

    </script>

    </body>

    </html>

Iralda Mitro


Shembull 5
Shembull-5

<html>

<head>

<script language="Javascript">

function Hello(str) {

alert("MIRESEVINI !");

}

</script>

</head>

<body>

<a href ="" onMouseOver="hello()">link</a>

</body>

</html>

// KetuperdoretmetodaonMouseOverdhefunksionihello()

// thërritetkurngjarjandodh.

Iralda Mitro


Shembull 51
Shembull-5

  • NjerasttjeteriperdorimitteonMouseOver:

    <a href="faqe.htm" onMouseOver= "window.status='Një link qënuktëçonaskund'; return true">

  • 'Window.status' julejontëshkruaninëstatusbartë web-brouserit.

  • Siç e shihnijuduhettëalternonithonjëzatteke me çiftetnëmënyrëqë JavaScript tëdallojë se kushështëstringuqëduhettëshfaqetnëstatusbar.

  • Pas stringutjuduhettëshkruani; return true. Ka dhenjë property tjerërqëlidhët me mouse-in si: onMouseout.

Iralda Mitro


Funksione date te tjer
Funksione date te tjerë

  • Tanido tëprintojmëkohënlokalenëdokumentintonë.

  • Kjometodëpërdorkohëndhedatën e sistemittëmakinëstuaj, kështun.q.sjuvendosindatën e makinës 5/17/1983 ju do tëmerrnidatëtëgabuarngakjometodë.

  • Kohataniështe: 10:51Data është: 30/12/2011

    <script language="Javascript">

    sot=new Date()

    document.write("Kohataniështë:",sot.getHours(),":", sot.getMinutes())

    document.write("Data është:", sot.getMonth()+1,"/",sot.getDate(),"/",sot.getYear());

    </script>

Iralda Mitro


Funksione date te tjer1
Funksione date te tjerë

  • Nëfillim ne krijojmënjëvariabëlpërtëmbajturdatën. Kjobëhet me anëtë'sot=new Date()'.

  • N.q.s ne nukspecifikojmënjëdatëdheorëtëcaktuarbrowseripërdororënlokaledhe e vendosatënëvariablinsot.

  • Ne krijuamnjëobjektkoheicilipërmbanorënlokaledhedatën. Tanimundtishfaqimatonëdokument.

  • Juduhettëshkruani 'sot' paracdo 'get-metode' sepsepërndryshebrowserinuk do takuptojë se cilitobjekttireferohet.

  • MetodagetMonth()kthennjënumër midis 0 dhe 11 (0 nënkuptonJanarindhe 11 përDhjetorin), kështuqë ne duhettishtojmë 1 numrittëkthyerngametodanëmënyrëqëtëmarrimmuajin e saktë.

Iralda Mitro


Funksione date te tjer2
Funksione date te tjerë

  • Jumundtëkrijoninjëdatë, përshembulldatënkurjukrijuatdokumentin. Pastajjumundtëllogarisnisaditëmëvonëdikushpolexondokumentintuaj, dhen.q.sështëmëivjetër se 10 ditëjumundtithoni: Kjoështëshumë e vjetërmos e lexo!

  • Përkëtëjuduhet data e krijimittëdokumentitdhe data e sotme.

  • Jumundtëinicializoninjëdatëkurkrijoninjëobjekt date. Kjo do dukejkështu: fillDoc= new Date(98,6,9). Juduhettëspecifikonivitintëparin, pastajmuajindhepastajditën .

  • Jugjithashtumundtëspecifikonidheorëngjithashtu : fillDoc=new Date(98,6,9,10,50,0). Numrat e parëjanëpërsëri data dhepastajvijnëora, minutatdhesekondat.

  • Javascriptnuk ka një tip tëvërtetë date, porsiç e shihnijumundtëpunoni me të. Kjopunonsepsedatatparaqitennganumriimilisekondaveqënë 1/1/1970 0:0h.

Iralda Mitro


Numrat random
Numrat Random

  • Një problem izakonshëmështësitëpërdorninumrat random nëprogramimdhenëgjuhët e skriptimit.

  • Jumundtëmerrnikohëndhedatëntëmakinëstuajdhetamanipuloni.

  • Jumundtëmerrnikohëndhetëkryeniveprime me të.

    • Përshembulljumundtëllogarisnisinusin e njënumridhetëmerrnivlerën absolute tëtij, që do jujapënjënumër midis 0 dhe 1.

    • Meqëkohandryshonçdomilisekondajunuk do rrezikonitëmerrnitënjëjtinnumërdyherë.

    • Nëqoftë se judonitëllogarisnishumënumra random nënjëkohësamëtëshkurtërjunukduhettëpërdornivetëmsinusinsin(), sepse do merrninumraqëndjekinnjëkurbësinusidhekjonukështë random.

    • Pornëqoftë se donitëllogarisninjënumër random dhe le tëtheminë 20 seconda, kyfunksionështëaiiduhuripërtabërëkëtë.

Iralda Mitro


Shembull 6
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ërrandom:'+random()">link</a>

</body>

</html>

Iralda Mitro


Nd rtimi i dritareve
NdërtimiiDritareve

  • Ndërtimiidritareveështënjëngapjesëtmëtëbukuratë JavaScript.

  • Jumundtëndërtonidritaretërejadhetëload-oninë to dokumente HTML-je.

Iralda Mitro


Shembull 7
Shembull-7

Hapja e njëdritarejedheshkrimiidiçkajenë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


Nd rtimi i dritareve1
Ndërtimi i Dritareve

  • FunksioniWinOpen() krijonnjëdritaretë re duke thërriturmetodën open().

  • Parametrii pare përmban URL-nëe faqes. Këtujumundtëfusniadresën e dokumentit HTML qëdonitëloadoni. Nëqoftë se e lini bosh asnjëfaqenukngarkohetdhejumundtëshkruaninëtë me JavaScript.

  • Parametriidytespecifikonemrine dritares. Këtujumundtëshkruaniçdogjë, kjonuk ka efektnëshembullintonë.

  • Parametrat e tjerespecifikojnëveçoritë e dritares.

    • Jumundtëtregoni , n.q.sdoni, një toolbar, skrollbar...Nëqoftë se jushkruani toolbar=yes atëherëju do merrninjë toolbar nëdritare.

Iralda Mitro


Nd rtimi i dritareve2
Ndërtimi i Dritareve

  • Këtujanëdisaveçoritëcilatjumundtindryshoni.

  • toolbarlocationdirectoriesstatusmenubarscrollbarsresizablecopyhistorywidth=pixelsheight=pixels

  • Pasitakenihapurdritarendhetakeniquajturnew_win (qëndronpërparametodës open()), jutanimundtëshkruaninëdritare.

  • Jukëtumundtëshkruanikod normal HTML.

  • Jumundtëndërtoninjëdokument HTML duke përdorurinputin e dhënënganjëpërdoruesnëpërmjetformës.

  • Jumundtëbëninjëfaqekunjëpërdoruesduhettëshkruajemrin e tijnënjëformëdhepastajtëkrijoninjëdokumentteri HTML qëpërmbanemrin e tij.

Iralda Mitro


Shembull 8 puna me statusbarin
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


Shembull 8 puna me statusbarin1
Shembull-8: Puna me Statusbarin

  • Krijojmëdybutonatëcilëtthërrasinqëtëdyfunksioninstatbar(txt).

  • Kurjushihnietiketën<form> kubutonat u krijuan, juvëreni se funksionistatbar(txt)thërritet, por ne nukshkruajmë txt tekstatusbar?!

  • Jumundtakuptonikëtëkështu: funksionistabar(txt) thërritetdhepërcaktonvariablin txt, icilimerrpërvlerë, vlerënqëjuikaluatnëpërmjetthirrjessëfunksionit. KështukurtështypnibutoninShkruaj, funksionistabar(txt) thërritetdhe txt merrvlerën 'Hejç'kemi?'.

  • Jumundtapërdornivariablin txt sitëzakonshëm. Kjometodë e kalimittëvariablave e bënfunksioninshumëfleksibël. Dhebutoniidytëkryenpotënjëjtëngjëpor txt merrvlerën: txt= ''.

Iralda Mitro


Shembull 8 puna me statusbarin2
Shembull-8: Puna me Statusbarin

  • Taniçfarëbënfunksionistatbar(txt)? Ai ijepvlerën e txt variablitwindow.status. Kjokryhetnëpërmjetwindow.status=txt;. Shkrimiinjëstringu bosh ('') e fshinpërmbajtjen e statusbar-it.

    • Vëreniqëkemipërdorurthonjëzatekesepse ne përdorimthonjëzatçiftepërpërcaktimin e onClick.

  • Jue dinitashmë property-nëonMouseOver :<a href=“faqe.htm” onMouseOver=“window.status=‘kyeshtenje link’; return true;”>

  • Statusbarinuk e fshintekstinkurjuhiqni mouse-in ngalinku. Ne shkruajmënjëfunksionicilifshinstatusbarin.

Iralda Mitro


Shembull 9
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('Hejtungjatjeta'); return true;">link</a></body> </html>

Iralda Mitro


Shembull 91
Shembull-9

  • Nëfaqen HTML ne kemikrijuarnjë link me property-në e njohuronMouseOver.

  • Funksionilëvizsipër() thërritet duke ikaluarstringun "Hejtungjatjeta" iciliikalohetsi argument nëpërmjetvariablit txt. Variabliwindow.statusmerrpërvlerëvlerën e txt. Kjoështë e njëjtagjësinëfunksioninstabar(txt).

  • FunksionisetTimeout(...) vendosnjëkohë. FunksionisetTimeout(...) përcaktonsakohëmatësiikohës do ekzekutohetdheçfarë do tëndodhmbasikoha do tëmbarojë.

  • Nëshembullintonëfunksionifshih() thërritet pas 1000 milisekonda. Funksionilëvizsipër(txt) mbaronpasimatësiikohësfillonngapuna. Browserithërretfunksioninfshih() pas çdo 1 sekonde.

  • Pasikoha ka mbaruarmatësinukrinispërsëri, porjumundtathërrisnipërsërinëfunksioninfshih().

Iralda Mitro


Shembull 10
Shembull-10

  • Tani do tëshohimnjë script icilijulejontënavigonipërmesdokumentash. Ajopërtëcilën do flasimjanëfunksionet back() dhe forward(). Jumundtasimulonikëtëbuton duke përdorur JavaScript. Scriptipërkëtëpunëjepetmë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>

  • Jugjithashtumundtëshkruani 'history.go(-1)' dhe 'history.go(1)'.

Iralda Mitro


Futja e t dh nave n p rmjet formave
Futja e të Dhënave Nëpërmjet Formave

  • Futja e tëdhënavenëpërmjet<form> ështëshumë e rëndësishmepërdisafaqewebi. Tëdhënattëmarranëpërmjet <form> dërgohennë server.

  • Javascriptka aftësinëtëvlerësojëtëdhënatqëfutennga <form> para se tidërgojënë server.

  • Sëpari do jutregojmë se simundtëvlerësohenformat. Pastaj do shohimmundësitëpërdërgimin e informacionitmbrapa me Javascriptose HTML.

  • Krijojmënjëscript tëthjeshtë. Faqja HTML duhettëpërmbajëdyelementeteksti. Përdoruesiduhettëfutëemrin e tijdheadresën e e-mail-it. Jumundtëfutniçfarëtëdoninëelementët e formësdhepastajtështypnibutonin. Gjithashtumosfutnigjëdheshtypnibutonin.

Iralda Mitro


Futja e t dh nave n p rmjet formave1
Futja e të Dhënave Nëpërmjet Formave

  • Përsaipërketelementittëparën.q.snukfutnigjë do tëmerrninjëmesazhgabimi. Çdogjëqëju do shkruanikonsiderohetsi e vlefshme. Sigurishtjumundtëfutnidhenumra, kështun.q.sfutni 17 ju do tëmerni ' Hej 17!'.

  • Forma e dytëështëpakmë e sofistikuar. Përpiqunitëfutninjë string tëthjeshtëoseemrintuaj. Ju do shihniqënuk do eciderisatëfutninjë '@'. Kriteripërpranimin e stringutsitëvlefshëmështë @. Kjosepseçdoadresë e-mail ka një '@' kështuqëmjaftontëkontrolloshpër '@'.

Iralda Mitro


Shembull 101
Shembull-10

<html>

<head>

<script language="Javascript">

function test1(form){

if (form.text1.value=="")

alert(“Futninjë string!")

else

alert("Hej"+form.text1.value+"! OK!");

}

function test2(form){

if(form.text2.value==“”

||form.text2.value.indexOf('@',0)==-1)

alert("Adresanukë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


Shembull 102
Shembull-10

  • Sëpariihedhimnjësykodit HTML nëseksionin e <body>. Ne krijojmëdyelementëtekstidhedybutona. Butonatthërrasinfunksionet test1(...) ose test2(...) nëvarësi se cilibutonshtypet. Ne u kalojmëfunksioneve 'this.form' me qëllimqëtëjeminëgjendjetuadresohemielementëvetëduhurnëfunksionemëvonë.

  • Funksioni test1(form) testonnësestringuifuturështë bosh, kjobëhetnëpërmjet ' if (form.text1.value=="")..... . 'form' ështëvariabliicilimervlerën 'this.form' me thirrjen e funksionit. Ne mundtëmarrimtëdhënat duke përdorur 'value' nëkombinacion me 'form.text1'. Përtëparënësestringuështë bosh ne e krahasojmë me "" dhen.q.sështëibarabartëpërdoruesi do marrinjëmesazhgabimi, nëtëkundërt do marrimnjë 'OK!'.

  • Tani le tëshohimfunksionin e dytë test2(form). Kyfunksionpërsërikrahasonstringun e futur me stringun "" përtusiguruarqëdiçkaështëfutur. Gjithashtuiështështuardhenjëkrahasimtjetërbashkë me operatorin || OR. Instruksioni 'if ' kontrollonnësejanëtëvërtetëkrahasimiiparëoseidytë. N.q.snjëngakrahasimetështëivërtetëatëherëshprehjabrenda if-it bëhet e vërtetëdheekzekutohetinstruksionipasardhës. Kjonënkuptonqëju do tëmerrninjëmesazhgabimin.q.sstringuështë bosh osenuk ka një '@'. Krahasimiiidytënëinstruksionin 'if ' shikonnësestringuifuturpërmban '@'.

Iralda Mitro


Shembull 111
Shembull-11

  • Jumundtëpërcaktoni se cilin element do tëjetënëfokusqënëfillimosejumundtithonibrowseritqëtëfokusohetnë form kuinformacioniifuturnukështënërregull.

  • Kjonënkuptonqëbrowseri do tavendosëkursorinnëelementin e specifikuartëformës, kështupërdoruesinukduhettëklikojënë form para se tëfutëndonjëgjë. Jumundtabënikë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ëskriptittëtreguarmësipër. Juduhettëspecifikoniemrin e form dheemrin e elementittekstqënëkëtërastjanë first dhetext1. N.q.sdonitëvendosnifokusinnëkëtë element kurfaqjatëloadohetjumundtështoni ' onLoad ' teketiketa <body>.

    <body onLoad="setfocus()">

Iralda Mitro


ad