HTML

1.HTML NGA LIBRI

-<br> -> kalon nje rresht me poshte

- <hr> -> percakton nje vije horizontale mes paragrafeve apo fjalive

- -> per formulat qe kane 2 si indekse poshte

--> per fuqine prsh,indeks lart

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is_subscript and ^superscript</p>

-<em>..</em> -> to emphasis ,e ben shkrimin te pjerret .. vendos para dhe pas nje fjale

-<!-- .. - > =percakton koment

-<meta> -> eshte Brenda head te faqes dhe permban info per te gjithe faqen.Nuk duket nga perdoruesi por jep te dhena mbi
faqen prsh kush e ka krijuar,eshte apo jo I prekur nga koha etj.Atributet e tij: description,keywords etj . Metadata zakonisht
perkufizion titullin e dokumentit,bashkesine e karaktereve,stilet,linket,script dhe info te tjera meta

-Taget per HEAD: <title>, <style>, <meta>, <link>, <script>, and <base>.

-Linku : <a href = url > anchor </a> ( a=shenjester,ancor)

1.Per nje faqe : <a href=http://www.fshn.edu.al target=_blank>Vizitoni FSHN! </a> (** _blank tregon qe linku do

te hapet ne nje tab te ri )

2.Mes folderave: <a href= DB Provim.html> Provimi I DB </a>

3.Per email: < a href=mailto: emermbimer@fshnstudent.info > email me </a>

-FONT->tipi shkrimit

font-style:italic; -> shkrimi I pjerret

-Frame : <framset> -> nje bashkesi framesh

<frame> ->nje nen-dritare(nje frame)

- Tabelat : <table>

<th> -> koka e nje tabele,emrat e nje kolone ose rreshti pra del me bold sesa elementet poshte

** <th></th> ->nqs duam nje qelize bosh (keshtu behet dhe per tr e td ns I duam bosh)

<tr> -> percakton nje rresht te tabeles

<td> -> nje qelize te tabeles * duhet te jene brenda nje <tr> *(mbushja e tab me elemente)

colspan=2->per te marre prsh 2 kolona && rowspan=2 per te marre 2 rreshta

<caption> -> percakton nje caption t tabeles,emer I tabeles qe nuk perfshihet Brenda ne tabele

<col> -> percakton vlerat attribute te nje apo disa kolonave ne tabele

<table border= 1 >-> per te percaktuar kufijt se nese nuk vihet ska vija mes kolonave dhe rreshtave

<table border=1 cellpadding=4> ->percakton hapesira bosh mes permbajtjes dhekufijve(hapesira nga te
4 anet dmth qe e rrethon)

<table border=1 cellspacing=3> ->percakton hapesiren boshe mes qelizave(si tabelet n word qe jane
vetem vizat pa hapesira fare)

-Lista : <ol> -> percakton nj liste te renditur( ka tipe t ndryshme si prsh <ol type=a> // <ol type=A >// <ol type =I>

<ul> ->percakton nj liste jo te renditur ( ka 3 tipe <ul type=disc> // <ul type=circle// <ul type=square> )-bullets

<li> ->percakton nj element te listes *Brenda <ul> ose <ol>*

<dl> ->percakton nje liste te definuar

-Lista e fshehur : Prsh : I.Bodies

A.Planets

I.Silicon Crust

a.Earth

KODI : <ol type=I>

< li > Bodies <li>

<ol type=A>

<li> Planets </li> .

-Format: <form> ( type,name,value)

1. <input> ->fushe input,Elementet

<input type=text name=Emri>

<input type=submit value=Dorezo>
<input type=password name=Fjalekalim>
<input type=radio name=gjinia>
<input type=checkbox name=Jam dakord>
<input type=button name=kliko!>
<input type=email name=mail>
<input type=month name=datelindja muaj>
<input type=number name=sasia min=1 max=10>
<input type="url" name="website" />
<input type="search" name="search" />
<input type="search" name="search" placeholder="Enter keyword" />

**Atributet e inputit:

<input type=text name=emri value=Daniela>

<input type=text name=emri value=DM readonly>
<input type=text name=emri disabled>
<input type=text name=emri size=10>
<input type=text name=emri maxlength=20>
<input type=text name=emri autocomplete=on>
<input type=text name=emri min=10 max=35>
<input type=text name=emri placeholder=first name here>

2. TEXTAREA :: <textarea name=Koment cols=10 rows=20> ->siperfaqe per tekst

3.LISTA :: <select name=pozicioni > </select>-> percakton nje list ku mund te perzgjidhet

<option value=IT> </option>->percakton nje opsion ne nje drop down box

4. GRUPIMI I EL SI CV :: <form>

Hapi 1:<fieldset> ->perdoret per te grupuar elemente qe kane lidhje me njeri tjt ne nje forme
Hapi 2: <legend> CV </legend>
Hapi 3: </fieldset> </form>

5. UPLOAD FILE < input type="file" name="user-song" /><br />

<input type="submit" value="Upload" />

-Imazhet : <img src = emerskedari.jpg width=40% height=80% />

-Stili: <style> ->nje lloj stili ne document

<p style=text-decoration:underline>
<p style=text-transform:uppercase>
<p style="font-size:50px">This is a paragraph.</p>

<link> ->percakton relatat ndermjet 2 dok te linkuar

<div> ->percakton nje ndarje/seksion ne nje document

-Grupimi I nje bllok elementesh [ DIV ]:

1. <body>

<div id="header"> </div>

<div class=qyteti></div>

-Audio:

<audio src="audio/test-audio.ogg" controls autoplay> </audio>

-Video:

<video src="video/test-video.mp4" preload controls loop > .</video>

-Atributet HTML:

Attribute Description

alt Specifikon nje text alternative per nje imazh kur imazhi nuk shfaqet

disabled Specifikon qe nje el input nuk mund te aktivizohet

href Specifikon nje URL (adrese webi) per nje link

id Specifikon nje Id unike per nje element

src Specifikon adresen url per nje imazh

style Specifikon nje style inline te CSS per nje element

title SPecifikon nje element ekstra per nje info

-HTML5:
semantic elements like <header>, <footer>, <article>, and <section>.

o Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
o Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
attributes of form elements like number, date, time, calendar, and range.
graphic elements: <svg> and <canvas>.

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)

<svg> Draw scalable vector graphics

multimedia elements: <audio> and <video>.

-HTML Javascript
->Per te selektuar nje element HTML,Javascript zakonisht perdor metoden

document.getElementBy(id)

-PRSH : <body>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

</body>

-PRSH : KUR SHTYP BUTONIN TE TREGON OREN DHE DATEN E TANISHME

<body>

<h1>My First JavaScript</h1>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Click me to display Date and Time.</button>

<p id="demo"></p>

</body>

-PRSH: JS NDRYSHON KONTEKSTIT N KLIKIM TE BUTONIT

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "Hello JavaScript!";

}

</script>

</body>

</html>

-PRSH : NDEZJA DHE FIKJA E LLAMBES

<!DOCTYPE html>

<html>

<body>

<script>

function light(sw) {

var pic;

if (sw == 0) {

pic = "pic_bulboff.gif"

} else {

pic = "pic_bulbon.gif"

document.getElementById('myImage').src = pic;

</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

-PRSH: NDRYSHIMI I MADHESISE SE SHKRIMIT NE NJE PARAGRAF

<!DOCTYPE html>

<html>
<body>

<p id="demo">Hello World!</p>

<script>

document.getElementById("demo").style.fontSize = "40px";

</script>

</body>

</html>

-HTML SVG
-SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

-SVG Shapes

SVG has some predefined shape elements that can be used by developers:

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

-PRSH:RRETHI (MBUSHJA BRENDA E VERDHE,VIZA E JASHTME JESHILE)

Code explanation:

The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's
center is set to (0,0)
The r attribute defines the radius of the circle

<!DOCTYPE html>

<html>

<body>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

-PRSH: DREJTEKENDSHI( I MBUSHUR ME BLU,VIZAT JASHT TE ZEZA)

Code explanation:

The width and height attributes of the <rect> element define the height and the width of the rectangle
The style attribute is used to define CSS properties for the rectangle
The CSS fill property defines the fill color of the rectangle
The CSS stroke-width property defines the width of the border of the rectangle
The CSS stroke property defines the color of the border of the rectangle

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="100">

<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

-PRSH: ELIPSI ( I VERDHE BRENDA,ME VIZE LEJLA)

The cx attribute defines the x coordinate of the center of the ellipse

The cy attribute defines the y coordinate of the center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius
-HTML EVENTS
1-onload

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction() {

alert("Page is loaded");

</script>

</head>

<body onload="myFunction()">

<h1>Hello World!</h1>

</body>

</html>

2-onclick ( shtyp butonin dhe posht saj shfaqet teksti hello world )

<!DOCTYPE html>

<html>

<body>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "Hello World";

</script>

</body>

</html>
3-onmousedown ose onmouseup( kur je mbi tekst ndryshon ngjyra,kur heq mousin ka ngjyr tjt

<!DOCTYPE html>

<html>

<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The
function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The
mouseUp() function sets the color of the text to green.

</p>

<script>

function mouseDown() {

document.getElementById("p1").style.color = "red";

function mouseUp() {

document.getElementById("p1").style.color = "green";

</script>

</body>

</html>

4-onmouseover dhe onmouseout (kur ke mousin siper imazhin ndryshon madhesi,kur e heq behet si eshte)

<!DOCTYPE html>

<html>

<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32"

height="32">

<p>The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.</p>

<p>The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height
and width of the image back to normal.</p>

<script>

function bigImg(x) {

x.style.height = "64px";
 x.style.width = "64px";

function normalImg(x) {

x.style.height = "32px";

x.style.width = "32px";

</script>

</body>

</html>
2.USHTRIME SHKOLLE

1- 40% 40% 20%

Emer Mbiemer Nota

<!doctype html >

<html>

<head>

<title > SM </title>

</head>

<body>

<table width="100%" border="1">

<tr>

<th width="40%">Emer</th>

<th width="40%">Mbiemer</th>

<th width="20%">Nota</th>

</tr>

<tr>

<td width="40%">Test 1</td>

<td width="40%">Test 2</td>

<td width="20%">8</td>

</tr>

</table>

</body>

</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2-

Emer Mbiemer Nota

Daniela Muhaj 8

<!doctype html >

<html>
<head>

<title > SM </title>

</head>

<body>

<table width="30%" border="1">

<tr>

<th>Emer </th>

<th>Mbiemer </th>

<th> Nota </th>

</tr>

<tr>

<td colspan="2"> Daniela Muhaj </td>

<td> 8 </td>

</tr>

</table>

</body>

</html>

3-

1
Telefon
2

<!doctype html >

<html>

<head>

<title > SM </title>

</head>

<body>

<table width="30%" border="1">

<tr >

<td rowspan ="2">Telefon </td>

<td>1</td>

</tr>
<tr rowspan="2">

<td> 2 </td>

</tr>

</table>

</body>

</html>

4-
FSHN
Emer Mbiemer Nota
Daniela Muhaj 10
Anxhela Lupo 8
SM
Lenda:
ADB

<!doctype html >

<html>

<head>

<title > SM </title>

</head>

<body>

<table width="30%" border="1">

<tr>

<td colspan="3"><center> FSHN </center> </td>

</tr>

<tr >

<td>Emer</td>

<td>Mbiemer</td>

<td>Nota</td>

</tr>

<tr>

<td colspan="2">Daniela Muhaj </td>

<td> 10 </td>

</tr>
<td colspan="2"> Anxhela Lupo </td>

<td> 8 </td>

</tr>

<tr>

<td rowspan="2" colspan="2"> Lenda: </td>

<td> SM </td>

</tr>

<tr>

<td> ADB </td>

</tr>

</table>

</body>

</html>

5- Krijo nje form si me poshte ku Gjinia te jete ne tipin radio, Grupi te jete ne formen e listes dhe Lenda te dali e plotesuar,Cv
te jete ne pdf , Foto te jete ne jpg dhe me pas te kete nje checkbox ku do te pranohen ose jo te dhenat e mesiperme dhe nje
koment.Ne fund submit ose kliko

<body>

<form>

Emer:

<input type="text" name="Emer"/> <br/>

Mbiemer:

<input type="text" name="Mbiemer"/> <br/>

Gjinia:

<input type="radio" name="Gjinia" value="F">F

<input type="radio" name="Gjinia" value="M"> M </br>

Grupi:
<select name="Grupi">

<option value ="A1">A1</option>

<option value ="A1">A2</option>

<option value ="A1">B1</option>

<option value ="A1">B2</option>

</select> </br>

Lenda:

<input list ="Lenda">

<datalist id="Lenda">

<option value="SM">

<option value="ADB">

</datalist> </br>

CV:

<input type="file" accept="pdf"></br>

Foto:

<input type="file" accept="jpg"></br>

Dakord:

<input type="checkbox" value=" "></br>

Koment:

<textarea name="koment" rows=150 cols=10/></textarea><br>

<input type="button" value="Kliko"/>

</form>

</body>

6-

<!doctype html >

<html>

<head>

<title > SM </title>

</head>

<body>

<h4>Tituj ne tabela : </h4>

<table border="1">

<tr>

<th> Kolona 1 </th>

<th> Kolona 2 </th>

<th> Kolona 3 </th>

</tr>

<tr>

<td> per te dhenat rreshti 1 kolona 1 </td>

<td> per te dhenat rreshti 1 kolona 2 </td>

<td> per te dhenat rreshti 1 kolona 3 </td>

</tr>

</table> </body> </html

7-

<html>

<head>

<title>Forms</title>

</head>

<body>

<form action="http://www.example.com/review.php" method="get">

<fieldset>

<legend>Your Details:</legend>

<label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br />

<label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br />

</fieldset><br />

<fieldset>

<legend>Your Review:</legend>

<p>

<label for="hear-about">How did you hear about us?</label>

<select name="referrer" id="hear-about">

<option value="google">Google</option>

<option value="friend">Friend</option>

<option value="advert">Advert</option>

<option value="other">Other</option>

</select>

</p>

<p>

Would you visit again?<br />

<label><input type="radio" name="rating" value="yes" /> Yes</label>

<label><input type="radio" name="rating" value="no" /> No</label>

<label><input type="radio" name="rating" value="maybe" /> Maybe</label>

</p>

<p>

<label for="comments">Comments:</label><br >

<textarea rows="4" cols="40" id="comments"></textarea>

</p>

<label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br />

<input type="submit" value="Submit review" />

</fieldset>

</form>

</body>

</html>
8-Nderto tabelen
CSS
1.CSS NGA LIBRI

-Implementohet ne 4 menyra : 1.Percaktimet (div,id,class)

a. Class

<p class = paragrafi 1 > dhe ne CSS : .paragrafi1{text align:center }

permbajta <p id=shkrim1> dhe ne CSS : #shkrim1{color:green }

Padding(mbushja) 2.Fleta e stilit te jashme(folder tjeter)

Shkruhet si nje folder tjt ne nje editor teksti gjithe kodi CSS dhe e lidh me kryesorin me ane te
Margin < head > <link rel=stylesheet text =text/css href=stili.css /> </head>
Kufiri
3.Fleta e stilit e brendshme ( Brenda tagut <head>)

Duhet te perdoret kur nje document I vetem ka nje stil unik

< head> <style type=text/css> </style> </head>

4.Stili Brenda rreshtit( Brenda nje elementi te HTML )

<p style=color:blue; margin-left:20px> </p>

-Sintaksa:

elementi HTML { cilesia : vlera}

***Nqs vlera eshte me shume se nje fjale vendoset ne thonjeza prsh : body:{ font family :sans serif}

-Padding :

<head>

<style>

p{

border: 1px solid powderblue;

padding: 30px;

</style>

</head>
-Margin :

<head>

<style>

p{

border: 1px solid powderblue;

margin: 50px;

</style>

</head>

-Cilesite e sfondit

Background(-color, -image, -repeat ,-position)

Background-image: url("images/pattern.gif");

Background-position( top left,top right,top center etj )

Background-repeat( repeat, no-repeat)

-Cilesite e tekstit:

Color

Direction

Line-height

Letter-spacing

Text-align

Text-decoration : underline/none;

Text-shadow : 3px 2px red;

Text-transform :uppercase/lowerspace

-Cilesite e llojit te shkrimi( Font):

Font

Font-family : times new roman

Font-size : 40px/50%;

Font-stretch
 Font-style : normal/italic

-Cilesite e border:

Border color

Border-bottom(-color,-width,-style)

Border width

Border right( ose left )

Border style

Border top

-Cilesite e Kontureve:

Outline

Outline-color

Outline-style

Outline-width

-Cilesite e margin(hapesira rreth elementeve)

Margin

Margin-bottom

Margin-left

Margin-right

Margin-top

-Cilesite e dimensionit

Height

Line-height

Max-height(min)---gjatesia

Max-width(min)--- gjeresia

-Cilesite e pozicionimit

Bottom
Clip

Left

Position

Right

Top

Vertical-line

-Teknika per stilizim

1)Klasat (.)

2)ID(#)

Prsh : <head>

<style>

#test1{

Color:red;}

.test2{

Color:green;}

<body>

<p id=test1>Test 1</p>

<p class=test2> Test 2 </p>

<p> Text 3 </p>

</body>

-Pseudo klasat : a:link->link I pavizituar

a:visited ->link I vizituar

a:hover -> mouse mbi link ( vjen mbas a:link dhe a:visited)

a:active -> link I zgjedhur ( vjen pas a:hover )

Prsh : 1) a.ekuqe : visited {color: red }

<a class= ekuqe href=css_syntax.asp>CSS </a> = pra ns ky link eshte vizituar ai do te shfaqet me
te kuqe
 2) Nje stilizim per 1 paragraf I cili ne momentin qe kalon anash paragrafit,permasat,paragrafet te shkojne
20 px ndersa fonti arial

Zgjidhje

P : hover { font_size:20 px;

Max_height: 20px;

Max_width:20px;

Font_family:arial;

{
2.USHTRIME SHKOLLE

1-Te krijohet 1 faqe html e cila ka nje tabele,1 imazh dhe nje paragraph.Te krijohet klasa CSS per imazhin e cila ka keto
attribute max width dhe max height eshte 100 px,pozicioni ne qender.Per tabelen,te krijohet nje ID e cila ka keto
attribute,border 1 px solid black.Madhesia e tab te jete 100%,wordspace 5px ndersa per paragrafin te krijohet mundesia qe ne
hover te jete tipi I shkrimit arial dhe madhesia e shkrimit 14 px

Zgjidhje

<!doctype html >

<html>

<head>

<style type="text.txt">

.imazhi1{

max_width:100px;

max_height:100px;

position:center;

#tab{

border: 1px solid black;

width:100%;

word-spacing:5px;

p:hover {

font_size:14px;

font_family:arial;

</style></head>

<body>

<table id="tab">

<tr>

<td> 1 </td>

<td> 2 </td>

</tr>

</table>

<img src=" " class="imazhi1"/>

<br/>

<p> Tekst prove </p>

</body>

</html>

2-Ndertoni nje faqe HTML qe ka nje buton ne mes te faqes,ngjyra e background te jete blu dhe shkrimi I butonit kliko te jete I
bardhe.Ne momentin qe mousi vendoset mbi buton,background te behet I bardhe dhe shkrimi I butonit te behet I zi.

Zgjidhje

<!doctype html>

<html>

<head>

<style>

body {

background-color: lightblue;

.button{

position:center;

color:white;

.button:hover{

background-color:white;

color:black;

</style>

</head>

<body>

<button class="button"> Kliko! </button>

<input type="button" class="button" value="kliko!/>

</body>

</html>
JAVASCRIPT
PJESA E PARE: USHTRIME NGA LIBRI

1-Kodi ne pjesen koka

<!doctype html>

<html>

<head>

<script>

Function funksionim(){

Document.write(skripti im I pare ne javascript);

</script> </head>

<body>

<h1> Faqja ime e pare web </h1>

<p id=Demo > Permbajtja e paragrafit kur faqja ngarkohet dhe funksioni javascript nuk eshte ekzekutuar akoma .</p>

<button type=button onclick=funksionim()> Kliko </button>

</body>

</html>

2-Metoda get ElementById

<!doctype html>

<html>

<head>

<script>

function funksionim(){

X= document.getElementById(demo);

x.innerHTML=Ndryshova permbajtjen me JS; }

</script>

<body>

<h1> Faqja ime e pare web </h1>

<p id=Demo > Permbajtja e paragrafit kur faqja ngarkohet dhe funksioni javascript nuk eshte ekzekutuar akoma .</p>

<button type=button onclick=funksionim()> Kliko </button>

</body>

</html>

3-Ne klikim te butonit do te kemi nje pershendetje bazuar ne kohen/oren

<!doctype html>

<html>

<body>

<p> Klikoni butonin dhe do te keni nje pershendetje bazuar n kohe. </p>

<button onClick=Koha()> Kliko! </button>

<p id=demo> </p>

<script>

Function koha(){

Var x= ;

Document.getElementById(demo).innerHTML=x;

Var koha= new date().getHours();

If(koha<20){

X=Miredita;}

Else {

X=Mirembrema; }

</script> </body> </html>

4-Kutia alert

<!doctype html>

<html>

<head> </head>

<body>

<input type=button onclick=shfaq_alert() value=Shfaq kutine alert/>

<script>

Function shfaq_alert(){

Alert(jam nj kuti alert!); }

</script> </body> </html>

5-Kutia konfirmim(shfaqet kjo kuti dhe perdoruesi duhet te shtype ok ose cancel per te vazhduar me tej)

<!doctype html>

<html>

<head>

<script>

Function shfaq_konfirmim(){

Var r=confirm(shtyp nje buton);

If(r==true){

Alert(Ju shtypet ok!); }

Else{

Alert(Ju shtypet cancel!);}

</script>

</head>

<body>

<input type=button onclick=shfaq_konfirmim() value=Shfaq kutine konfirmimit />

</body>

</html>

6-Kutia prompt ( kjo kuti perdoret zakonisht ns duam q perdoruesi te fuse nje vlere perpara hyrjes n faqe)

<!doctype html>

<html>

<head>

<script>

Function shfaq_prompt(){

Var emer=prompt(Ju lutem vendosni emrin tuaj, Emer Mbiemer);

If(emer !=null && emer != ){

Document.write(Pershendetje + emer + Si jeni sot?); }

</script> </body> </htlml>

OBJEKTET NE JAVA SCRIPT

1.CILESI

2.METODE
HTML DOM
Eshte standarti per aksesimin e elementeve html.DOM eshte nje nderfaqe e pavarur nga gjuha dhe platforma e cila jeon
programet dhe skriptet te hyjne dhe te perditesojne ne menyre dinamike permbajtjen,strukturen dhe stilin e nje dokumenti.

1-get Element By Id

<!doctype html>

<html>

<body>

<p id=intro> Pershendetje! </p>

<p> Ky shembull ilustron metoden getElementById </p>

<script>

X=document.getElementById(intro);

Document.write(<p> Tekstri I paragrafit me atributin id + x.innerHTML +</p>);

</script>

</body>

</html>

2-get Elements By Tag Name

<!doctype html>

<html>

<body>

<p> Pershendetje! </p>

<div id=kryesore>

<p> Ky shembull ilustron metoden getElementByTagName </p>

</div>

<script>

Var x=document.getElementById(kryesore);

Var y=x.getElementsByTagName(p);

Document.write(Permbajtja e parag t pare Brenda el me atributit me id kryesore eshte + y[0].innerHTML);

</script>

</body> </html>
3-get Elements By Class Name

<!doctype html>

<html>

<body>

<p> Pershendetje! </p>

<div id=kryesore>

<p class=paragraph> DOM </p>

<p class=paragraph ky eshte shembull qe ilustron metoden getElementsByClassName </p>

</div>

<script>

Var x=document.getElementById(Kryesore);

Var y=x.getElementsByClassName(paragraph);

Document.write(Paragrafi I pare Brenda kryesore eshte+y[0].innerHTML);

Document.write(Paragrafi I dyte Brenda kryesore eshte+y[1].innerHTML);

</script>

</body>

</html>

4-ndryshimi I permbajtjes se paragrafit

<!doctype html>

<html>

<body>

<p id=p1>Pershendetje </p>

<script>

Document.getElementById(p1).innerHTML = Tekst I ndryshuar!;

</script>

<p>Paragrafi I mesiperm do te ndryshohet nga nje script </p>

</body>

</html>
5-ndryshimi I permbajtjes se titullit kryesor

<!doctype html>

<html>

<body>

<h1 id=header> TItulli kryesor </h1>

<script>

Var element=document.getElementById(header);

Element.innerHTML=Titulli kryesor I ri;

</script>

<p>Titulli kryesor u ndryshua ne Titull kryesor I ri </p>

</body>

</html>

6-ndryshimi I atributit

<!doctype html>

<html>

<body>

<img id=imaz src=Daniela.jpg width=160 height=120>

<button onclick=ndrysho()> Ndrysho </button>

<script>

Function ndrysho() {

Document.getElementById(imazh).src=foto.jpg;

</script>

<p> Imazhi original ishte Daniela.jpg,por skripti e ndryshoi ate ne foto.jpg </p>

</body>

</html>

7-Ndryshimi I cilesive se stileve

<!doctype html>

<html>
<body>

<h1 id=id1> Titulli kryesor </h1>

<button type=button onclick=document.getElementById(id1).style.color=red> Kliko ! </button>

</body>

</html>

8-Ndryshimi I cilesise se paragrafeve

<!doctype html>

<html>

<body>

<p id=p1> Pershendetje! </p>

<p id=p2>Pershendetje! <.P

<script>

Document.getElementById(p2).style.color=blue;

Document.getElementById(p2).style.fontFamily=arial;

Document.getElementById(p2).style.fontSize=larger;

</script>

<p> Paragrafi I dyte ne radhe eshte ndryshuar nga nje script </p>

</body>

</html>

9-Ngjarja OnClick

<!doctype html>

<html>

<head>

<script>

Function ndryshimteksti(id){

Id.innerHTML=oops!;

</script>

</head>
<body>

<h1 onclick=ndryshimteksti(this) > Kliko! </h1>

</body>

</html>

10.Ngjarja onLoad

<!doctype html>

<html>

<head>

<script>

Window.onload=shfaq_prompt;

Function shfaq_prompt(){

Var emer=prompt(Ju lutem vendosni emrin tuaj, Emer Mbiemer);

If( emer != null && emer !=){

Document.write(pershendetje + emer+ Si jeni sot?); }

</script>

</head>

<body>

</body>

</html>
JAVASCRIPT
PJESA E DYTE: PERMBLEDHJA NGA TUTORIALE

1- JS mund te ndryshoje :
a. HTML CONTENT -> document.getElementById(demo).innerHTML=Hello! ;
b. HTML ATRIBUTET ->document.getElementById(myimage).src=fotoendryshuar.jpg ;
c. HTML STILET -> document.getElementById(demo).style.fontSize=25px;

2- JS Head

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

3- JS Body
<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

4- JS I jashtem

<!DOCTYPE html>
 <html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

5- JS nxjerr perfundime ne 4 menyra:

a. Duke shkruar Brenda nje elementi HTML innerHTML
-Kete e ben nepermjet : document.getElementById(id)
b. Duke shkruar Brenda nje output HTML document.write()
c. Duke shkruar nje kuti alert window.alert()
d. Duke shkruar Brenda nje console .. console.log()

a)Shembulli me innerHTML Shuma e numrave

a/1)-Shembulli me innerHTML me bllok kodi

a/2)-Shembulli me innerHTML me vektore

 FUNKSIONET

PRSH 1 : Shumezimi I dy numrave

PRSH 2: GJEJ MAX E NUMRAVE

 OBJEKTET NE JAVASCRIPT SHKRUHEN MES { }

PRSH :

-Cdo objekt ka karakteristika dhe metoda

Karakteristikat -> emri:vlera

Metoda -> eshte veprimet qe perfomohen tek objektet

-Krijimi I Objektit
 EVENTET
-Eventet jane gjerat qe I ndodhin elementeve te HTML
-Nje event HTML mund te jete dicka qe faqja e internetit ben ose dicka qe perdoruesi ben.
-Disa shembuj te eventeve te HTML : 1) Nje faqe HTML qe ka mbaruar se ngarkuari(load)
2) nje fushe inputi ka ndryshuar
3)nje buton klikohet
-Zakonisht,kur nje event ndodh,ti do duash qe te besh dicka.Javascript te ndihmon ty te ekz nje kod nuk eventet
ndodhin.HTML lejon atributet e atyre qe merrren me eventet,me Kodin e JS, qe te shtohen tek elementet e HTML.

Shembulli 1: Ne klikim te butonit marrim daten e sakte

<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>

-Lista e disa prej eventeve:

onchange Nje element HTML ka ndryshuar

onclick Kur klikon nje element HTML

onmouseover Kur kalon mousi siper nje element HTML

onmouseout Perdoruesi leviz mousin jasht nj elementi HTML

onkeydown Perdoruesi shtyp nje shkronje nga tastiera

onload Faqja ka ndaluar se loading

 STRING

SHEMBULLI 1: STRINGUN HELLO WORLD COJE NE VARIABLIN TXT

-Per gjatesine : <script>

var txt = "Hello World!";
document.getElementById("demo").innerHTML = txt.length;
</script>

SHEMBULLI 2: NE KLIKIM TE BUTONI SHKRIMI QE ISHTE BEHET ME SHKRONJA TE MEDHA ( txt.toUpperCse() )

 SHEMBULLI 3:GJEN POZICIONIN E FJALES WORLD TE PARE QE GJEN NE TEKST ( txt.indexof() )

IF..ELSE
SHEMBULLI 1: KLIKO BUTONIN QE TE GJEJ PERSHENDETJEN E DUHUR NE BAZE TE ORES
ZGJIDHJE
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>
 FOR
SHEMBULLI 2

JS FORM VALIDATION
SHEMBULLI 1: SHKRUAJ NJE NR NGA 1 DERI TEK 10

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if ( x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
 JAVASCRIPT DOM
1.Si te ndryshojme permbajtjen e nje elementi HTML

2.Si te ndryshojme stilin ( CSS ) e nje elementi HTML

3.Si te reagojme ne nje event HTML DOM

4.SI te shtojme dhe te heqim element nga HTML

HTML DOM eshte nje model objekt standart dhe nje nderfaqe programuese e HTML.Jep:

Elementet e HTML si objekte.

Te dhenat e elementeve te HTML.
Metodat per te aksesuar te gjithe elementet e HTML.
Eventet per te gjithe elementet e HTML.

Pra,HTML DOM eshte nje standar se si te marrim,ndryshojm,shtojme,fshijme elementet e HTML.

JS HTML DOM METODAT

-Metodat = Jane aksionet qe ne bejme (getElementById)
-Properties = Vlerat qe mund te marrim apo ndryshojme (innerHTML )
-Ne DOM,elementet e HTML jane perkufizuar si objekte

JS HTML DOM Document METODAT

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)
 Ndryshimi I elementeve HTML
1. Element.innerHTLM = new html content
2. Element.attribute = new value (Atribute si name,length etj)
3. Element.setAttribute(attribute,value)
4. Element.style.property=new style (property si color,fontSize,fontColor)
Shtimi dhe fshirja e elementeve
1. document.createElement(element)
2. document.removeChild(element)
3. document.appendChild(element) shtimi
4. document.replaceChild(element)
5. document.write(text) te shkruash n nj output HTML
Gjetja e elementeve te HTML
1.By id
2. By tag name
3.by class name
4.by css selectors
5.Nga koleksioni I objekteve HTML

Shembulli 1: BY ID
Shembulli 2: BY TAG NAME

Pa div

Me div

Shembulli 3: BY CLASS NAME

SHEMBULLI 4: BY FORM COLLECTION Eshte forma dhe ne klikim te butonit shfaqen ato qe ke plotesuar posht ne nje
paragraph

Ndryshimi I permbajtjes se HTML : document.getElementById(id).innerHTML = new HTML

Ndryshimi I vleres se atributeve : document.getElementById(id).attribute = new value

Prsh : document.getElementById("myImage").src = "landscape.jpg";

Ndryshimi I stilit : document.getElementById(id).style.property = new style

Prsh : document.getElementById("p2").style.color = "blue";

DOM ANIMIMET
SHEMBULLI 1 : NE KLIKIM TE BUTONI KATRORI LEVIZ NGA FILLIMI QE ISHTE NE PIK E FUNDIT FARE

<!DOCTYPE html>

<html>

<style>

#container {

width: 400px;

height: 400px;

position: relative;

background: yellow;

}
#animate {

width: 50px;

height: 50px;

position: absolute;

background-color: red;

</style>

<body>

<p>

<button onclick="myMove()">Click Me</button>

</p>

<div id ="container">

<div id ="animate"></div>

</div>

<script>

function myMove() {

var elem = document.getElementById("animate");

var pos = 0;

var id = setInterval(frame, 5);

function frame() {

if (pos == 350) {

clearInterval(id);

} else {

pos++;

elem.style.top = pos + 'px';

elem.style.left = pos + 'px';

}}

}</script></body></html>
DOM EVENTET
SHEMBULLI 1 : KUR KLIKON MBI NJE FUSHE NDRYSHON NGJYRA E BACKGROUNDIT TE ASAJ FUSHE

SHEMBULLI 2: KUR CON MOUSIN MBI TEKST NDRYSHON NGJYRA E TEKSTIT

JQUERY = LIBRARIA E JAVASCRIPT
The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Basic syntax is: $(selector).action()

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

JQUERY SELECTORS

-SELEKTUESI I NJ ELEMENTI : You can select all <p> elements on a page like this: $("p")

- SHEMBULLI 1 : MUND TE SELEKTOSH DHE TI FSHEHESH PARAGRAFET KESHTU

-SELEKTUESI I #ID : To find an element with a specific id, write a hash character, followed by the id of the HTML element:

$("#test") [ PS EDHE EDHE E KLASES ESHTE PO NJESOJ NDRYSHON # NGA . ]

SHEMBULLI 1: KLIKON NE BUTON DHE FSHIN VETEM NJE PARAGRAF ME ID E DHENE

JQUERY EVENTS

SHEMBULLI 1: NESE KLIKON MBI PARAGRAF 1 HER,FSHIHET AI PARAGRAF

[Ps : edhe per double klik eshte njesoj vetem qe sintaksa eshte : $(p).dblclick(function(){ ]
 JQUERY ANIMATION

SINTAKSA:

$(selector).animate({params},speed,callback);

SHEMBULL 1: NE MOM QE SHTYP BUTONIN,KATRORI LEVIZ NE QENDER

USHTRIM PER VALIDIM

We will take an example to understand the process of validation. Here is a simple form in html
format.

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!-// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>

<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>

<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>

<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>

<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td> </tr></table></form</body></html>

SHEMBUJ JAVASCRIPT
 1- JS HTML DOM - CSS Manipulation

SHEMBULLI 1: KUR CON MOUSIN LART MBI KATROR,NDRYSHON NGJYRA E BACKGROUNDIT TE FAQES NE BAZE TE
NGJYRES SE KATRORIT

<!DOCTYPE html>

<html>

<head>

<script>

function bgChange(bg) {

document.body.style.background = bg;

</script>

</head>

<body>

<h2>Change background color</h2>

<p>Mouse over the squares!</p>

<table style="width:300px;height:100px">

<tr>

<td onmouseover="bgChange(this.style.backgroundColor)"

onmouseout="bgChange('transparent')"

style="background-color:Khaki">

</td>

<td onmouseover="bgChange(this.style.backgroundColor)"

onmouseout="bgChange('transparent')"

style="background-color:PaleGreen">

</td>

<td onmouseover="bgChange(this.style.backgroundColor)"

onmouseout="bgChange('transparent')"

style="background-color:Silver">
 </td>

</tr>

</table></body></html>

2- JS HTML INPUT

SHEMBULLI 1- DISABLED THE BUTTON

<!DOCTYPE html>

<html>

<body>

<form>

<input type="button" id="btn01" value="OK">

</form>

<p>Click the "Disable" button to disable the "OK" button:</p>

<button onclick="disableElement()">Disable</button>

<script>

function disableElement() {

document.getElementById("btn01").disabled = true;

</script>

</body>

</html>

SHEMBULLI 2: VLERAT E FORMES TE AFISHURA NE NJE PARAGRAF

<!DOCTYPE html>
<html>

<body>

<form id="frm1" action="/action_page.php">

First name: <input type="text" name="fname" value="Donald"><br>

Last name: <input type="text" name="lname" value="Duck"><br><br>

<input type="submit" value="Submit">

</form>

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {

var x = document.getElementById("frm1");

var text = "";

var i;

for (i = 0; i < x.length ;i++) {

text += x.elements[i].value + "<br>";

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

SHEMBULLI 3: TE JAPESH VLEREN E SELEKTUAR NE NJE DROP DOWN LIST

SHEMBULLI 4: TE FSHIN NJE VLERE TE SELEKTUAR TE DROP DOWN LIST

3-JavaScript HTML Objects

SHEMBULLI 1 : SHTIMI I NJE RRESHTI NE FILLIM TE TABELES

<!DOCTYPE html>

<html>

<head>

<style>

table, td {

border: 1px solid black;

</style>

</head>

<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br>
<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {

var table = document.getElementById("myTable");

var row = table.insertRow(0);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

cell1.innerHTML = "NEW CELL1";

cell2.innerHTML = "NEW CELL2";

</script>

</body>

</html>

SHEMBULLI 2: FSHIRJA E RRESHTIT NGA FUNDI NE KLIKIM TE BUTONIT

<!DOCTYPE html>

<html>

<head>

<style>

table, td {

border: 1px solid black;

</style>

</head>

<body>
<p>Click the buttons to create and delete row(s) for the table.</p>

<table id="myTable">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br>

<button onclick="myDeleteFunction()">Delete row</button>

<script>

function myDeleteFunction() {

document.getElementById("myTable").deleteRow(0);

</script>

</body>

</html>

SHEMBULLI 3 : FSHIRJA E RRESHTIT TE FUNDIT

<!DOCTYPE html>
<html>

<body>

<table id="myTable" style="padding:8px;border:1px solid black">

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

<p>

<input type="button" value="Delete one Row"

onclick="document.getElementById('myTable').deleteRow(2)">

</p>

</body></html>
 4-JS HTML DOM Events
SHEMBULLI 1: ONFOCUS KUR KLIKON NE KUTINE E DHENE NDRYSHON NGJYRA E BACKGROUNDIT ** KUJDES!! (THIS) QE
PO KERKOJE
SHEMBULLI 2: ONSUBMIT -> KUR JE DUKE SHKRUAR,PLOTESOHET EMRI DHE NE KLIKIM TE BUTONIT,NXJERR NJE TABELE
ALERT

SHEMBULLI 3 ON MOUSE DOWN ON MOUSE UP KUR KLIKON MBI TEKST NDRYSHOHET NGJYRA