Περιεχόμενα Διδακτζασ Ύλησ για την Εκμάθηςη του Javascript

Transcript

1 Περιεχόμενα Διδακτζασ Ύλησ για την Εκμάθηςη του Javascript 110 εκπαιδευτικζσ ενότθτεσ για το Javascript, μόνο ςτθ FACEtoFACE 1 η Εκπαιδευτική Συνάντηςη: Στθν 1θ εκπαιδευτικι ςυνάντθςθ εκμάκθςθσ του Javascript, κα μάκεισ περιςςότερα για το τι είναι θ Javascript και για το ποια είναι θ διαφορά μεταξφ ςεναρίου και προγράμματοσ. Ερχόμενοσ ςε επαφι με το πρϊτο ςενάριο javascript, κα εξοικειωκείσ με τθ χριςθ εξωτερικϊν αρχείων javascript και με δεςμευμζνεσ λζξεισ ςε αυτι. Αποκτϊντασ δε κατανόθςθ βαςικϊν εννοιϊν τθσ Javascript, κα γνωρίςεισ περιςςότερα για το DOM, μακαίνοντασ τισ μεκόδουσ alert(), confirm και prompt() του αντικειμζνου window. Οι μζκοδοι write() και writeln() του αντικειμζνου document ςυνιςτοφν το τελευταίο αντικείμενο τθσ τρζχουςασ εκπαιδευτικισ ςυνάντθςθσ. Ειςαγωγή ςτην Javascript Σι είναι η Javascript Διαφορά μεταξφ ςεμιναρίου και προγράμματοσ Σο πρϊτο ςενάριο Javascript Ειςαγωγή εξωτερικοφ αρχείου Javascript Δεςμευμζνεσ λζξεισ ςτη Javascript Γνωριμία με το DOM Οι μζθοδοι alert(), confirm και prompt() του αντικειμζνου window Οι μζθοδοι write() και writeln() του αντικειμζνου document 2 η Εκπαιδευτική Συνάντηςη: Στθ 2θ εκπαιδευτικι ςυνάντθςθ των μακθμάτων Javascript, κα περάςεισ ςε κζματα διάκριςθσ τφπων δεδομζνων και κα εξοικειωκείσ με τισ ζννοιεσ των μεταβλθτϊν, των αρικμθτικϊν τελεςτϊν και των τελεςτϊν ςφγκριςθσ, αφιερϊνοντασ χρόνο ςτισ πρακτικζσ εφαρμογζσ. Κατανοϊντασ τθ χριςθ των λογικϊν τελεςτϊν, κα ζχεισ τθν ευκαιρία να αςχολθκείσ με τουσ μοναδιαίουσ τελεςτζσ αφξθςθσ/μείωςθσ και ςυνζνωςθσ αλφαρικμθτικϊν, προτοφ περάςεισ ςτθ χριςθ πινάκων. Οι ςυναρτθςεισ parselnt(), parsefloat() και eval() αποτελοφν αντικείμενο μελζτθσ τθσ ενότθτασ αυτισ, ζτςι ϊςτε να περάςεισ ςε κζματα ειςαγωγισ ςτον προγραμματιςμό με τθ γλϊςςα javascript. Η δομι επιλογισ και τα ζνκετα if κλείνουν τθ 2θ εκπαιδευτικι ςυνάντθςθ. Σφποι δεδομζνων Μεταβλητζσ Αριθμητικοί τελεςτζσ & τελεςτζσ ςφγκριςησ Λογικοί Σελεςτζσ Μοναδιαίοι τελεςτζσ αφξηςησ/μείωςησ & ςυνζνωςη αλφαριθμητικϊν Πίνακεσ υναρτήςεισ parselnt(), parsefloat() και eval() Ειςαγωγή ςτον προγραμματιςμό με τη γλϊςςα Javascript Δομή επιλογήσ Ζνθετα if 3 η Εκπαιδευτική Συνάντηςη: Στθν 3θ εκπαιδευτικι ςυνάντθςθ κα ζχεισ τθν ευκαιρία να γνωρίςεισ τον τρόπο ςφνταξθσ τθσ δομισ πολλαπλισ επιλογισ switch, τισ δομζσ επανάλθψθσ while & do...while και τισ δομζσ προκακοριςμζνθσ επανάλθψθσ for & for...in. Οι εντολζσ break & continue και οι τρόποι δθμιουργίασ αντικειμζνων 1

2 αποτελοφν αντικείμενο μελζτθσ, δίνοντάσ ςου τα εφόδια που χρειάηεςαι για τθν προςπζλαςθ των ιδιοτιτων ενόσ αντικειμζνου με τθ χριςθ τθσ δεςμευμζνθσ λζξθσ with και τθσ δομισ for/in. Δομή πολλαπλήσ επιλογήσ switch Δομζσ επανάληψησ while & do...while Δομζσ προκαθοριςμζνησ επανάληψησ for & for...in Εντολζσ break & continue Σρόποι δημιουργίασ αντικειμζνων Προςπζλαςη των ιδιοτήτων ενόσ αντικειμζνου με τη χρήςη τησ δεςμευμζνησ λζξησ with και τησ δομήσ for/in Αλυςίδα πρωτοτφπων (prototype chain) 4 η Εκπαιδευτική Συνάντηςη: Η ζννοια τθσ ςυνάρτθςθσ αποτελεί αντικείμενο μελζτθσ τθσ 4θσ εκπαιδευτικισ ςυνάντθςθσ των μακθμάτων πάνω ςτθ Javascript, με τθν εντολι return να αναλφεται διεξοδικά. Οι ανϊνυμεσ ςυναρτιςεισ και οι αναδρομικζσ ςυναρτιςεισ αποτελοφν αντικείμενο μελζτθσ, προτοφ περάςεισ ςτθ χριςθ κακολικϊν ςυναρτιςεων τθσ Javascript. Η δεςμευμζνθ λζξθ this και θ δθμιουργία αντικειμζνων με ςυναρτιςεισ, κακϊσ και θ χριςθ JSON είναι μερικά μόνο από τα αντικείμενα που κα βρεισ άκρωσ ενδιαφζροντα και ςυναρπαςτικά. Με τθν κατανόθςθ αυτϊν, κα μπορζςεισ να προχωριςεισ ςτα βαςικά αντικείμενα τθσ Javascript, ςτο αντικείμενο Array, ςτισ μεκόδουσ του αντικειμζνου Array και ςτο αντικείμενο Math. Η ζννοια τησ ςυνάρτηςησ Εντολή return Ανϊνυμεσ ςυναρτήςεισ Αναδρομικζσ ςυναρτήςεισ Καθολικζσ ςυναρτήςεισ τησ Javascript Δεςμευμζνη Λζξη this & δημιουργία αντικειμζνων με ςυναρτήςεισ JSON Ειςαγωγή ςτα βαςικά αντικείμενα τησ Javascript Αντικείμενο Array Μζθοδοι του αντικειμζνου Array Αντικείμενο Math 5η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 5θσ εκπαιδευτικισ ςυνάντθςθσ είναι να εξοικειωκείσ με το αντικείμενο string, προτοφ αςχολθκείσ με τθν εφαρμογι ιδιοτιτων και μεκόδων του αντικειμζνου string και του αντικειμζνου date. Η εφαρμογι μεκόδων του αντικειμζνου Date και θ ειςαγωγι ςτα ςυμβάντα, όπωσ τα Mouseover, mouseout και το ςυμβάν click, ςυνιςτοφν αντικείμενο εξάςκθςθσ για τθν ευρφτερθ κατανόθςθ του τρόπου λειτουργίασ των ειςαγόμενων ςτοιχείων. Τα ςυμβάντα Load, Focus και Blur, κακϊσ και θ μζκοδοσ εγγραφισ χειριςτϊν ςυμβάντων και οι Event Listeners αποτελοφν πεδίο δράςθσ για τουσ επίδοξουσ, μακθτευόμενουσ προγραμματιςτζσ. Αντικείμενο String Εφαρμογή ιδιοτήτων και μεθόδων του αντικειμζνου String Αντικείμενο Date Εφαρμογή των μεθόδων του αντικειμζνου Date Ειςαγωγή ςτα ςυμβάντα υμβάντα ποντικιοφ Ι - MouseOver, MouseOut υμβάντα ποντικιοφ II - υμβάν Click υμβάν Load υμβάν Focus υμβάν Blur Μζθοδοσ εγγραφήσ χειριςτϊν ςυμβάντων - Ακροατζσ ςυμβάντων (Event Listeners) 2

3 6η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 6θσ εκπαιδευτικισ ςυνάντθςθσ είναι θ διάδοςθ των ςυμβάντων, οι λεγόμενεσ φυςαλίδεσ και οι ακροατζσ (Event Listeners). Κατανοϊντασ το τι είναι DOM και το αντικείμενο document ςτο μοντζλο DOM, μακαίνεισ τισ μεκόδουσ του αντικειμζνου document και τθν προςπζλαςθ των ςτοιχείων με χριςθ τθσ τιμισ ID. Η ιδιότθτα innerhtml και θ προςπζλαςθ του αντικειμζνου με χριςθ του ονόματοσ τθσ ετικζτασ αποτελοφν αντικείμενο διεξοδικισ ανάλυςθσ, ζτςι ϊςτε να μπορζςεισ να αντιλθφκείσ τθν προςπζλαςθ με το όνομα τθσ κλάςθσ, τθν προςπζλαςθ κόμβων με βάςθ τουσ επιλογείσ CSS και τθν προςπζλαςθ των κόμβων ιδιοτιτων, για να μάκεισ να αξιοποιείσ τθν εργαςία με τουσ κόμβουσ κειμζνου. Διάδοςη ςυμβάντων - Οι φυςαλίδεσ ςυμβάντων - Ακροατζσ ςυμβάντων (Event Listeners) Σι είναι το DOM Σο αντικείμενο document ςτο μοντζλο DOM Μζθοδοι του αντικειμζνου document Boarder Styl Προςπζλαςη των κόμβων ςτοιχείων με χρήςη τησ τιμήσ ID Η ιδιότητα innerhtml Προςπζλαςη του αντικειμζνου με χρήςη του ονόματοσ τησ ετικζτασ Προςπζλαςη με το όνομα τησ κλάςησ Προςπζλαςη κόμβων με βάςη τουσ επιλογείσ CSS Προςπζλαςη των κόμβων ιδιοτήτων Εργαςία με τουσ κόμβουσ κειμζνου 7η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 7θσ εκπαιδευτικισ ςυνάντθςθσ είναι να ειςαχκείσ ςτθν κίνθςθ ςτο DOM, να μάκεισ περιςςότερα για τθν προςκικθ κόμβων ςε αυτό και να κατανοιςεισ τθν ειςαγωγι και τθν αφαίρεςθ κόμβων. Τα δυναμικά ςτυλ και το αντικείμενο τθσ φόρμασ, όπωσ επίςθσ το πλαίςιο κειμζνου, το πλαίςιο ειςαγωγισ ςυνκθματικοφ και τα ραδιοπλικτρα κα ςε απαςχολιςουν ςτα πλαίςια αυτισ τθσ ςυνάντθςθσ. Μακαίνοντασ να χειρίηεςαι τα πλαίςια ελζγχου και τισ λίςτεσ, κα είςαι ςε κζςθ να "ςχεδιάηεισ" φόρμεσ αποτελεςματικά. Κίνηςη ςτο DOM Προςθήκη κόμβων ςτο DOM Ειςαγωγή και αφαίρεςη κόμβων Δυναμικά ςτυλ (dynamic styles) Αντικείμενο Form Σο ςτοιχείο ειςαγωγήσ (input) Λίςτεσ Πλαίςιο κειμζνου Πλαίςιο ειςαγωγήσ ςυνθηματικοφ Ραδιοπλήκτρα Πλαίςια ελζγχου 8η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 8θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ περιςςότερα για τθν υποβολι τθσ φόρμασ ςτο διακομιςτι, για τθν επικφρωςθ των δεδομζνων τθσ φόρμασ με τθ χριςθ javascript και για τθ δθμιουργία φόρμασ, ϊςτε να κατανοιςεισ τισ κανονικζσ περιςτάςεισ. Η χριςθ ειδικϊν χαρακτιρων και ςυμβόλων και ο ζλεγχοσ εγκυρότθτασ τθσ φόρμασ με τθ χριςθ κανονικϊν παραςτάςεων αποτελοφν χριςιμα εργαλεία, τα οποία κα ςε βοθκιςουν να χειριςτείσ τουσ δεςμοφσ, το αντικείμενο links και να εργάηεςαι με τουσ εικονοχάρτεσ. 3

4 Τποβολή τησ φόρμασ ςτο διακομιςτή Επικφρωςη των δεδομζνων τησ φόρμασ με τη χρήςη Javascript Δημιουργία φόρμασ Κανονικζσ παραςτάςεισ Ειδικοί χαρακτήρεσ και ςφμβολα Ζλεγχοσ εγκυρότητασ φόρμασ με τη χρήςη κανονικϊν παραςτάςεων Σο αντικείμενο image Δεςμοί - Σο αντικείμενο links Εργαςία με τουσ εικονοχάρτεσ 9η Εκπαιδευτική Συνάντηςη: 3η Στόχοσ τθσ 9θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να φορτϊνεισ εικόνεσ εκ των προτζρων με τθ βοικεια του καταςκευαςτι image(), να χειρίηεςαι το αντικείμενο window και να εφαρμόηεισ μεκόδουσ του αντικειμζνου αυτοφ, ανοίγοντασ και κλείνοντασ παράκυρα. Η χριςθ τθσ μεκόδου setinterval() και των πλαιςίων αποτελοφν ζνα μζροσ τθσ φλθσ που κα ςου κινιςει το ενδιαφζρον, κακϊσ κα είςαι ςε κζςθ να χειρίηεςαι εμβόλιμα πλαίςια και να χρθςιμοποιείσ τθν ετικζτα <iframe> για να ενςωματϊνεισ μια ιςτοςελίδα μζςα ςε μια άλλθ. Εξίςου ςθμαντικά, ωςτόςο, κα βρεισ τα αντικείμενα navigator και screen. Φόρτωςη εικόνων εκ των προτζρων με τη βοήθεια του καταςκευαςτή image() Σο αντικείμενο window Εφαρμογή μεθόδων του αντικειμζνου window Άνοιγμα και κλείςιμο παραθφρων Η μζθοδοσ setinterval() Πλαίςια Εμβόλιμα πλαίςια - Η ετικζτα <iframe> Αντικείμενο navigator Αντικείμενο screen 10η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 10θσ εκπαιδευτικισ ςυνάντθςθσ είναι να καταλάβεισ τον τρόπο με τον οποίο λειτουργοφν τα "cookies", να αντιλθφκείσ τθ χριςθ τθσ τεχνολογίασ Ajax, των "κθκϊν" και του Canvas. Η δθμιουργία ςχθμάτων, εικόνων και χρωμάτων, αλλά και κειμζνου, αποτελοφν αντικείμενα ιδιαίτερα χριςιμα, τα οποία κα ςε βοθκιςουν να ειςαχκείσ ςτθν jquery και να καταπιαςτείσ με τθ μζκοδο ready(). Σα "μπιςκότα" (cookies) Η τεχνολογία Ajax Οι "θήκεσ" (Closure) Ο καμβάσ (Canvas) Δημιουργία ςχημάτων Εικόνεσ & Χρϊματα Κείμενο Ειςαγωγή ςτην jquery Μζθοδοσ ready() 11η Εκπαιδευτική Συνάντηςη: Στόχοσ τθσ 11θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να χειρίηεςαι τουσ επιλογείσ, να χρθςιμοποιείσ τθ μζκοδο CSS, να προςπελαφνεισ ςτοιχεία του εγγράφου και να χειρίηεςαι περιεχόμενα εγγράφων, αφιερϊνοντασ χρόνο ςε κζματα πρακτικισ εφαρμογισ. Η προςκικθ και θ αφαίρεςθ κλάςεων, θ αφαίρεςθ και θ εμφάνιςθ αντικειμζνων και τα εφζ κίνθςθσ και ολίςκθςθσ κα ςε βοθκιςουν να κάνεισ τθ ςελίδα ι τθν εφαρμογι ςου διαδραςτικι, περνϊντασ, ζτςι, ςε κζματα animation και πρόςκετων jquery UI. 4

5 Επιλογείσ (selector) Εφζ και κίνηςη Μζθοδοσ CSS Εφζ ςταδιακήσ εμφάνιςησ και εξαφάνιςησ (fade in & Προςπζλαςη των ςτοιχείων του εγγράφου fade out) Χειριςμόσ περιεχομζνων εγγράφων Εφζ ολίςθηςησ (sliding) Προςθήκη και αφαίρεςη κλάςεων Animation Αφαίρεςη/εμφάνιςη αντικειμζνων - το ςυμβάν click και οι μζθοδοι Χειριςμόσ ςυμβάντων από την jquery hide() και show() Σο πρόςθετο jquery UI Σημείωςη: Η ανωτζρω φλη ζχει ενςωματωθεί ςε εκπαιδευτική ςυνάντηςη 4 ωρών 5