15 Δωρεάν αποσπάσματα δείγματος JavaScript για τους ιστότοπούς σας

Άρθρο που γράφτηκε από:
  • Προτεινόμενα άρθρα
  • Ενημερώθηκε: Sep 23, 2019

Το JavaScript είναι που χρησιμοποιούνται παντού online αυτές τις μέρες - να βελτιωθεί η διαδραστικότητα του ιστότοπου, να επικυρωθούν οι πληροφορίες ή / και να βελτιωθούν οι προοπτικές του ιστότοπου.

Το JavaScript εμφανίστηκε για πρώτη φορά στο 1995 και από τότε έχει προχωρήσει πολύ από την άποψη της αποδοχής του και του τρόπου με τον οποίο χρησιμοποιείται. Η σύνταξη που χρησιμοποιήθηκε στο JavaScript επηρεάστηκε έντονα από το C. αλλά η Java, η Pearl, η Python και η Scheme έπαιξαν επίσης το ρόλο της.

Συμβουλές για αρχάριους JavaScrip: Τι πρέπει να ξέρετε;

Για αρχάριους, μερικά βασικά που πρέπει να ξέρετε είναι:

  • Το JavaScript μπορεί να απενεργοποιηθεί στο πρόγραμμα περιήγησης
  • Το JavaScript θα εκτελείται κάθε φορά που φορτώνεται μια σελίδα
  • Η JavaScript απαιτεί χρόνο για να φορτώσετε μια αργή σύνδεση στο Internet
  • Το JavaScript εξακολουθεί να τρέχει από προσωρινά αποθηκευμένες σελίδες
  • Μπορείτε να φιλοξενήσετε το JavaScript μέσα σε μια ιστοσελίδα ή εξωτερικά από ένα αρχείο .js
  • Το JavaScript είναι εντελώς διαφορετικό από την Java

Είναι επίσης σημαντικό να καταλάβουμε ότι το JavaScript θα οδηγήσει στην καταστροφή όταν χρησιμοποιείται με λάθος τρόπο.

Οι ανεπαρκώς διαμορφωμένες και ευαίσθητες κωδικοποιημένες γλώσσες JavaScript θα επιβραδύνουν τον ιστότοπό σας και θα καταστρέψουν τη συνολική πλοήγηση του ιστότοπου. Αυτό με τη σειρά του επηρεάζει το ποσοστό επιστροφής των επισκεπτών σας (λόγω κακής εμπειρίας χρήστη), καθώς και τις μηχανές αναζήτησης (λόγω των αργών ρυθμών απόκρισης ιστοτόπων και της ανίχνευσης bot). Για να βοηθήσετε να επικυρώσετε την περίπτωσή μου εδώ, τοποθετήστε τον εαυτό σας στα παπούτσια ενός θεατή. Αν ένας ιστότοπος που επισκεφθήκατε φορτώθηκε σιγά-σιγά, ήταν δύσκολο να πλοηγηθείτε, και σε γενικές γραμμές, άβολα - θα επιστρέψετε στον ιστότοπο; Δεν θα ήθελα.

Παρακάτω είναι μια μικρή λίστα με πράγματα που πρέπει να σκεφτείτε όταν προσθέτετε το JavaScript η ιστοσελίδα σου.

  • Απαιτείται JavaScript για να λειτουργήσει σωστά ο ιστότοπος;
  • Τι θα μοιάζει με τον ιστότοπο εάν αποκλείστηκε η JavaScript;
  • Θα βλάψει η JavaScript την απόδοση του διακομιστή;
  • Θα προσθέσει η βοήθεια JavaScript τη μετακίνηση του ιστότοπού σας προς την κατεύθυνση που επιθυμείτε;

Όχι, δεν προσπαθώ να σας τρομάξω με αυτά τα σημεία.

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

Freebies: 15 Cool αποσπάσματα JavaScript για τον ιστότοπό σας

Τώρα, ας πάμε κάτω στα υλικά για τα οποία ήρθατε εδώ - παρακάτω είναι μια λίστα με τα αποσπάσματα JavaScript 15 που θα βελτιώσουν τον ιστότοπό σας σε λειτουργικότητα ή εμφάνιση. Ο κώδικας θα κατανεμηθεί σε δύο ενότητες, το κεφάλαιο και το σώμα ή το αρχείο .js. Αν δεν υπάρχει τίτλος ενότητας, τότε δεν είναι απαραίτητο για αυτό το συγκεκριμένο απόσπασμα.

1. Κατανόηση του βίντεο HTML5

Γρήγορο δείγμα

<script type = "text / javascript"> συνάρτηση understands_video () {επιστροφή! document.createElement ('video') canPlayType; // boolean} αν (! understands_video ()) {// Πρέπει να είναι παλιότερο πρόγραμμα περιήγησης ή IE. // Ίσως να κάνετε κάτι σαν να κρύβετε προσαρμοσμένα // HTML5 στοιχεία ελέγχου. Ή οτιδήποτε ... videoControls.style.display = 'καμία'; } </ script>

Τι κάνει το απόσπασμα JavaScript;

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

2. Μπισκότα JavaScript

Γρήγορο δείγμα

<script type = "text / javascript"> / ** * Ορίζει ένα cookie με το όνομα και την τιμή. * * όνομα Όνομα της τιμής cookie * τιμή του cookie * [λήγει] Ημερομηνία λήξης του cookie (προεπιλογή: τέλος της τρέχουσας περιόδου σύνδεσης) * [path] Διαδρομή όπου το cookie είναι έγκυρο * domain] Ο τομέας όπου το cookie είναι έγκυρο * (προεπιλογή: τομέας του εγγράφου κλήσης) * [ασφαλή] Boolean τιμή που υποδεικνύει εάν η μετάδοση cookie απαιτεί μια συνάρτηση * secured * / setCookie (όνομα, τιμή, {document.cookie = όνομα + "=" + απαλλαγή (τιμή) + ((λήγει); "expires =" + expires.toGMTString (): " "") + ((τομέας); "; domain =" + domain: ") + ((ασφαλές);" ασφαλές ":" "); } </ script> <script type = "text / javascript"> / ** * Γίνεται η τιμή του καθορισμένου cookie. * * name Όνομα του επιθυμητού cookie. * * Επιστρέφει μια συμβολοσειρά που περιέχει την τιμή ενός συγκεκριμένου cookie, * ή null εάν δεν υπάρχει cookie. * / λειτουργία getCookie (όνομα) {var dc = document.cookie; var prefix = όνομα + "="; var begin = dc.indexOf (";" + πρόθεμα). αν (αρχίζει == -1) {begin = dc.indexOf (πρόθεμα)? αν (αρχίζει! = 0) επιστρέφει null; } αλλιώς {αρχή + = 2; } var end = document.cookie.indexOf (";", αρχή); αν (τέλος == -1) {end = dc.length; } επιστροφή του unescape (dc.substring (αρχίζει + prefix.length, τέλος)); } </ script> <script type = "text / javascript"> / ** * Διαγράφει το καθορισμένο cookie. * * Όνομα ονόματος της διαδρομής cookie * [path] του cookie (πρέπει να είναι ίδια με τη διαδρομή που χρησιμοποιείται για τη δημιουργία cookie) * domain [domain] του cookie (πρέπει να είναι ίδιο με τον τομέα που χρησιμοποιείται για τη δημιουργία cookie) * / function deleteCookie όνομα, διαδρομή, τομέας) {if (getCookie (όνομα)) {document.cookie = όνομα + "=" (path); = "+ domain:" "+", λήγει = Πέμπτη, 01-Ιαν-70 00: 00: 01 GMT ". }} </ script>

Τι κάνει το απόσπασμα JavaScript;

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

3. Προφορτώστε τις εικόνες σας

Γρήγορο δείγμα

<script type = "text / javascript"> var εικόνες = νέος πίνακας (); συνάρτηση preloadImages () {για (i = 0; i <preloadImages.arguments.length; i ++) {εικόνες [i] = νέα Εικόνα (); εικόνες [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"). </ script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το απόσπασμα θα αποτρέψει τον ιστότοπό σας να έχει αυτό το δύσκολο χρόνο όταν εμφανίζει μόνο μέρος του ιστότοπου. αυτό δεν φαίνεται μόνο κακό αλλά είναι επίσης αντιεπαγγελματικό. Το μόνο που έχετε να κάνετε είναι να προσθέσετε τις εικόνες σας στην ενότητα preloadImages και είστε έτοιμοι να μετακινηθείτε.

4. Επικύρωση ηλεκτρονικού ταχυδρομείου

Γρήγορο δείγμα

Κεφάλι:

<script type = "text / javascript"> λειτουργία validateEmail (theForm) {if (/^w+([.]]?w+)*@w+([.-]?w+)*(.{{LOCAL} /.test(TheForm.email-id.value)) {επιστροφή (true); } alert ("Μη έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου! Εισαγάγετε ξανά προσεκτικά!"); επιστροφή (ψευδή); } </ script>

Σώμα: <form onSubmit = "επιστροφή validateEmail (αυτό)" <input type = "reset" value = "Επαναφορά"> </ input> /> </ form>

Τι κάνει το απόσπασμα JavaScript;

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

5. Κανένα δεξί κλικ

Γρήγορο δείγμα

<script type = "text / javascript"> συνάρτηση f1 () {if (document.all) {return false; }} f2 (e) {if (document.layers || (document.getElementById &! document.all)) {if (e.which == 2 || e.which == 3) {επιστροφή ψευδής; }}} αν (document.layers) {document.captureEvents (Event.MOUSEDOWN); document.onmousedown = f1; } άλλο {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = νέα λειτουργία ("επιστροφή ψευδούς"); </ script>

Τι κάνει το απόσπασμα JavaScript;

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

6. Εμφάνιση τυχαίων τιμών

Γρήγορο δείγμα

Κεφάλι: <script type = "text / javascript"> γράψτεRandomQuote = λειτουργία () {var εισαγωγικά = νέα Array (); εισαγωγικά [0] = "Η ενέργεια είναι το πραγματικό μέτρο της νοημοσύνης." εισαγωγικά [1] = "Το μπέιζ-μπώλ έχει το μεγάλο πλεονέκτημα σε σχέση με το κρίκετ ότι έχει λήξει σύντομα". quotes [2] = "Κάθε στόχος, κάθε δράση, κάθε σκέψη, κάθε συναίσθημα που βιώνει κάποιος, είτε είναι συνειδητά ή ασυνείδητα γνωστό, είναι μια προσπάθεια να αυξηθεί το επίπεδο της ειρήνης του μυαλού». εισαγωγικά [3] = "Ένα καλό κεφάλι και μια καλή καρδιά είναι πάντα ένας τρομερός συνδυασμός." var rand = Math.floor (Math.random () * quotes.length). document.write (εισαγωγικά [rand]); } writeRandomQuote (); </ script>

Σώμα: <script type = "text / javascript"> γράψτεRandomQuote (); </ script>

Τι κάνει το απόσπασμα JavaScript;

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

7. Προηγούμενες / Επόμενες συνδέσεις

Γρήγορο δείγμα

<a href="javascript:history.back(1)"> Προηγούμενη σελίδα </a>. | <a href="javascript:history.back(-1)"> Επόμενη σελίδα </a>

Τι κάνει το απόσπασμα JavaScript;

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

8. Σημειώστε μια σελίδα

Γρήγορο δείγμα

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Το όνομα του ιστότοπού σας')"> Προσθήκη στα Αγαπημένα </a>

Τι κάνει το απόσπασμα JavaScript;

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

9. Εύκολη σύνδεση σελίδας εκτύπωσης

Γρήγορο δείγμα

<a href="javascript:window.print();"> Εκτύπωση σελίδας </a>

Τι κάνει το απόσπασμα JavaScript;

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

10. Εμφάνιση μορφοποιημένης ημερομηνίας

Γρήγορο δείγμα

Κεφάλι: <script type = "text / javascript"> συνάρτηση showDate () {var d = νέα Ημερομηνία (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1. // μηνών βασίζονται στο μηδέν var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </ script>

Σώμα: <script type = "text / javascript"> showDate (); </ script>

Τι κάνει το απόσπασμα JavaScript;

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

11. Τμήμα διαχωριστή κομματιών

Γρήγορο δείγμα

Κεφάλι: <script type = "text / javascript"> συνάρτηση addCommas (num) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]. var n3 = n1.length> 1? '.' + n1 [1]: ''; var temp = / (d +) (d {3}). ενώ (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + '); } var out = επιστροφή n2 + n3; document.write (έξω); } </ script>

Σώμα: <script type = "text / javascript"> addCommas ("4550989023") </ script>

Τι κάνει το απόσπασμα JavaScript;

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

12. Αποκτήστε την περιοχή προβολής ενός προγράμματος περιήγησης

Γρήγορο δείγμα

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // Τα πιο συμβατά προγράμματα περιήγησης (mozilla / netscape / opera / IE7) χρησιμοποιούν window.innerWidth και window.innerHeight αν (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 σε κατάσταση συμβατό με πρότυπα (δηλαδή με έγκυρο doctype ως πρώτη γραμμή στο έγγραφο) else if (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // παλαιότερες εκδόσεις του IE αλλού {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheight = document.getElementsByTagName ('body') [0] .clientHeight} document.write ('<p> Το πλάτος της προβολής σας είναι' + viewportwidth + 'x' + viewportheight + '</ p>'); // -> </ script>

Τι κάνει το απόσπασμα JavaScript;

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

13. Ανακατεύθυνση με προαιρετική καθυστέρηση

Γρήγορο δείγμα

<script type = "text / javascript"> setTimeout ("window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </ script>

Τι κάνει το απόσπασμα JavaScript;

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

14. Ανίχνευση iPhone

Δείγμα

<script type = "text / javascript"> αν ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i))) {if (document.cookie.indexOf "iphone_redirect = false") == -1) {window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; }} </ script>

Τι κάνει το απόσπασμα JavaScript;

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

15. Εκτύπωση μηνύματος στη γραμμή κατάστασης

Γρήγορο δείγμα

<script-language = "javascript" type = "text / javascript"> <! - window.status = "<ΤΥΠΟΣ ΣΑΣ ΜΗΝΥΜΑ>"; // -> </ script>

Τι κάνει το απόσπασμα JavaScript;

Αυτό το μικρό απόσπασμα θα σας επιτρέψει να εκτυπώσετε ένα μήνυμα στη γραμμή κατάστασης. Μπορείτε να εμφανίσετε πρόσφατα ή σημαντικά νέα σε μια περιοχή που θα τραβήξει το μάτι του χρήστη.

Σχετικά με το WHSR Guest

Αυτό το άρθρο γράφτηκε από έναν συνεισφέροντα. Οι απόψεις του συγγραφέα παρακάτω είναι εξ ολοκλήρου δικές του και μπορεί να μην αντικατοπτρίζουν τις απόψεις του WHSR.