Javascript 2

JavaScript Basic
Ειςαγωγό
Τη είλαη ην JavaScript; Σν JavaScript ζρεδηάζηεθε γηα λα πξνζζέζεη δηαδξαζηηθόηεηα ζηηο HTML ζειίδεο. Είλαη κία
scripting γιώζζα, δειαδή γηα ‘ειαθξύ’ πξνγξακκαηηζκό, πνπ είλαη ζπλήζσο εκθσιεπκέλε απεπζείαο κέζα ζε HTML
ζειίδεο.
Τη κπνξεί ε JavaScript λα θάλεη;
 δίλεη ζηνπο HTML έλα πξνγξακκαηηζηηθό εξγαιείν
 κπνξεί λα αληηδξάζεη ζε γεγνλόηα
 κπνξεί λα δηαβάζεη θαη λα γξάςεη HTML ζηνηρεία
 κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ επηθύξσζε δεδνκέλσλ
 κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ αλίρλεπζε ηνπ browser ηνπ επηζθέπηε
 κπνξεί λα ρξεζηκνπνηεζεί γηα ηε δεκηνπξγία cookies
Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα γξάθεη έλα ζηνηρείν <p> κε ηελ πιεξνθνξία γηα ηελ ηξέρνπζα εκεξνκελία ζην
HTML έγγξαθν:
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
Αιιάδνληαο ηα HTML ζηνηρεία: Σν αθόινπζν παξάδεηγκα γξάθεη ηελ ηξέρνπζα εκεξνκελία κέζα ζε έλα ήδε ππάξρνλ
ζηνηρείν <p>:
<html>
<body>
<p id="demo">This is a paragraph.</p>
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
Σημείωση: Γηα λα δηαρεηξηζηεί HTML ζηνηρεία, ην JavaScript ρξεζηκνπνηεί ηε κέζνδν getElementById(). Η κέζνδνο
απηή έρεη πξόζβαζε ζην ζηνηρείν κε ην ζπγθεθξηκέλν id.
Επεμήγεζε παξαδεηγκάησλ: Γηα ηελ εηζαγσγή ελόο JavaScript κέζα ζε κία HTML ζειίδα, ρξεζηκνπνηνύκε ην tag
<script>. Μέζα ζην tag <script> ρξεζηκνπνηείηαη ν ηύπνο ηνπ ραξαθηεξηζηηθνύ ώζηε λα επεμεγήζεη ηε scripting
γιώζζα. Σα <script> θαη </script> ιέλε πνπ αξρίδεη θαη πνπ ηειείώζεη ην JavaScript.
<html>
<body>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript"> Οη γξακκέο κεηαμύ ησλ <script> θαη </script>

//This is a comment πεξηέρνπλ ην JavaScript θαη εθηεινύληαη από
... some JavaScript code ...
ηνλ browser.
</script>
</body>
</html>
Σημείωση: Παξαηεξείζηε όηη ην JavaScript ηνπνζεηήζεθε ζην θάησ κέξνο ηεο ζειίδαο ώζηε λα δηαζθαιίζεη όηη δε ζα
εθηειεζηεί πξηλ ηε δεκηνπξγία ηνπ ζηνηρείνπ <p>. (Περίπτωση τοποθέτησης JavaScript μέσα στο <body>).
JavaScript- Σπλαξηήζεηο θαη Γεγνλόηα: Μέζα ζε κία HTML ζειίδα ην JavaScripts ζε εθηειεζηεί όηαλ ε ζειίδα
θνξηώλεηαη, απηό όκσο δελ είλαη θάηη πνπ ην ζέινπκε πάληα. Μεξηθέο θνξέο επηζπκνύκε λα εθηειεζηεί έλα JavaScript
όηαλ ζπκβαίλεη έλα γεγνλόο (event), πρ όηαλ ν ρξήζεο θάλεη θιηθ ζε έλα θνπκπί. Όηαλ έρνπκε απηή ηελ πεξίπησζε
Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

WEB: http://ekoletsou.gr Page 1
JavaScript Basic
κπνξνύκε λα ηνπνζεηήζνπκε έλα script κέζα ζε κία ζπλάξηεζε (function). Σα γεγνλόηα ζπλήζσο ρξεζηκνπνηνύληαη ζε
ζπλδπαζκό κε ηηο ζπλαξηήζεηο.
Περίπτωση τοποθέτησης JavaScript μέσα στο <head>: Σν αθόινπζν παξάδεηγκα θαιεί κία ζπλάξηεζε όηαλ γίλεηαη θιηθ
ζε έλα θνπκπί:
<html>
<head>
function displayDate()
{
/*This is my first function
that will display the Date
*/
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Scripts ζην <head> θαη ζην <body>: Μπνξνύκε λα ηνπνζεηήζνπκε έλαλ κε-πεξηνξηζκέλν αξηζκό από scripts ζηε
ζειίδα καο, θαη κπνξνύκε λα έρνπκε ηαπηόρξνλα scripts ζην body θαη ζην head. Παξόια απηά, ζπλεζίδεηαη λα
ηνπνζεηνύκε όιεο ηηο ζπλαξηήζεηο ζηελ πεξηνρή ηνπ head, ή ζην ηέινο ηεο ζειίδαο. Με απηό ηνλ ηξόπν είλαη όια ζε έλα
ζεκείν θαη δελ παξεκβαίλνπλ ζην ππόινηπν πεξηερόκελν ηεο ζειίδαο.
Χξεζηκνπνηώληαο έλα εμσηεξηθό JavaScript: Σα JavaScript κπνξνύλ αθόκε θαη λα ηνπνζεηεζνύλ ζε εμσηεξηθά
αξρεία. Σα αξρεία ησλ εμσηεξηθώλ JavaScript ζπλήζσο πεξηέρνπλ θώδηθα πνπ κπνξεί λα ρξεζηκνπνηεζεί από δηάθνξεο
ζειίδεο, θαη έρνπλ θαηάιεμε αξρείνπ .js. Προσοχή! Σα εμσηεξηθά script δελ κπνξνύλ λα πεξηέρνπλ ηα tags
<script></script>. Γηα λα ρξεζηκνπνηήζνπκε έλα εμσηεξηθό script, δείρλνπκε ην αξρείν .js ζην ραξαθηεξηζηηθό "src"
κέζα ζην tag <script>:
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>
Μεταβλητϋσ
Γηα λα δεκηνπξγήζνπκε κεηαβιεηέο ζε JavaScript ρξεζηκνπνηνύκε ηε ιέμη-θιεηδί var:
var x;
var carname;
Οη παξαπάλσ κεηαβιεηέο, όκσο, είλαη θελέο (ρσξίο ηηκέο). Παξόια απηά κπνξνύκε λα δεκηνπξγήζνπκε κεηαβιεηέο ζηηο
νπνίεο θαηαρσξνύκε εμαξρήο θάπνηεο ηηκέο:
var x=15;
var carname="Volvo";
var y=x-5;
Τνπηθέο Μεηαβιεηέο JavaScript: Μία κεηαβιεηή πνπ θαζνξίδεηαη κέζα ζε κία JavaScript ζπλάξηεζε ζεσξείηαη ηνπηθή
θαη κπνξεί κόλν λα πξνζπειαζηεί από ηε ζπγθεθξηκέλε ζπλάξηεζε. Μπνξνύκε λα έρνπκε ηνπηθέο κεηαβιεηέο κε ην ίδην
όλνκα θάησ από δηαθνξεηηθέο ζπλαξηήζεηο, γηαηί νη ηνπηθέο κεηαβιεηέο αλαγλσξίδνληαη κόλν από ηε ζπλάξηεζε ζηελ
νπνία θαζνξίδνληαη. Οη ηνπηθέο κεηαβιεηέο θαηαζηξέθνληαη κε ηε έμνδα από ηε ζπλάξηεζε.
Καζνιηθέο Μεηαβιεηέο JavaScript: Οη κεηαβιεηέο πνπ θαζνξίδνληαη έμσ από κία ζπλάξηεζε ραξαθηεξίδνληαη σο
θαζνιηθέο, θαη κπνξνύλ λα πξνζπειαζηνύλ από όια ηα scripts θαη ηηο ζπλαξηήζεηο ηεο ηζηνζειίδαο. Οη θαζνιηθέο
κεηαβιεηέο δελ θαηαζηξέθνληαη όηαλ θιείζνπκε ηε ζειίδα. Αλ θαζνξίζνπκε κία κεηαβιεηή ρσξίο λα ρξεζηκνπνηήζνπκε
ην "var", ε κεηαβιεηή ζα ζεσξείηαη πάληα θαζνιηθή.

JavaScript Basic
Τελεςτϋσ
Ο ηειεζηήο = ρξεζηκνπνηείηαη γηα λα θαζνξίζεη ηηκέο ζηηο JavaScript κεηαβιεηέο, Ελόο ν ηειεζηήο + ρξεζηκνπνηείηαη γηα
λα πξνζζέζεη ηηκέο καδί. (Η ηηκή x κεηά ηελ εθηέιεζε ηνπ παξαθάησ θώδηθα ζα έρεη ηελ ηηκή 7):
y=5;
z=2;
x=y+z;
JavaScript: Αξηζκεηηθέο Πξάμεηο
Τειεζηήο Πεξηγξαθή Παξάδεηγκα Απνηέιεζκα

+ Πξόζζεζε x=y+2 x=7 y=5
- Αθαίξεζε x=y-2 x=3 y=5
* Πνιιαπιαζηαζκόο x=y*2 x=10 y=5
/ Δηαίξεζε x=y/2 x=2.5 y=5
% Τπόινηπν δηαίξεζεο x=y%2 x=1 y=5
++ Αύμεζε x=++y x=6 y=6
x=y++ x=5 y=6
-- Μείσζε x=--y x=4 y=4
x=y-- x=5 y=4
JavaScript: Αλάζεζε Τειεζηώλ
Τειεζηήο Παξάδεηγκα Αληίζηνηρα Απνηέιεζκα

= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
Ο ηειεζηήο + ρξεζηκνπνηνύκελνο ζε strings: Σνπνζεηεί καδί κεηαβιεηέο ηύπνπ string ή θείκελν:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
Έπεηηα από ηελ εθηέιεζε ηνπ παξαπάλσ θώδηθα, ε κεηαβιεηή txt3 πεξηέρεη ηελ ηηκή "What a verynice day". Γηα λα
πξνζζέζνπκε θελό κεηαμύ ησλ δύν strings, εηζάγνπκε έλα θελό ζε έλα από ηα δύν strings ή εηζάγνπκε θελό κέζα ζηε
θξάζε:
txt1="What a very ";

txt2="nice day";
txt3=txt1+txt2;
-----------------------
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
Παξάδεηγκα: Πξνζζέηνληαο strings θαη αξηζκνύο:
<html>
<body>
var x;
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";

JavaScript Basic
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
</script>
<p>The rule is: If you add a number and a string, the result will be a string.</p>
</body>
</html>
Τελεςτϋσ Σύγκριςησ & Λογικού Τελεςτϋσ

Τειεζηέο Σύγθξηζεο
Τειεζηήο Πεξηγξαθή Παξάδεηγκα

== ηζνύηαη κε x==8 ςεπδέο
x==5 αιεζέο
=== ηζνύηαη αθξηβώο κε (ηηκή θαη ηύπνο) x===5 αιεζέο
x==="5" ςεπδέο
!= δελ ηζνύηαη κε x!=8 αιεζέο
> είλαη κεγαιύηεξν κε x>8 ςεπδέο
< είλαη κηθξόηεξν κε x<8 αιεζέο
>= είλαη κεγαιύηεξν ή ίζν κε x>=8 ςεπδέο
<= είλαη κηθξόηεξν ή ίζν κε x<=8 αιεζέο
Παξάδεηγκα: if (age<18) document.write("Too young");
Λνγηθνί Τειεζηέο
Τειεζηήο Πεξηγξαθή Παξάδεηγκα

&& θαη (x < 10 && y > 1) αιεζέο
|| ή (x==5 || y==5) ςεπδέο
! δηάθνξν !(x==y) αιεζέο
Δηλώςεισ If…else
Πνιύ ζπρλά όηαλ γξάθνπκε θώδηθα, ζέινπκε λα δεκηνπξγήζνπκε δηαθνξεηηθέο ελέξγεηεο γηα δηαθνξεηηθέο απνθάζεηο.
Έηζη, κπνξνύκε λα ρξεζηκνπνηνύκε δειώζεηο θαηαζηάζεσλ ζηνλ θώδηθά καο γηα λα ην θάλεη απηό. ΢ην JavaScript
έρνπκε ηηο αθόινπζεο δειώζεηο θαηαζηάζεσλ:
 if
 if...else
 if...else if....else
 switch
Δήισζε If: Υξεζηκνπνηνύκε ηε δήισζε if γηα ηελ εθηέιεζε θάπνηνπ θώδηθα εάλ ε θαηάζηαζε πνπ εμεηδηθεύεηαη είλαη
αιεζήο:
if (condition)
{
code to be executed if condition is true
}
Παξάδεηγκα:

JavaScript Basic
<html>
<body>
var d = new Date();
var time = d.getHours();
if (time < 10)

{
document.write("<b>Good morning</b>");
}
</script>
<p>This example demonstrates the If statement.</p>

<p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p>
</body>
</html>
Δήισζε If...else: Υξεζηκνπνηνύκε ηε δήισζε if....else γηα ηελ εθηέιεζε θάπνηνπ θώδηθα εάλ ε θαηάζηαζε είλαη αιεζήο
θαη θάπνηνπ άιινπ θώδηθα εάλ ε θαηάζηαζε δελ είλαη αιεζήο:
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
<html>
<body>
var d = new Date();
if (time < 10)

{
}
else
{
document.write("<b>Good day</b>");
}
</script>
<p>
This example demonstrates the If...Else statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
</body>
</html>
Δήισζε If...else if...else: Υξεζηκνπνηνύκε ηε δήισζε if....else if....else γηα ηελ επηινγή ελόο από ηα πνιιά θνκκάηηα
θώδηθα πξνο εθηέιεζε:

JavaScript Basic
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
<html>
<body>
var d = new Date();
if (time<10)
{
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
<p>
This example demonstrates the if..else if...else statement.
</p>
</body>
</html>
Δόλωςη Switch
Δήισζε switch: Υξεζηκνπνηνύκε ηε δήισζε switch γηα ηελ επηινγή ελόο από ηα πνιιά θνκκάηηα θώδηθα πξνο
εθηέιεζε:
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
<html>
<body>
var d=new Date();
var theDay=d.getDay();

JavaScript Basic
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>
<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0,
Monday=1, Tuesday=2, etc.</p>
</body>
</html>
Popup Boxes
Τπάξρνπλ 3 είδε popup boxes ζην JavaScript: Alert box, Confirm box, and Prompt box.
Alert Box: Έλα alert box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε λα επηβεβαηώζνπκε ηελ πιεξνθνξία πνπ έξρεηαη από ην
ρξήζηε. Όηαλ έλα alert box γίλεηαη pop up, ν ρξήζηεο πξέπεη λα θιηθάξεη "OK" γηα λα ζπλερίζεη.
alert("sometext");
<html>
<head>
function show_alert()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
Confirm Box: Έλα confirm box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε ν ρξήζηεο λα επηβεβαηώζεη ή λα επαιεζεύζεη θάηη.
Όηαλ έλα confirm box γίλεηαη pop up, ν ρξήζηεο είηε πξέπεη λα θιηθάξεη "OK" είηε "Cancel" γηα λα ζπλερίζεη. Αλ ν
ρξήζηεο θιηθάξεη "OK", ην πιαίζην επηζηξέθεη αιεζέο, ελώ αλ θιηθάξεη "Cancel", ην πιαίζην επηζηξέθεη ςεπδέο.
confirm("sometext");
<html>
<head>
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}

JavaScript Basic
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
Prompt Box: Έλα prompt box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε ν ρξήζηεο λα εηζάγεη κία ηηκή πξηλ εηζέξζεη ζηε
ζειίδα. Όηαλ έλα prompt box γίλεηαη pop up, ν ρξήζηεο είηε πξέπεη λα θιηθάξεη "OK" είηε "Cancel" γηα λα ζπλερίζεη
αθνύ εηζάγεη κία εηζεξρόκελε ηηκή. Αλ ν ρξήζηεο θιηθάξεη "OK", ην πιαίζην επηζηξέθεη ηελ εηζεξρόκελε ηηκή, ελώ αλ
θιηθάξεη "Cancel", ην πιαίζην επηζηξέθεη θελό (null).
prompt("sometext","defaultvalue");
<html>
<head>
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body>
</html>
Συναρτόςεισ
Γηα λα ζπγθξαηήζνπκε ηνλ browser ώζηε λα κελ εθηειέζεη θάπνηα script όηαλ θνξηώλεη ε ζειίδα, κπνξνύκε λα
ηνπνζεηήζνπκε απηά ηα script κέζα ζε κία ζπλάξηεζε. Μία ζπλάξηεζε πεξηέρεη θώδηθα πνπ κπνξεί λα εθηειεζηεί από
έλα γεγνλόο ή από κία θιήζε ζηε ζπλάξηεζε. Μπνξνύκε λα θαινύκε κία ζπλάξηεζε από νπνπδήπνηε κέζα ζε κία
ζειίδα, ή αθόκε θαη από άιιεο ζειίδεο αλ απηή ε ζπλάξηεζε είλαη εκθσιεπκέλε ζε έλα εμσηεξηθό >js αξρείν. Οη
ζπλαξηήζεηο κπνξνύλ λα θαζνξίδνληαη ηόζν ζηελ πεξηνρή ηνπ <head> όζν θαη ηνπ <body> κηαο ζειίδαο. Παξόια απηά,
γηα λα επηβεβαηώζνπκε όηη ζε κία ζπλάξηεζε γίλεηαη αλάγλσζε/θόξησζε από ηνλ browser πξηλ απηή θιηζεί, είλαη
πξνηηκόηεξν λα ηνπνζεηνύκε ηε ζπλάξηεζε κέζα ζηελ πεξηνρή ηνπ <head>.
function functionname(var1,var2,...,varX)
{ Μεηαβιεηέο ή ηηκέο πνπ πεξλάλε κέζα ζηε ζπλάζηεζε
some code Αξρή θαη ηέινο ηεο ζπλάξηεζεο
}
<html>
<head>
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>

JavaScript Basic
<p>By pressing the button above, a function will be called. The function will alert a message.</p>
</body>
</html>
Η δήισζε return: Η δήισζε return ρξεζηκνπνηείηαη γηα λα θαζνξίζεη ηελ ηηκή πνπ ζα επηζηξαθεί από ηε ζπλάξηεζε.
Έηζη, νη ζπλαξηήζεηο πνπ είλαη λα επηζηξέςνπλ κία ηηκή πξέπεη λα ρξεζηκνπνηνύλ ηε δήισζε return.
<html>
<head>
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
<p>The script in the body section calls a function with two parameters (4 and 3).</p>
<p>The function will return the product of these two parameters.</p>
</body>
</html>
Βρόγχοι επανϊληψησ
΢πρλά, όηαλ γξάθνπκε θώδηθα, ζέινπκε ην ίδην θνκκάηη θώδηθα λα ηξέρεη μαλά θαη μαλά ζε κία γξακκή. Αληί λα
πξνζζέηνπκε πάξα πνιιέο θαη ζρεδόλ ίδηεο γξακκέο θώδηθα ζε έλα script, κπνξνύκε λα ρξεζηκνπνηήζνπκε βξόγρνπο
επαλάιεςεο ώζηε λα εθηειείηαη ε εξγαζία καο κε απηό ηνλ ηξόπν. ΢ην JavaScript, ππάξρνπλ 2 είδε βξόγρσλ επαλάιεςεο:
 for
 while
Ο βξόγρνο επαλάιεςεο For: Υξεζηκνπνηείηαη όηαλ γλσξίδνπκε εθ ησλ πξνηέξσλ πόζεο θνξέο ζα ηξέμεη ην script.
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}
<html>
<body>
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>

JavaScript Basic
Ο βξόγρνο επαλάιεςεο While: Επαλαιακβάλεη έλα θνκκάηη θώδηθα όζν ε ζπλζήθε πνπ εκπεξηέρεη είλαη αιεζήο.
while (variable<=endvalue)
{
code to be executed
}
Παρατήση: Σν <= ζα κπνξνύζε λα είλαη νπνηνζδήπνηε ηειεζηήο.

<html>
<body>
i=0;
while (i<=5)
{
i++;
}
</script>
<p>Explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
Ο βξόγρνο επαλάιεςεο do…while: Είλαη κία παξαιιαγή ηεο επαλάιεςεο while, ε νπνία εθηειεί έλα θνκκάηη θώδηθα
ΜΟΝΟ ΜΙΑ ΦΟΡΑ, θαη έπεηηα ην επαλαιακβάλεη όζν ε ζπλζήθε πνπ εκπεξηέρεη είλαη αιεζήο.
do
{
code to be executed
}
while (variable<=endvalue);
<html>
<body>
i = 0;
do
{
i++;
}
while (i <= 5);
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will run</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
Δηλώςεισ Break & Continue

JavaScript Basic
Η δήισζε break: «΢πάεη» κία επαλάιεςε θαη ζπλερίδεη ηνλ θώδηθα πνπ αθνινπζεί κεηά ηελ επαλάιεςε (εάλ
ππάξρεη):
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
}
</script>
<p>Explanation: The loop will break when i=3.</p>
</body>
</html>
Η δήισζε continue: «΢πάεη» ηελ ηξέρνπζα επαλάιεςε θαη ζπλερίδεη κε ηελ επόκελε ηηκή:
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
}
</script>
<p>Explanation: The loop will break the current loop and continue with the next value when i=3.</p>
</body>
</html>
Δόλωςη For…In
Η δήισζε for...in επαλαιακβάλεη ηηο ηδηόηεηεο ελόο αληηθεηκέλνπ:
for (variable in object)

{
code to be executed
}
<html>
<body>
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
document.write(person[x] + " ");
}
</script>
</body>
</html>

JavaScript Basic
Γεγονότα
Με ηε ρξήζε JavaScript, έρνπκε ηε δπλαηόηεηα λα δεκηνπξγνύκε δπλακηθέο ηζηνζειίδεο. Σα γεγνλόηα είλαη ελέξγεηεο
πνπ κπνξνύλ λα εληνπηζηνύλ από JavaScript. Κάζε ζηνηρείν ζε κία ηζηνζειίδα έρεη ζπγθεθξηκέλα γεγνλόηα ηα νπνία
κπνξεί λα πξνζεγγίζεη έλα JavaScript. Γηα παξάδεηγκα, κπνξνύκε λα ρξεζηκνπνηήζνπκε ην γεγνλόο onClick ελόο
θνπκπηνύ γηα λα ππνδείμνπκε όηη κία ζπλάξηεζε ζα ηξέμεη όηαλ ν ρξήζηεο θάλεη θιηθ πάλσ ζην θνπκπί. Καζνξίδνπκε ηα
γεγνλόηα κέζα ζηα HTML tags.
onLoad θαη onUnload: Σα γεγνλόηα onLoad θαη onUnload ελεξγνπνηνύληαη όηαλ ν ρξήζηεο κπαίλεη ή βγαίλεη από κία
ζειίδα. Σν γεγνλόο onLoad ρξεζηκνπνηείηαη ζπλήζσο γηα λα ειέγμεη ηνλ ηύπν θαη ηελ έθδνζε ηνπ browser ηνπ ρξήζηε,
θαη θνξηώλεη ηελ θαηάιιειε έθδνζε ηεο ηζηνζειίδαο πνπ βαζίδεηαη ζε απηή ηελ πιεξνθνξία. Μαδί, ηα γεγνλόηα onLoad
θαη onUnload ρξεζηκνπνηνύληαη ζπρλά γηα ηε δηαρείξηζε ησλ cookies πνπ ζα πξέπεη λα ηεζνύλ όηαλ ν ρξήζηεο κπαίλεη ή
βγαίλεη από κία ζειίδα. Γηα παξάδεηγκα, κπνξνύκε λα έρνπκε έλα popup παξάζπξν πνπ ζα ξσηάεη γηα ην όλνκα ρξήζηε
θαηά ηελ πξώηε ηνπ επίζθεςε ζηε ζειίδα, έπεηηα ην όλνκα απνζεθεύεηαη ζε έλα cookie θαη ηελ επόκελε θνξά πνπ ν
ρξήζηεο επηζθεθζεί ηε ζειίδα, κπνξνύκε λα έρνπκε έλα άιιν popup πνπ ζα ιέεη θάηη ηνπ ζηπι: "Welcome John!".
onFocus, onBlur θαη onChange: Σα γεγνλόηα onFocus, onBlur θαη onChange ρξεζηκνπνηνύληαη ζπρλά ζε ζπλδπαζκό
κε ηελ επηθύξσζε ησλ πεδίσλ θόξκαο. ΢ηε ζπλέρεηα δίλεηαη έλα παξάδεηγκα ηνπ ηξόπνπ ρξήζεο ηνπ γεγνλόηνο
onChange. Η ζπλάξηεζε checkEmail() ζα θιηζεί όηαλ ν ρξήζηεο αιιάμεη ην πεξηερόκελν ηνπ πεδίνπ:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit: Σν γεγνλόο onSubmit ρξεζηκνπνηείηαη γηα ηελ επηθύξσζε ΌΛΩΝ ησλ πεδίσλ θόξκαο πξηλ ηελ ππνβνιή ησλ
δεδνκέλσλ. ΢ηε ζπλέρεηα δίλεηαη έλα παξάδεηγκα γηα ην πώο ρξεζηκνπνηείηαη ην γεγνλόο onSubmit. Η ζπλάξηεζε
checkForm() θαιείηαη όηαλ ν ρξήζηεο θιηθάξεη ην θνπκπί ππνβνιήο ηεο θόξκαο. Αλ νη ηηκέο ηνπ πεδίνπ δελ είλαη
απνδεθηέο, ε ππνβνιή πξέπεη λα αθπξσζεί. Η ζπλάξηεζε checkForm() επηζηξέθεη είηε αιεζέο είηε ςεπδέο. Εάλ
επηζηξέςεη αιεζέο ε θόξκα ζα ππνβιεζεί, ελώ εάλ επηζηξέςεη ςεπδέο ε ππνβνιή ζα αθπξσζεί:
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver: Σν γεγνλόο onmouseover ρξεζηκνπνηείηαη γηα λα ελεξγνπνηήζεη κία ζπλάξηεζε όηαλ ν ρξήζηεο πεξάζεη
ηνλ δείθηε ηνπ πνληηθηνύ πάλσ από έλα HTML ζηνηρείν:
<html>
<head>
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest
objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"

onmouseover="writeText('The planet Mercury is very difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"

onmouseover="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth
because Venus is the nearest planet to us, and because the two planets seem to share many
characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc">Mouse over the sun and the planets and see the different descriptions.</p>
</body>
</html>

JavaScript Basic
Δόλωςη Try...catch
Καηά ηελ πινήγεζή καο ζε ηζηνζειίδεο ζην Internet, όινη καο ιίγν πνιύ έρνπκε δεη alert box από JavaScript πνπ καο
ιέλε όηη ππάξρεη runtime error θαη καο ξσηάλε: "Do you wish to debug?". Σα κελύκαηα ιαζώλ όπσο απηό κπνξεί λα
είλαη ρξήζηκα γηα εθείλνπο πνπ αλαπηύζζνπλ θώδηθα, αιιά όρη γηα ηνπο ρξήζηεο, πνπ ζπρλά εγθαηαιείπνπλ ηελ
ηζηνζειίδα. Η δήισζε try...catch καο επηηξέπεη ηνλ έιεγρν ιαζώλ ζε έλα θνκκάηη θώδηθα. Σν try θνκκάηη πεξηέρεη
θώδηθα πνπ ηξέρεη θαη ην θνκκάηη catch πεξηέρεη θώδηθα πξνο εθηέιεζε εάλ πξνθύςεη θάπνην ζθάικα.
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί έλα confirm box γηα λα δείμεη έλα κήλπκα ην νπνίν ιέεη ζην
ρξήζηε όηη κπνξεί λα θάλεη θιηθ ζην ΟΚ γηα λα ζπλερίζεη λα βιέπεη ηε ζειίδα ή ζην Cancel θαη λα επηζηξέςεη ζηελ
αξρηθή ζειίδα. Αλ ε κέζνδνο επηβεβαίσζεο επηζηξέςεη ςεπδέο, ν ρξήζηεο θιίθαξε Cancel, θαη ν θώδηθαο έθαλε
αλαθαηεύζπλζε ζην ρξήζηε. Εάλ ε κέζνδνο επηβεβαίσζεο επηζηξέςεη αιεζέο, ν θώδηθα δε θάλεη ηίπνηε:
<html>
<head>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
Δόλωςη Throw
Η δήισζε throw καο επηηξέπεη λα δεκηνπξγήζνπκε κία εμαίξεζε. Εάλ ρξεζηκνπνηνύκε απηή ηε δήισζε καδί κε ηε
δήισζε try...catch, κπνξνύκε λα ειέγρνπκε ηε ξνή ηνπ πξνγξάκκαηνο θαη λα δεκηνπξγνύκε αθξηβή κελύκαηα ιαζώλ.
throw exception
Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα θαζνξίδεη ηελ ηηκή κηαο κεηαβιεηήο πνπ νλνκάδεηαη x. Εάλ ε ηηκή ηεο x είλαη
κεγαιύηεξε ηνπ 10, κηθξόηεξε ηνπ 0, ή όρη αξηζκόο, ζα εκθαλίζνπκε έλα ζθάικα. Σν ζθάικα ζα πηαζηεί από ην catch
θαη ζα εκθαληζηεί ην θαηάιιειν κήλπκα ζθάικαηνο:
<html>
<body>
var x=prompt("Enter a number between 0 and 10:","");
try

JavaScript Basic
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a number");
}
}
</script>
</body>
</html>
Ειδικού χαρακτόρεσ
Κώδηθαο Εκθάληζε
\' Απιό εηζαγσγηθό
\" Δηπιό εηζαγσγηθό
\\ Backslash
\n Νέα γξακκή
\t Tab
\b Κελό

JavaScript Objects & Advanced
Objects
Ιδιόηηηες: Οη ηδηόηεηεο είλαη ηηκέο πνπ ζπζρεηίδνληαη κε έλα αληηθείκελν. Σην αθόινπζν παξάδεηγκα ρξεζηκνπνηνύκε
1
ηελ ηδηόηεηα length ηνπ String object γηα λα καο επηζηξέςεη ηνλ αξηζκό ησλ ραξαθηήξσλ από ηνπο νπνίνπο
απνηειείηαη ην string:
<script type="text/javascript"> Η έμνδνο ηνπ θώδηθα είλαη:

var txt="Hello World!";
document.write(txt.length); 12
</script>
Μέθοδοι: Οη κέζνδνη είλαη ελέξγεηεο πνπ ζπζρεηίδνληαη κε έλα αληηθείκελν. Σην αθόινπζν παξάδεηγκα ρξεζηκνπνηνύκε
ηε κέζνδν toUpperCase()ηνπ String object γηα λα καο εκθαλίζεη έλα θείκελν κε θεθαιαία γξάκκαηα:
<script type="text/javascript"> Η έμνδνο ηνπ θώδηθα είλαη:

var str="Hello world!";
document.write(str.toUpperCase()); HELLO WORLD!
</script>
Date object: Τν Date object ρξεζηκνπνηείηαη γηα ηελ επεμεξγαζία εκεξνκεληώλ θαη σξώλ. Τα Date objects
δεκηνπξγνύληαη κε ηε ζπλάξηεζε Date(). Υπάξρνπλ 4 δηαθνξεηηθνί ηξόπνη γηα λα δνζεί ην ζηηγκηόηππν κηαο
εκεξνκελίαο:
new Date() // current date and time

new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Οη πεξηζζόηεξεο παξάκεηξνη παξαπάλσ είλαη πξναηξεηηθνί. Όηαλ έλα Date object δεκηνπξγείηαη, έλα πιήζνο από
κεζόδνπο καο επηηξέπεη λα ην επεμεξγαζηνύκε. Οη πεξηζζόηεξεο κέζνδνη καο επηηξέπνπλ λα παίξλνπκε θαη λα ζέηνπκε
έηνο, κήλα, ώξα, ιεπηό, δεπηεξόιεπην, θιάζκα ηνπ δεπηεξνιέπηνπ ζε έλα αληηθείκελν, ρξεζηκνπνηώληαο είηε ηελ
ηνπηθή ώξα είηε ηελ παγθόζκηα UTC (universal, ή GMT). Μεξηθά παξαδείγκαηα από ζηηγκηόηππα εκεξνκεληώλ:
var today = new Date()

var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
Θέηονηας ημερομηνίες: Μπνξνύκε εύθνια λα ρεηξηζηνύκε ηελ εκεξνκελία ρξεζηκνπνηώληαο ηηο κεζόδνπο πνπ είλαη
δηαζέζηκεο γηα ην Date object. Σην παξάδεηγκα πνπ αθνινπζεί ζέηνπκε έλα Date object ζε κία ζπγθεθξηκέλε εκεξνκελία
(14th January 2010):
var myDate=new Date();

myDate.setFullYear(2010,0,14);
Καη ζην αθόινπζν παξάδεηγκα ζέηνπκε έλα Date object λα ηζνδπλακεί κε εκεξνκελία κεηά από 5 εκέξεο:
var myDate=new Date();

myDate.setDate(myDate.getDate()+5);
Σσγκρίνονηας δύο ημερομηνίες: Τν Date object ρξεζηκνπνηείηαη αθόκε θαη γηα λα ζπγθξίλεη δύν εκεξνκελίεο. Τν
αθόινπζν παξάδεηγκα ζπγθξίλεη ηε ζεκεξηλή εκεξνκελία κε ηελ 14th January 2100:
var x=new Date();

x.setFullYear(2100,0,14);
var today = new Date();
if (x>today)
{
alert("Today is before 14th January 2100");
}
else
{
alert("Today is after 14th January 2100");
}
1
Τν String object ρξεζηκνπνηείηαη γηα λα παξαπνηήζεη έλα απνζεθεπκέλν θνκκάηη θεηκέλνπ.
Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Πίνακας Object: Έλαο πίλαθαο είλαη κία εηδηθή κεηαβιεηή, ε νπνία κπνξεί λα θξαηήζεη πεξηζζόηεξεο από κία ηηκέο ζε
κία δεδνκέλε ρξνληθή ζηηγκή.
Δάλ έρνπκε έλα θαηάινγν από αληηθείκελα (π.ρ. κία ιίζηα από νλόκαηα απηνθηλήησλ), ην λα απνζεθεύακε ηα
απηνθίλεηα ζε απιέο κεηαβιεηέο ζα ήηαλ θάπσο έηζη:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
Παξόια απηά, ηη ζα γηλόηαλ εάλ ζα ζέιακε λα θάλνπκε κία εθινγή κεηαμύ ησλ απηνθηλήησλ θαη λα βξίζθακε θάπνην
ζπγθεθξηκέλν; Καη ζθεθηείηε ηη ζα γηλόηαλ εάλ δελ είρακε 3 απηνθίλεηα, αιιά 300! Η θαιύηεξε ιύζε εδώ είλαη ε ρξήζε
πίλαθα! Έλα πίλαθαο κπνξεί λα θξαηήζεη όιεο ηηο ηηκέο ησλ κεηαβιεηώλ θάησ από ην ίδην όλνκα, θαη κπνξνύκε λα
έρνπκε πξόζβαζε ζηηο ηηκέο θάλνληαο αλαθνξά ζην όλνκα ηνπ πίλαθα. Κάζε ζηνηρείν ζηνλ πίλαθα έρεη έλα δηθό ηνπ
κνλαδηθό ID ώζηε λα είλαη εύθνια πξνζβάζηκν.
Δημιοσργώνηας έναν πίνακα: Έλαο πίλαθαο κπνξεί λα νξηζηεί κε 3 ηξόπνπο. Ο αθόινπζνο θώδηθαο δεκηνπξγεί έλα
object πίλαθα πνπ νλνκάδεηαη myCars:

var myCars=new Array(); // κανονικός πίνακας
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW"); // σσνοπτικός πίνακας

var myCars=["Saab","Volvo","BMW"]; // κσριολεκτικός πίνακας
Προζπελάζονηας έναν πίνακα: Μπνξνύκε λα απεπζπλζνύκε ζε έλα ζπγθεθξηκέλν ζηνηρείν ηνπ πίλαθα θάλνληαο
αλαθνξά ζην όλνκα ηνπ πίλαθα θαη ζηνλ αξηζκό επξεηεξίνπ. Ο αξηζκόο επξεηεξίνπ μεθηλάεη από ην 0.
Η αθόινπζε γξακκή θώδηθα:

document.write(myCars[0]);
ζα έρεη ζαλ απνηέιεζκα εμόδνπ ην αθόινπζν:

Saab
Τροποποίηζη ηιμών ζε έναν πίνακα: Γηα λα ηξνπνπνηήζνπκε κία ηηκή ζε έλα ήδε ππάξρνληα πίλαθα, απιά
πξνζζέηνπκε κία λέα ηηκή ζηνλ πίλαθα κε ηε ζπγθεθξηκέλε ηηκή επξεηεξίνπ:
myCars[0]="Opel";
ηώξα ε αθόινπζε γξακκή θώδηθα:

document.write(myCars[0]);
ζα έρεη ζαλ απνηέιεζκα εμόδνπ ην αθόινπζν:

Opel
Μαθημαηικό Object: Τν Math object καο επηηξέπεη λα εθηεινύκε καζεκαηηθέο πξάμεηο. Τν Math object πεξηιακβάλεη
πνιιέο καζεκαηηθέο ζηαζεξέο θαη κεζόδνπο.
Σύληαμε γηα ρξήζε καζεκαηηθώλ ηδηνηήησλ/κεζόδσλ:
var x=Math.PI;
var y=Math.sqrt(16);
Μαθημαηικές Σηαθερές: Η JavaScript παξέρεη 8 καζεκαηηθέο ζηαζεξέο πνπ κπνξνύλ λα πξνζπειαζηνύλ από
καζεκαηηθά objects. Απηέο είλαη: e, pi, x2, x1/2, log2, log10, log2e, θαη log10e. Μπνξνύκε λα θάλνπκε αλαθνξά ζε απηέο
ηηο ζηαζεξέο από JavaScript σο εμήο:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Μαθημαηικές μέθοδοι: Δπηπιένλ ζηηο καζεκαηηθέο ζηαζεξέο κπνξνύκε λα έρνπκε πξόζβαζε από καζεκαηηθά objects
όπνπ ππάξρνπλ πάξα πνιιέο κέζνδνη δηαζέζηκεο. Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηε κέζνδν round() ησλ
καζεκαηηθώλ objects γηα λα ζηξνγγπινπνηήζεη έλαλ αξηζκό ζην πιεζηέζηεξν αθέξαην αξηζκό ηνπ:
document.write(Math.round(4.7)); Η έμνδνο ηνπ θώδηθα είλαη:

5
Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηε κέζνδν random() ησλ καζεκαηηθώλ objects γηα λα επηζηξέςεη έλαλ ηπραίν
αξηζκό κεηαμύ 0 θαη 1:
Η έμνδνο ηνπ θώδηθα είλαη:
document.write(Math.random()); 0.4017659320961684
Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηηο κεζόδνπο floor() θαη random()ησλ καζεκαηηθώλ objects γηα λα επηζηξέςεη
έλαλ ηπραίν αξηζκό κεηαμύ 0 θαη 10:
Η έμνδνο ηνπ θώδηθα είλαη:
document.write(Math.floor(Math.random()*11)); 4
Browser
Ενηοπιζμός Browser: Μεξηθέο θνξέο είλαη ρξήζηκν λα κπνξνύκε λα εληνπίζνπκε ηνλ browser κε ην νπνίν πινεγείηαη ν
επηζθέπηεο ζηε ζειίδα καο, ώζηε λα κπνξνύκε λα ηνπ παξέρνπκε θαηάιιειεο πιεξνθνξίεο. Τν Navigator object
πεξηέρεη πιεξνθνξίεο ζρεηηθά κε ην όλνκα, ηελ έθδνζε, θ.ά. ηνπ browser ηνπ επηζθέπηε.
Navigator Object:
<html>
<body>
<div id="example"></div>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
Cookies
Έλα cookie είλαη κία κεηαβιεηή πνπ απνζεθεύεηαη ζηνλ ππνινγηζηή ηνπ επηζθέπηε. Κάζε θνξά πνπ ν ίδηνο ππνινγηζηήο
αλαδεηάεη κία ζειίδα κε έλαλ browser, ζα ζηέιλεη επίζεο ην cookie. Με ην JavaScript, κπνξνύκε λα ζεκηνπξγήζνπκε
αιιά θαη λα αλαθηήζνπκε ηηκέο cookie. Παξαδείγκαηα από cookies:
 Name cookie – Τελ πξώηε θνξά πνπ έλαο επηζθέπηεο εηζέξρεηαη ζηελ ηζηνζειίδα, ζα πξέπεη λα ζπκπιεξώζεη ην
όλνκά ηνπ. Τν όλνκα έπεηηα απνζεθεύεηαη ζε έλα cookie θαη ηελ επόκελε θνξά πνπ ν επηζθέπηεο έξρεηαη ζηε
ζειίδα, ιακβάλεη έλα κήλπκα θαισζνξίζκαηνο ("Welcome John!"), ην όλνκα αλαθηάηαη από ην απνζεθεπκέλν cookie
 Password cookie - Τελ πξώηε θνξά πνπ έλαο επηζθέπηεο εηζέξρεηαη ζηελ ηζηνζειίδα, ζα πξέπεη λα ζπκπιεξώζεη
έλαλ θσδηθό. Ο θσδηθόο απηόο έπεηηα απνζεθεύεηαη ζε έλα cookie θαη ηελ επόκελε θνξά πνπ ν επηζθέπηεο έξρεηαη
ζηε ζειίδα, ν θσδηθόο αλαθηάηαη από ην cookie
 Date cookie - Τελ πξώηε θνξά πνπ έλαο επηζθέπηεο εηζέξρεηαη ζηελ ηζηνζειίδα, ε ηξέρνπζα εκεξνκελία
απνζεθεύεηαη ζε έλα cookie. Τελ επόκελε θνξά πνπ ν επηζθέπηεο έξρεηαη ζηε ζειίδα, ιακβάλεη έλα κήλπκα ("Η
ηειεπηαία ζνπ επίζθεςε ήηαλ ηε Γεπηέξα 31 Οθησβξίνπ 2011!"). Η εκεξνκελία αλαθηάηαη από ην απνζεθεπκέλν
cookie
Δημιοσργία και Αποθήκεσζη ενός Cookie
Σε απηό ην παξάδεηγκα ζα δεκηνπξγήζνπκε έλα cookie πνπ ζα απνζεθεύεη ην όλνκα ελόο επηζθέπηε. Τελ πξώηε θνξά
πνπ ν επηζθέπηεο εηζέξρεηαη ζηελ ηζηνζειίδα, ηνπ δεηείηε λα ζπκπιεξώζεη ην όλνκά ηνπ. Τν όλνκα έπεηηα απνζεθεύεηαη
ζε έλα cookie. Τελ επόκελε θνξά πνπ ν επηζθέπηεο έξρεηαη ζηελ ίδηα ζειίδα, ζα ιάβεη έλα κήλπκα θαισζνξίζκαηνο.
Αξρηθά, δεκηνπξγνύκε κία ζπλάξηεζε πνπ απνζεθεύεη ην όλνκα ηνπ επηζθέπηε ζε κία κεηαβιεηή ηύπνπ cookie:
function setCookie(c_name,value,exdays)
{
var exdate=new Date();

exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
Οη παξάκεηξνη ηηο παξαπάλσ ζπλάξηεζεο θξαηνύλ ην όλνκα ηνπ cookie, ηελ ηηκή ηνπ cookie, θαη ησλ αξηζκό ησλ
εκεξώλ κέρξη ην cookie λα ιήμεη. Σηε ζπλάξηεζε αξρηθά κεηαηξέπνπκε ηνλ αξηζκό ησλ εκεξώλ ζε κία έγθπξε
εκεξνκελία κέρξη ηε ιήμε ηνπ cookie. Έπεηηα, απνζεθεύνπκε ην όλνκα ηνπ cookie, ηελ ηηκή ηνπ cookie, θαη ηελ
εκεξνκελία ιήμεο ζε έλα document.cookie object. Αθνινύζσο, δεκηνπξγνύκε κία άιιε ζπλάξηεζε ε νπνία επηζηξέθεη
ην ζπγθεθξηκέλν cookie:
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
Η παξαπάλσ ζπλάξηεζε δεκηνπξγεί έλαλ πίλαθα γηα ηελ αλάθηεζε ησλ νλνκάησλ θαη ησλ ηηκώλ ηνπ cookie, έπεηηα
ειέγρεη αλ ην ζπγθεθξηκέλν cookie ππάξρεη, θαη επηζηξέθεη ηελ ηηκή ηνπ. Τέινο, δεκηνπξγνύκε κία ζπλάξηεζε ε νπνία
δείρλεη έλα κήλπκα θαισζνξίζκαηνο εάλ ην cookie έρεη ηεζεί, θαη εάλ ην cookie δελ έρεη ηεζεί ζα δείμεη έλα prompt box,
πνπ ζα ξσηάεη γηα ην όλνκα ηνπ ρξήζηε, θαη ζα απνζεθεύεη ην username cookie γηα 365 εκέξεο, θαιώληαο ηε
ζπλάξηεζε setCookie:
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
{
setCookie("username",username,365);
}
}
}
Παράδειγμα:
<html>
<head>
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
Επικύρωςη
Επικύρωζη θορμών: Τν JavaScript κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ επηθύξσζε δεδνκέλσλ ζε HTML θόξκεο πξηλ
ηελ απνζηνιή ηνπ πεξηερνκέλνπ ηνπο ζε έλα server. Τα δεδνκέλα θνξκώλ πνπ ζα κπνξνύζαλ ηππηθά λα εμεηαζηνύλ
από έλα JavaScript είλαη:
 Έρεη αθήζεη ν ρξήζηεο πεδία πνπ απαηηείηαη ε ζπκπιήξσζή ηνπο θελά;
 Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή δηεύζπλζε e-mail;
 Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή εκεξνκελία;
 Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή θείκελν ζε έλα πεδίν πνπ δέρεηαη κόλν αξηζκνύο;
Επικύρωζη Απαιηούμενων Πεδίων: Η πην θάησ ζπλάξηεζε ειέγρεη εάλ έλα πεδίν έρεη αθεζεί θελό. Αλ ην πεδίν είλαη
θελό, έλα alert box πξνβάιεη έλα κήλπκα, ε ζπλάξηεζε επηζηξέθεη ςεπδήο, θαη ε θόξκα δελ ππνβάιιεηαη:
<html>
<head>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">

</form>
</body>
</html>
Επικύρωζη E-mail: Η παξαθάησ ζπλάξηεζε ειέγρεη αλ ην πεξηερόκελν έρεη ηε γεληθή ζύληαμε ελόο email. Απηό
ζεκαίλεη όηη ηα εηζεξρόκελα δεδνκέλα πξέπεη λα πεξηέρνπλ έλα ζύκβνιν @ θαη ηνπιάρηζηνλ κία ηειεία (.). Δπίζεο, ην @
δε ζα πξέπεη λα είλαη ν πξώηνο ραξαθηήξαο ηεο email δηεύζπλζεο, θαη ε ηειεπηαία ηειεία ζα πξέπεη λα είλαη κεηά ην
ζύκβνιν @, θαη ηνπιάρηζηνλ 2 ραξαθηήξεο πξηλ ην ηέινο:
<html>
<head>
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
</form>
</body>
</html>
Συγχρονιςμόσ
Με ηε JavaScript, είλαη δπλαηό λα εθηειέζνπκε θάπνην θώδηθα κεηά από έλα θαζνξηζκέλν ρξόλν, απηό νλνκάδεηαη
ζπγρξνληζκέλν γεγνλόο. Δίλαη πνιύ εύθνιν λα δεκηνπξγήζνπκε ζπγρξνληζκέλα γεγνλόηα κε JavaScript, νη δύν
κέζνδνη-θιεηδία είλαη:
 setTimeout() –εθηειεί έλα θώδηθα θάπνηα ζηηγκή ζην κέιινλ
 clearTimeout() – αθπξώλεη ην setTimeout()
Η μέθοδος setTimeout(): Δπηζηξέθεη κία ηηκή. Σηε ζύληαμε ηεο, πνπ θαίλεηαη αθνινύζσο, ε ηηκή απνζεθεύεηαη ζε
κία κεηαβιεηή πνπ νλνκάδεηαη T. Δάλ ζέινπκε λα αθπξώζνπκε ηε ζπλάξηεζε setTimeout(), κπνξνύκε λα αλαθεξζνύκε
ζε απηή ρξεζηκνπνηώληαο ην όλνκα ηεο κεηαβιεηήο. Η πξώηε παξάκεηξνο ηεο setTimeout() κπνξεί λα είλαη έλα string
εθηειέζηκνπ θώδηθα ή κία θιήζε ζε κία ζπλάξηεζε. Η δεύηεξε παξάκεηξνο δείρλεη ζε πόζα ρηιηνζηά ηνπ δεπηεξνιέπηνπ
από ηώξα ζέινπκε λα εθηειεζηεί ε πξώηε παξάκεηξνο.
var t=setTimeout("javascript statement",milliseconds);
Παράδειγμα: Όηαλ γίλεη θιηθ ζην θνπκπί, έλα alert box ζα εκθαληζηεί κεηά από 3 δεπηεξόιεπηα:
<html>
<head>
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello");

}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 3 seconds" onClick="timeMsg()" />
</form>
</body>
</html>
Παράδειγμα: Αηέξκνλνο Βξόγρνο: Γηα λα πάξνπκε έλα ζπγρξνληζκό πνπ ζα ελεξγνπνηήζεη έλαλ αηέξκνλν βξόγρν ζα
πξέπεη λα γξάςνπκε κία ζπλάξηεζε πνπ ζα θαιεί ηνλ εαπηό ηεο. Σην παξάδεηγκα πνπ αθνινπζεί, όηαλ γίλεηαη θιηθ ζην
θνπκπί, ην πεδίν εηζεξρόκελεο πιεξνθνξίαο αξρίδεη λα κεηξάεη (γηα πάληα), μεθηλώληαο από ην 0.
<html>
<head>
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>
Η μέθοδος clearTimeout()
clearTimeout(setTimeout_variable)
Παράδειγμα: Τν παξάδεηγκα πνπ αθνινπζεί είλαη ην ίδην κε ην πξνεγνύκελν, κε ηε δηαθνξά όηη ηώξα έρνπκε
πξνζζέζεη ην θνπκπί "Stop Count!" πνπ ζηακαηάεη ην ζπγρξνληζκό:
<html>
<head>
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;

c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onclick="stopCount()" />
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever,
starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!"
button to start the timer again.
</p>
</body>
</html>

JavaScript Examples
Document Objects
Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα:
<html>
<body>
<img border="0" src="klematis.jpg" width="150" height="113" />

<img border="0" src="klematis2.jpg" width="152" height="128" />
<p>Number of images:
document.write(document.images.length);
</script></p>
</body>
</html>
Παράδειγμα 2: Ημεπομηνία και ώπα ηελεςηαίαρ ηποποποίηζηρ ηηρ ζελίδαρ:
<html>
<body>
This document was last modified on:

document.write(document.lastModified);
</script>
</body>
</html>
Παράδειγμα 3: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο:
<html>
<head>
function createDoc()
{
var doc=document.open("text/html","replace");
var txt="<html><body>Learning about the HTML DOM is fun!</body></html>";
doc.write(txt);
doc.close();
}
</script>
</head>
<body>
<input type="button" value="New document" onclick="createDoc()" />
</body>
</html>
Παράδειγμα 4: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο:
<html>
<head>
function createDoc()
{
var doc=document.open("text/html","replace");
var txt="<html><body>Learning about the HTML DOM is fun!</body></html>";
doc.write(txt);
doc.close();
}
</script>
</head>
<body>
<input type="button" value="New document" onclick="createDoc()" />
</body>
</html>

JavaScript Examples
Image Objects
Παράδειγμα 1: Σηοίσιζη εικόναρ:
<html>
<head>
function alignImg()
{
document.getElementById("compman").align="right";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98" />

<p>Some text. Some text. Some text. Some text.</p>
<input type="button" onclick="alignImg()" value="Align Image" />
</body>
</html>
Παράδειγμα 2: Ππόζθεζη πεπιγπάμμαηορ γύπω από μία εικόνα:
<html>
<head>
function addBorder()
{
document.getElementById("compman").border="2";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98" />

<br /><br />
<input type="button" onclick="addBorder()" value="Add border" />
</body>
</html>
Παράδειγμα 3: Αλλάζονηαρ μέγεθορ μιαρ εικόναρ:
<html>
<head>
function changeSize()
{
document.getElementById("compman").height="250";
document.getElementById("compman").width="300";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />

<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image" />
</body>
</html>
Παράδειγμα 4: Χαμηλώνονηαρ ηην ανάλςζη μιαρ εικόναρ:
<html>
<body>
<img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="Computerman" width="107"

height="98" />
<br />

JavaScript Examples
var x=document.getElementById("compman");
document.write('<a href="' + x.lowsrc + '">Low resolution</a>');
</script>
</body>
</html>
Παράδειγμα 5: Ανηικαθιζηώνηαρ μία εικόνα:
<html>
<head>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98" />

<br /><br />
<input type="button" onclick="changeSrc()" value="Change image" />
</body>
</html>
Event Objects
Παράδειγμα 1: Αναγνώπιζη απιζηεπού ή δεξιού κλικ πονηικιού:
<html>
<head>
function whichButton(event)
{
if (event.button==2)
{
alert("You clicked the right mouse button!");
}
else
{
alert("You clicked the left mouse button!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
</html>
Παράδειγμα 2: Αναγνώπιζη ζε ποιο HTML ζηοισείο έγινε κλικ:
<html>
<head>
function whichElement(e)
{
var targ;
if (!e)
{
var e=window.event;
}
if (e.target)
{
targ=e.target;
}

JavaScript Examples
else if (e.srcElement)
{
targ=e.srcElement;
}
if (targ.nodeType==3) // defeat Safari bug
{
targ = targ.parentNode;
}
var tname;
tname=targ.tagName;
alert("You clicked on a " + tname + " element.");
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked
on.</p>
<h3>This is a header</h3>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">
</body>
</html>
Μικροεφαρμογέσ
Παράδειγμα 1: Επικύπωζη ηων Σηοισείων μιαρ Φόπμαρ:
<html>
<head>
function validate() {
x=document.myForm
at=x.email.value.indexOf("@")
code=x.code.value
firstname=x.fname.value
submitOK="True"
if (at==-1) {
alert("Check email address!")
submitOK="False"
if (code<1 || code>10) {
alert("The number is not acceptable. Please retry.")
submitOK="False"
if (firstname.length>10) {
alert("The name is not acceptable. Please retry.")
submitOK="False"

JavaScript Examples
if (submitOK=="False") {
return false
</script>
</head>
<body>
<form name="myForm" action="submitpage.html" onsubmit="return validate()">
Email address :
<input type="text" name="email" size="20"><br />
Pick a number between 1-10 :
<input type="text" name="code" size="20"><br />
Choose a name (up to 10 characters) :
<input type="text" name="fname" size="20"><br />
</form>
</body>
</html>
Παράδειγμα 2: Λίζηα επιλογήρ ζε μία θόπμα:
<html>
<head>
function put() {
txt=document.forms[0].myList.
options[document.forms[0].myList.selectedIndex].text
document.forms[0].favorite.value=txt
</script>
</head>
<body>
<form>
Please choose your favourite browser :
<select name="myList" onchange="put()">
<option>Internet Explorer</option>
<option>Chrome</option>
<option>Opera</option>
<option>Firefox</option>
</select>

JavaScript Examples
<br /><br />
Your favourite browser is:
<input type="text" name="favorite" size="20">
</form>
</body>
</html>
Παράδειγμα 3: Κςλιόμενο μήνςμα:
<html>
<head>
<script language="JavaScript">
msg = "This is my message - ";
msg += "Cool yeah?!";
pos = 0;
function ScrollMessage() {
var newtext = msg.substring(pos, msg.length) + " … " + msg.substring(0,

pos);
t1.firstChild.nodeValue = newtext;
pos++;
if (pos>msg.length) pos=0;
window.setTimeout("ScrollMessage()", 200);
} // end function
</script>
</head>
<body onLoad="ScrollMessage();">
<h1> My message:
</h1>
<table width="90%" border="1">
<tr>
<td id="t1" width="90%"> </td>
</tr>
</table>
</body>
</html>


Javascript 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript 2

Uploaded by

Copyright:

Available Formats

JavaScript Basic

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

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

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

<script type="text/javascript"> Οη γξακκέο κεηαμύ ησλ <script> θαη </script>

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

JavaScript: Αξηζκεηηθέο Πξάμεηο

Τειεζηήο Πεξηγξαθή Παξάδεηγκα Απνηέιεζκα

JavaScript: Αλάζεζε Τειεζηώλ

Τειεζηήο Παξάδεηγκα Αληίζηνηρα Απνηέιεζκα

Ο ηειεζηήο + ρξεζηκνπνηνύκελνο ζε strings: Σνπνζεηεί καδί κεηαβιεηέο ηύπνπ string ή θείκελν:

txt1="What a very ";

Παξάδεηγκα: Πξνζζέηνληαο strings θαη αξηζκνύο:

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Τελεςτϋσ Σύγκριςησ & Λογικού Τελεςτϋσ

Τειεζηήο Πεξηγξαθή Παξάδεηγκα

Παξάδεηγκα: if (age<18) document.write("Too young");

Τειεζηήο Πεξηγξαθή Παξάδεηγκα

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

if (time < 10)

<p>This example demonstrates the If statement.</p>

if (time < 10)

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

<input type="button" onclick="show_alert()" value="Show alert box" />

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

<input type="button" onclick="show_prompt()" value="Show prompt box" />

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

<p>This for loop starts with i=0.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Παρατήση: Σν <= ζα κπνξνύζε λα είλαη νπνηνζδήπνηε ηειεζηήο.

<p><b>i</b> equal to 0.</p>

<p>The loop will run</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

Δηλώςεισ Break & Continue

for (variable in object)

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

<input type="text" size="30" id="email" onchange="checkEmail()">

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

<area shape ="circle" coords ="90,58,3"

<area shape ="circle" coords ="124,58,8"

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

<script type="text/javascript"> Η έμνδνο ηνπ θώδηθα είλαη:

<script type="text/javascript"> Η έμνδνο ηνπ θώδηθα είλαη:

new Date() // current date and time

var today = new Date()

var myDate=new Date();

var myDate=new Date();

var x=new Date();

Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

Η αθόινπζε γξακκή θώδηθα:

ζα έρεη ζαλ απνηέιεζκα εμόδνπ ην αθόινπζν:

ηώξα ε αθόινπζε γξακκή θώδηθα:

ζα έρεη ζαλ απνηέιεζκα εμόδνπ ην αθόινπζν:

Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ

document.write(Math.round(4.7)); Η έμνδνο ηνπ θώδηθα είλαη:

Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ