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

Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 7 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 24 Απριλίου 2017

Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης Responsive Website Design Τεχνικές για RWD: Media queries Τεχνικές για RWD: Flexible media και εικόνες Παράδειγμα Βέλτιστες πρακτικές Σύνδεσμοι τηλεφώνου και μηνυμάτων CSS για εκτύπωση Έλεγχος Javascript Εισαγωγή Τοποθέτηση script Τύποι δεδομένων Μεταβλητές Σύνταξη Statements Αντικείμενα Πίνακες Συναρτήσεις 2

Σχεδιασμός διεπαφών Βασικές προσεγγίσεις Liquid layouts Fixed layouts Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 3

Παράδειγμα Fixed Layout <div id="container"> <div id="header"> Masthead and headline </div> <div id="links"> List of links </div> <div id="main"> Main article... </div> <div id="news"> News and announcements... </div> <div id="footer"> Copyright information </div> </div> #container { width: 750px; border: solid 1px; } #header { background: #CCC; padding: 15px; } #links { background-color: fuchsia; float: left; width: 175px; } #main { background-color: aqua; float: left; width: 400px; } #news { background-color: green; float: left; width: 175px; } 4

Παράδειγμα Liquid Layout <div id="header"> Head and headline </div> <div id="main"> Main article... </div> <div id="extras"> List of links and news </div> <div id="footer"> Copyright information </div> #header { background: #CCC; padding: 15px; } #main { background-color: aqua; float: left; /* floats the whole main article to the left */ width: 60%; margin-right: 5%; /* adds space between columns */ margin-left: 5%; } #extras { margin-right: 5%} /* space on the right of the side column */ #footer { clear: left; /* starts the footer below the floated content */ padding: 15px; background: #CCC; } 5

Position position:static: Η standard επιλογή των browsers όπου το περιεχόμενο ακολουθεί το ένα το άλλο position:relative: Τοποθετεί το περιεχόμενο σε σχέση με εκεί που θα έπρεπε με βάση την static επιλογή. Το αρχικό σημείο παραμένει κενό π.χ. div.content {position: relative; top:10px; left:100px; background-color: fuchsia;} position:absolute: Το περιεχόμενο δεν ακολουθεί τη ροή και δεν επηρεάζει τα άλλα στοιχεία της σελίδας π.χ. h1 { position: absolute; top: 0px; left: 500px;} position:fixed: Το περιεχόμενο τοποθετείται σε συγκεκριμένο σημείο του παραθύρου π.χ. h1 { position:fixed ; top: 0px; left: 0px;} Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 6

Relative βάσει containing block Όταν ένα element βρίσκεται «μέσα» σε κάποιο άλλο που έχει το position του relative, absolute, ή fixed, το element θα τοποθετηθεί με βάση το συγκεκριμένο element στο οποίο βρίσκεται p { } img { } position: relative; background-color: green; border: 2px solid black; position: absolute; bottom: 0%; right: 0%; Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 7

Float To float χρησιμοποιείται για να τοποθετούμε περιεχόμενο δεξιά (float:right) ή αριστερά (float:left) στη σελίδα μας και το υπόλοιπο περιεχόμενο να το «περικυκλώνει» Η επιλογή clear σταματά τα element να συνεχίσουν γύρω από ένα floating element, όπως για παράδειγμα όταν θέλω να έχω μια νέα γραμμή p#end {clear: left;} <p id="end"> </p> Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 8

Responsive Web Design Το responsive web design στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές 1 website για όλες τις συσκευές desktop, tablets, smartphones Διαμόρφωση του layout της σελίδας ανά ανάλυση οθόνης Ιδανικό για sites με μικρή πολυπλοκότητα Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 9

Adaptive Web Design To adaptive web design αναγνωρίζει τις διαφορετικές συσκευές του χρήστη. Όπως και το responsive design, επίσης στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές Διαφορετικά website για desktop και mobile συσκευές Αναγνωρίζει τη συσκευή του χρήστη, όχι την ανάλυση της οθόνης Ιδανικό για website με μεγάλη λειτουργικότητα 10

Responsive Web Design Το 2010 ο E. Marcotte εισήγαγε τον όρο Responsive Web Design Χρήση 3 εργαλείων Media queries Fluid grids / layout Scalable / flexible images για την παρουσίαση περιεχομένου σε διαφορετικές συσκευές / αναλύσεις οθονών Βασικό κομμάτι αποτελεί το media query, μια «αίτηση» για την πληροφορία σχετικά με την ανάλυση των συσκευών των χρηστών Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 11

Τεχνικές για RWD 3 βασικές τεχνικές: Flexible, grid-based layouts Τα sites υλοποιούνται με χρήση ποσοστών για τα πλάτη Media queries Χρήση CSS3 Flexible media & images Όταν αλλάζει η οθόνη, τα media/εικόνες προσαρμόζονται αντίστοιχα στο μέγεθος της οθόνης Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 12

Τεχνικές για RWD: Flexible, gridbased layout Βασική ιδέα: Έχει σχεδιαστεί με βάση τις αναλογίες -> χρήση ποσοστών Η αναλογία για κάθε αντικείμενο της σελίδας είναι ο χώρος που θα του αποδοθεί διαιρούμενος με την ολική σελίδα / χώρο Παράδειγμα Έστω ότι το desktop layout έχει πλάτος 960px Έστω ότι το αντικείμενο έχει πλάτος 300px Άρα η αναλογία θα είναι 31.25% 300px / 960px = 31.25% Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 13

Fluid grids / layouts στόχος ολικός χώρος = αποτέλεσμα Τίτλος στόχος = 700px 700px 988px = 0.7085 *100 =70.85% Ολικό πλάτος = 988px Στόχος 1 στήλης = 329px 329px 988px = 33.29% Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 14

Viewport Meta Tag (1/2) Η default ενέργεια για την πλειοψηφία των κινητών συσκευών είναι να κάνουν zoom out και να προσαρμόζουν αντίστοιχα τη σελίδα Viewport Meta Tag Ορίζει στο browser πώς να παρουσιάσει τη σελίδα πόσο μεγάλο να είναι το viewport Διαμορφώνει το πλάτος και την αρχική κλιμάκωση Ουσιαστικά αναφέρεται σε ένα χώρο όπου θα παρουσιάζεται η σελίδα Είναι εφικτός ο ορισμός τιμών pixel σε CSS pixels ανεξάρτητα από τα pixels της συσκευής Με 100% zoom, pixels συσκευής = CSS pixels Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 25

Viewport Meta Tag (2/2) Χρήση του viewport meta tag στο <head> Υπάρχουν 2 τρόποι για την προσθήκη του viewport tag Χρήση του κανόνα @viewport CSS Σχετικά νέο και γενικά δεν υποστηρίζεται /* CSS Document */ @viewport {width: 480px; zoom: 1;} Χρήση του viewport meta tag Υποστηρίζεται <meta name="viewport" content="width=device-width, initial-scale=1 > Προσαρμογή στο πλάτος της συσκευής Χωρίς zoom Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 16

Τεχνικές για RWD: Media queries (1/5) Η W3C δημιούργησε τα media queries ως μέρος του προτύπου CSS3 Είναι το βασικό εργαλείο του RWD, επιτρέποντας τη διατύπωση Διαφορετικών στυλ για ξεχωριστές συσκευές Πλάτους του viewport ή προσανατολισμού συσκευής Επιπλέον Αναγνωρίζει δυνατότητες κινητών συσκευών, όπως η ανάλυση οθόνης Διαμορφώνει την παρουσίαση (μέσω του browser) των στυλ βάσει των δυνατοτήτων Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 17

Τεχνικές για RWD: Media queries (2/5) <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href= test.css" /> Τύπος media: screen Το βασικό query είναι στις παρενθέσεις, που περιλαμβάνει ένα χαρακτηριστικό του media (max-device-width) το οποίο θα εξεταστεί την τιμή στόχο (480px) Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 18

Τεχνικές για RWD: Media queries (3/5) Τα πολλαπλά viewport υλοποιούνται με χρήση πολλαπλών τιμών ιδιοτήτων σε ένα query συνδέοντας τις τιμές με το and <link rel="stylesheet" media="only screen and (min-width:200px) and (maxwidth: 500px)" href= small.css"> <link rel="stylesheet" media="only screen and (min-width:501px) and (maxwidth: 1100px)" href= large.css"> Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 19

Τεχνικές για RWD: Media queries (4/5) Παράδειγμα 1 body { background: gray; } @media screen and (max-width:500px) { body { background: blue; } } Χρώμα φόντου γκρι ΑΛΛΑ για μέγιστο πλάτος μέχρι 500 pixels το χρώμα φόντου είναι μπλε Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 20

Τεχνικές για RWD: Media queries (5/5) Μη επικαλυπτόμενα @media screen and (min-width: 551px) and (max-width: 760px) { } /*μικρές οθόνες*/ @media screen and (max-width: 550px) { /*πολύ μικρές οθόνες*/ } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 21

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

Τεχνικές για RWD: Media queries (2/3) Ο παρακάτω κώδικας οδηγεί σε μια σελίδα που το χρώμα θα αλλάζει σε μπλε μόνο μεταξύ 500px και 700px @media screen (min-width:500px) and (max-width:700px){ body {background: blue;} } Ο παρακάτω κώδικας οδηγεί σε πορτοκαλί φόντο όταν η συσκευή φτάσει πλάτος 1024px και αλλάζει σε κίτρινο όταν η οθόνη μιας συσκευής είναι στο όριο των κινητών συσκευών @media (max-width: 1024px) { body { background: orange;} } @media (max-width: 768px) { body {background: yellow;} } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 24

Τεχνικές για RWD: Media queries (3/3) Ορισμοί Width = πλάτος περιοχής εμφάνισης Device-width = πλάτος συσκευής Orientation = προσανατολισμός συσκευής Aspect-ratio = Σχέση πλάτους / ύψους Ορίζει με 2 αριθμούς που διαχωρίζονται με slash / Device-aspect-ratio = Σχέση device-width / device-height Resolution = Dots per inch (dpi) Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 25

Τεχνικές για RWD: Flexible media και εικόνες (1/3) Με χρήση media queries είναι εφικτή Η επέκταση διαφορετικών ορισμών για media ώστε να προστεθούν ιδιότητες βάσει της συσκευής που χρησιμοποιείται μέγεθος οθόνης, προσανατολισμός, χρώμα Η διατύπωση κανόνων που δεν επιτρέπει στις εικόνες να ξεπερνούν το πλάτος του σχετικού σημείου όπου περιλαμβάνονται Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 27

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

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

Παράδειγμα (1/4) Έστω μια σελίδα με την παρακάτω βασική δομή HTML <div id="header"> <div id="titlearea"></div> <div class= imagearea"></div> </div> <div id= article"> <div id="contentsidebar"> <div id="content"></div> <div id="sidebar"></div> </div> </div> Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 30

Παράδειγμα (2/4) Έστω η συγκεκριμένη σελίδα με την παρακάτω βασική δομή CSS #header {width: 960px;} #titlearea {width: 400px;} #header.imagearea {width: 540px;} #article {width: 960px;} #contentsidebar {width: 790px;} #content {width: 470px;} #sidebar {width: 300px;} Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 31

Παράδειγμα (3/4) Έστω ότι ο στόχος έχει πλάτος 960px #header {width: 100%;} #titlearea {width: 41.666667%;} #header.imagearea {width: 56.25%;} #article {width: 100%;} #contentsidebar {width: 82.291667%;} #content {width: 48.958333%;} #sidebar {width: 31.25%;} Φόρμουλα (αρχικά pixels/pixels στόχου) * 100% Παράδειγμα για το #titlearea: (400px/960px)*100% = 41.666667% Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 32

Παράδειγμα (4/4) Πρέπει να γίνει το αντίστοιχο και για τα υπόλοιπα elements /*Pixel για το margin = 25px */ ul { margin: 10px 0 0 25px;} /*Μετατροπή ποσοστών */ ul { margin: 10px 0 0 16.666667%;} Προσαρμογή και των εικόνων img { max-width: 100%; } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 33

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

Βέλτιστες πρακτικές (2/4) Ελάχιστο μέγεθος γραμματοσειράς 13px Κουμπιά touch-friendly H apple προτείνει ελάχιστο στόχο 44x44px Χρώματα υψηλής αντίθεσης Έλεγχος! Μεταξύ πολλαπλών πλατφορμών Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 36

Βέλτιστες πρακτικές (3/4) Ορισμός μέγιστου πλάτους (max-width) 480px είναι ένα iphone 4 Ορισμός στυλ μέσα σε media query @media (max-width: 480px) { } /* στυλ */ Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 37

Βέλτιστες πρακτικές (4/4) Προσθήκη κλάσης για την απόκρυψη αντικειμένων σε κινητές συσκευές @media (max-width: 480px) { }... td[class= hide ], span[class= hide ] { display:none!important; } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 38

Σύνδεσμοι τηλεφώνου και μηνυμάτων Τηλέφωνο SMS <a href="tel:2104142150">call 210-4142150</a> Πολλοί browsers θα κάνουν την αντίστοιχη κλήση όταν πατηθεί ο σύνδεσμος <a href="sms:6976971000">text 6976971000</a> Πολλοί browsers θα εκκινήσουν την εφαρμογή γραπτών μηνυμάτων όταν πατηθεί ο σύνδεσμος Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 59

CSS για εκτύπωση (1/2) Υλοποίηση εξωτερικού style sheet με σχετικές ενότητες για την εμφάνιση στον browser Υλοποίηση 2 ου εξωτερικού style sheet με σχετικές ενότητες για εκτύπωση Σύνδεση και των 2 style sheet με τη σελίδα, με χρήση 2 <link > elements <link rel="stylesheet" href="mypage.css" media="screen"> <link rel="stylesheet" href="mypageprint.css" media="print"> Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 60

CSS για εκτύπωση (2/2) Απόκρυψη μη-αναγκαίου περιεχομένου Π.χ.: nav { display: none; } Διαμόρφωση μεγέθους γραμματοσειράς και χρώματος για εκτύπωση Χρήση pt για μεγέθη, χρήση σκούρου χρώματος Έλεγχος page breaks Π.χ.:.newpage { page-break-before: always; } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 61

Έλεγχος Κινητή συσκευή Προσομοιωτές http://www.responsinator.com/ http://www.benjaminkeen.com/open-source-projects/smallerprojects/responsive-design-bookmarklet/ http://responsivepx.com/ http://www.headlondon.com/ http://mobitest.akamai.com/m/index.cgi Browser (αλλαγή μεγέθους παραθύρου για την παρακολούθηση αλλαγών) Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 44

Αναφορές Λειτουργία Fluid Grids στο Responsive Web Design http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsivedesign/ Τεχνικές, εργαλεία και στρατηγικές για Responsive Web Design http://mobile.smashingmagazine.com/2011/07/22/responsive-webdesign-techniques-tools-and-design-strategies/ Viewport meta tag http://www.paulund.co.uk/understanding-the-viewport-meta-tag Πληροφορίες για αρχάριους http://www.targetlocal.co.uk/responsive-web-design-resources/ Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 45

Τι είναι η JavaScript H JavaScript δεν είναι Java και ούτε σχετίζεται με την Java To αρχικό της όνομα ήταν LiveScript - άλλαξε όταν η Java έγινε δημοφιλής Τα statements στην JavaScript μοιάζουν με τα statements της Java επειδή και οι δύο έχουν δανειστεί πολλά στοιχεία από την C Η JavaScript είναι σχετικά ανεξάρτητη πλατφόρμας Πολλές φορές υπάρχει ασυμβατότητα ανάμεσα στους browsers Υπεύθυνος για προτυποποίηση της JavaScript είναι ο οργανισμός ECMA (European Computer Manufacturers Association) Τρέχουσα έκδοση είναι η ECMAScript 6 Κάποιες υλοποιήσεις βρίσκονται ακόμα στην έκδοση ECMAScript 5 Η ECMAScript 7 ετοιμάζεται σύντομα 47

Online πηγές Έγκυρες πληροφορίες για την τρέχουσα έκδοση του προτύπου: W3Schools (www.w3schools.com) Mozilla Developer Network (developer.mozilla.org) Πλήρης αναφορά της τρέχουσας έκδοσης του προτύπου Ασυμβατότητες στους browsers, πειραματικά χαρακτηριστικά κ.λ.π. Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 48

H JavaScript είναι μια διερμηνευόμενη γλώσσα Δεν έχει compiler για παραγωγή κώδικα μηχανής Εκτελείται από διερμηνευτή (interpreter) Ο διερμηνευτής είναι υλοποιημένος εντός του browser Ο προγραμματισμός σε JavaScript είναι event-based Η γλώσσα δεν έχει εκ σχεδιασμού ενσωματωμένα: standard input (προκαθορισμένη συσκευή εισόδου) standard output (προκαθορισμένη συσκευή εξόδου) αντίθετα π.χ. από Java/C/C++/Python/Ruby Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 49

H JavaScript είναι μια αντικειμενοστραφής γλώσσα Αντικειμενοστραφής «με διαφορετικό τρόπο» από τις Java/C++, Δεν διαθέτει ειδικά keywords ορισμών κλάσεων αντικειμένων Περιλαμβάνει αντικείμενα σαν προγραμματιστικές δομές Περιλαμβάνει συναρτήσεις σαν προγραμματιστικές δομές (που είναι με τη σειρά τους επίσης αντικείμενα) Οι κλάσεις είναι κυρίως εννοιολογικού χαρακτήρα Αντικείμενα ίδιας κλάσης κληρονομούν ιδιότητες από άλλο αντικείμενο Υποστηρίζονται αντικειμενοστραφή χαρακτηριστικά Κληρονομικότητα, Πολυμορφισμός Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 50

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

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

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

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

Προσοχή! JavaScript μπορεί να μπει είτε στο <head> είτε στο <body> μιας σελίδας HTML, καθώς και σε ξεχωριστά αρχεία (.js) Συνηθίζεται να «φορτώνουμε» τα εξωτερικά αρχεία πριν το end tag του body (</body>) Κατά την εκκίνηση μιας σελίδας, ο browser ούτε «κατεβάζει» ούτε δημιουργεί περιεχόμενο το οποίο εμφανίζεται μετά το script element ούτε καν κείμενο (blocking behavior) Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 56

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

Ασύγχρονη φόρτωση/εκτέλεση scripts Η blocking συμπεριφορά μπορεί να είναι ενοχλητική για τον χρήστη θα πρέπει να περιμένει μια (ενδεχομένως χρονοβόρα) δικτυακή σύνδεση, πριν δει τη σελίδα να φορτώνει. Μπορούμε να δώσουμε οδηγία για «ασύγχρονη» φόρτωση και εκτέλεση <script src="my j s. j s" asyncx/script> Όμως δεν πρέπει να χρησιμοποιείται document. write στο script Μπορούμε δηλώσουμε ρητά ότι το script θα φορτωθεί κατόπιν του parsing <script src="my j s. j s" deferx/script> 58

Τύποι δεδομένων Πρωτογενείς Τύποι Δεδομένων 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 Κάθε συνάρτηση/μέθοδος είναι και αντικείμενο 60

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

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

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

Παράδειγμα 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>

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

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

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

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 (εκτός - ίσως - αν το ί έχει ήδη δηλωθεί) 69

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

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

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» μέθοδοι, και πολλές ακόμα 73

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

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

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

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

Συναρτήσεις πρόσβασης σε πίνακες Δεν τροποποιούν το αντικείμενο τύπου 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 79

Συναρτήσεις (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 } } Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 81

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

Συναρτήσεις (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>

Συναρτήσεις (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> </body> </html>

Συναρτήσεις (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>

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

Μαθηματικές συναρτήσεις Μπορούμε να χρησιμοποιούμε τις μεθόδους του 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 Προγραμματισμός Παγκόσμιου Ιστού, 7η Διάλεξη 87