Πώς να δημιουργήσετε μια γεννήτρια τυχαίων προσφορών με JavaScript και HTML, για απόλυτους αρχάριους

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

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

Σε αυτό το έργο, θα δημιουργήσουμε μια γεννήτρια τυχαίων προσφορών που εμφανίζει μια τυχαία προσφορά στον χρήστη κάθε φορά που πατά ένα κουμπί Για να ξεκινήσετε, θα χρειαστείτε τρία βασικά πράγματα που χρησιμοποιούνται σχεδόν πάντα για κάθε έργο ιστού:

  • ένα πρόγραμμα περιήγησης ιστού
  • ένα πρόγραμμα επεξεργασίας κειμένου
  • μια επιθυμία να χτίσουμε πράγματα

Για αυτό το σεμινάριο θα χρησιμοποιήσω το πρόγραμμα περιήγησης ιστού του Google Chrome, το Sublime Text 3 Editor και φυσικά τη δική μου επιθυμία να δημιουργήσω και να διδάξω. Μπορείτε να χρησιμοποιήσετε ό, τι εργαλεία αισθάνεστε άνετα.

Ας αρχίσουμε!

Το πρώτο πράγμα που θα κάνουμε είναι να δημιουργήσουμε το φάκελο που θα περιέχει όλα τα αρχεία μας που αποτελούν το έργο. Δημιουργήστε έναν άδειο φάκελο στην επιφάνεια εργασίας σας και ονομάστε τον ως "generator generator". Ανοίξτε το Sublime Text και σύρετε το αρχείο στο υψηλό . Τώρα πρέπει να έχουμε τον φάκελο προσβάσιμο μέσω της πλευρικής γραμμής.

Τα περισσότερα έργα Ιστού αποτελούνται από τουλάχιστον ένα HTML, JavaScript και ένα αρχείο CSS. Ας δημιουργήσουμε αυτά τα αρχεία στο φάκελο "quote generator".

Σε Υψηλό Κείμενο,κάντε δεξί κλικ στο φάκελο "quote generator" στην πλαϊνή γραμμή και κάντε κλικ στο δημιουργία νέου αρχείου . Θα εμφανιστεί μια γραμμή εισαγωγής στο κάτω μέρος για να ονομάσει το αρχείο. Πληκτρολογήστε "index.html" και πατήστε enter. Τώρα έχετε δημιουργήσει το αρχείο index.html. Επαναλάβετε αυτό το βήμα δύο ακόμη φορές , αλλά δημιουργήστε ένα αρχείο με το όνομα "javascript.js" και "style.css" (χωρίς τα εισαγωγικά) . Είναι σημαντικό να βεβαιωθείτε ότι όταν ονομάζετε ένα αρχείο ότι τα γράμματα είναι πάντα πεζά για να αποφευχθούν τυχόν επιπλοκές.

Τώρα που έχουμε ρυθμίσει όλα τα αρχεία μας, ας δημιουργήσουμε το αρχείο HTML που θα λειτουργεί ως θεμέλιο για το έργο μας στο διαδίκτυο. Θα ξεκινήσουμε με έναν κώδικα HTML γυμνών οστών μέσα στο αρχείο index.html πριν μπορέσουμε να προσθέσουμε οτιδήποτε.

Παρακάτω είναι το αρχείο HTML χωρίς τίποτα σε αυτό. Μπορείτε να το σκεφτείτε ως το σκελετό HTML που θα περιέχει όλο το κρέας (περιεχόμενο), το οποίο θα προσθέσουμε αργότερα.

Τώρα, θα πρέπει να συνδέσουμε το αρχείο JavaScript με το έγγραφο HTML, έτσι ώστε ο κώδικας JavaScript να μπορεί να αλληλεπιδράσει με το έγγραφο HTML. Θα προσθέσουμε επίσης κείμενο στο ετικέτες, προσθέστε ένα

στοιχείο, δημιουργήστε ένα στοιχείο με ένα όνομα ταυτότητας "quoteDisplay", και επίσης έναστοιχείο με ένα χαρακτηριστικό onclick με το "newQuote ()" πέρασε σε αυτό.

Σπάζοντας το

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

Πρώτα, προσθέσαμε το "Quote Gen" μεταξύ του ετικέτες. Η ετικέτα τίτλου μεταφέρει το κείμενο μεταξύ του και το εμφανίζει στην καρτέλα του προγράμματος περιήγησης ιστού όταν ανοίγει.

Κατά το πρώτο βήμα, πρέπει επίσης να φροντίσουμε να συνδέσουμε το αρχείο javascript.js στο κάτω μέρος του εγγράφου HTML πριν από το κλείσιμο ετικέτα.

Δεύτερον, δημιουργήσαμε ένα

στοιχείο με το "Simple Quote Generator" μέσα σε αυτό. Αυτό θα χρησιμεύσει για την εμφάνιση ενός τίτλου στην ιστοσελίδα μας.

Στη συνέχεια, δημιουργήσαμε ένα στοιχείο με ένα χαρακτηριστικό id που ορίζεται σε "quoteDisplay". ΕΝΑ Το στοιχείο λειτουργεί ως διαχωριστικό για έγγραφα HTML. στοιχεία βοηθούν στην οργάνωση περιεχομένου σε μια ιστοσελίδα. Το χαρακτηριστικό id λειτουργεί ως αναγνωριστικό έτσι ώστε το JavaScript να μπορεί εύκολα να το πιάσει και να το χειριστεί. Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε JavaScript για να αρπάξουμε το στοιχείο με το αναγνωριστικό "quoteDisplay" για να τοποθετήσουμε εισαγωγικά στο στοιχείο.

Μετά από αυτό, δημιουργούμε ένα στοιχείο με ένα χαρακτηριστικό onclick με το "newQuote ()" μεταβιβάστηκε ως παράμετρος. οστοιχείο όπως μαντέψατε, είναι ένα κουμπί που θα κάνει κάτι όταν κάνετε κλικ σε αυτό. Το χαρακτηριστικό onclick χρησιμοποιείται για να ορίσετε μια συνάρτηση στο κουμπί, έτσι ώστε κάθε φορά που κάνετε κλικ στο κουμπί, θα εκτελεί τη λειτουργία που μεταβιβάστηκε στοΤο χαρακτηριστικό onclick .

Σε αυτήν την περίπτωση, κάθε φορά που κάνετε κλικ στο κουμπί, θα εκτελεί τη συνάρτηση newQuote (), φυσικά, δεν έχουμε ακόμη ορίσει τη συνάρτηση newQuote (). Εάν ανοίξετε το έργο μέσα σε ένα πρόγραμμα περιήγησης και πατήσετε το κουμπί, θα εμφανιστεί σφάλμα στην κονσόλα, καθώς η λειτουργία δεν υπάρχει αυτήν τη στιγμή.

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

Σκέψη λογικά χρησιμοποιώντας κώδικα

Τελικά ήρθε η ώρα να αρχίσουμε να δουλεύουμε στο JavaScript στο αρχείο javascript.js, ώστε να μπορούμε να αναπτύξουμε τη δική μας λειτουργικότητα δημιουργίας προσφορών.

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

Πρέπει να καταλάβουμε τι θέλουμε και πότε το θέλουμε. Για αυτό το έργο, θέλουμε προσφορές! Πότε το θέλουμε? Το θέλουμε τώρα! Ω, erm ... Εννοώ ότι το θέλουμε κάθε φορά που ο χρήστης πατά το κουμπί.

Τώρα που λύσαμε την πρώτη ερώτηση, πρέπει να κάνουμε τη δεύτερη. Τι είναι τα αποσπάσματα; Εννοώ πραγματικά, τι είναι;

Ευχαριστώ Jaden! Ναί! Τα αποσπάσματα αποτελούνται από γράμματα, που αποτελούν λέξεις. Στον κόσμο του προγραμματισμού, οι λέξεις ταξινομούνται ως χορδές, επομένως, τα αποσπάσματα μας πρέπει να είναι χορδές !

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

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

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

Αυτό είναι! Λύσαμε πώς να δημιουργήσουμε μια γεννήτρια τυχαίων προσφορών με λογική σκέψη σε κώδικα! Ακολουθεί μια σύνοψη της λογικής που έχουμε επινοήσει για το έργο μας:

  1. Τα αποσπάσματα είναι πολλές συμβολοσειρές που πρέπει να αποθηκευτούν σε έναν πίνακα.
  2. Κάθε φορά που πατάτε το κουμπί, πρέπει να δημιουργηθεί ένας τυχαίος ακέραιος αριθμός.
  3. Ο αριθμός θα χρησιμοποιηθεί ως αναπαράσταση του αριθμού ευρετηρίου πίνακα για τον πίνακα προσφορών.
  4. Μόλις ανακτήσουμε την τυχαία επιλεγμένη προσφορά από τον πίνακα χρησιμοποιώντας τον ακέραιο αριθμό που δημιουργήσαμε τυχαία, θα την τοποθετήσουμε στο έγγραφο HTML.

Χρόνος κωδικοποίησης!

Ουάου! Έχουμε φτάσει μέχρι τώρα και δεν έχουμε ξεκινήσει ακόμη τον προγραμματισμό! Καλώς ήλθατε στον κόσμο του προγραμματισμού!

Απλά αστειεύομαι.

Όχι πραγματικά.

Θα ξοδέψετε πολύ χρόνο κωδικοποίησης σε αυτήν την καριέρα (ή χόμπι). Αλλά το θέμα μου είναι ότι θα ξοδέψετε ακόμη περισσότερο χρόνο για να σκεφτείτε τη λογική προγραμματισμού και πώς να λύσετε προβλήματα. Ο προγραμματισμός δεν αφορά την παραβίαση 100 λέξεων ανά λεπτό για 20 λεπτά στο πληκτρολόγιο. Αυτό δεν πρόκειται να συμβεί.

Τώρα που έχουμε όλη τη λογική εκτός δρόμου. Ας ξεκινήσουμε την κωδικοποίηση. Θα εργαζόμαστε τώρα μέσα στο αρχείο javascript.js .

Πρέπει να δημιουργήσουμε τις δικές μας προσφορές ή να τις αντιγράψουμε από μια διαδικτυακή πηγή.

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

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

Τώρα πρέπει να δημιουργήσουμε τη συνάρτηση newQuote () που ανέφερα νωρίτερα στην ενότητα HTML αυτού του σεμιναρίου. Για τη συνάρτηση newQuote (), πρέπει να δημιουργήσουμε έναν τυχαίο ακέραιο αριθμό που κυμαίνεται από 0 έως το μήκος του πίνακα τιμών . Θα εξηγήσω παρακάτω.

Πρώτον, καλούμε τη συνάρτηση Math.floor (). Η συνάρτηση Math.floor () παίρνει μια παράμετρο και στρογγυλοποιεί τον αριθμό προς τα κάτω στον πλησιέστερο ακέραιο. Για παράδειγμα, αν ονομάσουμε Math.floor (5.7) θα επιστρέψει 5.

Δεύτερον, θα περάσουμε στο Math.random () ως παράμετρος στο Math.floor (). Η συνάρτηση Math.random () θα δημιουργήσει έναν τυχαίο δεκαδικό αριθμό μεταξύ 0 και 1.

Ας πούμε λοιπόν ότι έχουμε αυτό:

Εάν κονσόλα καταγράψουμε τον τυχαίο αριθμό μας σε αυτήν την κατάσταση, θα επιστρέφει πάντα 0. Αυτό συμβαίνει επειδή το Math.random () θα είναι πάντα ένα δεκαδικό μεταξύ 0 και 1 όπως 0,4, 0,721, 0,98 και ούτω καθεξής. Επειδή περνάμε το Math.random () στο Math.floor () ως παράμετρο, το Math.floor () στρογγυλοποιείται πάντα προς το πλησιέστερο δεκαδικό, επομένως, κάθε δεκαδικό μεταξύ 0 και 1 θα επιστρέφει πάντα στο 0.

Ποιο είναι λοιπόν το σκοπό να το κάνεις αυτό; Λοιπόν, για να δημιουργήσουμε τους αριθμούς ευρετηρίου συστοιχιών, χρειαζόμαστε ολόκληρους αριθμούς, αλλά χρειαζόμαστε τυχαίους ακέραιους αριθμούς. Για να δημιουργήσουμε τυχαίους ακέραιους αριθμούς και να ξεφύγουμε από την επιστροφή μόνο 0, θα χρειαστεί να πάρουμε το τυχαίο δεκαδικό μας και να τον πολλαπλασιάσουμε με έναν ολόκληρο αριθμό.

Τώρα ας δοκιμάσουμε κάτι τέτοιο:

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

Για παράδειγμα:

Προς το παρόν έχω μόνο 10 χορδές στον πίνακα τιμών μου, οπότε οποιοσδήποτε αριθμός άνω του 9 θα επιστρέψει αόριστος, καθώς δεν υπάρχει στον πίνακα.

Για να λύσουμε αυτό το πρόβλημα, πρέπει να πολλαπλασιάσουμε μόνο το Math.random () με το μήκος του πίνακα τιμών. Κάνοντας αυτό, μπορούμε να προσθέσουμε ή να αφαιρέσουμε όσες συμβολοσειρές από τον πίνακα θέλουμε και η μεταβλητή randomNumber θα επιστρέφει πάντα έναν έγκυρο αριθμό αφού χρησιμοποιούμε τη μέθοδο quotes.length για να έχουμε πάντα το τρέχον μήκος του πίνακα μας.

Τώρα χρειαζόμαστε έναν τρόπο να χρησιμοποιήσουμε την τιμή του randomNumber για να ανακτήσουμε τυχαία μια προσφορά από τον πίνακα εισαγωγικών και να τοποθετήσουμε την προσφορά στο έγγραφο HTML μας και να την εμφανίσουμε στους χρήστες μας.

Θυμηθείτε πώς ανέφερα ότι χρησιμοποιούμε HTMLΑναγνωριστικά για να επιτρέψετε στο JavaScript να πιάσει και να χειριστεί εύκολα στοιχεία HTML; Λοιπόν, αυτό κάνουμε τώρα στο HTML quoteDisplay ID που δημιουργήσαμε νωρίτερα.

Χρησιμοποιώντας το document.getElementById () μπορούμε να περάσουμε σε οποιαδήποτε συμβολοσειρά και η JavaScript θα εξετάσει το έγγραφο HTML και θα το ανακτήσει για χρήση για να κάνει ό, τι θέλουμε με αυτό. Θα περάσουμε στο 'quoteDisplay' ως παράμετρος για να ανακτήσουμε το στοιχείο HTML με το αναγνωριστικό του "quoteDisplay".

Τώρα θα χρησιμοποιήσουμε τη μέθοδο .innerHTML για να μεταφέρουμε μια τυχαία ανακτημένη προσφορά από τον πίνακα μας ως την τιμή που θα προστεθεί στο στοιχείο HTML quoteDisplay.

Ρυθμίζουμε το internalHTML ίσο με τον πίνακα εισαγωγικών με τη μεταβλητή randomNumber να μεταδίδεται ως αριθμός ευρετηρίου πίνακα Τώρα η λειτουργία newQuote () ολοκληρώθηκε!

Αποστολή εξετελέσθει!

Εάν έχετε φτάσει σε αυτό το μέρος του σεμιναρίου, έχετε ολοκληρώσει το έργο! Συγχαρητήρια! Πραγματικά ολοκληρώσατε τη δημιουργία του Random Quote Generator.

Τώρα το μόνο που χρειάζεται να κάνετε είναι να ανοίξετε το έργο στο πρόγραμμα περιήγησής σας και να δείτε αν λειτουργεί! Κάνετε αυτό σύροντας το αρχείο index.html στο παράθυρο του προγράμματος περιήγησής σας.

Πατήστε το κουμπί και θα εμφανιστεί μια τυχαία προσφορά στην οθόνη σας. Πατήστε το κουμπί όσες φορές θέλετε. Κάθε φορά, μια νέα προσφορά πρέπει να αντικαθιστά την τρέχουσα στην οθόνη.

Μπορείτε να προσθέσετε όσα εισαγωγικά θέλετε στον πίνακα εισαγωγικών.

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

Τώρα τι?

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

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

Μπορείτε να βελτιώσετε αυτό το έργο προσθέτοντας τις δικές σας λειτουργίες και στυλ σε αυτό.

Στην αρχή αυτού του σεμιναρίου δημιουργήσαμε ένα αρχείο style.css που δεν χρησιμοποιήσαμε. Το CSS χρησιμοποιείται για να κάνει τις ιστοσελίδες όμορφες και πολύχρωμες. Εναπόκειται σε εσάς να προσθέσετε στο αρχείο CSS για στυλ εάν θέλετε.

Μπορείτε να αναζητήσετε ορισμένα σεμινάρια CSS για κάποια επιπλέον καθοδήγηση. Αφήστε τη φαντασία σας να τρέξει άγρια ​​και κάντε αυτό το έργο δικό σας! Κάνε ότι θέλεις! Η κωδικοποίηση είναι μαγική και είσαι μάγος, Χάρι!

Αν είστε περίεργοι να δείτε πόσο ένα έργο μπορεί να αλλάξει με CSS και μερικές ακόμη γραμμές κώδικα JavaScript, ρίξτε μια ματιά στη δική μου έκδοση αυτού του Random Quote Generator που έχω τίτλο "Epiphany Clock"εδώ .

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