Permbledhje Gjuhesh Programimi

kanuni i programimit n ueb

driton haxhiu

HTML

, CSS

, Java

Scrip

t, PHP

& M

ySQL

HTML CSS JAVASCRIPT PHP MYSQL

Struktura1

Kup3mi I struktures

Driton Haxhiu

Shembull i nje gazete, si material dhe ne forme digjitale (webfaqe)

Driton Haxhiu

Ky eshte 3tulli kryesore

Ky tekst ketu paraqet nje permbajtje te shkurter te webfaqes, nuk eshte me rendesi cfare teks3 eshte perdorur

Titulli I nivelit te dyte

Gjithashtu ketu eshte nje permbajtje tjeter e uebfaqes

Cdo gje qe shkruhet brenda eshte kod I html-s

Cdo gje qe shkruhet brenda paraqitet

Fjalet ndemjet dhe jane 3tull

Paragraf quhet cdo Vale dhe/apo Vali qe shkruhet brenda dhe

Titulli I nevelit te dyte dhe

Cdo Vale apo Vali qe shkruhet ndermjet tagut, elemten3t dhe paraqet paragrafin

Mbyllja e HTML-s Mbyllja e body-t

Driton Haxhiu

Karakteri

Hapja e tagut

Kllapa e majte (Shenja me e vogel)

Kllapa e djathte (Shenja me e madhe)

Driton Haxhiu

Karakteri

Mbyllja e tagut

Kllapa e majte (Shenja me e vogel)

Kllapa e djathte (Shenja me e madhe)

Fraksion I mbrapsht

Driton Haxhiu

Logo

ATRIBUTET NA TREGOJNE ME SHUME RRETH ELEMENTEVE

Ky element eshte nje link

Emri i atribu3t

Vlera e atribu3t

HTML lejon te shkruhen atributet me shkronje te madhe, por kjo nuk rekomandohet

Driton Haxhiu

Titulli i uebfaqes

Afati i prillit Na ndiqni ne facebook 03/04/2013 Ne Universitetin e Prishtines, sot fillojne provimet e afatit te prillit. Afati perfundon pas nje jave Me shume

Shembull ne HTML

Driton Haxhiu

Rezulta3

Cdo gje qe shkruhet brenda tagut body, shfaqet ne dritaren kryesore te shfletuesit (browser-it). Para se te filloni me elemen3n body, zakonisht shihni nje element tjeter I cili permban informata rreth faqes

Percakton 3tullin e faqes

Driton Haxhiu

Tekstet2

Titujt dhe paragrafet Bold, italik dhe emfazat

Driton Haxhiu

TITUJT

Ky eshte titulli kryesore Niveli 2 i titullit Niveli 3 i titullit Niveli 4 i titullit Niveli 5 i titullit Niveli 6 i titullit

HTML

REZULTATI

Ky eshte 3tulli kryesore Niveli 2 i 3tullit Niveli 3 i 3tullit Niveli 4 i 3tullit Niveli 5 i 3tullit Niveli 6 i 3tullit

Gjashte nivelet e Titujve

Driton Haxhiu

PARAGRAFET Lorem Ipsum dolor sit amet

lothloriem

HTML

REZULTATI

Lorem Ipsum dolor sit amet lothloriem

Driton Haxhiu

Bold, italik Nganjehere mendoje se njerezit nese i

kan mbijetuar programimit, me nuk duhet ta vrasin mendjen per asgje Kisha degjuar moti rreth programimit, tash fillova te mesoje.

HTML

REZULTATI Nganjehere mendoje se njerezit nese i kan mbijetuar programimit, me nuk duhet ta vrasin mendjen per asgje Kisha degjuar mo3 rreth programimit, tash fillova te mesoje.

Futja e Valeve brenda tagsave , , I bene ato (Valet) ne s3lin bold

Futja e Valeve brenda tagsave , , i bene ato (Valet) ne s3lin italic

Driton Haxhiu

Emfazat Me te 5tin, do te fillojme

te mesojme per E=MC2. Shuma e CO2 ne atmosfere ne vitin 2013 ka qen 2 here me e madhe se ne vitin 2002.

HTML

REZULTATI Me te 53n, do te fillojme te mesojme per E=MC2.

Shuma e CO2 ne atmosfere ne vi3n 2013 ka qen 2 here me e madhe se ne vi3n 2002.

Futja e Valeve brenda tagsave , , I bene ato (Valet) ne s3lin supscripe

Futja e Valeve brenda tagsave , , i bene ato (Valet) ne s3lin subscripe

Driton Haxhiu

Hapsirat e bardha

Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka

HTML

REZULTATI Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka Hena eshte bukur larg nga Toka

Per te bere kodin me te lexueshem, autoret e uebfaqeve, shpesh here p e r d o r i n h a p s i r a ndermjet nje elemen3. Kur shfletuesi (browser) paraqet uebfaqe, atehere hapsrat ndermjet dy Valeve I injoron dhe v e ndo s e v e t em n j e hapsire. Njejte punon edhe atehere kur kemi vendosur ne rresh3n e ri. Krejt kjo njifet me emrin white space collaps (mbyllja e hapsirave te bardha)

Driton Haxhiu

Kryerresh3 dhe rregullat horizontale

Hena eshte larg nga Toka. Dielli eshte edhe me larg. Hena eshte larg nga Toka Dielli eshte edhe me larg

HTML

REZULTATI Hena eshte larg nga Toka. Dielli eshte edhe me larg. Hena eshte larg nga Toka. Dielli eshte edhe me larg

Siq edhe po e shihni browseri automa3kisht Valin ndan ne kryerreshta, dhe cdo element tjeter

Per me e nda nje faqe ne dy pjese, (dy elemnte), atehere mund 3 ndajme permes tagut

Driton Haxhiu

Me shume emfaza

Kujdes: Qeni eshte afer shtepise.

HTML

REZULTATI Kujdes: Qeni eshte afer shtepise Dielli eshte edhe me larg.

Perdoret per Valet qe kane me shume rendesi

Driton Haxhiu

Kuotat

Qiriu nuk humbet, nese nga drita e tij ndizet nje qiri tjeter, a naj sen

HTML

REZULTATI Qiriu nuk humbet, nese nga drita e 3j ndizet nje qiri tjeter, a naj sen

Filan Fisteku ka thene: Shume njerez flasin me kafshet, por askush nuk i kupton ato.



Filan Fisteku ka thene:Shume njerez flasin me kafshet, por askush nuk i kupton ato.

Driton Haxhiu

Rreth Skenderbetut Thenja e tije ne kruje Lirine nuk ua solla une, ate e gjeta ne mesin tuaj Lexo me shume rreth Skenderbeut Bageti e bujqesi

Shembull ne HTML

Driton Haxhiu

Me shume atribute accesskey Class - Percakton nje ose me shume emra te klasave per nje element (referohet ne klase te CSS-s). Contenteditable * Contextmenu * dir Draggable * Dropzone * Hidden * Id - Percakton nje ID unike per nje element lang Spellcheck * style tabindex Title - Percakton informata shtese rreth nje elemen3

Tani per tani do te mesojme vetem per disa atribute, perkeatesisht class, id the +tle

* Atributet ne HTML 5 Driton Haxhiu

Ne pjesen paraprake mesuam: Titujt dhe paragrafet Bold, italik dhe emfazat Atributet

Driton Haxhiu

Listat3

Driton Haxhiu

HTML na sjelle tri lloje te listave: Te renditura Te parenditura Listat e definuara

Driton Haxhiu

Listat e renditura

Tre muajt e pare

Janar Shkurt Mars

HTML

REZULTATI Tre muajt e pare

1. Janar 2. Shkurt 3. Mars

Lista e renditur percaktohet permes ol

Pas elemen33 ol, per cdo liste shkruaj tagun li

Driton Haxhiu

Listat e parenditura

Disa qytete

Ferizaj Prishtine Mitrovice

HTML

REZULTATI Disa qytete

Ferizaj Prish3ne Mitrovice

Lista e parenditur percaktohet permes ul

Pas elemen33 ul, per cdo liste shkruaj tagun li

Driton Haxhiu

Listat e Definuara

Kosova Prishtine Ferizaj Shqiperia Durresi Tirana Vlora

HTML

REZULTATI Kosova

Prish3ne Ferizaj

Shqiperia Durresi Tirana Vlora

dlpercakton serin e termeve te atyre definicioneve

Paraqet prindin e listes se definuar

Elementet e definuara, femijet

Driton Haxhiu

Listat e Hierarkike (Piramida)

Kosova

Prishtine Ferizaj Emin Duraku 13 qershori

Shqiperia

HTML

REZULTATI 1. Kosova

Prish3ne Ferizaj

Emin Duraku 13 qershori

2. Shqiperia

Ne HTML mund te shkruaj list brenda listet

Shembull: Shtetet permbajne qytete, qytetet permbajne fshatra dhe fshatrat permbajne lagje etj.

Driton Haxhiu

Titulli i uebfaqes

Shtetet, qytetet dhe lagjet

Kosova

Prishtine Ferizaj Emin Duraku 13 qershori

Shqiperia

Shembull ne HTML per lista

Driton Haxhiu

Driton Haxhiu

P.S Pame se listat mund te krijohen edhe ne forme hierarkike (piramidale)

Ne pjesen paraprake mesuam: Listat e renditura Listat e parenditura Listat e definuara

Driton Haxhiu

Linqet4

Lidhja ndermjet dy faqeve Lidhja me faqe tjera Lidhja me e-mail

Driton Haxhiu

Linqet jane nje element shume i rendesishem ne uebprogramim, sepse ato na mundesojne qe te levizim (na lidhin) nga nje faqe ne faqen tjeter, qome ajo nje uebsajt tjeter, apo faqe e te njej3t uebsajt dhe/ose aplikacion. Linqet mund 3 definojme keshtu: Lidhja nga nje uebsajt ne nje tjeter Lidhja nga nje faqe ne nje tjeter, e po te

njej3t uebsajt Lidhja nga nje pjese e faqes ne nje tjeter

pjese te po asaj faqeje Lidhja me nje dritare ose me nje tab te ri te

shfletuesit (browser) Lidhja e cila ak3vizon (starton) programin

per te derguar email-a.

Driton Haxhiu

Hap google

Ta shkruajme nje link

Ky element eshte nje link

Faqja ku na dergon linku

Linqet na nevojiten per te kaluar nga nje faqe, ne faqen tjeter

Vendi ku duhet klikuar

Hap google Shembull nga butoni Driton Haxhiu

Lidhja me nje uebsajt tjeter

Motoret per kerkimit, me te njohurit Google

Yahoo

HTML

REZULTATI Motoret per kerkim, me te njohurit

Google Yahoo

Linqet jane krijuar nga elemen3 a, me atribu3n perkates href. Vlera e atribu3t href eshte pikerisht faqja ku klien3n e dergon, ne momen3n e klikimit

Kur ju si programer lidhni faqen tuaj me nje uebsajt tjeter, atehere ne vleren e atribu3t href, duhet ta jepi adresen e plote, e cila njifet edhe is ablosute URL Si te nenkuptuara, shfletuesi lidhjet I shfaq ne ngjyre te kaltert dhe me nenvijzim (underline) Driton Haxhiu

Lidhja me nje faqe tjeter, mirpo ne te njej3n uebsajt

Menya kryesore Ballina Rreth nesh Kontakti

HTML

REZULTATI Menyja kryesore

Ballina Rreth nesh Kontak3

Kur lidhni dy faqe mes ve3, te nje uebfaqe, atehere nuk keni nevoje te shkruani domainin, mund ta perdorni menyren e shkurter, qe quhet rela+ve URL

Nese te gjitha faqet, jane ne te njej3n folder, atehere shkruhet vetem emri i faqes me prapashtese, perndryshe nese eshte ne nje folder tjeter do ta shohim ne vazhdim

Driton Haxhiu

Struktura e direktoriumeve Per uebfaqet e medhaja rekomandohet qe te organizoni fajllat e kodit tuaj ne ate menyre, qe te jene te ndara ne foldera te caktuar, ndersa per uebfaqet me te vogla eshte praktike e mire qe te pakten te ndahen fajllat sipas tipit te tyre.

index.html rreth.html kontakti.html

inc

js Style.css

js

Main.js

Folderi prind

Folderi femij

Folderi gjysh

Folderi nip

Driton Haxhiu

Linqet relative Tipi i lidhjeve relative Shembulli

Folderi i njejte

Folderi i femij

Folderi i nip

Folderi i babe

Folderi i gjysh

Kontakti

Kontakti

Kontakti

Kontakti

Kontakti

Driton Haxhiu

Linku qe hap nje aplikacion per dergim te email-ave

Dergo

HTML

REZULTATI Dergo

Per me kriju nje link, i cili starton aplikacionin per dergimin e email-ave dhe per te specifikuar email adresen, perdoret elemen3 . Megjithate vlera e atribu3t href, ne kete rast fillon me mailto: dhe eshte percjelle me email adresen ku deshironi te shkoje ajo.

mailto:

Driton Haxhiu

Lidhja me nje faqe tjeter, mirpo ne te njej3n uebsajt

Hap google-n (ne tab te ri)

HTML

REZULTATI Hap google-n (ne tab te ri)

Per me hap nje link ne nje dritare (tab) te ri, atehere si atribut jepet target, ndersa vlera e 3j _blank. Krejt kjo brenda elemen3t a

target

Driton Haxhiu

Lidhja me nje pjese te veqant ne te njejten faqe

Hap google-n (ne tab te ri)

HTML

REZULTATI Hap google-n (ne tab te ri)

Per me hap nje link ne nje dritare (tab) te ri, atehere si atribut jepet target, ndersa vlera e 3j _blank. Krejt kjo brenda elemen3t a

target

Driton Haxhiu

Lidhja me pjese tjera te nje faqe

Titulli Pjesa 1 Pjesa 2 Pjesa 3 Pjesa 1 fillon ketu Lorem Ipsum dolor sit amet

HTML

REZULTATI

Nese faqja eshte shume e gjate, atehere per te shkuar me shpejte tek nje pjese duhet ta shkurojme rrugen. Html naj mundeson nje gje te 3lle duke I indeksuar, apo iden3fikuar pjeset e caktuara, permes atribu3t id. Pasi keni iden3fikuar nje elemente, ne duhet ta krijojme nje link, ku si vlere te atribu3t href japim: #emri. Ne kete rast fokusi do te jete ne pjesen e deshiruar.

id

Driton Haxhiu

Ne pjesen paraprake mesuam: Lidhja ndermjet dy faqeve Lidhja me faqe tjera Strukturimi I direktoriumeve Lidhja me e-mail Lidhja qe na dergon ne nje tab te ri Lidhja me pjese te caktuara te nje faqe

Driton Haxhiu

Imazhet5

Si shtohet nje imazhe ne faqe Zgjedhja e forma3t te dukur Op3mizimi i imazheve per ueb

Driton Haxhiu

EKZISTOJE SHUME ARSYE PSE DUHET TE SHTOJME IMAZHE NE UEBFAQE: LOGO FOTOGRAFITE ILUSTRIME DIAGRAME DHE

GRAIKA

Pse imazhet?

Driton Haxhiu

Te shtojme imazhe

HTML

REZULTATI

Per me e shtu nje imazh ne nje faqe, duhet ta perdorni elemen3n . Ky eshte nje elemen3 I zbrazet (qe nenkupton qe nuk ka tag te mbylljes). Elemen3t te imazheve I shtohen edhe 3 atribute.

Driton Haxhiu

Si vlere e atribu3t src japim shtegun e imazhit

src

alt paraqet alterna3ven, atehere kur mungon imazhi, zevendesohet me teks3n qe jepet si vlere e ke3j atribu3

alt

Atribute tjera te imazheve

Lorem ipsum dolor sit amet, lothlorem intronente impositre satre o nente impriante dolor imente sa preme

HTML

REZULTATI

Per me e shtu nje imazh ne nje faqe, duhet ta perdorni elemen3n . Ky eshte nje elemen3 I zbrazet (qe nenkupton qe nuk ka tag te mbylljes). Elemen3t te imazheve I shtohen edhe 3 atribute.

Driton Haxhiu

Si vlere e atribu3t src japim shtegun e imazhit

src

alt paraqet alterna3ven, atehere kur mungon imazhi, zevendesohet me teks3n qe jepet si vlere e ke3j atribu3

alt

Lorem ipsum dolor sit amet, lothlorem intronente impositre satre o nente impriante dolor imente sa preme

Imazhet

Shembuj

Shembull ne HTML per imazhe

Driton Haxhiu

Tabelat6

Si te krijojme tabela Cfare informata permbajne tabelat Si ti paraqesim te dhenat komplekse

Driton Haxhiu

Ka disa lloje te informacioneve qe duhet te paraqiten ne rrjete (grid) ose ne tabela. Shembull: Te dhenat tabelare sportive, raportet e aksioneve, oraret e treneve etj.

Tabelat

Driton Haxhiu

Struktura bazike e tabelave

15 15 30

45 60 45

60 90 90

HTML REZULTATI Elemen3 table perdoret per te krijuar tabela. Permbajtja e tabelave mbushet rresht pas rresh3

Driton Haxhiu

Per te filluar nje rresht te nje tabeles, fillojme me tagun tr, e cila pastaj percilet me td, qe paraqet celulen e a3j rresh3.

Rreshti


Celula

15 15 30

45 60 45

60 90 90

Varesisht nga shfletuesi, gridi merr s3le te ndryshme, me von do te shohim se si mund ta unifikojme gridin neper shfletues te ndryshem

Hapsirat ne kolona dhe rreshta (col span dhe row span)

15 15 30 45 60 60

90 90

HTML REZULTATI Colspan perdoret kur nje celul eshte sa dy ose me shume se celulat e rreshtave tjere

colspan

Driton Haxhiu


rowspan


Celula

15 15 30

45 60

60 90 90

Varesisht nga shfletuesi, gridi merr s3le te ndryshme, me von do te shohim se si mund ta unifikojme gridin neper shfletues te ndryshem

Extra markup 7

Komentet Blloqet Span

Driton Haxhiu

Komentet

HTML

REZULTATI

Nese doni me shtu nje koment, atehere duhet ta keni parasysh se ai nuk shfaqet ne shfletues (browser)

Driton Haxhiu

Ne shfletues (browser), nuk do te paraqitet komen3

Komentet jane te nevojshme per te shpjeguar pjese te caktuara te kodit. Nese kthehemi pas nje kohe dhe nuk e kemi iden se cfare kemi shkruar ne te, atehere komen3mi do te na ndihmonte. Gjithashtu kur punohet ne grup jane te domosdoshme shpjegimet.

Blloqet (div)

Grup i kodit html

HTML

REZULTATI

Divizionet apo blloqet na sherbejne per te grupuar pjese te kodit ne blloqe te ndryshme

Driton Haxhiu

Grup i kodit html

Me ane te div-ave, ne strukturojme kufit e moduleve te ndryshme, grupeve te ndryshme te nje uebfaqe

Blloqet (span)

Grup i kodit html

HTML

REZULTATI

Permes span-it, ne ndajme pjese te caktuara te kodit, elementeve apo Valeve ne grupe qe quhen inline (ne nje vij)

Driton Haxhiu

Grup i kodit html

Atribu3 ID

Grup i kodit html

HTML

REZULTATI

Cdo element ne HTML pund te permbaje nje atribut id. Ky atribut perdoret per te unifikuar nje element, perveq per 3 dhene nje iden3tet. Duhet filloje me shkronje ose nenvize (kursesi me numer apo karakter tjeter). Eshte e rendesishme dhe duhet te keni kujdese qe mos te jene dy elemente ne te njejten faqe me id te njejte. Atribu3 class ne CSS thirret me pike (.) Shembull: .header{}

id

Driton Haxhiu

Grup i kodit html

Atribu3 Class

Grup i kodit html

HTML

REZULTATI

Cdo element ne HTML mund te permbaje nje ose me shume atribut class. Ky atribut perdoret per ti dhene emer nje elemen3. Nje vlere e atribu3t class, mund te perdoret ne shume elemente sikurse ne te njejten faqe, ashtu edhe ne faqe tjera. Atribu3 class ne CSS thirret me pike (.) Shembull: .header{ . }

class

Driton Haxhiu

Grup i kodit html

Ushtrime nga HTML

Driton Haxhiu

(Shkruhet teksti I ushtrimeve)

Shembull ne HTML per lista

Driton Haxhiu

Skica (Wireframe) 8

Driton Haxhiu

Cacoo Illustrator Photoshop

Miresevini ne uebfaqen tone

1 Shqip 2 Anglisht

Driton Haxhiu

Skica

Skica (wirefarem) eshte faze shume e rendesishme sa I perket programimit

Skicat jane faze kalimtare nga analiza ne dizajne

Ne skica duhet 3 ikim sa me shume ngjyrave dhe te paraqesmi funksionalite3n e aplikacioneve

Driton Haxhiu

Veglat Si vegel qe mund ta perdormi online eshte

Cacco Adobe illustator Adobe Photoshop Ekzistoje shume vegla per skica. Nuk eshte e rendesishme cfare vegle perdorni, kjo eshte zgjidhja e juaj. Skicat mund te behen edhe me dore te lire

Driton Haxhiu

Elementet Elementet ne Skice duhet te paraqitesin

elemtentet qe permban aplikacioni. Shembull: Butoni duhet te jete I skicuar si buton Imazhet paraqiten si nje katror me nje x brenda. Ne asnje menyre nuk duhet te futet imazh I vertete ne skice, apo te jete ndonje element I dizajnuar. Shih figuren ne faqen 59 etj

Driton Haxhiu

Cdo link dhe cdo buton qe keni vendos ne Wireframe (skice) duhet ta keni parasysh dhe duhet ta mendoni se cfare vjene pas tij.

Shembull: Nese ne skice keni futur nje buton vazhdo, atehre duhet ta mendoni edhe hapin e arshem se ku ju dergon ai buton

Driton Haxhiu

Sa i perket uebfaqeve, sikurse skicat, ashtu edhe dizajni duhet te projektohen shabllonet kryesore (template) Ballina (Home) Seksioni (Section) Lista e artikujve (Article list) Kontakti (contact) --- Lista e dokumenteve (Doc list) Harta e faqes (Sitemap) Lista e kerkimeve (Search form)

Driton Haxhiu

Detyre shtepie: Duke u bazuar nga skica, te shkruhet kodi html

CSS10

Driton Haxhiu

Hyrje

p{ color:blue;}

Selektori

Driton Haxhiu

Ve3a Vlera

Deklarimi

CSS Eksternal Css Eksternal Titulli Lorem ipsum dolor sit amet

HTML

Link, eshte nje element I cili I tregon HTML-it se ku gjendet saktesisht CSS

Driton Haxhiu

Titulli Lorem ipsum dolor sit amet .

Si vlere e atribu3t href, jepet shtegu se ku gjindet fajlli css

href

Tregon 3pin e dokumen3t me cilin do te lidhet. Duhet te jete text/css

type

Paraqet relacionin e fajllit eksternal me HTML-in. Ne kete rast do te jete stylsheet

rel

body{font-family:arial; background-color: rgb(185,179,175); } h1{color:#fff;}

CSS

REZULTATI

CSS Internal

Dobesia e futjes se kodit te CSS, brenda HTML, eshte sepse css-I shkruar, nuk mund te perdoret edhe ne fajlla tjere

Driton Haxhiu

Titulli Lorem ipsum dolor sit amet .

REZULTATI

Css Eksternal

body{font-family:arial; background-color: rgb(185,179,175); } h1{color:#fff;}

Titulli Lorem ipsum dolor sit amet

CCS HTML +

Selektoret Selektori Universal *{} Seletori i 3peve p{} Selektori i clases .shenime{} p.shenime{} Selektori ID #shenime{} p#shenime{} Selektori Femij li>a{} Selektori pasardhes p a{}

Driton Haxhiu

Ngjyrat HEX #f1f1f1; RGB rgb(102,205,170); Me emer red, blue green;

Driton Haxhiu

Padingu, margjina dhe borderi

Driton Haxhiu

Hello World Margin

Border

Padding

Pershkrim: Ne ras3n tone, kemi marr nje paragraf Hello World. Ke3 elemen3 (paragrafit) I kemi dhene pading (padding:20px), ku eshte ilustruar me ngjyre roze. Pastaj po te njej3t element I kemi caktuar kufi (border: 3px solid #ff0000) qe eshte paraqitur me njgyre te kuqe. Dhe ne fund I kemi dhene margin (margin:20px), e cila eshte ilustruar me ngjyre te verdhe

Border

Driton Haxhiu

border:1px solid #9f723f; Gjeresia Stili Ngjyra

border-width: 1px; border-style: solid; border-color: #9f723f;

Borderi, paraqet kufirin e nje elementi te html-it

Vetit e nje borderi mund ti theraasim edhe ne kete menyre

solid doyed dashed

Disa stile te border-ave (kufijeve) border-top: border-right: border-bottom: border-left:;

Ve+te Pershkrimi Disa Vlerat

font-family Lloji I fontave Arial, Tahoma,

font-size Madhesia e shkronjave 8px deri 72px

font-weight Gjeresia e shkronjave normal, bold

font-style S3li I shkronjave normal, italic, obligue

text-transform Trasformimi I teks3t uppercase, lowercase, capitalize

text-decora3on Dekorimi i teks3t none, underline, overline, linethrow, blink

text-align Rresh3mi i teks3t lem, right, center

color Ngjyra e teks3t color:#f2f2f2;

Driton Haxhiu

Textet

Ve+te Pershkrimi Disa Vlerat

width Gjeresia Auto, 100%, 100px

height gjatesia Auto, 100%, 100px

min-width Gjeresia minimale normal, bold

min-heigh S3li I shkronjave normal, italic, obligue

max-width Trasformimi I teks3t uppercase, lowercase, capitalize

max-height Dekorimi i teks3t none, underline, overline, linethrow, blink

Driton Haxhiu

Dimensionet

Background (prapavija)

Driton Haxhiu

background:#9f723f url(../img.png) no-repeat left top;

perseritja Ngjyra

background-color: #9f723f ; background-image: url(../img.png) ; background-repeat: no-repeat; background-position: left top;

Backgroundi, paraqet prapavijen e nje elementi te html-it Ai mund te jete ngjyre, ose imazh

Vetit e nje background-I mund ti theraasim edhe ne kete menyre

no-repeat, repeat-x, repeat-y, repeat

imazhi pozicioni

left top left center left bottom center top center center center bottom right top right center right bottom

Ndryshimi nga inline ne block dhe anasjelltas

display:inline css

Paraqet nje blok ne vije

Display (paraqitja)

Driton Haxhiu

inline

Paraqet nje ku3t si blok block

Nuk paraqet fare elemen3n none

Fshehja e elementeve

Visibility (dukshmeria)

Menyra qysh paraqitet nje element

Disa elemente shpeshe here na duhen te jene ne kodin html, mirepo nuk duhet te paraqite. Shembull, ne mund ta perdorim nje ku3 perplote elemente, dhe I fshehim ato, derisa te kryejme nje pune tjeter

Kjo e fshehe elemen3n hidden

Ne kete rast paraqitet elemen3 visibly

visibility:hidden;

css

Driton Haxhiu

Pozicionimi i elementeve CSS-I posedon skemen e pozicioneve (positioning schemes), e cila ju lejon juve qe ti kontrolloni pjese te caktuara ne nje faqe: Rrjedha normale (normal flow) Pozicioni relativ (position relative) Pozicioni absolut (position absolute) Pozicioni fiks (position fix) Rreshtimi I elementeve (floating elemnts). Skemen e pozicionimeve e percaktojme permes vetise posicion: ne CSS, ndersa rreshtimi (floating), perdoret me float

Rrjedha normal (normal flow)

css

Normal flow

Driton Haxhiu

Posicioni relativ

Relative posicioning Cdo bllok I elementeve, na paraqitet ne kryerresht, madje edhe nese I japmi gjeresi per ti nxene dy blloqe ne te njejtin nivel. Si vlere e nenkuptuar eshte rrjedha normale, dhe ne kete menyre shfletuesi I paraqet njeren pas tjetres duke filluar nga lart te poshte, dhe kete rrjedhe nuk e ndryshon derisa ti tregojme shfletuesit te beje dicka tjeter.

Position:relative;

css

position:static;

Pozicioni absolut

css

Absolut posicioning

Driton Haxhiu

Posicioni i fiksuar

Fixed posicioning Pozicionimi absolut nenkupton qe nje bllok elementes, apo vetem nje element te vetem mundt ta pozicionojme pavaresisht krejte permbajtjes tjeter, dhe pavaresisht se ne cilin pozicion gjendet prindi I tij.

Njejte sikurse pozicioni absolut edhe pozicionimi I fiksuar nuk merr parasysh pozicionimin e elementeve tjera, mirepo pozicionimi fiks nenkupton qe nje element apo nje bllok elementes pozicionohet ne nje pozite dhe ai nuk e ndryshone ate pozite edhe kur levizim me scroll

position:fixed;

css

position:absolute;

Pozicionimi absolut nenkupton qe nje bllok elementes, apo vetem nje element te

vetem mundt ta pozicionojme pavaresisht krejte permbajtjes tjeter, dhe pavaresisht se ne cilin pozicion gjendet prindi I tij.

Lorem ipsum

Pozicionimi absolut nenkupton qe nje bllok elementes, apo vetem nje element te

vetem mundt ta pozicionojme pavaresisht krejte permbajtjes tjeter, dhe pavaresisht se ne cilin pozicion gjendet prindi I tij.

Lorem ipsum

Dizajni 11

Driton Haxhiu

Photoshop

Driton Haxhiu

Programimi 12

Driton Haxhiu

Hyrje

Nj program kompjuterik sht nj grup i udhzimeve

Nj program kompjuterik sht nj seri e udhzimeve

B

A

Shembull nga programimi: Ju jeni ne nje qytet (Ferizaj) dhe po pritni nje telefonate nga nje mik i juaji I cili gjendet ne nje qytet tjeter (Prishtine). Miku juaj nuk ka qen asnjehere ne qytetin tuaj, ndaj ai kerkon nje shpjegim te rruges qe do te beje. Gjeja e pare qe ju vjen ndermend eshte nje trajektore e drejte nga qyteti juaj, ne qytetin e mikut tuaj. Mirepo gjerat sikurse ne jeten reale, ashtu edhe ne programim nuk funksionojne ne jete menyre, ndaj per te pershkruar rrugen deri ne shtepin tuaj, mikut I duhen instruksione te sakta per te arritur deri tek ju. Ne menyre te njejte edhe ne programim duhet te japim informata te sakta, perndryshe programi mund te ndeshet, njejt sikurse miku juaj. Kjo eshte edhe arsyeja pse themi se nje program eshte crash-irat, ka pesuar aksident.

Shembull i programimit ne jeten reale

B

A

Puna e pare qe bejme per ti ndihmuar mikut tuaj per te arritur tek ju, eshte analiza. Duhet te jeni te sigurt nese ju jeni ne dijeni per rrugen e sakt, ate duhet analizuar, per cdo kthese per cdo semafor qe gjendet ne rruge, pastaj ju filloni ti jepni instruksionet. Ju mund ti thoni atij, se fillimisht niset djathtas, vazhdon 2 km, pastaj kthehet djathtas perseri. Pas 500 m ka nje semafor, nese semafori eshte ne ngjyre te kuqe, atehere prit derisa te ndezet e gjelberta, pastaj vazhdo drejte, perndryshe menjehere vazhdo drejte. Pas 17 km tjera keni nje rreth. Eshte rregull qe ne rreth te silleni 3 here, derisa te lirohet trafiku, pastaj mas 13 km, ndaleni dhe ju jeni prane shtepise sime.

Nese ne nuk i kemi dhene instruksionet mire, atehere mikun shume leht mund ta shohim te perplasur ne ndonje pem. Qoft edhe pran shtepise.

Shembull i programimit ne jeten reale

Programimi nuk eshte vetem shko majtas, shko djathtas

Ne programim shembull mund ti krijojme dy vlera, pastaj ato dy vlera ti llogaritmi

Kontrollo nese perdoruesi e ka shtypur tastin ENTER

Ndrysho ngjyren e nje pikseli te vetem ne ekran

Disa shembuj cfare mund te bejme me ane te programimit

Driton Haxhiu

Deklarimet (Statements)

BASIC

AppleScript

Java

COBOL

LET Balance = 500

Set balanbe to 500 balance = 500; MOVE 500 TO BALANCE

Definicioni

Programimi ne esence eshte qe nje ide tuaj, ta ndani ne pjese dhe keto pjese te dini ti shkruani ne sintaksen e gjuhes programuese qe ju keni zgjedhur

Gjuha Programuese

13Driton Haxhiu

Gjuhet programueseC

C++ C#

Java JavaScript

PerlPHP

Python Objective-C

Ruby Visual Basic

Ekzistojne qindra gjuhe programuese, qysh prej ka fillu te programohet, per disa arsye disa jane me te njohura e disa jo. Ne anen e djathte jane dhene disa gjuhe te cilat sote jane me te popullarizuarat. Shumica prej tyre jane te bazuara ne gjuhen programuese C.

Meqense me te gjitha mund te kryejme pune te njejte, atehere pse nuk ekziston vetem nje gjuhe programuese?

Kodi i makines

C C++

C#Java

JavaScript PerlPHP

Python Objective-C

Ruby Visual Basic

CPU- Truri I cdo paisje nuk kupton asnjeren nga gjuhet qe shihen ne anen e djathte. Ne mendojme qe Qipi (CPU) lexon kodin ton qe kemi shkruar ne nje gjuhe programuese, mirepo jo. Te vetmen gjuhe qe njeh Qipi eshte kodi I makines, ose gjuha e makines, e cila lidhet direkt me hardware-in

Pse nuk shkruajme kod te makines? Ngase eshte e pamundur dhe humbje kohe

6A 00 89 48 E4 F0 45 C1 08 E2 90 72 1C 00 34 E9 53 00 20 00 FC Edhe nese e shkruani, nuk mund ta lexoje askush, ngase nuk eshte per njerezim por per makina

CPU Kodi i makines

Assembly Language

JavaScript, Ac3onScript Ruby, Paython, PHP

Java, C#, VB.NET

Objec3ve-C C++

C Gjuhet e ulta programuese

Gjuhet e larta programuese

Kodimi C

C++ C#

Java JavaScript

PerlPHP

Python Objective-C

Ruby Visual Basic

Kur te themi, po programoje, po shkruaj kod, po kodoj, eshte e njejta gje, mirepo duhet ti kuptojme tri gjera:

1. Si te shkruajme, ku tja fillojme me shkru2. Qysh ai kod, do te konvertohet ne kod te makines 3. Si ta ekzekutojme kete program

Te shkruaj kod source (programojme)

C C++

C#Java

JavaScript PerlPHP

Python Objective-C

Ruby Visual Basic

Kodi I programimit shkruhet ne plain text. Mund ta hapni nje editor te thjeshte ne modin plain text dhe jo rich text, dhe te filloni me shkru nje odin tuaj.

Nuk ka asgje magjike ne programim, eshte thjesht nje text, njejt sikur te shkruash nje poezi

Shembuj alert(Hello, World!);

JavaScript

Groovy

Driton Haxhiu

perl say Hello, World!;

shembull.js

shembull.pl

shembull.groovy

ruby

puts Hello, World!

shembull.ruby

say Hello, World!;

Hello world, nje shembull klasik

print (Hello, world!)

ALGOL68 Paython Lua

Kur fillojme me deklaru nje kod, duhet patjeter te tregojme ku eshte fillimi dhe fundi.

BEGIN DISPLAY (Hello, world!);

END.

ALGOL60

Using System; Class Shembulli {

static void Main(string[] args) { console.WriteLine(Hello, world!); }

}

C#

Ne gjuhen programuese ALGOL60, eshte perdorur BEGIN dhe END.

Ne gjuhet programuese qe jane te bazuara ne C, shmebull C, C++, C#, Java Perdoren kllapat gjarprore { }

A duhet me I mbajte mend gjitha keto??? Jo bash

Text Editor-et per Programera

Plain Text Editor, me tipare extra Disa jane falas, disa komercial Na tregojne per numrin e rreshtave Kodin e ngjyrave (Color Code), nuk eshte I formatum, por na ndihmon per me I

lexu dhe me I shkru pjese te ndryshme te kodit

Kontrollimi I sintakses, sikurse kontrollimi I fjaleve Disa text editor I perkrahin vetem nje gjuhe programuese e disa edhe te tjera

IDE (Integradet Development Eniorements)

Jane programe te mdhaje, dhe kane edi3m te mire Kan shume 3pare per zhvillim profesional

Shembull I IDE-ve jane:

Xcode per MAC VisualStudio per PC Ecplipse Cross pla|orm

Gjuhet e kompajlluara dhe te interpretuara

Script alert(Hello, world);




alert(Hello, world!); Hello, world!

Programeri Klien+

Gjuha e interpretuar

interpreteri


Cout

Perparesit dhe mangesit

Gj. e Kompajlluara Gj. e interpretuara

Perparsite Mangesite Perparsite Mangesite

Ga+ per perdorim

Shpesh me e shpejte

Kodi privat

Jo Cros-plaOorm

Jo fleksibile

Hapa shtese

Cros-plaOorm

Thjesht per test

Thjesht per kontroll

Kerkohet interpreter

Shpesh e ngadalshme

Kodi eshte publik


Cout

Shembull te gjuheve programuese

Te Kompajluara:

Te interpretuara:

Hybrid:

C, C++, Objective C

PHP, JavaScript

C#, Java, VB.NET, Python

Hyrje ne JavaScript

14Driton Haxhiu

JavaScript

alert(Hello, world!); javascript

Hello, world!

Reulta3

Pse JavaScript? JavaScript nuk eshte nje prej gjuheve me fleksibile, mirepo eshte gjuhe programuese shume e pershtatshme per fillestare dhe perdoret per uebprogramim. JavaScript eshte gjuhe programuese e interpretuar dhe eshte case sensi3ve, pra e ndjeshme ndaj rregullave te shkronjave

Ku dhe si ta vendosmi JavaScripten

Miresevini

alert(Hello, world);

javascript

Atributi typetype = text/javascriptKerkohet per HTML 4, XHTML ose me poshte

JavaScripti mund te thirret nga nje file tjeter I jashtem (external). Dhe mund te shkruhet brenda fajllit HTML. Per arsye qe te njejtin fajll te mund ta therrasim edhe ne fajlla te tjere, atehere preferohet qe te shkruhet ne nje fajll te jashtem. Nese bejme ndonje ndryshim, atehere te gjitha faqet tjera e marrin ate ndryshim. JavaScript mund te thirret ne Header por edhe brenda bodyt. Per arsye te performances zakonisht therrasim ne fund te bodyt, veq ne raste te caktuara kur na nevoitet ne fillim.

Variablat15

Driton Haxhiu

Variablat ne JavaSript

var vleraA = 3;

var vleraB = 9;

var rezulta3 = vleraA + vleraB;

vleraA vleraB

alert(Rezulta3: + rezulta3);

rezulta3

3 9 12

var emri = Driton;

emri

Driton

var emri = Driton; vlera e inicializuar Emer3mi i variavles

Operatoret16

Driton Haxhiu

Operatoret alert (Pershendetje); prompt (Jepeni emrin: ); confirm (Jepeni emrin: );

if (confirm("A pajtoheni?")) { alert("Po, pajtohem!");

} else{

alert ("Jo, nuk pajtohem!"); };

prompt (Jepeni emrin: , vlera e nenkuptuar);

confirm (Stringu + variabla);

Alert, prompt dhe confirm, ne na interpretohen si PopUp.

OK cancel

A pajtoheni?

Operatori Pershkrimi Shembulli

++ Rritet vlera per 1 a = 3; a++; Tani a = 4

-- Zvoglohet vlera per 1 a = 3; a -- ; Tani a = 2

% Modular a=8 % 3;

+ Mbledhje dhe sh3m

- Zbritje

* Shumezim

/ Pjes3m

Operatoret aritmetik

Rritjet / zvoglimet

a = a + 1; a += 1; a++; ++a;

a = a - 1; a -= 1; a--; --a;

Prefiks dhe postfiks

var a = 5; alert(++a); Rezultati shfaqet: 6

5 a var a = 5;

alert(a++); Rezultati shfaqet: 5

5 a

Operatori ternary (tresh) kushti ? true: falsevar lojtari1 = 230; var lojtari2 = 378; var fituesi = (lojtari1 > lojtari2) ? fituesi1 : fituesi2; if (lojtari1 > lojtari2){

fituesi = lojtari1; } else{

fituesi = lojtari2; }

Operatoret krahasues Operatori Pershkrimi Shembulli

= E barabart

== Krahasuese

=== Strikt krahasuese

= Me e madhe ose baraz

< Me e vogel

> Me e madhe

!= Jo e barabarte

!== Strikt jo e barabart

Operatoret logjik Operatori Pershkrimi Shembulli

&& Dhe

|| Ose

if ( a

Detyre per ushtrime 1

var a = 5; var b; var rezultati; b=3; rezultati = a+b; alert("rezultati eshte: " + rezultati);

javascript

Rezultati eshte: 8

Reulta3

Kushtet 17

Driton Haxhiu

Kushtet if ( kushti ){

//deklarimi I kodimit tuaj ne baze te kushtit shkruhet ketu ;

// } else if( kushti tjeter ){

//perndryshe ekzekutohet kodi qe shkruhet ketu

} Else{ //perndryshe ekzekutohet kodi qe shkruhet ketu }

Detyre nga kush3 var a = 4; var b = 346; if (a == b){

alert(Vlerat jane te barabarta: ); } else if(a

Detyre per ushtrime 2

var emri = prompt("si quheni? "); alert("Emri juaj eshte: " + emri );

javascript var a = 4; var b = 346; var rez; var oper = prompt("Operatori? "); if (oper == 1){

rez = a + b; alert("Shuma: " + rez );

} else if(oper == 2){

rez = a - b; alert("Zbritja: " + rez );

} else { rez = a * b; alert("Shumezimi: " + rez );

}

javascript

Unazat (loops) 18

Driton Haxhiu

Unazat (Loops) Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte

Ka raste kur neve na nevoitet qe te kryejme nje pune te njejte shume here (2, 5 ose 500 deri ne infinit). Per te mos I perseritur manualisht keto te dhena atehere ne perdorim unazat (loop) per te kryer nje pune te tille. Shembull konkret: Permes unazave ne mund ti gjenerojme numrat personal te qytetareve te vendit, ose tabelat e veturave, madje ne mund ti kufizojme disa numra te rezervuar.

Per te krijuar nje unaze, kemi tri menyra: While (gjersa) Do, while (beje, gjersa) For (per)

Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte Deklarimi i pare Deklarimi i dyte

While (Gjersa)

var a = 1; while( a< 10){

console.log(a); a++;

}

javascript Njejte sikurse tek kushtet qe kemi If( a< 10){

// beje dicka } Mirepo ne kete rast ne zevendesojme if me while. While (a < 10){

// beje dicka }

Do While (Beje Gjersa)

var a = 1; do {


} while( a< 10);

javascript

For (per)

var a = 1; while( a< 10){


}

Vendosja e indexit

Kontrollo kushCn

Rrit vleren per 1

for (i = 1; i < 10; i++){ // bej disa gjera

}

Vendosja e indexit

Kontrollo kushCn

Rrit vleren per 1

Shembull nga unaza

for (i = 1; i < 10; i++){ console.log(i); i++;

}

javascript

for (i = 1; i < 10; i++){ console.log(i); i++; if (i == 98){ break; }

}

javascript

Break, nese plotesohet kushti brenda unazes atehere na qet jasht unazes.

for (i = 1; i < 10; i++){ console.log(i); i++; if (i == 98){ con3nue; }

}

javascript

Break, nese plotesohet kushti brenda unazes atehere na qet jasht unazes.

Break Continue

Funksionet19

Driton Haxhiu

Per te bere kodin me te lexueshem dhe per te bere me te lehte manipulimin me te, atehere ne krijojme, funksione. Ne gjuhet tjera programuese i gjejme si sub rutin ose si module, mirepo ne JavaScript thjesht Funksione.

function myFunction(){ console.log(Hello, world!);

}

javascript

function myFunction(x,y){

var shuma = x+y;

console.log(shuma);

return x;

} myFunction(12,65); myFunction(543,98);

Emertimi Parametri

Parametrat mosperputhes

function llogariabankare(shuma, muaji, interesi, emri){ //Pjese e kodit

} llogariaBankare(1200, 36, 12, Driton Haxhiu); llogariaBankare(1200, 36, 12, Driton Haxhiu, Programer); //Parametrat shtese do te injorohen llogariaBankare(1200, 36);

// Vlerat tjera do te zevendesohen me undefinde. // Nuk do me thene qe funksionon, por as nuk do te thot qe funksionon. Duhet te keni kujdese

Variable Scope (fushat qe shihen)

function shembull(){ var foo = 342; console.log(foo);

} shembull(); // 342 console.log(foo); // UNDEFINED

var foo; // Variabel globale function shembull(){

foo = 342; console.log(foo);

} shembull(); // 342 console.log(foo); // 342

Shembull nga Funksionet

function gjeneratori(n){ for (i=0; i

Ne oren e ardhshme: VektoretNumratStringjetDatat Objektet

Vargjet (vektoret) Ang. Arrays

20Driton Haxhiu

Tipet dhe objektet

Krijojme vargje var njeVlere; njeVlere = 87;

87

njeVlere Kemi krijuar nje variabel dhe e kemi inicializuar me nje vlere. Vlera e variables mund te jete, numer, string dhe bulean

Vargu eshte nje variabel e vetme, e cila permban shume vlera numerike dhe tekstuale per ti treguar JavaScriptes qe po krijojme nje varg, atehere shenojme [ ]

var vargu = []; vargu[0] = 45; Vargu[1] = 76; Vargu[2] = Driton;

vargu

[0] [1] [2]

45

76

Driton

Fillon nga 0 (zero)

alert ( vargu[2] ) ;

Krijojme vargje ne rruge te shkurter var vargu = []; vargu[0] = 45; Vargu[1] = 76; Vargu[2] = Driton;

vargu

[0] [1] [2]

45

76

Driton Fillon nga 0 (zero)


var vargu = [ 45,76, Driton ]; [0] [1] [2]

Krijojme vargje ne rruge te gajte var vargu = []; var vargu = new Array(); var vargu = Array(); var vargu = Array(5);


Vargjet jane objekte

Ne JavaScript vargjet gjithmon jane dinamike

Kjo eshte menyra ime qe preferoje

Tiparet e vargjeve (properties)

var vargu = [ 45, 78, 76, 34 ];

Console.log( vargu.length) ;

Me qenese vargjet jane objekte, atehere ato kan veti dhe metoda (Vetit, metodat dhe te tjerat me gjeresisht do ti mesojme ne Programim te Orientuar ne Objekte)

Metodat paraqesin informatat qe i posedon

// gjatesia e vargut eshte: 4 //indeksi me I lart eshte [3] //Highest index

Metodat e vargjeve (properties)

var vleraVargut = [ 10, 20, 30, 40];

Vargjet gjithashtu kan metoda.

disaFunksione (parametrat); //thirja e nje funksioni Metodat jane funksione qe I perkasin nje objekti

disaObjekte.disaMetoda (parametrat); //thirja e nje metode

var vleraRevers = vleraVargut.reverse(); .join(); .sort();

Krojon varg tjeter

console.log(vleraRevers.join) ; 40,30,20,10

Vargjet jane cdokund

var varguILinqeve= document.getElementByTagName(a);

Nese duam te dijme sa linqe kemi ne faqen tone, atehere thrrasim te gjitha linqet

varguILinqeve

[0] [1] [2]

Numrat21

Driton Haxhiu

Tipet dhe objektet

Numrat

var x = 87; 87

njeVlere

Numrat ne JavaScript jane 64-bit float

var x = 87.3;

Mbledhja kunder shtimit (+)

var x = 5; var y = 6;

var x = 5; var x = 6;

console.log(x+y); // 11

console.log(x+y); // 56

Ketu mblidhen vlerat e x dhe y

Ketu behen bashk vlerat e x dhe y

Numrat

Stringjet

Mbledhja kunder shtimit (+)

var x = 5; var y = 6; console.log(x+y); // 56 njera vlere eshte string

Cka ndodhe kur njera vlere eshte numer, tjetra string?

var x = 5; var y = 6; console.log(x*y); // NaN

Not a Number (Nuk eshte nje Numer)

Nuk eshte nje numer (NaN)

var x = 36; // mund te jete abc

Nganjehere na nevoitet nje vlere ta bejme numer, nese ai eshte string. Si ta bejme kete?

var numriIm = Number(x); // Beje numer

Nganjehere na nevoitet me dite, per nje vlere eshte numer apo string. Si ta bejme kete?

Objektet matematikore

var x = 52.6;

Krijojme nje variebel x me presje dhjetore. Nese duam qe kete vlere ta fiksojme duke marr parasysh presjen dhetore atehere shkruajme

Nese duam te gjeme vleren maksimale dhe/ose minimale te dy ose me shume variablave atehere shkruajme:

var y = Math.round(x); // 53

var a = 220; b = 35544; c = 2; var vleraMaksimale = Math.max(a,b,c);

var vleraMinimale = Math.min(a,b,c);

Math.PI Math.random() .sqrt() .log()

Stringjet22

Driton Haxhiu

Tipet dhe objektet

Stringjet

var stringu = Thojza te dyfishta;

var stringu = Thojza te njefishta;

var stringu = String tjeter;

Thojzat brenda thojzave

var stringu = Slejohen miksimet;

var stringu = Seshte keq;

var stringu = Thenja: Pune pune;

var stringu = Thenja: \ Pune pune\;

Tiparet e stringjeve - length

var stringu = Nje fraze testuese;

console.log(stringu.length); // 18

Shpeshe here ne JavaScript na nevoitet te marrim gjatesine e nje stringu, te cfardo teksti. Per te marrur gjatesine e tekstit, atehere ne perdorim, emrin e variables se stringut, pastaj length. Ne kete rast na shfaqet numri I karaktereve ne ate string.

Metodat e stringjeve - split

var stringu = Nje fraze testuese.;

var fjalet = stringu.split( ); 0 Nje1 fraze 2 testuese.

Ne JavaScript ne mund ta ndajme nje string ne copa dhe me ane te tij krijojme nje varg, pastaj ne mund ta therrasim cilindo pjese te tij. Ne rastin e meposhtem I kemi thene, naj ndaj tekstin per cdo hapsire te bardh qe ka. Stringun mund ta ndajme edhe pas cdo pike, pikepresje apo ndonje karakteri tjeter, duke e vendosur ate brenda kllapave si ne shembullin e meposhtem .split(,) ose .split(.)

Nje string mund ta paraqesmi me te gjitha karakteret e mdha ose te vogla duke perdorur .toUpperCase() dhe .toLowerCase() console.log(stringu.toUpperCase); // NJE FRAZE TESTUESE

Metodat e stringjeve - indexof


var fjalet = stringu.indexOf(fraze);

Ne mund te indeksojme nje pjese te caktuar te teksit pastaj me ate pjese mund te bejme cfardo qe duam. Shembull mund ta paraqesmi ne ekran, mund ti japim veti tjera ne CSS Indeksimi I tekstit ne JS behet sikur me poshte emriStringut.indexOf(FjalaQeIndeksohet)

Metodat e stringjeve - slice


var segmenti = stringu.slice(4,9);

Ne raste te caktuara neve na nevoitet qe te prejme nje cope te caktuar te tekstit, pastaj ta paraqesmi ate. Nje shembull tipik do te ishte permbajtja e nje artikulli te nje uebfaqe, ku ate permbajtje e prejme dhe e vendosim si lajme te shkurter, mund ti presmi vetem disa rreshta te lajmit. Me poshte eshte shembulli se si behet prerja e stringut. Ne rastin tone I kemi thene, kaloj 4 karaktere, duke filluar nga 0, pastaj merri 5 karaktere te tjera, ku fundi I tyre eshte 9. Nese ne rastin tone i themi 0,9. Atehere do te vij fjala Nje fraze

// 0123456789

// fraze - eshte fjala qe ruhet ne variablen segmenti .substring()

.substr()

Ne JavaScript prerja e tekstit mund te behet edhe me .substring() dhe .substr(). Shpesh mund ta gjeni edhe keshtu

Datat 23

Driton Haxhiu

Tipet dhe objektet

Datat dhe koha

var sot = New.Date(); // Data dhe koha aktuale

JavaScript, perveq qe ka objektet e stringjeve dhe ato matematikore, gjithashtu ka dhe objektet e datave. Datat perdoren shume ne programim, ato na nevoiten pothuajse cdo kund

var data = New.Date(1,0,2000); // Data, muaji viti - aktual

var data = New.Date(1,0,2000,0,0,0,0); // Data, muaji, viti, ora, minutat, sekondat aktual

Metodat e datave - get (merr)

var sot = New.Date(); // Data dhe koha aktuale Nese duam te marrim nje metode te dates atehere kemi:

sot.getMonth(); // 0-11 (0-janar -11 dhjetor) sot.getFullYear(); // YYYY (baza nuk eshte 0) sot.getDate(); // 1-31 dite te muajit sot.getDay(); // 0-6 dite te javes(0 == e Diele) sot.getHour(); // 0-23 dite te javes(0 == e Diele) sot.getTime(); // milisekondat qe nga 1/1/1970

Shembull

var diteLindja = new Date(16,5,1987); console.log("Driton Haxhiu ka lindur ne diten e: " ,diteLindja.getDay() );

Nese duam te marrim nje metode te dates atehere kemi:

Metodat e datave - set (shto)

var sot = New.Date(); // Data dhe koha aktuale Nese duam te shtojme nje date, ore muaj, apo cfaredo kohe, kemi:

sot.setMonth(5); sot.setFullYear(2012); sot.setDate(); sot.setDay(); sot.setHour(); sot.setTime();

Krahasimi i datave

var data1 = New.Date(2000,0,1); var data1 = New.Date(2000,0,1); if (data1 == data2){ // False if (data1.getTime() == data2.getTime()){ // vlera do te jete True

Kemi deklaruar dy variabla dhe i krahasojme ato

Pamarr parasysh nese kemi perdor dy ose tri barazime rezultati eshte fals, (d.m.th. Nuk jane te barabarta.). Krej kjo ngase data eshte nje objekt. Krejt cka na duhet neve eshte ti marrim data si dy vlera numerike, pra I marrim dhe i krahasojme me milisekonda.

Hyrje ne OOP Programim I orientuar ne objekte

24Driton Haxhiu

OOP

Hyrje ne OOP Shumica e gjuheve programuese te cilat jane zhvillu ne 30 vitet e fundit jan quajtur Gjuhe te Orentuara ne Objekte. Keshtu nuk ishte gjithmon, para shume viteve eshte programuar ne menyre procedurale ne Assembly, Fortrain, Cobol. Keto gjuhe nuk jane OOP, keto jane gjuhe procedurale dhe programi eshte shkruar ne nje procedure te gjate edhe pse ka permbajt funksione, nen rutina (sub-routin)ose module, te kombinuara ne logjike dhe te dhena dhe krejt keto kan qen te perziera bashk

Pershkrim Ne OOP, krejt kodi I cili eshte skruar ne nje procedure te gjate, eshte ndare ne pjese te cilat quhen Objekte, me nje fjale mund ti quajme edhe mini-programe. Secili objekt reprezenton pjese te ndryshe te aplikacionit dhe secili objekt permban te dhenat e tij (data) dhe logjikat e tij (logics) dhe pastaj ato komunikojne mes veti

Objekti 1

data

logic

Objekti 2

data

logic Objekti

data

logic

Cka permban nje objekt Nje objekt nuk eshte dicka imagjinare, mund te jete cfaredo objekti edhe I botes reale, nje objekt mund te jete nje lojtar, nje llogari bankare, nje veture apo nje shtepi. OOP eshte nje ide, e cila eshte perkrahur ne shume gjuhe programuese. Para se me vazhdu tutje ne duhet ti dijme disa terme

Objekti 1

data

logic

Objekti 2

data

logic Objekti

data

logic

Class (Klasa) Klasa eshte nje skice, nje pershkrim, nje definim, e cila pershkrun nje gje cfare eshte, por nuk eshte vete ajo gje. Shembull mund te jete skica e shtepise. Cdo klase permban dhe definon dy gjera:

Atributet

Sjelljet

Cka definon nje klase? Disa gjera qe permban nje klase jane karakteristikat (atributet) dhe disa jane sjelljet

Class

ATRIBUTET SJELLJET

emri gjatesiapesha gjiniamosha

ecevrapon kercen flet flen

Pershkrimi i nje personi

Class

VETIT METODAT

emri gjatesiapesha gjiniamosha

ecevrapon kercen flet flen

Pershkrimi i nje personi

Atributet dhe sjelljet ne shumicen e gjuheve programuese i gjeni si Tipare (veti) ang.Proporties dhe Sjelljet si Metoda, ang. Methods

Objekti (Object) Njejt sikur e bejme nje skice per shtepi dhe ne nuk e ndertojme ate, ashtu edhe ne programim klasa pa objekt eshte e panevojshme. Pra nje objekt krijohet duke u bazuar ne klase, sikurse nje shtepi qe mund ta ndertojme duke u bazuar ne skice (fig. 1). Jo vetem kaq, sikurse nga nje skice ne mund te ndertojme shume shtepi, ashtu edhe ne programim, prej nje klase mund te krijojme shume objekte. (fig. 2)

Shume shtepi te bazuara ne nje plan (skice) fig.2

Nje shtepi e bazuar ne nje skicefig. 1

Cka definon nje Objekt? Nje objekt nuk eshte asgje tjeter perveqse nje klase e inicializuar me vlera. Nje objekt dallon nga nje objekt tjeter permes tri gjerave: Identiteti ID Vetite Sjelljet

llogariaBankarenumriLlogarisebilancidataHapjestipiLlogarise

hape() mbylle() depozito() terheq()

Dritoni 2173512077 270$ 15/05/2013 Rrjedhse


Trimi 5457585 320$ 04/11/2010 Rrjedhse


Klasa Objektet (instancat)

Objektet ndryshe I gjeme edhe si instanca. Pra shprehja po krijoje nje objekte mund te thuhet po krijoje nje instance.

Pershkrimi i OOP-s? Per te pershkruar programimin e orientuar ne objekte, si shembull me I mire do te ishte trafiku dhe mjetet motorike. Shembull: Nese gjindemi ne qytetin e Ferizajt dhe ne nje moment na kerkon dikush qe te shkojme ne Prishtine. Gjeja e pare qe na vjene ne mendje eshte nje trajektore nga pika A ne piken B, mirepo gjerat sikurse ne jeten reale, ashtu edhe ne programim nuk shkojne ne kete menyre, per te arritur nga pika A ne piken B eshte nje rruge e cila pershkruhet me gjatesi dhe ka nje mori kushtesh per te arritur deri ne destinacionin e duhur.

Ne duhet te percjellim rregulla, momentin qe nisemi sa duhet te vazhdojme drejte, sa kilometra, pastaj ku duhet te kthehemi djathtas, ku majtas. Nese hasim ne semafor dhe semafori eshte ne te kuqen atehere duhet te presim disa caste, nese eshte e gjelbert atehere ka duhet vazhdojme.

Perveq qe duhet ti plotesojme te gjitha keto kushte neve na nevoitet edhe nje mjet udhetimi per te arritur deri tek vendi. Po e zeme qe nuk ekzistone nje mjet i tille ndaj ne duhet ta krijojme se pari.

Gjeja e pare qe bejme kur fillojme te zhvillojme nje ide, eshte skica qe ne programim paraqitet si klase. Njejte sikur nje arkitet qe krijon skicen e tije dhe pastaj duke u bazuar ne te krijon objekte banimi ashtu edhe ne duke u bazuar ne skicen tone krijojme objekte udhetimi.

Nje objekt mund ta pershkruajme me tri gjera: Identiteti, Atributet dhe sjellja (gjerat qe bene objekti). Ne rastin ton mjetit te udhetimit I japim nje identitet, mandej e pershkruajme permes atributeve. I themi se objekti ka nje ngjyre, ka timon, ka apo nuk ka rrota, ka apo nuk ka krah, ka apo nuk ka dritare, ka apo nuk ka drita. Perveq ketyre ne duhet ti vendosim edhe per gjerat qe do te beje mjeti: Leviz apo nuk levize, fluturon apo nuk fluturon, noton apo nuk noton. Permes krejt ketyre ne kemi krijuar skicen qe ne prgramim quhet klase. Ne kuader te kesaje ne krijojme nje ose me shume objekte, ne rastin ton mjete udhetimi si: Veture, Tren, Anije, Aeroplan etj.

Nese na duhet te krijojme nje veture atehere nga skica plotesojme: Atributet dhe sjelljet e tije qe bene nje veture. Vetura mund te kete shume, mirepo ato dallohen permes identitetit, atributet tjera mund ti kene te njejta apo te ndryshme. Per te dalluar nje veture prej nje anije apo nje aeroplani atehere ne tregojme edhe sjelljet e tij. Nese fluturon, atehere nuk eshte veture, nese noton, atehere nuk eshte veture. Pra shpesh here nje objekt mund te kete atribute te njejta me nje tjeter, mirepo sjelljet mund ti kete tjera ose e kunderta.

Ne kete rast ne kemi krijuar nje objekt (mjet udhetimi) dhe mund ta perdorim sa here qe na nevojitet. Per kete arsye programeret krijojne library me mori klasash dhe objektesh dhe ato I perdorin sa here qe ju duhen.

Objektet25

Driton Haxhiu

Tipet dhe objektet

Krijimi i nje objektit Eshte shume e thjeshte per te krijuar nje objekt ne JS. Ne e dime se si te krijojme variabla, dime si te krijojme funksione. Ne krejt cka duhet te bejme, eshte ti fusim ne nje kontinier (vend), te gjitha se bashku.

var emriLojtarit = Driton; var rezultatiLojtarit= 234; var niveliLojtarit = 1;

var lojtari= new Object(); Lojtari.emri = Driton; Lojtari.rezultati = 234; Lojtari.niveli = 1;

Driton 234 1

Driton 234 1

lojtari

Variabla

Ve+t (propor+es)

emri rezulta3 niveli


Krijimi i nje objektit ne rruge te shkurte var lojtari1= { emri:Driton, rezultati:236, niveli:1}

Driton 234 1

lojtari1


var lojtari2= { emri:Lena, rezultati:349, niveli:5}

Lena 349 5

lojtari2


Kemi krijuar dy objekte te ndryshme me veti te ndryshme

console.log(lojtari1.emri); console.log(lojtari1.emri, lojtari1.rezultati,lojtari1.niveli); alert("Lojtari me emrin: " + lojtari1.emri + ", ka mbledhur " + lojtari1.rezulta3 + " pike");

Objekt me i avansuar //Krijojme dy objekte var lojtari1= { emri:Driton, rezultati:236, niveli:1} var lojtari2= { emri:Lena, rezultati:349, niveli:5} function detajeNgaLojtari(){ //paraqit info per secilin lojtar alert("Lojtari me emrin: " + this.emri + ", ka mbledhur " + this.rezulta3 + " pike");

} //krijimi i nje metode lojtari1.shfaqDetaje = detajeNgaLojtari; lojtari2.shfaqDetaje = detajeNgaLojtari; //Therrasmi shfaq detajet lojtari1.shfaqDetaje ();

DOM Document Object Model

26Driton Haxhiu

Tipet dhe objektet

DOM DOM eshte nje ide, e cila na mundoeson qe ti qasemi struktures se HTML-it, XML-it dhe CSS permes JavaScript-es. Nese duma te bejme nje nderyhrje ne nje tak, apo ne nje element te caktuar, atehere permes DOM, ne mund te shkojme sakt ne ate element dhe te bejme ndryshimet perkatese

DOM

DOM

JavaScript dhe DOM Lorem Ipsum dolor sit amet Shqiperia Cameria Kosova

html

head

3tle

body

h1 p ul

li li li

a

html Shembull.html

DOM

DOM

JavaScript dhe DOM Lorem Ipsum dolor sit amet Shqiperia Cameria Kosova

html

head

3tle

body

h1 p ul=menu

li li li

a

var elementet document.getElementById(menu)

Shembull.js javaScript

var elementet document.getElementByTagname(li)

0 O 1 O 2 O

DOM - atributet Permes DOM-it, ne mund te selektojme nje element apo nje vlere te nja atributi te caktuar, mirepo jo vetem kaq. Permes DOM-it ne mund te selektojme edhe nje atribut te HTML-s apo edhe te shtojme nje atribut ne nje element te caktuar.

elementi.getAttribute(img)


elementi.getAttribute(alt)

Cfare realisht mund te bejme me te? Nese I referohemi shembullit te mesiperm, atehere ne kemi marr nje element ku ka nje imazh, pastaj atij ja kemi shtu edhe atributin alt Ne shembullin e mesiperm, ne mund te ndryshojme shtegun e imazhit, po edhe mund te japim nje emer te imazhit ne alternative

JavaScript vs jQuery

document.getElementById(menya).className = menya-kryesore;

Ne kete rast do te gjendet elementi me id menya dhe do ti shtohet klasa menya-kryesore.

$(#menya).addClass(menya-kryesore);

DOM - atributet Permes DOM-it, ne mund te selektojme nje element apo nje vlere te nja atributi te caktuar, mirepo jo vetem kaq. Permes DOM-it ne mund te selektojme edhe nje atribut te HTML-s apo edhe te shtojme nje atribut ne nje element te caktuar.

elementi.getAttribute(img)


elementi.getAttribute(alt)

Cfare realisht mund te bejme me te? Nese I referohemi shembullit te mesiperm, atehere ne kemi marr nje element ku ka nje imazh, pastaj atij ja kemi shtu edhe atributin alt Ne shembullin e mesiperm, ne mund te ndryshojme shtegun e imazhit, po edhe mund te japim nje emer te imazhit ne alternative

Driton Haxhiu

JavaScript vs jQuery

//Shembulli ne JavaScript document.getElementById(menya).className = menya-kryesore;

Ne kete rast do te gjendet elementi me id menya dhe do ti shtohet klasa menya-kryesore.

//Shembulli ne jQuery $(#menya).addClass(menya-kryesore);

html Shembull.html Shqiperia Kosova

html Shembull.html Shqiperia Kosova

Driton Haxhiu

Nyjet (nodes)

html

head

3tle

body

h1 p ul

li li li

a Driton Haxhiu

tekst

tekst tekst tekst

tekst tekst tekst

Nyjet reprezentojne: Elementet, Atributet, Tekstet, Komentet

Tipet e nyjeve: Node.ELEMENT_NODE == 1 Node.ATTRIBUTE_NODE == 2 Node.TEXT_NODE == 3

html Shembull.html

Elementet, atributet dhe tekstet

Shqiperia Cameria Kosova

Driton Haxhiu

ul Id=menu

li li li

Element nodeAdttribute node

Element node Element node Element node

Shqi Camer Kosova

text node text node text node

Me shume nga DOM

document.write(Teksti qe paraqitet)

Driton Haxhiu

document.write(Teksti qe paraqitet)

Miresevini ne javascript Teks3 qe do te ndryshohet func3on funksioniIm() { var elemen3= document.getElementById("paragrafi"); // Gjeje Elemen3n perkates elemen3.innerHTML="Hello JavaScript!"; // Ndrysho permbajtjen } Kliko ketu!

Documents

Permbledhje Gjuhesh Programimi