Java Script (shqip)

Çka është JavaScript?
 JavaScript është gjuhë programuese e HTML dhe web-
it.
 JavaScript është i lehtë për tu mësuar.
 JavaScript është gjuha më e njohur në botë.
 JavaScript është case sensitiv – bënë dallimin në mes
shkronjave të vogla dhe të mëdhaja.

Pse mësojmë JavaScript?
 JavaScript është njëra nga 3 gjuhët që çdo web
programues duhet ti dijë:
1. HTML definimin e përmbajtjes së faqes
2. CSS specifikimi i formatimit të faqes
3. JavaScript të programoj sjelljet e faqes

JavaScript mund të ndryshoj
përmbajtjen e HTML
 Njëra prej shum metodave të HTML është getElementById().
 Ky shembull përdor metodën të “gjejë” një HTML element me id=“demo”, dhe të ndryshoj
përmbajtjen e elementit (innerHTML) në “Përshëndetje JavaScript":
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Përshëndetje JavaScript!'">
Click Me!</button>
</body>
</html>

JavaScript mund të ndryshoj CSS
stilet e HTML
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>

JavaScript mund të validoj të dhënat
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<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>
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 (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

Ku shënohet JavaScript?
 JavaScript mund të vendoset në <body> dhe në <head>
sesionin e HTML faqes.
 Në HTML, JavaScript kodi paqetër të dhënohet në mes
elementeve<script> dhe</script>.
 Shembull:
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>

JavaScript Functions dhe Events
 JavaScript function është një bllok i JavaScript kodit, i
cili egzekutohet kur e thirim.

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

JavaScript në <body>
 <!DOCTYPE html>
 <html>
 <body>
 <h1>JavaScript in Body</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>

JavaScript i jashtëm
 Ruhet me prapashtesen .js
 Për ta përdorur scriptën e jashtme vendosni emrin e fajllit në src.
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>
<script src="myScript.js"></script>
</body>
</html>

Anët pozitive të JavaScript të
jashtëm
 Ai e ndan HTML dhe kodin
 E bënë HTML dhe JavaScript më të lehtë për tu lexuar
dhe mirëmbajtur

JavaScript Display Possibilities
 JavaScript paraqet të dhënat në formate të ndryshme
 Shënimi në një alert box, duke përdorur window.alert().
 Shënimi në HTML duke përdorur document.write().
 Shënimi në HTML element, duke përdorur innerHTML.
 Shënimi në konzolen e shfletuesit, duke përdorur
console.log().

Përdorimi i window.alert()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Përdorimi i document.write()
<!DOCTYPE html>
<html>
<body>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Përdorimi i innerHTML
<!DOCTYPE html>
<html>
<body>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Përdorimi i console.log()
<!DOCTYPE html>
<html>
<body>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in
the debugger menu.
</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

JavaScript Syntax
 JavaScript syntax është bashkësi e regullave, se si
JavaScript programet janë konstruktuar.

JavaScript Programs Një program kompjuterik është një listë e instruksioneve I cili duhet të
ekzekutohet nga kompjuteri.
 JavaScript është gjuhë programuese
 JavaScript komandat ndahen me pikpresje ;
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<p>Statements are separated by semicolons.</p>
<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

JavaScript variablat
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Operacione aritmetike me
JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>

Shembull
<!DOCTYPE html>
<html>
<body>
<h1>The var Keyword Creates a Variable</h1>
<p id="demo"></p>
<script>
var x = 5 + 6; //koment
var y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>

JavaScript deklaratat
 Kjo deklaratë I thotë shfletuesit të shkruaj "Hello Dolly." në brendi të HTML elementit
me id="demo":
<!DOCTYPE html>
<html>
<body>
<p>In HTML, JavaScript statements are "commands" to the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>

Variablat në JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>

Operatoret në JavaScript
<!DOCTYPE html>
<html>
<body>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
</script>
</body>
</html>

Shembull mbledhja
<!DOCTYPE html>
<html>
<body>
<h1>The + Operator</h1>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
</script>
</body>
</html>

Shembull
<!DOCTYPE html>
<html>
<body>
<h1>The += Operator</h1>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

String operatoret
<!DOCTYPE html>
<html>
<body>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
var txt1 = "John";
var txt2 = "Doe";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>

Shtimi i numrave dhe tekstit
<!DOCTYPE html>
<html>
<body>
<p>Adding a number and a string, returns a string.</p>
<p id="demo"></p>
<script>
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>

Operatoret e krahasimit dhe logjik

Tipi i të dhënave me JavaScript
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object

String me JavaScript
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
carName1 + "<br>" +
carName2 + "<br>" +
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>

JavaScript Arrays
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

JavaScript Objects
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>

JavaScript Functions
 A JavaScript function is a block of code designed to
perform a particular task.
 A JavaScript function is executed when "something"
invokes it (calls it).
 Sintaksa:
function name(parameter1, parameter2, parameter3) {
code to be executed
}

Shembull
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

JavaScript Objects
<!DOCTYPE html>
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>

JavaScript Scope
 Në JavaScript, objektet dhe funksionet janë gjithashtu
variabla
 NëJavaScript, scope është bashkësi e variablave,
objekteve dhe funksionet në të cilët keni qasje.
 JavaScript ka function scope: scope ndryshon në
brendi të funksioneve.

Local JavaScript Variables
 Variablat që deklarohen në JavaScript funksionin, është lokale në atë funksion.
 Variablat lokale kanë local scope: ata vetëm mund të qasen në brendi të funksionit
<!DOCTYPE html>
<html>
<body>
<p>The local variable carName cannot be accessed from code outside the function:</p>
<p id="demo"></p>
<script>
myFunction();
"The type of carName is " + typeof carName;
}
</script>
</body>
</html>

Global JavaScript Variables
 Variabla e deklaruar jashtë funksionit është GLOBAL.
 Variabla globale ka global scope: të gjitha skriptat dhe funksionet në web faqe mund ti qasen atij.
<!DOCTYPE html>
<html>
<body>
<p>A GLOBAL variable can be accessed from any script or function.</p>
<p id="demo"></p>
<script>
myFunction();
"I can display " + carName;
}
</script>
</body>
</html>

JavaScript Events
 HTML events janë “gjëra" që ndodhin në elementet e
HTML.
 Kur JavaScript përdoret në faqet e HTML, JavaScript
mund të “reagoj” në ato evente

HTML Events
 Një HTML ngjarje mund të jetë ajo çka bënë një shfletues apo një
shfrytëzues.
 Shembuj të HTML events:
 Një HTML web faqe ka përfunduar loading
 Një HTML input field është ndryshuar
 Një HTML buton është klikuar
 JavaScript ju lejon juve të egzekutoni kodin kur evente janë detektuar.
 Me thojza të njëfishta:
 <some-HTML-element some-event='some JavaScript'>
 Me thojza të dyfishta:
 <some-HTML-element some-event="some JavaScript">
 Në shembullin në vazhdim, atributi onclick i shtohet elementit:
 Shembull:
 <button onclick='getElementById("demo").innerHTML=Date()'>The
time is?</button>

Çka mund të bëjë JavaScript ?
 Trajtuesit e eventeve mund të përdoret për të trajtuar,
verifikojë, të dhënat e përdoruesit, veprimet e përdoruesit,
dhe veprimet e shfletuesit:
 Gjërat që duhet bërë gjithmon kur faqa hapet
 Gjërat që duhet bërë kur faqa mbyllet
 Aksionet që duhet të ndërmeren kur klikohet një buton
 Përmbajtja që duhet të verifikohet kur shfrytëzuesi fut të dhëna në
një tekstbox
 Etj…
 Shum metoda mund të përdoren për të lejuar JavaScript të
punoj me eventet:
 HTML event atributi mund ta egzekutoj direkt JavaScript kodin
 HTML event atributi mund të thirë JavaScript funksionin
 Mund tja vendosni trajtuesin e eventeve një HTML elementi
 etj ...

Java Script (shqip)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Java Script (shqip)