Ειςαγωγό 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: http://ekoletsou.gr Page 1
κπνξνύκε λα ηνπνζεηήζνπκε έλα 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: http://ekoletsou.gr Page 2
Τελεςτϋσ 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); x="5"+"5"; WEB: http://ekoletsou.gr Page 3
document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); <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: http://ekoletsou.gr Page 4
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: http://ekoletsou.gr Page 5
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: http://ekoletsou.gr Page 6
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: http://ekoletsou.gr Page 7
<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: http://ekoletsou.gr Page 8
<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); <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: http://ekoletsou.gr Page 9
Ο βξόγρνο επαλάιεςεο While: Επαλαιακβάλεη έλα θνκκάηη θώδηθα όζν ε ζπλζήθε πνπ εκπεξηέρεη είλαη αιεζήο. while (variable<=endvalue) code to be executed Παρατήση: Σν <= ζα κπνξνύζε λα είλαη νπνηνζδήπνηε ηειεζηήο. i=0; while (i<=5) document.write("the number is " + i); 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); 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: http://ekoletsou.gr Page 10
Η δήισζε break: «πάεη» κία επαλάιεςε θαη ζπλερίδεη ηνλ θώδηθα πνπ αθνινπζεί κεηά ηελ επαλάιεςε (εάλ ππάξρεη): var i=0; for (i=0;i<=10;i++) if (i==3) break; document.write("the number is " + i); <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); <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: http://ekoletsou.gr Page 11
Γεγονότα 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 ζηνηρείν: 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: http://ekoletsou.gr Page 12
Δόλωςη 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="http://www.w3schools.com/"; <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: http://ekoletsou.gr Page 13
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: http://ekoletsou.gr Page 14