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

Ενημερώθηκε: 23 Σεπτεμβρίου 2019 / Άρθρο από: WHSR Guest

Το 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 από τις υπόλοιπες. Μερικοί χρειάζονται λιγότερο - Ακριβώς επειδή ένας ιστότοπος κάνει αυτό δεν σημαίνει ότι πρέπει να κάνετε το ίδιο.

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

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

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

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

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

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

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

2. Μπισκότα JavaScript

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

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires.toGMTString() : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

    var end = document.cookie.indexOf(";", begin);

    if (end == -1) {

        end = dc.length;

    }

    return unescape(dc.substring(begin + prefix.length, end));

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

            ((path) ? "; path=" + path : "") +

            ((domain) ? "; domain=" + domain : "") +

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

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

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

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

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

var images = new Array();

function preloadImages(){

    for (i=0; i 

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

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

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

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

Κεφάλι:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Σώμα: Διεύθυνση ηλεκτρονικού ταχυδρομείου:

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

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

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

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

function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  if(document.layers || (document.getElementById &! document.all)) {
    if(e.which==2 || e.which==3) { return false; }
  }
}
if(document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = f1;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");

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

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

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

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

Κεφάλι:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Σώμα: writeRandomQuote();

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

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

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

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

Προηγούμενη σελίδα | Επόμενη σελίδα

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

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

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

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

Προσθήκη στα αγαπημένα

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

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

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

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

Εκτύπωση σελίδας

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

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

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

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

Κεφάλι:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Σώμα: showDate();

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

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

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

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

Κεφάλι:
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}


Σώμα: addCommas("4550989023");

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

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

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

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

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

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

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

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

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

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

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

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

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

Δείγμα

if((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";

    }

}

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

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

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

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

 
"; 
// --> 

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

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

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

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