Πολλές από τις σημερινές μορφές ιστοσελίδα χρησιμοποιεί JavaScript για να συστέλλονται ή διαστέλλονται για να ανταποκριθεί καλύτερα στις ανάγκες του ατόμου που χρησιμοποιεί το έντυπο δυναμικά . Για παράδειγμα , μια μορφή για έναν χρήστη για να εισαγάγετε πληροφορίες σχετικά με τα κατοικίδια ζώα της θα επεκτείνει μόνο εάν ο χρήστης που αναφέρεται ( με ένα κουμπί επιλογής , για παράδειγμα) ότι είχαν κατοικίδια ζώα . Το όφελος από τη χρήση JavaScript για να αναπτύξετε μια μορφή είναι σχετικά υψηλή βεβαιότητα ότι το σενάριο θα λειτουργήσει . Η διαβεβαίωση αυτή προκύπτει από την ευρεία χρήση του JavaScript στο πρόγραμμα περιήγησης , σε αντίθεση με εκείνη των άλλων γλωσσών, όπως VB Script ή Java . Οδηγίες
Η 1
Κολλήστε ή πληκτρολογήστε την παρακάτω φόρμα ιστοσελίδα σε ένα νέο έγγραφο σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου .
< Br >
" Φόρμα επεκτείνει το παράδειγμα " < /title> <br> <p> < /head> <br> <p> <body> <br> <p> <div> < br > <p> <form id="myform" style="display:none" action=""> <br> <p> όνομα : <input type="text" name="fname" > <br> <p> <P> <br> <p> Επώνυμο : <input type="text" name="lname" > <br> <p> < /form> <br> < p > < /div > <br> <p> <div> <br> <p> < όνομα εισόδου = " formButton " type = " κουμπί" onclick = " ShowHideForm ( ) ? " value = " μορφή Ανάπτυξη /σύμπτυξη " > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> <p> Αυτή η ιστοσελίδα εμφανίζει μια απλή μορφή , που ο κώδικας στα παρακάτω βήματα θα επεκτείνει ή να καταρρεύσει όταν ο χρήστης πατήσει το κουμπί της σελίδας . Η " <input> " ετικέτα εμφανίζεται στη λίστα δημιουργεί αυτό το κουμπί , του οποίου τα χαρακτηριστικά είναι η " onclick " προσδιοριστικό γεγονός . Αυτό το προσδιοριστικό σημεία στον κώδικα JavaScript που θα καταρρεύσει ή να επεκτείνουν τη φόρμα . 2 <br> <p> Επικολλήστε τον ακόλουθο πρόγραμμα JavaScript , μετά το «κεφάλι» tag στο έγγραφο . <br> <p> < Τύπος script = " text /JavaScript " > <br> <p> λειτουργία ShowHideForm ( ) { var <br> <p> f = document.getElementById ( " myform ")? <br> <p> εάν ( f.style.display == " inline " ) { <br> <p> f.style.display = "κανένας " ? <br> <p> } <br> <p> else { <br> <p> f.style.display = " inline " ? <br> <p> } } <br> <p> <br> <p> < /script > <br> <p> Η λειτουργία " ShowHideForm " αρχίζει με να πάρει μια αναφορά στη μορφή , η οποία η " getElementById " κλήση της συνάρτησης παρέχει . Η " f.style.display " δήλωση χρησιμοποιεί ότι η αναφορά , μέσω του "f" μεταβλητή , για να αποκτήσετε πρόσβαση της φόρμας ίντερνετ "στυλ " χαρακτηριστικό . Χαρακτηριστικά στυλ HTML περιέχουν επικαλυπτόμενων φύλλων στυλ ( CSS ) κωδικούς που χρησιμοποιούν οι προγραμματιστές για την τοποθέτηση και στυλιζάρω το περιεχόμενο ιστοσελίδων . Προγραμματιστές να χρησιμοποιούν το CSS "οθόνη " χαρακτηριστικό , όπως στον κώδικα που μόλις δόθηκαν , για να ορίσετε την ορατότητα ενός στοιχείου HTML . Η τιμή "none" για αυτό το χαρακτηριστικό καθορίζει ότι το στοιχείο HTML ( π.χ. μορφή) θα είναι αόρατη . <br> Εικόνων 3 <p> Αποθηκεύστε το έγγραφο ως " Απλό κείμενο " και με οποιοδήποτε όνομα αρχείου που έχει a " . htm " ή " . HTML " επέκταση , η οποία επιτρέπει την εμφάνιση σε ένα πρόγραμμα περιήγησης . <br> Η <p> 4 Ανοίξτε το Windows Explorer και μεταβείτε στο φάκελο που περιέχει την ιστοσελίδα . Κάντε διπλό κλικ στη σελίδα για να το ανοίξετε . <br> 5 <p> Κάντε κλικ στο κουμπί για να επεκτείνει εναλλάξ και τη σύμβαση του μορφή . <br> Η 6 <p> Αντικαταστήστε , στον επεξεργαστή κειμένου σας , τον κώδικα μεταξύ οι " <SCRIPT> " ετικέτες με τον ακόλουθο κώδικα : . <br> <p> ShowHideForm λειτουργία () { var <br> <p> v = document.getElementById ( " opt_in " ) ελέγχεται ? <br> <p> var f = document.getElementById ( " myform ")? <br> <p> αν ( v) { <br> <p> f.style.display = " inline " ? <br> <p> } <br> < p> else { <br> <p> f.style.display = "κανένας " ? <br> <p> } } <br> <p> <br> <p> Αυτό το αναθεωρημένο σενάριο θα επεκτείνει μια φόρμα όταν ένας χρήστης ελέγχει ένα πλαίσιο ελέγχου , το οποίο θα δημιουργήσει την επόμενη <br> Η 7 <p> Αντικαταστήστε τον κώδικα HTML μεταξύ των " <BODY> " ετικέτες με τον ακόλουθο νέο κώδικα : . <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> όνομα : <input type="text" name="fname" > ? <br> <p> <P> <br> <p> διεύθυνση ηλεκτρονικού ταχυδρομείου : <input type="text" name="email" > <br> <p> < /form> <br> < p> < /div > <br> <p> <div> <br> <p> <P> Επιλέξτε αυτό το πλαίσιο αν θέλετε να σας στείλουμε περισσότερες πληροφορίες για το προϊόν μας . <br> < p > <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> η αναθεώρηση αυτή επιτρέπει στο χρήστη να δείχνουν ότι είχα θέλατε να λάβετε περισσότερες πληροφορίες σχετικά με ένα υποθετικό προϊόν . <br> 8 <p> Αποθηκεύστε το τροποποιημένο έγγραφο , στη συνέχεια, πατήστε το πλήκτρο "F5 " στο πρόγραμμα περιήγησης για να ενημερώσετε τη σελίδα . Κάντε κλικ στο πλαίσιο ελέγχου για να αναπτύξει ή να συμπτύξει τη φόρμα . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/91135.html' >Πώς να Ενεργοποίηση ASP στις υπηρεσίες IIS 6 </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/91137.html' >Πώς μπορώ να ενεργοποιήσω τη JavaScript ένας πολύ πιο εύκολο </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/javascript-programming/91018.html" target="_blank">Πώς να αποκτήσετε πρόσβαση Element Χαρακτηριστικά Με JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91108.html" target="_blank">Πώς να αλλάξετε το κείμενο σε Rollover </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90906.html" target="_blank">Javascript για Υπολογισμοί Time </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91163.html" target="_blank">JavaScript Εκμάθηση και αναφοράς </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91171.html" target="_blank">Πώς να κάνει Pop - Ups </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/javascript-programming/91061.html" target="_blank">Πώς να καθαρίσετε κείμενο από ένα πεδίο αναζήτησης σε μια σελίδα HTML στο Κλικ </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90894.html" target="_blank">Πώς να καθαρίσετε ένα Drop -Down σε JQuery </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91238.html" target="_blank">Πώς να αλλάξετε τις τιμές σε XML με JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91076.html" target="_blank">Πώς να πάρει ένα Remote ιστοσελίδας με JavaScript </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>