JavaScript
Τι είναι η Java script; H JavaScript είναι μια δυναμική γλώσσα προγραμματισμού. Χρησιμοποιείται για να δημιουργήσουμε διαδραστικές ιστοσελίδες υλοποιώντας διάφορα σενάρια (scripts) Ο κώδικας JavaScript συμπληρώνει τον κώδικα HTML/JAVA και ενσωματώνεται πλήρως σ' αυτόν. Η JavaScript είναι διερμηνευόμενη γλώσσα (interpreted) που σημαίνει ότι τα σενάρια δεν μεταγλωττίζονται πριν την εκτέλεση. Ο όρος “δυναμική γλώσσα προγραμματισμού” χρησιμοποιείται στην πληροφορική για να περιγράψει γλώσσες προγραμματισμού υψηλού επιπέδου οι οποίες κατά τη διάρκεια της εκτέλεσης, παρουσιάζουν συμπεριφορές που άλλες παρουσιάζουν κατά την μεταγλώττιση. Αυτές οι συμπεριφορές μπορεί να είναι επέκταση του προγράμματος είτε προσθέτοντας νέο κώδικα, είτε επεκτείνοντας τα αντικείμενα και ορισμούς. Δυναμικές γλώσσες προγραμματισμού: PERL, Python, Lisp, MATLAB, Ruby, PHP, Prolog Με τον όρο διερμηνευόμενη γλώσσα εννοούμε ότι εκτέλεση του προγράμματος γίνεται απευθείας χωρίς να προηγείται μεταγλώττιση του προγράμματος σε εντολές γλώσσας μηχανής.
Που τοποθετείται ο κώδικας JavaScript; Στην κεφαλίδα <head> <script type="text/javascript"> ... </script> </head> Στο κυρίως μέρος <body> <script type="text/javascript"> ... </script> </body> Στην κεφαλίδα και στο κυρίως μέρος Ως εξωτερικό αρχεί το οποίο συμπεριλαμβάνεται με κατάλληλη δήλωση στην κεφαλίδα <script type="text/javascript" src="filename.js"> </script>
Μεταβλητές στην JavaScript Τύποι Δεδομένων: - Αριθμητικές, λογικές και αλφαριθμητικές τιμές <script type="text/javascript"> var name = "Ali"; var money; Money = 2000.50; var empty_pockets = FALSE; </script>
Παράδειγμα 1: “HELLO WORLD” <html> <body> <script language="javascript" type="text/javascript"> /* * Μικρό πρόγραμμα για εμφάνιση μηνύματος στη σελίδα */ //Για να εμφανίσουμε κάποιο μήνυμα καλείται η συνάρτηση: document.write("Hello World!") </script> </body> </html> Εδώ καλούμε τη συνάρτηση document.write η οποία εμφανίζει ένα μήνυμα στην HTML σελίδα. Προσοχή η JavaScript είναι case-sensitive γλώσσα. https://codepen.io/pen/?editors=1010 TEST
Παράδειγμα 2: Εκτέλεση πράξης + εμφάνιση μηνύματος <html> <body> <script type="text/javascript"> var a = 33; var b = 10; document.write("a + b = "); result = a + b; document.write(result); </script> </body> </html>
Παράδειγμα: δομή if... else στο παιχνίδι “Μάντεψε τον αριθμό”
Παράδειγμα: δομή if... else στο παιχνίδι “Μάντεψε τον αριθμό” function check_num(number) { var guess=document.forms.guessquiz.guess.value; var odhgies='Αριθμός είναι αυτό: "'+guess+ '"; '; document.forms.guessquiz.guess.value=''; if (guess==number) { document.forms.guessquiz.prompt.value='Συγχαρητήρια! Ο αριθμός '+number+' είναι σωστός!'; } if (number<guess) { odhgies='Μικρότερο από '+ guess; } if (number>guess) { odhgies='Μεγαλύτερο από '+ guess; } if (guess=='') { odhgies='Δεν μάντεψες κάποιον αριθμό! :(' } }
Συναρτήσεις (Functions) ΣΥΝΤΑΞΗ ΣΥΝΑΡΤΗΣΗΣ <script type="text/javascript"> function function_name(parameter-list) { statements } </script> ΚΛΗΣΗ ΣΥΝΑΡΤΗΣΗΣ <body> <form> <input type="button" onclick="function_name(parameter-list)" value="Button1"> </form> </body> Η συνάρτηση είναι σαν ένα κομμάτι κώδικα που μπορεί να επαναχρησιμοποιηθεί αφού κληθεί με τον κατάλληλο τρόπο. Οι συναρτήσεις επιτρέπουν στον προγραμματιστή να διαιρεί ένα μεγάλο πρόγραμμα σε επιμέρους μικρότερα.
Παράδειγμα 3: Συναρτήσεις <html> <head> <script type="text/javascript"> function sayHello() { document.write ("Γεια σου!"); } </script> </head> <body> <p>Πάτησε το κουμπί για να καλέσεις τη συνάρτηση</p> <form> <input type="button" onclick= "sayHello()" value="Χαιρετισμός"> </form> </body> </html> Η συνάρτηση είναι σαν ένα κομμάτι κώδικα που μπορεί να επαναχρησιμοποιηθεί αφού κληθεί με τον κατάλληλο τρόπο. Οι συναρτήσεις επιτρέπουν στον προγραμματιστή να διαιρεί ένα μεγάλο πρόγραμμα σε επιμέρους μικρότερα. http://www.tutorialspoint.com/javascript/javascript_functions.htm Nested Functions Function Constructor Function Leterals
Γεγονότα (Events) Η διαδραστικότητα μεταξύ χρήστη και ιστοσελίδας γίνεται μέσω διαχείρισης διαφόρων γεγονότων όπως: φόρτωση σελίδας πάτημα κουμπιού πάτημα ενός πλήκτρου κλείσιμο παραθύρου τοποθέτηση ποντικιού σε συγκεκριμένο σημείο Σύνταξη: < ΣΤΟΙΧΕΙΟ-HTML ΓΕΓΟΝΟΣ = "JavaScript" >
Παράδειγμα 4: event onmouseover <html> <head> <script type="text/javascript"> <!-- function over() { alert ("ΜΠΡΑΒΟ ΤΑ ΚΑΤΑΦΕΡΕΣ!") document.write ("ΣΕ ΤΣΑΚΩΣΑ.... :)) "); } //--> </script> </head> <body> <div onmouseover="over()" > <h2> ΣΥΡΕ ΤΟ ΠΟΝΤΙΚΙ ΕΔΩ </h2> </div> </body> </html>
Παράδειγμα 5: onmouseover & onmouseout <html> <head> <title> onmouseover onmouseout</title> <script type="text/javascript"> function over() { document.getElementById("TESTarea").innerHTML = "MOUSEOVER"; } function out() { document.getElementById("TESTarea").innerHTML ="MOUSEOUT"; </script> </head> <body> <div id=“TESTarea” onmouseover="over()" onmouseout="out()"> <h2> ΣΥΡΕ ΤΟ ΠΟΝΤΙΚΙ ΕΔΩ </h2> </div> <p onmouseover ="this.innerHTML='MOUSEOVER!:)'" onmouseout="this.innerHTML='MOUSEOUT:(" >Click me.</p> </body> </html>
Ιεραρχική Οργάνωση των Αντικειμένων Document Object Model (DOM) Όταν θέλουμε να χρησιμοποιήσουμε ένα στοιχείο/αντικείμενο ενός HTML, XML ή XTML κειμένου χρησιμοποιούμε το Document Object Model (DOM) το οποίο είναι μια συνθήκη που έχουμε υιοθετήσει για να μπορούμε να αναπαριστούμε και να έχουμε πρόσβαση στα διάφορα αντικείμενα. Το μοντέλο όριζει το DOM δέντρο, μια ιεραρχική δομή των αντικειμένων ενός κειμένου. Οπότε χρησιμοποιοώντας μεθόδους μπορούμε να διαχειριστούμε και να επέμβουμε στα αντικείμενα. Στην κορυφή της ιεραρχίας βρίσκεται το Window object − Top of the hierarchy. It is the outmost element of the object hierarchy. Document object − Κάθε HTML κείμενο που φορτώνεται σ' ένα παράθυρο αποτελεί ένα document object. Το κείμενο περιλαμβάενι όλα τα περιεχόμενα της σελίδας. Form object − ό,τι περιλαμβάνεται μεταξύ των ετικετών <form>...</form> αποτελεί ένα form object. Form control elements − Το αντικείμενο form περιέχει όλα τα ορισμένα στοιχεία γι΄αυτό το αντικείμενο όπως text fields, buttons, radio buttons, and checkboxes.
getElementById & innerHTML Χρησιμοποιείται όταν θέλουμε να επέμβουμε σε ένα HTML element με συγκεκριμένο id, πχ: getElementById("demo") InnerHTML - ιδιότητα Χρησιμοποιείται όταν θέλουμε να αλλάξουμε το περιεχόμενο ενός HTML element, πχ: document.getElementById("demo").innerHTML="Hello World";
Άσκηση: swap img & swap text <script type="text/javascript"> function over_img() { document.getElementById("picture").src = "image2.jpg"; } function out_img() { ... } function over_txt() { document.getElementById("text").innerHTML = "TEXT2"; function out_txt() { ... } </script> </head> <body> <center> <H1> SWAP IMAGE AND TEXT WITH JAVA SCRIPT! </h1> <img id="picture" onmouseover="over_img()" onmouseout="out_img()" src="image1.jpg"> <div id="..." onmouseover="...()" onmouseout="...()"> <h2> TEXT1 </h2> </div> </html> <html> <head> <title> SWAP PICTURE onmouseover onmouseout</title> <script type="text/javascript"> function over_img() { document.getElementById("picture").src = "ilovejs.jpg"; } function out_img() { document.getElementById("picture").src ="keepcalm.jpg"; function over_txt() { var x = document.getElementById("text"); document.getElementById("text").innerHTML = "YEs I DO! "; x.style.color = "red"; x.style.textAlign = "center"; x.style.fonts = "center"; function out_txt() { document.getElementById("text").innerHTML ="DO yOU Love JS?"; </script> </head> <body> <center> <H1> SWAP IMAGE WITH JAVA SCRIPT! </h1> <img id="picture" onmouseover="over_img()" onmouseout="out_img()" src="ilovejs.jpg" width="670" height="592"> </center> <div id="text" onmouseover="over_txt()" onmouseout="out_txt()"> <h2> <center>DO yOU Love JS? </center></h2> </div> </center> </html>
Παράδειγμα 6: getElementById, innerHTML <body> <button onclick="TESTinnerHTML()" > ΚΛΙΚ ΕΔΩ! </button> <p id="demo"> innerHTML περιοχή παραγράφου </p> <button onclick="TESTwriteDocument()" > ΚΛΙΚ ΕΔΩ! </button> <script> function TESTinnerHTML() { document.getElementById("demo").innerHTML="Hello World"; } function TESTwriteDocument() { document.write("Hello World"); </script> </body> In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element). The following example changes the content (the innerHTML) of the <p> element with id="demo": In the example above, getElementById is a method, while innerHTML is a property.
Παράδειγμα 7: getElementById, innerHTML <head> <title> ασκηση </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <button onclick="this.innerHTML='Το πέτυχες!'"> BUTTON1: this.innerHTML </button><br> <button id="button2" onclick="change_button_text()">BUTTON2: change_button_text()</button> <script> function change_button_text() { document.getElementById("button2").innerHTML = "Το πέτυχες και με συνάρτηση!"; } </script><br> <button id="button3" onclick="getElementById('button3').innerHTML='Το πέτυχες και με script χωρίς συνάρτηση!'">BUTTON3: getElementById('button3').innerHTML </button> </body> </html> In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element). The following example changes the content (the innerHTML) of the <p> element with id="demo": In the example above, getElementById is a method, while innerHTML is a property.
Άσκηση: Δημοψήφισμα <html> <head> <title> ασκηση </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1> Δημοψήφισμα </h1> Επιθυμείτε να .... <br> <button id="yes" onclick="clicked_yes()"> ΝΑΙ </button> <button id="no" onclick="clicked_no()"> ΟΧΙ </button> <script> function clicked_yes() { document.getElementById("yes").innerHTML = "ΨΗΦΙΣΕΣ ΝΑΙ"; alert("Η ΨΗΦΟΣ ΣΟΥ ΚΑΤΑΧΩΡΗΘΗΚΕ"); } function clicked_no() { document.getElementById("no").innerHTML = "ΨΗΦΙΣΕΣ ΟΧΙ"; </script><br> </body> </html>
Μπορείς να πιάσεις την Τουίτυ; flag=1 function move_tweety() { if (flag==1) { tweety.style.top=90 tweety.style.left=800 flag=2 } else if(flag==2) { tweety.style.left=50 flag=3 else if(flag==3) { tweety.style.top=535 tweety.style.left=360 SCRIPT <div ID="tweety" style="position:absolute; left:360px; top:235px; width:210px; height:210px;"> <img onmouseover="move_tweety()" src="tweet8.gif" width="35" height="57"> </div> BODY
Τεστ Γνώσεων FORM SCRIPT function check() { var points = 0; if (document.forms.guessquiz.answer_box1.value=="Παρίσι") { points = points + 10; } if (...) { ... } alert('Πέτυχες ' +points+ 'πόντους'); } FORM <form name="guessquiz"> <p>Ποια είναι η πρωτεύουσα της Γαλλίας;<BR> <input type="text" name="answer_box1" style="font-size:12pt;" size="20" maxlenght="20" value=""></p> <p>Ποια είναι η πρωτεύουσα της Ιταλίας;<BR> <input type="text" ... ></p> <input type="button" value="Έλεγχος" style="font-size:18pt;" onClick='check()'> </form>
Μάντεψε τον αριθμό “prompt” “guess_box” <form name="guessquiz"> <input type="text" name="prompt" size="41" maxlenght="60" value="Μάντεψε έναν αριθμό από το 1 μέχρι το 100 "><br> <input type="text" name="guess_box" style="font-size:12pt;" size="3" maxlenght="3" value=""><br> <input type="button" value="Έλεγχος" style="font-size:18pt;" onClick='process(guessme)'> </form>
Μάντεψε τον αριθμό <script> var guessme = Math.round(Math.random()*(99)+1); var speech = 'Μαντεψε τον αριθμό από το 1 μέχρι το 100'; function process(mystikos_ar) { var guess = document.forms.guessquiz.guess_box.value; document.forms.guessquiz.guess_box.value = ''; if (guess==mystikos_ar) { alert ('ΜΠΒΡΑΟ, μάντεψες σωστά! το '+mystikos_ar+' είναι σωστό! \n\n Κάνε κλικ για να ξαναπαίξεις'); speech=''; document.location=document.location; } if (mystikos_ar<guess) {speech='Μικρότερο από '+ guess;} if (mystikos_ar>guess) {...} if (guess=='') { ... } document.forms.guessquiz.prompt.value=speech; document.forms.guessquiz.guess_box.focus(); </script>