Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #7η: Εισαγωγή στη γλώσσα σεναρίου Javascript, δομή σεναρίων Javascript, που τοποθετούνται, μεταβλητές, συναρτήσεις, alerts,είσοδος χρήστη από prompts Χειμερινό εξάμηνο
Γλώσσα σεναρίου Javascript
Τι είναι η Javascript; Γλώσσα προγραμματισμού που αναπτύχθηκε από τις Netscape και Sun Microsystems, διαθέσιμη από το 1995 H Javascript είναι μια γλώσσα σεναρίου (script language) που χρησιμοποιείται για να δημιουργήσουμε διαδραστικές (interactive) ιστοσελίδες ΟκώδικαςJavaScript συνήθως ενσωματώνεται στον ΗTML κώδικα και εκτελείται από τον browser που «φορτώνει» το HTML έγγραφο Η JavaScript υποστηρίζεται από όλους τους δημοφιλείς browsers, όπως ο Netscape και ο Internet Explorer, από την έκδοση 3.0 και έπειτα
Η 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 σελίδα
Τι μπορεί να κάνει η 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 έγγραφο.
Πως γράφουμε Javascript κώδικα; Η HTML ετικέτα <script> χρησιμοποιείται για να εισάγουμε JavaScript κώδικα σε ένα ΗΤML έγγραφο <! Welcome.htm--> Αυτή η ετικέτα λέει στον browser πως ακολουθεί <html> <body> script κώδικας Javascript <script language= JavaScript > document.write( Hello World with JavaScript ); </body> </html> <! Welcome2.htm--> Εκτέλεση <html> <body> Εκτέλεση <script language= JavaScript > document.write( <h1><font color=green>hello World with JavaScript</font></h1> ); </body> </html>
Απόκρυψη κώδικα Javascript από παλαιότερους browsers Τι συμβαίνει όταν ένας χρήστης ενός browser παλαιότερης έκδοσης που δεν υποστηρίζει Javascript «επισκέπτεται» μια σελίδα που περιέχει κώδικα Javascript; <html> <body> <script language= JavaScript > <!-- document.write( <h1><font color=green>hello World with JavaScript</font></h1> ); //--> </body> </html> O κώδικας Javascript που περιέχεται ανάμεσα σε αυτές τις ετικέτες σχολίων είναι κρυμμένος από παλαιότερες εφαρμογές browsers
Περισσότερα από ένα scripts στο ίδιο HTML έγγραφο <html> <body> <script language="javascript"> document.write("<h1><font color=green>this is my first Javascript message</font></h1>"); <h1>this is not a Javascript message</h1> <script language="javascript"> document.write("<h1><font color=red>this is my second Javascript message</font></h1>"); </body> </html> Εκτέλεση
Που τοποθετώ τον κώδικα Javascript μέσα σε ένα HTML έγγραφο Κώδικας Javascript μπορείναενσωματωθείσεέναhtml έγγραφο με τους εξής τρόπους: Τοποθέτηση του script ανάμεσα στα <body> </body> tags Τοποθέτηση του script ανάμεσα στα <head> </head> tags Αποθήκευση του script σε ένα εξωτερικό αρχείο (*.js) Συνδυασμός των προηγούμενων
Τοποθέτηση Javascript ανάμεσα στα <head> tags <html> <head> <title>welcome page</title> <script language="javascript"> document.write("<h1><font color=green>this is my first Javascript message</font></h1>"); </head> <body> <h1>this is not a Javascript message</h1> <script language="javascript"> document.write("<h1><font color=red>this is my second Javascript message</font></h1>"); </body> </html> Συνήθως, ανάμεσα στις ετικέτες <head> τοποθετούμε συναρτήσεις Javascript. Αν ο κώδικας δεν είναι τοποθετημένος σε μια συνάρτηση, τότε εκτελείται πριν από αυτόν που βρίσκεται στο τμήμα <body>. Εκτέλεση
Τοποθέτηση κώδικα 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> <script language="javascript" src="external.js"> </body> </html> Ποιο είναι το πλεονέκτημα χρήσης κώδικα αποθηκευμένου σε εξωτερικά αρχεία; Επαναχρησιμοποίηση κώδικα (ο ίδιος κώδικας χρησιμοποιείται από πολλά έγγραφα)
Χρήση σχολίων Γιατί χρησιμοποιούμε σχόλια; // Σχόλια μιας μόνο γραμμής /* Αυτό το σχόλιο μπορεί να */ επεκταθεί σε περισσότερες από μία γραμμές
ηλώσεις μεταβλητών στη Javascript Στη Javascript χρησιμοποιούμε την έκφραση var εν δηλώνεται ο τύπος της μεταβλητής. O τύπος της μεταβλητής δηλώνεται έμμεσα, ανάλογα με την τιμή που της εκχωρούμε Τα ονόματα των μεταβλητών πρέπει να είναι περιγραφικά, δηλαδή να περιγράφουν αυτό που οι μεταβλητές αντιπροσωπεύουν Γίνεται διάκριση μεταξύ πεζών-κεφαλαίων στα ονόματα των μεταβλητών: name Name <script language= JavaScript > var name = George ; var age = 22;
Τύποι μεταβλητών στη 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»
Τύποι μεταβλητών στη Javascript: αλφαριθμητικά (strings): Ειδικοί χαρακτήρες Πως μπορώ να εμφανίσω το ακόλουθο αποτέλεσμα (να συμπεριλάβω τους χαρακτήρες εισαγωγικών;) <script language="javascript"> 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>");
Άσκηση: τι θα εμφανιστεί; <script language="javascript"> 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)
ομή συναρτήσεων <html> <head> <title>first function</title> <script language="javascript"> function print_hello() { } </head> <body> document.write("<h1>hello PEOPLE</H1>"); <script language="javascript"> </body> </html> print_hello(); document.write("<h1>another message...</h1>"); print_hello(); Οι συναρτήσεις γράφονται στο <head> τμήμα του εγγράφου Όνομα συνάρτησης Κλήση συνάρτησης (θα προκαλέσει την εκτέλεση του κώδικά της) Κώδικας συνάρτησης, ανάμεσα σε άγγιστρα {...}
Συναρτήσεις με παραμέτρους <html> <head> <title>function with parameters</title> <script language="javascript"> Παράμετροι, χωρισμένοι με κόμματα, μέσα στις 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> <body> <script language="javascript"> print_message("πρώτο μήνυμα", " εύτερο μήνυμα", "red"); var f = "Javascript is easy..."; var s = "Too easy..."; var c = "green"; print_message(f, s, c); </body> </html>
Συναρτήσεις που επιστρέφουν τιμές <html> <head> <title>function with parameters</title> <script language="javascript"> Ητιμήπου 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> <body> <script language="javascript"> varnumber= sum(7, 8); print_message("green", number); print_message("red", sum(100, 200)); </body> </html>
Javascript συνάρτηση για εμφάνιση μηνυμάτων: alert <html> <head> <title>alerts</title> <script language="javascript"> function show_message(message) { alert(message); Θα εμφανίσει ένα alert. H } εκτέλεση του κώδικα θα σταματήσει μέχρι ο χρήστης να πατήσει το OK </head> <body> <script language="javascript"> alert("thisisanalertmessage"); show_message("message through function call"); </body> </html> Εκτέλεση
Javascript συνάρτηση για είσοδο δεδομένων από χρήστη: window.prompt <html> <head> <title>prompt</title> <script language="javascript"> function show_message(message) { alert(message); } Ζητάει από το χρήστη να εισάγει είσοδο. H εκτέλεση του κώδικα θα σταματήσει μέχρι ο χρήστηςναπατήσειτοok </head> <body> <script language="javascript"> var input = window.prompt("γράψτε ένα μήνυμα: ", ""); show_message(input); Εκτέλεση </body> </html>
Javascript συνάρτηση για μετατροπή τύπου από αλφαριθμητικό σε ακέραιο <html> <head> <title>prompt for numbers</title> <script language="javascript"> function square(x) { return (x * x); } Μετατρέπει το αλφαριθμητικό number σε </head> ακέραιο και αποθηκεύει την ακέραια τιμή στη μεταβλητή i γιαναμπορέσειναεκτελέσει <body> αριθμητικές πράξεις με αυτόν <script language="javascript"> varnumber= window.prompt(" ώστε ένα αριθμό: ", "1"); var i = parseint(number); document.write("<h1>square of " + number + " is: " + square(i) + "</h1>"); </body> </html> Εκτέλεση