Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #7η: Εισαγωγή στη γλώσσα σεναρίου Javascript, δομή σεναρίων Javascript, που τοποθετούνται, μεταβλητές, συναρτήσεις, alerts,είσοδος χρήστη από prompts Γαβαλάς Δαμιανός dgavalas@aegean.gr Χειμερινό εξάμηνο Αλλαγή προγράμματος για την επόμενη εβδομάδα Προσθήκη μιας ώρας εργαστηρίου Θεωρία: 10:00-12:00, Κτήριο Παπαρίσβα Εργαστήριο: Ισόγειο Χατζηγιάννη Μία μόνο εργαστηριακή ομάδα: 12:00-14:00 Οι υπόλοιπες εβδομάδες μέχρι το τέλος του εξαμήνου: Θεωρία: 10:00-12:00, Κτήριο Παπαρίσβα Εργαστήριο: Ισόγειο Χατζηγιάννη Μία μόνο εργαστηριακή ομάδα: 12:00-13:00 1
Γλώσσα σεναρίου Javascript Τι είναι η Javascript; Γλώσσα προγραμματισμού που αναπτύχθηκε από τις Netscape και Sun Microsystems, διαθέσιμη από το 1995 H Javascript είναι μια γλώσσα σεναρίου (script language) που χρησιμοποιείται για να δημιουργήσουμε διαδραστικές (interactive) ιστοσελίδες Ο κώδικας JavaScript συνήθως ενσωματώνεται στον ΗTML κώδικα και εκτελείται από τον browser που «φορτώνει» το HTML έγγραφο Η JavaScript υποστηρίζεται από όλους τους δημοφιλείς browsers, όπως ο Netscape και ο Internet Explorer, από την έκδοση 3.0 και έπειτα 2
Η Javascript είναι γλώσσα σεναρίου (script language) Μια γλώσσα script επιτρέπει να γράψουμε ένα πρόγραμμα που δεν χρειάζεται να περάσει από τη διαδικασία της μεταγλώττισης (μετάφραση κώδικα σε γλώσσα μηχανής εκτελέσιμο αρχείο), όπως συμβαίνει με τις κοινές γλώσσες προγραμματισμού (Pascal, Fotran, Visual Basic, ) Ο κώδικας ενός script πρόγραμμα «διερμηνεύεται» άμεσα, από την εφαρμογή που το εκτελεί (π.χ. browser) Τυχόν συντακτική λάθη θα γίνουν αντιληπτά όταν «τρέξει» το script. Στην περίπτωση της Javascript, ο χειρισμός των σφαλμάτων γίνεται από τον browser που εκτελεί τον Javascript κώδικα Τι μπορεί να κάνει η Javascript; (Ι) Η JavaScript παρέχει στους σχεδιαστές ιστοσελίδων ένα προγραμματιστικό εργαλείο Όσοι αναπτύσσουν HTML κώδικα δεν είναι απαραίτητα προγραμματιστές, ωστόσο η JavaScript είναι μια scripting γλώσσα με πολύ απλή σύνταξη, άρα εύκολη στην εκμάθηση Η JavaScript μπορεί να εισάγει δυναμικό περιεχόμενο σε μια HTML σελίδα Για παράδειγμα, η παρακάτω JavaScript έκφραση: document.write("<h1>" + name + "</h1>") γράφει το περιεχόμενο της μεταβλητής name μέσα σε μια HTML σελίδα 3
Τι μπορεί να κάνει η Javascript; (ΙΙ) Ο JavaScript κώδικας μπορεί να αντιδράσει σε συμβάντα (events), δηλαδή να εκτελεστεί όταν κάτι συμβεί, π.χ. όταν: Μια σελίδα φορτωθεί Όταν ο χρήστης κάνει κλικ σε ένα πλήκτρο Όταν ο χρήστης επιλέξει κάποιο στοιχείο μιας λίστας Ο JavaScript κώδικας μπορεί να διαβάσει αλλά και να μεταβάλει το περιεχόμενο ενός HTML στοιχείου (HTML elements), π.χ. να διαβάσει το κείμενο που έχει γράψει ο χρήστης σε ένα πεδίο κειμένου (texfield) και να κάνει κάτι με αυτό Εμφάνιση πληροφοριών / μηνυμάτων σε πλαίσια διαλόγου (dialog boxes), στη μπάρα κατάστασης ενός παραθύρου (status bar), κοκ πολύπλοκων μαθηματικών υπολογισμών Χαρακτηριστικά Javascript Είναι ανεξάρτητη πλατφόρμας (όπως και η HTML): o ίδιος JavaScript κώδικας τρέχει σε πλατφόρμες windows, linux, Εύκολη στη χρήση και την εκμάθηση Τα προγράμματα Javascript ενσωματώνονται σε HTML έγγραφα Τρέχει πολύ γρήγορα (δεν απαιτείται να σώσουμε κανένα ξεχωριστό αρχείο στο δίσκο μας) Είναι κατάλληλη για σχετικά απλές εφαρμογές Είναι βασισμένη στην έννοια του αντικειμένου (αντικειμενοστραφής γλώσσα) Χρησιμοποιείται κυρίως για προγραμματισμός στη μεριά του πελάτη (client), δηλαδή εκτελείται από το client application (browser) που «φορτώνει» το HTML έγγραφο. 4
Πως γράφουμε Javascript κώδικα; Η HTML ετικέτα <script> χρησιμοποιείται για να εισάγουμε JavaScript κώδικα σε ένα ΗΤML έγγραφο <! Welcome.htm--> <html> <script language= JavaScript > document.write( Hello World with JavaScript ); </body> </html> <! Welcome2.htm--> Αυτή η ετικέτα λέει στον browser πως ακολουθεί script κώδικας Javascript <html> <script language= JavaScript > document.write( <h1><font color=green>hello World with JavaScript</font></h1> ); </body> </html> Απόκρυψη κώδικα Javascript από παλαιότερους browsers Τι συμβαίνει όταν ένας χρήστης ενός browser παλαιότερης έκδοσης που δεν υποστηρίζει Javascript «επισκέπτεται» μια σελίδα που περιέχει κώδικα Javascript; <html> <script language= JavaScript > <!-- O κώδικας Javascript που περιέχεται ανάμεσα σε αυτές τις ετικέτες σχολίων είναι κρυμμένος από παλαιότερες εφαρμογές browsers document.write( <h1><font color=green>hello World with JavaScript</font></h1> ); //--> </body> </html> 5
Περισσότερα από ένα scripts στο ίδιο HTML έγγραφο <html> document.write("<h1><font color=green>this is my first Javascript message</font></h1>"); <h1>this is not a Javascript message</h1> document.write("<h1><font color=red>this is my second Javascript message</font></h1>"); </body> </html> Που τοποθετώ τον κώδικα Javascript μέσα σε ένα HTML έγγραφο Κώδικας Javascript μπορεί να ενσωματωθεί σε ένα HTML έγγραφο με τους εξής τρόπους: Τοποθέτηση του script ανάμεσα στα </body> tags Τοποθέτηση του script ανάμεσα στα <head> </head> tags Αποθήκευση του script σε ένα εξωτερικό αρχείο (*.js) Συνδυασμός των προηγούμενων 6
Τοποθέτηση Javascript ανάμεσα στα <head> tags <html> <head> <title>welcome page</title> document.write("<h1><font color=green>this is my first Javascript message</font></h1>"); </head> <h1>this is not a Javascript message</h1> document.write("<h1><font color=red>this is my second Javascript message</font></h1>"); </body> </html> Συνήθως, ανάμεσα στις ετικέτες <head> τοποθετούμε συναρτήσεις Javascript. Αν ο κώδικας δεν είναι τοποθετημένος σε μια συνάρτηση, τότε εκτελείται πριν από αυτόν που βρίσκεται στο τμήμα. Τοποθέτηση κώδικα Javascript σε εξωτερικό αρχείο external.js document.write("<h1><font color=green>this is Javascript code from an external file</font></h1>"); <html> <head> <title>external javascript file</title> </head> </body> </html> <script language="javascript" src="external.js"> Ποιο είναι το πλεονέκτημα χρήσης κώδικα αποθηκευμένου σε εξωτερικά αρχεία; Επανάχρηση κώδικα (ο ίδιος κώδικας χρησιμοποιείται από πολλά έγγραφα) 7
Χρήση σχολίων Γιατί χρησιμοποιούμε σχόλια; // Σχόλια μιας μόνο γραμμής /* Αυτό το σχόλιο μπορεί να επεκταθεί σε περισσότερες από μία γραμμές */ Δηλώσεις μεταβλητών στη Javascript Στη Javascript χρησιμοποιούμε την έκφραση var Δεν δηλώνεται ο τύπος της μεταβλητής. O τύπος της μεταβλητής δηλώνεται έμμεσα, ανάλογα με την τιμή που της εκχωρούμε Τα ονόματα των μεταβλητών πρέπει να είναι περιγραφικά, δηλαδή να περιγράφουν αυτό που οι μεταβλητές αντιπροσωπεύουν Γίνεται διάκριση μεταξύ πεζών-κεφαλαίων στα ονόματα των μεταβλητών: name Name <script language= JavaScript > var name = George ; var age = 22; 8
Τύποι μεταβλητών στη Javascript: αριθμοί var όνομα_μεταβλητής = αριθμός; Παραδείγματα: var salary = 1000; var fpa = 0.18; var bignumber = 4.52e5; // 4.52*10 5 = 452000 var negative = -90 <script language= JavaScript > var name = George ; var age = 22; Θα τυπωθεί το μήνυμα: After 10 years, George will be years old document.write( After 10 years, + name + will be + (age+10) + years old ); Τύποι μεταβλητών στη Javascript: αλφαριθμητικά (strings) var όνομα_μεταβλητής = κείμενο_αλφαριθμητικού ; Παραδείγματα: var car = FIAT ; var mycomputer = Pentium 4, 1,7GHz, 512MB RAM ; <script language= JavaScript > var car = FIAT ; var mycomputer = Pentium 4, 1,7GHz, 512MB RAM ; document.write( Οδηγώ ένα + car + και ο υπολογιστής μου είναι ένα + mycomputer); Θα τυπωθεί το μήνυμα: «Οδηγώ ένα FIAT και ο υπολογιστής μου είναι ένα Pentium 4, 1,7GHz, 512MB RAM» 9
Τύποι μεταβλητών στη Javascript: αλφαριθμητικά (strings): Ειδικοί χαρακτήρες Πως μπορώ να εμφανίσω το ακόλουθο αποτέλεσμα (να συμπεριλάβω τους χαρακτήρες εισαγωγικών; var galileo = Ο Γαλιλαίος είπε: \ Και όμως, η γη γυρίζει\ ; document.write(galileo); // αλλιώς: document.write( Ο Γαλιλαίος είπε: \ Και όμως, η γη γυρίζει\ ); Την ίδια μέθοδο χρησιμοποιούμε και για να τυπώσουμε τον χαρακτήρα backslash (\) Ασκησούλα Πως μπορούμε να παράγουμε μέσω Javascript το ακόλουθο αποτέλεσμα (να εμφανιστεί το μήνυμα University of Aegean το οποίο είναι link στη σελίδα http:\\www.aegean.gr\ Αν γράφαμε με κλασική HTML: <a href= "http:\\www.aegean.gr\">university of Aegean</a> Με Javascript: document.write("<a href= \"http:\\\\www.aegean.gr\\\"><h1>university of Aegean</h1></a>"); 10
Ασκησούλα: τι θα εμφανιστεί; var heading = "<h1>μια σελίδα Javascript!</h1>"; var intro = "Καλώς ήλθατε στη σελίδα μου!"; var link = "<a href=\"http:\\\\ta-nea.dolnet.gr\\\"><h1>εφημερίδα ΤΑ ΝΕΑ</h1></a>"; var redtext = "<font color=red>χρωματισμένο κείμενο</font>"; var begin = "<i>"; var end = "</i>"; var newsection = "<br>"; document.write(heading); document.write(begin + intro + end); document.write(newsection); document.write(link); document.write(newsection); document.write(begin + redtext + end); document.write(newsection); var begin = "<b>"; var end = "</b>"; document.write(begin + redtext + end); Συναρτήσεις Τι είναι οι συναρτήσεις; Μια σειρά εντολών που εκτελεί μια μεμονωμένη εργασία ή σειρά εργασιών, π.χ. μια συνάρτηση μπορεί να εμφανίζει μια γραμμή κειμένου ή να κάνει μια αριθμητική πράξη, όπως να υπολογίζει την τετραγωνική ρίζα ενός αριθμού Γιατί είναι χρήσιμες οι συναρτήσεις; Καλύτερη οργάνωση του προγράμματος (script), π.χ. χρησιμοποιώντας διαφορετική συνάρτηση για την εκτέλεση κάθε μαθηματικού υπολογισμού γίνεται πιο ευανάγνωστος ο κώδικας και ευκολονόητος ο στόχος κάθε ενότητας του script (διαίρει και βασίλευε) Ευκολότερη η αποσφαλμάτωση (debugging) του κώδικα Επανάχρηση κώδικα (η ίδια συνάρτηση μπορεί να κληθεί πολλές φορές στη διάρκεια εκτέλεσης του script) 11
Δομή συναρτήσεων <html> <head> <title>first function</title> function print_hello() { Οι συναρτήσεις γράφονται στο <head> τμήμα του εγγράφου Όνομα συνάρτησης Κώδικας συνάρτησης, ανάμεσα σε άγγιστρα {...} document.write("<h1>hello PEOPLE</H1>"); } </head> print_hello(); document.write("<h1>another message...</h1>"); </body> </html> print_hello(); Κλήση συνάρτησης (θα προκαλέσει την εκτέλεση του κώδικά της) Συναρτήσεις με παραμέτρους <html> <head> <title>function with parameters</title> Παράμετροι, χωρισμένοι με κόμματα, μέσα στις function print_message (first, second, col) { παρενθέσεις document.write("<font color=" + col + ">"); document.write("<h1>first message: " + first + "</h1>"); document.write("<h1>second message: " + second + "</h1>"); document.write("</font><hr>"); } </head> print_message("πρώτο μήνυμα", "Δεύτερο μήνυμα", "red"); var f = "Javascript is easy..."; var s = "Too easy..."; var c = "green"; print_message(f, s, c); </body> </html> 12
Συναρτήσεις που επιστρέφουν τιμές <html> <head> <title>function with parameters</title> Η τιμή που function sum(x, y) { επιστρέφεται, με χρήση var s = x+y; της εντολής return return "Sum of " + x + " and " + y + " is: " + s; } function print_message(col, message) { document.write("<h1><font color=" + col + ">" + message + "</font><h1>"); } </head> var number = sum(7, 8); print_message("green", number); print_message("red", sum(100, 200)); </body> </html> Javascript συνάρτηση για εμφάνιση μηνυμάτων: alert <html> <head> <title>alerts</title> function show_message(message) { } alert(message); </head> </body> </html> Θα εμφανίσει ένα alert. H εκτέλεση του κώδικα θα σταματήσει μέχρι ο χρήστης να πατήσει το OK alert ("This is an alert message"); show_message("message through function call"); 13
Javascript συνάρτηση για είσοδο δεδομένων από χρήστη: window.prompt <html> <head> <title>prompt</title> function show_message(message) { } </head> alert(message); </body> </html> Ζητάει από το χρήστη να εισάγει είσοδο. H εκτέλεση του κώδικα θα σταματήσει μέχρι ο χρήστης να πατήσει το OK var input = window.prompt("γράψτε ένα μήνυμα: ", ""); show_message(input); Javascript συνάρτηση για μετατροπή τύπου από αλφαριθμητικό σε ακέραιο <html> <head> <title>prompt for numbers</title> function square(x) { return (x * x); } Μετατρέπει το αλφαριθμητικό number σε </head> ακέραιο και αποθηκεύει την ακέραια τιμή στη μεταβλητή i για να μπορέσει να εκτελέσει αριθμητικές πράξεις με αυτόν var number = window.prompt("δώστε ένα αριθμό: ", "1"); var i = parseint(number); document.write("<h1>square of " + number + " is: " + square(i) + "</h1>"); </body> </html> 14