David J. Malan: Εντάξει, έτσι αυτό εδώ είναι ο βραχίονας Μυο μπάντα, ένα ζευγάρι από το οποίο θα έχουν για CS50 τελικό έργα. Και αυτό ήταν μια επίδειξη εμείς στην ουρά σας εκ των προτέρων, όπου ουσιαστικά Αυτή η αρκετά σφιχτή βραχίονα μπάντα εδώ ακούει μυϊκές κινήσεις σας που στη συνέχεια χαρτογραφούνται σε λογισμικό με το laptop Colton πάνω εδώ που είχε το iTunes και ότι τραγούδι ήδη μπουν στην ουρά. Αντί να μου demoing αυτό, Colton είναι ήδη στο εργαστήριο σαφώς όλη την εβδομάδα να πάρει μια επίδειξη έτοιμοι για μία γενναία εθελοντή. Αν κάποιος θα ήθελε να έρθει για up-- είδε το χέρι σας πρώτα. Έλα επάνω. [00:01:09] Εντάξει. Και τι είναι το όνομά σας; [00:01:13] ΚΟΙΝΟ: Χμ, Μαρία. [00:01:14] David J. Malan: Μαρία, χαίρομαι που σας βλέπω. Έλα εδώ. Επιτρέψτε μου να σας συστήσω σε Colton. Colton, αυτή είναι η Μαρία. [00:01:21] COLTON: Γεια σας, ωραίο να σας γνωρίσουμε. [00:01:23] David J. Malan: Όλα δεξιά, έτσι ένα βήμα, είμαστε πρόκειται να σας βάλει Αυτό για να το αντιβράχιο σας έτσι ώστε να είναι αρκετά σφιχτά κοντά αγκώνα σας. Και εν τω μεταξύ, ας ρίξουμε βάλει στο Google Glass μας και εμείς θα ανακατεύουμε τεχνολογίες σήμερα. [00:01:33] COLTON: Πρώτα θα πρέπει να συνδέσετε αυτό στα πράγματα. [00:01:36] David J. Malan: ΟΚ. Στην πραγματικότητα, ας βάλουμε το χέρι σας ως κοντά σε αυτό το καλώδιο όσο το δυνατόν έτσι ώστε να μπορούμε πρώτα να συγχρονίσετε. [00:01:41] COLTON: Ας το κάνουμε αυτό. [00:01:42] David J. Malan: Και εν τω μεταξύ, τόσο ότι ο καθένας μπορεί να πάρει μια πιο προσεκτική ματιά, θα πετάξει κάμερα Ανδρέα στην οθόνη εκεί. Έτσι έχουμε ένα καλώδιο USB που είναι να συνδεθεί σε περιβραχιόνιο της Μαρίας. Και επιτρέψτε μου να πετάξει την οθόνη του Colton μέχρι τον προβολέα επόμενο. [00:02:00] Έτσι Colton καταγράφει τη συσκευή τώρα ως μια μυο συνδέεται με αυτό το καλώδιο. Και τώρα τι Μαρίας πρόκειται να κάνει στιγμιαία είναι στην πραγματικότητα τα πόδια μέσα τα βήματα βαθμονόμησης και να διδάξουν το λογισμικό πώς οι μύες της να ανταποκριθεί όταν κάνει ορισμένες προκαθορισμένες χειρονομίες ότι το λογισμικό καταλαβαίνει. Αν θέλετε να πάτε στο μπροστά από την οθόνη. Εντάξει, συνεχίζουμε να προσπαθούμε. [00:02:30] COLTON: Πηγαίνετε σαν αυτό. Και σαν αυτό. Και σε όλη τη διαδρομή προς τα δεξιά. Πήγαινε πίσω. [00:02:35] David J. Malan: ΟΚ. Διαφορετική προοπτική. Δεν είναι εσύ. Μας είναι. [00:02:40] ΜΑΡΙΑ: Εντάξει. David J. Malan: Όχι. Ας το προχωρήσουμε πιο ψηλά, ώστε να είναι πιο κοντά στον αγκώνα σας, ή ακόμη αυστηρότερη. Εντάξει. [00:02:52] Εδώ πάμε. Αυτό θα ήταν μια καλή στιγμή για CS52X. Εκεί πάμε. [00:02:57] Πολύ ωραία. ΟΚ. Thumb να pinky. [00:03:02] Πολύ ωραία. Διαδώστε τα δάχτυλά σας. Καλή. Wave δεξιά. Είναι περίεργο που δείχνει σας με το αριστερό hand-- [00:03:17] COLTON: Ναι, αυτό είναι παράξενο. David J. Malan: Κύμα σε το δικαίωμα και να προχωρήσουμε προς τα εμπρός. Fast forward στο παρακάμψετε ή την επόμενη. Αυτό είναι εντάξει σωστό κύμα. [00:03:25] ΜΑΡΙΑ: Έχω don't-- περιμένω. [00:03:26] David J. Malan: Χρειάζεστε κάποια βοήθεια; [00:03:28] COLTON: Έτσι θα πάμε σαν αυτό. ΜΑΡΙΑ: Είναι η στροφή του άλλο πράγμα, όμως. COLTON: Είναι. David J. Malan: Ναι, δεν ξέρω Γι 'αυτό σας παρουσιάζει μια αριστερόχειρας. COLTON: Γιατί δεν try-- Απλώς προσπαθώ να κάνεις έτσι. [00:03:38] David J. Malan: Όχι; Ίσως να φτάσει το χέρι σας από μια μικρή ίσια και να το καταστήσει πιο απότομη σαν αυτό. Ναι, εντάξει, έλα. [00:03:48] ΜΑΡΙΑ: Λυπάμαι. David J. Malan: Δεν είναι το ελάττωμά σας. COLTON: Είναι μια χαρά. David J. Malan: Εντάξει. Well-- [00:03:56] ΜΑΡΙΑ: Πρέπει να παραλείψετε αυτό, τότε; David J. Malan: Ναι, ας έχετε αφήσει από το γάντζο. Έτσι, αν κάποιος θα ήθελε να κάνει μια τελικό σχέδιο χρήση αυτής της αιχμής hardware, συνειδητοποιούν ότι ίσως απλά να πάρει λίγο να συνηθίσει. Και this-- η πραγματικότητα είναι αυτή είναι στην πραγματικότητα πολύ αιμορραγία άκρη. [00:04:10] Αυτό είναι ό, τι λέγεται Το κιτ του έργου, το οποίο προορίζεται να είναι ουσιαστικά ένα προ-απελευθέρωσης έτσι ώστε οι άνθρωποι μπορούν να κάνουν ακριβώς this-- αγωνιστεί με αυτό, το σχήμα πώς σώματα των ανθρώπων εργάζονται με την τεχνολογία. Έτσι, εάν θέλετε στη συνέχεια, μετά την διάλεξη, μπορούμε να σας αφήσει να έρθει και να λάβει μια άλλη μαχαιριά σε αυτό. Αλλά κατά τα άλλα, ένα χειροκρότημα, εάν θα μπορούσαμε, για τη Μαρία για τα επόμενα προς τα πάνω. [00:04:26] ΜΑΡΙΑ: Σας ευχαριστώ. [00:04:28] David J. Malan: Σας ευχαριστώ. Θα κρεμάσει σε αυτό, αλλά θα δώσουμε you-- σχετικά με το πώς μια μπάλα για το άγχος εδώ; Ω, and-- if-- ναι, ευχαριστώ. Εντάξει. Έτσι, για την περίεργη, αν ήταν εξοικειωμένοι με τον ήχο επιλογή ότι κάναμε εκεί νωρίτερα, μια καταπληκτική τηλεόραση δείχνουν ότι θα πρέπει να είναι απολύτως είναι ευκαιριακή άμετρη βλέποντας στο Netflix είναι αυτό εδώ. [00:04:51] ΟΜΙΛΗΤΗΣ 1: Κυρίες και κύριοι, ένας μάγος ονόματι Τζος. [00:05:04] David J. Malan: Και προφανώς, είναι ένα πράγμα για μένα κειμένου κατά τη διάρκεια διάλεξης τώρα. Είμαι λένε ότι η Μαρία είχε γενέθλια χθες. Έτσι χαρούμενα γενέθλια από CS50 με τη Μαρία, καθώς και. [00:05:18] Έτσι μπορείτε να έχετε διαβάσει τα τελευταία μήνα ότι αυτό κύριοι εδώ, ο Steve Ballmer, ο οποίος ήταν στην πραγματικότητα τάξη του 1977 στο κολέγιο, πρόσφατα αποσύρθηκε για το Microsoft. Ήταν ένα προπτυχιακό εδώ, Στη συνέχεια ένα-δύο χρόνια αργότερα βρέθηκε σε Stanford Business School όταν έλαβε ένα τηλέφωνο κλήση από ένα φίλο του ο οποίος του είχε ζήσει κάτω από την αίθουσα από αυτόν εδώ στο Χάρβαρντ. Όνομα του φίλου ήταν Bill Γκέιτς, και κατά τη χρονική στιγμή, προσπαθούσε να στρατολογήσει τον Steve να είναι την πρώτη εργάσιμη πρόσωπο, πραγματικά, σε ένα μικρό όνομα της εταιρείας Microsoft. [00:05:45] Μια σύντομη μακρά ιστορία, ο Steve τελικά κέρδισε πάνω, εντάχθηκαν Microsoft όταν είχε μόλις 30 υπαλλήλους. Και από τη στιγμή που συνταξιούχος αρκετά πρόσφατα, η εταιρεία είχε 100.000 υπαλλήλους τα τελευταία χρόνια. Και έτσι ένας ιστοχώρος που είναι γνωστός ως The Verge παρασκευάζεται αυτό το αφιέρωμα σε βίντεο ότι σκεφτήκαμε κοινόχρηστη που σας δίνει μια αίσθηση του πόσο πολύ ενέργεια Steve φέρνει σε κάθε παρουσίαση δίνει. [ΑΝΑΠΑΡΑΓΩΓΗ] -Microsoft Είναι σαν ένα τέταρτο παιδί. Τα παιδιά κάνουν φύγει από το σπίτι. Σε αυτή την περίπτωση, υποθέτω Φεύγω από το σπίτι. Γεια σου Μπιλ, whazzap; [00:06:23] -Wazzap; [00:06:24] -Γεια Σου, wazzap; Έχουμε ήδη δοθεί τεράστια ευκαιρία. Και ο Bill μας έδωσε αυτή την ευκαιρία. Θέλω να ευχαριστήσω τον Bill για αυτό. Θέλω να πάρα πολύ. Ο ρυθμός της καινοτομίας δεν πρόκειται να επιβραδυνθεί. [00:06:42] Είναι πρόκειται να πάρει πιο γρήγορα και πιο γρήγορα. Μπορεί να υπάρχουν λίγοι ανταγωνιστές που είναι δυστυχώς εξαλειφθεί! [00:06:54] Λατρεύω την εν λόγω εταιρεία. Ναι! Είμαι ένα PC, και αγαπώ αυτή την εταιρεία! [00:07:08] Οι προγραμματιστές, προγραμματιστές, προγραμματιστές, προγραμματιστές, προγραμματιστές, προγραμματιστές, προγραμματιστές, προγραμματιστές. Ναι! Web προγραμματιστές! [00:07:19] Web προγραμματιστές! Web προγραμματιστές! Ακούστε τι άλλο σας πάρετε χωρίς επιπλέον χρέωση! [00:07:28] Η εκτελεστική MS-DOS, ένα ραντεβού ημερολόγιο, ένα σωρό κάρτα, ένα σημειωματάριο, ένα ρολόι, ένας πίνακας ελέγχου. Και, μπορείτε να το πιστεύετε; Reversie! [00:07:35] Μπορείτε να τα εγγράψετε σε CD! Μετά τους στο MSN! Μπορείτε να τα mail σε φίλους! [00:07:40] Όλα με ένα κλικ! Ένας Microsoft, μία στρατηγική, ένα team-- επικεντρώθηκε, πειθαρχημένη, επαγγελματική, και εμπειρογνώμονας σε όλα όσα κάνουμε. Επιτρέψτε μου να χρησιμοποιήσετε μια γραμμή από μια παλιά ταινία. [00:07:52] Οι σχέσεις είναι σαν τους καρχαρίες. Κινούνται προς τα εμπρός ή να πεθάνουν. Εγώ πραγματικά πιστεύω τεχνολογίας εταιρείες είναι η ίδια. [00:08:01] [ΤΕΛΟΣ VIDEO Αναπαραγωγή] David J. Malan: Έτσι είμαστε στην ευχάριστη θέση να ανακοινώνουμε ότι ο Steve θα μας ενώνει εδώ στο CS50 επόμενη Τετάρτη στις η συνήθης τόπος και ο χρόνος εδώ. Διάστημα κατά πάσα πιθανότητα θα είναι περιορισμένη. Και έτσι να ενωθούν μαζί μας στο πρόσωπο, παρακαλούμε κεφάλι σήμερα ή λίγο αργότερα να cs50.harvard.edu/register. [00:08:22] Και εμείς θα παρακολουθήσει από Τρίτη επιβεβαιώνοντας κηλίδες. Κοιτάξτε προς τα εμπρός για το επόμενο Τετάρτη κατά τη διάρκεια διάλεξης στο CS50. Τώρα, σε άλλες ειδήσεις, εγώ έτυχε να συναντήσετε αυτό στο The Crimson μόνο η άλλη ημέρα. [00:08:34] Αποδεικνύεται ότι ένα μέλος του προσωπικού του CS50 και τουλάχιστον ένας από τους μαθητές του CS50 εκτελείται αυτή τη στιγμή για το UC Πρόεδρο και τον Αντιπρόεδρο, που με έφερε πίσω με τη δική μου ημέρες πίσω όταν έχασα την εκλογή UC παταγωδώς. Αλλά η ασημένια επένδυση από το γεγονός ότι είναι πάντα Πες την ιστορία είναι ότι ένας από τους είμαι σίγουρος πολλούς λόγους έχασα το οι εκλογές ήταν μια παντελής έλλειψη ένα τάλαντο για τη δημόσια ομιλία. Και έτσι ειλικρινά αυτό, με οδήγησε, ότι η εμπειρία Νομίζω ότι το κατώτερο έτος μου, να υπογράψει στην πραγματικότητα up για το Χάρβαρντ Computer Society, η οποία είναι η ομάδα στην πανεπιστημιούπολη που κατέχει διάφορες τεχνικές συνομιλίες και άλλα πράγματα. Και ανέλαβα τη διδασκαλία τους σεμιναρίων και ως εκ τούτου, είχε την ευκαιρία, ένα θαυμάσια ευκαιρία, για να αρχίσουν να εργάζονται για ακριβώς αυτό. Αλλά, επίσης, είχα την ευκαιρία κατά τη διάρκεια αυτής της εμπειρίας για να διδάξει τον εαυτό μου όλα τα πιο HTML. Και γι 'αυτό procrastinated χθες το βράδυ από κοιτάζοντας μέσα από την ιστοσελίδα της HTML με βάση Έκανα το όπως το 1997, '98, για μου εκστρατεία που μοιάζει με αυτό εδώ. Το ξέρω. [00:09:29] Because-- και φυσικά, προειδοποίηση Αυτό το καταπληκτικό σχεδιαστική απόφαση το 1998 ή οτιδήποτε. Το πρώτο πράγμα που θέλετε χρήστες να κάνει κατά την επίσκεψη στην ιστοσελίδα σας είναι να πρέπει να κάνετε κλικ μια άλλη σύνδεση μόνο για να εισέλθουν ιστοσελίδα σας εδώ με τον μοναχό πίσω, σαν ένα πέπλο κουρτίνα όπου προφανώς πλατφόρμα της εκστρατείας μου ήταν. Και αυτό είναι το μόνο που θα πάρετε σήμερα είναι απλά ένα screenshot. Αλλά διάβαζα μέσα, όπως, αφίσες της καμπάνιας μου χθες το βράδυ και την πλατφόρμα μου. [00:09:50] Και ήμουν τόσο θυμωμένος με τον χρόνο. Πλατφόρμα μου was-- ήταν ενδιαφέρουσα. Έτσι έχω ηρεμήσει από τότε. Αλλά κάποια μέρα, θα τρέξει ξανά και ελπίζουμε σε καλύτερη θέση αυτή τη στιγμή. [00:10:03] Έτσι, HTML, η γλώσσα στην οποία έκανα ότι in-- θα κάνει σύντομα πολύ more-- Είναι κάτι που έχουμε ήδη μιλάμε για τα τέλη του και σε μεγάλο βαθμό λαμβάνοντας ως δεδομένο τώρα ότι έχουμε προχωρήσει και σε άλλες γλώσσες. Αλλά ας σταματήσουμε για μια στιγμή και θέσει μερικά από αυτά τα πράγματα σε αυτό το πλαίσιο. Έτσι, σε μια φράση, τι είναι η HTML; [00:10:18] Ή, τι χρησιμοποιείται για; Όποιος; Ναι. [00:10:20] ΚΟΙΝΟ: Σήμανσης για ιστοσελίδες. David J. Malan: Σήμανσης για την ιστοσελίδα. Έτσι είναι μια markup γλώσσα η οποία σας επιτρέπει να δομήσει μια ιστοσελίδα. Header ανεβαίνει εδώ, τίτλος πηγαίνει εδώ, το σώμα πηγαίνει εδώ. Αυτό είναι έντονους, αυτό είναι italics-- αυτό το είδος της λεπτομέρειας. [00:10:33] Εντάξει, καλά. Έτσι, CSS επιτρέπει you-- και εγώ πήρε μερικές ελευθερίες εκεί με την τολμηρή προσανατολισμό και πλάγιους γιατί Αυτό είναι καλύτερο υλοποιηθεί με αυτό. CSS is-- τι; Πείτε σε μια φράση. Όποιος καθόλου. Ναι. [00:10:46] ΚΟΙΝΟ: Καλλωπισμούς και πράγματα, όπως το πώς να το σχεδιάσουν. David J. Malan: Εντάξει, καλά. Διακοσμητικά στοιχεία που θα επιτρέπουν να σχεδιάσουν ή να στυλιζάρω το με πράγματα όπως η έντονη γραφή και πλάγιους χαρακτήρες και χρώματα, αλλά και πιο λεπτή κόκκους τοποθέτηση των στοιχείων. Το είδος του σας επιτρέπει να πάρετε τα πράγματα τα τελευταίο μίλι έτσι ώστε εάν, για παράδειγμα, στην Pset7, μπορεί να έχετε παρατηρήσει στο σας σελίδα χαρτοφυλάκιο, εάν είστε σε αυτό το σημείο ήδη ότι ένα προεπιλεγμένο πίνακα που κάνει για να δείξει τις εκμεταλλεύσεις των αποθεμάτων του χρήστη και τα μετρητά φαίνεται μάλλον αρκετά ειδεχθή από προεπιλογή με κανένα λευκό χώρο. Όλα είδος της στριμωγμένος μαζί σε σειρές και στήλες. [00:11:18] Λοιπόν, με ένα κομμάτι της CSS, όπως μπορείτε να πραγματοποιήσετε, μπορείτε πραγματικά να τσίμπημα και να τα κάνω κάτι πολύ πιο οικεία και πολύ πιο όμορφη για να δούμε. Έτσι, CSS είναι περίπου η στυλιζάρισμα των δικτυακών τόπων. Στη συνέχεια, όμως εμείς εισήγαγε ένα ακόμη γλώσσα, PHP, η οποία μας επιτρέπει να κάνουμε τι; [00:11:36] Ας κάνουμε ό, τι; Όποιος. Πήρε να βγείτε πέρα οι πρώτες σειρές ζευγάρι. Ναι. [00:11:40] ΚΟΙΝΟ: Δημιουργήστε δυναμικό περιεχόμενο. David J. Malan: Τέλεια. Δημιουργήστε δυναμικό περιεχόμενο. Και μπορείτε να το κάνετε αυτό σε οποιοδήποτε αριθμό των γλωσσών. Τυχαίνει να χρησιμοποιήσετε το PHP επειδή είναι εν μέρει τόσο όμοια με σύνταξη C. [00:11:50] Αλλά η PHP κάνει ακριβώς αυτό. Σας επιτρέπει να δημιουργήσετε δυναμικά εξόδου. Και μέρος αυτής της παραγωγής θα μπορούσε να είναι HTML, όπως έχουμε συνήθως κάνει. Και είναι, επίσης, επειδή είναι μια γλώσσα προγραμματισμού, είναι ο μηχανισμός μέσω του οποίου μπορούμε να μιλήσουμε για τις βάσεις δεδομένων. [00:12:03] Και μπορούμε να κάνουμε ερωτήματα για άλλους servers όπως Yahoos και προγραμματισμού κάνει τίποτα πραγματικά ότι μπορεί διαφορετικά θέλουν να υποχρεώσει έναν υπολογιστή για να κάνουν. Έτσι PHP μας επιτρέπει να ξεκινήσετε δυναμικά την παραγωγή περιεχομένου. Έτσι, με αυτή τη λογική, δεν είχα μια δυναμική ιστοσελίδα πίσω στο 1998. [00:12:16] Ήταν απλά μια στατική ιστοσελίδα. Περιεκτικότητα μου έπρεπε να αλλάξει από χειροκίνητα με το gedit ή κάποιο ισοδύναμο. Αλλά η PHP είναι αυτό που χρησιμοποιείται ή θα μπορούσε να χρησιμοποιηθεί, μάλλον, για κάτι σαν το Ιστοσελίδα Frosh ΔΥ, η οποία έπρεπε να λάβει εγγραφές και διαχειριστείτε μια λίστα των πραγμάτων users-- ότι Τα πραγματικά αλλάζει πάνω χρόνο, ακόμα κι αν συμβεί να χρησιμοποιούν Perl, μια διαφορετική γλώσσας στο χρόνο. [00:12:35] Και στη συνέχεια, τέλος, εισαγάγαμε SQL-- Structured Query Language. Έτσι, ακόμα μια άλλη γλώσσα που χρησιμοποιείται για αυτό; Χρησιμοποιείται για τι; Μπορούμε να βγείτε slight-- Εντάξει, εμείς δεν πρόκειται να πάρει πολύ μακρύτερα από την ορχήστρα εδώ. ΚΟΙΝΟ: Είναι ένα πρωτόκολλο χρησιμοποιείται για να μιλήσουμε για τις βάσεις δεδομένων. David J. Malan: Ένα πρωτόκολλο χρησιμοποιείται για να μιλήσουμε για τις βάσεις δεδομένων. Επιτρέψτε μου να το τσίμπημα. Είναι μια φυσική γλώσσα που χρησιμοποιείται να μιλήσετε με databases-- επιλέγει και ένθετα και διαγραφές και ενημερώσεις και πραγματικότητα ακόμα περισσότερα χαρακτηριστικά που δεν έχουμε καν καταδυθεί σε, αλλά μπορεί να θέλετε να explore-- έχουν να διερευνήσει για, ας πούμε, ένα τελικό σχέδιο. Έτσι υπάρχουν αυτά τα διάφορα κομμάτια. [00:13:09] Και ελπίζουμε Pset7, ακόμη και αν προδιαγραφή του είναι αρκετά μεγάλη, είναι σκόπιμα πολύ για να σας καθοδηγήσει μέσα από το πώς αυτά τα πράγματα μπορούν όλα να πληκτρολογήσει μαζί. Τώρα, τη Δευτέρα, εισήχθη τον περασμένο γλώσσα μας ότι θα εισαγάγει επίσημα στην η course-- που είναι, το JavaScript. Αυτό, όπως η PHP, είναι ένα ερμηνευμένη γλώσσα. [00:13:25] Αλλά μια βασική διάκριση Πρότεινα τη Δευτέρα είναι ότι, ενώ η PHP εκτέλεσης ή να ερμηνευθεί στο διακομιστή, η οποία σε αυτή την περίπτωση είναι η συσκευή CS50, ή θα μπορούσε να είναι κάποια εμπορική διαδίκτυο διακομιστή στο Internet, Γενικά το JavaScript είναι μια γλώσσα που διατρέχει την πλευρά του πελάτη Δεν διακομιστής side-- έτσι στο πρόγραμμα περιήγησης. Ποια είναι να πούμε, όπως ακριβώς και όταν άνοιξα up Facebook πηγαίο κώδικα και βρήκε όλα αυτών .js αρχεία, το συμπέρασμα ήταν ότι κατά την επίσκεψή σας στο Facebook ή περισσότερα ιστοσελίδες αυτές τις μέρες, μπορείτε να πάρετε όχι μόνο HTML, όχι μόνο CSS, αλλά ένα σωρό το JavaScript κωδικός συχνά με τη μορφή του .js αρχεία. Και τότε είναι η δική σας browser-- Mac ή PC-- που εκτελεί εν λόγω κώδικα. [00:14:03] Αλλά το πρόγραμμα περιήγησής σας εκτελεί. Μπορείτε να σκεφτείτε σε ένα είδος sandbox. Έτσι ο κώδικας JavaScript δεν πρέπει να είναι μπορείτε να διαγράψετε τα αρχεία στον υπολογιστή σας. Δεν θα πρέπει να είναι σε θέση να στείλετε μηνύματα ηλεκτρονικού ταχυδρομείου για λογαριασμό σας. Το είδος του προγράμματος περιήγησης σας από περιορίζει τι μπορείτε να κάνετε με αυτό. [00:14:17] Έτσι με αυτή την έννοια, είναι μια μικρή λιγότερο ισχυρό, ίσως, από C. Αλλά JavaScript μπορεί, ως ένα καλλιέργειας, να χρησιμοποιείται στο διακομιστή, αν και θα έχουν την τάση να μην μιλήσει γι 'αυτό σε αυτό το πλαίσιο. Έτσι τώρα ας συνδέσει αυτά μαζί. Μια εβδομάδα συν πριν, παρουσιάσαμε κάποια HTML για την left-- σούπερ βαρετό ιστοσελίδα. [00:14:34] Απλά λέει γειά σου κόσμο. Και τότε είχα προτείνει για το δεξιά μπορούμε να το είδος του κλέψει ιδέες από τη συζήτησή μας δομές δεδομένων σε C και να σκεφτούμε πως αυτή η ιεραρχική γλώσσα σήμανσης για την αριστερά θα μπορούσε να γίνει ή να εφαρμοστούν στη μνήμη ως πραγματική δομή δέντρου με κόμβους και δείκτες και αυτού του είδους οι λεπτομέρειες. Στη δεξιά, καλούμε ότι ένα DOM-- έγγραφο Αντικείμενο Model-- η οποία είναι ακριβώς ένα φανταχτερό τρόπο λέγοντας δέντρο. [00:14:56] Τώρα, γιατί είναι αυτό χρήσιμο να σκεφτούμε με αυτόν τον τρόπο; Επειδή τώρα με JavaScript, γιατί έχουμε κώδικα που παίρνει να παίξει σε αυτό περιβάλλον, η πραγματική HTML που είναι έχουν σταλεί στον browser ήδη και έχει ήδη έχουν φορτωθεί στη μνήμη από το πρόγραμμα περιήγησης σε ένα δέντρο στο του υπολογιστή σας RAM σαν αυτό, μπορούμε να χρησιμοποιήσουμε το JavaScript πραγματικά να διασχίσει ή να περπατήσει ή αναζήτηση ή να αλλάξετε ότι DOM δέντρο όμως θέλουμε. Έτσι, στην πραγματικότητα, αν νομίζετε σχετικά με facebook.com, εάν χρησιμοποιείτε το χαρακτηριστικό γνώρισμα συνομιλίας, αν χρήση του Gmail και το χαρακτηριστικό GChat, τίποτα όπου έχετε τα μηνύματα που έρχονται ξανά και ξανά και πάλι, αυτά τα μηνύματα είναι πιθανόν, όπως, LI ετικέτα, ετικέτες Κατάλογος τεκμηρίων, ίσως. [00:15:35] Ή ίσως είναι ακριβώς divs που συνεχίζουν να εμφανίζονται κάθε φορά που θα πάρετε ένα άμεσο μήνυμα. Και έτσι αυτό σημαίνει ακριβώς ό, τι Facebook ή το Google κάνει είναι κάθε φορά που θα πάρετε μια μήνυμα από το διακομιστή, είναι πιθανόν χρησιμοποιώντας JavaScript να προσθέσω μόνο ένα άλλο κόμβο σε αυτό tree-- άλλο κόμβο σε αυτό δέντρο που στη συνέχεια οπτικά μοιάζει ακριβώς σαν μια νέα γραμμή κειμένου στην οθόνη σας. Αλλά όπου και αν εισάγοντας σε αυτή τη δομή δεδομένων. [00:15:57] Έτσι, στις τάξεις, όπως CS124 και άλλοι, θα στην πραγματικότητα γράψω περισσότερα κώδικα κατά δομών δεδομένων, όπως αυτό. Αλλά για τώρα σε JavaScript, θεωρούμε ότι απλά έχουμε όλοι αυτής της λειτουργικότητας δωρεάν από την ίδια τη γλώσσα. Ας δούμε ένα παράδειγμα. [00:16:09] Επιτρέψτε μου να ανοίξει ένα αρχείο που ονομάζεται Form.html. Είναι εξαιρετικά απλό. Είναι ακριβώς μοιάζει με αυτό. [00:16:15] Δεν CSS, καμία σκέψη για την αισθητική. Είναι καθαρά λειτουργικές και προφανώς είμαι ζητώντας ένα email, τον κωδικό πρόσβασης, τον κωδικό πρόσβασης και πάλι, και στη συνέχεια ένας έλεγχος να συμφωνήσουν σε ορισμένα όρους και προϋποθέσεις. Αυτό το πηγαίο κώδικα για αυτό Μοιάζει είναι πιθανώς κάτι μπορείτε να μαντέψετε με ένα λίγη σκέψη τώρα. Έχω μια ετικέτα φόρμα εδώ. [00:16:32] Μια ενέργεια είναι προφανώς πρόκειται να πάει σε ένα αρχείο που ονομάζεται register.php. Η μέθοδος Πάω να χρησιμοποιήσετε είναι να πάρετε. Και στη συνέχεια, έχω ένα κείμενο το πεδίο του οποίου το όνομα είναι το email. [00:16:40] Έχω ένα πεδίο κωδικού πρόσβασης του οποίου το όνομα είναι password. Έχω ένα άλλο πεδίο του κωδικού πρόσβασης του οποίου το όνομα είναι κάπως αυθαίρετα επιβεβαίωση. Είναι ακριβώς μια άλλη παράμετρος HTTP. [00:16:49] Και τότε θα έχουμε δεν χρησιμοποιούνται αυτά εκτός δεδομένου ότι οι Frosh ΔΥ demo σε class-- ένα πλαίσιο ελέγχου που είναι μόνο τύπο ισούται με επιταγή. Και θα καλέσω την εν λόγω συμφωνία. Έτσι έχω είδος αυθαίρετα, αλλά βολικά ονομάζεται αυτά τα πεδία. Έτσι, ότι τώρα, όταν αυτή η μορφή παίρνει υποβάλλονται, ας δούμε τι θα συμβεί. Αν κάνω malan@harvard.edu, Θα κάνω έναν κωδικό πρόσβασης των βυσσινί. Θα κάνω έναν κωδικό πρόσβασης του τίποτα. Ας μην συνεργάζονται. [00:17:10] Και εγώ δεν θα τσεκάρετε το κουτάκι. Επιτρέψτε μου να κάντε κλικ στην επιλογή Εγγραφή. Και λέει, hm, να είστε εγγεγραμένοι. Όχι πραγματικά. [00:17:16] Αλλά το URL άλλαξε. Έτσι, αυτή η μορφή ήταν σαφώς επιτρέπονται να υποβάλει στο register.php. Αλλά προφανώς, θα πρέπει να είναι αλίευση μερικά από αυτά τα λάθη. Τώρα, σε Pset7 και μερικά παραδείγματα διάλεξη μας, θα γενικά εκτυπώσετε ένα μεγάλο κόκκινο μήνυμα λάθους εδώ λέγοντας, λείπει το όνομα, ή λείπει κωδικό. Έχουμε ξανακάνει αυτό και έχουμε ανίχνευση Έγινε λάθος πλευρά του διακομιστή. [00:17:37] Αλλά πολλές ιστοσελίδες αυτές τις μέρες κάνει ανίχνευση πλευρά σφάλμα πελάτη όπου η διεύθυνση URL δεν αλλάζει. Το σύνολο του σελίδα δεν ανανεωθεί. Μπορείτε να πάρετε άμεση ανατροφοδότηση από το πρόγραμμα περιήγησης. Ίσως κάτι δεν πάει το κόκκινο. [00:17:48] Ίσως μπορείτε να πάρετε ένα pop up. Αλλά δεν σπαταλάτε το χρόνο αποστολής για ο server τα δεδομένα που είναι ελλιπείς. Ας δούμε πώς μπορούμε να επιτύχουν αυτό το χαρακτηριστικό, καθώς και. [00:17:56] Επιτρέψτε μου να πάω να form1.html, το οποίο έχει την ίδια εμφάνιση. Αλλά αν αυτή τη φορά να κάνω malan@harvard.edu και πληκτρολογώ κατακόκκινο και εγώ δεν συνεργάζονται περαιτέρω αλλά κάντε κλικ στο κουμπί Εγγραφή, παρατηρούμε τώρα. Δεν είναι η πιο σέξι λύση. Έχω τουλάχιστον αλιεύονται αυτό το σφάλμα. Και έχω χρησιμοποιήσει την προειδοποίηση λειτουργία σε JavaScript-- το οποίο είμαστε μόνο με τη χρήση στην τάξη. Σε γενικές γραμμές, δεν πρέπει να χρησιμοποιήσετε αυτό γιατί μπορεί πολύ γρήγορα να βγούμε του ελέγχου. Αλλά οι κωδικοί πρόσβασης δεν ταιριάζουν είναι το σφάλμα. [00:18:19] Επιτρέψτε μου να προχωρήσει και κάντε κλικ στο OK. Αλλά ποιο είναι το βασικό πακέτο εδώ είναι ότι η διεύθυνση URL δεν αλλάζει. Γι 'αυτό και δεν έχω ενοχλήσει σπατάλη ώρα του server ζητώντας μια ερώτηση που θα μπορούσα να έχω κατάλαβα την απάντηση για τον εαυτό μου. [00:18:30] Και το χρήστη, ακόμη και αν έχουν μιλήσει γι 'αυτό μεγαλύτερο από το χρήστη πρόκειται να το σκεφτούμε αυτό, πρόκειται να έχει άμεση ανατροφοδότηση. Δεν υπάρχει λανθάνουσα κατάσταση με η συνδεσιμότητα του δικτύου. Έτσι, ας ρίξουμε μια ματιά σε αυτό το πηγαίο κώδικα. [00:18:40] Form1.html εμφάνιση δομικά παρόμοιο εδώ. Η μορφή είναι στην πραγματικότητα το ίδιο. Αλλά ας δούμε τι έκανα εδώ κάτω. Και υπάρχουν διαφορετικοί τρόποι να γίνει αυτό. Και έχω κάνει την πιο ευθεία ακολούθου αλλά όχι πιο κομψό τρόπο ακόμα. Έχω μια ετικέτα σενάριο. Στη συνέχεια καλέστε document.getElementById («εγγραφή»). Και έχω αποθηκεύσει αυτήν την τιμή στη μορφή, μια μεταβλητή. [00:19:04] Έτσι, ό, τι έχω κάνει; Μπορείτε να σκεφτείτε document.getElementById ως μια ειδική λειτουργία που Η JavaScript σας δίνει ότι κυριολεκτικά τα χέρια σας μια δείκτη σε έναν από τους κόμβους ή ορθογώνια σε αυτό το δέντρο. Μέχρι τώρα αυτό είναι τι μορφή μεταβλητής μας σε JavaScript είναι στην πραγματικότητα δείχνοντας. [00:19:21] Μέχρι τώρα η σύνταξη είναι διαφορετική από C. Αλλά κάνουμε μερικά πράγματα εδώ. Ένα, αυτό είναι ένα λίγο παράξενο αναζητούν, σίγουρα έναντι C. Αλλά κοιτάξτε στη γραμμή 35. Έτσι, στην αριστερή form.onsubmit. Υπενθυμίζουμε ότι onsubmit είναι σαν ένα πεδίο σε μια struct. Αν νομίζετε ότι από τη μορφή μεταβλητής είναι απλά να είναι ένα struct C, θα μπορούσε να έχει κάποια πεδία. [00:19:42] Πίσω στην ημέρα, είχαμε φοιτητές ονόματα, Αναγνωριστικά, τα σπίτια, εκείνο το είδος των πεδίων. Απλά σκεφτείτε onsubmit ως ένα άλλο πεδίο. Αλλά είναι ένα ειδικό πεδίο, διότι η Ο φυλλομετρητής είναι προγραμματισμένες εκ των προτέρων να αναμένουν .onsubmit να μην είναι μια αξία όπως έναν αριθμό ή κορδόνι, αλλά να είναι πράγματι μια συνάρτηση ή η διεύθυνση της συνάρτησης στη μνήμη του υπολογιστή. [00:20:02] Και πράγματι, αυτό είναι ό, τι Αυτή η λέξη-κλειδί εδώ κάνει. Αυτό, λέει, να μου δώσει μια νέα λειτουργία. Αλλά ποιο είναι το όνομά του πρόκειται να είναι, προφανώς; [00:20:09] Η σκέψη πίσω μέχρι τη Δευτέρα. Ποιο είναι το όνομα αυτού του λειτουργία με βάση αυτή τη σύνταξη; Όχι, εννοώ, υπάρχει σαφώς κανένα όνομα associated-- σίγουρα όχι σε ό, τι έχω επισημανθεί εδώ. [00:20:21] Αλλά αυτό είναι πραγματικά εντάξει. Αυτό είναι ένα ανώνυμο λειτουργία, ή μία λάμδα λειτουργία όπως μερικοί μπορεί να το αποκαλούν. Και αυτό σημαίνει ότι απλά είναι ακόμα μια λειτουργία. Είναι απλά, δεν μπορείτε να καλέσετε από το όνομα. Αλλά αυτό είναι εντάξει. Επειδή και πάλι, ο browser προγραμματισμένες εκ των προτέρων από εταιρείες όπως η Google ή Microsoft ή Mozilla ή άλλους να απλά να ξέρετε ότι αν το .onsubmit τομέα μέσα από ένα στοιχείο της φόρμας έχει η αξία, το αντιμετωπίζουν ως μια function-- ένας δείκτης λειτουργία, αν θέλετε. Και το αποκαλούν, όταν υποβληθεί η φόρμα. [00:20:46] Έτσι τι κωδικό θα πρέπει να εκτελεστεί όταν υποβληθεί η φόρμα; Προφανώς, τα πάντα στο εσωτερικό της σγουρά κηδεμόνα. Και αυτό είναι μόνο υφολογικά. [00:20:53] Θα μπορούσατε να το κάνετε αυτό, όπως έχουμε την τάση να κάνουμε το CS50. Αλλά σε JavaScript, οι περισσότεροι άνθρωποι έχουν την τάση να το κρατήσει στην ίδια γραμμή μόνο και μόνο επειδή είναι πιο ξεκάθαρα είναι που σχετίζονται με τη λειτουργία αυτή λέξη κλειδί. Έτσι, τώρα τι κάνω; [00:21:03] Αν form.email.value ισούται ίσων η κενή συμβολοσειρά ή τίποτα, είναι εδώ μια ειδοποίηση όπου Πάω να πω, πρέπει να δώσετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας, και στη συνέχεια επιστρέφει false. Και αυτό είναι ότι ψευδούς δήλωσης ότι εμποδίζει τη φόρμα από την υποβολή της. Εν τω μεταξύ, εάν η τιμή του κωδικού πρόσβασης είναι κενό, Πάω να φωνάζω στο χρήστη και να πω, θα πρέπει να δώσετε έναν κωδικό πρόσβασης. [00:21:21] Εν τω μεταξύ, τα πράγματα γίνονται όλο και λίγο πιό φανταχτερό εδώ. Αν form.password.value δεν ίση form.confirmation.value, Το άλλο πεδίο, φωνάζεις το χρήστη ότι οι κωδικοί πρόσβασης δεν ταιριάζουν όπως αυτά δεν το έκανε πριν από λίγο. Και τότε αυτό είναι ένα λίγο πιο σέξι, γιατί γνωρίζουν ήξερα εννοιολογικά ότι ελέγχεται είναι το όνομα ενός πλαισίου ελέγχου της. [00:21:40] Έτσι, μπορώ να χρησιμοποιήσω μόνο ένα επιφώνημα σημείο να πει εάν ο έλεγχος δεν είναι checked-- είναι το Boolean αξία, αλήθεια ή false-- Θα φωνάζω στο χρήστη για το λόγο αυτό. Διαφορετικά, αν έχουμε περάσει όλες αυτές τις προϋποθέσεις, ας επιστρέψει αλήθεια. Ας το έντυπο πρέπει να υποβληθεί. Και αυτό, τότε θα συμβεί. [00:21:56] Ας πληκτρολογήστε σε βαθύ κόκκινο χρώμα. Ας ελέγξει για το πλαίσιο, κάντε κλικ στην επιλογή Εγγραφή. Και τώρα πάω μέχρι τον προορισμό. Τώρα, δεν υπάρχει βάση δεδομένων εκεί. Δεν υπάρχει τίποτα ενδιαφέρον σε register.php. Απλώς χρειάζεται κάτι να μιλήσουμε πραγματικά για. Έτσι, επιτρέψτε μου να παύση, εδώ. Οποιεσδήποτε ερωτήσεις σχετικά με το τι έχουμε κάνει ακριβώς ή ό, τι μερικά από αυτή τη νέα σύνταξη είναι; Εντάξει, ναι; [00:22:17] ΚΟΙΝΟ: Έτσι, κάθε κουτάκι είναι αυτόματα μια Boolean. Δεν χρειάζεται να το δηλώσει σαν αυτό. [00:22:21] David J. Malan: Σωστό. Κάθε κουτάκι που έχει σταλεί σε σας από μια μορφή HTML στον κώδικά σας το JavaScript θα πρέπει να αντιμετωπίζονται, ναι, όπως ένα Boolean value-- αληθείς ή ψευδείς. Είναι μια καλή ερώτηση. Ενώ οι άλλες αξίες, της Φυσικά, υπήρξαν κείμενο, AKA χορδές. [00:22:36] Εντάξει, οπότε επιτρέψτε μου προς τα πίσω λίγο περισσότερο. Ποιο ήταν το νόημα της αυτό; Ακριβώς για να είναι σαφής. Όπως, ήδη γνωρίζουμε, ακόμα και από Pset7 και ακόμη και από την ομιλία της περασμένης εβδομάδας παραδείγματα, ότι μπορούμε προφανώς να ελέγξετε $ _GET $ _POST Δούμε αν ο χρήστης μας δώσει μια κενή τιμή. Θυμηθείτε το κενό λειτουργίας στην PHP. [00:22:54] Έτσι, ακριβώς για να είναι σαφής, τι είναι ένας λόγος που θα μπορούσε επίσης να θέλετε να κάνετε αυτό τον έλεγχο σφαλμάτων στο εσωτερικό του προγράμματος περιήγησης; Ποιο είναι το κίνητρο εδώ; Ναι. [00:23:06] ΚΟΙΝΟ: Ταχύτερη, και εσείς δεν το κάνετε στείλετε άχρηστα δεδομένα στο διακομιστή. David J. Malan: Καλή. Είναι πιο γρήγορα. Δεν στέλνουν άχρηστα δεδομένων στο διακομιστή. [00:23:12] Έτσι, μπορείτε να πάρετε πίσω μια πιο άμεση ανταπόκριση. Και συνολικά, ο χρήστης εμπειρία είναι καλύτερη. Σκεφτείτε την εναλλακτική λύση. [00:23:17] Αν για Gmail-- και ήταν η υπόθεση πριν από πολλά χρόνια. Ας υποθέσουμε ότι έχεις ένα νέο μήνυμα ηλεκτρονικού ταχυδρομείου στο Gmail σας λογαριασμό, αλλά ο μόνος τρόπος μέσω του για να δείτε ότι είναι, όπως, reload ολόκληρη τη σελίδα. Ή ας υποθέσουμε ότι κάνετε κλικ στο ένα σύνδεσμο για να διαβάσετε ένα e-mail. [00:23:29] Όλα πρέπει να φορτώσετε εκ νέου έτσι ότι μπορείτε να δείτε το e-mail. Ή Facebook-- μπορείτε να πάρετε ένα μήνυμα συνομιλίας. Δεν το βλέπω μέχρι να φορτώσετε εκ νέου η σελίδα ή κάντε κλικ κάποιο σύνδεσμο. [00:23:36] Όπως, ότι αυτή θα είναι μια απαίσια ενοχλητική εμπειρία του χρήστη. Και αυτό είναι ό, τι ήταν σαν, σαφώς, πίσω όταν έτρεξα για UC και το διαδίκτυο ήταν πολύ λιγότερο δυναμική και JavaScript δεν ήταν τόσο δημοφιλές όπως είναι τώρα. Και τα πράγματα παίρνουν πολύ πιο δυναμική και πολύ περισσότερο πλευρά του πελάτη με αυτή την έννοια. [00:23:49] Αλλά υπάρχει μια παγίδα εδώ, και Αυτό είναι το είδος της μια ενοχλητική πέτυχα. Ακριβώς επειδή μπορείτε να προσθέσετε πλευρά του πελάτη ανίχνευσης, όπως αυτό δεν σημαίνει μπορεί ή πρέπει να εγκαταλείψει ανίχνευση πλευρά του διακομιστή. Μπορείτε ουσιαστικά θέλουν να βάλουν σας τον έλεγχο σφαλμάτων σε δύο μέρη. Επειδή ό, τι ήταν ένα του δίδαγμα από το άρθρο που διάβασα μερικά αποσπάσματα από με αυτό το ηλίθιο CMS system-- Διαχείρισης Περιεχομένου System-- που ήταν την εφαρμογή του συστήματος ελέγχου ταυτότητας του, σύνδεσής της με ποιο μηχανισμό; Το JavaScript. [00:24:20] ΚΟΙΝΟ: τη JavaScript. David J. Malan: JavaScript, ακριβώς, σωστά; Ήταν με τη χρήση JavaScript. Και κυριολεκτικά, εσείς έχετε έπαιξε λίγο πιθανώς με Επιθεωρητή του Chrome. Και αν μπορώ να το βρείτε, να επιθεωρήσει το στοιχείο. [00:24:30] Επιτρέψτε μου να πάω πάνω να κάνουμε όλων των επιλογών του Chrome. Και αυτό είναι το πόσο εύκολο είναι να απενεργοποίηση του JavaScript στο πρόγραμμα περιήγησης. Ελέγξτε, πλέον το JavaScript. [00:24:38] Έτσι, για να είμαστε δίκαιοι, πολλοί από το διαδίκτυο αυτές τις μέρες είναι ακριβώς πρόκειται να σπάσει γιατί Gmail και άλλα sites-- Facebook-- υποθέσουμε ότι Είναι ενεργοποιημένο το JavaScript. Αλλά αν κάνεις κάτι ηλίθιο όπως η επικύρωση μόνο οι χρήστες των εισροών και τον έλεγχο για λάθη από την πλευρά του πελάτη, ένας αντίπαλος θα μπορούσε να κάνει εύκολα αυτό. Και τότε ακόμα πιο έξυπνη αντίπαλος, όπως εσείς τώρα θα μπορούσε να χρησιμοποιήσει το Telnet ή μπούκλα ή εντολές της γραμμής εντολών μόνο και πραγματικά στέλνουν μηνύματα στο διακομιστή ότι ομοίως δεν είναι σφάλμα ελέγχονται. [00:25:05] Έτσι, αυτό είναι περισσότερο ένα χρήστης απόφαση διεπαφή ό, τι είναι ένα πραγματικό τεχνικό improvement-- εφαρμογή πλευρά του πελάτη κάτι σαν αυτό. Έτσι τώρα μια γρήγορη ματιά, αλλά στη συνέχεια, Θα αναβάλει την απευθείας σύνδεση με τα πόδια μέσω για αυτό. Σε μορφή δύο, εμείς στην πραγματικότητα πέρασε και καθάρισε τον κωδικό λίγο. Αλλά επιτρέψτε μου να αναβάλει για ένα από τα βίντεο που μάλλον θα ενσωματώσετε σε Pset8 που δείχνει ακριβώς σας ένα παρόμοια σύνταξη χρησιμοποιώντας μια βιβλιοθήκη που ονομάζεται jQuery, το οποίο είναι ένα σούπερ, σούπερ δημοφιλής βιβλιοθήκη σε JavaScript ειλικρινά ότι οι περισσότεροι άνθρωποι απλά χρησιμοποιήστε αυτές τις μέρες και ακόμη και να προκαλέσει σύγχυση ως το ίδιο ον το JavaScript. [00:25:37] Και τείνει να εμπλέξει μερικά σημάδια του δολαρίου και λέξεις-κλειδιά όπως το έγγραφο σε παρενθέσεις εδώ. Αλλά και πάλι, επιτρέψτε μου να αναβάλει για μερικά πιο αργά tutorials σε απευθείας σύνδεση αντί να πάρει δεμένο σε μόλις σύνταξη. Ας περάσουμε σε κάτι λίγο πιο δροσερές όσον αφορά τις εφαρμογές αυτής. [00:25:50] Έτσι, ειδικότερα, επιτρέψτε μου να πάω μπροστά και να ανοίξει αυτό εδώ. Έλα. Εκεί πάμε. [00:25:59] Επιτρέψτε μου να ανοίξει αυτή την εικόνα εδώ. Αδικαιολόγητα περίπλοκο αναζητούν, αλλά περιγράφει μια τεχνική που ονομάζεται AJAX-- Ασύγχρονη JavaScript και XML, όπου το Χ για XML είναι στην πραγματικότητα δεν χρησιμοποιείται πλέον πραγματικά. Τείνει να χρησιμοποιήσετε κάτι αλλιώς ονομάζεται JSON. [00:26:13] Αλλά εδώ είναι το πώς κάτι σαν Χάρτες Google ή το Google Earth λειτουργεί. Ας προσπαθήσουμε αυτό on the fly, στην πραγματικότητα. Επιτρέψτε μου να πάει μπροστά και να ανοίξει του Chrome στον browser μου. [00:26:21] Και επιτρέψτε μου να πάω σε, λένε, maps.google.com. Και πραγματικά, αν είστε παλιά Αρκεί να θυμηθούμε τι, όπως, MapQuest ήταν σαν πίσω στην ημέρα, και ίσως να εξακολουθούν να λειτουργούν όπως αυτό. Όταν χρησιμοποιείται για την αναζήτηση something-- 33 Oxford Street, Cambridge, Mass, ας κάνουμε this-- σας θα ήταν στην πραγματικότητα, αν ήθελε να μετακινηθείτε προς τα πάνω και κάτω, αριστερά και δεξιά, θα μοιάζουν με ένα μεγάλο βέλος στην κορυφή, και Θα σας δείξω ένα άλλο πλαίσιο του χάρτη εδώ. Ή μπορείτε να κάνετε κλικ το αριστερό και εσείς θα πάμε εδώ, ή άλλο κλικ και θα πάει εδώ. Όμως, αντί αυτά ημέρες, εμείς φυσικά μόνο θεωρούμε δεδομένο ότι μπορούμε να πάμε γύρω από Cambridge αρκετά γρήγορα απλά κάνοντας κλικ και σύροντας. Αλλά παρατηρήσετε ότι υπάρχουν κάποιες δυσλειτουργίες. [00:26:59] Αν το κάνω αυτό αρκετά γρήγορα, ό, τι φαίνεται να συμβαίνει όπως εγώ σύρετε λίγο πάρα πολύ γρήγορα για τον υπολογιστή για να συμβαδίσει; Τι βλέπεις; Ναι. [00:27:07] ΚΟΙΝΟ: Τα εικονοστοιχεία δεν ανανεώνονται. David J. Malan: Η εικονοστοιχεία δεν ανανεώνονται. Υπάρχει actually-- και εσείς θα μπορούσε να δει αυτό, στην πραγματικότητα, εάν παρακολουθείτε on-line και παύση αυτό ή στην πραγματικότητα επιβραδύνει τα πράγματα για once-- θα δείτε ότι υπάρχουν πλακάκια, τετράγωνα ή ορθογώνια που λείπουν από τον χάρτη μέχρι ένα κλάσμα του δευτερολέπτου αργότερα, περισσότερα δεδομένα, Περισσότερες εικόνες στην πραγματικότητα εμφανίζονται στην οθόνη. Και στην πραγματικότητα, αν το κάνουμε αυτό με την εξέταση μέχρι Chrome's-- ας πούμε, Chrome-- ας δούμε. Δεν μπορούμε να το κάνουμε αυτό. [00:27:31] Ω, κραυγών. Ας ανοίξει maps.google.com. Επιτρέψτε μου να κάνω το παράθυρο μεγαλύτερο ξανά. [00:27:36] Πηγαίνετε πίσω στο 33 Oxford Street. Ποια ήταν η ιστοσελίδα ήμουν σε πρόσφατα; Είχα αυτό, όπως, ιδιωτικό αλαζονικό να τον εαυτό μου ότι είχα τότε στιγμιαίο μήνυμα κάθε φίλο που ήταν σε απευθείας σύνδεση ο οποίος ήθελε να το ακούσει. Υπάρχει κάποια ιστοσελίδα. Νομίζω ότι είναι Comcast-- έτσι ένα πολύ μεγάλο αμερικανικό ISP. Μπορείτε, κατά την υπογραφή επάνω για νέο καλώδιο υπηρεσία μόντεμ ή το καλώδιο παροχής υπηρεσιών τηλεόρασης, έχουν μια μορφή πολύ λογικές όπου θα σας ρωτήσω για τη διεύθυνσή σας. Και έχει αυτό το καταπληκτικό χαρακτηριστικό που ονομάζεται αυτόματο πλήρη, όπως το Google, που αρχίζει να γεμίζει σε απάντηση στο ερώτημά σας. [00:28:04] Το πρόβλημα είναι, που κάνουν αυτόματη συμπλήρωση για τα πρώτα πράγματα που πληκτρολογείτε. Έτσι, εάν αρχίσετε να πληκτρολογείτε στο 33, θα σας δείξει κυριολεκτικά σε κάθε σπίτι στην Αμερική που ξεκινά με τον αριθμό 33 πριν συνεχίσετε να αναμένουμε από εσάς να πληκτρολογήσετε περισσότερο. Έτσι, εάν πληκτρολογήσετε 33 Οξφόρδης, τότε θα σου δείχνει κάθε δρόμο στην Αμερική, που έχει 33 Οξφόρδης στην το όνομά του, ανεξαρτήτως της πόλης ότι είστε σε. [00:28:25] Και τότε θα συνεχίσετε να πληκτρολογείτε. Και τέλος, συνειδητοποιεί ότι δεν κάνουν προσφορά υπηρεσιών στο σπίτι σας στο Cambridge ή κάτι τέτοιο. Αλλά το θέμα είναι, αυτό είναι το πιο όνειο εφαρμογή της αυτόματης ολοκληρωθεί ποτέ. [00:28:34] Και είμαι απλώς πρόκειται off σε αυτή την εφαπτόμενη ξανά. Αλλά υπάρχουν καλοί τρόποι για να χρησιμοποιούν JavaScript και κακά τρόπους. Και αυτό δεν είναι απαραίτητα η καλύτερη. [00:28:40] Αλλά το θέμα εδώ, πριν από αυτό υβρεολόγιο, ήταν να ανοίξουν τα εργαλεία κάτω εδώ και να ανοίξει τα εργαλεία για την ανάπτυξη, όπως έχουμε ενθαρρύνονται πριν, και να παρακολουθήσουν το Δίκτυο καρτέλα, όπως κάνω κλικ πολύ γρήγορα. Και παρατηρήσετε ένα σωρό της να πάρει τις αιτήσεις που συνέβη. Όλα αυτά συνέβησαν από τότε που σέρνεται. [00:28:57] Και το πιο πιθανό, μάλιστα πολλές από αυτές τις σειρές τώρα είναι κάθετος εικόνα JPEG Τύπων MIME ή τύπους περιεχομένου. Αυτό συμβαίνει γιατί ποιο χρώμιο κάνει κάθε φορά που κάνω κλικ και σύρετε, κάντε κλικ στην επιλογή και σύρετε, είναι ότι είναι συνειδητοποιούν, OH, Πρέπει να πάμε ζητήσει από την Google για το κεραμίδι στο χάρτη που είναι εδώ, γρήγορα να το κατεβάσετε μέσω HTTP, και στη συνέχεια προσθέστε το στη λεγόμενη DOM στα προγράμματα περιήγησης στο Web σε δέντρο της μνήμης αναπαράσταση έτσι ώστε ο χρήστης, μου, βλέπει ότι ενημερώθηκε κεραμίδι. Και αυτό γιατί από μια τεχνική που ονομάζεται AJAX. Πίσω στην ημέρα, είναι πραγματικά ήταν η υπόθεση ότι αν ήθελε να αλλάξει ό, τι είναι στην οθόνη, θα πρέπει να κάνετε κλικ επάνω, κάτω, αριστερά, δεξιά. Και τότε μια νέα σελίδα θα ανοίξει. Αλλά αυτές τις μέρες, τα πάντα είναι πιο δυναμική. Αυτό συμβαίνει με τον τρόπο που εμείς οι άνθρωποι θα Ελπίζουμε ότι πραγματικά θα διαδραστικά. Και αυτό επιτυγχάνει αυτό με την μέσω μιας τεχνικής που ονομάζεται AJAX, το οποίο είναι ίσως το καλύτερο εξηγηθεί με ένα παράδειγμα. Κατ 'αρχάς, επιτρέψτε μου να πάει μπροστά και να ανοίξει ένα αρχείο ονομάζεται quote.php σε Κωδικός κατανομή του σήμερα. [00:29:53] Και στη συνέχεια, επιτρέψτε μου να κάνω symbol-- κραυγών. Επιτρέψτε μου να κάνω το σύμβολο = GOOG μόνο για κάποιο απόθεμα. Ή στην πραγματικότητα, ας κάνουμε το ένα από το Pset ΔΩΡΕΑΝ. Enter. [00:30:05] Και τώρα παρατηρήσετε τι παίρνω πίσω. Έτσι, αυτό είναι μια πραγματικά μικρό αρχείο PHP που έχω έγραψε ότι δανείζεται απλά κώδικα από τη λειτουργία αναζήτησης Pset7 του και φτύσει χρήση αυτής της σγουρά τιράντες και εισαγωγικά και σημειογραφία του παχέος εντέρου, προφανώς, η τιμή της τρέχουσας απόθεμα για το Η εταιρεία που περνάτε στο μέσω get. Έτσι, αυτό είναι διαφορετικό από τα περισσότερα από ό, τι έχουμε γίνεται στην εν λόγω ανακοίνωση είμαι κυριολεκτικά φτύσιμο τι μοιάζει κώδικα JavaScript. [00:30:27] Στην πραγματικότητα, αυτό είναι ένα αντικείμενο JavaScript. Στην πραγματικότητα, ακριβώς για να είναι πιο σαφής, Τη JavaScript Αντικείμενο Notation-- JSON-- είναι μόνο ένα φανταχτερό τρόπο λέγοντας ότι μπορεί να αντιπροσωπεύουν δεδομένα σε JavaScript πολύ όπως μπορείτε σε PHP χρησιμοποιώντας ζεύγη κλειδιών αξίας. Έτσι, αν ήθελα να δηλώσουν μια μεταβλητή σε JavaScript να αντιπροσωπεύει Zamyla, για instance-- ένα struct για Zamyla-- και εμείς θα το ονομάσουμε σπουδαστής, αυτή η μεταβλητή. ID της είναι ένα, το σπίτι είναι Winthrop, και το όνομα είναι Zamyla. [00:30:53] Αλλά μπορεί επίσης να έχει μια σειρά από αντικείμενα. Έτσι, αν πραγματικά ήθελε να έχει μια σειρά σε JavaScript που περιέχουν πολλαπλά αντικείμενα, αυτό χρόνος που εκπροσωπούν το προσωπικό, Θα ήθελα να έχουμε αυτά τα τρία κομμάτια του κώδικα πίσω στην πλάτη με πλάτη για αυτά τρία πρώην μέλη του προσωπικού. Έτσι, η σύνταξη, αρκετά παρόμοια με both-- σε PHP. Αλλά αυτό είναι ιδιαίτερα το JavaScript. Είναι σημειογραφία αντικειμένου. Έτσι τι είναι αυτό χρήσιμο για; [00:31:17] Αν γράψω κωδικό που φτύσει JSON-- Τη JavaScript Αντικείμενο Notation-- πράγματα που μοιάζει με αυτό ή πράγματα που μοιάζει με τη δομή Zamyla του, Μπορώ να χρησιμοποιήσω πραγματικά αυτό σε προγράμματα που γράφω. Επιτρέψτε μου να πάω να ajax0.html. Και αυτό δεν είναι πολύ too-- σκέψη να δοθεί στην αισθητική. Αλλά προσέξτε τι συμβαίνει. [00:31:34] Επιτρέψτε μου να πάει μπροστά και πληκτρολογήστε δωρεάν εδώ. Κάντε κλικ στο κουμπί Get Quote. Και παρατηρήσετε η διεύθυνση URL δεν έχει αλλάξει. Αλλά έκανα πάρετε ένα αναδυόμενο παράθυρο με τα φαινόμενα σημερινή δεκάρα των τιμών των μετοχών των $ 0,15. Έτσι, δεν είναι όλα τόσο άσχημα. Αλλά η διαφορά είναι ότι κατά κάποιο τρόπο, αυτά τα δεδομένα ήρθε πίσω σε μένα άμεσα. Αλλά ας κάνουμε ένα βήμα προς την κατεύθυνση κάτι περισσότερο εξοικειωμένοι. Στην έκδοση ενός από αυτό, επιτρέψτε μου πληκτρολογήστε πάλι ελεύθερη, κάντε κλικ στην επιλογή Get Quote, και now-- Ω, αυτό ήταν στην πραγματικότητα η έκδοση jQuery. Ας me-- δεν το έκανα fast-forward αρκετά αρκετά μακριά. Επιτρέψτε μου να πάω στην έκδοση δύο, η οποία είναι εκεί που ήθελα. Παρατηρήστε τι έχω κάνει εδώ. Έχω ένα web page-- ένα σούπερ απλή έκδοση οποιασδήποτε ιστοσελίδας μπορείτε να χρησιμοποιήσετε σήμερα με ένα πεδίο κειμένου εδώ για δωρεάν και στη συνέχεια, προφανώς μόνο κείμενο. [00:32:14] Αυτό δεν είναι μια μορφή εδώ, προφανώς. Αλλά αν κάνω κλικ να πάρει απόσπασμα, παρατηρήσετε ιστοσελίδα μου πρόκειται να αλλάξει όσο κι αν μόλις πήρε ένα νέο άμεσο μήνυμα ή σαν να έχω μόλις μετακόμισε το χάρτης και απαιτούνται για να πάρει περισσότερα δεδομένα προστίθενται δυναμικά στην ιστοσελίδα χωρίς την αλλαγή URL και το χρήστη εμπειρία να πάρει διακοπεί. Πράγματι, είμαι ακόμη στο ακριβώς το ίδιο place-- ajax2.html. [00:32:35] Έτσι, ας ρίξουμε μια ματιά μόνο σε αυτό το παράδειγμα και να δούμε πώς συμβαίνει αυτό. Επιτρέψτε μου να πάω σε ajax2.html. Και παρατηρήσετε την πρώτη μορφή. [00:32:44] Εδώ κάτω, είμαι στροφή off αυτόματο πλήρη. Μερικές φορές παίρνει ενοχλητικό, αν το πρόγραμμα περιήγησης προσπαθεί να σας δείξει Όλη η ιστορία σας. Έτσι, μπορείτε να το κάνετε στο HTML από ακριβώς λέει η αυτόματη συμπλήρωση off. [00:32:53] Έχω δώσει αυτό το κείμενο πεδίου α symbol-- μάλλον, ένα αναγνωριστικό του σύμβολο. Και τώρα, αυτό είναι ένα ενδιαφέρον χαρακτηριστικό. Δεν έχουμε μιλήσει για το διάστημα, αλλά μπορείτε να σκεφτείτε σαν μια παράγραφο ετικέτα ή ετικέτα div. Είναι αυτό που λέμε σε σειρά στοιχείων, τα οποία σημαίνει ότι δεν θα πάρετε μια παράγραφο σπάσει πάνω και κάτω από αυτό. Είναι ακριβώς πρόκειται να μείνουν στην γραμμή χωρίς χτυπώντας το ισοδύναμο των εισέλθει. Έτσι έχω δώσει αυτό το κομμάτι της HTML πρέπει να καθοριστεί ένα μοναδικό αναγνωριστικό ότι εγώ αυθαίρετα ονομάζεται τιμή. Και έχω ένα κουμπί Υποβολή. [00:33:21] Επειδή τώρα here-- και αυτό είναι πραγματικά σούπερ εκπληκτικό το πόσο λίγο κώδικα μπορείτε να γράψετε για να κάνουμε σχετικά τακτοποιημένο things-- παρατηρήσετε τι έχω κάνει μέχρι εδώ, αν μου μετακινηθείτε προς τα επάνω στο κεφάλι αυτής της σελίδας. Έχω συμπεριληφθεί για πρώτη φορά στην το κεφάλι μου μια ετικέτα script ότι οι αναφορές στην πραγματικότητα μια Αρχείο JavaScript αλλού. Αυτό είναι από τον οργανισμό ότι γράφει jQuery, και αυτό ακριβώς σας δίνει την τελευταία έκδοση της βιβλιοθήκης του jQuery. [00:33:42] Έτσι, αυτό είναι το είδος του σαν κοφτερά περιλαμβάνονται σε C ή επιβάλλουν σε PHP. Μπορείτε να χρησιμοποιήσετε την ετικέτα script με ένα χαρακτηριστικό πηγή. Αλλά τώρα το δικό μου κώδικα είναι πρόκειται να είναι ακριβώς εδώ. [00:33:52] Ανακοίνωση έχω μια συνάρτηση που ονομάζεται αποσπάσματα. Και αυτό φαίνεται λίγο αινιγματικά με την πρώτη ματιά. Αλλά ας δώσουμε έμφαση αυτό πέρα. Δώσε μου μια μεταβλητή που ονομάζεται URL. Εκχώρηση κυριολεκτικά αυτή τη σειρά. Έτσι, μονά εισαγωγικά, διπλά εισαγωγικά στο Τη JavaScript μου δίνει μόνο ένα string. Τι κάνει η συν κάνουμε; Αλληλουχία. [00:34:08] Έτσι, αυτό τώρα είναι η σύνταξη jQuery η οποία παίρνει λίγο να συνηθίσει. Αλλά αυτό ακριβώς σημαίνει να πάει να μου το DOM κόμβο του οποίου το μοναδικό αναγνωριστικό είναι σύμβολο. Το hashtag σημαίνει ότι υπάρχει μοναδικό αναγνωριστικό σύμβολο. [00:34:21] Το σύμβολο του δολαρίου στο παρένθεση ακριβώς σημαίνει, τυλίξτε αυτό στο jQuery ένα είδος μυστική σάλτσα έτσι μπορείτε να πάρετε πρόσθετη λειτουργικότητα. Και τότε .val είναι προφανώς μια λειτουργία, ή όπως λέμε σήμερα, μια μέθοδος εσωτερικό αυτού του κόμβου που σας δίνει ακριβώς την τιμή. Έτσι, με λίγα λόγια, άσχημο και σύγχυση όπως αυτό φαίνεται με την πρώτη ματιά, Αυτό σημαίνει απλά να πάρει με το χρήστης πληκτρολογήσει σε, το έβαλε στο τέλος του string από τη συνένωση αυτή. Αυτό είναι όλο. [00:34:43] Μέχρι τώρα, οι τρεις τελευταίες γραμμές. Μπορείτε να αποσπάσουν πολλά λειτουργικότητα από τρεις γραμμές. Αυτό το σύμβολο του δολαρίου, ως ένα στην άκρη, είναι απλά ένα ψευδώνυμο για μια ειδική παγκόσμια μεταβλητή ονομάζεται κυριολεκτικά jQuery. [00:34:55] Σύμβολο του δολαρίου ακριβώς φαίνεται δροσερό. Έτσι, η κοινότητα jQuery ακριβώς το είδος από αυτό που χρησιμοποιείται ως ειδικό σύμβολο τους. Αυτό δεν σημαίνει ό, τι αυτό σημαίνει σε PHP. Σε JavaScript, σύμβολο του δολαρίου είναι ακριβώς όπως ένα γράμμα της αλφαβήτου ή ένας αριθμός για μια μεταβλητή. [00:35:07] Μπορείτε να έχετε μόνο το όνομα. Απλά φαίνεται δροσερό. Έτσι, η κοινότητα εγκρίθηκε ως ένα ψευδώνυμο για τη δική τους βιβλιοθήκη που ονομάζεται jQuery. [00:35:13] Και αυτό είναι εξαιρετικά δημοφιλής. Έτσι πάρτε JSON είναι ακριβώς αυτό. Είναι μια λειτουργία που η λαοί στο jQuery έγραψε ότι παίρνει JSON από ένα server-- Τη JavaScript Αντικείμενο Συμβολισμοί. Από ποια διεύθυνση URL είναι ότι πρόκειται για να πάρει αυτές τις πληροφορίες; Προφανώς από αυτή τη διεύθυνση URL εδώ. [00:35:27] Και τι θα πρέπει να κάνει το πρόγραμμα περιήγησης, όπως Μόλις παίρνει πίσω αυτήν την απάντηση; Και αυτή είναι η μαγεία του AJAX, έτσι ώστε να speak-- Ασύγχρονη JavaScript στο XML. Είναι δύσκολο να δει κανείς με μια τέτοια απλό παράδειγμα που είχαμε εδώ. [00:35:41] Αλλά αυτό ήταν ασύγχρονη σε την έννοια ότι, όταν κωδικό μου εκτελούνται σταλεί ένα μήνυμα προς το server για να πάει να πάρει εμένα κάποια JSON. Και αυτό συνέβη σούπερ γρήγορο ότι πήρα μια απάντηση. Αλλά αυτό που είναι ενδιαφέρον είναι ότι αυτή η γραμμή κώδικα δεν κολλάει ο υπολογιστής μου. [00:35:55] Δεν είδα ένα εικονίδιο περιστροφής. Δεν είχα χάσει το την ικανότητα να μετακινήσετε το ποντίκι μου. Ο φυλλομετρητής μου ήταν πραγματικά τέλεια πρόστιμο. [00:36:01] Επειδή ο τρόπος που το JavaScript χειρίζεται το απόκριση από το διακομιστή είναι ως ακολούθως. Μπορείτε εγγραφείτε τι θα καλέσετε μια λειτουργία επανάκλησης, το οποίο απλά σημαίνει, hey, το JavaScript. Μόλις το διακομιστή απαντά με JSON, καλέστε αυτό το ανώνυμο λειτουργία. [00:36:18] Και παρακαλώ πέρασε σε αυτή τη λειτουργία ανεξάρτητα από εγχόρδων ο διακομιστής φτύσει ως ένα επιχείρημα που ονομάζεται δεδομένων. Έτσι με άλλα, λόγια, εάν Είμαι συναρμολόγηση δυναμικά ένα quote.php URL που περνά σε αυτή την σύμβολο, όπως δωρεάν ή GOOG ή οτιδήποτε, Είμαι στη συνέχεια, λέγοντας Javascript για να πάει να πάρει αυτό το URL. Να θυμάστε ότι το πρόγραμμα περιήγησης πρόκειται να επιστρέψει κάτι ότι μοιάζει είδαμε earlier-- αυτό. [00:36:42] Και αυτό το δεύτερο επιχείρημα εδώ για να πάρετε JSON λέει είναι να καλέσετε τη λειτουργία αυτή όταν ο server παίρνει πίσω είτε πρόκειται για 10 χιλιοστά του δευτερολέπτου από σήμερα ή τα 10 δευτερόλεπτα από τώρα. Και μόλις το κάνετε, προσθέστε την τιμή στην σελίδα. Αυτή η σύνταξη εδώ μόνο σημαίνει να πάει να πάρει τον κόμβο από το δέντρο του οποίου το μοναδικό αναγνωριστικό είναι price-- αυτό το διάστημα είδαμε νωρίτερα. [00:37:01] Αυτή η μέθοδος ονομάζεται HTML ακριβώς λέει, πάει να αντικαταστήσει η HTML που υπάρχει με data.price. Τι είναι data.price; Λοιπόν, το πρόγραμμα περιήγησης, υπενθυμίζουν, μου έδειξε αυτό έρχεται πίσω. Έτσι, αυτό είναι δεδομένα. [00:37:14] Και γι 'αυτό είναι λίγο αινιγματικό για να δείτε τα κόμματα εδώ. Αλλά στην πραγματικότητα, επιτρέψτε μου να το κάνουμε αυτό. Επιτρέψτε μου απλώς να επικολλήσετε αυτό πραγματικά γρήγορα σε gedit και να δείξει αυτό, όπως δείξαμε Δομή Zamyla νωρίτερα. [00:37:27] Αυτό που ο διακομιστής στέλνει πίσω είναι ένα μικρό αντικείμενο που μοιάζει με αυτό. Και έτσι είναι data.price μόλις μου έδωσε 0,1515. Έτσι, πολλά κινούμενα μέρη εδώ όλα με τη μία. [00:37:39] Ωστόσο, οι σημαντικές βελτιώσεις είναι ότι έχουμε αυτή την ικανότητα να κάνουν πρόσθετες HTTP αιτήματα χρήση JavaScript χωρίς να χρειάζεται να επαναλάβετε τη φόρτωση της σελίδας. Και τότε μπορούμε πραγματικά αλλάξτε την ιστοσελίδα σχετικά με τη μύγα. Και αποδεικνύεται ότι JavaScript και άλλες γλώσσες μπορεί να χρησιμοποιηθεί όχι μόνο τώρα να μεταλλάσσονται ιστοσελίδες, αλλά για να γράψει πραγματικά λογισμικό σε ένα πραγματικό υπολογιστή, δεν περιορίζεται μόνο στο Chrome ή τα παρόμοια. [00:38:00] Στην πραγματικότητα, if-- Colton, θα σας ήθελα να ενωθούν μαζί μας πίσω μέχρι εδώ με τον κωδικό του εργαστηρίου σας, και Chang, καθώς; Ας πάμε μπροστά, αφού μίλησε για ανώνυμο λειτουργίες και callbacks και πραγματικά να δελεάσει τύχη εδώ με ένα live demo με αιμορραγία τεχνολογία αιχμής, ένα από τα Αυτές οι συσκευές Elite κίνησης. Τώρα, αυτή η συσκευή, ανάκληση, είναι μια μικρή συσκευή USB καθώς that-- ότι είναι beautiful-- που συνδέεται στον θύρες USB σας. [00:38:25] Και τότε παρέχει εισόδου με τη μορφή ανθρώπινων χειρονομιών με την ανίχνευση χρησιμοποιώντας υπέρυθρες ακτίνες, ουσιαστικά, κινήσεις από το χέρι σας. Έτσι, ενώ αυτό που προσπάθησε Μαρία για πριν ήταν μυώδης, στην πραγματικότητα το αίσθημα τι αλλάζει χέρι σας, αυτό είναι υπέρυθρη βάση. Έτσι ψάχνει για μετακινήσεις στο εσωτερικό το είδος της σφαίρας από ένα πόδι ή έτσι της ίδιας της συσκευής. [00:38:46] Γιατί, λοιπόν, δεν μπορώ να πάρω μια μαχαιριά σε αυτό το πρώτο; Και ας πάμε μπροστά και να ρίξει σας επάνω σε υπερυψωμένες εδώ. Οπότε ας βάλουμε το laptop Colton είναι εδώ. Έχουμε Ανδρέα στην τηλεόραση. Και τι θα θέλατε να κάνετε πρώτα; [00:39:00] COLTON: Προχωρήστε και μόνο βάλτε τα χέρια σας πάνω από αυτόν τον τύπο και θα δείτε κάποια υπέροχη λάμψη. [00:39:04] David J. Malan: Πολύ ωραία. Όλα αυτά συμβαίνουν σε πραγματικό χρόνο. ΟΚ. Εντάξει, και Ναι. Τόσο ωραίο. Εντάξει, τι άλλο μπορούμε να κάνουμε; [00:39:15] COLTON: Μετάβαση στην επόμενη οθόνη και να δούμε. [00:39:17] David J. Malan: Εντάξει. [00:39:19] COLTON: ένα διασκεδαστικό λίγο παιχνίδι όπου μπορείτε να πάρετε για να κάνει τα ρομπότ. [00:39:21] David J. Malan: Εντάξει, έτσι αυτό είναι ψεύτικο χέρια μου δείχνει τι πρέπει να κάνουμε. COLTON: Ναι Έτσι προχωρήστε και να αρπάξει ένα από τα μπλοκ και να το βάλετε στην κορυφή του σώματος του εν λόγω ρομπότ. David J. Malan: Ω, δεν υπάρχει χέρι μου. Ω. ΟΚ, αξιολάτρευτο. Περιμένετε ένα λεπτό, εντάξει. Εκεί πάμε. [00:39:41] COLTON: Έκανα ένα για ατύχημα. [00:39:43] David J. Malan: Εντάξει, θα πάρω αυτόν τον τύπο. Γαμώτο! Όταν εξασκούμε αυτή την τελευταία νύχτα, ξέρετε τι περιήλθε σε αυτό; [00:39:51] Όπως αυτό. ΟΚ. Επόμενο μία; [00:39:55] COLTON: Σίγουρα. [00:39:56] David J. Malan: Εντάξει, και υπάρχει ένα τρίτο. Εντάξει. COLTON: Και σε αυτό το ένα, μπορείτε να πάρετε to-- David J. Malan: Ω, αυτό είναι όμορφο. COLTON: --yeah, να πάρει χώρια αυτό το λουλούδι. David J. Malan: ΟΚ. Όχι; Αναπάντητες. [00:40:14] COLTON: Ω, εκεί θα πάτε. [00:40:15] David J. Malan: Αχ, κοίτα αυτό. Πολύ ωραία. Λοιπόν, γιατί dont 'παίρνουμε από έναν εθελοντή εδώ που θα ήθελαν να έρθουν πάνω. Πόσο περίπου εκεί στο πράσινο, είναι αυτό; [00:40:27] Εντάξει, και ας have-- αντί να κάνει ότι, κάποιοι από εσάς μπορεί να ξέρει αυτό το παιχνίδι here-- έκοψε το σκοινί, ίσως; Ας δούμε. Έχουμε τα ποτήρια μας για πάνω από εδώ; [00:40:37] ΟΚ. Σας ευχαριστώ. Ποιο είναι το όνομά σου; [00:40:39] ΚΟΙΝΟ: Laura. [00:40:40] David J. Malan: Laura; Νίκαια για να δείτε. Αν δεν σας πειράζει βάζοντας Google Glass πάνω από τα γυαλιά σας. Αυτό είναι Colton. [00:40:46] COLTON: Γεια σας. Χάρηκα για τη γνωριμία. [00:40:48] David J. Malan: Εντάξει, έλα γύρω. Εντάξει, έτσι τι θα πάμε να κάνουμε εδώ, έχοντας παίξει αυτό πριν, έχει βάλει το χέρι σας πάνω εδώ το Leap Motion. Και τώρα τα βέλη σας θα πρέπει να κινηθεί. Ω, nope. [00:40:57] ΚΟΙΝΟ: Όχι. [00:40:58] David J. Malan: Εμείς δεν θέλουν να σταματήσουν το κάπνισμα ακόμα. ΟΚ, περιμένετε. Πάνω από εδώ. Έτσι παρατηρήσετε καθώς κρατάτε σας δάχτυλο πάνω από κάτι, ξεκινά το ποντίκι για να πάει πράσινο, το οποίο είναι το πώς θα κάνετε κλικ. [00:41:06] Έτσι αιωρούνται πάνω Play. Και μόνο ένα δάχτυλο είναι μια χαρά. Και τώρα κάντε κλικ στο μικρό πράσινος τύπος στα αριστερά. Και τώρα κρατήστε μέχρι να γεμίσει πράσινο. Καλή. Τώρα, όπως, ένα επίπεδο επάνω στην κορυφή. [00:41:16] ΚΟΙΝΟ: Ναι, θέλουμε ένα επίπεδο, εδώ. [00:41:20] David J. Malan: Καλή. Εντάξει, έτσι το μόνο που έχετε να κάνουμε είναι να κόψει το σχοινί. Ο δρομέας είναι το λευκό εκεί κάτω. [00:41:28] Πολύ ωραία. Εντάξει, είναι έτοιμος να πάρει σκληρότερα. Έτσι, κρατήστε το δάχτυλό σας πάνω από το επόμενο τώρα. Καλή. Αυτό και μόνο είναι δύσκολο. [00:41:39] ΚΟΙΝΟ: Ω χάλια. ΟΚ. Θέλει να πάει με αυτόν τον τρόπο. Ω χάλια, that-- [00:41:44] David J. Malan: Ναι. Δευτερογενής στόχος είναι να πάρετε όλα τα αστέρια. Εντάξει, το επόμενο. [00:41:53] Ας δούμε αν μπορείτε να πάρετε αυτό το τρίτο. Καλή. Εντάξει, πάω εκεί. [00:42:06] Σίγουρα. Ω, πολύ ωραία. Εντάξει. [00:42:11] Γιατί λοιπόν να μην έχουμε αναβάλλει εδώ σήμερα; Ας έρθει κανείς στην μέχρι που θέλει να παίξει. Ευχαριστώ πολύ για την Laura εθελοντή μας. Και εμείς θα δούμε τη Δευτέρα. [00:42:18] ΚΟΙΝΟ: Θέλετε πιθανώς αυτά πίσω. [00:42:21] ΟΜΙΛΗΤΗΣ 2: Στην επόμενη CS50--