jquery - ajaxusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • events $ & !...
TRANSCRIPT
![Page 1: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/1.jpg)
JQUERY - AJAX Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο
Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο, Γ. Εήλδξνο
Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ
θαη Μεραληθώλ Υπνινγηζηώλ
![Page 2: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/2.jpg)
Σηόρνο ηεο ώξαο
• Δμνηθίσζε κε ηε βηβιηνζήθε jQuery
• Πξόζβαζε ζην έγγξαθν
• Δπηινγείο
• Αιιαγή ηνπ εγγξάθνπ
• Αιιαγή CSS
• Βαζηθά γεγνλόηα
• AJAX
• Καζαξηζκόο τωρίς ζακπάδα
• Απώζεζε ζθόλεο
![Page 3: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/3.jpg)
Σηόρνο ηεο ώξαο
• Δμνηθίσζε κε ηε βηβιηνζήθε jQuery
• Πξόζβαζε ζην έγγξαθν
• Δπηινγείο
• Αιιαγή ηνπ εγγξάθνπ
• Αιιαγή CSS
• Βαζηθά γεγνλόηα
• AJAX
• Αζύγτρολε αλάγλσζε/εγγξαθή δεδνκέλσλ
• HTTP ζπλδέζεηο κέζσ Javascript
![Page 4: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/4.jpg)
jQuery
• Τη είλαη ε jQuery;
• «Βνεζεηηθέο ξόδεο» γηα Javascript
• Βηβιηνζήθε γξακκέλε ε ίδηα ζε Javascript
• Ό,ηη θάλνπκε κε jQuery κπνξνύκε λα ην θάλνπκε κε Javascript
• Τη κπνξεί λα θάλεη:
• Πξόζβαζε ζην HTML κέζσ Javascript
• Αιιαγή ηδηνηήησλ εγγξάθνπ δπλακηθά
• Πεξηερόκελν HTML
• Μνξθνπνίεζε CSS
• Φεηξηζκόο γεγνλόησλ εύθνια
![Page 5: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/5.jpg)
Φόξησζε ηεο jQuery
• Δίλαη έλα αξρείν js
• Βάδνπκε κία εηηθέηα <script> κε src ηνλ αξρείν ηεο jQuery
<script type=“text/javascript” src=“jquery.js”> </script>
![Page 6: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/6.jpg)
Φόξησζε ηεο jQuery
• Τελ θαηεβάδνπκε από http://jquery.com/
• 2 εθδόζεηο
• Minified + ζπκπηεζκέλε 26KB
• Αζπκπίεζηε 179KB
• Σειίδεο κε ηεθκεξίσζε θαη ρξήζηκα παξαδείγκαηα
http://docs.jquery.com/Main_Page
![Page 7: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/7.jpg)
Minification
• Γίλεηαη απηόκαηα από πξόγξακκα
• Αθαηξνύληαη:
• Σρόιηα
• Πεξηηηέο αιιαγέο γξακκώλ, θελά, tab
• Διαρηζηνπνηνύληαη ηα νλόκαηα κεηαβιεηώλ
• Πιενλεθηήκαηα
• Μηθξό κέγεζνο
• Γξήγνξε κεηαθνξά κέζσ δηθηύνπ θαη θόξησζε
• Μεηνλεθηήκαηα
• Διάρηζηε αλαγλσζηκόηεηα
![Page 8: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/8.jpg)
DOM
• Document Object Model
• Δίλαη κία αλαπαξάζηαζε ηνπ εγγξάθνπ HTML
• Φξεζηκνπνηνύκε ηηο δπλαηόηεηέο ηνπ κέζσ Javascript
• Μέζσ απηνύ κπνξνύκε λα δηαβάζνπκε/αιιάμνπκε ην έγγξαθν
• Λεπηνκεξήο αλάιπζε ζηα επόκελα καζήκαηα
![Page 9: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/9.jpg)
Γύν είδε αλαπαξαζηάζεσλ
• Μπνξνύκε λα αλαπαξαζηίζνπκε κία HTML εηηθέηα
• Με DOM αλαπαξάζηαζε
• Με jQuery αλαπαξάζηαζε
• Μαο πξνζθέξνπλ δηαθνξεηηθέο δπλαηόηεηεο
![Page 10: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/10.jpg)
jQuery αλαπαξάζηαζε
• Αλαπαξηζηά έλα ζύλοιο από εηηθέηεο ηηο νπνίεο
κπνξνύκε λα δηαβάζνπκε/αιιάμνπκε
![Page 11: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/11.jpg)
DOM αλαπαξάζηαζε
• Αλαπαξηζηά κία κόλο εηηθέηα HTML
![Page 12: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/12.jpg)
Τν αληηθείκελν $
• Global κεηαβιεηή κε όλνκα $
• Θα κπνξνύζε λα είλαη νηηδήπνηε, δε ζεκαίλεη θάηη ην $
• Μέζσ απηήο έρνπκε πξόζβαζε ζηελ jQuery
• Οξίδεηαη κόιηο θνξηώζεη θαη ηξέμεη ην jquery.js
![Page 13: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/13.jpg)
Δπηινγείο jQuery
• Τξόπνο πνπ επηιέγνπκε html ζηνηρεία
• $( „επιλογέας‟ )
• Ο επηινγέαο είλαη έλαο CSS επηινγέαο
• Δπηζηξέθεη:
• Τν ζύλνιν ησλ ζηνηρείσλ πνπ ζα επέιεγε ν CSS επηινγέαο
• Παξαδείγκαηα
• Όιεο νη θόξκεο κηαο ζειίδαο
• var forms = $( „form‟ );
• Όια ηα <a> κέζα ζην <div id=“foo”>
• var links = $( „#foo a‟ );
![Page 14: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/14.jpg)
Δπηινγείο jQuery
• ΠΡΟΟΧΗ!
• Ζ επηινγή γίλεηαη κε βάζε ην έγγξαθν όπσο είλαη εθείλε
ηε ζηηγκή
• Αλ αιιάμεη ζην κέιινλ ην αληηθείκελν δελ αιιάδεη
![Page 15: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/15.jpg)
Απνηέιεζκα επηινγήο jQuery
• Δπηζηξέθεη έλα αληηθείκελν
• Πεξηέρεη: • Τα ίδηα ηα ζηνηρεία πνπ επέιεμε
• Φξήζηκεο ζπλαξηήζεηο
• Φξήζηκεο ηδηόηεηεο
• Οη ζπλαξηήζεηο δξνπλ κόλν ζηα ζηνηρεία πνπ επηιέρηεθαλ
• Αθόκα θη αλ δελ επηιέρζεθαλ ζηνηρεία νη ζπλαξηήζεηο ππάξρνπλ var a = $( „liroulirou‟ ); //Δεν υπάρχει ετικέτα liroulirou
a.css(); //Είναι ορισμένο
![Page 16: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/16.jpg)
Απνηέιεζκα επηινγήο jQuery
• Ηδηόηεηα length
• Πεξηέρεη ηνλ αξηζκό ησλ ζηνηρείσλ πνπ επηιέρζεθαλ
var a = $( „a‟ );
alert( „Υπάρχουν „ + a.length + „ σύνδεσμοι στη σελίδα‟ );
![Page 17: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/17.jpg)
Από jQuery ζε DOM
• Τα ζηνηρεία ζε αλαπαξάζηαζε DOM βξίζθνληαη ζηηο
ζέζεηο 0, 1, 2 ..., length - 1 ηνπ απνηειέζκαηνο
• Τα παξαθάησ είλαη ηζνδύλακα
• var a = $( „#foo‟ )[ 0 ];
• var a = document.getElementById( „foo‟ );
![Page 18: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/18.jpg)
Από DOM ζε jQuery
• $( domElement ) επηζηξέθεη ηελ αληίζηνηρε
αλαπαξάζηαζε ζε jQuery
• Τα παξαθάησ είλαη ηζνδύλακα
• var a = $( „#foo‟ );
• var a = $( document.getElementById( „foo‟ ) );
![Page 19: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/19.jpg)
Σπλάξηεζε css()
• Σπλάξηεζε css()
• Γηαθνξεηηθή ζπκπεξηθνξά αλάινγα κε ηα νξίζκαηα
• Αιιάδεη ή δηαβάδεη ην CSS
• Οη θαλόλεο κέζσ απηήο έρνπλ κεγαιύηεξε εηδηθόηεηα από όινπο
![Page 20: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/20.jpg)
Σπλάξηεζε css()
• css( „ιδιότητα‟ )
• Δπηζηξέθεη ηελ ηηκή ηεο ηδηόηεηαο CSS „ηδηόηεηα‟ ηνπ πξώηνπ
ζηνηρείνπ
• Ζ ηδηόηεηα δε κπνξεί λα είλαη ζπληνκεπκέλε ηδηόηεηα
• border, padding, margin, background, font
<p style=“color: red”>Foo</p>
<p style=“color: blue”>Bar</p>
<script type=“text/javascript”>
var foo = $( „p‟ );
var color = foo.css( „color‟ ); //color = „red‟
</script>
![Page 21: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/21.jpg)
Σπλάξηεζε css()
• css( „ιδιότητα‟, „τιμή‟ )
• Οξίδεη ζε θάζε ζηνηρείν ηελ CSS ηδηόηεηα „ηδηόηεηα‟ κε ηηκή „ηηκή‟
• Όιεο νη παξάγξαθνη λα έρνπλ πξάζηλα γξάκκαηα
var foo = $( „p‟ );
foo.css( „color‟, „green‟ );
![Page 22: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/22.jpg)
Σπλάξηεζε css()
• css( ιδιότητες ) • Οξίδεη ζε θάζε ζηνηρείν ηηο CSS ηδηόηεηεο ηνπ ιδιόηηηες
• Τν ιδιόηηηες είλαη αληηθείκελν ηεο κνξθήο
{ „ιδιότητα‟: „τιμή‟, „ιδιότητα‟: „τιμή‟ }
• Όιεο νη παξάγξαθνη λα έρνπλ άζπξν θείκελν ζε καύξν θόλην
var paragraphs = $( „p‟ ); paragraphs.css( { „background-color‟: „black‟, „color‟: „white‟ } );
![Page 23: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/23.jpg)
Σπλάξηεζε show()
• Χωρίς ορίζμαηα
• Δκθαλίδεη άκεζα ηα ζηνηρεία ζηα νπνία εθαξκόδεηαη
<p id=“answer” style=“display: none”>42</p>
var a = $( „#answer‟ );
a.show();
![Page 24: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/24.jpg)
Σπλάξηεζε show()
• show( διάρκεια )
• Δκθαλίδεη κε animation ηα ζηνηρεία ζηα νπνία εθαξκόδεηαη
• Τν animation δηαξθεί διάρκεια milliseconds
• To δηάξθεηα κπνξεί λα είλαη θαη „fast‟ ή „slow‟
• fast = 200ms, slow = 600ms
<p id=“answer” style=“display: none”>42</p>
var a = $( „#answer‟ );
a.show( „fast‟ );
![Page 25: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/25.jpg)
Σπλάξηεζε hide()
• Χωρίς ορίζμαηα
• Κξύβεη άκεζα ηα ζηνηρεία ζηα νπνία εθαξκόδεηαη
• Σαλ λα είραλ display: none
<p id=“answer”>42</p>
var a = $( „#answer‟ );
a.hide();
![Page 26: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/26.jpg)
Σπλάξηεζε hide()
• hide( διάρκεια )
• Κξύβεη κε animation ηα ζηνηρεία ζηα νπνία εθαξκόδεηαη
• Τν animation δηαξθεί διάρκεια milliseconds
• To δηάξθεηα κπνξεί λα είλαη θαη „fast‟ ή „slow‟
<p id=“answer”>42</p>
var a = $( „#answer‟ );
a.hide( „slow‟ );
![Page 27: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/27.jpg)
Σπλάξηεζε toggle()
• Χωρίς ορίζμαηα
• Τα ζηνηρεία πνπ θαίλνληαη ηα θξύβεη
• Τα ζηνηρεία πνπ είλαη θξπκέλα ηα εκθαλίδεη
<p style=“display: none”>One</p>
<p style=“display: block”>Two</p>
var paragraphs = $( „p‟ );
p.toggle(); //Κρύβεται το One εμφανίζεται το Two
![Page 28: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/28.jpg)
Σπλάξηεζε fadeIn()
• fadeIn( δηάξθεηα )
• Δκθαλίδεη έλα ζηνηρείν κε εθέ fade
• Τν εθέ δηαξθεί διάρκεια milliseconds
• Αλ παξαιεθζεί ε δηάξθεηα έρεη πξνεπηιεγκέλε ηηκή 400ms
Φξόλνο
![Page 29: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/29.jpg)
Σπλάξηεζε fadeOut()
• fadeOut( δηάξθεηα )
• Κξύβεη έλα ζηνηρείν κε εθέ fade
• Τν εθέ δηαξθεί διάρκεια milliseconds
• Αλ παξαιεθζεί ε δηάξθεηα έρεη πξνεπηιεγκέλε ηηκή 400ms
• Μεηά ην ηέινο ηνπ animation ηα ζηνηρεία απνθηνύλ display: none
Φξόλνο
![Page 30: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/30.jpg)
Σπλάξηεζε text()
• Χωρίς ορίζμαηα
• Δπηζηξέθεη ην θείκελν όισλ ησλ ζηνηρείσλ ζε έλα string
• <p>Hellp</p>
• <p> world!</p>
• var text = $( „p‟ ).text(); // text = „Hello world!‟
![Page 31: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/31.jpg)
Σπλάξηεζε text()
• text( κείμενο )
• Οξίδεη ην θείκελν όισλ ησλ ζηνηρείσλ λα είλαη κείμενο
• Κάλεη απηόκαηα escape εηδηθνύο ραξαθηήξεο
![Page 32: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/32.jpg)
Σπλάξηεζε text()
• <p><strong>Hello</strong></p>
• <p> world!</p>
• var text = $( „p‟ ).text( „<em>jQuery rocks!</em>‟ );
• <p><em>jQuery rocks!</em></p>
• <p><em>jQuery rocks!</em></p>
![Page 33: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/33.jpg)
Σπλάξηεζε html()
• Χωρίς ορίζμαηα
• Δπηζηξέθεη ηα html πεξηερόκελα ηοσ πρώηοσ ζηνηρείνπ
ζε έλα string
• <p><strong>Hellο</strong></p>
• <p> world!</p>
• var html = $( „p‟ ).html();
• // html = „<strong>Hello</strong>‟
![Page 34: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/34.jpg)
Σπλάξηεζε html()
• html( κώδικας )
• Οξίδεη ην html πεξηερόκελν όισλ ησλ ζηνηρείσλ λα είλαη
κώδικας
• Δελ γίλνληαη escape νη εηδηθνί ραξαθηήξεο
![Page 35: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/35.jpg)
Σπλάξηεζε html()
• <p><strong>Hello<strong></p>
• <p> world!</p>
• var c = $( „p‟ ).html( „<em>jQuery rocks</em>‟ );
• <p><em>jQuery rocks</em></p>
• <p><em>jQuery rocks</em></p>
![Page 36: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/36.jpg)
6ε Δξγαζία • Παξάδνζε κέζσ SSH (Secure SHell)
• Αλεβάζηε .js,.html, .css, .php εηθόλεο θιπ. ζην home ζαο
• Δπηβεβαηώζηε όηη έρεηε πξόζβαζε κε ηδηωηηθό/δεκόζηο θιεηδί
• Μέρξη πρηλ ηης δηαθοπές ηωλ Χρηζηοσγέλλωλ
• Να βειηηώζεηε ηολ file uploader
• Βειηίσζε πάλσ ζηελ 4ε θαη 5ε εξγαζία
• Φξήζε Javascript
• Αιιαγή ηεο ζειίδαο ηεο ιίζηαο ησλ αξρείσλ
• Κιηθ ζε αξρείν ζηε ιίζηα γηα άκεζε πξνβνιή
• Άκεζε πξνβνιή θάησ από ηελ ιίζηα
• Δηδηθόο ζύλδεζκνο γηα download
• Άκεζε πξνβνιή: .txt, .jpg, .png, .gif
![Page 37: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/37.jpg)
Σπλάξηεζε addClass()
• addClass( „κλάσηΑ κλάσηΒ‟ )
• Πξνζζέηεη ζηα ζηνηρεία ηηο θιάζεηο πνπ ηεο πεξλάκε
• Γελ αληηθαζηζηά ηηο ήδε ππάξρνπζεο θιάζεηο
![Page 38: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/38.jpg)
Σπλάξηεζε removeClass()
• removeClass( „κλάσηΑ κλάσηΒ‟ )
• Αθαηξεί ζηα ζηνηρεία ηηο θιάζεηο πνπ ηεο πεξλάκε
• Γελ αληηθαζηζηά ηηο ήδε ππάξρνπζεο θιάζεηο
![Page 39: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/39.jpg)
Σπλάξηεζε toggleClass()
• toggleClass( „κλάσηΑ κλάσηΒ‟ )
• Αλ έλα ζηνηρείν έρεη ηελ θιάζε ηελ αθαηξεί
• Αλ έλα ζηνηρείν δελ έρεη ηελ θιάζε ηελ πξνζζέηεη
• Γελ αληηθαζηζηά ηηο ήδε ππάξρνπζεο θιάζεηο
![Page 40: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/40.jpg)
Σπλάξηεζε hasClass()
• hasClass( κλάση )
• Δπηζηξέθεη true αλ οποηοδήποηε από ηα ζηνηρεία έρεη ηελ
θιάζε κλάζη
<p class=“foo”></p>
<p class=“bar”></p>
var a = $( „p‟ ).hasClass( „bar‟ ); //true
![Page 41: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/41.jpg)
Σπλάξηεζε attr()
• attr( ιδιότητα )
• Δπηζηξέθεη ηελ ηηκή ηεο ηδηόηεηαο ιδιόηηηα ηνπ πρώηοσ ζηνηρείνπ
<img src=„foo.jpg‟ alt=„Delicious Waffle‟ />
var description = $( „img‟ ).attr( „alt‟ );
![Page 42: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/42.jpg)
Σπλάξηεζε attr()
• attr( ιδιότητα, τιμή )
• Οξίδεη ζηα ζηνηρεία ηελ ηδηόηεηα ιδιόηηηα κε ηηκή ηιμή
<img id=“photo” src=„foo.jpg‟ alt=„Delicoius Waffle‟ />
var photo = $( „#photo‟ );
photo.attr( „title‟, photo.attr( „alt‟ ) );
![Page 43: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/43.jpg)
Γεγνλόηα
• Όηαλ ζπκβαίλεη θάηη ζηνλ browser ππξνδνηείηαη έλα
γεγνλόο
• Πνιύ ρξήζηκν λα εθηεινύκε θώδηθα θάζε θνξά πνπ
ζπκβαίλεη θάηη ηέηνην
• Γηάθνξα είδε γεγνλόησλ, πιεθηξνινγίνπ, πνληηθηνύ θ.α.
• Ζ jQuery καο επηηξέπεη εύθνιε ρξήζε γεγνλόησλ
![Page 44: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/44.jpg)
Γεγνλόηα – Βαζηθή ζύληαμε
• $( επιλογέας ).όνομαΓεγονότος( συνάρτηση )
• Κάζε θνξά πνπ ζπκβαίλεη ην γεγνλόο όνομαΓεγονόηος θαη
αθνξά ηα ζηνηρεία ηνπ επηινγέα ηόηε εθηειείηαη ε
ζπλάξηεζε ζσνάρηηζη
![Page 45: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/45.jpg)
Γεγνλόο Κιηθ
• Ππξνδνηείηαη όηαλ γίλεηαη θιηθ ζε θάπνην ζηνηρείν από ην
πνληίθη
<span id=“button”>Εμφάνιση</span>
<p id=“content” style=“display: none”>[…]</p>
$( „#button‟ ).click( function() {
$( „#content‟ ).show( „fast‟ );
} );
![Page 46: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/46.jpg)
Γεγνλόο Υπνβνιή
• Ππξνδνηείηαη όηαλ ππνβάιιεηαη κία θόξκα
• Ζ ππνβνιή ζηακαηάεη αλ επηζηξέςνπκε false
• $( „form.login‟ ).submit( function() { … } );
![Page 47: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/47.jpg)
Γηάζρηζε εγγξάθνπ
• Σπλαξηήζεηο δηάζρηζεο εγγξάθνπ
• Μαο πεγαίλνπλ ζε ζεκεία ηνπ εγγξάθνπ κε βάζε ηα επηιεγκέλα
ζηνηρεία
• Όιεο νη ζπλαξηήζεηο κπνξνύλ λα θηιηξαξηζζνύλ κε επηινγέα
![Page 48: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/48.jpg)
Γηάζρηζε εγγξάθνπ
• children( [επιλογέας] )
• Δπηζηξέθεη ηα άκεζα παηδηά ησλ ζηνηρείσλ ζε jQuery
αλαπαξάζηαζε
• siblings( [επιλογέας] )
• Δπηζηξέθεη ηα αδέιθηα ησλ ζηνηρείσλ ζε jQuery αλαπαξάζηαζε
![Page 49: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/49.jpg)
Γηάζρηζε εγγξάθνπ
• next( [επιλογέας] )
• Δπηζηξέθεη ηνπο ακέζσο επόκελνπο αδειθνύο ησλ ζηνηρείσλ ζε
jQuery αλαπαξάζηαζε
• prev( [επιλογέας] )
• Δπηζηξέθεη ηνλ πξνεγνύκελν αδειθό ησλ ζηνηρείσλ ζε jQuery
αλαπαξάζηαζε
![Page 50: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/50.jpg)
Γηάζρηζε εγγξάθνπ
• parent( [επιλογέας] )
• Δπηζηξέθεη ηνπο παηέξεο ησλ ζηνηρείσλ ζε jQuery αλαπαξάζηαζε
• parents( [επιλογέας] )
• Δπηζηξέθεη όινπο ηνπο πξνγόλνπο ησλ ζηνηρείσλ ζε jQuery
αλαπαξάζηαζε
![Page 51: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/51.jpg)
Callbacks
• Αζύγρξνλε θύζε ηεο Javascript
• Callbacks
• Τξέρνπλ θάηη όηαλ γίλεη θάηη άιιν
• Παξαδείγκαηα
• Τξέμε ηελ ζπλάξηεζε foo() όηαλ θνξησζεί ην έγγξαθν
• Τξέμε ηελ ζπλάξηεζε bar() όηαλ γίλεη θιηθ
![Page 52: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/52.jpg)
Callbacks
• Δίλαη αλώλπκεο ζπλαξηήζεηο
• Σύληαμε function() { κώδικας }
• Πεξληνύληαη σο παξάκεηξνη ζε άιιεο ζπλαξηήζεηο
• Πεξηζζόηεξα γηα αλώλπκεο ζπλαξηήζεηο ζηα επόκελα
καζήκαηα
![Page 53: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/53.jpg)
Δθηέιεζε θώδηθα κεηά ηε θόξησζε
• Μπνξνύκε λα ηξέμνπκε έλα ηκήκα θώδηθα αθνύ θνξηώζεη
όιε ε ζειίδα:
$( function () {
// κώδικας
} );
![Page 54: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/54.jpg)
AJAX
• Asynchronous JAvascript and XML
• Τν XML δελ ζπλεζίδεηαη
• Τα δεδνκέλα αληαιιάζζνληαη ζε JSON ή άκεζα HTML/CSS
• Δπηηξέπεη HTTP ζπλδέζεηο κέζσ Javascript
• POST θαη GET
![Page 55: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/55.jpg)
AJAX
• Πιενλεθηήκαηα:
• Δθαξκνγέο πνπ είλαη δσληαλέο
• Φόξησζε λένπ πεξηερνκέλνπ ρσξίο refresh
• Γηάβαζκα ησλ δεδνκέλσλ πνπ ζέινπκε απεπζείαο ζηελ Javascript
• Αιιαγή κόλν κέξνπο κηαο εθαξκνγήο
![Page 56: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/56.jpg)
AJAX
• Μεηνλεθηήκαηα
• Τν θνπκπί «πίζσ» δε ζπκπεξηθέξεηαη όπσο ζα πεξηκέλακε
• Τν θνπκπί «Bookmark» δε ζπκπεξηθέξεηαη όπσο ζα πεξηκέλακε
• Οη πεξηζζόηεξεο αξάρλεο δε ηξέρνπλ Javascript δε θαηαγξάθνπλ
ην πεξηερόκελν πνπ παξάγεηαη από απηή
• Γε κπνξνύκε λα θνξηώζνπκε νπνηαδήπνηε δηεύζπλζε
![Page 57: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/57.jpg)
AJAX
• Παξαδείγκαηα ρξήζεο
• Εσληαλά απνηειέζκαηα αλαδήηεζεο
• Google Instant
• Facebook search-as-you-type
• Chat
• Έιεγρνο δηαζεζηκόηεηαο όλνκα ρξήζηε πξηλ γίλεη register
![Page 58: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/58.jpg)
AJAX ζε jQuery
• Γύν βαζηθέο κέζνδνη:
• $.get()
• $.post()
• Ίδηα ζύληαμε
![Page 59: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/59.jpg)
$.get()
• $.get( διεύθυνση, δεδομένα, callback )
• Κάλεη έλα HTTP GET αίηεκα ζηε δηεύζπλζε διεύθσνζη κε GET
παξακέηξνπο ηα δεδομένα
• Όηαλ απαληήζεη ν server εθηειείηαη ην callback
• Σην callback πεξληέηαη σο παξάκεηξνο ηο αποηέιεζκα
![Page 60: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/60.jpg)
$.get()
<h2>Dynamic Paragraph</h2>
<p id=“dyn”></p>
...
$.get(
„data.html‟,
{ „local‟: „true‟ },
function( data ) {
$( „#dyn‟ ).html( data );
}
);
![Page 61: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/61.jpg)
$.post()
• $.post( διεύθυνση, δεδομένα, callback )
• Κάλεη έλα HTTP POST αίηεκα ζηε δηεύζπλζε διεύθσνζη κε POST
παξακέηξνπο ηα δεδομένα
• Όηαλ απαληήζεη ν server εθηειείηαη ην callback
• Σην callback πεξληέηαη σο παξάκεηξνο ηο αποηέιεζκα
![Page 62: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/62.jpg)
$.post()
<h2>Dynamic Save</h2>
<p id=“dyn”></p>
...
$.post(
„post.php‟,
{ „text‟: „Hello‟ },
function( data ) {
alert( „Post was saved!‟ );
}
);
![Page 63: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/63.jpg)
Μάζακε
• Δηζαγσγή ζηελ jQuery
• Δπηινγείο
• Δπεμεξγαζία HTML/CSS
• Γεγνλόηα
• AJAX
• GET/POST θαη παξαδείγκαηα
![Page 64: JQUERY - AJAXusers.sch.gr/psiachos/web-class.gr/slides/15_jquery-ajax.pdf · • Events $ & ! " jQuery • α εα ) α ηα events π π ! $ # ; • ε ! ζ πη * • ε ! ζ πη](https://reader033.vdocuments.mx/reader033/viewer/2022060605/605a01b53673d36e50282c00/html5/thumbnails/64.jpg)
Τελ επόκελε θνξά...
• Τα Javascript events ζε βάζνο
• Events ρσξίο jQuery
• Πνηα είλαη όια ηα events πνπ ππάξρνπλ;
• Φεηξηζκόο πνληηθηνύ
• Φεηξηζκόο πιεθηξνινγίνπ
• Γηαθνξεηηθνί ηξόπνη δήισζεο events