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

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

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

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

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

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

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

If … else JavaScript else if View page if (condition) { statements1; } varname = (condition)?trueVal:falseVal myCar = (ferrari>porche) ? “RedFerrari” : “ColPorche” View page

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

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

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

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

Ορισμός συναρτήσεων 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 }

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

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

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

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

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

Date object Μέθοδοι View page Date() : επιστρέφει ένα αντικείμενο Date getDate() : επιστρέφει τη μέρα (1-31) getMonth(), getDay(), getYear() getHours(), getTime() setDate(), setMonth(), setHours() toString() : επιστρέφει την ημερομηνία ως string View page

Window object View page alert("Hello Students") 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

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

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

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

Χρήση του DOM <div id=“mydiv” style=“position:absolute; visibility:visible; left:400px; top:100px;”> <a href=“www.ceid.upatras.gr”>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 και να δούμε τις αλλαγές αυτόματα

Δυναμική οριοθέτηση <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

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

Μεταβολή style Επιλογή φόντου View page <BODY bgcolor="red"> inpCol = prompt( «Select background color", "" ); document.body.style.backgroundColor = inpCol; View page Επιλογή μεγέθους κειμένου pText.className = inputClass; <style> .bigText { font-size: 3em; font-weight: bold } .smallText { font-size: .5em } </style>

Χειρισμός γεγονότων Γεγονότα Handler : onEventName πάτημα κουμπιού : click ποντίκι πάνω σε κάποιο στοιχείο : mouseover αποστολή δεδομένων φόρμας : submit ολοκλήρωση του φορτώματος όλων των αντικειμένων (όχι παρέμβαση του χρήστη) : load Handler : onEventName π.χ. onClick, onMouseOver, onSubmit, onLoad

Παραδείγματα (1) onClick onLoad <input type= "button" value= "Click Me!" onClick= "alert( 'Hi again' )"> onClick=“myFunction()” onLoad <body onLoad= "startTimer()">

Παραδείγματα (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; }

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

π.χ. Google Maps API Βήματα: Δημιουργία API ID (μοναδικό για κάθε web site) Προσθήκη Google JavaScript κώδικα στη σελίδα για τη χρήση του API Χρήση JavaScript συναρτήσεων για την προσθήκη σημείων / αντικειμένων στο χάρτη <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></script>

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

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(-34.397, 150.644),           zoom: 8         }; //Map object         var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);       } //event listener to load the map after the page has loaded       google.maps.event.addDomListener(window, 'load', initialize);     </script>

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