JavaScript Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484 email: dora@telecom.ntua.gr
Δικτυακός Προγραμματισμός Τι είναι η JavaScript H JavaScript δεν είναι Java και ούτε σχετίζεται με την Java To αρχικό της όνομα ήταν “LiveScript”. Το όνομα άλλαξε όταν η Java έγινε δημοφιλής. Τα statements στην JavaScript μοιάζουν με τα statements της Java επειδή και οι δύο έχουν δανειστεί πολλά στοιχεία από την C. Η JavaScript δεν χρησιμοποιείται για πλήρη προγράμματα αλλά: Μικρά κομμάτια κώδικα περιλαμβάνονται σε σελίδες HTML για να αυξήσουν την λειτουργικότητά τους. Συνήθως χρησιμοποιούνται σε συνδυασμό με φόρμες σε HTML σελίδες. Η JavaScript είναι σχετικά ανεξάρτητη πλατφόρμας Πολλές φορές υπάρχει ασυμβατότητα ανάμεσα στους browsers. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός JavaScript και HTML Ο κώδικας JavaScript περιλαμβάνεται σε <script> tags: <script type="text/javascript"> document.write("<h1>Hello World!</h1>") ; </script> Το type attribute επιτρέπει την χρήση και άλλων scripting languages. H JavaScript είναι default O παραπάνω κώδικας έχει το ίδιο αποτέλεσμα με: <h1>Hello World!</h1> Το semicolon στο τέλος της γραμμής είναι προαιρετικό αλλά συνιστάται. Τα semicolons χρειάζονται εάν χρησιμοποιούνται περισσότερα από δύο statements στην ίδια γραμμή. 2/3/2009 Δικτυακός Προγραμματισμός
Πως χρησιμοποιείται η JavaScript JavaScript μπορεί να μπει είτε στο <head> είτε στο <body> μιας σελίδας HTML Οι συναρτήσεις JavaScript πρέπει να ορίζονται στο <head> Αυτό διασφαλίζει πως η συνάρτηση θα έχει οριστεί πριν χρησιμοποιηθεί Η JavaScript στο <body> εκτελείται σταδιακά καθώς η σελίδα «φορτώνεται» από τον browser H JavaScript μπορεί να τοποθετηθεί σε ξεχωριστά αρχεία (.js) <script src="JavaScriptFile.js"></script> Το παραπάνω tag θα μπορούσε να χρησιμοποιηθεί οπουδήποτε μέσα στην σελίδα HTML. Τα εξωτερικά αρχεία με κώδικα JavaScript μπορούν να χρησιμοποιηθούν σε περισσότερες από μία σελίδες HTML. Στο εξωτερικό αρχείο δεν περιλαμβάνεται το tag <script>. H JavaScript μπορεί να χρησιμοποιηθεί και σε HTML form object, όπως για παράδειγμα ένα button. Ο κώδικας JavaScript θα εκτελεστεί μόλις το form object χρησιμοποιηθεί. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Τύποι Δεδομένων JavaScript έχει τρεις αρχικούς τύπους δεδομένων: number, string, and boolean Οτιδήποτε άλλο είναι αντικείμενο (object). Τα strings περιλαμβάνονται σε μονά (‘ ’) ή διπλά (“ ”) εισαγωγικά. Τα strings μπορούν να περιλαμβάνουν \n (newline), \" (double quote), κτλ. Οι boolean παίρνουν τιμές “true” ή “false” Τα 0, "0", κενά strings, null, και NaN παίρνουν την τιμή false, ενώ όλα τα άλλα την τιμή true. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός String Έχουν μια ιδιότητα την length. Κάποιες από τις διαθέσιμες μεθόδους είναι οι: charAt ( idx ) indexOf ( chr ) lastIndexOf ( chr ) substing (fromidx, toidx ) toLowerCase ( ) toUpperCase ( ) Υπάρχουν ακόμα μέθοδοι που αφορούν την εμφάνιση: big ( ) small ( ) bold ( ) fontsize ( sz ) …. 2/3/2009 Δικτυακός Προγραμματισμός
Παράδειγμα String Methods <html> <body> <script type="text/javascript"> var txt="Hello World!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>"); document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>"); document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>"); document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>"); </script> </body> </html> 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Μεταβλητές Οι μεταβλητές (Variables) ορίζονται με το var statement: var pi = 3.1416, x, y, name = “Giorgos” Οι μεταβλητές πρέπει να ξεκινούν με γράμμα ή underscore ( _ ) Τα ονόματα των μεταβλητών είναι case-sensitive Οι μεταβλητές δεν έχουν τύπο (untyped) και μπορούν να αποθηκευόσουν δεδομένα οποιουδήποτε τύπου. Η λέξη var είναι προαιρετική αλλά η χρήση της συνιστάται. Οι μεταβλητές που ορίζονται μέσα σε συναρτήσεις είναι τοπικές και μπορούν να χρησιμοποιηθούν μόνο μέσα στην συνάρτηση. Οι μεταβλητές που ορίζονται εκτός συναρτήσεων είναι γενικές (global) 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Τελεστές (1) Αριθμητικοί τελεστές: + - * / % ++ -- Τελεστές σύγκρισης: < <= == != >= > Λογικοί τελεστές: && || ! (&& and || are short-circuit operators) Τελεστές ανάθεσης: += -= *= /= %= Τελεστής string: + Τελεστής συνθήκης: condition ? value_if_true : value_if_false 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Σχόλια Τα σχόλια είναι όπως στην C και στην Java Μεταξύ // και του τέλους της γραμμής Μεταξύ /* και */ 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Statements (1) Τα περισσότερα JavaScript statements έχουν δανειστεί από την C: Ανάθεση τιμής: greeting = "Hello, " + name; Σύνθετα statement: { statement; ...; statement } If statements: if (condition) statement; if (condition) statement; else statement; Loop statements: while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement; 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Statements (2) Switch statement: switch (expression){ case label : statement; break; case label : statement; break; ... default : statement; } 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Αντικείμενα Στην JavaScript δεν δηλώνουμε τον τύπο των αντικειμένων. Υπάρχουν αντικείμενα που δηλώνονται με την παρακάτω σύνταξη: { name1 : value1 , ... , nameN : valueN } Παράδειγμα: circle = {centerX: 10, centerY: 15, diameter: Length, perimeter: getPerimeter(10,15)} Τα πεδία είναι centerX, centerY, diameter και perimeter. Τα 10 και 15 θεωρούνται numbers Το getPerimeter είναι κλήση συνάρτησης Το Length είναι μεταβλητή που έχει οριστεί προηγούμενα document.write(“H perimetros einai:” + circle.diameter); 2/3/2009 Δικτυακός Προγραμματισμός
Δημιουργία Αντικειμένων Με αρχικοποίηση: var course = { number: "CIT597", teacher="Dr. Dave" } Με την δημιουργία κενού αντικειμένου και προσθήκη πεδίων αργότερα: var course = new Object(); course.number = "CIT597"; course.teacher = "Dr. Dave"; Με την χρήση constructor: function Course(n, t) { // συνήθως στο <head> this.number = n; this.teacher = t; } var course = new Course("CIT597", "Dr. Dave"); 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Πίνακες Η αρχικοποίηση των πινάκων στην JavaScript γίνεται ως εξής: colors= ["red", "yellow", "green", "blue"]; Η αρίθμηση των πινάκων ξεκινά από το μηδέν: Το colors[0] είναι "red" Αν στην αρχικοποίηση χρησιμοποιηθούν κενά comma, τότε τα στοιχεία αυτά έχουν κενή τιμή Παράδειγμα: colors = ["red", , , "green", "blue"]; Το colors έχει 5 στοιχεία Το comma στo τέλος αγνοείται Παράδειγμα: Το colors = ["red", , , "green", "blue”,] έχει επίσης 5 στοιχεία Το μέγεθος ενός πίνακα δίνεται από την κλήση: colors.length 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Δημιουργία Πινάκων Με αρχικοποίηση: var colors = ["red", "green", "blue"]; Με την χρήση new Array() για την δημιουργία ενός κενού πίνακα: var colors = new Array(); Με την χρήση new Array(n) για την δημιουργία πίνακα συγκεκριμένου μεγέθους var colors = new Array(3); Με την χρήση new Array(…) με δύο ή περισσότερα ορίσματα για την δημιουργία πίνακα με αυτές τις τιμές: var colors = new Array("red","green", "blue"); 2/3/2009 Δικτυακός Προγραμματισμός
Πίνακες και Αντικείμενα Σε κάθε περίπτωση μπορούμε να προσθέσουμε στοιχεία αργότερα: colors[0] = "red"; colors[2] = "blue"; colors[1]="green"; Οι πίνακες είναι αντικείμενα: Student = { code: “12345”, name: “Kostas”, 10=“sth”} Το student[10] είναι το ίδιο με το student.10 To student.name είναι το ίδιο με το student[“name”] 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Συναρτήσεις Πινάκων Εάν έχουμε τον πίνακα myArray: myArray.sort() ταξινομεί τον πίνακα αλφαβητικά. myArray.reverse() αντιστρέφει τα στοιχεία του πίνακα. myArray.push(…) προσθέτει τα νέα στοιχεία στο τέλος του πίνακα και αυξάνει το μέγεθός του. myArray.pop() αφαιρεί και επιστρέφει το τελευταίο στοιχεί του πίνακα μειώνοντας και το μέγεθός του κατά ένα. myArray.toString() επιστρέφει ένα string με όλες τις τιμές του πίνακα χωρισμένες με comma. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Το for…in statement Με την χρήση του for statement μπορούμε να προσπελάσουμε διαδοχικά όλες τις ιδιότητες του αντικειμένου: Παράδειγμα: var course = { number: "CIT597", teacher="Dr. Dave" } for (var prop in course) { // for each variable, say, prop, within array course document.write(prop + “: ” + course[prop] + “<br>”); } Για το παραπάνω παράδειγμα η έξοδος θα ήταν: teacher: Dr. Dave number: CIT597 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός To with Statement Με το with statement μπορούμε να χρησιμοποιήσουμε το όνομα ενός αντικειμένου σαν πρόθεμα για τις μεταβλητές μέσα στο statement Για παράδειγμα τα ακόλουθα είναι ισοδύναμα: with (document.myForm) { result.value = compute(myInput.value) ; } document.myForm.result.value = compute(document.myForm.myInput.value); 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Συναρτήσεις Οι συναρτήσεις θα πρέπει να ορίζονται στο <head> μιας HTML σελίδας για να εξασφαλίσουμε ότι έχουν «φορτωθεί» πριν τις καλέσουμε. Η σύνταξη για τον ορισμό μιας συνάρτησης είναι: function name(arg1, …, argN) { statements } Όλες οι μεταβλητές που ορίζονται σε μια συνάρτηση είναι τοπικές. Η συνάρτηση μπορεί να επιστρέφει μια τιμή. Η σύνταξη για την κλήση μιας συνάρτησης είναι: name(arg1, …, argN). 2/3/2009 Δικτυακός Προγραμματισμός
Παράδειγμα Συνάρτησης <script language="JavaScript"> <!-- start script --> function checkit() { // submit validation function var strval = document.myform.mytext.value; // input text value var intval = parseInt(strval); // convert to integer if ( 0 < intval && intval < 10 ) { // input ok return( true ); // allow submit } else { // input bad - tell user alert("Input value " + strval + " is out of range"); return( false ); // forbid submit } <!-- end script --> </script> 2/3/2009 Δικτυακός Προγραμματισμός
Αλληλεπίδραση με χρήστη Η JS βασίζεται στα events: Παραδείγματα Events: επιλογή προηγούμενης/επόμενης σελίδας επιλογή ενός link άνοιγμα μιας νέας URL mouseover (για link) Ορίζονται επίσης τα actions, που σχετίζονται με πλοήγηση αλληλεπίδραση με κάποια στοιχεία μιας HTML φόρμας. Παράδειγμα: έλεγχος στοιχείων μιας φόρμας πριν την υποβολή τους. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Form Events Κάθε φόρμα έχει στοιχεία τα οποία δέχονται είσοδο από τον χρήστη και μπορούν σχετίζονται με ένα ή περισσότερα JavaScript event. Τα στοιχεία αυτά είναι: Buttons, Text Fields, Text Areas, Selections Lists Τα hidden fields μιας HTML form δεν σχετίζονται με JS events. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Event Handlers Είναι ο τρόπος με τον οποίο συνδέουμε events με JS functions. Μοιάζουν με τα συνήθη HTML attributes. Ξεκινούν με την λέξη «on» ακολουθούμενη από το event name: π.χ. onmouseover = myOnMouseOver(); π.χ. onmouseover = alert(Some message); Οι event handlers μπορεί να αναφέρονται σε τρία επίπεδα: ολόκληρου του εγγράφου μιας φόρμας ενός στοιχείου μιας φόρμας 2/3/2009 Δικτυακός Προγραμματισμός
Παραδείγματα Event Handlers Document Level Event Handlers onLoad: το load event δημιουργείται όταν έχει διαβαστεί το περιεχόμενο της σελίδας πριν όμως αυτή εμφανιστεί Χρησιμοποιείται για one-time initialization onUnload: όταν εμφανίζεται μια νέα σελίδα στο ίδιο παράθυρο Submit Event Handler σε μια Φόρμα Μια φόρμα περιέχει το attribute onSubmit το οποίο δείχνει την JS συνάρτηση που θα κληθεί κατά την υποβολή της φόρμας Mouseover Event Handler σε link Ένα HTML link μπορεί να δηλώσει έναν event handler για το mouseover event. 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Παράδειγμα onSubmit <form name=“myform" method=“post“ action="mailto:me@myhost.com“ onSubmit="checkit()"> <p>Enter a number between 1 and 9: <input type=“text" name="mytext" value="1" size="10"> </p> // the text field is initialized to the // string 1 and can hold up to 10 characters <br> <input type=“submit"> // when pressed the form tries to submit itself </form> 2/3/2009 Δικτυακός Προγραμματισμός
Event Handlers σε <form> Elements (1) Τα elements της φόρμας μπορούν να χειρίζονται τα εξής events: focus Αποκτά το focus (π.χ. ο κέρσορας σε ένα textfield) blur χάνει το focus change αλλάζει το value Το option tag δεν δημιουργεί τα παραπάνω συμβάντα. Όλοι οι τύποι button έχουν click event handlers με τη χρήση του onClick attribute: Παράδειγμα: <form name="myform"> <input type="radio" name="payment" value="1" checked onClick="insok()"> Personal Check <input type="radio" name="payment" value= "2" onClick="insok()"> Gold Bullion </br> <input type= "checkbox" name= "insurance" > Insurance? </form> 2/3/2009 Δικτυακός Προγραμματισμός
Event Handlers σε <form> Elements (2) <script language="JavaScript"> function insok() { var isgold = document.myform.payment[1].checked; var isins = document.myform.insurance.checked; var ok = null; if ( isgold == true && isins != true ) { ok = confirm("Do you want insurance?"); if ( ok == true ) { document.myform.insurance.checked = true; } </script> 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Events Window Events onload onunload Form Events onchange onsubmit onreset onselect onblur onfocus Keyboard Events onkeydown onkeypress onkeyup Mouse Events onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Pop Up Boxes Υλοποιούνται με τις μεθόδους: action(“sometext”) confirm("sometext") … var r=confirm("Press a button"); if (r==true) { document.write("You pressed OK!"); } else { document.write("You pressed Cancel!"); } prompt("sometext","defaultvalue") var name=prompt("Please enter your name","MyName"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός JavaScript Editors Windows Antechinus JavaScript http://www.c-point.com/javascript_editor.php Linux Quanta Bluefish Eclipse plug-in http://sourceforge.net/projects/jseditor 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός JavaScript Tutorials Στο site του μαθήματος w3schools http://www.w3schools.com/js 2/3/2009 Δικτυακός Προγραμματισμός
Δικτυακός Προγραμματισμός Ερωτήσεις 2/3/2009 Δικτυακός Προγραμματισμός