ΤΟΜΑΣ REIMERS: Γεια, σε όλους. Το όνομά μου είναι Tomas Reimers. 

MIKE RIZZO: Και είμαι Mike Rizzo. 

ΤΟΜΑΣ REIMERS: Είμαστε δύο CS50s TS. Και σήμερα είμαστε οδηγεί ένα σεμινάριο για την JavaScript και CSS για web εφαρμογές. Αν θέλετε να ακολουθήσετε μαζί, το σύνδεση είναι εκεί πέρα. Και θέλετε να το βάλετε επάνω σχετικά με την εν συντομία υπολογιστή; 

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

MIKE RIZZO: Εντάξει. Οπότε ας ξεκινήσουμε. 

ΤΟΜΑΣ REIMERS: Έτσι θέλετε να ξεκινήσετε; OK. 

MIKE RIZZO: Ναι. Έτσι, πρώτα θελήσαμε να ξεκινήσουμε με ένα ευρύ εικόνα σχετικά με το διαδίκτυο και τύπους αρχείων κατά το σχεδιασμό ιστοσελίδων. Ενώ αυτή η παρουσίαση θέλουμε να μπει σε ένα JavaScript πολλά πολλά αργότερα, θέλαμε να ξεκινήσουμε με Απλά, το είδος της, όπως το μάτι ενός πουλιού από ό, τι μια ιστοσελίδα είναι και πώς να σκεφτείτε για το σχεδιασμό ενός ιστοσελίδα για την έναρξη. 

Έτσι, εσείς, σε αυτό το σημείο - με αυτό είναι την Παρασκευή το βράδυ - θα πρέπει να έχουν υπέβαλε χρηματοδότηση CS50 σας πρόβλημα θέτει. Ας ελπίσουμε, ότι ήταν μια καλή γεύση για το τι web προγραμματισμό μπορεί να είναι. Αλλά εδώ θέλουμε, το είδος του, να δώσει Σας άλλη γεύση, καθώς και. 

ΤΟΜΑΣ REIMERS: Έτσι απλά για να ανακεφαλαιώσουμε τι συμβαίνει, όταν πληκτρολογείτε το URL σας web browser σας, η διεύθυνση URL παίρνει κοίταξε στον υπολογιστή. Και ο υπολογιστής σας συνδέεται σε έναν άλλο υπολογιστή, που φιλοξενεί το δικτυακό τόπο. Εντάξει, έτσι ώστε όταν θα πάτε στο google.com, είστε συνδεδεμένη σε μία από της Google υπολογιστών, η οποία έχει την αρχεία για google.com. 

Ζητά συνέχεια, για ένα συγκεκριμένο αρχείο. Έτσι, αν πάτε σε - Δεν ξέρω - example.com / index.html ή / test.html, θα πάμε να ζητήσει ότι συγκεκριμένο αρχείο. Και ο web server συμβαίνει να επιστρέψει σε εσάς. 

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

Αρχεία JavaScript, το οποίο ορίζει αλληλεπίδραση με την ιστοσελίδα. Τα αρχεία εικόνας, τα οποία είναι απλά εικόνες. Και ενδεχομένως να συνδέονται με άλλα αρχεία HTML, το οποίο μπορείτε να επισκεφθείτε στη συνέχεια. 

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

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

Αλλά σκεφτόμαστε πίσω στην αρχή του PSET, έπρεπε να οριστεί τα δικαιώματα για τα πάντα, σωστά; Έτσι, αυτό ακριβώς βασικά μας επιτρέπει να γνωρίζουμε ποιος μπορεί να διαβάσει, να γράψει, και, ενδεχομένως, εκτελέσει κάθε ένα από τα αρχεία. Έτσι θα πάμε να κάνουμε μια γρήγορη - hm; 

ΤΟΜΑΣ REIMERS: Έτσι θα πάμε να κάνει ένα γρήγορο demo. Έτσι απλά να σας θυμίσω, όταν συνδεθεί με τον υπολογιστή της Google - όποιος - και να ζητήσει για ένα αρχείο, πρώτα τον υπολογιστή πρέπει να βεβαιωθείτε ότι είστε εξουσιοδοτημένος πραγματικά να δείτε το αρχείο ή διαβάσει ότι αρχείο, επειδή δεν μπορείτε απλώς να ρωτήσω για οποιοδήποτε αρχείο σε αυτόν τον υπολογιστή, έτσι δεν είναι; Αυτό θα ήταν ένα κίνδυνο για την ασφάλεια. 

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

Έτσι, αν έχουμε ιδιοκτήτη, την ομάδα, και τότε ο κόσμος. Και στη συνέχεια, για κάθε μία από αυτές τις ομάδες, μπορείτε μπορεί να έχει μία από τις τρεις άδειες, OK, ή πολλαπλές τους. Μπορείτε να έχουν δικαιώματα για read. Μπορείτε να έχετε κατάλληλα δικαιώματα. Και μπορείτε να έχετε δικαιώματα εκτέλεσης. 

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

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

Ομάδα, θα πάμε για τη θεραπεία της ίδιο τον κόσμο για τώρα. Γι 'αυτό πρέπει δικαιώματα ανάγνωσης. Αλλά δεν χρειάζεται εγγραφή ή δικαιώματα εκτέλεσης. Και τώρα, αν σκεφτούμε πίσω στην πρώην PSETs, τι αντιλαμβανόμαστε είναι αυτό το είδος του μοιάζουν με δυαδικό, σωστά; 1 σημαίνει ναι. 0 για όχι. Και μπορούμε πραγματικά να μεταφράσει αυτό σε δυαδικό. 

Έτσι, 110 στο δυαδικό θα είναι 6. 100 θα είναι 4. Το ίδιο με τον κόσμο. Έτσι, ο αριθμός που θα πάρετε για το δικαιώματα για αυτό θα ήταν 644. 

MIKE RIZZO: Και αν νομίζετε ότι πίσω όταν chmoded κάτι, πιστεύω έδωσαν στο πρόβλημα που η παράδειγμα όπου θα μπορούσατε να κάνετε κάτι σαν chmod 644 και στη συνέχεια το όνομα του αρχείου. Το 644, στη συνέχεια, μπορείτε τώρα να δείτε άμεσα όπου αυτό προέρχεται. Έτσι, ελπίζουμε ότι κάνει ότι λίγο πιο σαφής. 

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

ΤΟΜΑΣ REIMERS: Και τότε έχουμε μια γρήγορη κατάλογο κοινών δικαιώματα. Έτσι, καταλόγους, θέλετε να chmod 711 πραγματικά. Γρήγορη άκρη - για έναν κατάλογο για να έχουν εκτελέσιμο άδεια σημαίνει να είναι σε θέση για να ανοίξετε τον τηλεφωνικό κατάλογο. Εικόνες, CSS, JavaScript, HTML ανάγκες 644, διότι, ουσιαστικά, τον κόσμο ανάγκες δικαιώματα ανάγνωσης. 

Και PHP, το οποίο εσείς έχετε δει αν και δεν θα πρέπει να μιλάμε γι 'αυτό αυστηρώς τυπικά chmoded με άδεια 600 επειδή έχει τρέξει με τα δικαιώματα του ιδιοκτήτη. Τουλάχιστον στη συσκευή. 

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

ΤΟΜΑΣ REIMERS: Και το τελευταίο σχόλιο για γρήγορα την τοπική ανάπτυξη είναι - έφερε αυτό, αλλά εμείς απλά ήθελε να το φέρει επάνω πάλι - αν σας ρωτήσω για ένα διακομιστή - τόσο τοπικό κεντρικό υπολογιστή, για παράδειγμα, com ή οτιδήποτε άλλο. - και δεν καθορίσετε ένα συγκεκριμένο αρχείο, το αρχείο που ο υπολογιστής σας πρόκειται να ζητήσει ονομάζεται index.html. Ή, εάν αυτό δεν υπάρχει, index.php. 

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

Έτσι, μια γρήγορη λόγος που έχουμε βιβλιοθήκες προγραμματισμού - υπάρχουν πολλά προβλήματα σε προγραμματισμού, η οποία κρατήσει μέχρι βρεθώ ξανά, και ξανά, και ξανά. Μπορείτε να παρατηρήσετε ότι πολλές ιστοσελίδες πρέπει να μπορούν να έχουν drop down μενού, για παράδειγμα, ή χρειάζονται την ικανότητα για να έχουν μια πολύ τυπική κουμπί στυλ, το οποίο μπορεί να μην είναι το πιο εύκολο πράγμα. Τώρα που αρχίζουν να μπει σε HTML, συνειδητοποιούν ότι τα κουμπιά μπορούν πραγματικά να εξετάσουμε πολύ άσχημο αν δεν κάνουν τίποτα. 

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

Έτσι προ-καθορίζουν μια δέσμη των κατηγοριών ή προκαθορίζει ένα σωρό λειτουργίες για Περίπτωση του JavaScript, το οποίο μπορείτε να καλέσετε αργότερα. Και τότε μπορείτε να, το είδος του, να πάρει πρόσβαση σε αυτόν τον κώδικα, χωρίς χρειάζεται να κάνετε τίποτα. Ένα παράδειγμα της βιβλιοθήκης ήταν CS50.H. Αυτό ήταν μια βιβλιοθήκη που δώσαμε για να σας πίσω σε μία εβδομάδα, γεγονός που επέτρεψε σε σας για να κάνετε τα πράγματα όπως ότι GetInt και GetString χωρίς να χρειάζεται να γράψετε κάθε κωδικό εαυτό σας. 

MIKE RIZZO: Εντάξει. Μέχρι εδώ, όπως ακριβώς θα έπρεπε να περιλαμβάνει σε μας γ αρχεία το διαφορετικό βιβλιοθήκες, θα πρέπει επίσης να συμπεριλάβει στην HTML αρχεία μας διαφορετικές βιβλιοθήκες. Για παράδειγμα, αν θέλαμε να συμπεριλάβει από μία συγκεκριμένη βιβλιοθήκη JavaScript εδώ, ίσως, αυτό που έχουμε γράψει τους εαυτούς μας, όπως είναι φιλοξενούνται τοπικά ονομάζεται script.js, εμείς απλά χρησιμοποιήσετε αυτό το συμβολισμό. 

Έτσι έχουμε ισούται τύπου script JavaScript κώδικα ισούται JavaScript.js. Και αν νομίζετε ότι πίσω CS50 σας πρόβλημα χρηματοδότησης που, αν φαινόταν σε header.php στο φάκελο προτύπων, θα πρέπει να έχετε δει ορισμένες από αυτές συμπεριλαμβάνεται. Έτσι, αυτό το πρώτο - τα σενάρια - Είναι περιλαμβάνουν μια βιβλιοθήκη JavaScript. Συμπεριλαμβανομένων μια βιβλιοθήκη CSS είναι λίγο διαφορετικό. 

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

Και τελικά, η HREF, το οποίο θα μάλλον είδαμε το ATAGs σας για τη σύνδεση σε διαφορετικές συνδέσεις απλά διευκρινίζει η σύνδεση του πού θα βρείτε αυτό. Για παράδειγμα, αν θέλαμε να συνδέσετε ένα διαφορετική βιβλιοθήκη - ας πούμε - που έζησε στο styles.css. Και θέλαμε να συνδέσει ότι αυτό είναι που φιλοξενούνται στο διαδίκτυο, θα αντιγράψετε αυτό. Και στη συνέχεια να το επικολλήσετε σε ό, τι έχουμε εδώ αντ 'αυτού. 

ΤΟΜΑΣ REIMERS: Εντάξει, ελπίζω να σας τα παιδιά είναι ήδη εξοικειωμένοι με το πώς να συνδέσει CSS. Θα έπρεπε να το κάνουμε αυτό το τελευταίο σετ καφέ σας. JavaScript, κάποιοι από εσάς ίσως έχουν κάποια εμπειρία με. Κάποιοι από εσάς μπορεί να μην. 

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

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

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

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

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

MIKE RIZZO: OK. Έτσι, τώρα κινείται πάνω παραδείγματα της πραγματικής CSS. Σε αυτό το σημείο μέχρι τώρα, ίσως δεν έχουν αντιμετωπίσει αυτό. Αλλά μπορεί να έχω συναντήσει σε καθημερινή ζωή σας, όπου κάτι ότι φαίνεται ένας τρόπος για ένα πρόγραμμα περιήγησης μπορεί να μην έχουν την ίδια εμφάνιση τρόπο σε άλλο πρόγραμμα περιήγησης. 

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

ΤΟΜΑΣ REIMERS: Θα περιλαμβάνεται το σύνδεσμο. Σε αυτό το σημείο, είναι χρήσιμο εάν έχετε το laptop σας εκεί κοιτάζοντας το χώρο. Και δίνουμε αυτό σας το δικαίωμα τώρα απλώς και μόνο επειδή το τελικό CS50 έργο είναι πραγματικά πρόκειται να Σας ζητώ να το εφαρμόσει με παρόμοιο τρόπο και μέσα από προγράμματα περιήγησης. 

Έτσι απλά για να κρατήσει στο πίσω μέρος της κεφάλι, αυτή είναι μια θαυμάσια βιβλιοθήκη επειδή θα πρέπει, είδος, τυποποίηση πράγματα. Στο Firefox, κάτι που μπορεί να δείξει ως ένα pixel προς τα αριστερά. Και τότε Chrome μπορεί να αποφασίσει ότι στην πραγματικότητα τι εννοούσε ήταν 10 pixels προς τα αριστερά. Και θέλετε να τυποποιήσει αυτό. Normalize θα κάνουν πραγματικά μια πραγματικά καλή δουλειά του κάνει βεβαιωθείτε ότι το site σας φαίνεται το ίδιο σε όλους τους φυλλομετρητές. 

MIKE RIZZO: Έτσι, αν θέλαμε απλά να κάντε κλικ στο σύνδεσμο πραγματικά γρήγορα και δείχνουν σας τι μοιάζει, μπορείτε μπορείτε να το κατεβάσετε χρησιμοποιώντας το γίγαντας κουμπί Λήψη. Ή μπορώ να σας ενθαρρύνω να διαβάσετε περισσότερα γι 'αυτό πατώντας στο σύνδεσμο στο κάτω δεξιά γωνία. 

ΤΟΜΑΣ REIMERS: Και αν όντως κάντε κλικ στο Διαβάστε Περισσότερα εκεί - κάντε κλικ στην πηγή επί GitHub - θα δείτε πραγματικά το open source άδεια για LICENSE.md εκεί. Και θα δείτε εδώ είναι το πολύ δημοφιλές άδεια MIT. Και πάλι, αν έχετε διαβάσει μέσα από το κείμενο, θα είστε σε θέση να το βρείτε στην ιστοσελίδα αναφερόμασταν πριν και είναι σε θέση να κατανοούν χωρίς να χρειάζεται να διαβάσει μέσα από την νομική ορολογία. 

MIKE RIZZO: Εντάξει, ωραία. Έτσι ώστε να είναι Normalize. Θέλαμε να σας δώσουμε ότι πολύ γρήγορα. Ω, έχετε μια ερώτηση; 

ΚΟΙΝΟ: Έτσι, όταν το κατεβάσετε, απλώς ακολουθήστε τον κώδικα που έχουν κάτω από το κουμπί Download; 

ΤΟΜΑΣ REIMERS: Ναι, έτσι όταν κάνετε λήψη - 

MIKE RIZZO: Ω, αυτό είναι ένα μεγάλο σημείο. Έτσι, το ερώτημα ήταν πώς μπορούμε να το κατεβάσετε στην πραγματικότητα; Έτσι, αν κάνουμε κλικ στο σύνδεσμο, βλέπουμε ότι το σκάει στην πραγματικότητα μέχρι τον πηγαίο κώδικα. Έτσι, για να γίνει αυτό, ό, τι μπορούσαμε Δεν είναι απλά κάντε κλικ στο κουμπί Αποθήκευση ως. Αποθήκευση ως και ότι θα πρέπει να να εμφανιστεί ένα αρχείο. Και τότε μπορούμε να επιλέξουμε να αποθηκεύσετε ως normalize.CSS. Και τότε θα πρέπει να το συνδέσετε σε - 

ΤΟΜΑΣ REIMERS: Με τον ίδιο τρόπο μπορείτε συνδεθούν σε οποιοδήποτε άλλο αρχείο. Και τη στιγμή που θα συνδέσετε το, τι είναι μεγάλη για Normalize είναι ότι θα πραγματικότητα φροντίσει για όλη τη σκληρή λειτουργήσει από μόνη της. Αυτό σημαίνει ότι δεν έχετε για να προσθέσετε οποιεσδήποτε κατηγορίες. 

Δεν χρειάζεται να κάνετε τίποτα παράξενο. Θα ομαλοποιήσει χωρίς εσένα να κάνει τίποτα περισσότερο. Ναι, πρέπει να το συμπεριλάβει. Το Google Chrome δεν ανταποκρίνεται. 

Απλά μια γρήγορη άκρη - Παρατήρησα ότι πήδηξε σε αυτό. Το υπόλοιπο αυτής της παρουσίασης είναι πρόκειται να είναι μια γρήγορη επισκόπηση. Μια έρευνα των βιβλιοθηκών. 

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

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

MIKE RIZZO: Cool. Εντάξει, τώρα ας μιλήσουμε σχετικά με Font Awesome. 

ΤΟΜΑΣ REIMERS: τόσο γραμματοσειράς Awesome είναι ένα πραγματικά τακτοποιημένο χώρο, ειδικά για εκείνους από εμάς που είναι λιγότερο καλλιτεχνικά ταλαντούχος. Αγνοώντας το όνομα γραμματοσειράς Awesome, δίνει Είστε ένα μάτσο εικόνες, οι οποίες είναι πολύ χρήσιμο. Έτσι, πολλές φορές θα εφαρμόσει ένα εικονίδιο που μπορεί να θέλετε, όπως ένα ωραίο x έτσι ώστε να μπορείτε να κλείσετε κάτι. 

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

Έτσι, εδώ θα δείτε έχουμε πράγματα όπως ένα αστερίσκο, μπαρ, κεραυνό, μια ημερολόγιο, ένα bug, ένα βιβλίο, και τα λοιπά. Αυτό μπορεί να είναι πολύ χρήσιμη. Ο τρόπος που περιλαμβάνουν αυτό είναι που περιλαμβάνουν κυριολεκτικά το αρχείο CSS. Και αφού έχετε συμπεριλάβει το αρχείο CSS, τι μπορείτε να κάνετε είναι να δημιουργήσετε ένα ετικέτα με τίτλο Ι. satands για εικονίδιο με την τάξη FA στέκεται για Font Awesome. Και τότε, ανεξάρτητα από κατηγορία που θέλετε. 

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

MIKE RIZZO: Cool, OK. 

ΤΟΜΑΣ REIMERS: Και στη συνέχεια, η τελευταία CSS βιβλιοθήκη θέλουμε να ξεπεράσουμε είμαστε προσπαθεί να κρατήσει το ελάχιστο σε CSS βιβλιοθήκες, επειδή συνειδητοποιούμε το τίτλος αυτής της παρουσίασης Είναι JavaScript Βιβλιοθήκες. Αλλά σκεφτήκαμε ότι μπορούμε, καθώς και σας παρουσιάσουμε τις άλλες βιβλιοθήκες ενώ μιλούσαμε για τις βιβλιοθήκες. 

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

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

Και στη συνέχεια, μετακινηθείτε προς τα κάτω. Πρώτα απ 'όλα, σας δίνουν την CSS που πρέπει να συνδέσετε πραγματικά σε αυτό. Είναι ακριβώς εκεί. Μπορείτε απλά να αντιγράψετε και να επικολλήσετε ότι μέσα Και το ωραίο πράγμα για αυτό είναι στην πραγματικότητα δεν χρειάζεται καν να κατεβάστε το αρχείο. 

Τι πρόκειται να κάνουμε είναι να πρόκειται να συνδεθούν με την έκδοση από αυτό της Google. Έτσι, πίσω στο τι σημαίνει αυτό. Αυτό σημαίνει ότι όταν ένας χρήστης κατεβάζει το αρχείο σας - λήψεις σελίδα HTML σας - HTML σας Η σελίδα πρόκειται για αναφορά αυτό το αρχείο. 

Έτσι, λοιπόν, ο υπολογιστής σας πρόκειται να δούμε, Ω, είναι φιλοξενείται στο google.com και όχι από ό, τι στις theirsite.com. Επιτρέψτε μου να πάω ζητήσει από την Google για αυτό το αρχείο. Και στη συνέχεια, πρόκειται να συμπεριλάβει σχεδόν σαν να ήταν ένας μέρος του το δικό σου site. 

ΤΟΜΑΣ REIMERS: Cool. Και τη στιγμή που θα περιλαμβάνει ότι, στη συνέχεια, να συμπεριλάβετε στο CSS σας, σας δίνει η πραγματική γραμμή. Έτσι ώστε να ρυθμίσετε την οικογένεια γραμματοσειράς ιδιοκτησίας ίση με το όνομα της γραμματοσειράς. 

MIKE RIZZO: OK. Γι 'αυτό και μόλις τελειώσει με το CSS. Και κάποιοι από εσάς ίσως να σκέφτεται, επίσης, είχαμε κάποια CSS για CS50 Οικονομικών. Αλλά CSS βιβλιοθήκης ήταν bootstrap. Είμαστε πραγματικά περιλαμβάνουν Bootstrap λίγο αργότερα στην JavaScript, διότι με η βιβλιοθήκη Bootstrap CSS έρχεται επίσης με πολλή JavaScript ότι Εκκίνησης ή το Twitter - ο οποίος έκανε Bootstrap - χρησιμοποιεί για τη διαχείριση όλων των CSS τους. 

ΤΟΜΑΣ REIMERS: Υπάρχει κάποιος που έχει τυχόν ερωτήσεις μέχρι στιγμής για το CSS σε γενικές γραμμές; Είμαστε καλά; Awesome. 

MIKE RIZZO: Awesome. 

ΤΟΜΑΣ REIMERS: Έτσι κινείται στους JavaScript. 

MIKE RIZZO: Έτσι θελήσαμε να μιλήσουμε jQuery για να αρχίσει με. Έχει κανείς ακούσει για jQuery πριν ή το χρησιμοποίησε; Ναι, ένα ζευγάρι; Έτσι, αν απλά να συνεργαστεί με μητρική JavaScript, θα βρείτε τον εαυτό σας πληκτρολογώντας πολλά μακρά επιλογείς πολλά. Έτσι τι jQuery που κάνει είναι να παρέχει ένα ωραίο περιτύλιγμα για την JavaScript γλώσσα που σας επιτρέπει να επιλέξετε εύκολα και να χειριστούν διαφορετικά στοιχεία εντός του μοντέλου αντικειμένου εγγράφου του ιστοσελίδα ή το DOM, το οποίο πιστεύω ότι εσείς έχετε ακούσει για το διάλεξη σε αυτό το σημείο. 

ΤΟΜΑΣ REIMERS: Εάν δεν έχετε ακούσει αυτό ή αν δεν έχετε παρακολουθήσει διάλεξη όμως, το Document Object Model είναι βασικά πώς είναι τα πράγματα εκπροσωπούνται. Έτσι HTML είδος μοιάζει με ένα δέντρο όταν στην πραγματικότητα το σύρει έξω. Έχετε το στοιχείο HTML στην κορυφή. Έχετε το κεφάλι και το σώμα. 

Και στη συνέχεια, στο πλαίσιο που θα έχουν ό, τι άλλο. Αυτό αναφέρεται ως το DOM - Document Object Model. Έτσι, ένα μοντέλο που αντιπροσωπεύει αντικείμενα σε το έγγραφο είναι ένας εύκολος τρόπος για να σκεφτεί γι 'αυτό. Και ένα από τα μεγάλο πράγμα για jQuery είναι αυτό που πραγματικά κάνει διέρχονται ότι και το χειρισμό στοιχεία μέσα ότι απίστευτα απλή. 

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

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

Έτσι, αν θα πρέπει να επιλέξετε ένα στοιχείο, Internet Explorer θα μπορούσαμε να πούμε ότι είστε πρέπει να κάνουν με αυτόν τον τρόπο. Firefox θα μπορούσε να πει το σωστό τρόπος είναι με αυτόν τον τρόπο. jQuery δεν με νοιάζει. Όταν σας πω jQuery για να επιλέξετε ένα στοιχείο που θα καταλάβω πώς είναι πρέπει να το κάνουμε εντός του browser σας, το χρήστης είναι σήμερα, και στη συνέχεια κάντε με αυτόν τον τρόπο. 

MIKE RIZZO: Ας μην μιλήσουμε για η χρήση του jQuery λίγο. Ακριβώς όπως PHP, jQuery έχει ιδιαίτερη αγάπη για το σύμβολο του δολαρίου. Έτσι, θα διαπιστώσετε ότι κάθε jQuery - καλά, όχι όλα. Μπορείτε μερικές φορές μπορεί να αντικαταστήσει το δολάριο υπογράφουν με την λέξη jQuery. Αλλά γενικά, μόνο και μόνο επειδή είναι μικρότερη, κάθε φορά που βλέπετε είναι jQuery χρησιμοποιείται θα είναι με το σύμβολο του δολαρίου. 

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

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

ΤΟΜΑΣ REIMERS: Για όσους από εσάς άγνωστο, η κονσόλα είναι ένα εργαλείο εντός Chrome, η οποία σας επιτρέπει να, βασικά, εκτέλεση JavaScript σχετικά με την τρέχουσα σελίδα. Αυτό που θα βρείτε εξαιρετικά χρήσιμο όταν είστε πραγματικά debugging και Πρέπει να είναι όπως, ποια είναι η τρέχουσα αξία κάποιου global μεταβλητή ή ό, τι είναι κάτι άλλο; Είναι κάτι σαν GDB, με εξαίρεση ότι μπορείτε πραγματικά να χειραγωγήσουν στοιχεία της σελίδας με σε ένα πολύ πιο εύκολο τρόπο. Και επίσης δεν το κάνει, ουσιαστικά, ελέγξτε με σας, πριν κάνει οτιδήποτε. 

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

MIKE RIZZO: Έτσι για να εισέλθουν στην κονσόλα, Υποθέτω ότι θα πρέπει εν συντομία αναφέρουμε πώς να το κάνουμε αυτό. Κατά τα τελευταία προβλήματα που μπορεί να έχετε μεταχειρισμένα Chrome για να επιθεωρήσει το στοιχείο λειτουργίες ή να δείτε την πηγή της σελίδας - και αυτά είναι προσβάσιμα μόνο από δεξιά κλικ στη σελίδα ή ένα συγκεκριμένο στοιχείο και να κάνει είτε να επιθεωρήσει στοιχείο ή προβολή πηγής σελίδας. Μπορούμε επίσης να αποκτήσετε πρόσβαση στο JavaScript κονσόλα απευθείας από επιλέγοντας επιθεωρήσει το στοιχείο. Έτσι, τότε μπορείτε απλά να πατήσετε κονσόλα στην δεξιά πλευρά. 

Εναλλακτικά, θα μπορούσατε να έχετε πάει επίσης στην άνω δεξιά γωνία, η οποία κόβεται σε αυτή την οθόνη, όπου έχει τις τρεις οριζόντιες γραμμές. Και θα πάει κάτω σε εργαλεία και Στη συνέχεια κονσόλα JavaScript εδώ όπου μπορείτε να δείτε - τουλάχιστον για τα Windows - η συντόμευση είναι ο έλεγχος Shift J. Έτσι, στη συνέχεια αν θέλαμε να επιλέξετε ένα στοιχείο μέσα σε αυτήν τη σελίδα, όπως ακριβώς έδειξε πριν, κάνουμε σύμβολο του δολαρίου ανοιχτό parens και στη συνέχεια αποσπάσματα. 

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

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

ΤΟΜΑΣ REIMERS: Έτσι απλά για να δούμε ότι περισσότερο σε βάθος, αυτό δεν είναι διαφορετικό από τις κλήσεις συναρτήσεων που κάναμε στο C. Το όνομα της συνάρτησης εδώ είναι μια λίγο παράξενο. Είναι το σύμβολο του δολαρίου. Είναι απλά ένα όνομα της συνάρτησης. Δεν υπάρχει τίποτα το ιδιαίτερο γι 'αυτό. 

Έχουμε ανοιχτές παρενθέσεις. Στη συνέχεια, έχουμε ένα επιχείρημα μας, η οποία στην περίπτωση αυτή συμβαίνει να είναι ένα string, η οποία είναι ένας επιλογέας για αυτό. Και στη συνέχεια, έχουμε μας κλειστή παρένθεση. Έτσι μπράβο. 

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

MIKE RIZZO: Έτσι ομοίως, αν θέλαμε για να επιλέξετε ένα στοιχείο που έχει μια ταυτότητα, τώρα θέλουμε να επιλέξετε από ID αντί της κατηγορίας. Θα ήταν ένα παρόμοιο πράγμα, όπου θα κάνει ακριβώς την απότομη σημάδι ταυτότητα. Έτσι είμαστε επιλέγοντας εδώ όλα στοιχεία που έχουν bar ID. 

ΤΟΜΑΣ REIMERS: Και αυτό επεκτείνεται. Αυτό εκτείνεται CSS. Ακριβώς όπως και στο CSS, μπορείτε να επιλέξετε όλα συνδέσεις, οι οποίες έχουν την κλάση foo. Εδώ, είναι το ίδιο πράγμα. 

Θα μπορούσατε να κάνετε a.foo, γεγονός που θα επιλέξετε όλες τις συνδέσεις με την κατηγορία foo. Θα μπορούσατε να κάνετε μια απότομη γραμμή, η οποία θα επιλέξτε τη σύνδεση με τη γραμμή ID και έτσι καθεξής και ούτω καθεξής. Κάθε επιλογέας CSS είναι έγκυρη jQuery επιλογέα. 

MIKE RIZZO: Ναι. ΕΝΤΑΞΕΙ, έτσι τώρα ας μπει σε λίγο χειραγώγησης που μπορούμε να κάνουμε με jQuery μας. Έτσι, jQuery έχει ένα συγκεκριμένο τύπο της σημειογραφίας όπου απλά χρησιμοποιήστε μια κουκίδα στο τέλος. Και μπορείτε να σκεφτείτε αυτό όπως και σε C πώς είχαμε διαφορετικές structs. Και για να πάμε σε αυτά τα structs, θα κάνατε χρησιμοποιήστε μια τελεία για να μπει σε αυτά. 

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

ΤΟΜΑΣ REIMERS: Έτσι μια εύκολη μετάφραση ότι θα ήταν αν jQuery, βασικά, μόλις πήρε foo. Και στη συνέχεια, CSS, δήλωσε, χρώμα κόκκινο και κλείσιμο. Είναι η ίδια ιδέα. Αυτό που κάνει είναι ότι είναι επιλεγμένο όλα τα στοιχεία foo. Και τότε είναι που εφαρμόζεται. Ταξινόμηση της, το χρώμα ακινήτων είναι ίσο με κόκκινο. 

MIKE RIZZO: Ομοίως, μπορούμε επίσης να μεταβάλλει το πραγματικό περιεχόμενο του τι είναι προβάλλεται στον κώδικα HTML της σελίδας, η οποία είναι πραγματικά δροσερό, διότι αυτό σημαίνει ότι σας ιστοσελίδες μπορεί τώρα να είναι εντελώς δυναμική και δεν πρέπει να είναι στατική να εκτυπώσετε χρησιμοποιώντας PHP στην αρχή του η σελίδα που φορτώνεται. Μέχρι εδώ, αν θέλαμε να αλλάξει η πραγματική HTML της σελίδας, θα θέλαμε τώρα να καλέσετε τη συνάρτηση HTML, η οποία στη συνέχεια, μόλις ένθετα ό, τι ορίζουμε σε ότι το στοιχείο που επιλέξατε. Έτσι, εδώ είμαστε επιλέγοντας το στοιχείο με Κατηγορία foo και, στη συνέχεια, λέγοντας ότι είναι HTML είναι τώρα hello world. 

ΤΟΜΑΣ REIMERS: Και όταν σκέφτεστε για Ποια είναι χρήσιμες εφαρμογές της αυτό, αυτό CSS ένα, το πρώτο πράγμα που μπορείτε να αρχίσετε να σκεφτούμε είναι από την άποψη του ακόμα και drop down μενού. Θα μπορούσε να αρχίσει να κάνουμε τα πράγματα όπως, όταν ένας χρήστης αιωρείται πάνω από το επάνω μέρος από μια κάτω πτώση, θέλετε να κάνετε το κάτω μέρος ορατό. Σωστά; 

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

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

ΚΟΙΝΟ: Έτσι θα ενσωματώσετε αυτό στο πλαίσιο ο κώδικας HTML στο είδος του σαν ένα [Δεν ακούγεται]; 

MIKE RIZZO: Σωστά. Ναι, θα φτάσουμε σε αυτό σε λίγο. Ναι, είναι παρεμφερείς λίγο σε PHP. Δεν είναι ακριβώς όμοια. 

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

ΤΟΜΑΣ REIMERS: Έτσι, ένας τρόπος για να σκεφτεί για αυτό είναι αν είμαι στον υπολογιστή σας και Ο Mike είναι, είδος, ο server. Τι πρόκειται να συμβεί είναι Πάω να ρωτήστε Mike, hey, μπορώ να έχω ένα αντίγραφο του αυτή η ιστοσελίδα; Και θα μου δώσει ένα αντίγραφο από αυτό. 

Όχι, δεν είναι το αρχικό πράγμα. Είναι απλά ένα αντίγραφο. Και τότε θα είναι όπως, OH, υπάρχει κώδικας JavaScript εδώ. Σαφώς, θα πρέπει να επεξεργαστείτε το Η σελίδα να είναι σαν αυτό. Και είμαι επεξεργάζεστε το δικό σας αντίγραφο. 

Αλλά αυτό δεν πραγματοποιεί το πραγματικό αντίγραφο. Κι αν ήταν να τον ρωτήσω ξανά ανανεώσετε τη σελίδα, - hey, μπορώ να έχω ένα καθαρό αντίγραφο - ότι πρόκειται να μου δώσει ένα άλλο καθαρό αντίγραφο. Και στη συνέχεια, Πάω να κάνω το ίδιο πράγμα όπως, OH, αυτό JS εδώ που λέει για να επεξεργαστείτε αυτό. Και Πάω να συνεχίσω να το κάνω αυτό. 

MIKE RIZZO: Έτσι, ένα πραγματικά δροσερό πράγμα ότι μπορείτε να κάνετε με jQuery είναι πραγματικά να προσθέσετε διαφορετικούς τύπους των κινούμενων εικόνων στη σελίδα σας. Δεν ξέρω αν έχετε δει ποτέ, όπου προσπαθείτε να το συμπληρώσετε μια φόρμα σε απευθείας σύνδεση και να μην συμπληρώσετε τα πράγματα σωστά. Έτσι, ένα μικρό πράγμα ολισθαίνει προς τα κάτω στην κορυφή και σας λέει δεν το έχετε κάνει σωστά. Παρακαλώ δοκιμάστε ξανά. Και τότε, ίσως ακόμη και μόνο διαφάνεια προς τα επάνω. 

Βγάζει jQuery έχει ενσωματωμένες λειτουργίες που κάνουν όλα αυτά animation πραγματικά, πραγματικά εύκολο. Έτσι, υπάρχει η πρώτη fade ανάληψη καθηκόντων, η οποία μπορείτε να καλέσετε σε κάτι. Και αυτό είναι ένας τρόπος για να αλλάξετε το CSS του το στοιχείο αυτό ως κινούμενα σχέδια. Γι 'αυτό χρειάζεται ό, τι στοιχείο να καλέσετε το fade out σε. Και στη συνέχεια, σιγά-σιγά αλλάζει η αδιαφάνεια που είναι μέχρι να πάει εντελώς διαφανή. 

ΤΟΜΑΣ REIMERS: Η άλλη δημοφιλής έχει ολισθήσει προς τα κάτω, η οποία θα κάνει κάτι που φαίνεται από την ολίσθηση προς τα κάτω. Έτσι, στην περίπτωση του μενού drop down, και πάλι, όταν μάθαμε πώς να ανιχνεύσει όταν αυτό έχει αιωρούνταν πάνω, θα μπορούσατε απλά να πω αυτό κάτω μέρος πέφτουν τώρα. Και στη συνέχεια, φαίνεται με την ολίσθηση προς τα κάτω. 

MIKE RIZZO: Και τότε, αν έχετε μόλις κάποιο είδος των κινουμένων σχεδίων κατά νου ότι jQuery δεν παρέχει απαραίτητα. Για παράδειγμα, ας πούμε jQuery δεν σας παρέχει με μια διαφάνεια κάτω και διαφάνεια προς τα επάνω. Λοιπόν, ας πούμε ότι έχετε ήθελε να γλιστρήσει κάτι από την αριστερή ή από το σωστό είδος της, όπως το CS50 κεντρική σελίδα κάνει όποτε πηγαίνετε σε μια νέα ομάδα. Στη συνέχεια, θα πρέπει πιθανώς να εφαρμόσουν μόνοι σας χρησιμοποιώντας το εμψυχώσει λειτουργία μέσα jQuery. 

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

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

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

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

Τυπικά, η σελίδα του έργου στην περίπτωση του [δεν ακούγεται], σας το είπα ονόματα των κατηγοριών. Στην περίπτωση της JavaScript, δίνει Σας το όνομα των λειτουργιών. Με την ευκαιρία, αν έχουμε κύλιση προς τα πάνω προς την κορυφή, μια γρήγορη πλευρά σημείωση σχετικά με τις λειτουργίες είναι κάθε φορά που βλέπετε μια λειτουργία που εφαρμόζονται όπως αυτό με το σκληρό παρένθεση στη μέση, ότι μέσα ότι η ιδιότητα αυτή είναι προαιρετική. Ακριβώς ένα heads up. Έχω δει πολλές ερωτήσεις γι 'αυτό. 

Έτσι, εδώ μπορούμε να δούμε ότι η έμψυχο παίρνει ιδιότητες ως αναγκαίο επιχείρημα. Και όλα τα άλλα είναι προαιρετική. Σημείωση Side - μπορείτε να σκεφτείτε αυτό, το είδος της, όπως σελίδες man. Ο άνθρωπος είναι σελίδες τεκμηρίωσης για C και για πολλά άλλα πράγματα, όπως καλά. 

MIKE RIZZO: Έτσι, έχουμε μάθει πώς να αλλάξετε διαφορετικά CSS στη σελίδα, εμψυχώσει αυτό, προσθέστε και αφαιρέστε HTML. Αλλά ένα από τα πιο ισχυρά πραγματικά πράγματα σχετικά με JavaScript και ιδιαίτερα jQuery - τι σας επιτρέπει να κάνετε είναι να απαντήσετε σε διαφορετικά στοιχεία που συμβαίνουν. Για παράδειγμα, εδώ έχουμε ένα πρόγραμμα χειρισμού συμβάντων. Και αυτό σημαίνει ότι μόνο όποτε αυτό γεγονός που συμβαίνει, θα το χειριστεί σε ένα συγκεκριμένο τρόπο. 

Μέχρι εδώ, η γενική εκδήλωση jQuery handler είναι η τελεία του. Και στη συνέχεια, το πρώτο πράγμα που παρέχονται είναι ό, τι εκδήλωση θα έπρεπε να ακούει για. Έτσι, εδώ, είναι το κλικ που περιμένουμε για. 

ΤΟΜΑΣ REIMERS: Εναλλακτικά, έχετε σε αιώρηση, το οποίο είναι ένα πολύ δημοφιλές. Έτσι, πίσω στο drop down μενού μου ιδέα. Θα έχετε την πάνω hover. Και τότε θα μπορούσε να αλλάξει αυτό. 

MIKE RIZZO: Σωστά. Και στη συνέχεια, όταν αυτό συμβεί, απλά εκτελεί αυτή τη λειτουργία που του δίνουμε ως επιχείρημα και ότι προειδοποιεί ένα γεια ή γεια. 

ΤΟΜΑΣ REIMERS: Έτσι, στην περίπτωση της JavaScript, αυτό είναι ένα μέρος που πρέπει να απομακρυνόμαστε από την C. Μπορούμε πραγματικά λάβει λειτουργεί ως επιχειρήματα. Και υπάρχουν πολλά πραγματικά πολύπλοκους τρόπους για να γίνει αυτό. Εμείς πάμε για να προωθήσουν έναν τρόπο, το οποίο είναι ότι μπορείτε να ορίσετε το λειτουργούν εκεί. 

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

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

MIKE RIZZO: Υπάρχουν κάποια ερωτήσεις σχετικά με αυτό; Αυτό μπορεί να είναι μια μικρή σύγχυση η πρώτη φορά που θα το δείτε. 

ΤΟΜΑΣ REIMERS: Μπορείτε πραγματικά θέλουν να να ανοίξει ένα αρχείο και να τους δείξουμε κάποια jQuery τώρα; 

MIKE RIZZO: Ναι, ας το κάνουμε αυτό. OK. 

ΤΟΜΑΣ REIMERS: Έτσι τώρα είμαστε στη συσκευή. Και τι έχουμε κάνει είναι ότι έχουμε λάβει το ελευθερία της δημιουργίας και ένα index.html αρχείο, το οποίο συνδέεται με ένα αρχείο JavaScript. Και μπορούμε να ανοίξουμε το - ναι. Λοιπόν, κάνει δύο πράγματα. 

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

Εδώ λοιπόν μπορούμε να πούμε ότι έχουμε περιλαμβάνονται jQuery. Και έχουμε συμπεριλάβει επίσης σενάρια. Ο άλλος τρόπος για να συμπεριλάβει JavaScript είναι ότι μπορείτε να συμπεριλάβετε ένα σενάριο inline ετικέτα που έχουμε στο κάτω μέρος, όπου λέει ο τύπος σενάριο είναι το κείμενο JavaScript. 

Έτσι λέμε, ακούστε, είμαστε για να συμπεριληφθεί μια δέσμη ενεργειών. Και ο τύπος του εν λόγω σεναρίου είναι JavaScript, το οποίο είναι ένα είδος του κειμένου. Πολύ απλό. 

MIKE RIZZO: Έτσι, αυτό, το είδος του, παίρνει να ερώτησή σας για το πώς μπορούμε να περιλαμβάνει JavaScript στο αρχείο μας, γιατί όταν εμείς είχε PHP, μπορούμε να κάνουμε κάτι σαν αυτό. Και τότε, έχουν τις συναρτήσεις PHP μας - ας πούμε τα αποθέματα κάνουμε κάτι με αυτό - πηγαίνει εκεί. Ωστόσο, τώρα έχουμε τις ετικέτες script ότι δίνουμε, τα οποία είναι στην πραγματικότητα μέρος της ίδιας της HTML επειδή δεν είναι απομίμηση είναι ένα αρχείο HTML, όπως το είναι σε PHP, διότι αν πραγματικά να πάνε στο και να ερευνήσει την πηγή της σελίδας, θα δείτε αυτές τις ετικέτες script εκεί με το JavaScript που σχετίζονται με τους σε αυτό. 

Έτσι λοιπόν, αν θέλαμε να γράψετε κάποια JavaScript - ας πούμε ότι ήθελε να αλλάξει το σώμα γιατί αυτή τη στιγμή δεν έχω οποιεσδήποτε άλλες ετικέτες που μπορώ πραγματικά επεξεργαστείτε εκτός από το σώμα. Ας πούμε απλά ήθελα να αλλάξετε το CSS αυτό. Έτσι θα πάμε μπροστά και αλλαγή το χρώμα της στο κόκκινο. 

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

ΤΟΜΑΣ REIMERS: Έτσι, αν πάμε πίσω στο ότι αρχείο ιδίως - την HTML αρχείο - τι πρόκειται για να δούμε είναι ότι έχουμε - να θυμάστε ότι αυτό είναι φορτωμένο, είδος, χρονολογικά. Έτσι έχουμε πρώτα το κεφάλι. φορτώνει αυτά τα δύο αρχεία. Στη συνέχεια πάμε στο σώμα. Και βλέπουμε hello world. Γι 'αυτό και καθιστούν hello world. 

Και τότε το τελευταίο πράγμα που έχουμε είναι ότι έχουν την ετικέτα script. Έτσι ώστε να τρέχει το script tag το γιατί είναι Δεν το λέω να περιμένουμε τίποτα. Και αυτό είναι το πιο βασικό τρόπος για να τρέξει το JavaScript. 

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

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

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

MIKE RIZZO: OK. Έτσι αλλάξαμε κάτι. Αλλά δεν μοιάζει σαν να απαντήσει σε μας σε όλα, επειδή ακριβώς το είδος της έκανε μόλις φορτωθεί τη σελίδα. Έτσι τώρα, αντί να κάνουν αυτό, γιατί Δεν έχουμε προσθέσει ένα πρόγραμμα χειρισμού συμβάντων. 

Οπότε ας κάνουμε κάτι στο σώμα και πάλι. Και ας πούμε ότι το κάνουμε για - κάντε κλικ στο κουμπί. Θα προσθέσει μια λειτουργία. 

Ας αλλαγή: ΤΟΜΑΣ REIMERS το χρώμα του σε κόκκινο και πάλι. Γιατί όχι; 

Αλλαγή Ναι, ας: MIKE RIZZO «το χρώμα του σε κόκκινο και πάλι. Εντάξει. Οπότε ας ξαναφορτώστε τη σελίδα. OK, βλέπουμε - όπως ήταν αναμενόμενο, δεν γίνονται κόκκινα ακόμα. Αλλά τότε μπορούμε να πάμε μπροστά και κάντε κλικ σε αυτό. 

ΤΟΜΑΣ REIMERS: Και δεν γίνονται κόκκινα. 

MIKE RIZZO: Και το κάνει γίνονται κόκκινα, όπως αναμενόταν. 

ΤΟΜΑΣ REIMERS: Και μπορούμε να δούμε πώς μπορούμε να αρχίσουμε να οικοδομήσουμε πολύ βασικό αλληλεπίδραση. Άλλα πράγματα που ίσως να θέλετε να κάνετε είναι, αν δεν θέλετε να κάνετε το σώμα χρώμα κόκκινο, ας κάνει το HTML φόντο κόκκινο χρώμα. Ακριβώς έτσι είναι το ίδιο CSS. 

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

MIKE RIZZO: OK. Ακριβώς όπως ένα παράδειγμα - δεν έχετε πάρει για να δείτε την προηγούμενη - Θα σας δείξω ακριβώς τι φαίνεται όπως όταν έχουμε κρύψει κάτι. Γι 'αυτό θα πάμε μπροστά και να μην γλιστρούν πάνω. 

ΤΟΜΑΣ REIMERS: Θέλετε να τυλίξετε ότι σε μια παράγραφος τύπου πριν το κάνουμε αυτό; 

MIKE RIZZO: OK. Ναι, γιατί να μην το κάνουμε αυτό ακριβώς έτσι μπορούμε να επιλέξετε ένα λίγο περισσότερο. 

ΤΟΜΑΣ REIMERS: Και ας να δώσει μια τάξη. 

MIKE RIZZO: Ναι. Εντάξει, οπότε ας δούμε. Αντί να επιλέξετε το πραγματικό σώμα τώρα, εγώ θα επιλέξετε ακριβώς ό, τι με τάξη γεια, η οποία εδώ απλά ένα πράγμα. Γι 'αυτό και δεν θα πρέπει να ανησυχείτε για αυτό. 

Γι 'αυτό και θα το ανανεώσετε. Θα προχωρήσει και κάντε κλικ σε αυτό. Και αυτό, το είδος του, έκανε μια περίεργη διαφάνεια up πράγμα, το οποίο δεν φαίνεται ότι ελκυστική. Σε γενικές γραμμές, αυτά φαίνονται πολύ ωραία. Υποθέτω, αυτό - για κάποιους λόγο - δεν το έκανε. Θα κάνω μόνο ένα fade out έτσι μπορείτε να δείτε σε αυτό πάρα πολύ. Πολύ καλύτερο. 

Και τότε, αν ανοίξει το JavaScript κονσόλα και πάλι και θέλουμε να δούμε τι μοιάζει όταν εξασθενίσει μέσα Τώρα, εγώ απλά καλέστε fade in σε αυτό. Και σβήνει πίσω μέσα 

Ομοίως, θα μπορούσε πραγματικά να περάσει ένα επιχείρημα για να εξασθενίσει ή fade out, η οποία είναι, το είδος του, η ταχύτητα της. Ας πάμε μπροστά και να λέμε ότι θέλουμε να πάμε σιγά-σιγά ξεθωριάζει μέσα Έτσι υποθέτω ότι ακόμη φαινόταν πολύ γρήγορα. Αλλά ήταν πιο αργή από ό, τι πριν. 

ΤΟΜΑΣ REIMERS: Και αν θέλετε να βρείτε περισσότερες πληροφορίες σχετικά με αυτά τα πράγματα, και πάλι, πήγαινε στην τεκμηρίωση jQuery, το οποίο σας έχουμε δώσει, και να διαβάσετε μέσω αυτών. Τεκμηριώνουν τα καθήκοντά τους απίστευτα καλά. 

MIKE RIZZO: OK. Έτσι υποθέτω ας πάμε πίσω σε αυτό. Και μπορούμε να μιλήσουμε για την τελευταία σελίδα μας. Λοιπόν, μπορούμε να τελειώσουμε με Bootstrap. Και τότε θα το ανοίξουμε για ορισμένες ερωτήσεις. Και εάν εσείς έχετε οποιεσδήποτε ιδέες που θα θέλατε να προσπαθήσει να ρίξει και να δείτε αν μπορούμε να τους εφαρμόσουν με JavaScript γρήγορα. 

Έτσι, πολύ γρήγορα για Bootstrap, η οποία ήταν αυτομάτως στο τελευταία πρόβλημά σας βρίσκεται στον φάκελο CSS και στην πραγματικότητα συνδέεται με το σας header.php. Έτσι θα μπορούσαν να έχουν προστεθεί μαθήματα που ορίζονται εντός Bootstrap σε αυτό. Και θα έχουν στυλ αυτόματα αυτά τα πράγματα αναλόγως. 

ΤΟΜΑΣ REIMERS: Έτσι Bootstrap είναι ένα πολύ μαγικό πράγμα που αναπτύχθηκε από τους ανθρώπους στο Twitter. Και ό, τι είχε σκοπό να κάνει ήταν - πριν ιστοσελίδες ήταν πραγματικά σκληρά για να κάνουν φαίνονται ωραία, ειδικά όταν είχαμε πολλά κοινά στοιχεία. Έτσι, πολλά κουμπιά της web φαινόταν το ίδιο. 

Μια παρτίδα των πεδίων κειμένου μπορεί να γίνει εξετάσουμε καλύτερα από ό, τι το πρότυπο κείμενο τομέα ίσως γνωρίζετε από πραγματικά παλιές ιστοσελίδες ή κακώς γίνονται πραγματικά ιστοσελίδες, οι οποίες ακριβώς μοιάζει με κυριολεκτική πλαίσια κειμένου, χωρίς καμία μορφή κειμένου σκιά ή οποιοδήποτε είδος ωραίο περίγραμμα. Έτσι, αυτό που έκανε ήταν Bootstrap είπε, επίσης, έχουμε πολλά κοινά στυλ. Γιατί δεν κάνουμε ένα κοινό σύνολο CSS και ένα κοινό σύνολο JavaScript ως καλά, το οποίο μπορεί να το στυλ καθώς είναι και οι οποίες να δώσουμε στους ανθρώπους τα πράγματα όπως πτώση down μενού, το οποίο μπορεί να δώσει στους ανθρώπους πράγματα όπως modals. 

Modal είναι ό, τι σκάει πάνω στη σελίδα όποτε αυτό είναι για να κυριολεκτήσουμε κάτι, το οποίο εμποδίζει την περαιτέρω αλληλεπίδραση μέχρι να αλληλεπιδρούν με αυτό. Κάτι τέτοιο είναι, είστε βέβαιοι θέλετε να διαγράψετε αυτό το πράγμα; Δεν μπορείτε να κάνετε τίποτα άλλο μέχρι να πούμε ναι ή όχι. 

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

Θα δείτε εδώ είναι το Bootstrap CSS ιστοσελίδα. Θα δείτε Bootstrap. Και αν μετακινηθείτε προς τα κάτω, θα δείτε πώς να το κατεβάσετε, πώς να εγκαταστήσετε, κ.λπ.. 

MIKE RIZZO: Και μπορείτε επίσης, αρκετά κατά τρόπο ενδιαφέροντα, το προσαρμόσετε να είναι ανεξάρτητα από το είδος των θεμάτων που θέλετε. Ξέρω ότι είναι κάτι που έκανα για μου τελικό σχέδιο όταν πήρα την κατηγορία ήταν το προσαρμόσετε. Μια διαφορετική εκδοχή του Bootstrap ότι είχε ένα διαφορετικό συνδυασμό χρωμάτων και διαφορετικά σχήματα μερικών διαφορετικά πράγματα. Γι 'αυτό σας ενθαρρύνω να παίξετε με αυτό. Είναι το είδος της διασκέδασης να κάνει. 

ΤΟΜΑΣ REIMERS: Κοιτάζοντας πέρα ​​από την κορυφή και πάλι, είναι πολύ παρόμοιο με το γραμματοσειράς Φοβερό site. Μια πολλά έγγραφα θα ξεκινήσει να φαίνεται παρόμοιο, όταν έχετε δει αρκετά από αυτό. Έτσι, εδώ έχουμε το CSS συστατικό αυτό. Και θα δείτε πώς να φορμάρετε τα πράγματα. Έτσι, αν κάνετε κλικ πάνω στα τραπέζια, για παράδειγμα, μπορείτε να κάνετε αμέσως μια τραπέζι αρκετά με την απλή προσθήκη Ο πίνακας τάξη σε αυτό. 

Ίδια πράγματα για τα κουμπιά. Αν απλά προσθέστε το BTN τάξη και BTN υπεκφεύγουν ή BTN πρωτοβάθμια, μπορείτε να πάρετε οποιοδήποτε από αυτά τα κουμπιά με αυτές τις προ-made στυλ. Και τότε, αν ψάχνετε για κάτι πιο σύνθετο από την απλή επανασχεδιασμό τι w ήδη, πάνω σε η καρτέλα JavaScript σε όλη την κορυφή τον έχουν μια δέσμη των συστατικών. 

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

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

MIKE RIZZO: Έτσι, ως είναι πραγματικά γρήγορα πλευρά, ο σχεδιασμός αυτής της ιστοσελίδας που μπορούμε γρήγορα βάλει μαζί για αυτή η παρουσίαση είναι στην πραγματικότητα γίνεται με τη χρήση Bootstrap. Όπως μπορείτε να δείτε, όταν κάνουμε κλικ σε αυτά διαφορετικές καρτέλες, ποτέ δεν είμαστε πραγματικά αφήνοντας αυτό το ρεύμα σελίδα index.html. Έτσι, αυτό που έχουμε είναι διαφορετική divs εντός αυτής index.html. Και στη συνέχεια, κάθε φορά που κάνετε κλικ σε ένα διαφορετικό καρτέλα, είναι απλά μια αλλαγή η οποία δείχνει κάποιου. 

Γι 'αυτό τις θέσεις τους ανάλογα, αλλάζει τον κώδικα HTML της σελίδας, έτσι ώστε την τρέχουσα καρτέλα έχει επισημανθεί ως ενεργό, ώστε εμφανίζεται με διαφορετικό τρόπο και εμφάνιση πολύ ωραία. 

ΤΟΜΑΣ REIMERS: Έτσι ώστε ήταν όλα γίνονται χωρίς να γράφουμε σχεδόν κάθε CSS. Μπορούμε επίσης να δούμε μια κεφαλίδα πέρα ​​από την κορυφή, που τα χρώματα είναι από εμάς. Όμως, η πραγματική βάζοντας σχετικά με την επάνω μέρος της σελίδας και κάνοντας το πάπυρος ήταν Bootstrap. Και τότε, ακόμη και για μια άλλη βιβλιοθήκη - αυτό Δεν είναι ένα μιλήσαμε για ένα, αλλά μπορείτε να το Google, αν θέλετε. Αυτό ονομάζεται prettify.js. Και θα την σύνταξη τονίσει τον κωδικό σας για σας χρησιμοποιώντας τόσο CSS και JavaScript. 

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

Αυτό είναι κυριολεκτικά ό, τι κάνουμε όταν Πρέπει να κάνουμε κάτι εμείς Google. Είναι μια βιβλιοθήκη JavaScript εκεί που μου επιτρέπει να χειριστείτε το χρόνο σε ένα χρήσιμο τρόπο; Έτσι, αν ξέρω ότι κάποιος χρήστης δημιουργεί λογαριασμό εδώ, και αυτό είναι το τρέχουσα ώρα, πως μπορώ να υπολογίσω το διαφορά με εκείνη χωρίς να χρειάζεται να υπολογίζει τον εαυτό μου; Έτσι, αυτό είναι πραγματικά ένα κοινό πράγμα, Βιβλιοθήκης JavaScript χρόνο. Και εδώ έχουμε Moment.js-- η πιο δημοφιλής. 

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

Έτσι, τα περισσότερα πράγματα - όταν τους βρείτε - πρόκειται να φιλοξενηθεί σε ένα από τα sites τα οποία κωδικοποιούν υποδοχής. Είναι είναι μερικές δημοφιλείς. Το πιο δημοφιλές, με τώρα, είναι github.com. Και αν πάτε σε GitHub είναι πραγματικά όπου Normalize φιλοξενήθηκε. Έτσι, εάν θέλετε να πάτε πίσω σε αυτό. Δείξτε τους ότι. 

MIKE RIZZO: Και αυτό είναι στην πραγματικότητα, όπου αυτό φιλοξενείται πάρα πολύ, αν έχετε παρατηρήσει. 

ΤΟΜΑΣ REIMERS: Ναι. Έτσι, αν πάτε πάνω να ομαλοποιήσει και να πάει στο GitHub. Ήταν είναι αυτό; 

MIKE RIZZO: Αυτό το μικρό πράγμα γάτα είναι το σύμβολο GitHub. 

ΤΟΜΑΣ REIMERS: Αχ. Έτσι GitHub χρησιμοποιεί μια μέθοδο που ονομάζεται Git με τον κωδικό κατάστημα. Είναι δεν ξέρετε τι είναι ή σας φοβίζει, αυτό είναι εντάξει. Δεν χρειάζεται να ξέρετε τι είναι Git επειδή GitHub έχει ένα κουμπί Download στην κάτω δεξιά γωνία. 

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

MIKE RIZZO: εγκατάλειψη του Διαδικτύου. 

ΤΟΜΑΣ REIMERS: Αυτό είναι εντάξει. Τα τελευταία δύο πράγματα που θέλαμε να μιλήσουμε για - έχουμε μιλήσει για το Git - είναι αντιμετώπισης προβλημάτων. Και αυτό δεν είναι που έχει σημασία για το τελικό προϊόν, όπως είναι όταν φεύγετε από 50. Και όταν τρέχετε σε προϊόντα εφαρμογής βιβλιοθήκες ή την εφαρμογή το δικό σας έργο, θα πάμε να έχετε ερωτήσεις ή είστε πρόκειται να δούμε για τις ερωτήσεις. 

Και πάλι, το Google. Αυτό είναι κυριολεκτικά ό, τι κάνουμε. Αυτό πρόκειται να ακούγεται ανόητο. Όμως, κυριολεκτικά, θα το Google. Και ξανά, ένα από τα πρώτα πράγματα θα τρέξει συνήθως σε είναι stackoverflow.com, η οποία είναι μια θαυμάσια ερωτήσεων και απαντήσεων θέαμα. 

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

Και στη συνέχεια, η τελευταία πραγματικά σύντομη πράγμα είναι JSFIDDLE, η οποία είναι - σήμερα έχουμε έχουν κάνει πολλή δουλειά με HTML CSS JavaScript. JSFIDDLE είναι ένα web app, η οποία ουσιαστικά σας επιτρέπει να πάρετε HTML σας, ΣΑΣ Η Javascript κάτω αριστερά, και CSS πάνω δεξιά σας. Και τότε μπορεί να δημιουργήσει μια γρήγορη καθιστούν από αυτό και να δούμε πώς θα αλληλεπιδρά. Είναι πολύ χρήσιμο όταν οι άνθρωποι προσπαθούν να κάνει μια απόδειξη της έννοιας, όπως αυτό είναι το πώς θα κάνατε κάνει ένα drop down μενού. Ίσως μια γρήγορη αποκάλυψη ή οτιδήποτε άλλο. 

MIKE RIZZO: Οπότε ας πάμε μπροστά και να κάνετε κλικ σε αυτό. Μια γρήγορη σημείωση - λαμβάνοντας υπόψη ότι, πριν ήμασταν να κάνει με κλικ. Βγάζει JCorey Κορέα έχει επίσης ένα ενσωματωμένο σε κλικ χειρισμού συμβάντων που χρησιμοποιεί μόνο επειδή πρόκειται για έναν είσαι πρόκειται να θελήσετε να κάνετε πολλά πράγματα όταν θέλετε να κάνετε κλικ σε κάτι. 

Ομοίως, έχει επίσης ένα hover. Αλλά για να πάρετε το πλήρες φάσμα των εκείνους, να δούμε την jQuery τεκμηρίωση και να το κάνουμε. Έκανα κάτι ηλίθιο εδώ. 

ΤΟΜΑΣ REIMERS: Έτσι έχω μια πραγματικά γρήγορη το πρόγραμμα εδώ, που λέει κουμπί κλικ. Στη συνέχεια έχουμε ένα βρόχο. Για i είναι μικρότερο από 404. Είναι ακριβώς πρόκειται να αναδυθεί αυτά τα μηνύματα ειδοποίησης. 

MIKE RIZZO: Και ποια ήταν η κωδικός 404 ανήλθε στο HTML; Υπάρχει κάποιος που θυμάται; Δεν βρέθηκε, σωστά. Chrome πρόσθεσε επίσης αυτό το τακτοποιημένο το πράγμα, όπου μπορείτε - 

ΤΟΜΑΣ REIMERS: Επειδή οι άνθρωποι, όπως Mike άρχισε να κάνει αυτό το πολύ και ενοχλητικό χρήστες, το οποίο επιτρέπει μπορείτε να δείτε πληροφορίες. 

MIKE RIZZO: Ναι. 

ΤΟΜΑΣ REIMERS: Μήπως έχουμε οποιεσδήποτε ερωτήσεις γι 'αυτό, περίπου JavaScript βιβλιοθήκες, βρίσκοντας βιβλιοθήκες, ή τι ανάπτυξης ιστοσελίδων εμφάνιση όπως και στον πραγματικό κόσμο; Είμαστε τρέχει μέχρι ενάντια στο χρόνο. Έτσι, δεν είμαι σίγουρος ότι θα πάμε να έχουν το χρόνο να εφαρμόσει εκτός αν είναι πραγματικά γρήγορα. Είμαστε εντάξει; 

MIKE RIZZO: Ό, τι εσείς θα θέλατε για να δούμε πραγματικά γρήγορα μέσα, όπως, δύο λεπτά ή λιγότερο; 

ΤΟΜΑΣ REIMERS: Οτιδήποτε μπορούμε να διευκρινίσει; Πώς να γράψετε - 

ΚΟΙΝΟ: [δεν ακούγεται]; 

MIKE RIZZO: Ναι, έτσι that's - 

ΤΟΜΑΣ REIMERS: Μπορείτε απλά να πατήσετε Έλεγχος-U στην ιστοσελίδα. 

MIKE RIZZO: Ω, δεν το ήξερα αυτό. 

ΤΟΜΑΣ REIMERS: Νομίζω, ναι. Έλεγχος-U. Ναι. 

MIKE RIZZO: Ω, έτσι ώστε να είναι η κώδικα για την ιστοσελίδα. Αλλά εάν θέλετε πραγματικά να κάνετε λήψη μας τα αρχεία και τα πάντα, φιλοξενείται για github.com 

ΤΟΜΑΣ REIMERS: slash το όνομά μου - Tomas Reimers - slash Σεμινάριο CS50 παύλα. 

MIKE RIZZO: Και μπορείτε να βρείτε τα πάντα. 

ΤΟΜΑΣ REIMERS: Αυτό είναι ό, τι GitHub Μοιάζει, από τον τρόπο. Έτσι και πάλι, όταν βλέπετε ένα open source του έργου, συνήθως, θα είναι μια ανάγνωση Θέλω εκεί που μπορείτε να διαβάσετε. Και αν πάμε πίσω, θα παρατηρήσετε ότι έχετε το κατεβάσετε zip, το οποίο θα σας επιτρέπει να κατεβάσετε τον πηγαίο κώδικα κώδικα για να περιλαμβάνουν τα προϊόν το δικό σας. 

MIKE RIZZO: Ναι, και αν εμείς απλά κάντε κλικ στο κουμπί στις index.html πολύ γρήγορα - 

ΤΟΜΑΣ REIMERS: Θα δείτε εδώ είναι το πηγαίου κώδικα για την ιστοσελίδα μας. 

MIKE RIZZO: Επίσης, ξέχασα να ωθήσει δεξιά πριν με το μεγάλο τραπέζι που περιλαμβάνονται, αλλά υπάρχει επίσης ένα τραπέζι των chmods που περιλαμβάνονται μόνο για τη σαφήνειά σας. Αλλά αν μετακινηθείτε σε όλη τη διαδρομή προς το κάτω, δεν είχαμε πραγματικά να κάνουμε πολύ πολύ με το JavaScript τα πράγματα καθόλου με αυτό. Είναι αποκλειστικά και μόνο από τα πάντα άλλο που είχαμε. 

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

ΤΟΜΑΣ REIMERS: Εάν έχετε μια ερώτηση για το έργο σας ή αν αυτό μπορεί να είναι περίπτωση, θα χρειαστεί κατά πάσα πιθανότητα να μείνω λίγο μετά από αυτό. Αλλά εκτός από αυτό, έχουν ένα καλό Σαββατοκύριακο. 

MIKE RIZZO: Ναι, μπορείτε να απολαύσετε. Τα λέμε. 

ΤΟΜΑΣ REIMERS: Τα λέμε.