Скачать презентацию Java Script Είναι μία scripting language Μπορεί να Скачать презентацию Java Script Είναι μία scripting language Μπορεί να

4adfcfa23c3a04a6d4cd085e4d750137.ppt

  • Количество слайдов: 35

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

Χρήση της Java. Script Μικρά κομμάτια κώδικα σε ένα HTML αρχείο Εμφάνιση «δυναμικού» περιεχομένου Χρήση της 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> Εισαγωγή scripting language Java. Script Document: Αντικείμενο που περιέχει όλα τα στοιχεία των HEAD και BODY που αντιστοιχούν στις ετικέτες HTML του HTML εγγράφου View page

Τοποθέτηση scripting language Head section Body Section Η ετικέτα head φορτώνεται πρώτα Για scripts Τοποθέτηση scripting language Head section Body Section Η ετικέτα head φορτώνεται πρώτα Για scripts που εκτελούνται μετά την κλήση τους Κατάλληλο για συναρτήσεις Εκτελούνται όταν η σελίδα φορτώνεται External script Επιτρέπονται πολλαπλά «scripts» σε ένα αρχείο

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

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

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

If … else Java. Script if (condition) { statements 1; } else { statements 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; 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++) 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 … while Java. Script while (condition) { statements do { statements; while (condition) } } do { document. write(i + " ") i=i+1 } while (i < 10) View page

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

Ορισμός συναρτήσεων Java. Script function mfun(arg 1, arg 2) { statements; } function noarg() Ορισμός συναρτήσεων 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”) Κλήση συναρτήσεων Java. Script noarg() print(“Hello”) my. Sum = sum(23, 7) alert(“This is alert”) View page

Java. Script Objects Υπάρχουν δύο τύποι αντικειμένων Εγγενή της γλώσσας Συγκεκριμένα για μία εφαρμογή 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 : ξεκινούν με μικρό γράμμα Δημιουργούνται με τη χρήση του 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. 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), 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() : επιστρέφει τη 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( 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() Form object

document. forms[0]. my. Age. focus() document. my. Form. my. Age. value onsubmit() View page

Top Level Functions eval(string) Υπολογίζει την αλφαριθμητική παράμετρο σαν να ήταν javascript εντολές View 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. 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 Χρήση του DOM

Άμεσα προσπελάσιμα ως 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 και να δούμε τις αλλαγές αυτόματα

" src="https://present5.com/presentation/4adfcfa23c3a04a6d4cd085e4d750137/image-25.jpg" alt="Δυναμική οριοθέτηση

" /> Δυναμική οριοθέτηση

Welcome!

_pt = document. get. Element. By. Id(“_pt”); _pt. style. font. Size = myvar/3; _pt. style. left = myvar; _pt. inner. HTML = "
Font size: " + myvar + "px"; View page

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

inp. Col = prompt( «Select background color", """ src="https://present5.com/presentation/4adfcfa23c3a04a6d4cd085e4d750137/image-27.jpg" alt="Μεταβολή style Επιλογή φόντου inp. Col = prompt( «Select background color", """ /> Μεταβολή style Επιλογή φόντου inp. Col = prompt( «Select background color", "" ); document. body. style. background. Color = inp. Col; View page Επιλογή μεγέθους κειμένου p. Text. class. Name = input. Class; View page

Χειρισμός γεγονότων Γεγονότα πάτημα κουμπιού : click ποντίκι πάνω σε κάποιο στοιχείο : mouseover Χειρισμός γεγονότων Γεγονότα πάτημα κουμπιού : click ποντίκι πάνω σε κάποιο στοιχείο : mouseover αποστολή δεδομένων φόρμας : submit ολοκλήρωση του φορτώματος όλων των αντικειμένων (όχι παρέμβαση του χρήστη) : load Handler : on. Event. Name π. χ. on. Click, on. Mouse. Over, on. Submit, on. Load

Παραδείγματα (1) on. Click <input type= Παραδείγματα (1) on. Click on. Click=“my. Function()” on. Load

" src="https://present5.com/presentation/4adfcfa23c3a04a6d4cd085e4d750137/image-30.jpg" alt="Παραδείγματα (2) on. Mouse. Over / on. Mouse. Out " /> Παραδείγματα (2) on. Mouse. Over / on. Mouse. Out 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 MAP APIs για την ενσωμάτωση γεωγραφικών υπηρεσιών σε ιστοσελίδες Χρήση DHTML και Java. Script για τη χρήση των χαρτών και των δυνατοτήτων που προσφέρει το API Google Maps API Yahoo Maps API …. .

π. χ. Google Maps API Βήματα: 1. 2. Δημιουργία API ID (μοναδικό για κάθε π. χ. Google Maps API Βήματα: 1. 2. Δημιουργία API ID (μοναδικό για κάθε web site) Προσθήκη Google Java. Script κώδικα στη σελίδα για τη χρήση του API 1. Χρήση Java. Script συναρτήσεων για την προσθήκη σημείων / αντικειμένων στο χάρτη

Google Maps – προσθήκη Χάρτη (1) Ο χάρτης περιέχεται σε ένα DIV <head> <style Google Maps – προσθήκη Χάρτη (1) Ο χάρτης περιέχεται σε ένα DIV

…………………

" src="https://present5.com/presentation/4adfcfa23c3a04a6d4cd085e4d750137/image-34.jpg" alt="Google Maps – προσθήκη Χάρτη (2) Και δημιουργείται με κλήσεις Java. Script

Google Maps – προσθήκη Σημείου Βρες τις συντεταγμένες (π. χ. Geocoding service) Πρόσθεσε το 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!' }); Παραδείγματα