Προγραμματισμός Παγκόσμιου Ιστού

Transcript

1 Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 8 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 08 Μαΐου 2017

2 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης Javascript Αντικείμενα Πίνακες Συναρτήσεις Pop-ups Επιπλέον λειτουργίες Αλληλεπίδραση με HTML Αλλαγή CSS Events Έλεγχος / επικυρώσεις Timeout Βελτιστοπoιήσεις Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 2

3 Τεχνικές για RWD: Media queries Ο παρακάτω κώδικας θα εμφανίσει το μέγεθος των γραμμάτων στο 100% εάν το πλάτος είναι τουλάχιστον screen and (min-width: 1024px) { body {font-size: 100%;} } Ο παρακάτω κώδικας ελέγχει τον προσανατολισμό και το πλάτος της screen and (min-device-width: 480px) and (orientation: landscape) { body { font-size: 100%; } } Οι λογικοί τελεστές μπορούν να προσαρμοστούν Το and μπορεί να αντικατασταθεί με το not Ο προσανατολισμός portrait μπορεί να αντικατασταθεί με το landscape 3

4 Τεχνικές για RWD: Flexible media και εικόνες (1/2) Προσαρμογή HTML Αφαίρεση ιδιοτήτων height και width CSS img { max-width: 100%; height: auto; } Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 4

5 Τεχνικές για RWD: Flexible media και εικόνες (2/2) Παράδειγμα #logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; only screen and (max-device-width: 480px) { #logo { background: url(images/logo_mobile.png); width: 440px; } } Προσαρμογή logo για μικρό viewport Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 5

6 Βέλτιστες πρακτικές Μοναδική στήλη: Μέγιστο πλάτος περίπου 300px Αλλαγή σε μοναδική screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; } } Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 6

7 Έλεγχος Κινητή συσκευή Προσομοιωτές Browser (αλλαγή μεγέθους παραθύρου για την παρακολούθηση αλλαγών) Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 7

8 JavaScript και HTML Ο κώδικας JavaScript περιλαμβάνεται σε <script> tags <script type="text/javascript"> document.write("<h1>hello World!</h1>") ; </script> O παραπάνω κώδικας έχει το ίδιο αποτέλεσμα με <h1>hello World!</h1> H JavaScript μπορεί να χρησιμοποιηθεί και σε HTML objects, όπως για παράδειγμα ένα button Ο κώδικας JavaScript θα εκτελεστεί μόλις το object χρησιμοποιηθεί Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 8

9 Που τοποθετείται η JavaScript (1/3) Scripts στο τμήμα Head Τα scripts που πρέπει να εκτελεσθούν όταν κληθούν ή όταν προκαλείται ένα συμβάν (event) τοποθετούνται στο τμήμα head. Όταν τοποθετούμε ένα script στο τμήμα head, τότε είναι σίγουρο ότι αυτό θα φορτωθεί πριν χρησιμοποιηθεί. <html> <head> <script language="javascript"> εντολές </script> </head> <body> </body> </html> 9

10 Που τοποθετείται η JavaScript (2/3) Scripts στο τμήμα Body: Τα scripts που πρέπει να εκτελεσθούν όταν φορτώνεται η σελίδα τοποθετούνται στο τμήμα body. Όταν τοποθετούμε ένα script στο τμήμα body, τότε αυτό συμμετέχει στη διαμόρφωση του περιεχομένου της σελίδας. <html> <head> </head> <body> <script language="javascript"> εντολές </script> </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 10

11 Που τοποθετείται η JavaScript (3/3) Τα εξωτερικά scripts είναι αρχεία που περιέχουν κώδικα JavaScript, χωρίς το tag <script>, και έχουν επέκταση.js. Τα ενσωματώνουμε σε μια ιστοσελίδα με το tag <script> και το χαρακτηριστικό src, ως εξής: <html> <head> </head> <body> <script src="file01.js"> </script> </body> </html> Τοποθετούμε το εξωτερικό script εκεί ακριβώς που θα γράφαμε κανονικά το script Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 11

12 Blocking: φόρτωση HTML και scripts Η λειτουργία του browser συνοψίζεται ως έξης Φορτώνει το έγγραφο HTML (που περιέχει και scripts) Ξεκινά την ανάγνωση / συντακτική ανάλυση («parsing» ) του εγγράφου. Συναντά το tag <script>: Σταματά τη συντακτική ανάλυση του εγγράφου HTML Ζητά και φορτώνει το «εξωτερικό» αρχείο με το JavaScript script Εκτελεί το script Συνεχίζει τη συντακτική ανάλυση του εγγράφου HTML Αν συναντήσει και πάλι το tag < script > εκτελεί από το βήμα 3. Η συμπεριφορά αυτή αναφέρεται ως Blocking Behavior Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 12

13 Τύποι δεδομένων Πρωτογενείς Τύποι Δεδομένων number, string, boolean, function, object, null, undefined Υποστηρίζονται λειτουργικά από προκαθορισμένα αντικείμενα/μεθόδους Number, String, Boolean, Function, Object, Array Επιπλέον προκαθορισμένα βοηθητικά αντικείμενα/μέθοδοι Math, Date, RegExp Τα strings περιλαμβάνονται σε μονά ( ) ή διπλά ( ) εισαγωγικά Τα strings μπορούν να περιλαμβάνουν \n (newline), \" (double quote),.. Οι boolean παίρνουν τιμές true ή false Κάθε συνάρτηση/μέθοδος είναι και αντικείμενο 13

14 Ειδικοί τύποι και τιμές undefined: ο τύπος κάθε μεταβλητής της γλώσσας που δεν έχει οριστεί. ακόμα και αν αυτή έχει δηλωθεί! το undefined είναι επίσης «οντότητα» της γλώσσας, με τύπο undefined null: είναι ειδικό αντικείμενο με τύπο null Τελεστής typeof () επιστρέφει συμβολοσειρά με τον τύπο «οντότητας» To undefined είναι πιο όμοιο με το null της Java, παρά το null Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 14

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

16 String Έχουν την ιδιότητα length: επιστρέφει το μήκος της συμβολοσειράς Κάποιες από τις διαθέσιμες μεθόδους charat ( idx ): χαρακτήρας στη θέση idx indexof ( chr ): πρώτη θέση με τον χαρακτήρα chr lastindexof ( chr ): τελευταία θέση με τον χαρακτήρα chr substing (from, to): υποσυμβολοσειρά από τη θέση from έως και to-1 tolowercase ( ) touppercase ( ) Υπάρχουν ακόμα μέθοδοι που αφορούν την εμφάνιση big ( ) small ( ) bold ( ) fontsize ( sz ). Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 16

17 Σύνταξη Αριθμητικοί τελεστές + - * / % Τελεστές σύγκρισης < <= ==!= >= > Λογικοί τελεστές &&! Τελεστές ανάθεσης = += -= *= /= %= Τελεστής String + Τα σχόλια είναι όπως στην C και στην Java Μεταξύ // και του τέλους της γραμμής Μεταξύ /* και */ Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 17

18 Τελεστές Σύγκρισης, < == και == Οι τελεστές == και! = μας είναι (συντακτικά) οικείοι από Java, C, C++. Τους αποφεύγουμε, εκτός αν είμαστε σίγουροι για το αποτέλεσμα Η JavaScript εισάγει δύο ακόμα τελεστές σύγκρισης: === και!== Αυτοί οι «νέοι» τελεστές σύγκρισης δουλεύουν όπως αναμένουμε Αποτιμώνται σε: true (===) και false (!==) αν αντίστοιχα: οι δύο τελεστέοι είναι του ίδιου τύπου αναπαριστούν την ίδια τιμή (σύνθετη, εφόσον πρόκειται για αντικείμενα) 18

19 Statements (1/2) Τα περισσότερα JavaScript statements έχουν δανειστεί από την C Ανάθεση τιμής greeting = "Hello, " + name; Σύνθετα statement { statement;...; statement } If statements if (condition) statement; if (condition) statement; else statement; Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 19

20 Statements (2/2) If statements (συν). switch(choice) { // choice is a string case "1" : statement; break; case "2": statement; break; default: statement; break; } Loop statements while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement; for ( var i = 1; i <= 100; ++i ) {/*...*/} Μην ξεχνάτε να χρησιμοποιείτε το var (εκτός - ίσως - αν το ί έχει ήδη δηλωθεί) 20

21 Αντικείμενα Στην 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); Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 21

22 Δημιουργία αντικειμένων Με αρχικοποίηση var course = { members: "7", name=" Web Technologies" } Με την δημιουργία κενού αντικειμένου και προσθήκη πεδίων αργότερα var course = new Object(); course.members = "7"; course.name = Web Technologies"; Με την χρήση constructor: function Course(n, t) { this.members = n; this.name = t; } var course = new Course("7", "Web Technologies"); Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 22

24 Date object Χρησιμοποιείται για τη δημιουργία αντικειμένων που αναπαριστούν ημερομηνίες Αρχικοποίηση: var d = new Date(); // current date var d = new Date(milliseconds); // a date in milliseconds var d = new Date(datestring); // string specification Full date: var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); Η κλήση new Date () επιστρέφει την ώρα του συστήματος. Μέθοδοι των αντικειμένων που δημιουργούνται από το Date Object: getseconds(), getminutes(), gethours(),getdate(),getmonth() Υπάρχουν και οι αντίστοιχες «set» μέθοδοι, και πολλές ακόμα 24

25 Built-in αντικείμενα String Δημιουργία και διαχείριση συμβολοσειρών Math Παρέχει μεθόδους υλοποίησης μαθηματικών συναρτήσεων Date Αναπαράσταση και διαχείριση ημερομηνιών Array Δημιουργία και διαχείριση πινάκων Boolean Κυρίως μετατροπή τύπου Number Κυρίως μετατροπή τύπου Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 25

27 Πίνακες Aρχικοποίηση των πινάκων colors= ["red", "yellow", "green", "blue"]; Η αρίθμηση των πινάκων ξεκινά από το μηδέν Αν στην αρχικοποίηση χρησιμοποιηθούν κενά comma, τότε τα στοιχεία αυτά έχουν κενή τιμή Παράδειγμα: colors = ["red",,, "green", "blue"]; Το colors έχει 5 στοιχεία Το comma στo τέλος αγνοείται Παράδειγμα: Το colors = ["red",,, "green", "blue,] έχει επίσης 5 στοιχεία Το μέγεθος ενός πίνακα δίνεται από την κλήση colors.length Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 27

28 Δημιουργία πινάκων Με αρχικοποίηση 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"); Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 28

29 Συναρτήσεις πινάκων Εάν έχουμε τον πίνακα myarray myarray.sort() ταξινομεί τον πίνακα αλφαβητικά myarray.reverse() αντιστρέφει τα στοιχεία του πίνακα myarray.push( ) προσθέτει τα νέα στοιχεία στο τέλος του πίνακα και αυξάνει το μέγεθός του myarray.pop() αφαιρεί και επιστρέφει το τελευταίο στοιχεί του πίνακα μειώνοντας και το μέγεθός του κατά ένα myarray.tostring() επιστρέφει ένα string με όλες τις τιμές του πίνακα χωρισμένες με comma Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 29

30 Συναρτήσεις πρόσβασης σε πίνακες Δεν τροποποιούν το αντικείμενο τύπου array από το οποίο καλούνται concat(a) το array έχοντας παραθέσει το όρισμα a join() το array με τα περιεχόμενά του σε string slice(begin,end) τον υποπίνακα από begin έως end 1. την (1η) θέση του array που περιέχει τιμή «===» με α, ή -1, indexof(a) αν η τιμή αυτή δεν περιέχεται στο array. lastlndexof(a) την τελευταία θέση του array που περιέχει τιμή «===» με α, ή -1, αν η τιμή αυτή δεν περιέχεται στο array 30

32 Συναρτήσεις (1/5) Σύνταξη για τον ορισμό μιας συνάρτησης function name(arg1,, argn) { statements } Όλες οι μεταβλητές που ορίζονται σε μια συνάρτηση είναι τοπικές Η συνάρτηση μπορεί να επιστρέφει μια τιμή με return statement Η μέθοδος prompt() δημιουργεί ένα window object (όπως και η alert()) αλλά δέχεται είσοδο από το χρήστη Π.χ. myvariable = prompt( prompt message ); Η σύνταξη για την κλήση μιας συνάρτησης είναι: name(arg1,, argn) 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 } } Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 32

33 Συναρτήσεις (2/5) Μία συνάρτηση είναι αντικείμενο και μπορούμε π.χ. να ορίσουμε: var f = function(x) { if (x > 10) return true; else return false; } var y = f(15); var g = f; var z = g(25); Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 33

34 Συναρτήσεις (3/5) Απλή κλήση συνάρτησης <html> <head> <script> function myfunction() { alert("hello"); } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="κλήση συνάρτησης"> </form> <p>με κλικ στο button, θα κληθεί η συνάρτηση που θα εμφανίσει ένα μήνυμα.</p> </body> </html>

35 Συναρτήσεις (4/5) Συνάρτηση με oρίσματα (arguments) <html> <head> <script> function myfunction(txt) { alert(txt); } </script> </head> <body> <form> <input type="button" onclick="myfunction('καλημέρα!')" value="το Πρωί"> <input type="button" onclick="myfunction('καλό Απόγευμα!')" value="το Απόγευμα"> </form> <p> Με κλικ σ ένα από τα πλήκτρα εντολής, θα κληθεί η συνάρτηση και θα εμφανίσει (alert) το όρισμα που της μεταβιβάζεται. </p> 35 </body> </html>

36 Συναρτήσεις (5/5) Συνάρτηση με oρίσματα που επιστρέφει τιμή Βρίσκει το άθροισμα (sum) δύο ορισμάτων και επιστρέφει το αποτέλεσμα <html> <head> <script> function total(numbera, numberb) { return numbera + numberb } </script> </head> <body> <script> document.write(total(2, 3)) </script> <p> Το script στο τμήμα body καλεί μια συνάρτηση που έχει δύο ορίσματα. </p> <p> Η συνάρτηση επιστρέφει το άθροισμα (sum) αυτών των δύο ορισμάτων.</p> </body> </html> 36

37 Καθολικές (global) συναρτήσις isnan(): Επστρέφει true αν το όρισμά της δεν είναι αριθμός. Διαφορετικά επιστρέφει false. parsefloat(): Δέχεται String και προσπαθεί να το μετατρέψει σε floating point αριθμό. Επιστρέφει τον αριθμό, αν επιτύχει, διαφορετικά επιστρέφει NaN parselnt(): Δέχεται String και τροσπαθεί να το μετατρέψει σε ακέραιο αριθμό. Επιστρέφει τον αριθμό, αν επιτύχει, διαφορετικά επιστρέφει NaN Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 37

38 Μαθηματικές συναρτήσεις Μπορούμε να χρησιμοποιούμε τις μεθόδους του object Math Όνομα Math.sqrt(x) Math.pow(x,y) Math.min(x,y) Math.max(x,y) Math.round(x) Περιγραφή Επιστρέφει την τετραγωνική ρίζα του x Επιστρέφει την τιμή του x υψωμένη στην y Επιστρέφει τον ελάχιστο από τους x,y Επιστρέφει τον μέγιστο από τους x,y Επιστρέφει τον πλησιέστερο ακέραιο Math.random(x) Επιστρέφει ένα τυχαίο αριθμό από 0 μέχρι 1 Math.abs(x) Επιστρέφει την απόλυτη τιμή του x Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 38

40 Pop-ups Υλοποιούνται με τις μεθόδους 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?"); } Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 40

42 Εμφάνιση νέου παραθύρου <html> <head> <script> </script> </head> <body> </body> function openwindow() { window.open(" } <form> <input type=button value="εμφάνιση Παραθύρου" onclick="openwindow()"> </form> </html> 42

43 Εμφάνιση νέου παραθύρου (πλήρες μέγεθος) <html> <head> <script> function openwindow() { window.open(" "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=40,left=30,width=300,height=300"); } //fullscreen=yes/no </script> </head> <body> <form> <input type=button value="go to Google" onclick="openwindow()"> </form></body></html> 43

44 Ανανέωση <html> <head> <script> </script> </head> <body> </body> function refresh() { location.reload(); } <form> <input type="button" value="refresh" onclick="refresh()"> </form> </html> 44

45 Εντοπισμός του browser <html> <head> <script> document.write( You are using: "+ navigator.appname); </script> //cookieenabled, language, platform, </head> <body> </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 45

46 Εμφάνιση στοιχείων οθόνης <html><body> <script> document.write( Resolution: "); document.write(screen.width + "*"); document.write(screen.height + "<br>"); document.write( Available width and height: "); document.write(window.screen.availwidth + "*"); document.write(window.screen.availheight+ "<br>"); document.write( Color depth: "); document.write(window.screen.colordepth + "<br>"); </script></body></html> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 46

48 Αλληλεπίδραση με HTML Η JavaScript μπορεί να έχει πρόσβαση στην HTML σελίδα και να αλλάξει, να προσθέσει ή να αφαιρέσει κάθε element ή attribute σε element Η πρόσβαση γίνεται μέσω του HMTL DOM (Document Object Model) document.documentelement όλο το HTML document.body το body document.getelementbyid( mydiv ) element με το συγκεκριμένο id document.myform φόρμα με το συγκεκριμένο όνομα Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 48

49 Ανάκτηση HTML στοιχοίων του εγγράφου (1/2) Όνομα Ιδιότητας Επιστρέφει getelementbyld(<id>) Αντικείμενο τύπου HTMLEIement getelementsbyclassname(<dass>) Array αντικειμένων, HTMLEIement [ ] getelementsbyname(<name>) Array αντικειμένων, HTMLEIement [ ] getelementsbytagname(<tag>) Array αντικειμένων, HTMLEIement [ ] queryselector(<selector>) To 1 ο στοιχείο με τον δεδομένο CSS selector q ueryselectorall (<selector>) Array αντικειμένων, HTMLEIement [ ] Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 49

50 Ανάκτηση HTML στοιχοίων του εγγράφου (2/2) Όνομα Ιδιότητας Επιστρέφει activeelement HTMLEIement που έχει το «focus» body HTMLEIement που αναπαριστά το «σώμα» forms HTMLCollection (όλες οι φόρμες) head HTMLHeadElement (και τύπου HTMLEIement) images HTMLCollection (όλες οι εικόνες <img>) links HTMLCollection (όλοι οι σύνδεσμοι <a>) scripts HTMLCollection (όλα τα στοιχεία <script>) Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 50

51 Επεξεργασία των attibutes Στο ακόλουθο παράδειγμα: <a id= mylink href= title= Link to my university >Press Here</a> Tα attributes αλλάζουν ως εξής document.getelementbyid( mylink ).href = ; document.getelementbyid( mylink ).title = a new title ; document.getelementbyid( mylink ).innerhtml = Πατήστε εδώ ; Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 51

52 Αλλαγή CSS Styles Για να αλλάξουμε τα CSS Styles χρησιμοποιούμε την ιδιότητα style Σε κάθε ιδιότητα style η αναφορά γίνεται στο όνομα της εκτός από τα style που έχουν παύλα στο όνομά τους, όπου αφαιρούμε την παύλα και κάνουμε το επόμενο γράμμα κεφαλαίο Παραδείγματα document.body.style.color = red document.body.style.backgroundcolor = white Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 52

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

55 Form Events Κάθε φόρμα έχει στοιχεία τα οποία δέχονται είσοδο από τον χρήστη και μπορούν σχετίζονται με ένα ή περισσότερα JavaScript event Τα στοιχεία αυτά είναι Buttons, Text Fields, Text Areas, Selections Lists Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 55

56 Event handlers Είναι ο τρόπος με τον οποίο συνδέουμε events με JS functions Μοιάζουν με τα συνήθη HTML attributes Ξεκινούν με την λέξη «on» ακολουθούμενη από το event name π.χ. onmouseover = myonmouseover(); π.χ. onmouseover = alert(some message); Οι event handlers μπορεί να αναφέρονται σε τρία επίπεδα ολόκληρου του εγγράφου μιας φόρμας ενός στοιχείου μιας φόρμας Στην HTML5 event handlers μπορούν να προστεθούν σε οποιοδήποτε element Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 56

57 Παραδείγματα 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 Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 57

58 Χρήση του αντικειμένου event <script> // get all <p> elements var pelems = document.getelementsbytagname("p"); for (var i = 0; i < pelems.length; i++) { // Assign name of handling function not a call to it pelems[i].onmouseover = handlemouseover; pelems[i].onmouseout = handlemouseout; } // functionargument "e" is of type Event function handlemouseover(e) { // e.target is the element receiving the event e.target.style.background='white' ; e.target.style.color= 'black' ; } function handlemouseout(e) { e.target.style.background='gray'; e.target.style.color='white' ; }

59 Events Window Events onload onunload Form Events onchange onsubmit onreset onselect onblur onfocus Η HTML5 έχει εισάγει πολλά νέα events! ags/ref_eventattributes.asp Keyboard Events onkeydown onkeypress onkeyup Mouse Events onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup 27

60 Παράδειγμα <article onclick="showarticle()"> <header onclick="showheader()"> <h1>h1 element in header</h1> </header> <section> <p onclick="showp()">click this p</p> plain text - not clickable </section> </article> <script> function showarticle() { alert("you clicked on article"); } function showheader() { alert("you clicked on header"); } function showp() { alert("you clicked on p"); } </script> 60

61 Event handlers σε φόρμες Τα 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> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 61

63 Επικύρωση Ελέγχουμε αν το πεδίο κειμένου περιέχει τον <html><head> <script> function validate() { x=document.myform; at=x.my .value.indexof("@"); if (at == -1) { alert("δεν είναι ένα έγκυρο ") return false } } </script></head> <body> <form name="myform" action="submitpage.html" onsubmit="return validate()"> Το σας : <input type="text" name="my "> <input type="submit" value="submit"> </form> </body></html> 63

64 Επικύρωση πεδίου με μέγιστες και ελάχιστες τιμές <html><head> <script> function validate() { x=document.myform; txt=x.myinput.value; if (txt>=1 && txt<=5) { return true } else { alert("πρέπει να έχει τιμές από 1 έως 5"); return false } } </script></head> <body> <form name="myform" action="submitpage.html" onsubmit="return validate()"> Εισάγετε μια τιμή από 1 έως 5 : <input type="text" name="myinput"> <input type="submit" value="submit"> </form> </body></html> 64

65 Επικύρωση πεδίου για πλήθος χαρακτήρων <html><head> <script> function validate() { x=document.myform; input=x.myinput.value; if (input.length>5) { alert("όχι περισσότερους από 5 χαρακτήρες"); return false } else { return true } } </script></head> <body> <form name="myform" action="submitpage.html" onsubmit="return validate()"> Μην γράψετε περισσότερους από 5 χαρακτήρες : <input type="text" name="myinput"> <input type="submit" value="send input"> </form> </body></html> 65

66 Έλεγχος «κενού» πεδίου <html> <head> </head> <body> <script> function notempty(elem, helpermsg){ if(elem.value.length == 0){ alert(helpermsg); elem.focus(); return false; } else { alert(elem.value); return true; } } </script> <form> Required Field: <input type="text" id = "req1"> <input type="button" onclick="notempty(document.getelementbyid('req1'), 'Please Enter a Value')" value="check Field" /> </form> </body> </html> 66

68 Timeout (1/2) Η συνάρτηση settimeout μπορεί να χρησιμοποιηθεί και για μηάμεση εκτέλεση κώδικα settimeout(javascriptcodetobeexecuted, MillisecondsUntilExecution) <html> <head> <script> function move() { self.location.href = " } </script> </head> <body onload="settimeout( move()', 3000);"> This page has moved to <a href=" </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 68

69 Timeout (2/2) <html> <head> <script> function timemsg() { var t=settimeout("alertmsg()",5000); } function alertmsg() { alert("hello"); } </script> </head> <body> <form> <input type="button" value="click me and wait - Display alert box in 5 seconds" onclick="timemsg()" /> </form> </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 69

71 Βελτιστοποιήσεις Προσθήκη όλου του JavaScript σε ένα αρχείο Βελτιστοποίηση κώδικα Google Closure Compiler: Προγραμματισμός Παγκόσμιου Ιστού, 8η Διάλεξη 71