JavaScript Είναι μία scripting language

Παρουσίαση με θέμα: "JavaScript Είναι μία scripting language"— Μεταγράφημα παρουσίασης:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17 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

18 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

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

20 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

21 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

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

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

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

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

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

27 Μεταβολή 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>

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

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

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

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

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

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

34 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("map-canvas"), mapOptions);       } //event listener to load the map after the page has loaded       google.maps.event.addDomListener(window, 'load', initialize);     </script>

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