JavaScript Objects & Advanced

Transcript

1 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

2 Πίνακας 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

3 Μαθημαηικές μέθοδοι: Δπηπιένλ ζηηο καζεκαηηθέο ζηαζεξέο κπνξνύκε λα έρνπκε πξόζβαζε από καζεκαηηθά 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

4 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

5 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

6 Επικύρωζη Η παξαθάησ ζπλάξηεζε ειέγρεη αλ ην πεξηερόκελν έρεη ηε γεληθή ζύληαμε ελόο . Απηό ζεκαίλεη όηη ηα εηζεξρόκελα δεδνκέλα πξέπεη λα πεξηέρνπλ έλα θαη ηνπιάρηζηνλ κία ηειεία (.). Δπίζεο, δε ζα πξέπεη λα είλαη ν πξώηνο ραξαθηήξαο ηεο δηεύζπλζεο, θαη ε ηειεπηαία ηειεία ζα πξέπεη λα είλαη κεηά ην θαη ηνπιάρηζηνλ 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"> Συγχρονιςμόσ Με ηε 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

7 <form> <input type="button" value="display alert box in 3 seconds" onclick="timemsg()" /> Παράδειγμα: Αηέξκνλνο Βξόγρνο: Γηα λα πάξνπκε έλα ζπγρξνληζκό πνπ ζα ελεξγνπνηήζεη έλαλ αηέξκνλν βξόγρν ζα πξέπεη λα γξάςνπκε κία ζπλάξηεζε πνπ ζα θαιεί ηνλ εαπηό ηεο. Σην παξάδεηγκα πνπ αθνινπζεί, όηαλ γίλεηαη θιηθ ζην θνπκπί, ην πεδίν εηζεξρόκελεο πιεξνθνξίαο αξρίδεη λα κεηξάεη (γηα πάληα), μεθηλώληαο από ην 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"> <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

8 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()" /> <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