Βίντεο-Οδηγός: Μάθημα για την JavaScript & jQuery

Καλώς ήρθατε στον απόλυτο μάθημα JavaScript και jQuery.

Σε αυτό το βίντεο εξηγείται τι είναι το JavaScript και τι μας προσφέρει.

Σε αυτό το βίντεο θα μάθεις ποιον επεξεργαστή κειμένου θα χρησιμοποιήσουμε και θα τον εγκαταστήσουμε μαζί.

Σε αυτό το βίντεο παρουσιάζεται πώς να χρησιμοποιήσετε κλικ με το JavaScript και πώς λειτουργούν οι μεταβλητές.

Η δομή If. Το if (μεταφρασμένο: εάν) χρησιμοποιείται πολύ συχνά κατά την προγραμματισμό. Για παράδειγμα, όταν θέλουμε να εκτελέσουμε κάτι μόνο αν μια συγκεκριμένη συνθήκη είναι αληθής.

Σε αυτό το βίντεο πρόκειται για πίνακες (arrays) στη JavaScript. Μας επιτρέπουν να αποθηκεύουμε πολλές πληροφορίες μέσα σε μια μεταβλητή.

Σε αυτό το βίντεο μαθαίνεις τις For-Loops (βρόγχους). Αυτοί μας επιτρέπουν να εκτελούμε έναν συγκεκριμένο κώδικα πολλές φορές συνεχόμενα.

Οι λειτουργίες είναι μια μικρο-εφαρμογή που μπορούμε να χρησιμοποιήσουμε ξανά ανά πάσα στιγμή, αφού την έχουμε δημιουργήσει. Για παράδειγμα, όταν πατάς το κουμπί "Home" στο κινητό σου, καλείται μια λειτουργία που σε επιστρέφει στην αρχική σου οθόνη. Οι λειτουργίες κάνουν τη δουλειά μας πολύ πιο εύκολη.

Εδώ παρουσιάζεται το αποτέλεσμα της πρόκλησης (συγκεκριμένα ένα κουίζ) και επιπλέον δημιουργείται η HTML βάση.

Εδώ προγραμματίζεται το CSS (το στυλ) του κουίζ.

Εδώ προγραμματίζεται και εξηγείται το JavaScript του κουίζ μας.

Έχεις ήδη δει πώς λειτουργούν οι συναρτήσεις με ένα παράμετρο. Τώρα θα δούμε συναρτήσεις με πολλαπλές παραμέτρους. Οι πολλαπλοί παράμετροι είναι χρήσιμοι όταν θέλουμε να χρησιμοποιήσουμε μια συνάρτηση με πολλές διαφορετικές μεταβλητές. Στα μαθηματικά, για παράδειγμα, στην πρόσθεση πολλών τιμών.

Υπάρχουν παγκόσμιες και τοπικές μεταβλητές. Συνοψίζοντας σύντομα: Οι παγκόσμιες μεταβλητές είναι αυτές που δημιουργούνται έξω από τις συναρτήσεις, ενώ οι τοπικές μεταβλητές είναι αυτές που δημιουργούνται μέσα στις συναρτήσεις. Εδώ θα εξετάσουμε αναλυτικά πως λειτουργεί αυτό.

Στις γλώσσες προγραμματισμού υπάρχει η δυνατότητα να ορίζουμε συναρτήσεις έτσι ώστε να έχουν μια επιστρεπτική τιμή. Μέχρι τώρα είχαμε μόνο συναρτήσεις που απλά εκτέλεσαν κάτι, χωρίς ωστόσο να επιστρέφουν κάτι με το οποίο θα μπορούσαμε να συνεχίσουμε την εργασία μας. Έτσι, ας ρίξουμε μια ματιά τώρα στο RETURN.

Σε αυτό το άρθρο αναφερόμαστε σε μαθηματικούς τελεστές και τελεστές ανάθεσης. Οι μαθηματικοί τελεστές αφορούν αρκετά απλά πράγματα όπως η πρόσθεση, η αφαίρεση κ.λπ., ενώ οι τελεστές ανάθεσης προσφέρουν τη δυνατότητα εκτέλεσης απλών λειτουργιών όπως για παράδειγμα αύξηση κατά 5. Καθώς και τα δύο είναι σημαντικά στην προγραμματισμό, τα δύο θέματα αναπτύσσονται εδώ.

Υπάρχουν τρία (ή τέσσερα) διαφορετικοί τύποι βρόχων στην προγραμματισμό: ο βρόχος Do-while, ο βρόχος While και ο βρόχος For. Τον βρόχο For τον έχουμε ήδη μάθει. Τώρα θα ασχοληθούμε με τον βρόχο Do-while (ελέγχεται από το τέλος) και τον βρόχο While (ελέγχεται από την αρχή).

Σε αυτό το άρθρο πρόκειται για μια εναλλακτική λύση στις συνθήκες If. Συγκεκριμένα, πρόκειται για τις εντολές Switch (Διακόπτης) και Case (Περίπτωση). Έχουμε ουσιαστικά ένα διακόπτη που μετακινείται ανάμεσα στις διάφορες περιπτώσεις και παραμένει σε αυτή που είναι ενεργή.

Έχουμε ήδη αναλύσει τις συλλογές, αλλά δεν έχουμε μπει σε λεπτομέρειες. Υπάρχει ακόμα πολλή πληροφορία να γνωρίζουμε σχετικά με τις συλλογές. Η πιο σημαντική ιδιότητα ενός πίνακα στη JavaScript είναι το μήκος (length) των στοιχείων. Ωστόσο, ο πίνακας έχει και άλλες ιδιότητες, όπως το index, το οποίο μας δίνει πληροφορίες για τη θέση 0 του πίνακα.

Τα αντικείμενα είναι ένα πολύ σημαντικό και ενδιαφέρον έννοια σε πολλές γλώσσες προγραμματισμού. Στην ουσία, μπορούμε να περιγράψουμε τα πάντα ως ένα είδος αντικειμένου. Ας πάρουμε για παράδειγμα ένα αντικείμενο που συνήθως βλέπουμε στους δρόμους: ένα ΑΥΤΟΚΙΝΗΤΟ. Ένα αυτοκίνητο έχει συγκεκριμένα χαρακτηριστικά και μπορεί να εκτελέσει συγκεκριμένες ενέργειες.

Ας δούμε πώς μπορούμε να δημιουργήσουμε αντικείμενα στη JavaScript. Για το σκοπό αυτό, δημιουργούμε έναν constructor (κατασκευαστή) και δύο παραδείγματα του αντικειμένου μας στην head ετικέτα μας. Μέσα στον constructor, που έχει το ίδιο όνομα με το αντικείμενό μας, λέμε στο πρόγραμμα ότι οι παράμετροι που δίνονται στον constructor κατά τη δημιουργία μιας νέας παράστασης του αντικειμένου πρέπει να είναι ακριβώς οι τιμές του αντικειμένου.

Ως βάση για τις λειτουργίες των αντικειμένων, ξεκινάμε με τον κώδικα από το τελευταίο εκπαιδευτικό βίντεο, όπου δημιουργήσαμε μεταβλητές που δημιουργούνται σε κάθε παράδειγμα του αντικειμένου μας.

Σε αυτό το εκπαιδευτικό μάθημα μαθαίνεις για το αντικείμενο Math. Αυτό είναι ένα αντικείμενο που βασίζεται στην κλάση Math και έρχεται με πολλές κουλ λειτουργίες και χαρακτηριστικά.

Σε αυτό το βίντεο πρόκειται για το αντικείμενο ημερομηνίας ή την κλάση ημερομηνίας. Αυτά είναι αντικείμενα που μπορούν να χρησιμοποιηθούν για την ενσωμάτωση του χρόνου σε ένα πρόγραμμα. Δεν αναφέρεται απαραίτητα στην ώρα ή την ημερομηνία, μπορεί να αφορά επίσης ένα χρονικό διάστημα. Ένα αντικείμενο ημερομηνίας περιέχει το χρονικό διάστημα από τη στιγμή που πέρασε από την 1970-01-01 00:00:00. Υπάρχουν διαφορετικοί τρόποι να περάσετε παραμέτρους στον κατασκευαστή της ημερομηνίας.

Σε αυτό το βίντεο μαθαίνεις πώς να φτιάξεις ένα διαδραστικό ρολόι με τη χρήση της JavaScript.

Σε αυτό το βίντεο πρόκειται για την κληρονομιά και τον πολυμορφισμό. Δύο έννοιες της αντικειμενοστρεφούς προγραμματισμού.

Σε αυτό το άρθρο αναφέρουμε το ερώτημα: Τι είναι το jQuery; Το jQuery είναι μια βιβλιοθήκη JavaScript που μας επιτρέπει να δημιουργούμε ακόμα πιο κομψές ιστοσελίδες.

Εδώ μαθαίνεις πώς να χειρίζεσαι τα κλικ με το jQuery ακόμα πιο εύκολα.

Σε αυτό το εγχειρίδιο μαθαίνεις πώς να αλλάξεις την εμφάνιση μιας ιστοσελίδας χρησιμοποιώντας το jQuery. Για να το κάνουμε αυτό, μπορούμε εύκολα να αντικαταστήσουμε για παράδειγμα ένα γνώρισμα ενός πεδίου. Σε αυτό το παράδειγμα μπορούμε να αλλάξουμε τον σύνδεσμο του iframe (δηλαδή το src/source), αν περάσουμε τον κέρσορα πάνω από το τετράγωνο. Θα μπορούσαμε εύκολα να τροποποιήσουμε τον κώδικα και να μεγαλώσουμε για παράδειγμα το τετράγωνο, αν αντικαταστήσουμε το γνώρισμα ύψος και το γνώρισμα πλάτος όταν περνάμε από πάνω. Γενικά, μπορούμε να χρησιμοποιήσουμε αυτή τη διαδικασία τώρα για να αλλάξουμε την εμφάνιση της ιστοσελίδας χωρίς προβλήματα.

Ένα από τα cool χαρακτηριστικά του jQuery είναι η δυνατότητα να εξαφανίζει ένα στοιχείο. Σε αυτό το παράδειγμα, ξεθωριάζουμε ένα κουμπί όταν κάνουμε κλικ σε ένα άλλο κουμπί. Για να ξαναεμφανίσουμε το στοιχείο μετά, χρησιμοποιούμε τη λειτουργία FadeIn.

Σε αυτό το βίντεο ασχολούμαστε με την Κίνηση στο jQuery. Πρόκειται για κάτι που κινείται. Επομένως, εξασφαλίζουμε ότι ένα στοιχείο στην ιστοσελίδα μας κινείται/τροποποιείται. Για να το πετύχουμε αυτό, υπάρχει μια λειτουργία στο jQuery. Αυτή ονομάζεται animate() και αναμένει τρία παράμετρο.

Ας δούμε τι είναι το jQuery UI.

Το ακορντεόν είναι ένα widget που μας επιτρέπει, όπως σε ένα ακορντεόν, να βλέπουμε μόνο συγκεκριμένα κομμάτια του συνόλου. Αυτό είναι ιδιαίτερα χρήσιμο όταν θέλουμε να μεταδώσουμε πολλές πληροφορίες, οι οποίες ως ένα μεγάλο κείμενο θα ήταν πολύ ασαφείς.

Σε αυτό το εγχειρίδιο πρόκειται για τα Sortables στο jQuery UI. Πρόκειται για στοιχεία ταξινόμησης. Ίσως το γνωρίζεις αν χρησιμοποιείς ιστοσελίδες παραγωγικότητας όπως το Wunderlist ή το Trello. Η δυνατότητα να κάνεις τα στοιχεία ταξινομήσιμα είναι μια πολύ ωραία λειτουργία που μπορείς να χρησιμοποιήσεις σε πολλές διαφορετικές εφαρμογές.

Μερικές φορές συμβαίνει να θέλετε να κάνετε το μέγεθος ενός στοιχείου προσαρμόσιμο από τον χρήστη. Σε αυτή την περίπτωση, τα Resizables είναι ακριβώς αυτό που χρειάζεστε. Αυτά επιτρέπουν ακριβώς αυτό. Κάτω δεξιά στο στοιχείο βλέπετε ένα μικρό τρίγωνο, το οποίο μπορείτε να κάνετε κλικ και μετά, αν κρατήσετε τον δείκτη του ποντικιού πατημένο, να το μεγεθύνετε ή να το σμικρύνετε.

Με το jQuery UI μπορούμε εύκολα να δημιουργήσουμε ένα στοιχείο που μπορεί να τραβηχτεί προς όλες τις κατευθύνσεις χρησιμοποιώντας τη λειτουργία Draggables. Ας δούμε πώς γίνεται αυτό εδώ.

Οι μπάρες προόδου είναι ένα εξαιρετικό εργαλείο για να ενημερώσετε τον χρήστη για το πόσο μακριά έχει φτάσει σε ένα συγκεκριμένο διαδικαστικό στάδιο. Στη διαδικασία αγοράς σε ένα online κατάστημα, για παράδειγμα, ή σε μια έρευνα, βοηθά τον χρήστη να γνωρίζει πόσο προχώρησε στην ολοκλήρωση των βημάτων.

Σε αυτό το εκπαιδευτικό μάθημα θέλω να επισημάνω σύντομα τα εφέ στο jQuery UI. Υπάρχουν αρκετά ωραία εφέ που επιτρέπουν να κάνεις την ιστοσελίδα σου να φαίνεται ακόμα καλύτερη και επίσης να εντυπωσιάζει εντελώς τους χρήστες σου.

Σε αυτό το βίντεο βλέπεις το αποτέλεσμα της πρόκλησης. Μια σελίδα Συχνών Ερωτήσεων.

Εδώ υλοποιούμε τη σελίδα Συχνών Ερωτήσεων (FAQ).

Σε αυτό το βίντεο παρουσιάζεται το Brain-Game, το οποίο προγραμματίζεται σε αυτό το κεφάλαιο.

Κατ' αρχάς, φροντίζουμε για τη δομή και την εμφάνιση του παιχνιδιού.

Τώρα ασχολούμαστε με μερικές από τις λειτουργίες του παιχνιδιού.

Ο παίκτης μπορεί ήδη να εκτελεί τις πρώτες ενέργειες στο παιχνίδι, τώρα όμως ασχολούμαστε με το να είναι δυνατό να ξεκινάει και να τελειώνει το παιχνίδι.

Τώρα πρόκειται μόνο να ενσωματώσουμε τον χρονομετρητή στο παιχνίδι, ώστε να υπολογιστεί σωστά η βαθμολογία και να περιοριστεί χρονικά το παιχνίδι. Επιπλέον, θα πραγματοποιήσουμε μερικά άλλα μικρότερα βήματα για να ολοκληρώσουμε το παιχνίδι.

Εδώ παρουσιάζεται η εφαρμογή του κεφαλαίου. Πρόκειται για μια εφαρμογή / ιστοσελίδα λίστας εργασιών.

Τώρα θα δημιουργήσουμε τη βάση και θα δούμε πώς μπορούμε να δημιουργήσουμε και να επεξεργαστούμε το αντίστοιχο θέμα με το jQuery Mobile.

Επειδή ακολουθούμε μια προσέγγιση Αντικειμενοστρεφούς Προγραμματισμού, πρέπει να δημιουργήσουμε την αντίστοιχη αρχιτεκτονική. Αυτό είναι κάτι που ασχολούμαστε εδώ.

Σε αυτό το βίντεο προσθέτουμε τις σελίδες και ασχολούμαστε με τη σελίδα όπου δημιουργούμε τις εργασίες.

Παρόμοια με τη σελίδα δημιουργίας λογαριασμού, πρέπει επίσης να γίνει συμπλήρωση της σελίδας επεξεργασίας και να λάβει την αντίστοιχη λειτουργικότητα.

Τώρα μπορούμε να επικεντρωθούμε ξανά στην αρχιτεκτονική και να δημιουργήσουμε τη δομή δεδομένων.

Αφού τώρα έχουμε τη δομή δεδομένων μας, μπορούμε να την καλέσουμε ανάλογα στο UI μας αρκετά εύκολα.

Κατά την προγραμματισμό ήταν απαραίτητα μερικά βήματα στη ροή των εξηγήσεων, τα οποία τώρα μπορούμε να διορθώσουμε. Επιπλέον, ασχολούμαστε με τη μόνιμη αποθήκευση δεδομένων και ολοκληρώνουμε την εφαρμογή.