[Παίζει μουσική] 

DAVID Malan: Αυτό είναι CS50. Αυτή είναι η αρχή του εβδομάδα εννέα. Και αυτό είναι ό, τι θα έπρεπε ήταν 200ά γενέθλια του κ Boole 's. Έτσι, αυτό είναι οι υπότροφοι στους οποίους έχουμε υπαινίχθηκε αρκετά μερικές φορές σχετικά με τη χρήση Μεταβλητές Boolean αληθινό και το ψεύτικο, 1 και 0 και τέτοια. Και αυτό ήταν της Google φόρο τιμής σε αυτόν σήμερα. Θα έχουν γυρίσει 200. Έτσι, αν θέλετε να ελάτε μαζί μας για CS50 το μεσημεριανό γεύμα, ρίξτε μια ματιά στο σύνδεσμο στην ιστοσελίδα του μαθήματος. Και μια τέτοια πρόσωπα και φίλους αυτά σας περιμένουν εδώ στο Καίμπριτζ. Πρόσωπα όπως αυτά σας περιμένουν στο New Haven. Και, στην πραγματικότητα, σε Ken Νιου Χέιβεν ευγενικά έκανε αυτό που ονομάζεται μια κινούμενη εικόνα GIF Eli εδώ σε ένα πρόσφατο lunch-- ένα GIF είναι ακόμα μια άλλη γραφική μορφή αρχείου, με την οποία είστε familiar-- ότι μοιάζει κάπως έτσι. Έτσι απλά μια ακολουθία of-- ΟΚ. Κανείς εδώ στο Cambridge είναι το γέλιο. Αλλά στο New Haven, αυτό Είναι πραγματικά αστείο, έτσι δεν είναι; Εντάξει. 

Έτσι, μην ενωθούν μαζί μας εκεί. Εδώ στο Χάρβαρντ, Συγκεκριμένα, αυτή την Τετάρτη, εάν είστε ένας δευτεροετής φοιτητής πρωτοετής ή even-- ή ακόμα και junior-- σκέψης των αποφάσεων ένας διακόπτης στον υπολογιστή επιστήμη, γνωρίζουμε ότι θα υπάρξει να συμβουλεύει το CS δίκαιη αυτή Τετάρτη, λίγο μετά το μάθημα στις 16:00 μ.μ. στον υπολογιστή επιστήμη κτίριο Maxwell Dworkin. Θα θέσει αυτό από την πορεία του ιστοσελίδα αύριο, όπως καλά. Donuts, μου έχουν πει, θα εξυπηρετούνται. 

Εντάξει. Έτσι αστείο story-- ήμουν σπρώχνει γύρω στο διαδίκτυο, και βρήκα κάποια παλιά αρχεία της πρώην ιστοσελίδας μου. Και αποδεικνύεται out-- γύρω από αυτό ώρα, φαίνεται ότι είναι πολύ επίκαιρη αφού κατάλαβα ότι οι εκλογές UC πρόκειται να επιστρατευθεί ξανά. Γι 'αυτό και έτρεξε για UC, έχασε οικτρά. Και ίσως αυτό ήταν εν μέρει ο λόγος. Έτσι, αυτό ήταν ιστοσελίδα μου εκείνη την εποχή. Για κάποιο λόγο, σκέφτηκα ότι ήταν μια καλή ιδέα, πριν να λέει στους ανθρώπους τι πλατφόρμα μου ήταν και γιατί πρέπει να ψηφίσει για μένα, ότι έχουν να κάνετε κλικ για να εισέλθουν για να ανακαλύψει ότι πληροφορίες, οι οποίες εκ των υστέρων είναι είδος ανατριχιαστικό. Δεν ξέρω πραγματικά τι ήταν αυτό. 

Αλλά σίγουρα δεν το έκανε να βοηθήσει την καμπάνια μου. Βρήκα επίσης ότι από τα ανώτερα year-- Είχα αυτό το ημερολόγιο Muppet. Muppets ήταν το είδος της στη μόδα τότε. Ή ίσως δεν ήταν. Είχα ένα ημερολόγιο Muppet τότε. Και σκέφτηκα ότι θα ήταν δροσερό για το όνομα ο υπολογιστής μου στο δίκτυο του Χάρβαρντ frogman.student.harvard.edu. Εκείνη την εποχή, είχαμε όλοι μοναδικά αναγνωρίσιμα ονόματα κεντρικών υπολογιστών. Και θα μπορούσατε να επιλέξετε κάποια ματαιοδοξία όνομα αντί το δικό σας όνομα. Και πήγα με βατραχανθρώπων για κάποιο λόγο. 

Και τότε started-- Πέρασα πολύ του χρόνου κλικ μέσω αυτών των διασυνδέσεων αυτό το πρωί. Και αυτό ήταν για τη σελίδα μου, η οποία τώρα είδος φαίνεται αξιολάτρευτο. Αλλά επίσης μαρτυρεί μόνο πόσο η τεχνολογία έχει έρθει. Θέλω να πω, πίσω στην ημέρα, 486 ήταν κάτι. Αυτές τις μέρες, είναι σούπερ, σούπερ, σούπερ αργή και λιγότερο καλά από ό, τι μπορεί να έχετε σε σας δική τσέπες αυτές τις μέρες. Υπάρχει περισσότερο εκεί που ήταν ακόμη πιο ενοχλητικό. Γι 'αυτό θα το αφήσουμε εκεί. Αλλά αυτή ήταν η πρώτη μου επιδρομή στο web-- Ω, όχι. Αυτό δεν ήταν. Η πρώτη μου πραγματική επιδρομή στο web προγραμματισμό Ήταν αυτό το site, το οποίο θα ήθελα απλώς ξέχασα. Σε κάποιο σημείο, έμαθα πώς να κάνουν επαναλαμβανόμενες εικόνες φόντου. Και έτσι βρήκα αυτό πλακάκια αποτελεσματική, σαν παίκτης του χόκεϊ, ποδόσφαιρο, γκολφ και μπάλα, ή οτιδήποτε άλλο που είναι για την ιστοσελίδα Frosh ΔΥ. Και αυτό ήταν πραγματικά, πραγματικά η πρώτο web-based πρόγραμμα πήρα on-- Νομίζω ότι ίσως δευτεροετής φοιτητής έτους, junior year-- μετά τη λήψη CS50 και CS51, ένα από τις κοινές κατατάξεις διάδοχο. Παρατήρησα στην αναζήτηση μέσω των αρχείων ότι ένας από τους διαδόχους μου και φίλους, Lee, το είδος του άλλαξε τα πνευματικά δικαιώματα για τον εαυτό του. Αλλά αυτό ήταν πράγματι κάτι που Θα πρέπει να κατέχουν την αμηχανία. Αλλά εκείνη την εποχή, αυτό ήταν η πρώτη ιστοσελίδα, όπως είπα πριν από λίγες εβδομάδες, με την οποία θα μπορούσε καινούριο εγγραφείτε εντός των τειχών του αθλητισμού εδώ. Και έτσι αποδεικνύεται ότι οι εικόνες φόντου όπως ότι δεν είναι και τόσο καλή ιδέα. Αλλά η ιστοσελίδα ήταν νέα, και ήμασταν όλοι πειραματίζονται. Και αυτό είναι ό, τι προφανώς το έκανε εκείνη την εποχή. Εντάξει. Έτσι, χωρίς άλλη καθυστέρηση, θα στραφούν ετοιμάζεται σήμερα να σας δώσω, πραγματικά, το τελευταίο κομμάτι που μπορείτε να βρείτε ιδιαίτερα χρήσιμο για την τελική έργων αλλά επίσης ότι θα αρχίσει να κάνουν όλο το World Wide Web αισθάνονται λίγο πιο κατανοητή. Πράγματι, θα πάμε να εισαγάγει μία ακόμη γλώσσα προγραμματισμού που ονομάζεται JavaScript που είναι παρόμοια και διαφορετικό με διαφορετικούς τρόπους από τις γλώσσες που έχουμε εξετάσει μέχρι σήμερα. 

Έτσι C, ανάκληση, είναι αυτή καταρτίζονται γλώσσα. Έχετε να τρέξει μέσα από ένα μεταγλωττιστή. Μπορείτε να πάρετε τον πηγαίο κώδικα για να αντιταχθούν κώδικα, ή μηδενικά και αυτοί. Και αυτά είναι μηδενικά και αυτοί που CPU σας, Κεντρική Μονάδα Επεξεργασίας, πραγματικά καταλαβαίνουν. PHP, αντίθετα, δεν είναι ένα μεταγλωττισμένο γλώσσα. Είναι ένα τι; Είναι μια ερμηνευμένη γλώσσα. Έτσι, υπάρχει κάποιο πρόγραμμα λέγεται ότι διερμηνέα πρέπει να διαβάσετε επάνω σε it-- κάτω, αριστερά προς right-- και να καταλάβω τι όλα σύνταξη σας κάνει και τα μέσα, είτε πρόκειται για ένα βρόχο ή μια κατάσταση ή οποιοδήποτε άλλο αριθμό προγραμματισμού κατασκευάζει. Έτσι, αυτό είναι μια ερμηνευμένη γλώσσα. 

Στη συνέχεια, εισάγαμε HTML. Και HTML δεν είναι καν γλώσσα προγραμματισμού. Εμείς θα το ονομάζουμε αυτό; Μια γλώσσα σήμανσης, η οποία απέχει μόλις ένα είδος φανταχτερό τρόπο λέγοντας ότι δεν έχει προγραμματιστικές δομές όπως είδαμε ακόμα και πίσω στην ημέρα του Scratch. Δεν υπάρχουν βρόχους. Δεν υπάρχουν προϋποθέσεις. Είναι πραγματικά μια γλώσσα σχετικά με τη σήμανση ασφαλείας των δεδομένων σας και μορφοποίηση ή δόμηση με κάποιο τρόπο. 

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

SQL. Έτσι SQL είναι πράγματι ένας προγραμματισμός γλώσσα κατά κάποιο τρόπο, έστω και προσαρμοσμένα ειδικά για τις βάσεις δεδομένων. Αλλά ακόμα κι αν σας παρουσιάσουμε μόνο επιλέξτε και εισάγετε και να διαγράψετε και να ενημερώσετε και ένα ζευγάρι των άλλων, Βγάζει μπορείτε πραγματικά γράφετε λειτουργίες ή διαδικασιών, δεδομένου ότι είναι κάλεσε, στο SQL που φαίνονται και πράξη αρκετά όπως PHP και C λειτουργιών. Έτσι, γνωρίζουμε ότι αυτοί υπάρχουν. Αλλά δεν κάνουν καν τον κόπο μαζί τους όπως ακριβώς γρατσουνίσει την επιφάνεια εδώ. Και έπειτα το JavaScript, η τελευταία από τις γλώσσες μας παρουσίασε επισήμως. Έτσι JavaScript, πάρα πολύ, είναι μια ερμηνευμένη γλώσσα. Και όσοι είναι εξοικειωμένοι, κάνει Θέλετε να το διακρίνει με κάποιο χαρακτηριστικό τόσο από C και PHP; Αυτό που το καθιστά διαφορετικό; 

Κοινό: Δεν είναι καταρτίζονται. 

DAVID Malan: Πείτε ξανά; 

Κοινό: Δεν είναι καταρτίζονται. 

DAVID Malan: Δεν είναι καταρτίζονται. Έτσι, επίσης, ερμηνεύεται. Έτσι δεν είναι καταρτίζονται. Αλλά αυτό το κάνει λίγο σαν PHP. Αλλά εξακολουθεί να είναι διαφορετική από την PHP σε κάποιο εντυπωσιακό τρόπο, τουλάχιστον με τον τρόπο που θα το χρησιμοποιήσει. Ναι; 

Κοινό: Τρέχει την πλευρά του πελάτη. 

DAVID Malan: Τρέχει client-side, συνήθως. Αυτό είναι πράγματι το διακριτικό χαρακτηριστική για μας τώρα. C ήταν server-side με την έννοια ότι κάναμε τα πάντα σε CS50 IDE. PHP μέχρι στιγμής έχει server-side στο βαθμό καθώς, επίσης, παίρνει interpreted-- δεν καταρτίζονται, αλλά interpreted-- μέσα CS50 IDE, το οποίο φυσικά είναι μόνο ένας server ή των servers στο σύννεφο. 

Αλλά JavaScript, ακόμη και κι αν θα πάμε να αρχίσει να γράφει το για, ας πούμε, το chipset οκτώ και ίσως τελική projects-- είστε πρόκειται να το διορθώσει σε CS50 IDE και να το αποθηκεύσετε σε αρχεία μέσα CS50 IDE, IDE CS50 και, με τη σειρά τους, οι διακομιστές σύννεφο στο οποίο φιλοξενείται, δεν πρόκειται να ερμηνεύσει ή να εκτελέσει κώδικα σας. Μάλλον, πρόκειται να σταλεί αναλλοίωτη μορφή κάτω στο πρόγραμμα περιήγησης. Και είναι τότε πρόκειται να είναι IE ή Chrome ή Firefox ή Safari ή οτιδήποτε άλλο που ερμηνεύει πραγματικότητα αυτό, πάνω προς τα κάτω, αριστερά προς τα δεξιά. Έτσι, το βασικό διακριτικό χαρακτηριστική για σήμερα είναι ότι το JavaScript είναι client-side και PHP, για παράδειγμα, έχει γίνει server-side. Τώρα, αυτό έχει ενδιαφέρουσες επιπτώσεις για, όπως, πνευματικής ιδιοκτησίας και ποιος μπορεί να δει πραγματικά τον κωδικό σας. Και πράγματι, μπορείτε να πάτε στο διαδίκτυο και να δείτε περισσότερα οποιονδήποτε κωδικό που κάποιος έχει γραμμένα σε JavaScript. Μερικές φορές είναι αναγνώσιμα, μερικές φορές είναι ασαφή. Αλλά περισσότερα για αυτό σε εύθετο χρόνο. 

Έτσι JavaScript, αρκετά όμορφα, είναι σούπερ παρόμοια, συντακτικά, σε C. Και μοιάζει πολύ με την PHP, δεν υπάρχει κύρια λειτουργία. Αν θέλετε να ξεκινήσετε το γράψιμο JavaScript κώδικα, όπως θα δείτε σήμερα, μπορείτε απλά να αρχίσετε να γράφετε. Αλλά είναι, θα δείτε, ιδίως χρήσιμα στο πλαίσιο των web browsers. Ωστόσο, λίγο μου disclaimer-- συνήθως earlier-- ήταν να πω ότι μπορείτε ολοένα σήμερα το JavaScript χρήση server-side χρησιμοποιώντας ένα φανταχτερό πλαίσιο που ονομάζεται Node.js ότι ορισμένες από τις δικές της εφαρμογές του CS50 είναι γραμμένα σε. Ελέγξτε το 50 πράγματι χρησιμοποιεί Node.js. Αλλά θα πάμε να επικεντρωθεί στην Το JavaScript πλευρά του πελάτη εδώ και στο εξής. 

Έτσι, εδώ είναι ένα σύνολο συνθηκών στην PHP. Λυπούμαστε, in-- στην πραγματικότητα, ότι δήλωση, πάρα πολύ είναι σωστή. Εδώ είναι, επίσης, μια σειρά από συνθήκες σε JavaScript. Συντακτικά, είναι ταυτόσημη με C και σε PHP. Εκφράσεις του κ Boole είναι, Ομοίως, συντακτικά ταυτόσημη με δύο C και PHP. Έχουμε επίσης τους διακόπτες σε JavaScript που φαίνονται ίδια. Έχουμε για βρόχους που είναι δομημένη με τον ίδιο τρόπο, while loops, κάνει, ενώ βρόχους. 

Αυτό και μόνο είναι λίγο διαφορετικό. PHP είχε η κάθε κατασκεύασμα ότι μπορεί να χρησιμοποιείτε ή θα χρησιμοποιήσει το chipset σε επτά, ίσως. JavaScript έχει αυτή την ειδική έκδοση του για όπου μπορείτε κυριολεκτικά να πω κάτι όπως για τη μεταβλητή κλειδί στο αντικείμενο, το οποίο είναι ένα πολύ συνοπτικό τρόπο λέγοντας, αν έχω και ένα αντικείμενο και θα μιλήσουμε για αυτά και πάλι σε μια moment-- και θέλω να επαναλάβετε σε όλους από τα βασικά ζεύγη τιμών στο εσωτερικό, Δεν έχω να καταλάβω πώς να αριθμητικά δείκτη τους με μηδέν, ένα, δύο, τρία. 

Μπορώ να πω κυριολεκτικά αυτό. Και σε κάθε επανάληψη, το JavaScript για μένα θα ενημερώσετε τη μεταβλητή κλειδί να είναι το πρώτο κλειδί, τότε το επόμενο κλειδί, τότε το επόμενο κλειδί, τότε το επόμενο κλειδί, και ούτω καθεξής. Και μπορώ να πάρω με την αξία τους από τη θεραπεία ένα αντικείμενο σε JavaScript, όπως θα δούμε, σαν να είναι ένα associative πίνακα στην PHP. Πράγματι, αν τελικά τυλιγμένο σας νου γύρω από ό, τι μια συνειρμική σειρά είναι σε PHP, μπορείτε να σκεφτείτε ότι για το παρόν ταυτόσημη με ένα αντικείμενο σε JavaScript. Αλλά αυτό είναι ένα κομμάτι της μια υπεραπλούστευση. 

Πίνακες δούμε, αρκετά όμορφα, πανομοιότυπα στην PHP εκτός από ένα χαρακτήρα. Υπάρχει ένα πράγμα που λείπει εδώ ότι είδαμε την περασμένη εβδομάδα με την PHP. Τι παραλείπεται; Ναι; Δεν το σύμβολο του δολαρίου. Έτσι, είμαστε πίσω σε μια πιο κανονικό κόσμο, όπου μεταβλητές δεν έχουν το σύμβολο του δολαρίου. Αλλά κάνετε πρόθεμα τους με var, συνήθως. Και var σημαίνει μεταβλητή. Και σαν PHP είναι χαλαρά typed-- όπου υπάρχουν είδη, υπάρχουν αριθμοί και συμβολοσειρές και άρματα και έτσι forth-- JavaScript έχει παρόμοια είδη. Αλλά είναι χαλαρά πληκτρολογήσει στο ότι η οι προγραμματιστές δεν χρειάζεται να τις προσδιορίσει. Εμείς απλά πρέπει να γνωρίζουμε ότι υπάρχουν διαφορετικοί τύποι. 

Μεταβλητές, meanwhile-- εδώ είναι το πώς μπορούμε να δηλώσουμε "Γεια σου, κόσμε" ως ένα string. Παρατηρήστε ότι είναι ταυτόσημη με PHP αλλά όχι το σύμβολο του δολαρίου. Και αυτό είναι κάτι που θα να αρχίσουμε να βλέπουμε περισσότερο σήμερα, σύμφωνα με την οποία έχετε ένα αντικείμενο με τα πλήκτρα και τις αξίες. Και αν θέλετε να δοκιμάσετε να συναχθεί από την τελευταία week-- η σύνταξη είναι λίγο διαφορετική. Αλλά λίγο λογική check-- πόσες πλήκτρα κάνει αυτό το αντικείμενο φαίνεται να έχει; Έτσι βλέπω τέσσερις. Βλέπω δύο. 

Έτσι είναι στην πραγματικότητα δύο. Έτσι, αυτό είναι μια συλλογή δύο ζεύγη κλειδιού-τιμής. Το κλειδί είναι το σύμβολο του οποίου η αξία είναι FB. Το κλειδί είναι η τιμή των οποίων η αξία είναι 101,53. Αυτά λοιπόν είναι τα δύο ζεύγη κλειδιού-τιμής. Και να θυμάστε, PHP-- και αυτό είναι και πάλι ακριβώς το είδος των συντακτικών διαφορά. Δεν είναι ό, τι πνευματικά ενδιαφέροντα. PHP θα μπορούσε να γράψει αυτό το ίδιο πράγμα όπως follows-- απόσπασμα, ισούται με. Και μπορώ να αλλάξω αυτά να αγκύλες. Και στη συνέχεια να το αλλάξω αυτό να εισηγμένη στο χρηματιστήριο λέξη, "τιμή". Και τότε εγώ δεν χρησιμοποιούν άνω και κάτω τελεία. Τι έκανα χρησιμοποιήσετε την περασμένη εβδομάδα; Ναι, το σύμβολο του ίσον arrow funky σημειογραφία. 

Και τότε έκανα το ίδιο πράγμα εδώ. Ίδιο πράγμα εδώ. Και αυτό είναι όλο. Γι 'αυτό είναι καλό, αν και αυτό δεν έχει πραγματικά βυθίστηκε σε μόλις στη μνήμη αλλά γιατί είναι πραγματικά πνευματικά πληκτικός. Είναι απλά συντακτικές διαφορές. Αλλά οι ιδέες είναι ακριβώς το ίδιο. Μέσα από αυτή τη μεταβλητή παραθέτω σε JavaScript είναι μια συλλογή από ζεύγη κλειδιού-τιμής, ένα από τα οποία είναι το σύμβολο, ένα εκ των οποίων είναι η τιμή. Και μπορώ να πάρω σε αυτές τις αξίες με την ακόλουθη σύνταξη. Ακριβώς όπως και στην PHP, θα μπορούσα κάνει κάτι ας like-- Θέλω να κάνω αυτό το παράθυρο λίγο μεγαλύτερο. Ακριβώς όπως και στην PHP, θα μπορούσα κάνουν this-- Ω, ρε. Ελα. 

Ακριβώς όπως και στην PHP-- Εντάξει, θα απλά χρησιμοποιήστε τις σημειώσεις παρουσιαστή. Ακριβώς όπως και στην PHP, μπορώ κάνει quote ["σύμβολο"] $ $ απόσπασμα, και αυτό θα μου πάρει Η τιμή του "σύμβολο". Σε JavaScript, πρόκειται να είναι πανομοιότυπα, οπότε μπορώ να κάνω ακριβώς αυτό. Το μόνο πράγμα που είναι λείπει είναι το σύμβολο του δολαρίου. 

Έτσι αρκετά καλά, στη συνέχεια, υπάρχει δεν είναι όλα τόσο πολύ νέα σύνταξη. Έτσι, αυτό που σήμερα θα επικεντρωθεί στην, πραγματικά, είναι μερικές από τις ιδέες και τις εφαρμογές. Και η πρώτη τέτοια εφαρμογή που μπορεί να έχω δει αν βούτηξε το chipset επτά είναι ήδη αυτή η σύνταξη. Έτσι, σε επτά το chipset, αν έχετε δει ή δεν έχουμε δει ακόμα, Γνωρίζουμε ότι υπάρχει ένα αρχείο που δίνουμε καλέσατε config.json-- JavaScript Αντικείμενο σημειογραφία. Γιατί; Θέλαμε να είναι σε θέση να σας παρέχουμε ένα πρότυπο με ορισμένα ζεύγη κλειδιού-τιμής. Θέλαμε να είναι σε θέση να σας δώσει μια λίστα του ξενιστή, το όνομα του διακομιστή. Θα ήθελα να σας δώσω μια σύμβολο κράτησης θέσης για το όνομα χρήστη σας και ένα σύμβολο κράτησης θέσης για τον κωδικό πρόσβασής σας. Εάν δεν βλέπετε αυτό ακόμα, για να μην ανησυχείτε. Περισσότερα για αυτό το chipset επτά [? spec. ?] Και μετά, Προφανώς, σας θέλουμε να συμπληρώσετε το να-DOS γιατί όταν συνδέεστε στο CS50 IDE, καθένας από εσάς έχετε το δικό σας όνομα χρήστη και τον κωδικό πρόσβασης. 

Έτσι θα μπορούσαμε να έχουμε χρησιμοποιείται μισή ντουζίνα ή περισσότερες διαφορετικές μορφές αρχείων. Θα μπορούσε να χρησιμοποιήσει ένα αρχείο .txt. Θα μπορούσαμε να χρησιμοποιείται ένα αρχείο CSV. Θα μπορούσαμε να έχουμε χρησιμοποιείται INI αρχείο, ένα αρχείο XML, ένα σωρό πιο ακρωνύμια ότι μπορεί να μην έχετε ακούσει ποτέ. Είναι το είδος της αυθαίρετης στο τέλος της μέρας. Αλλά σούπερ δημοφιλής αυτές τις μέρες είναι ένα κείμενο μορφή που ονομάζεται JSON-- JavaScript Αντικείμενο Notation-- ότι μοιάζει με αυτό. Είναι ένα μικρό κρυπτικό, αλλά παρατηρείτε τα μοτίβα. Μπορείτε να ξεκινήσετε με μια ανοικτή σγουρά τιράντες, και θα καταλήξουμε με την ίδια. Μέσα από αυτό είναι κάτι. Είναι ένα ζεύγος κλειδιού-τιμής. Έτσι, αυτό είναι ένα αντικείμενο που είμαι κοιτάζοντας στην οθόνη εδώ ότι έχει ένα κλειδί, το οποίο έχει μία αξία. Και ακριβώς συναχθεί με βάση το προηγούμενο μοντέλο, αυτό είναι το κλειδί εδώ; Βάση δεδομένων, το πράγμα που πρέπει να το αριστερό του παχέος εντέρου. 

Τώρα, η τιμή συμβαίνει να είναι a πολλαπλές γραμμές αυτή τη φορά. Αλλά η τιμή ξεκινά με σγουρά Προετοιμαστείτε και τελειώνει με σγουρά στήριγμα. Λοιπόν, τι θα προτείνατε είναι η τύπος της αξίας της βάσης δεδομένων; Ένα λεξικό ή, πιο απλά συνοπτικά, ένα αντικείμενο. Σωστά; Αυτό είναι το είδος της μια δομή δεδομένων που μπορούν να χρησιμοποιήσουν άλλες δομές μέσα στην ίδια. Έτσι, αν όλο αυτό το πράγμα είμαστε καλώντας και ένα αντικείμενο και ένα αντικείμενο είναι απλώς ένα μάτσο κλειδιού-τιμής pairs-- η αξία της ίδιας της βάσης δεδομένων είναι ένα αντικείμενο. Η αξία της βάσης δεδομένων έχει ένα σωρό βασικών ζευγών αξίας, η πρώτη εκ των οποίων είναι οικοδεσπότης, στη συνέχεια, το όνομα, στη συνέχεια, το όνομα χρήστη, τον κωδικό πρόσβασης, στη συνέχεια, καθένας εκ των οποίων οι τιμές, εν τω μεταξύ, είναι απλά μια βαρετή σειρά σε διπλά εισαγωγικά. 

Έτσι, ακόμη και αν αυτό δεν είναι σούπερ σαφές ακριβώς ακόμα, Γνωρίζουμε ότι αυτό είναι μόνο ένα πρότυπο, αρκετά βαρετό τρόπο αποθήκευσης δεδομένων σε τυποποιημένη μορφή. Αλλά τα κοινά λάθη που θα μπορούσε να κάνει, ακόμα και στις επτά το chipset, είναι λίγο ηλίθια πράγματα, όπως αν κατά λάθος παραλείψετε το κόμμα εκεί. Αυτό πρόκειται να οδηγήσει στο αρχείο όχι κατ 'ανάγκη να είναι αναγνώσιμο. Αν κατά λάθος παραλείψετε τα πράγματα όπως η εισαγωγικά, δεν πρόκειται να είναι αναγνώσιμα. Έτσι είναι μια αρκετά nitpicky μορφή αρχείου, αλλά είναι αυτός που είναι εξαιρετικά συχνή. Και τυχαίνει να το χρησιμοποιήσετε, έστω και αν που δεν χρησιμοποιούν καμία JavaScript διαφορετικά, PSET σε επτά. 

Εντάξει. Έτσι θυμηθείτε αυτή την εικόνα. Μιλήσαμε για, στην HTML, ότι ο κώδικας θα μπορούσε να μοιάζει με αυτό. Αυτή είναι η HyperText Markup Language [Δεν ακούγεται] για απλά "γειά σου, τον κόσμο." Στη συνέχεια, όμως προτείναμε ένα ενώ πίσω ότι αν αυτό βοηθάει, ίσως να θέλετε να αρχίσουμε να σκεφτόμαστε σχετικά με αυτό που ήδη, όπως ένα δέντρο. Στην πραγματικότητα, η οδόντωση ότι εμείς χρησιμοποιείτε μόνο για το καλό της αναγνωσιμότητας ή για λόγους ύφους για η αριστερά να το είδος του να μεταφραστεί σε αυτό το δέντρο, όπου μπορείτε έχετε κάποιο ειδικό κόμβο-ρίζα ότι θα γενικά ονομάζεται έγγραφο, κάτω από το οποίο είναι το στοιχείο ρίζας ή HTML ετικέτα, HTML, η οποία στη συνέχεια έχει δύο παιδιά, το κεφάλι και το σώμα. 

Και στη συνέχεια, με τη σειρά του, το κεφάλι έχει έναν τίτλο. Και τίτλος έχει μια τιμή κειμένου. Και το σώμα έχει ομοίως μια τιμή κειμένου. Έτσι, εάν είστε άνετοι ρητό ότι ναι, θα μπορούσατε να πάρετε αυτό το HTML και να σχεδιάσετε μια εικόνα σαν αυτό, η δεξιά πλευρά Είναι ένα ωραίο νοητικού μοντέλου, διότι τώρα ότι έχουμε το JavaScript, ένας προγραμματισμός γλώσσα που browsers μπορεί να εκτελούν και να ερμηνεύουν για σας, αποδεικνύεται ότι αυτό που είμαστε έτοιμοι να κάνουμε τον κωδικό έχει αρχίσει να χειραγωγήσουν αυτό δομή δέντρου στη μνήμη. Δεν έχουμε να οικοδομήσουμε το δέντρο στη μνήμη. Δεν έχουμε να κάνουμε είδος δομή δεδομένων PSET-πέντε-style πολυπλοκότητα. Το πρόγραμμα περιήγησης, αρκετά όμορφα, κατόπιν ερμηνεία HTML πάνω προς τα κάτω, αριστερά ή δεξιά, είναι κυριολεκτικά πρόκειται να το χέρι μας το ισοδύναμο ενός δείκτη για το ολόκληρο το δέντρο για δωρεάν. Αυτό κάνει όλη τη σκληρή δουλειά. Αυτό είναι ό, τι Mozilla και η Apple και άλλοι έχουν κάνει για μας. 

Και με JavaScript θα πάμε να να είναι σε θέση να ελέγχουν και να αλλάξετε και να κάνουμε ενδιαφέροντα πράγματα να αυτό το δέντρο, αλλιώς γνωστή ως DOM ή Document Object Model. Τι είδους πράγματα; Λοιπόν, αποδεικνύεται ότι σε JavaScript, υπάρχει Αυτό κατάλογο πλυντηρίων γεγονότα που μπορεί να λάβει χώρα. Και δεν έχουμε πραγματικά ότι χρησιμοποιήθηκε λέξη από το μηδέν εβδομάδα και το chipset μηδέν, όταν μιλήσαμε για το μηδέν. Οι περισσότεροι από εσάς ίσως δεν χρησιμοποιείτε ένα γεγονός στο έργο σας στο Ξυστό. Αλλά μπορείτε να ανακαλέσετε η απλή Marco Polo παράδειγμα, όπου είχαμε δύο ξωτικά, ένας από τους οποίους είπε ο Μάρκος. Το άλλο εκ των οποίων στη συνέχεια, κατόπιν ακρόασης και να ακούει αυτή τη περίπτωση, είπε, Polo. Αν όχι, μην διστάσετε να κοιτάξουμε πίσω τόσο μακριά πίσω. 

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

Για παράδειγμα, εάν χρησιμοποιείτε το Google Maps, τι θα συμβεί αν κάνετε κλικ και κίνηση το ποντίκι, συνήθως; Εάν κάνετε κλικ και να σύρετε; Ναι; Ακριβώς. Ο χάρτης αρχίζει να κινείται. Έτσι, μπορείτε να ταξινομήσετε του να δούμε τι είναι εδώ, ό, τι είναι εκεί πέρα. Και πώς το Google να εφαρμόσουν αυτό; Λοιπόν, προφανώς, είναι χρησιμοποιώντας ένα ζευγάρι από αυτά τα event ακροατές, μια που λέει, να ακούσετε στο ποντίκι down-- έτσι ώστε όταν ο χρήστης σωματικά ωθεί trackpad του ή του ποντικιού ή της προς τα κάτω. Και τότε ψάχνουμε κάτι σαν κίνημα ή κάποιο άλλο γεγονός ότι μας επιτρέπει να συλλάβει οπισθέλκουσας. Και στην πραγματικότητα, drag είναι παρόμοια σε αυτό dot dot dot λίστα των πιθανών επιλογών. 

Έτσι, αυτό πρόκειται να είναι ένα ισχυρό τρόπος για να ξεκινήσει να ανταποκρίνεται προς τον χρήστη ακόμα και πριν αυτός ή αυτή κάνει κλικ κάτι σαν υποβάλει ρητή. Αλλά θα πάμε να εισαγάγει ένα ζευγάρι θέματα για να φτάσει εκεί. Αλλά πρώτα, ας μετάβαση σε κάποιο πραγματικό κώδικα. Έτσι, Πάω να πάει μπροστά και να ανοίξει dom-0, το οποίο είναι ένα πολύ απλό παράδειγμα εδώ ότι αν απλά μεγέθυνση έχει αυτή την είσοδο εδώ για μένα. Και Πάω να πάει μπροστά και πληκτρολογήστε «Δαβίδ» για το όνομά μου και κάντε κλικ στην επιλογή Υποβολή. 

Και τότε, αν και το είδος της φτηνά, έχω έχουν αυτό το μήνυμα που σκάει επάνω που λέει, "Γεια σας, David!" Έτσι, αυτό είναι το είδος του όπως μας "Γεια σου, κόσμε" ότι κάναμε λίγο πίσω σε C και ακόμη και σε PHP επειδή έχω δυναμικά εξάγεται το όνομά μου. Μπορώ να κάνω το όνομα κάποιου άλλου εδώ. Θα μπορούσα απλά να αλλάξει αυτό, όπως, Hannah, κάντε κλικ στην επιλογή Υποβολή. Και πράγματι, τα μικρά pop-up αλλαγές. 

Τώρα, pop-ups είναι ένα από τα πιο κακοποιημένα χαρακτηριστικά του ιστού. Και στην πραγματικότητα, πίσω στο τα pop-up blockers ημέρα τέθηκε σε μόδα, γιατί θα πήγαινε σε κάποιο website-- ίσως μια αμφισβητήσιμη place-- ότι θα ήταν τότε ξαφνικά ξεκινήστε peppering οθόνη σας με ένα σωρό από τα pop-ups. Και έτσι αυτή η ικανότητα να αναδυθεί παράθυρα μπροστά του χρήστη δεν ήταν ιδιαίτερα καλά-που ελήφθη από την ανθρωπότητα. Έτσι, γι 'αυτό που βλέπετε Αυτό εμποδίζει το πράγμα, το οποίο ακριβώς κάνει όλο αυτό το πράγμα άσχημο. Έτσι θα πάμε να χρειάζονται καλύτερος τρόπος για να ζητήσει από το χρήστη. Αλλά για τώρα, αυτό φαίνεται να λειτουργεί. Έτσι απλά διαισθητικά, τι φαίνεται να συμβαίνει εδώ; Έχω προχωρήσει και κάντε κλικ στο κουμπί Υποβολή, και τότε κάτι συμβαίνει, προφανώς. Αλλά αυτό δεν συμβαίνει ότι συνέβη την περασμένη εβδομάδα, κάθε φορά που κάνετε κλικ Υποβολή; Τι δεν συνέβη στην οθόνη; Συγνώμη; Ανανέωση της. Η διεύθυνση URL δεν άλλαξε καθόλου. Το είπα αυτό ήταν dom-0, και είμαι ακόμα στο Dom-0. Κανονικά, θα ήθελα να αλλάξει σε κάποιο άλλο URL, όπως register.php ή τα παρόμοια. 

Αλλά ακόμα και όταν έχω απορρίψει αυτό το πράγμα με κλικ στο OK, Παρατηρήστε ότι η διεύθυνση URL μένει θέσει εντελώς. Και, στην πραγματικότητα, αν είμαι λίγο δύσπιστος, επιτρέψτε μου να ανοίξει Chrome. Επιτρέψτε μου να ανοίξει την καρτέλα Δίκτυο. Και παρατηρήσετε ότι είναι κενές αυτή τη στιγμή. Επιτρέψτε μου να προχωρήσει και να υποβάλει εκ νέου την Μαρία. Δεν υπάρχει καμία απολύτως κίνηση στο δίκτυο. Έτσι δεν υπάρχει καμία HTTP. 

Έτσι, πράγματι, αν κοιτάξουμε τον πηγαίο κώδικα για this-- επιτρέψτε μου να κλείσετε αυτό το παράθυρο και πηγαίνετε στο View Source. Ενδιαφέρουσες. Μοιάζει υπάρχει κάποια νέες ετικέτες, μεταξύ των οποίων και το σενάριο. Έτσι, ας ρίξουμε μια ματιά στο εσωτερικό CS50 IDE ακριβώς αυτό που αποστέλλεται στο χρήστη. 

Έτσι, εδώ is-- ας επικεντρωθεί μόνο στην HTML. Εδώ είναι το κάτω μισό του dom-0.html. Και παρατηρήσετε ότι πήρε έναν τίτλο, μια ετικέτα κεφάλι, μια ετικέτα σώμα, μια ετικέτα μορφή. Αλλά τι πηδά έξω σε σας ως διαφορετικά, ειδικά αν έχετε ποτέ γραπτή οποιαδήποτε JavaScript στον εαυτό σας. Επιτρέψτε μου να μετακινηθείτε λίγο προς τα δεξιά εδώ. Έχω μια είσοδο, άλλη μία εισροή για την υποβολή. Έχω ένα αναγνωριστικό, το οποίο είναι το είδος των νέων. Αλλά δεν είχαμε δει αυτό με CSS. Τι άλλο είναι σίγουρα καινούργιο; Ναι; Νίκαιας. 

Εντάξει. Έτσι, εκεί που λέει onsubmit, παρατηρήστε τι φαίνεται να ακολουθεί. Αυτό είναι ένα χαρακτηριστικό στην ονοματολογία HTML. Η αξία της είναι αυτή η συμβολοσειρά εδώ. Και αυτό φαίνεται λίγο παράξενο με την πρώτη ματιά. Δεν είναι HTML. Δεν είναι CSS. Αυτό είναι, όπως μπορείτε να μαντέψετε, το JavaScript. Φαίνεται, λοιπόν, ότι αυτή η ενσωματωμένη Η ιστοσελίδα είναι μια λειτουργία που ονομάζεται χαιρετήσει. Και είμαι συμπεραίνοντας ότι ακριβώς γιατί είναι μια λέξη, χαιρετήσει. Είναι πήρε μια ανοιχτή παρένθεσης, κλείσιμο παρένθεσης, ερωτηματικό. Μοιάζει με μια συνάρτηση C, μοιάζει με ένα PHP λειτουργία. 

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

Έτσι σε JavaScript, απλά όπως PHP, απλά ας πούμε, στην κυριολεξία, η λέξη «λειτουργία», το όνομα της συνάρτησης, και στη συνέχεια παρενθέσεις με οποιαδήποτε arguments-- κανένα επιχείρημα σε αυτή την περίπτωση. Και δεν υπάρχει κανένας τύπος επιστροφής σε JavaScript, ακριβώς όπως PHP. Έτσι είναι πιο χαλαρή λίγο από το C. Ανοίξτε σγουρά στήριγμα, κοντά σγουρά στήριγμα. Χτισμένο σε JavaScript είναι μια function-- Δεν συνιστάται η function-- αλλά μια λειτουργία που ονομάζεται ειδοποίησης των οποίων μοναδικός σκοπός στη ζωή είναι να σηκώσει αυτό το πολύ άσχημο προτρέψει που είδαμε πριν από λίγο. 

Τώρα αυτό είναι το είδος της μια μπουκιά. Τι συμβαίνει εδώ? Ας αρχίσουμε λοιπόν να επισημάνετε τα πάντα εδώ. Αυτό είναι το ίδιο επιχείρημα για να προειδοποιήσει. Και τι συμβαίνει; Αυτό μοιάζει με ένα κορδόνι. Και αποδεικνύεται, σε αντίθεση με PHP και αντίθετα C, δεν έχει σημασία σε JavaScript αν μονά εισαγωγικά ή διπλά εισαγωγικά. Θα είναι ισοδύναμες. Και ειλικρινά, είναι ακριβώς δημοφιλής αυτές τις μέρες για JavaScript προγραμματιστές να είναι πάντα Χρησιμοποιήστε μονά εισαγωγικά για κάποιο λόγο. Είναι ακριβώς το πράγμα που πρέπει να κάνουμε. Αλλά θα μπορούσαμε να χρησιμοποιήσουμε διπλά εισαγωγικά, όπως καλά. 

Έτσι, καθώς είναι ένα νέο χαρακτήρα. Αλλά όσοι από εσάς έχετε κάνει πριν από αυτό, τι σημαίνει συν; Ναι. Ενώσετε. Έτσι είδαμε αυτό στην PHP. Υπάρχει μόνο η τελεία χειριστή σε PHP που θα ενώσετε δύο συμβολοσειρές. C ήταν ένας πόνος στο λαιμό για να γίνει αυτό. Ανάκληση από το chipset έξι, που ήταν Ένα ιδιαίτερο πόνος στο λαιμό, θα πρέπει να χρησιμοποιήσετε κάτι σαν strcat μετά την κατανομή της μνήμης στη στοίβα ή του σωρού. Θα έπρεπε να πηδούν μέσα από στεφάνες ακριβώς για να ενώσετε δύο strings. Σε JavaScript, είναι εξαιρετικά απλή. Απλά χρησιμοποιήστε το χειριστή καθώς και μεταξύ τους. 

Έτσι, το συγκρότημα εμφάνιση πράγμα φαίνεται να είναι αυτό επειδή κατά το τέλος της όλο αυτό το string, θα ήθελα απλώς ενώσετε σε ένα θαυμαστικό. Έτσι, αν αυτό που ξεφυτρώνουν ήταν "Γεια σας, Ντέιβιντ», «γειά σου, Hannah," "Γεια σας, Μαρία," και ούτω καθεξής, με σαφήνεια ότι το πράγμα μέση μεταξύ των δύο συν πρέπει να μου δώσει πρόσβαση σε ό, τι; Τι είναι εκεί για σίγουρος; Ναι. Γι 'αυτό θα προσποιείται ότι εδώ η απαντήσει το όνομά τους, έτσι δεν είναι; Έτσι το όνομά τους έσκασε επάνω στον τελικό αποτέλεσμα. Λοιπόν, τι σημαίνει αυτό; Λοιπόν, πρότεινα νωρίτερα από το γεγονός ότι εικόνα που η λεγόμενη DOM έχει αυτό το ιδιαίτερο στοιχείο ρίζας τρόπο επάνω στην κορυφή που ονομάζεται έγγραφο. Και τώρα, αποδεικνύεται, ότι πρόκειται να είναι μια ειδική global μεταβλητή σε JavaScript, ενσωματωμένο μέσα στην οποία ένα σωρό από χρήσιμες λειτουργίες. Μεταξύ των χρήσιμων λειτουργικότητα είναι η ικανότητα να πάρει σε κάθε κόμβο απόγονο. Αυτά τα τετράγωνα ή παραλληλόγραμμα ή ελλείψεις είναι μόνο οι κόμβοι σε ένα δέντρο, να το πω έτσι. 

Έτσι αποδεικνύεται ότι η ενσωματωμένη Αντικειμένου εγγράφου της Javascript είναι μια λειτουργία, αλλιώς γνωστή ως μέθοδος, που ονομάζεται getElementById. Η σύνταξη για την κλήση μια λειτουργία JavaScript ότι είναι μέσα από ένα αντικείμενο ή ένα μεταβλητή είναι ακριβώς με τον συμβολισμό με την τελεία. Και είδαμε αυτό σε C ποια είναι η σύνταξη struct. Μπορείτε να δείτε αυτό το chipset επτά, το είδος, είδος, όταν βλέπεις CS50 :: ερώτημα. Η άνω και κάτω τελεία άνω και κάτω τελεία στην PHP είναι μια άλλη τρόπος καλώντας μια λειτουργία που είναι στο εσωτερικό του κάποιο αντικείμενο. 

Αλλά για τώρα JavaScript, είναι απλά μια κουκίδα. Και έτσι αυτή η λειτουργία, αρκετά ωραία, το είδος του λέει ό, τι does-- πάρει στοιχείο με ID. Ένα στοιχείο είναι ακριβώς ένα άλλο όνομα για μια ετικέτα ή κόμβο στο DOM. Και έτσι ώστε να πάρετε το στοιχείο με ID "όνομα" σημαίνει this-- εδώ είναι HTML μου. Και που βασίζονται στο παρόν HTML, τι κόμβου ή ποια ετικέτα HTML είμαι Θα προγραμματισμού να παραδοθεί καλώντας document.getElementById; 

Ναι, ακριβώς. Πάω να πάρει την είσοδο στοιχείο του οποίου η ταυτότητα δεν είναι "όνομα". Έτσι, συγκεκριμένα, μπορείτε να σκέφτομαι αυτή τη λειτουργία, getElementById, ως ένας τρόπος για να δώσει υποστηρίξει ένα δείκτη στο συγκεκριμένο κόμβο στο δέντρο. Δεν έχουμε καταλήξει αυτό δέντρο, αλλά είναι ένας τρόπος να πάρει την πρόσβαση σε αυτό ορθογώνιο ή το ορθογώνιο με μοναδικό τρόπο τις οποίες θα προσδιορίζονται μέσω της ταυτότητας του. 

Τώρα, γιατί είναι αυτό χρήσιμο; Λοιπόν, αποδεικνύεται ότι από τη στιγμή που έχετε πάρει ότι κόμβο, το ορθογώνιο αυτό από το εικόνα, ότι ο κόμβος στο εσωτερικό του, με τη σειρά του, έχει ένα σωρό properties-- ζευγάρια κλειδί-τιμή ή δεδομένων, μία από τις οποίες λέγεται αξία. Έτσι κυριολεκτικά, είναι το είδος της μια μπουκιά για να εξηγήσει το όλο θέμα. Αλλά στο τέλος της ημέρας, όλα αυτά που κάνει είναι να σας δώσει μια σειρά που ο χρήστης πληκτρολογήσει σε αυτό το ιεραρχικό τρόπο. Αλλά δεν μου αρέσει ένα ζευγάρι από αυτά τα πράγματα. Ή μάλλον, δεν υπάρχει κάποια περιέργεια ακόμα. Όλα αυτά φάνηκε να λειτουργεί. Γιατί νομίζεις ότι επέστρεψε ψευδείς μετά την κλήση χαιρετήσει; Αυτό φαίνεται λίγο άσχημο, ότι Έχω δύο καταστάσεις εκεί διαχωρίζονται με ερωτηματικά. Μάντεψε. Αν έχω απομακρυνθεί return false, τι μπορεί να συμβεί, μόλις ενστικτωδώς; Λυπούμαστε, λένε πάλι; 

Ανοίξτε μια δέσμη των Windows. Έτσι, ίσως κάτι δυνητικά όπως αυτό θα μπορούσε να συμβεί. Τι άλλο? Μπορεί να υποβάλει αίτηση πού; Στην ίδια σελίδα. Έτσι, στην πραγματικότητα, αυτό είναι ότι η στενότερη απαντήσει εδώ, ακόμη και αν, σε αντίθεση με στο παρελθόν, δεν έχω προσδιορίζεται το χαρακτηριστικό δράση, τα οποία κανονικά πρέπει να κάνουμε. Βγάζει υπάρχει μια προεπιλογή. Αν δεν ορίσετε δράσης, Είναι σαν να λέμε απόσπασμα, unquote ή το όνομα του ίδιου του αρχείου, το οποίο στην περίπτωση αυτή θα είναι σαν dom-0.html. Είναι ακριβώς το είδος της συνάγεται, ή μάλλον υπονοείται. 

Και έτσι αν δεν το κάνουμε αυτό, ας προσέξει. Επιτρέψτε μου να σώσει αυτό. Και έχω απομακρυνθεί επιστροφή ψευδείς. Επιτρέψτε μου να πάω πίσω σε αυτό παράδειγμα και να την αναγκάσει να φορτώσετε εκ νέου. Και μπορεί να έχετε δει μου να προτείνω αυτό σε CS50 Συζητήστε ένα σωρό φορές. Αν μη τι άλλο είναι ποτέ ενεργεί funky και η πρόγραμμα περιήγησης δεν συμπεριφέρεται όπως θα περίμενε κανείς, πολλές φορές θα θέλετε να κρατήσετε Shift και κάντε κλικ στο Ανανέωση. Αυτό θα αναγκάσει κάθε αρχείο για να φορτώσετε και να μην χρησιμοποιούν την τοπική μνήμη cache του προγράμματος περιήγησης ή αντίγραφο έτσι ώστε τώρα, επιτρέψτε μου να προχωρήσει και ανοίξει Επιθεωρητής μου, στην καρτέλα Δίκτυο. Πάω να κάνετε κλικ Διατηρήστε Σύνδεση γιατί Δεν θέλω να διαγράψετε τις γραμμές Μόλις πάρω ελαφρά μακριά αλλού. 

Επιτρέψτε μου να προχωρήσει εδώ και πληκτρολογήστε Andi, κάντε κλικ στην επιλογή Υποβολή. Εντάξει. Αυτό φαίνεται όπως αναμενόταν. Λέει «γειά σου, Άντι." Επιτρέψτε μου να κάντε κλικ στο OK. Ενδιαφέρουσες. Παρατηρήστε ότι η σελίδα άλλαξε, αν και στην αρχική σελίδα. Ανακοίνωση για το είδος της μεταβολής των URL. Πρόσθεσε ένα ερωτηματικό, το οποίο είναι συνήθως ένας δείκτης ότι προσπαθήσαμε να υποβάλει κάτι. Και στη συνέχεια στο κάτω μέρος, γίνεται ακόμη πιο σαφής, εδώ είναι το πραγματικό αίτημα HTTP, η οποία πήρε μια απάντηση 200, ότι με έφερε πίσω εδώ. 

Έτσι, αυτό δεν είναι ό, τι θέλουμε να κάνουμε, σωστά; Επειδή δεν θέλω να reload ολόκληρη τη σελίδα. Θα αντί ήθελε να επιστρέψει ψευδής έτσι ώστε να βραχυκύκλωμα προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης, η οποία Ήταν, βέβαια, να υποβάλουν τη σελίδα. 

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

Κοινό: [δεν ακούγεται]. DAVID Malan: Ναι. Έτσι, η συνάρτηση ορίζεται differently-- Με άλλα λόγια, απουσιάζει από τη μορφή, εκεί στη γραμμή 7-- ή μάλλον, η γραμμή δεν είναι πλέον 8-- έχω την onsubmit χαρακτηριστικό. Στο προηγούμενο παράδειγμα, είχα αυτό. Και μετά έγραψα κυριολεκτικά τον κωδικό μου εδώ. Και τότε είπα επιστρέφει false. Και αν δεν τρίψετε Είσαι ο λάθος τρόπος ακόμα, θα πρέπει να αρχίσει να μέτρο καθώς, όπως ακριβώς και στην HTML, όταν αρχίσαμε να το συν-σμίξει με CSS στα χαρακτηριστικά στυλ, ακριβώς άρχισε να πάρετε μια μικρή βρώμικο ή να αισθανθείτε ένα μικρό λάθος. 

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

Έτσι για να το κάνουμε αυτό, ό, τι έχουμε γίνεται εδώ είναι η following-- μπορούμε απλά να χρησιμοποιήσετε HTML μόνο για τη σήμανση. Και έτσι στην έκδοση ενός από αυτά, όλα Έχω μια φόρμα με ένα μοναδικό αναγνωριστικό. Και στη συνέχεια κάτω από εδώ, είμαι εκμεταλλευόμενοι της ειδικής λειτουργία του JavaScript σύμφωνα με την οποία μπορώ να έχω ό, τι είναι που ονομάζεται μια ανώνυμη λειτουργία. Έτσι αποδεικνύεται ότι, αν καλώ document.getElementById της «επίδειξης» αυτό είναι σαν να μου δίνετε ένα δείκτη Αυτός ο κόμβος στο δέντρο μου, το στοιχείο της φόρμας, να το πω έτσι. 

Τώρα, ξέρω ακριβώς από γνωρίζοντας ένα κομμάτι της HTML τώρα είμαστε έχοντας διαβάσει κάποια σύνδεση αναφοράς, ότι ένα στοιχείο της φόρμας υποστηρίζει ένα σωρό εκδήλωση στο listeners-- Με άλλα λόγια, η λίστα πλυντήριο της εκδήλωσης ακροατές που είδαμε πριν από λίγο. Ξέρω ότι από την ανάγνωση της τεκμηρίωσης onsubmit ότι είναι ένα έγκυρο εκδήλωση ακροατή για ένα στοιχείο φόρμας. 

Έτσι, τη στιγμή που ξέρω ότι, είναι ασφαλές για μένα να κάνω η following-- πάρει αυτόν τον κόμβο από το δέντρο, το στοιχείο της φόρμας, και η πρόσβασή του λεγόμενου onsubmit ιδιοκτησίας. Έτσι, η τελεία σημαίνει μόνο Αυτό είναι ένα ξενοδοχείο, σαν μια ιδιαίτερη αξία μέσα από αυτό. Και τι είδους δεδομένα είμαι ανάθεση, προφανώς, να onsubmit, η οποία είναι αποτελεσματικά μια μεταβλητή μέσα αυτού του κόμβου στο δέντρο; Είναι ένα πεδίο στο εσωτερικό του εν λόγω struct. Ποιο είναι το είδος των δεδομένων; 

Μια λειτουργία, ναι. Έτσι αποδεικνύεται ότι η PHP έχει αυτό. Και ακόμα κι αν εμείς Δεν είχα να σας πω γι 'αυτό, C διαθέτει επίσης λειτουργία δείκτες, τις την ικανότητα για να περάσει και να αναθέσει τις λειτουργίες όπως οι ίδιοι οι τιμές των μεταβλητών ». Και εμείς δεν πρόκειται οπισθοχώρηση πίσω στην Γ Αλλά για τώρα, αποδεικνύεται ότι στην δεξιά πλευρά εδώ, παρόλο που μοιάζει λίγο funky, αυτό σημαίνει, hey πρόγραμμα περιήγησης, να μου δώσει μια λειτουργία. Είμαι δεν πρόκειται να ενοχλήσει ακόμη και δίνοντας ένα όνομα, γιατί είμαι κυριολεκτικά πρόκειται να αναθέσει ας το ονομάσουμε η διεύθυνση αυτής της λειτουργίας αμέσως να onsubmit. Με άλλα λόγια, το πρόγραμμα περιήγησης, δεν χρειάζεται να ξέρει τι αυτή η λειτουργία ονομάζεται. Απλά πρέπει να ξέρετε όπου είναι στη μνήμη. Και έτσι αρκεί μόνο να έχουν το σύμβολο της ισότητας υπάρχει και να μην ενοχλεί την ονομασία αυτή, όπως foo ή χαιρετήσει ή οποιαδήποτε άλλη λέξη. Και τώρα αυτό είναι μόνο μια υφολογική πράγμα. Θα μπορούσα να μετακινήσετε αυτό το σγουρά στήριγμα πάνω the-- sorry-- επόμενη γραμμή όπως το κάνουμε συνήθως CS50. Αλλά σε JavaScript, είναι στην πραγματικότητα στυλιστικά κοινό να κρατήσει μόνο το σγουρά κηδεμόνα, η πρώτη, σε αυτή την πρώτη γραμμή. 

Αλλά στη συνέχεια, υπάρχει τίποτα ενδιαφέρον. Αυτό ανοιχτή σγουρά στήριγμα μόνο οριοθετεί την έναρξη της λειτουργίας μου. Η λειτουργία είναι τώρα πανομοιότυπες, με εξαίρεση έχω περιλαμβάνεται η ψευδής επιστροφή μέσα αυτής της λειτουργίας. Επειδή αποδεικνύεται out-- και θα κάνατε μόνο το γνωρίζουν αυτό από την ανάγνωση η documentation-- ότι αν η συνάρτηση που εκχωρείτε για το χειριστή onsubmit επιστρέφει false, το πρόγραμμα περιήγησης ξέρει ακριβώς και συμφωνεί να μην υποβάλουν το έντυπο σε ένα διακομιστή. Εάν επιστρέφει true, θα υποβάλει σε ένα διακομιστή, για λόγους που θα δούμε είναι χρήσιμα σε μια στιγμή. 

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

Λοιπόν, αποδεικνύεται στη συνέχεια, έκδοση δύο, η οποία είναι η last-- Και θα κοιτάζουμε αυτό. Με τον κίνδυνο να καταστεί το πιο άσχημο, αποδεικνύεται ότι υπάρχει μια βιβλιοθήκη ο κόσμος που ονομάζεται jQuery. Και jQuery είναι ένα σούπερ δημοφιλές βιβλιοθήκη JavaScript αυτό είναι τόσο δημοφιλής, που οι περισσότεροι κάθε JavaScript-- δεν είναι ασυνήθιστο για τους ανθρώπους να συγχέουμε jQuery με JavaScript. Γιατί; Η ίδια έχει πολύ JavaScript φλύαρη τρόποι για να γίνει things-- document.getElementById, dadadadadada. Θα καταλήξετε με πολύ μακρά γραμμές κώδικα. 

Έτσι, ένας συνάδελφος που ονομάζεται John Κίνηση Πολ, που λειτουργεί πραγματικά για μια εκκίνηση μέχρι τις ημέρες αυτές, βγήκε με αυτήν τη βιβλιοθήκη χρόνια Πριν από ότι πολλοί άνθρωποι έχουν συνεισφέρει να ονομάζεται jQuery που αλλάζει η σύνταξη με τον ακόλουθο τρόπο. Και ακριβώς έτσι έχετε δει αυτό, Επειδή θα αμετάβλητα δείτε αυτό αν κάνει ένα τελικό σχέδιο web-based, αυτό θα είναι το ισοδύναμο τρόπο εφαρμογή του εν λόγω ίδια λειτουργία χρησιμοποιώντας Αυτή η ειδική βιβλιοθήκη. 

Τώρα, αντί να πειράζω χώρια στο σύνολό της, ας δούμε μερικά μοτίβα. Αυτή η σύνταξη φαίνεται να έχει πόσες ανώνυμο λειτουργίες ή ανώνυμο λειτουργίες ή AKA λειτουργίες λάμδα; Δύο, σωστά; Και ξέρετε ότι, ακόμη και αν δεν είστε σούπερ άνετα με αυτό, μόνο από το γεγονός ότι λέει συνάρτηση () δύο φορές. 

Και αποδεικνύεται ότι τι αυτός ο κώδικας είναι doing-- και θα αναφερθώ σε online αναφορές, τελικά, για κάποια βοήθεια με αυτό. Αυτό σημαίνει απλά ότι όταν το έγγραφο είναι έτοιμο, να προχωρήσει και να εγγραφείτε η ακόλουθη συνάρτηση ως διαχειριστής υποβάλλει για την HTML στοιχείο του οποίου η μοναδική ιδέα είναι demo. Και τότε, όταν αυτό συμβαίνει, Ονομάζουμε αυτές τις δύο γραμμές κώδικα. Και αυτό είναι, κατά τραγικό τρόπο, μια πιο φλύαρη τρόπος για να πούμε επιστρέφει false. Και είπαμε αυτό μόνο και μόνο επειδή θα δείτε έναν κώδικα όπως αυτό το online. Και δεν είναι τίποτα να πτοείται από. Αλλά μάλλον, να έχετε κατά νου ότι αυτό είναι πρόκειται να είναι κοινή σε JavaScript είναι το παράδειγμα αυτό. Και έτσι γι 'αυτό το δείξει προς το παρόν. Εντάξει. Έτσι χωρίς κατοικία πολύ πολύ σε αυτή τη σύνταξη, Τα υπάρχουν οποιεσδήποτε ερωτήσεις σχετικά με Αυτά τα παραδείγματα ή ιδέες μέχρι στιγμής; Εντάξει. Έτσι ας χρησιμοποιήσουμε αυτό για κάτι χρήσιμο. Κάνοντας μια ιστοσελίδα που απλά λέει γειά σου, έτσι και έτσι δεν είναι και τόσο ενδιαφέρον, να μην underwhelm. Αυτός δεν πρόκειται να είναι όμορφη, αλλά πρόκειται να κάνει κάτι χρήσιμο. Επιτρέψτε μου να πάω πίσω στον κατάλογο μου εδώ και να ανοίξει, δηλαδή, μορφή-0.html. 

Έτσι, ας υποθέσουμε ότι αυτός είναι ο καινούριος εντός των τειχών του αθλητισμού σελίδα εγγραφής χωρίς CSS ή οποιαδήποτε αίσθηση του σχεδιασμού. Και θέλω να πάω μπροστά και να εγγραφείτε εδώ με έναν κωδικό πρόσβασης. Και Πάω να συμφωνούν με τους όρους και τις προϋποθέσεις και κάντε κλικ στο Εγγραφή. Και τώρα η ιστοσελίδα λέει, «Είστε εγγραφεί! (Καλά, όχι πραγματικά.) " Αυτό φαίνεται σαν να εργαστεί, αλλά επιτρέψτε μου να πάει μπροστά και να αναγκάσει reload. 

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

Χμμ. Εντάξει. Έτσι, υπάρχει πολλές ευκαιρίες για τη βελτίωση εδώ. Και ξέρετε, ή θα δείτε στο PSET επτά, ότι μπορείτε να γράψετε code-- και θα έχετε να γράψετε κώδικα σε PHP-- να υπερασπιστεί έναντι αυτών των ειδών των χρηστών σφάλματα επειδή ο χρήστης με σαφήνεια δεν συνεργάστηκε. Και αυτός ή αυτή δεν σας έχει δώσει όλα τα τιμές θέλατε ή ακόμα και με τη μορφή ότι θα τους ήθελε. Έτσι θα δείτε σε επτά PSET ότι θα μπορούσαμε να έχουμε σίγουρα κάποιες αν οι συνθήκες που λένε Εάν η διεύθυνση ηλεκτρονικού ταχυδρομείου δεν είναι ένα username@something.edu, θα μπορούσαμε απλά πω συγγνώμη και να ζητήσει συγγνώμη για το χρήστη πολύ, όπως και εσείς μπορεί να είναι σε PSET επτά. Ή αν δεν έχετε ελέγξει ότι η θέση, Αποδεικνύεται στην PHP, μπορείτε να εντοπίσετε ότι, πάρα πολύ. Και σίγουρα Αν οι κωδικοί πρόσβασης δεν ταιριάζουν όπως σε register.php για το chipset επτά, μπορείτε να εντοπίσετε αυτό. Αλλά αυτό είναι ένας πόνος στο λαιμό στο ότι τώρα ζητούν μας για να πάει σε όλη τη διαδρομή προς το διακομιστή. Ο χρήστης ενημερώνεται για το σφάλμα. Και τουλάχιστον αν δεν χρησιμοποιήσετε μερικές τεχνικές εκτροφέα, τώρα θα πρέπει να κάνετε κλικ στο βέλος επιστροφής. Δεν θα ήταν ωραίο, όπως πολλές ιστοσελίδες σήμερα, αν είχε πιο άμεση ανατροφοδότηση, αμέσως; 

Με άλλα λόγια, επιτρέψτε μου να πάω στην έκδοση ένα, το οποίο πρόκειται να είναι καθόλου πιο όμορφη. Αλλά δεν έχουν αυτό το χαρακτηριστικό. Malan, 12345, 123456789, δεν πρόκειται να ελέγξετε το πλαίσιο, Εγγραφή. Οι κωδικοί πρόσβασης δεν ταιριάζουν. Έτσι, ακόμη και αν αυτό το pop-up είναι ugly-- μπορούμε να αντικαταστήσουμε αυτό τελικά με κάτι σαν Bootstrap, τα οποία θα δείτε στο PSET επτά είναι ένα πολύ δημοφιλές library-- έκανα ανιχνεύσει ότι οι κωδικοί πρόσβασης δεν ταιριάζουν. Εντάξει. Λοιπόν, επιτρέψτε μου να διορθώσετε αυτό ως χρήστης. Επιτρέψτε μου να προχωρήσει και να πω 12345, 12345. Ακόμα δεν τον έλεγχο της συμφωνίας. Θα πρέπει να συμφωνήσετε με το Όροι και Προϋποθέσεις. Οπότε γιατί? 

Αν έχουμε ήδη στην θέση του ότι υπάρχει ένας τρόπος, και σας έχουμε απαιτούνται PSET επτά για την ανίχνευση σφαλμάτων συνθήκες, όπως αυτό server-side, γιατί πρέπει να ασχοληθείτε επίσης να γίνει αυτό σε JavaScript; Τι είναι ένα επιχείρημα υπέρ της προσθήκης τι είστε έτοιμος να δείτε ως some-- υπάρχει επιπρόσθετη πολυπλοκότητα. 

Ίσως δεν υπάρχει ανάποδα. Τι θα μπορούσε να είναι; Κοινό: [δεν ακούγεται]. DAVID Malan: Αχ, ενδιαφέροντα. Πιθανές εκμεταλλεύεται. Έτσι σίγουρα, αν δεν είστε χειρισμό λανθασμένη είσοδο του χρήστη τόσο μεγάλη, ίσως είναι το καλύτερο, αν δεν φτάνουν καν το διακομιστή σας. Θα ήθελα να σπρώξετε προς τα πίσω και εκεί ας πούμε, μάλλον θα πρέπει να να ορίσει τόσο των προβλημάτων αυτών. Αλλά αυτό είναι δίκαιο. Τι άλλο? 

Κοινό: [δεν ακούγεται]. 

DAVID Malan: Ναι. Αυτός ο κωδικός, όπως είπαμε και πριν, είναι ερμηνεύεται από την πλευρά του πελάτη. Δεν ενοχλεί το διακομιστή, πράγμα που σημαίνει ότι δεν να επηρεάσει την ικανότητα φορτίου ή του διακομιστή. Και τώρα, για μένα λίγο παλιό, αυτό δεν έχει καμία σημαντική επίδραση γιατί έχω έναν χρήστη τώρα. 

Αλλά αν είστε οποιαδήποτε ιστοσελίδα της αξιοπρεπές μέγεθος, ιδιαίτερα το μεγαλύτερο, όπως το Facebook, τόσο περισσότερο μπορείτε να κρατήσετε τον κόσμο μακριά του διακομιστή σας τόσο το καλύτερο επειδή ένα διακομιστή, φυσικά, έχει μόνο ένα πεπερασμένο ποσό της μνήμης RAM, ένας πεπερασμένος αριθμός των gigahertz, ένας πεπερασμένος αριθμός πραγμάτων μπορεί να κάνει ανά μονάδα χρόνου. Έτσι, εάν υπάρχουν περισσότεροι άνθρωποι στο ο κόσμος το χτύπημα του διακομιστή σας, τυχαία αποσύνδεση λανθασμένα, εξίσου καλά, αν μπορεί να κρατήσει το φορτίο από το διακομιστή σας. Πλέον, ιδιαίτερα σε ένα κινητό device-- Αν έχετε ποτέ συνδεθείτε στο my.harvard ή NetID του Yale ή τα παρόμοια, υπάρχει αυτή η καθυστέρηση με πολλή ιστοσελίδες όπως το ότι σύμφωνα με την οποία λαμβάνει, όπως, μια δεκάρα ή δύο δευτερόλεπτα μερικές φορές. Και τότε, ο Θεός μου, αν κάνετε λάθος στην πληκτρολόγηση, τότε θα πρέπει να χτυπήσει πίσω και να ξανακάνει αυτό. Έτσι, υπάρχει λανθάνουσα κατάσταση, ιδίως σχετικά πιο αργές συνδέσεις δικτύου. Αλλά JavaScript, επειδή τρέχει στον υπολογιστή-πελάτη και δεν χρειάζεται να πάει μπροστά και πίσω σε μια δυνητικά αργή διαδίκτυο σύνδεση, μπορείτε να πάρετε σχεδόν στιγμιαία ανατροφοδότηση. 

Ας ρίξουμε μια ματιά σε αυτό. Επιτρέψτε μου να ανοίξει μορφή-0 και κοιτάξουμε το HTML εδώ. Και ας δούμε τι συμβαίνει. Πρόκειται για μια μορφή της οποίας δράση είναι register.php. Είμαι απλά χρησιμοποιώντας κερδίστε ότι θα μπορούσα να δω το URL. Αλλά για τους κωδικούς πρόσβασης, θα είχαμε σίγουρα θέλουμε να αλλάξει αυτό να δημοσιεύσετε στην πραγματικότητα. Εδώ είναι ένα πεδίο εισαγωγής κειμένου του τύπου. Εδώ είναι ένα άλλο εισόδου το πεδίο του κωδικού τύπου. Εδώ είναι, αν δεν έχετε δει ποτέ, μια είσοδος του τύπου κουτάκι. 

Αλλά δεν υπάρχει καμία JavaScript εδώ απολύτως. Αυτό είναι απλά HTML που πηγαίνει στο register.php. Αλλά σε μια έκδοση, όπου άρχισε να παίρνει τα pop-ups, ας δούμε τι πραγματικά συμβαίνει εδώ. Στην έκδοση ενός, τι Πάω να see-- μου πίστευα ότι θα μπορούσε να καθυστερήσει αρκετά με αρκετές λέξεις, αλλά έτρεξα έξω. 

Στην έκδοση ένα-- εκεί πάμε. Στην έκδοση ενός, παρατηρήστε την following-- και δεν είναι η καλύτερη εφαρμογή, αλλά είναι η πρώτη μου. Παρατηρήστε ότι κάτω από το μορφή, έχω μια ετικέτα σενάριο. Και ένα script tag το μέσο, hey, το πρόγραμμα περιήγησης, εδώ έρχεται κάποια κώδικα σε, Τυπικά, το JavaScript. Και τώρα, παρατηρήστε τι κάνω. Στις line-- μπορώ μετά βίας διαβάστε it-- γραμμή 32, που λέει, var form-- ώστε να μου δώσει μια μεταβλητή που ονομάζεται μορφή. Και στη συνέχεια να πάρει document.getElementId «καταγραφή». Τι είναι αυτό? Λοιπόν, επιτρέψτε μου να γυρίζουν πίσω μέχρι εδώ. Και προειδοποίηση, αχ, έδωσα το στοιχείο της φόρμας ένα αυθαίρετο αλλά περιγραφική ιδέα εγγραφής. Έτσι, αυτό μου δίνει μια μεταβλητή που μου επιτρέπει να αρπάξει αυτόν τον κόμβο, το ορθογώνιο αυτό το δέντρο που ονομάζεται μορφή. form.onsubmit μέσα, hey πρόγραμμα περιήγησης, εγγραφή ενός ακροατή εκδήλωση σε αυτό το έντυπο. Με άλλα λόγια, όταν αυτή η μορφή είναι υπέβαλε, εκτελέστε τον παρακάτω κώδικα. Δεν χρειάζεται ένα όνομα, διότι γιατί θα πρέπει να γνωρίζετε το όνομα; Απλά πρέπει να ξέρετε τι πρέπει να εκτελέσει, ergo είναι μια ανώνυμη ή λάμδα λειτουργία. Και αυτή η λειτουργία είναι όλες αυτές τις γραμμές εδώ. Και τώρα, για να είμαι ειλικρινής, ακόμα κι αν δεν θα μπορούσε να έχει γράψει ποτέ το JavaScript πριν, είναι ακριβώς C και PHP λογική. Έτσι, αν form.email.value == "" - Έτσι, αν το πεδίο είναι κενό e-mail, φωνάζω στο χρήστη «πρέπει να συμπληρώστε το email σας. " Αλλιώς, αν form.password.value είναι κενό φωνάζει στον χρήστη, "Πρέπει να δώσετε τον κωδικό πρόσβασής σας." 

Πιο ενδιαφέρουσα είναι λογικά, αν δεν form.password.value ίση form.confirmation.value-- πού επιβεβαίωση προέρχεται από; Επιτρέψτε μου προς τα πίσω. Λοιπόν, κάλεσα αυτή η είσοδος πεδίο εδώ τον κωδικό πρόσβασης. Και πήρα αυτό το ένα εδώ επιβεβαίωση. Θα μπορούσα να έχω αυτό που ονομάζεται κωδικό πρόσβασης δύο ή οτιδήποτε άλλο. Είμαι απλά λογικά έλεγχο ότι αυτά τα δύο είναι τα ίδια. Else-- ότι φαίνεται αυτό είναι ο κ Boole again-- μια τιμή Boolean, το πλαίσιο ελέγχου. Έτσι, αν λέω, θαυμαστικό point-- αν δεν form.agreement.checked, φωνάζω στο χρήστη, καθώς και. 

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

Έτσι, σε όλα αυτά περιπτώσεις, επέστρεψα ψευδείς. Αλλά αν όχι, θα επιστρέψει αλήθεια. Και έτσι τώρα βλέπουμε ένα αναγκάζοντας χρήση όταν θα επιστρέψει false για να σταματήσει αυτό το χρήστη να κάνει και να σε κάνει να επιλέξετε ξανά ή πληκτρολογήστε ξανά. Διαφορετικά, θα επιστρέψουμε αλήθεια. 

Και επιτρέψτε μου να εισαγάγει ένα άλλη παραλλαγή του αυτό ακριβώς τους σπόρους προς σπορά κάποια κατανόηση αυτού. Λοιπόν, στην έκδοση 2 του παρόντος, η μορφή με 2-- Θα το κάνω με μια κίνηση του χεριού. Αυτό είναι, για όσους έχουν την περιέργεια, η έκδοση jQuery, Όσοι από εσάς ίσως να θέλετε να ανακατεύομαι σε συγκεκριμένη βιβλιοθήκη. Αλλά ας start-- και για κάθε απορία; Επιτρέψτε μου να παύση για τη στιγμή, διότι ότι ήταν γρήγορη και πολύ. 

Αλλά το ωραίο πράγμα εδώ είναι ότι όλα του κώδικα είναι λίγο πολύ το ίδιο. Το νέο υλικό είναι αυτό που είναι η Κυβέρνηση; Ποια είναι αυτά τα ορθογώνια; Ποιες είναι αυτές οι κόμβοι; Τι είναι μια ανώνυμη συνάρτηση; Τι είναι ένα πρόγραμμα χειρισμού συμβάντων; Αλλά ευτυχώς, οι περισσότερες από ότι είναι ακριβώς πλήρη κύκλο από, ας πούμε, την εβδομάδα μηδέν. Εντάξει. Οπότε κάτι λίγο πιο ενδιαφέρον; Λοιπόν, πρώτα απ 'όλα, επιτρέψτε μου να πάω μπροστά και να ανοίξει το Google Maps. Και θα παρατηρήσετε ότι για μια στιγμή, στο κλάσμα του δευτερολέπτου, Παρατηρήστε τι συμβαίνει όταν Κάνω κλικ αρκετά γρήγορα. Και αυτή η σύνδεση στο Χάρβαρντ είναι τόσο γρήγορα που δεν το προσέξει πολύ. Αλλά τι είδους είδος δείτε αν κάνω κλικ και σύρετε πολύ γρήγορα; Όσοι από εσάς παρακολουθείτε on-line, αν αυτό επιβραδύνει την ταχύτητα 0.5x, μπορείτε να δείτε αυτό το καλύτερο. 

Τι συνέβαινε μόνο πριν χτύπησα και έσυραν; Επιτρέψτε μου να προσπαθήσω here-- επιτρέψτε μου να κάνω κάτι άλλο, όπως το 90210. Ας πάμε μακριά. Αυτό ήταν πολύ γρήγορα, πάρα πολύ. Τι θα λέγατε για Disney World; Εκεί πάμε. ΕΝΤΆΞΕΙ. Τι βλέπετε για ένα κλάσμα του δευτερολέπτου; Ακριβώς, όπως, πλατείες, σωστά; Τα σύμβολα κράτησης θέσης για τα κεραμίδια; 

Λοιπόν, τι συμβαίνει εδώ; Google Maps είναι ένα ωραίο παράδειγμα της Αυτή η τεχνολογία που ονομάζεται AJAX. Και αυτό είναι που θα αρχίσουμε να χρησιμοποιήστε το JavaScript στον ιδιαίτερα σαγηνευτικό τρόπο. Πίσω στην ημέρα, δεν υπήρχε Αυτή η ιστοσελίδα που ονομάζεται MapQuest. Και εγώ θα έπρεπε να λάβει μια στιγμιότυπο αυτό από τη δεκαετία του 1990, όπου κι αν ήθελε να κοιτάξτε εδώ πάνω στο χάρτη, μπορείτε κυριολεκτικά να κάνετε κλικ σε ένα βέλος στην κορυφή που επιδείξατε μια διαφορετική πλατεία του χάρτη. Αν θέλετε να κινηθείτε αριστερά, μπορείτε κλικ σε ένα βέλος που σας έδειξα μια διαφορετική πλατεία του χάρτη. Και μερικές ιστοσελίδες κάνουν ακόμα αυτό σήμερα. Αλλά ακόμα και MapQuest έχει πάρει καλύτερα, όπως το Google Maps. 

Αντ 'αυτού, τι είναι καλύτερο αυτά ημέρες είναι ιστοσελίδες που χρησιμοποιούν AJAX. AJAX-- αλλιώς γνωστή ως Asynchronous JavaScript και XML, το οποίο είναι μόνο ένα φανταχτερό τρόπο λέγοντας μια τεχνολογία ή τεχνική ότι επιτρέπει σε ένα πρόγραμμα περιήγησης με τη χρήση JavaScript να προβούν σε πρόσθετες αιτήσεις HTTP αφού η σελίδα έχει φορτωθεί. Λοιπόν, τι σημαίνει αυτό; Λοιπόν, αυτό θα ήταν το είδος των ενοχλητικών στο Gmail αν κάθε φορά που ήθελε για να ελέγξετε την αλληλογραφία σας, που είχε κυριολεκτικά πατήστε Control-R ή Command-R ή κάντε κλικ στο κουμπί Ανανέωση και ολόκληρη η σελίδα καταριέται θα φορτώσετε εκ νέου. Σωστά; Θα αναβοσβήνει λευκό μάλλον για τη δεύτερη. Θα δείτε το ηλίθιο γραμμή προόδου. Και ακριβώς για να δείτε αν έχετε νέα το σύνολο της ιστοσελίδας και το URL ταχυδρομείου, είστε σε θα πρέπει να φορτώσετε εκ νέου. 

Αλλά αυτό δεν είναι ό, τι συμβαίνει στο Gmail. Σωστά; Όταν παίρνετε ένα νέο e-mail στο Gmail, τι συμβαίνει στην οθόνη; Δείχνει ακριβώς επάνω, δεξιά; Απλώς φαίνεται μαγικά ως μια νέα σειρά στον πίνακα. Αυτό συνεπάγεται στην πραγματικότητα μια αξιοπρεπές ποσό της πολυπλοκότητας. Στην πραγματικότητα, αν το σκεφτείτε αυτό το δέντρο, η οποία παρόλο που είναι μια απλή εδώ, Gmail-- και θα έπρεπε να εξετάσουμε τον κώδικα για να sure-- πιθανότατα έχει έναν πίνακα HTML ή ίσως μια μη διατεταγμένη λίστα που καθιστά καθένα από τα εισερχόμενα e-mail σας, όπως. 

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

Έτσι, πολύ παρόμοιο με το chipset πέντε, όπου μπορείτε Έπρεπε να τοποθετήσετε κόμβους σε ένα πίνακα κατακερματισμού, Ομοίως η Google, μέσω JavaScript κώδικα που έχει γράψει, διασχίζουν αυτό το δέντρο, να καταλάβω πού είναι ότι ένα μέρος των εισερχομένων του παραθύρου, και στη συνέχεια τοποθετήστε μια νέα γραμμή. Και μια νέα γραμμή σημαίνει ότι μόνο ένας ή περισσότερους νέους κόμβους σε ένα δέντρο. 

Και έτσι AJAX είναι αυτή η τεχνική ότι επιτρέπει ακριβώς αυτό. Μόλις έχετε επισκεφθεί ένα URL, Ωστόσο τρελό καιρό είναι, και μόλις η σελίδα έχει έχουν φορτωθεί, μπορείτε ακόμα αρπάξει περισσότερα δεδομένα από το internet-- είτε πρόκειται για ένα μήνυμα ηλεκτρονικού ταχυδρομείου ή ένα κεραμίδι από ένα map-- πιάσε το πίσω από τα παρασκήνια και στη συνέχεια να το τοποθετήσετε στη σελίδα έτσι ώστε ο άνθρωπος δεν κάνει πραγματικά πρέπει να περιμένουμε για αυτό. 

Facebook Messenger λειτουργεί με τον ίδιο τρόπο. Οποιοσδήποτε αριθμός άλλων websites-- Ω, στην πραγματικότητα, ακόμη και αυτό. Θέλω να πω, αυτό είναι, ειλικρινά, το είδος του ένα ενοχλητικό χαρακτηριστικό αυτές τις μέρες. Αν αρχίσω την αναζήτηση για αυτό cats-- Είναι το είδος της μια φρικτή εμπειρία του χρήστη. Είναι μόλις αρχίσει να ψάχνει για μένα. Λοιπόν τι είναι αυτό που κάνει; Η διεύθυνση URL δεν έχει ουσιαστικά μεταβληθεί από τότε που άρχισα την πληκτρολόγηση. Αλλά τι συμβαίνει σε όλη την wire-- ΟΚ, χμμ ενδιαφέρον. Τι συμβαίνει σε όλη την σύρμα εδώ παίρνει μόνο πιο περίεργα. 

ΕΝΤΆΞΕΙ. Επιτρέψτε μου λοιπόν να προχωρήσει και να επιθεωρούν στοιχείο και πηγαίνετε στην καρτέλα Δίκτυο και προσπαθούν να κάνουν αυτό τεχνικά και λιγότερο για τις γάτες. Κατά την πληκτρολόγηση, κυριολεκτικά, γάτες and-- τι συμβαίνει per-- Είμαι δεν πρόκειται να κάντε κλικ σε αυτό. Εντάξει. Έτσι, εδώ κάτω, τι συμβαίνει σε κάθε φορά που πληκτρολογήστε έναν χαρακτήρα, προφανώς; Όπως, το χαμηλό επίπεδο; Τι συμβαίνει με το κάθε ένα από αυτά χαρακτήρες Γράφω στο πληκτρολόγιό μου; Ναι; Κοινό: [δεν ακούγεται]. 

DAVID Malan: Ακριβώς. Κάθε ένας από αυτούς τους χαρακτήρες είναι μετάβαση στην Google, ένα κάθε φορά. Χτίζουν μια κλωστή στον server τους, που αντιπροσωπεύει όλα όσα έχω πληκτρολογήσει μέχρι στιγμής. Και κάθε φορά που πληκτρολογείτε άλλο χαρακτήρα, που χρησιμοποιούν μυστική συνταγή τους ένα αλγόριθμος αναζήτησης και να καταλάβω, εννοεί αυτή τη σελίδα γάτας ή αυτή τη σελίδα με γάτα ή κάτι παρόμοιο; Έτσι, κατά κάποιο τρόπο, αυτό μου δίνει μια καλύτερη εμπειρία από το γεγονός ότι εγώ δεν κάνω καν Πρέπει να ολοκληρώσετε τη σκέψη μου. Και πράγματι, είναι ένα χρήσιμο πράγμα, αυτόματης συμπλήρωσης σε γενικές γραμμές. Αν τους αλγόριθμους είναι αρκετά καλό και αν αναζητήσεις μου είναι αρκετά προφανές, Δεν έχω να πληκτρολογήσετε ολόκληρη τη λέξη. Θα πάμε να μου πεις τι είναι ότι είμαι πραγματικά ψάχνει για. Έτσι, αυτό που αποκαλεί η Google στιγμιαία αναζήτηση μόνο με τη χρήση AJAX, χρησιμοποιώντας τον κωδικό που τους επιτρέπει να ζητήσουν πρόσθετο περιεχόμενο μέσω ενός web browser πίσω από τις σκηνές που χρησιμοποιούν αυτό το νέα γλώσσα, το JavaScript. Έτσι έχουμε μερικά λεπτά αριστερά. Και επιτρέψτε μου να καλέσετε φίλε μου Colton επάνω στη σκηνή, δεδομένου ότι φαινόταν ιδιαίτερα διασκεδαστικό τελευταία φορά για την εισαγωγή μιας τεχνολογίας ότι κάποιοι από εσάς έχουν εκφράσει το ενδιαφέρον σε έργα για την τελική. Σκεφτήκαμε ότι θα ήταν διασκεδαστικό να φέρει μέχρι εθελοντής, όμως, σήμερα να σας δείξει μια προσθήκη Αυτό που επιτρέπει you-- ναι, Είδα αυτό το χέρι πρώτα. Έλα επάνω. Πολύ καλά κάνει. Καλη δουλεια. Πάω να προβάλει αυτό σε η οθόνη ακριβώς σε μια στιγμή. Ποιο είναι το όνομά σου για τον καθένα; 

ΕΕΣ: Είμαι ΕΥΤ. 

DAVID Malan: ΕΘΑ; 

ΕΕΣ: ΕΥΤ. 

DAVID Malan: ΕΕΣ; 

ΕΕΣ: Ναι. 

DAVID Malan: Χαίρομαι που σε βλέπω. Εντάξει. Επιτρέψτε μου να πάρει αυτό έτοιμο. Ελάτε να το με μέση εδώ Colton. Τι Colton έχει στα χέρια του Σήμερα είναι ένα τηλεχειριστήριο. Έτσι, αντί απλά να σταθεί εκεί ένα τρισδιάστατο κόσμο κοιτάζοντας γύρω όπως έκανε Colton, τώρα μπορείτε ΕΕΣ στην πραγματικότητα με τα πόδια γύρω από το ανεβαίνει, κάτω, αριστερά και δεξιά σαν ένα Nintendo ή το Xbox ελεγκτή. ΕΕΣ: Πάω να πέσει από το στάδιο. DAVID Malan: Θα σταθεί περίπου εδώ. Αλλά αυτό είναι ένα ρίσκο. ΕΝΤΆΞΕΙ. Έτσι προχωρήστε και να τα βάλετε σε. Επιτρέψτε μου να προχωρήσει και μεταβείτε στην οθόνη εδώ. Επιτρέψτε μου να χαμηλώστε τα φώτα. Και Colton, επιτρέψτε μου να έρχονται στέκονται δίπλα σας. 

Θέλετε να εξηγήσω εδώ με το μικρόφωνο ό, τι κάνουμε; Ορίστε. 

COLTON: Σίγουρα. Έτσι τώρα είμαστε φόρτωση μέχρι το Oculus, Υποθέτω operating-- που δεν λειτουργούν σύστημα, αλλά το κύριο πρόγραμμα, όπου μπορείτε να αποκτήσετε πρόσβαση σε όλα τα παιχνίδια και εφαρμογές που υπάρχουν στη βιβλιοθήκη σας. Έτσι, αυτή τη στιγμή, θα πρέπει να πω αγγίξτε το touchpad για να ξεκινήσει. Touchpad πρόκειται να είναι σχετικά με την δεξιά πλευρά του ακουστικού. Έτσι προχωρήστε και tap-- ΕΕΣ: Ω, ο άνθρωπος. DAVID Malan: Ναι, θα πάτε εκεί. Η ποιότητα Efa βλέπει είναι πολύ υψηλότερη ποιότητα. Αυτό είναι ακριβώς το Wi-Fi εδώ. COLTON: Λοιπόν, τι είσαι πρόκειται να θελήσετε να κάνετε είναι να κοιτάξουμε προς την κορυφή δεξιά γωνία της οθόνης. Ναι, αυτό το παιχνίδι για την πολύ πάνω δεξιά. Και στη συνέχεια, όταν είστε επιλογή αυτό, πατήστε ξανά το touchpad. Νομίζω Dreadhalls του. Και τότε εδώ είναι a-- εδώ, επιτρέψτε Θέλω να κρατήσει τα γυαλιά σας για σας. 

Γι 'αυτόν ακριβώς έδωσε έναν ελεγκτή. Έτσι τώρα μπορεί να ελέγξει το παιχνίδι. Αυτός μπορεί να κινηθεί γύρω και τέτοια πράγματα. Έτσι πάει μπροστά και να κοιτάζω προς τα πάνω προς την κορυφή. Θα πρέπει να δείτε New Game. Έτσι προχωρήστε και μπορείτε να το κάνετε αυτό. Τώρα, θα πρέπει να είναι σε θέση να ελέγξει τον εαυτό σας με τον ελεγκτή, καθώς και, το συντομότερο το παιχνίδι φορτώνει εδώ. Αυτό θα μπορούσε να είναι λίγο τρομακτικό. 

ΕΕΣ: Τώρα μπορείτε να μου πείτε. ΕΝΤΆΞΕΙ. 

COLTON: Εντάξει. Έτσι, επιβεβαιώνουν ότι μπορείτε να μετακινηθείτε. ΕΝΤΆΞΕΙ. Μπορείτε να μετακινήσετε γύρω. Τέλεια. Έτσι, αν κοιτάξει κάτω, έχετε ένα χάρτη. Χάρτης που δείχνει πού βρίσκεστε. Μπορείτε να δείτε γύρω από το δωμάτιο. Μπορείτε εντελώς να γυρίσουν. Ναι, ακριβώς. Γύρνα. 

Έτσι ματιά στα αριστερά σας. Νομίζω ότι υπάρχει κάτι που μπορείτε να αναφερθώ σε ένα βαρέλι στο δωμάτιο. 

ΕΕΣ: Πώς μπορώ να αποκτήσω το χάρτης έξω από το δρόμο; COLTON: Κοιτάξτε επάνω. Απλά κοιτάζω προς τα πάνω. Εντάξει. Ορίστε. Τώρα πάμε μπροστά και μόλις γυρίσει γύρω. Έτσι φαίνονται μακρύτερα στα αριστερά σας. Προχώρα αριστερά. Συνέχισε να ψάχνεις αριστερά. Συνέχισε. Ναι. 

ΕΕΣ: Ω, με αυτόν τον τρόπο. 

COLTON: Ναι. Περπατήστε προς την κατεύθυνση αυτή με τον ελεγκτή. Ορίστε. Τώρα πρέπει να πω να το παραλάβετε. Ορίστε. Σηκωσε το. Εντάξει. Τώρα, ας βγούμε από αυτό το δωμάτιο. Προχωρήστε και να περπατήσετε την πόρτα. Έτσι θα πάμε να hold-- λέει κρατήστε πατημένο το κουμπί για να το ανοίξετε με βία. Έτσι προχωρήστε και κρατήστε πατημένο το κουμπί. Ναι, αναγκάζοντας το ανοίξετε. Εντάξει. Καλη δουλεια. Τώρα είμαστε με τα πόδια έξω από το δωμάτιο. Έτσι, Πάω να αφήσει τα υπόλοιπα μέχρι να σας και να δείτε τι μπορείτε να μάθετε. ΕΕΣ: Δεν πάω στο σκοτεινό δωμάτιο. Αα περίμενε. Τώρα πρέπει να πάει κάτω από τη σκοτεινή αίθουσα; Εντάξει, θα πάω πίσω [δεν ακούγεται]. COLTON: Εντάξει. Κάποια περισσότερα στοιχεία για να πάρει. Μοιάζει με μερικά νομίσματα. Αυτή είναι μια επιλογή κλειδώματος. Έτσι, αν βρείτε ένα κλειδωμένο πόρτα, μπορείτε να χρησιμοποιήσετε αυτόν. Φοβάσαι? 

ΕΕΣ: Όχι ακόμα. COLTON: OK. 

Pretend-- ναι. Απλά υποκρινόμαστε είστε στην πραγματικότητα στέκεται εκεί. Κι αν πάτε around-- έχετε να το συνηθίσεις. Αλλά έχει νόημα. DAVID Malan: Και ενώ ΕΕΣ συνεχίζει να παίξουν, αφού θα μπορούσαμε να το κάνουμε αυτό όλη την ημέρα, μπορούμε όλοι tip-toe εδώ. Αλλά έχουμε δύο άλλα ζεύγη, αν θέλετε να έρθει και να παίξει. Διαφορετικά, θα δούμε την επόμενη Τετάρτη. Σας ευχαριστούμε για την εθελοντική μας σήμερα. [Χειροκρότημα] 

[ΜΟΥΣΙΚΗ - "Seinfeld ΘΕΜΑ"] ΟΜΙΛΗΤΗΣ 1: Λοιπόν, είμαι βάζοντας ένα νέο PL mount για. Έχω αλλάξει μόνο το OLPF-- 

ΟΜΙΛΗΤΗΣ 2: Λοιπόν, τι ακριβώς κάνεις; 

ΟΜΙΛΗΤΗΣ 1: Λοιπόν, ο καθένας από these-- εδώ, εγώ θα σας δείξω αυτό το ένα εδώ. Μπορείτε να το δείτε εδώ. 

ΟΜΙΛΗΤΗΣ 3: Νομίζω ότι είμαι καλός με αυτά. Θέλεις λίγο περισσότερο; 

ΟΜΙΛΗΤΗΣ 4: Όχι, είμαι καλά. [Δεν ακούγεται]. 

ΟΜΙΛΗΤΗΣ 3: Όχι, [δεν ακούγεται]. Πάρε λίγα. ΟΜΙΛΗΤΗΣ 1: Διαφορετικό χρώμα. ΟΜΙΛΗΤΗΣ 2: OK. ΟΜΙΛΗΤΗΣ 1: Λοιπόν, τελικά αυτό που κάνει είναι να προσαρμόζει το χρώμα of--