Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 3: JavaScript & DHTML

Transcript

1 Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 3: JavaScript & DHTML Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

2 Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι οι φοιτητές να εξοικειωθούν με τη χρήση της JavaScript και της DHTML. Για το λόγο αυτό παρέχεται πληθώρα παραδειγμάτων. 2

3 Περιεχόμενα ενότητας (1) JavaScript Χρήση της JavaScript Εισαγωγή scripting language Τοποθέτηση scripting language Μεταβλητές Μεταβλητές - τύποι δεδομένων 3

4 Περιεχόμενα ενότητας (2) Τελεστές If else Switch --- Select For Do while Έξοδος από βρόχο σχόλια Ορισμός συναρτήσεων Κλήση συναρτήσεων 4

5 Περιεχόμενα ενότητας (3) JavaScript Objects Objects or Classes String object Math object Date object Window object Form object 5

6 Περιεχόμενα ενότητας (4) Top Level Functions DHTML Δυναμική οριοθέτηση Κρύψιμο Αντικειμένων Μεταβολή style MAP APIs 6

7 JavaScript Είναι μία scripting language «Ελαφριά» γλώσσα προγραμματισμού Μπορεί να προστεθεί σε ένα HTML αρχείο «Εκτελείται» από τον Internet browser Δεν σχετίζεται με τη Java, αλλά έχει ομοιότητες με αυτή Δημιουργήθηκε από τη Netscape Υποστηρίζεται από όλους τους browsers! Πρόκληση: κώδικας που να υποστηρίζεται από τις περισσότερες εκδόσεις 7

8 Χρήση της JavaScript Μικρά κομμάτια κώδικα σε ένα HTML αρχείο π.χ. εμφάνιση σειράς αριθμών (1, 2,, 100) Εμφάνιση «δυναμικού» περιεχομένου Αντιλαμβάνεται και αντιδρά σε γεγονότα αλληλεπίδραση με τον χρήστη π.χ. ο χρήστης επιλέγει ένα link Αλλάζει τα περιεχόμενα σε html elements Ελέγχει δεδομένα που δίνονται σε μία φόρμα πριν αυτή γίνει submit 8

9 Εισαγωγή scripting language JavaScript <script type= text/javascript > document.write( Hello World via JavaScript ); </script> Document: Αντικείμενο που περιέχει όλα τα στοιχεία των HEAD και BODY που αντιστοιχούν στις ετικέτες HTML του HTML εγγράφου View page 9

10 Τοποθέτηση scripting language Head section Η ετικέτα head φορτώνεται πρώτα Για scripts που εκτελούνται μετά την κλήση τους Κατάλληλο για συναρτήσεις Body Section Εκτελούνται όταν η σελίδα φορτώνεται External script <script type= text/javascript src= global.js ></script>! Επιτρέπονται πολλαπλά «scripts» σε ένα αρχείο 10

11 Μεταβλητές JavaScript Ξεκινούν με γράμμα ή _ Case sensitive Ορισμός var name (var optional) Ανάθεση τιμής name = Eva mynumber = 15 Τοποθέτηση σε κείμενο "My name is " + name View page 11

12 Μεταβλητές - τύποι δεδομένων Αριθμοί : ακέραιοι ή κινητής υποδιαστολής Boolean : true / false Strings : ανάμεσα σε μονά ή διπλά εισαγωγικά Αντικείμενα (objects) Null : διαφορετικός από τη μηδενική τιμή Undefined: αμέσως μετά τη δημιουργία της μεταβλητής δεν έχει ανατεθεί τιμή Empty: undefined/null/κενό string, array ή object Δεν είναι απαραίτητο να δηλώνεται ο τύπος πριν την ανάθεση τιμής 12

13 Τελεστές Ισότητα == Ανισότητα!= Λογικό and && Λογικό or Λογικό not! Ένωση strings + Μοναδιαία αύξηση/ μείωση ++ / -- Ανάθεση =, +=, -=, *=, /= 13

14 If else JavaScript if (condition) { statements1; } else { statements2; } else if varname = (condition)?trueval:falseval mycar = (BMW>Mercedes)? SilverBMW : BlackMercedes View page 14

15 Switch --- Select JavaScript switch (expression) { case label1: statements1; break; case label2: statements2; break; default: statements; } View page 15

16 For JavaScript for (initial; condition; incr) { statements; } for (i=0;i<10;i++) { document.write(i) } View page 16

17 Do while JavaScript while (condition) { statements } do { statements; } while (condition) do { document.write(i + number <br>") i=i+1 } while (i < 10) View page 17

18 Έξοδος από βρόχο σχόλια Break : εγκαταλείπει την εκτέλεση του βρόχου Continue : εγκαταλείπει την απλή επανάληψη του βρόχου Σχόλια // /* */ View page 18

19 Ορισμός συναρτήσεων JavaScript function mfun(arg1,arg2) { statements; } function noarg() { document.write(15) } function print(msg) { document.write(msg) } function sum(a, b) { c = a + b return c } 19

20 Κλήση συναρτήσεων JavaScript noarg() print( Hello ) mysum = sum(23, 7) alert( This is alert ) View page 20

21 JavaScript Objects Υπάρχουν δύο τύποι αντικειμένων Εγγενή της γλώσσας πχ. Math, Date, String, Array Συγκεκριμένα για μία εφαρμογή (πχ. Browser) πχ. Window, Document, Form Όλα τα αντικείμενα έχουν Ιδιότητες : objectname.propertyname Μεθόδους : objectname.methodname()! Case sensitive 21

22 Objects or Classes Objects : ξεκινούν με μικρό γράμμα Δημιουργούνται με τη χρήση του new πχ. var mydate = new Date Classes : ξεκινούν με κεφαλαίο γράμμα Δεν χρειάζεται να οριστούν exist by default πχ. Document 22

23 String object Ιδιότητες length Μέθοδοι bold(), blink(), charat(), indexof(), split(), substring(), tolowercase(), touppercase(), indexof(str) : επιστρέφει την πρώτη εμφάνιση του str substring(a,b) : τους χαρακτήρες από το ath μέχρι και το b-1th (η αρίθμηση από το 0) View page 23

24 Ιδιότητες E, LN2, LN10, PI, SQRT2, Μέθοδοι Math object abs(x), cos(x), sin(x), ceil(x), floor(x), max(x,y), min(x,y), random() random() : ένα τυχαίο αριθμό μεταξύ του 0 και 1 24

25 Μέθοδοι Date object Date() : επιστρέφει ένα αντικείμενο Date getdate() : επιστρέφει τη μέρα (1-31) getmonth(), getday(), getyear() gethours(), gettime() setdate(), setmonth(), sethours() tostring() : επιστρέφει την ημερομηνία ως string View page 25

26 Window object alert("hello Student!") prompt("what is your name?","") prompt( question", "given_answer") confirm( Do you agree?") Select Ok or Cancel location="string.html" window.status = Your message" window.open("window2.html") A new window is opened onclick() View page 26

27 Form object <form name= myform > <input type= text name= myage > document.forms[0].myage.focus() document.myform.myage.focus() document.myform.myage.value onsubmit() View page 27

28 Top Level Functions eval(string) Υπολογίζει την αλφαριθμητική παράμετρο σαν να ήταν javascript εντολές parseint(string[, radix]) View Page Προσπαθεί να μετατρέψει την αλφαριθμητική παράμετρο σε ακέραιο της ορισμένης βάσης Αν δεν ορίζεται η βάση τότε Αν το string αρχίζει από "0x" θεωρείται σαν βάση το 16 Αν το string αρχίζει από "0" θεωρείται σαν βάση το 8 Διαφορετικά θεωρείται σαν βάση το 10 View Page 28

29 DHTML Σκοπός της οι σελίδες να είναι δυναμικές Συνδυασμός από HTML, CSS και JavaScript Χρησιμοποιεί τα objects της JavaScript Κυρίως στηρίζεται στο Document Object Model Διαφορετικό DOM υποστηρίζουν η Netscape και η Microsoft Οριοθέτηση (positioning) Μεταβολή style Χειρισμός γεγονότων (event handling) 29

30 Χρήση του DOM <div id= mydiv style= position:absolute; visibility:visible; left:400px; top:100px; > <a href= >CEID</a> </div> Άμεσα προσπελάσιμα ως objects από την JavaScript μέσω του DOM MS : document.all.mydiv.style.visibility= hidden ; NS : document.layers[ mydiv ].visibility= hidden ; MS+NS: document.getelementbyid( mydiv ).style.visibility= hidden ; Mέσω JavaScript μπορούμε να αλλάξουμε τις ιδιότητες ενός style και να δούμε τις αλλαγές αυτόματα 30

31 Δυναμική οριοθέτηση <p id = _pt" style = "position: absolute; left: 0; color: blue"> Welcome! </p> _pt = document.getelementbyid( _pt ); _pt.style.fontsize = myvar/3; _pt.style.left = myvar; _pt.innerhtml = "<BR> Font size: " + myvar + "px"; View page 31

32 Κρύψιμο Αντικειμένων Style= visibility: {visible; hidden; inherit} ; View page Style= display: {inline; block; none;} ; View page Ποια η διαφορά ανάμεσα στις δύο ιδιότητες; 32

33 Μεταβολή style Επιλογή φόντου <BODY bgcolor="red"> inpcol = prompt( «Select background color", "" ); document.body.style.backgroundcolor = inpcol; Επιλογή μεγέθους κειμένου ptext.classname = inputclass; <style>.bigtext { font-size: 3em; font-weight: bold }.smalltext { font-size:.5em } </style> View page View page 33

34 Χειρισμός γεγονότων Γεγονότα πάτημα κουμπιού : click ποντίκι πάνω σε κάποιο στοιχείο : mouseover αποστολή δεδομένων φόρμας : submit ολοκλήρωση του φορτώματος όλων των αντικειμένων (όχι παρέμβαση του χρήστη) : load Handler : oneventname π.χ. onclick, onmouseover, onsubmit, onload 34

35 Παραδείγματα (1) onclick <input type= "button" value= "Click Me!" onclick= "alert( 'Hi again' )"> onclick= myfunction() onload <body onload= "starttimer()"> 35

36 Παραδείγματα (2) onmouseover / onmouseout <body onmouseover="mover(event)" onmouseout="mout(event)"> function mover(evt){ //mozilla if(evt.target && evt.target.id) evt.target.style.color=evt.target.id; //IE if(evt.srcelement && evt.srcelement.id) evt.srcelement.style.color=evt.srcelement.id; } 36

37 MAP APIs APIs για την ενσωμάτωση γεωγραφικών υπηρεσιών σε ιστοσελίδες Χρήση DHTML και JavaScript για τη χρήση των χαρτών και των δυνατοτήτων που προσφέρει το API Google Maps API Yahoo Maps API.. 37

38 π.χ. Google Maps API Βήματα: 1. Δημιουργία API ID (μοναδικό για κάθε web site) 2. Προσθήκη Google JavaScript κώδικα στη σελίδα για τη χρήση του API <script type="text/javascript" src=" sor=false"></script> 1. Χρήση JavaScript συναρτήσεων για την προσθήκη σημείων / αντικειμένων στο χάρτη 38

39 Google Maps προσθήκη Χάρτη (1) Ο χάρτης περιέχεται σε ένα DIV <head> <style type="text/css"> #map { height: 75%; width: 100%; } </style> </head> <body> <div id="map"></div> </body> 39

40 Google Maps προσθήκη Χάρτη (2) Και δημιουργείται με κλήσεις JavaScript <script type="text/javascript"> function initialize() { //JavaScript object literal holding a number of map properties var mapoptions = { center: new google.maps.latlng( , ), zoom: 8 }; //Map object var map = new google.maps.map(document.getelementbyid("mapcanvas"), mapoptions); } //event listener to load the map after the page has loaded google.maps.event.adddomlistener(window, 'load', initialize); </script> 40

41 Google Maps προσθήκη Σημείου Βρες τις συντεταγμένες (π.χ. Geocoding service) Πρόσθεσε το σημείο var mylatlng = new google.maps.latlng( , ); var marker = new google.maps.marker({ position: mylatlng, map: map, title: 'Hello World!' }); Παραδείγματα 41

42 Τέλος Ενότητας

43 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 43

44 Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση

45 Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Ιωάννης Γαροφαλάκης, «Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό». Έκδοση: 1.0. Πάτρα Διαθέσιμο από τη δικτυακή διεύθυνση: 45

46 Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 46