JavaScript Basic. Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα γξάθεη έλα ζηνηρείν <p> κε ηελ πιεξνθνξία γηα ηελ ηξέρνπζα εκεξνκελία ζην HTML έγγξαθν:

Transcript

1 Ειςαγωγό JavaScript Basic Τη είλαη ην JavaScript; Σν JavaScript ζρεδηάζηεθε γηα λα πξνζζέζεη δηαδξαζηηθόηεηα ζηηο HTML ζειίδεο. Είλαη κία scripting γιώζζα, δειαδή γηα ειαθξύ πξνγξακκαηηζκό, πνπ είλαη ζπλήζσο εκθσιεπκέλε απεπζείαο κέζα ζε HTML ζειίδεο. Τη κπνξεί ε JavaScript λα θάλεη; δίλεη ζηνπο HTML έλα πξνγξακκαηηζηηθό εξγαιείν κπνξεί λα αληηδξάζεη ζε γεγνλόηα κπνξεί λα δηαβάζεη θαη λα γξάςεη HTML ζηνηρεία κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ επηθύξσζε δεδνκέλσλ κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ αλίρλεπζε ηνπ browser ηνπ επηζθέπηε κπνξεί λα ρξεζηκνπνηεζεί γηα ηε δεκηνπξγία cookies Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα γξάθεη έλα ζηνηρείν <p> κε ηελ πιεξνθνξία γηα ηελ ηξέρνπζα εκεξνκελία ζην HTML έγγξαθν: <h1>my First Web Page</h1> document.write("<p>" + Date() + "</p>"); Αιιάδνληαο ηα HTML ζηνηρεία: Σν αθόινπζν παξάδεηγκα γξάθεη ηελ ηξέρνπζα εκεξνκελία κέζα ζε έλα ήδε ππάξρνλ ζηνηρείν <p>: <h1>my First Web Page</h1> <p id="demo">this is a paragraph.</p> document.getelementbyid("demo").innerhtml=date(); Σημείωση: Γηα λα δηαρεηξηζηεί HTML ζηνηρεία, ην JavaScript ρξεζηκνπνηεί ηε κέζνδν getelementbyid(). Η κέζνδνο απηή έρεη πξόζβαζε ζην ζηνηρείν κε ην ζπγθεθξηκέλν id. Επεμήγεζε παξαδεηγκάησλ: Γηα ηελ εηζαγσγή ελόο JavaScript κέζα ζε κία HTML ζειίδα, ρξεζηκνπνηνύκε ην tag <script>. Μέζα ζην tag <script> ρξεζηκνπνηείηαη ν ηύπνο ηνπ ραξαθηεξηζηηθνύ ώζηε λα επεμεγήζεη ηε scripting γιώζζα. Σα <script> θαη ιέλε πνπ αξρίδεη θαη πνπ ηειείώζεη ην JavaScript. <h1>my First Web Page</h1> <p id="demo">this is a paragraph.</p> //This is a comment... some JavaScript code... Οη γξακκέο κεηαμύ ησλ <script> θαη πεξηέρνπλ ην JavaScript θαη εθηεινύληαη από ηνλ browser. Σημείωση: Παξαηεξείζηε όηη ην JavaScript ηνπνζεηήζεθε ζην θάησ κέξνο ηεο ζειίδαο ώζηε λα δηαζθαιίζεη όηη δε ζα εθηειεζηεί πξηλ ηε δεκηνπξγία ηνπ ζηνηρείνπ <p>. (Περίπτωση τοποθέτησης JavaScript μέσα στο ). JavaScript- Σπλαξηήζεηο θαη Γεγνλόηα: Μέζα ζε κία HTML ζειίδα ην JavaScripts ζε εθηειεζηεί όηαλ ε ζειίδα θνξηώλεηαη, απηό όκσο δελ είλαη θάηη πνπ ην ζέινπκε πάληα. Μεξηθέο θνξέο επηζπκνύκε λα εθηειεζηεί έλα JavaScript όηαλ ζπκβαίλεη έλα γεγνλόο (event), πρ όηαλ ν ρξήζεο θάλεη θιηθ ζε έλα θνπκπί. Όηαλ έρνπκε απηή ηελ πεξίπησζε Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 1

2 JavaScript Basic κπνξνύκε λα ηνπνζεηήζνπκε έλα script κέζα ζε κία ζπλάξηεζε (function). Σα γεγνλόηα ζπλήζσο ρξεζηκνπνηνύληαη ζε ζπλδπαζκό κε ηηο ζπλαξηήζεηο. Περίπτωση τοποθέτησης JavaScript μέσα στο : Σν αθόινπζν παξάδεηγκα θαιεί κία ζπλάξηεζε όηαλ γίλεηαη θιηθ ζε έλα θνπκπί: function displaydate() /*This is my first function that will display the Date */ document.getelementbyid("demo").innerhtml=date(); <h1>my First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displaydate()">display Date</button> Scripts ζην θαη ζην : Μπνξνύκε λα ηνπνζεηήζνπκε έλαλ κε-πεξηνξηζκέλν αξηζκό από scripts ζηε ζειίδα καο, θαη κπνξνύκε λα έρνπκε ηαπηόρξνλα scripts ζην body θαη ζην head. Παξόια απηά, ζπλεζίδεηαη λα ηνπνζεηνύκε όιεο ηηο ζπλαξηήζεηο ζηελ πεξηνρή ηνπ head, ή ζην ηέινο ηεο ζειίδαο. Με απηό ηνλ ηξόπν είλαη όια ζε έλα ζεκείν θαη δελ παξεκβαίλνπλ ζην ππόινηπν πεξηερόκελν ηεο ζειίδαο. Χξεζηκνπνηώληαο έλα εμσηεξηθό JavaScript: Σα JavaScript κπνξνύλ αθόκε θαη λα ηνπνζεηεζνύλ ζε εμσηεξηθά αξρεία. Σα αξρεία ησλ εμσηεξηθώλ JavaScript ζπλήζσο πεξηέρνπλ θώδηθα πνπ κπνξεί λα ρξεζηκνπνηεζεί από δηάθνξεο ζειίδεο, θαη έρνπλ θαηάιεμε αξρείνπ.js. Προσοχή! Σα εμσηεξηθά script δελ κπνξνύλ λα πεξηέρνπλ ηα tags <script>. Γηα λα ρξεζηκνπνηήζνπκε έλα εμσηεξηθό script, δείρλνπκε ην αξρείν.js ζην ραξαθηεξηζηηθό "src" κέζα ζην tag <script>: <script type="text/javascript" src="xxx.js"> Μεταβλητϋσ Γηα λα δεκηνπξγήζνπκε κεηαβιεηέο ζε JavaScript ρξεζηκνπνηνύκε ηε ιέμη-θιεηδί var: var x; var carname; Οη παξαπάλσ κεηαβιεηέο, όκσο, είλαη θελέο (ρσξίο ηηκέο). Παξόια απηά κπνξνύκε λα δεκηνπξγήζνπκε κεηαβιεηέο ζηηο νπνίεο θαηαρσξνύκε εμαξρήο θάπνηεο ηηκέο: var x=15; var carname="volvo"; var y=x-5; Τνπηθέο Μεηαβιεηέο JavaScript: Μία κεηαβιεηή πνπ θαζνξίδεηαη κέζα ζε κία JavaScript ζπλάξηεζε ζεσξείηαη ηνπηθή θαη κπνξεί κόλν λα πξνζπειαζηεί από ηε ζπγθεθξηκέλε ζπλάξηεζε. Μπνξνύκε λα έρνπκε ηνπηθέο κεηαβιεηέο κε ην ίδην όλνκα θάησ από δηαθνξεηηθέο ζπλαξηήζεηο, γηαηί νη ηνπηθέο κεηαβιεηέο αλαγλσξίδνληαη κόλν από ηε ζπλάξηεζε ζηελ νπνία θαζνξίδνληαη. Οη ηνπηθέο κεηαβιεηέο θαηαζηξέθνληαη κε ηε έμνδα από ηε ζπλάξηεζε. Καζνιηθέο Μεηαβιεηέο JavaScript: Οη κεηαβιεηέο πνπ θαζνξίδνληαη έμσ από κία ζπλάξηεζε ραξαθηεξίδνληαη σο θαζνιηθέο, θαη κπνξνύλ λα πξνζπειαζηνύλ από όια ηα scripts θαη ηηο ζπλαξηήζεηο ηεο ηζηνζειίδαο. Οη θαζνιηθέο κεηαβιεηέο δελ θαηαζηξέθνληαη όηαλ θιείζνπκε ηε ζειίδα. Αλ θαζνξίζνπκε κία κεηαβιεηή ρσξίο λα ρξεζηκνπνηήζνπκε ην "var", ε κεηαβιεηή ζα ζεσξείηαη πάληα θαζνιηθή. Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 2

3 Τελεςτϋσ 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 JavaScript: Αλάζεζε Τειεζηώλ x=y-- x=5 y=4 Τειεζηήο Παξάδεηγκα Αληίζηνηρα Απνηέιεζκα = 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 θαη αξηζκνύο: var x; x=5+5; document.write(x); document.write("<br />"); x="5"+"5"; Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 3

4 JavaScript Basic document.write(x); document.write("<br />"); x=5+"5"; document.write(x); document.write("<br />"); x="5"+5; document.write(x); document.write("<br />"); <p>the rule is: If you add a number and a string, the result will be a string.</p> Τελεςτϋσ Σύγκριςησ & Λογικού Τελεςτϋσ Τειεζηέο Σύγθξηζεο Τειεζηήο Πεξηγξαθή Παξάδεηγκα == ηζνύηαη κε 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 Παξάδεηγκα: Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 4

5 JavaScript Basic var d = new Date(); var time = d.gethours(); if (time < 10) document.write("<b>good morning</b>"); <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> Δήισζε If...else: Υξεζηκνπνηνύκε ηε δήισζε if...else γηα ηελ εθηέιεζε θάπνηνπ θώδηθα εάλ ε θαηάζηαζε είλαη αιεζήο θαη θάπνηνπ άιινπ θώδηθα εάλ ε θαηάζηαζε δελ είλαη αιεζήο: if (condition) code to be executed if condition is true else code to be executed if condition is not true Παξάδεηγκα: var d = new Date(); var time = d.gethours(); if (time < 10) document.write("<b>good morning</b>"); else document.write("<b>good day</b>"); <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> Δήισζε If...else if...else: Υξεζηκνπνηνύκε ηε δήισζε if...else if...else γηα ηελ επηινγή ελόο από ηα πνιιά θνκκάηηα θώδηθα πξνο εθηέιεζε: Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 5

6 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 Παξάδεηγκα: var d = new Date(); var time = d.gethours(); if (time<10) document.write("<b>good morning</b>"); else if (time>=10 && time<16) document.write("<b>good day</b>"); else document.write("<b>hello World!</b>"); <p> This example demonstrates the if..else if...else statement. </p> Δόλωςη 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 Παξάδεηγκα: var d=new Date(); var theday=d.getday(); Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 6

7 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>"); <p>this JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> Popup Boxes Τπάξρνπλ 3 είδε popup boxes ζην JavaScript: Alert box, Confirm box, and Prompt box. Alert Box: Έλα alert box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε λα επηβεβαηώζνπκε ηελ πιεξνθνξία πνπ έξρεηαη από ην ρξήζηε. Όηαλ έλα alert box γίλεηαη pop up, ν ρξήζηεο πξέπεη λα θιηθάξεη "OK" γηα λα ζπλερίζεη. alert("sometext"); Παξάδεηγκα: function show_alert() alert("hello! I am an alert box!"); <input type="button" onclick="show_alert()" value="show alert box" /> Confirm Box: Έλα confirm box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε ν ρξήζηεο λα επηβεβαηώζεη ή λα επαιεζεύζεη θάηη. Όηαλ έλα confirm box γίλεηαη pop up, ν ρξήζηεο είηε πξέπεη λα θιηθάξεη "OK" είηε "Cancel" γηα λα ζπλερίζεη. Αλ ν ρξήζηεο θιηθάξεη "OK", ην πιαίζην επηζηξέθεη αιεζέο, ελώ αλ θιηθάξεη "Cancel", ην πιαίζην επηζηξέθεη ςεπδέο. confirm("sometext"); Παξάδεηγκα: function show_confirm() var r=confirm("press a button!"); if (r==true) alert("you pressed OK!"); else alert("you pressed Cancel!"); Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 7

8 JavaScript Basic <input type="button" onclick="show_confirm()" value="show a confirm box" /> Prompt Box: Έλα prompt box ρξεζηκνπνηείηαη ζπρλά όηαλ ζέινπκε ν ρξήζηεο λα εηζάγεη κία ηηκή πξηλ εηζέξζεη ζηε ζειίδα. Όηαλ έλα prompt box γίλεηαη pop up, ν ρξήζηεο είηε πξέπεη λα θιηθάξεη "OK" είηε "Cancel" γηα λα ζπλερίζεη αθνύ εηζάγεη κία εηζεξρόκελε ηηκή. Αλ ν ρξήζηεο θιηθάξεη "OK", ην πιαίζην επηζηξέθεη ηελ εηζεξρόκελε ηηκή, ελώ αλ θιηθάξεη "Cancel", ην πιαίζην επηζηξέθεη θελό (null). prompt("sometext","defaultvalue"); Παξάδεηγκα: function show_prompt() var name=prompt("please enter your name","harry Potter"); if (name!=null && name!="") document.write("hello " + name + "! How are you today?"); <input type="button" onclick="show_prompt()" value="show prompt box" /> Συναρτόςεισ Γηα λα ζπγθξαηήζνπκε ηνλ browser ώζηε λα κελ εθηειέζεη θάπνηα script όηαλ θνξηώλεη ε ζειίδα, κπνξνύκε λα ηνπνζεηήζνπκε απηά ηα script κέζα ζε κία ζπλάξηεζε. Μία ζπλάξηεζε πεξηέρεη θώδηθα πνπ κπνξεί λα εθηειεζηεί από έλα γεγνλόο ή από κία θιήζε ζηε ζπλάξηεζε. Μπνξνύκε λα θαινύκε κία ζπλάξηεζε από νπνπδήπνηε κέζα ζε κία ζειίδα, ή αθόκε θαη από άιιεο ζειίδεο αλ απηή ε ζπλάξηεζε είλαη εκθσιεπκέλε ζε έλα εμσηεξηθό >js αξρείν. Οη ζπλαξηήζεηο κπνξνύλ λα θαζνξίδνληαη ηόζν ζηελ πεξηνρή ηνπ όζν θαη ηνπ κηαο ζειίδαο. Παξόια απηά, γηα λα επηβεβαηώζνπκε όηη ζε κία ζπλάξηεζε γίλεηαη αλάγλσζε/θόξησζε από ηνλ browser πξηλ απηή θιηζεί, είλαη πξνηηκόηεξν λα ηνπνζεηνύκε ηε ζπλάξηεζε κέζα ζηελ πεξηνρή ηνπ. function functionname(var1,var2,...,varx) some code Αξρή θαη ηέινο ηεο ζπλάξηεζεο Μεηαβιεηέο ή ηηκέο πνπ πεξλάλε κέζα ζηε ζπλάζηεζε Παξάδεηγκα: function displaymessage() alert("hello World!"); <form> <input type="button" value="click me!" onclick="displaymessage()" /> </form> Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 8

9 JavaScript Basic <p>by pressing the button above, a function will be called. The function will alert a message.</p> Η δήισζε return: Η δήισζε return ρξεζηκνπνηείηαη γηα λα θαζνξίζεη ηελ ηηκή πνπ ζα επηζηξαθεί από ηε ζπλάξηεζε. Έηζη, νη ζπλαξηήζεηο πνπ είλαη λα επηζηξέςνπλ κία ηηκή πξέπεη λα ρξεζηκνπνηνύλ ηε δήισζε return. Παξάδεηγκα: function product(a,b) return a*b; document.write(product(4,3)); <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> Βρόγχοι επανϊληψησ πρλά, όηαλ γξάθνπκε θώδηθα, ζέινπκε ην ίδην θνκκάηη θώδηθα λα ηξέρεη μαλά θαη μαλά ζε κία γξακκή. Αληί λα πξνζζέηνπκε πάξα πνιιέο θαη ζρεδόλ ίδηεο γξακκέο θώδηθα ζε έλα script, κπνξνύκε λα ρξεζηκνπνηήζνπκε βξόγρνπο επαλάιεςεο ώζηε λα εθηειείηαη ε εξγαζία καο κε απηό ηνλ ηξόπν. ην JavaScript, ππάξρνπλ 2 είδε βξόγρσλ επαλάιεςεο: for while Ο βξόγρνο επαλάιεςεο For: Υξεζηκνπνηείηαη όηαλ γλσξίδνπκε εθ ησλ πξνηέξσλ πόζεο θνξέο ζα ηξέμεη ην script. for (variable=startvalue;variable<=endvalue;variable=variable+increment) code to be executed Παξάδεηγκα: var i=0; for (i=0;i<=5;i++) document.write("the number is " + i); document.write("<br />"); <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> Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 9

10 JavaScript Basic Ο βξόγρνο επαλάιεςεο While: Επαλαιακβάλεη έλα θνκκάηη θώδηθα όζν ε ζπλζήθε πνπ εκπεξηέρεη είλαη αιεζήο. while (variable<=endvalue) code to be executed Παρατήση: Σν <= ζα κπνξνύζε λα είλαη νπνηνζδήπνηε ηειεζηήο. Παξάδεηγκα: i=0; while (i<=5) document.write("the number is " + i); document.write("<br />"); i++; <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> <p><b>i</b> will increase by 1 each time the loop runs.</p> Ο βξόγρνο επαλάιεςεο do while: Είλαη κία παξαιιαγή ηεο επαλάιεςεο while, ε νπνία εθηειεί έλα θνκκάηη θώδηθα ΜΟΝΟ ΜΙΑ ΦΟΡΑ, θαη έπεηηα ην επαλαιακβάλεη όζν ε ζπλζήθε πνπ εκπεξηέρεη είλαη αιεζήο. do code to be executed while (variable<=endvalue); Παξάδεηγκα: i = 0; do document.write("the number is " + i); document.write("<br />"); i++; while (i <= 5); <p>explanation:</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> <p>while <b>i</b> is less than, or equal to, 5, the loop will continue to run.</p> Δηλώςεισ Break & Continue Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 10

11 JavaScript Basic Η δήισζε break: «πάεη» κία επαλάιεςε θαη ζπλερίδεη ηνλ θώδηθα πνπ αθνινπζεί κεηά ηελ επαλάιεςε (εάλ ππάξρεη): var i=0; for (i=0;i<=10;i++) if (i==3) break; document.write("the number is " + i); document.write("<br />"); <p>explanation: The loop will break when i=3.</p> Η δήισζε continue: «πάεη» ηελ ηξέρνπζα επαλάιεςε θαη ζπλερίδεη κε ηελ επόκελε ηηκή: var i=0; for (i=0;i<=10;i++) if (i==3) continue; document.write("the number is " + i); document.write("<br />"); <p>explanation: The loop will break the current loop and continue with the next value when i=3.</p> Δόλωςη For In Η δήισζε for...in επαλαιακβάλεη ηηο ηδηόηεηεο ελόο αληηθεηκέλνπ: for (variable in object) code to be executed Παξάδεηγκα: var person=fname:"john",lname:"doe",age:25; for (x in person) document.write(person[x] + " "); Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 11

12 Γεγονότα 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. Η ζπλάξηεζε check () ζα θιηζεί όηαλ ν ρξήζηεο αιιάμεη ην πεξηερόκελν ηνπ πεδίνπ: <input type="text" size="30" id=" " onchange="check ()"> onsubmit: Σν γεγνλόο onsubmit ρξεζηκνπνηείηαη γηα ηελ επηθύξσζε ΌΛΩΝ ησλ πεδίσλ θόξκαο πξηλ ηελ ππνβνιή ησλ δεδνκέλσλ. ηε ζπλέρεηα δίλεηαη έλα παξάδεηγκα γηα ην πώο ρξεζηκνπνηείηαη ην γεγνλόο onsubmit. Η ζπλάξηεζε checkform() θαιείηαη όηαλ ν ρξήζηεο θιηθάξεη ην θνπκπί ππνβνιήο ηεο θόξκαο. Αλ νη ηηκέο ηνπ πεδίνπ δελ είλαη απνδεθηέο, ε ππνβνιή πξέπεη λα αθπξσζεί. Η ζπλάξηεζε checkform() επηζηξέθεη είηε αιεζέο είηε ςεπδέο. Εάλ επηζηξέςεη αιεζέο ε θόξκα ζα ππνβιεζεί, ελώ εάλ επηζηξέςεη ςεπδέο ε ππνβνιή ζα αθπξσζεί: <form method="post" action="xxx.htm" onsubmit="return checkform()"> onmouseover: Σν γεγνλόο onmouseover ρξεζηκνπνηείηαη γηα λα ελεξγνπνηήζεη κία ζπλάξηεζε όηαλ ν ρξήζηεο πεξάζεη ηνλ δείθηε ηνπ πνληηθηνύ πάλσ από έλα HTML ζηνηρείν: function writetext(txt) document.getelementbyid("desc").innerhtml=txt; <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> Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 12

13 Δόλωςη Try...catch JavaScript Basic Καηά ηελ πινήγεζή καο ζε ηζηνζειίδεο ζην 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, θαη ν θώδηθαο έθαλε αλαθαηεύζπλζε ζην ρξήζηε. Εάλ ε κέζνδνο επηβεβαίσζεο επηζηξέςεη αιεζέο, ν θώδηθα δε θάλεη ηίπνηε: 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=" <input type="button" value="view message" onclick="message()" /> Δόλωςη Throw Η δήισζε throw καο επηηξέπεη λα δεκηνπξγήζνπκε κία εμαίξεζε. Εάλ ρξεζηκνπνηνύκε απηή ηε δήισζε καδί κε ηε δήισζε try...catch, κπνξνύκε λα ειέγρνπκε ηε ξνή ηνπ πξνγξάκκαηνο θαη λα δεκηνπξγνύκε αθξηβή κελύκαηα ιαζώλ. throw exception Παξάδεηγκα: Σν αθόινπζν παξάδεηγκα θαζνξίδεη ηελ ηηκή κηαο κεηαβιεηήο πνπ νλνκάδεηαη x. Εάλ ε ηηκή ηεο x είλαη κεγαιύηεξε ηνπ 10, κηθξόηεξε ηνπ 0, ή όρη αξηζκόο, ζα εκθαλίζνπκε έλα ζθάικα. Σν ζθάικα ζα πηαζηεί από ην catch θαη ζα εκθαληζηεί ην θαηάιιειν κήλπκα ζθάικαηνο: var x=prompt("enter a number between 0 and 10:",""); try Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 13

14 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"); Ειδικού χαρακτόρεσ Κώδηθαο Εκθάληζε \' Απιό εηζαγσγηθό \" Δηπιό εηζαγσγηθό \\ Backslash \n Νέα γξακκή \t Tab \b Κελό Επιμϋλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 14

15 Objects JavaScript Objects & Advanced Ιδιόηηηες: Οη ηδηόηεηεο είλαη ηηκέο πνπ ζπζρεηίδνληαη κε έλα αληηθείκελν. Σην αθόινπζν παξάδεηγκα ρξεζηκνπνηνύκε ηελ ηδηόηεηα length ηνπ String object 1 γηα λα καο επηζηξέςεη ηνλ αξηζκό ησλ ραξαθηήξσλ από ηνπο νπνίνπο απνηειείηαη ην string: var txt="hello World!"; document.write(txt.length); Η έμνδνο ηνπ θώδηθα είλαη: 12 Μέθοδοι: Οη κέζνδνη είλαη ελέξγεηεο πνπ ζπζρεηίδνληαη κε έλα αληηθείκελν. Σην αθόινπζν παξάδεηγκα ρξεζηκνπνηνύκε ηε κέζνδν touppercase()ηνπ String object γηα λα καο εκθαλίζεη έλα θείκελν κε θεθαιαία γξάκκαηα: var str="hello world!"; document.write(str.touppercase()); Η έμνδνο ηνπ θώδηθα είλαη: HELLO WORLD! 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, :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 ρξεζηκνπνηείηαη γηα λα παξαπνηήζεη έλα απνζεθεπκέλν θνκκάηη θεηκέλνπ. Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 1

16 JavaScript Objects & Advanced Πίνακας 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, x 2, x 1/2, log 2, log 10, log 2e, θαη log 10e. Μπνξνύκε λα θάλνπκε αλαθνξά ζε απηέο ηηο ζηαζεξέο από JavaScript σο εμήο: Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 2

17 JavaScript Objects & Advanced Μαθημαηικές μέθοδοι: Δπηπιένλ ζηηο καζεκαηηθέο ζηαζεξέο κπνξνύκε λα έρνπκε πξόζβαζε από καζεκαηηθά objects όπνπ ππάξρνπλ πάξα πνιιέο κέζνδνη δηαζέζηκεο. Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηε κέζνδν round() ησλ καζεκαηηθώλ objects γηα λα ζηξνγγπινπνηήζεη έλαλ αξηζκό ζην πιεζηέζηεξν αθέξαην αξηζκό ηνπ: document.write(math.round(4.7)); Η έμνδνο ηνπ θώδηθα είλαη: 5 Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηε κέζνδν random() ησλ καζεκαηηθώλ objects γηα λα επηζηξέςεη έλαλ ηπραίν αξηζκό κεηαμύ 0 θαη 1: document.write(math.random()); Η έμνδνο ηνπ θώδηθα είλαη: Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί ηηο κεζόδνπο floor() θαη random()ησλ καζεκαηηθώλ objects γηα λα επηζηξέςεη έλαλ ηπραίν αξηζκό κεηαμύ 0 θαη 10: document.write(math.floor(math.random()*11)); Η έμνδνο ηνπ θώδηθα είλαη: 4 Browser Ενηοπιζμός Browser: Μεξηθέο θνξέο είλαη ρξήζηκν λα κπνξνύκε λα εληνπίζνπκε ηνλ browser κε ην νπνίν πινεγείηαη ν επηζθέπηεο ζηε ζειίδα καο, ώζηε λα κπνξνύκε λα ηνπ παξέρνπκε θαηάιιειεο πιεξνθνξίεο. Τν Navigator object πεξηέρεη πιεξνθνξίεο ζρεηηθά κε ην όλνκα, ηελ έθδνζε, θ.ά. ηνπ browser ηνπ επηζθέπηε. Navigator Object: <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; 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(); Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 3

18 JavaScript Objects & Advanced 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:",""); if (username!=null && username!="") setcookie("username",username,365); Παράδειγμα: 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); Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 4

19 JavaScript Objects & Advanced 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"); if (username!=null && username!="") alert("welcome again " + username); else username=prompt("please enter your name:",""); if (username!=null && username!="") setcookie("username",username,365); <body onload="checkcookie()"> Επικύρωςη Επικύρωζη θορμών: Τν JavaScript κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ επηθύξσζε δεδνκέλσλ ζε HTML θόξκεο πξηλ ηελ απνζηνιή ηνπ πεξηερνκέλνπ ηνπο ζε έλα server. Τα δεδνκέλα θνξκώλ πνπ ζα κπνξνύζαλ ηππηθά λα εμεηαζηνύλ από έλα JavaScript είλαη: Έρεη αθήζεη ν ρξήζηεο πεδία πνπ απαηηείηαη ε ζπκπιήξσζή ηνπο θελά; Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή δηεύζπλζε ; Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή εκεξνκελία; Έρεη εηζάγεη ν ρξήζηεο κία ζσζηή θείκελν ζε έλα πεδίν πνπ δέρεηαη κόλν αξηζκνύο; Επικύρωζη Απαιηούμενων Πεδίων: Η πην θάησ ζπλάξηεζε ειέγρεη εάλ έλα πεδίν έρεη αθεζεί θελό. Αλ ην πεδίν είλαη θελό, έλα alert box πξνβάιεη έλα κήλπκα, ε ζπλάξηεζε επηζηξέθεη ςεπδήο, θαη ε θόξκα δελ ππνβάιιεηαη: function validateform() var x=document.forms["myform"]["fname"].value; if (x==null x=="") alert("first name must be filled out"); return false; <form name="myform" action="demo_form.asp" onsubmit="return validateform()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="submit"> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 5

20 JavaScript Objects & Advanced </form> Επικύρωζη Η παξαθάησ ζπλάξηεζε ειέγρεη αλ ην πεξηερόκελν έρεη ηε γεληθή ζύληαμε ελόο . Απηό ζεκαίλεη όηη ηα εηζεξρόκελα δεδνκέλα πξέπεη λα πεξηέρνπλ έλα θαη ηνπιάρηζηνλ κία ηειεία (.). Δπίζεο, δε ζα πξέπεη λα είλαη ν πξώηνο ραξαθηήξαο ηεο δηεύζπλζεο, θαη ε ηειεπηαία ηειεία ζα πξέπεη λα είλαη κεηά ην θαη ηνπιάρηζηνλ 2 ραξαθηήξεο πξηλ ην ηέινο: function validateform() var x=document.forms["myform"][" "].value; var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) alert("not a valid address"); return false; <form name="myform" action="demo_form.asp" onsubmit="return validateform();" method="post"> <input type="text" name=" "> <input type="submit" value="submit"> </form> Συγχρονιςμόσ Με ηε JavaScript, είλαη δπλαηό λα εθηειέζνπκε θάπνην θώδηθα κεηά από έλα θαζνξηζκέλν ρξόλν, απηό νλνκάδεηαη ζπγρξνληζκέλν γεγνλόο. Δίλαη πνιύ εύθνιν λα δεκηνπξγήζνπκε ζπγρξνληζκέλα γεγνλόηα κε JavaScript, νη δύν κέζνδνη-θιεηδία είλαη: settimeout() εθηειεί έλα θώδηθα θάπνηα ζηηγκή ζην κέιινλ cleartimeout() αθπξώλεη ην settimeout() Η μέθοδος settimeout(): Δπηζηξέθεη κία ηηκή. Σηε ζύληαμε ηεο, πνπ θαίλεηαη αθνινύζσο, ε ηηκή απνζεθεύεηαη ζε κία κεηαβιεηή πνπ νλνκάδεηαη T. Δάλ ζέινπκε λα αθπξώζνπκε ηε ζπλάξηεζε settimeout(), κπνξνύκε λα αλαθεξζνύκε ζε απηή ρξεζηκνπνηώληαο ην όλνκα ηεο κεηαβιεηήο. Η πξώηε παξάκεηξνο ηεο settimeout() κπνξεί λα είλαη έλα string εθηειέζηκνπ θώδηθα ή κία θιήζε ζε κία ζπλάξηεζε. Η δεύηεξε παξάκεηξνο δείρλεη ζε πόζα ρηιηνζηά ηνπ δεπηεξνιέπηνπ από ηώξα ζέινπκε λα εθηειεζηεί ε πξώηε παξάκεηξνο. var t=settimeout("javascript statement",milliseconds); Παράδειγμα: Όηαλ γίλεη θιηθ ζην θνπκπί, έλα alert box ζα εκθαληζηεί κεηά από 3 δεπηεξόιεπηα: function timemsg() var t=settimeout("alertmsg()",3000); function alertmsg() alert("hello"); Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 6

21 JavaScript Objects & Advanced <form> <input type="button" value="display alert box in 3 seconds" onclick="timemsg()" /> </form> Παράδειγμα: Αηέξκνλνο Βξόγρνο: Γηα λα πάξνπκε έλα ζπγρξνληζκό πνπ ζα ελεξγνπνηήζεη έλαλ αηέξκνλν βξόγρν ζα πξέπεη λα γξάςνπκε κία ζπλάξηεζε πνπ ζα θαιεί ηνλ εαπηό ηεο. Σην παξάδεηγκα πνπ αθνινπζεί, όηαλ γίλεηαη θιηθ ζην θνπκπί, ην πεδίν εηζεξρόκελεο πιεξνθνξίαο αξρίδεη λα κεηξάεη (γηα πάληα), μεθηλώληαο από ην 0. 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(); <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> Η μέθοδος cleartimeout() cleartimeout(settimeout_variable) Παράδειγμα: Τν παξάδεηγκα πνπ αθνινπζεί είλαη ην ίδην κε ην πξνεγνύκελν, κε ηε δηαθνξά όηη ηώξα έρνπκε πξνζζέζεη ην θνπκπί "Stop Count!" πνπ ζηακαηάεη ην ζπγρξνληζκό: var c=0; var t; var timer_is_on=0; function timedcount() document.getelementbyid('txt').value=c; Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 7

22 JavaScript Objects & Advanced 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; <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> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 8

23 Document Objects JavaScript Examples Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα: <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); </p> Παράδειγμα 2: Ημεπομηνία και ώπα ηελεςηαίαρ ηποποποίηζηρ ηηρ ζελίδαρ: This document was last modified on: document.write(document.lastmodified); Παράδειγμα 3: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο: function createdoc() var doc=document.open("text/html","replace"); var txt="learning about the HTML DOM is fun!"; doc.write(txt); doc.close(); <input type="button" value="new document" onclick="createdoc()" /> Παράδειγμα 4: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο: function createdoc() var doc=document.open("text/html","replace"); var txt="learning about the HTML DOM is fun!"; doc.write(txt); doc.close(); <input type="button" value="new document" onclick="createdoc()" /> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 1

24 Image Objects JavaScript Examples Παράδειγμα 1: Σηοίσιζη εικόναρ: function alignimg() document.getelementbyid("compman").align="right"; <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" /> Παράδειγμα 2: Ππόζθεζη πεπιγπάμμαηορ γύπω από μία εικόνα: function addborder() document.getelementbyid("compman").border="2"; <img id="compman" src="compman.gif" alt="computerman" width="107" height="98" /> <br /><br /> <input type="button" onclick="addborder()" value="add border" /> Παράδειγμα 3: Αλλάζονηαρ μέγεθορ μιαρ εικόναρ: function changesize() document.getelementbyid("compman").height="250"; document.getelementbyid("compman").width="300"; <img id="compman" src="compman.gif" width="107" height="98" /> <br /><br /> <input type="button" onclick="changesize()" value="change size of image" /> Παράδειγμα 4: Χαμηλώνονηαρ ηην ανάλςζη μιαρ εικόναρ: <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="computerman" width="107" height="98" /> <br /> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 2

25 JavaScript Examples var x=document.getelementbyid("compman"); document.write('<a href="' + x.lowsrc + '">Low resolution</a>'); Παράδειγμα 5: Ανηικαθιζηώνηαρ μία εικόνα: function changesrc() document.getelementbyid("myimage").src="hackanm.gif"; <img id="myimage" src="compman.gif" width="107" height="98" /> <br /><br /> <input type="button" onclick="changesrc()" value="change image" /> Event Objects Παράδειγμα 1: Αναγνώπιζη απιζηεπού ή δεξιού κλικ πονηικιού: function whichbutton(event) if (event.button==2) alert("you clicked the right mouse button!"); else alert("you clicked the left mouse button!"); <body onmousedown="whichbutton(event)"> <p>click in the document. An alert box will alert which mouse button you clicked.</p> Παράδειγμα 2: Αναγνώπιζη ζε ποιο HTML ζηοισείο έγινε κλικ: function whichelement(e) var targ; if (!e) var e=window.event; if (e.target) targ=e.target; Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 3

26 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."); <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"> Μικροεφαρμογέσ Παράδειγμα 1: Επικύπωζη ηων Σηοισείων μιαρ Φόπμαρ: function validate() x=document.myform at=x. .value.indexof("@") code=x.code.value firstname=x.fname.value submitok="true" if (at==-1) alert("check 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" Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 4

27 JavaScript Examples if (submitok=="false") return false <form name="myform" action="submitpage.html" onsubmit="return validate()"> address : <input type="text" name=" " 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 /> <input type="submit" value="submit"> </form> Παράδειγμα 2: Λίζηα επιλογήρ ζε μία θόπμα: function put() txt=document.forms[0].mylist. options[document.forms[0].mylist.selectedindex].text document.forms[0].favorite.value=txt <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> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 5

28 JavaScript Examples <br /><br /> Your favourite browser is: <input type="text" name="favorite" size="20"> </form> Παράδειγμα 3: Κςλιόμενο μήνςμα: <script language="javascript"> pos = 0; msg = "This is my message - "; msg += "Cool yeah?!"; function ScrollMessage() pos); var newtext = msg.substring(pos, msg.length) + " " + msg.substring(0, t1.firstchild.nodevalue = newtext; pos++; if (pos>msg.length) pos=0; window.settimeout("scrollmessage()", 200); // end function <body onload="scrollmessage();"> <h1> My message: </h1> <table width="90%" border="1"> <tr> <td id="t1" width="90%"> </td> </tr> </table> Επιμέλεια ςημειώςεων: ΚΩΛΕΤΣΟΥ ΕΥΤΥΧΙΑ WEB: Page 6