Java. Script Είναι μία scripting language Μπορεί να προστεθεί σε ένα HTML αρχείο «Ελαφριά» γλώσσα προγραμματισμού «Εκτελείται» από τον Internet browser Δεν σχετίζεται με τη Java, αλλά έχει ομοιότητες με αυτή Δημιουργήθηκε από τη Netscape Υποστηρίζεται από όλους τους browsers Πρόκληση: κώδικας που να υποστηρίζεται από τις περισσότερες εκδόσεις
Χρήση της Java. Script Μικρά κομμάτια κώδικα σε ένα HTML αρχείο Εμφάνιση «δυναμικού» περιεχομένου Αντιλαμβάνεται και αντιδρά σε γεγονότα – αλληλεπίδραση με τον χρήστη π. χ. εμφάνιση σειράς αριθμών (1, 2, …, 100) π. χ. ο χρήστης επιλέγει ένα link Αλλάζει τα περιεχόμενα σε html elements Ελέγχει δεδομένα που δίνονται σε μία φόρμα πριν αυτή γίνει submit
Εισαγωγή scripting language Java. Script <script type=“text/javascript”> document. write(“Hello World with Java. Script”); </script> Document: Αντικείμενο που περιέχει όλα τα στοιχεία των HEAD και BODY που αντιστοιχούν στις ετικέτες HTML του HTML εγγράφου View page
Τοποθέτηση scripting language Head section Body Section Η ετικέτα head φορτώνεται πρώτα Για scripts που εκτελούνται μετά την κλήση τους Κατάλληλο για συναρτήσεις Εκτελούνται όταν η σελίδα φορτώνεται External script <script type=“text/javascript” src=“global. js”></script> Επιτρέπονται πολλαπλά «scripts» σε ένα αρχείο
Μεταβλητές Java. Script Ξεκινούν με γράμμα ή “_” 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 Java. Script if (condition) { statements 1; } else { statements 2; } else if varname = (condition)? true. Val: false. Val my. Car = (ferrari>porche) ? “Red. Ferrari” : “Col. Porche” View page
Switch --- Select Java. Script switch (expression) { case label 1: statements 1; break; case label 2: statements 2; break; default: statements; } View page
For Java. Script for (initial; condition; incr) { statements; } for (i=0; i<10; i++) { document. write(i) } View page
Do … while Java. Script while (condition) { statements do { statements; while (condition) } } do { document. write(i + " ") i=i+1 } while (i < 10) View page
Έξοδος από βρόχο … σχόλια Break : Continue : εγκαταλείπει την εκτέλεση του βρόχου εγκαταλείπει την απλή επανάληψη του βρόχου Σχόλια // /* … */ View page
Ορισμός συναρτήσεων Java. Script function mfun(arg 1, arg 2) { statements; } function noarg() { document. write(15) } function print(msg) { document. write(msg) } function sum(a, b) { c = a + b return c }
Κλήση συναρτήσεων Java. Script noarg() print(“Hello”) my. Sum = sum(23, 7) alert(“This is alert”) View page
Java. Script Objects Υπάρχουν δύο τύποι αντικειμένων Εγγενή της γλώσσας Συγκεκριμένα για μία εφαρμογή (πχ. Browser) πχ. Math, Date, String, Array πχ. Window, Document, Form Όλα τα αντικείμενα έχουν Ιδιότητες : object. Name. property. Name Μεθόδους : object. Name. method. Name() Case sensitive
Objects or Classes Objects : ξεκινούν με μικρό γράμμα Δημιουργούνται με τη χρήση του new πχ. var my. Date = new Date Classes : ξεκινούν με κεφαλαίο γράμμα Δεν χρειάζεται να οριστούν exist by default πχ. Document
String object Ιδιότητες length Μέθοδοι bold(), blink(), char. At(), index. Of(), split(), substring(), to. Lower. Case(), to. Upper. Case(), … index. Of(str) : επιστρέφει την πρώτη εμφάνιση του str substring(a, b) : τους χαρακτήρες από το ath μέχρι και το b-1 th (η αρίθμηση από το 0) View page
Math object Ιδιότητες E, LN 2, LN 10, PI, SQRT 2, … Μέθοδοι abs(x), cos(x), sin(x), ceil(x), floor(x), max(x, y), min(x, y), random() : ένα τυχαίο αριθμό μεταξύ του 0 και 1
Date object Μέθοδοι Date() : επιστρέφει ένα αντικείμενο Date get. Date() : επιστρέφει τη μέρα (1 -31) get. Month(), get. Day(), get. Year() get. Hours(), get. Time() set. Date(), set. Month(), set. Hours() to. String() : επιστρέφει την ημερομηνία ως string View page
Window object alert("Hello Students") prompt("What is your name? ", "") confirm(“Do you agree? ") Select “Ok” or “Cancel” location="string. html" window. status = “Your message" window. open("window 2. html") prompt(“question", "given_answer") A new window is opened onclick() View page
![Form object <form name=“my. Form”> <input type=“text” name=“my. Age”> document. forms[0]. my. Age. focus()](https://present5.com/presentation/4adfcfa23c3a04a6d4cd085e4d750137/image-21.jpg "Form object <form name=“my. Form”> <input type=“text” name=“my. Age”> document. forms[0]. my. Age. focus()")
Form object <form name=“my. Form”> <input type=“text” name=“my. Age”> document. forms[0]. my. Age. focus() document. my. Form. my. Age. value onsubmit() View page
Top Level Functions eval(string) Υπολογίζει την αλφαριθμητική παράμετρο σαν να ήταν javascript εντολές View Page parse. Int(string[, radix]) Προσπαθεί να μετατρέψει την αλφαριθμητική παράμετρο σε ακέραιο της ορισμένης βάσης Αν δεν ορίζεται η βάση τότε Αν το string αρχίζει από "0 x" θεωρείται σαν βάση το 16 Αν το string αρχίζει από "0" θεωρείται σαν βάση το 8 Διαφορετικά θεωρείται σαν βάση το 10 View Page
DHTML Σκοπός της οι σελίδες να είναι δυναμικές Συνδυασμός από HTML, CSS και Java. Script Χρησιμοποιεί τα objects της Java. Script Κυρίως στηρίζεται στο Document Object Model Διαφορετικό DOM υποστηρίζουν η Netscape και η Microsoft Οριοθέτηση (positioning) Μεταβολή style Χειρισμός γεγονότων (event handling)
Χρήση του DOM <div id=“mydiv” style=“position: absolute; visibility: visible; left: 400 px; top: 100 px; ”> <a href=“www. ceid. upatras. gr”>CEID</a> </div> Άμεσα προσπελάσιμα ως objects από την Java. Script μέσω του DOM MS : document. all. mydiv. style. visibility=“hidden”; NS : document. layers[“mydiv”]. visibility=“hidden”; MS+NS: document. get. Element. By. Id(“mydiv”). style. visibility=“hidden”; Mέσω Java. Script μπορούμε να αλλάξουμε τις ιδιότητες ενός style και να δούμε τις αλλαγές αυτόματα
Δυναμική οριοθέτηση <p id = “_pt" style = "position: absolute; left: 0; color: blue"> Welcome! </p> _pt = document. get. Element. By. Id(“_pt”); _pt. style. font. Size = myvar/3; _pt. style. left = myvar; _pt. inner. HTML = "<BR> Font size: " + myvar + "px"; View page
Κρύψιμο Αντικειμένων Style=“visibility: {visible; hidden; inherit}”; View page Style=“display: {inline; block; none; }”; View page Ποια η διαφορά ανάμεσα στις δύο ιδιότητες;
Μεταβολή style Επιλογή φόντου <BODY bgcolor="red"> inp. Col = prompt( «Select background color", "" ); document. body. style. background. Color = inp. Col; View page Επιλογή μεγέθους κειμένου p. Text. class. Name = input. Class; <style> . big. Text { font-size: 3 em; font-weight: bold } . small. Text { font-size: . 5 em } </style> View page
Χειρισμός γεγονότων Γεγονότα πάτημα κουμπιού : click ποντίκι πάνω σε κάποιο στοιχείο : mouseover αποστολή δεδομένων φόρμας : submit ολοκλήρωση του φορτώματος όλων των αντικειμένων (όχι παρέμβαση του χρήστη) : load Handler : on. Event. Name π. χ. on. Click, on. Mouse. Over, on. Submit, on. Load
Παραδείγματα (1) on. Click <input type= "button" value= "Click Me!" on. Click= "alert( 'Hi again' )"> on. Click=“my. Function()” on. Load <body on. Load= "start. Timer()">
Παραδείγματα (2) on. Mouse. Over / on. Mouse. Out <body onmouseover="m. Over(event)" onmouseout="m. Out(event)"> function m. Over(evt){ //mozilla if(evt. target && evt. target. id) evt. target. style. color=evt. target. id; //IE if(evt. src. Element && evt. src. Element. id) evt. src. Element. style. color=evt. src. Element. id; }
MAP APIs για την ενσωμάτωση γεωγραφικών υπηρεσιών σε ιστοσελίδες Χρήση DHTML και Java. Script για τη χρήση των χαρτών και των δυνατοτήτων που προσφέρει το API Google Maps API Yahoo Maps API …. .
π. χ. Google Maps API Βήματα: 1. 2. Δημιουργία API ID (μοναδικό για κάθε web site) Προσθήκη Google Java. Script κώδικα στη σελίδα για τη χρήση του API <script type="text/javascript" src="https: //maps. googleapis. com/maps/api/js? key=API_KE Y&sensor=false"></script> 1. Χρήση Java. 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) Και δημιουργείται με κλήσεις Java. Script <script type="text/javascript"> function initialize() { //Java. Script object literal holding a number of map properties var map. Options = { center: new google. maps. Lat. Lng(-34. 397, 150. 644), zoom: 8 }; //Map object var map = new google. maps. Map(document. get. Element. By. Id("mapcanvas"), map. Options); } //event listener to load the map after the page has loaded google. maps. event. add. Dom. Listener(window, 'load', initialize); </script>
Google Maps – προσθήκη Σημείου Βρες τις συντεταγμένες (π. χ. Geocoding service) Πρόσθεσε το σημείο var my. Latlng = new google. maps. Lat. Lng(-25. 363882, 131. 044922); var marker = new google. maps. Marker({ position: my. Latlng, map: map, title: 'Hello World!' }); Παραδείγματα
Скачать презентацию Java Script Είναι μία scripting language Μπορεί να
4adfcfa23c3a04a6d4cd085e4d750137.ppt