Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

JavaScript Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "JavaScript Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"— Μεταγράφημα παρουσίασης:

1 JavaScript Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ

2 Τι είναι η JavaScript H JavaScript δεν είναι Java και ούτε σχετίζεται με την Java –To αρχικό της όνομα ήταν “LiveScript”. –Το όνομα άλλαξε όταν η Java έγινε δημοφιλής. –Τα statements στην JavaScript μοιάζουν με τα statements της Java επειδή και οι δύο έχουν δανειστεί πολλά στοιχεία από την C. Η JavaScript δεν χρησιμοποιείται για πλήρη προγράμματα αλλά: –Μικρά κομμάτια κώδικα περιλαμβάνονται σε σελίδες HTML για να αυξήσουν την λειτουργικότητά τους. –Συνήθως χρησιμοποιούνται σε συνδυασμό με φόρμες σε HTML σελίδες. Η JavaScript είναι σχετικά ανεξάρτητη πλατφόρμας –Πολλές φορές υπάρχει ασυμβατότητα ανάμεσα στους browsers. 22/3/2009Δικτυακός Προγραμματισμός

3 JavaScript και HTML Ο κώδικας JavaScript περιλαμβάνεται σε tags: document.write(" Hello World! ") ; Το type attribute επιτρέπει την χρήση και άλλων scripting languages. –H JavaScript είναι default O παραπάνω κώδικας έχει το ίδιο αποτέλεσμα με: Hello World! Το semicolon στο τέλος της γραμμής είναι προαιρετικό αλλά συνιστάται. –Τα semicolons χρειάζονται εάν χρησιμοποιούνται περισσότερα από δύο statements στην ίδια γραμμή. 2/3/2009Δικτυακός Προγραμματισμός3

4 Πως χρησιμοποιείται η JavaScript JavaScript μπορεί να μπει είτε στο είτε στο μιας σελίδας HTML –Οι συναρτήσεις JavaScript πρέπει να ορίζονται στο Αυτό διασφαλίζει πως η συνάρτηση θα έχει οριστεί πριν χρησιμοποιηθεί –Η JavaScript στο εκτελείται σταδιακά καθώς η σελίδα «φορτώνεται» από τον browser H JavaScript μπορεί να τοποθετηθεί σε ξεχωριστά αρχεία (.js) –Το παραπάνω tag θα μπορούσε να χρησιμοποιηθεί οπουδήποτε μέσα στην σελίδα HTML. –Τα εξωτερικά αρχεία με κώδικα JavaScript μπορούν να χρησιμοποιηθούν σε περισσότερες από μία σελίδες HTML. –Στο εξωτερικό αρχείο δεν περιλαμβάνεται το tag. H JavaScript μπορεί να χρησιμοποιηθεί και σε HTML form object, όπως για παράδειγμα ένα button. –Ο κώδικας JavaScript θα εκτελεστεί μόλις το form object χρησιμοποιηθεί. 2/3/2009Δικτυακός Προγραμματισμός4

5 Τύποι Δεδομένων 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Δικτυακός Προγραμματισμός5

6 String Έχουν μια ιδιότητα την length. Κάποιες από τις διαθέσιμες μεθόδους είναι οι: charAt ( idx ) indexOf ( chr ) lastIndexOf ( chr ) substing (fromidx, toidx ) toLowerCase ( ) toUpperCase ( ) Υπάρχουν ακόμα μέθοδοι που αφορούν την εμφάνιση: big ( ) small ( ) bold ( ) fontsize ( sz ) …. 2/3/2009Δικτυακός Προγραμματισμός6

7 Παράδειγμα String Methods var txt="Hello World!"; document.write(" Big: " + txt.big() + " "); document.write(" Small: " + txt.small() + " "); document.write(" Bold: " + txt.bold() + " "); document.write(" Italic: " + txt.italics() + " "); document.write(" Blink: " + txt.blink() + " (does not work in IE) "); document.write(" Fixed: " + txt.fixed() + " "); document.write(" Strike: " + txt.strike() + " "); document.write(" Fontcolor: " + txt.fontcolor("Red") + " "); document.write(" Fontsize: " + txt.fontsize(16) + " "); document.write(" Lowercase: " + txt.toLowerCase() + " "); document.write(" Uppercase: " + txt.toUpperCase() + " "); document.write(" Subscript: " + txt.sub() + " "); document.write(" Superscript: " + txt.sup() + " "); document.write(" Link: " + txt.link("http://www.w3schools.com") + " "); 2/3/2009Δικτυακός Προγραμματισμός7

8 Μεταβλητές Οι μεταβλητές (Variables) ορίζονται με το var statement: –var pi = , x, y, name = “Giorgos” –Οι μεταβλητές πρέπει να ξεκινούν με γράμμα ή underscore ( _ ) –Τα ονόματα των μεταβλητών είναι case-sensitive –Οι μεταβλητές δεν έχουν τύπο (untyped) και μπορούν να αποθηκευόσουν δεδομένα οποιουδήποτε τύπου. –Η λέξη var είναι προαιρετική αλλά η χρήση της συνιστάται. Οι μεταβλητές που ορίζονται μέσα σε συναρτήσεις είναι τοπικές και μπορούν να χρησιμοποιηθούν μόνο μέσα στην συνάρτηση. Οι μεταβλητές που ορίζονται εκτός συναρτήσεων είναι γενικές (global) 2/3/2009Δικτυακός Προγραμματισμός8

9 Τελεστές (1) Αριθμητικοί τελεστές: + - * / % Τελεστές σύγκρισης: = > Λογικοί τελεστές: && || ! (&& and || are short-circuit operators) Τελεστές ανάθεσης: += -= *= /= %= Τελεστής string: + Τελεστής συνθήκης: condition ? value_if_true : value_if_false 2/3/2009Δικτυακός Προγραμματισμός9

10 Σχόλια Τα σχόλια είναι όπως στην C και στην Java –Μεταξύ // και του τέλους της γραμμής –Μεταξύ /* και */ 2/3/2009Δικτυακός Προγραμματισμός10

11 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Δικτυακός Προγραμματισμός11

12 Statements (2) Switch statement: switch (expression){ case label : statement; break; case label : statement; break;... default : statement; } 2/3/2009Δικτυακός Προγραμματισμός12

13 Αντικείμενα Στην 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Δικτυακός Προγραμματισμός13

14 Δημιουργία Αντικειμένων Με αρχικοποίηση: var course = { number: "CIT597", teacher="Dr. Dave" } Με την δημιουργία κενού αντικειμένου και προσθήκη πεδίων αργότερα: var course = new Object(); course.number = "CIT597"; course.teacher = "Dr. Dave"; Με την χρήση constructor: function Course(n, t) { // συνήθως στο this.number = n; this.teacher = t; } var course = new Course("CIT597", "Dr. Dave"); 2/3/2009Δικτυακός Προγραμματισμός14

15 Πίνακες Η αρχικοποίηση των πινάκων στην 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Δικτυακός Προγραμματισμός15

16 Δημιουργία Πινάκων Με αρχικοποίηση: 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Δικτυακός Προγραμματισμός16

18 Συναρτήσεις Πινάκων Εάν έχουμε τον πίνακα myArray: –myArray.sort() ταξινομεί τον πίνακα αλφαβητικά. –myArray.reverse() αντιστρέφει τα στοιχεία του πίνακα. –myArray.push(…) προσθέτει τα νέα στοιχεία στο τέλος του πίνακα και αυξάνει το μέγεθός του. –myArray.pop() αφαιρεί και επιστρέφει το τελευταίο στοιχεί του πίνακα μειώνοντας και το μέγεθός του κατά ένα. –myArray.toString() επιστρέφει ένα string με όλες τις τιμές του πίνακα χωρισμένες με comma. 2/3/2009Δικτυακός Προγραμματισμός18

19 Το 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] + “ ”); } –Για το παραπάνω παράδειγμα η έξοδος θα ήταν: teacher: Dr. Dave number: CIT597 2/3/2009Δικτυακός Προγραμματισμός19

20 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Δικτυακός Προγραμματισμός20

21 Συναρτήσεις Οι συναρτήσεις θα πρέπει να ορίζονται στο μιας HTML σελίδας για να εξασφαλίσουμε ότι έχουν «φορτωθεί» πριν τις καλέσουμε. Η σύνταξη για τον ορισμό μιας συνάρτησης είναι: –function name(arg1, …, argN) { statements } Όλες οι μεταβλητές που ορίζονται σε μια συνάρτηση είναι τοπικές. Η συνάρτηση μπορεί να επιστρέφει μια τιμή. Η σύνταξη για την κλήση μιας συνάρτησης είναι: name(arg1, …, argN). 2/3/2009Δικτυακός Προγραμματισμός21

22 Παράδειγμα Συνάρτησης 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 } 2/3/2009Δικτυακός Προγραμματισμός22

23 Αλληλεπίδραση με χρήστη Η JS βασίζεται στα events: –Παραδείγματα Events: επιλογή προηγούμενης/επόμενης σελίδας επιλογή ενός link άνοιγμα μιας νέας URL mouseover (για link) Ορίζονται επίσης τα actions, που σχετίζονται με πλοήγηση αλληλεπίδραση με κάποια στοιχεία μιας HTML φόρμας. –Παράδειγμα: έλεγχος στοιχείων μιας φόρμας πριν την υποβολή τους. 2/3/2009Δικτυακός Προγραμματισμός23

24 Form Events Κάθε φόρμα έχει στοιχεία τα οποία δέχονται είσοδο από τον χρήστη και μπορούν σχετίζονται με ένα ή περισσότερα JavaScript event. Τα στοιχεία αυτά είναι: –Buttons, –Text Fields, –Text Areas, –Selections Lists Τα hidden fields μιας HTML form δεν σχετίζονται με JS events. 2/3/2009Δικτυακός Προγραμματισμός24

25 Event Handlers Είναι ο τρόπος με τον οποίο συνδέουμε events με JS functions. –Μοιάζουν με τα συνήθη HTML attributes. –Ξεκινούν με την λέξη «on» ακολουθούμενη από το event name: π.χ. onmouseover = myOnMouseOver(); π.χ. onmouseover = alert(Some message); Οι event handlers μπορεί να αναφέρονται σε τρία επίπεδα: –ολόκληρου του εγγράφου –μιας φόρμας –ενός στοιχείου μιας φόρμας 2/3/2009Δικτυακός Προγραμματισμός25

26 Παραδείγματα 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Δικτυακός Προγραμματισμός26

27 Παράδειγμα onSubmit Enter a number between 1 and 9: // the text field is initialized to the // string 1 and can hold up to 10 characters // when pressed the form tries to submit itself 2/3/2009Δικτυακός Προγραμματισμός27

28 Event Handlers σε Elements (1) Τα elements της φόρμας μπορούν να χειρίζονται τα εξής events: –focus Αποκτά το focus (π.χ. ο κέρσορας σε ένα textfield) –blurχάνει το focus –changeαλλάζει το value Το option tag δεν δημιουργεί τα παραπάνω συμβάντα. Όλοι οι τύποι button έχουν click event handlers με τη χρήση του onClick attribute: –Παράδειγμα: Personal Check Gold Bullion Insurance? 2/3/2009Δικτυακός Προγραμματισμός28

29 Event Handlers σε Elements (2) 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; } 2/3/2009Δικτυακός Προγραμματισμός29

30 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Δικτυακός Προγραμματισμός30

31 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Δικτυακός Προγραμματισμός31

32 JavaScript Editors Windows –Antechinus JavaScript –http://www.c-point.com/javascript_editor.phphttp://www.c-point.com/javascript_editor.php Linux –Quanta –Bluefish Eclipse plug-in –http://sourceforge.net/projects/jseditorhttp://sourceforge.net/projects/jseditor 2/3/2009Δικτυακός Προγραμματισμός32

33 JavaScript Tutorials Στο site του μαθήματος w3schools –http://www.w3schools.com/jshttp://www.w3schools.com/js 2/3/2009Δικτυακός Προγραμματισμός33

34 Ερωτήσεις 2/3/2009Δικτυακός Προγραμματισμός34


Κατέβασμα ppt "JavaScript Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google