15 Snippet di esempio JavaScript gratuiti per i tuoi siti web

Aggiornato: 23 settembre 2019 / Articolo di: WHSR Guest

JavaScript è usato ovunque online in questi giorni - per migliorare l'interattività del sito web, per convalidare le informazioni e / o per migliorare le prospettive di un sito web.

JavaScript è apparso per la prima volta in 1995 e da allora ha fatto molta strada in termini di accettazione e come viene utilizzato. La sintassi utilizzata in JavaScript è stata fortemente influenzata da C; ma anche Java, Pearl, Python e Scheme hanno fatto la loro parte.

Suggerimenti per principianti JavaScrip: cosa devi sapere?

Per cominciare, alcune nozioni di base che devi conoscere sono:

  • JavaScript può essere disattivato nel browser
  • JavaScript verrà eseguito ogni volta che viene caricata una pagina
  • JavaScript richiede tempo per caricare su una connessione Internet lenta
  • JavaScript è ancora eseguito da pagine memorizzate nella cache
  • È possibile ospitare JavaScript all'interno di una pagina Web o esternamente da un file .js
  • JavaScript è completamente diverso da Java

È anche importante capire che JavaScript causerà effettivamente un disastro quando viene utilizzato in modo errato.

JavaScript mal configurato e codificato in modo sciatto rallenterà il tuo sito Web e danneggerà la navigazione complessiva del sito. Ciò a sua volta influisce sul tasso di ritorno dei tuoi visitatori (a causa di una cattiva esperienza utente) e sul posizionamento nei motori di ricerca (a causa dei lenti tassi di risposta del sito web e della scansione dei bot). Per aiutare a convalidare il mio caso qui, mettiti nei panni di uno spettatore. Se un sito web che stavi visitando si caricasse lentamente, fosse difficile da navigare e, nel complesso, poco attraente, torneresti al sito? Non lo farei.

Di seguito è riportato un piccolo elenco di cose a cui pensare quando si aggiunge JavaScript il tuo sito web.

  • JavaScript è richiesto per il corretto funzionamento del sito?
  • Come sarà il sito se il JavaScript è stato bloccato?
  • Il codice JavaScript danneggerà le prestazioni del server?
  • L'aggiunta di JavaScript ti aiuterà a spostare il tuo sito nella direzione in cui vuoi che vada?

No, non sto cercando di spaventarti con questi punti.

In effetti, non aver paura usa JavaScript sui tuoi siti web in quanto fornisce molti vantaggi e, come detto, è utilizzato dalle maggioranze. Il punto chiave che sto cercando di trasmettere qui è non continuare ad aggiungere funzionalità JavaScript a un sito quando non sono necessarie. Alcuni siti avranno bisogno di più JavaScript rispetto agli altri; alcuni hanno solo bisogno di meno - Solo perché un sito lo sta facendo non significa che dovresti fare lo stesso.

Omaggi: 15 Cool Snippet JavaScript per il tuo sito web

Ora, passiamo agli argomenti per cui sei venuto qui: di seguito è riportato un elenco di 15 snippet JavaScript che miglioreranno il tuo sito in termini di funzionalità o aspetto. Il codice verrà suddiviso in due sezioni, la testa e il corpo o il file .js. Se non viene fornito alcun titolo di sezione, non è necessario per quel particolare frammento.

1. Comprensione del video HTML5

Campione veloce

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';
}

Che cosa fa lo snippet di JavaScript?

Questo piccolo frammento impedisce al tuo sito web di provare a visualizzare un video che il browser non è in grado di supportare, risparmiando larghezza di banda e potenza di elaborazione.

2. Cookie JavaScript

Campione veloce

/**

* 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";

    }

}

Che cosa fa lo snippet di JavaScript?

Questo frammento di codice è un po 'lungo ma molto utile, consentirà al tuo sito di memorizzare informazioni sul computer del visualizzatore e leggerlo in un altro momento. Questo snippet può essere utilizzato in molti modi diversi per svolgere diversi compiti.

3. Precarica le tue immagini

Campione veloce

var images = new Array();

function preloadImages(){

    for (i=0; i 

Che cosa fa lo snippet di JavaScript?

Questo snippet impedirà al tuo sito di avere quell'ora imbarazzante quando visualizza solo parte del sito; questo non solo sembra male, ma è anche poco professionale. Tutto quello che devi fare è aggiungere le tue immagini alla sezione preloadImages e sei pronto per il lancio.

4. Convalida e-mail

Campione veloce

Capo:


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);
}


Body: Indirizzo email:

Che cosa fa lo snippet di JavaScript?

Questo frammento convaliderà che un indirizzo e-mail correttamente formattato viene inserito in un modulo, non può garantire che l'indirizzo e-mail sia reale, non è possibile verificarlo con JavaScript.

5. Nessun clic con il tasto destro

Campione veloce

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");

Che cosa fa lo snippet di JavaScript?

Questo snippet impedirà al visualizzatore di poter fare clic con il pulsante destro del mouse sulla tua pagina. Questo può scoraggiare l'utente medio dal prendere in prestito immagini o codice dal tuo sito.

6. Mostra citazioni casuali

Campione veloce

Capo:
  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();


Body: writeRandomQuote();

Che cosa fa lo snippet di JavaScript?

Ok, quindi questo non è uno snippet che tutti i siti userebbero ma può essere usato per mostrare più di semplici citazioni casuali. È possibile modificare il contenuto delle virgolette con qualsiasi cosa si desideri e avere immagini o testo casuali visualizzati in qualsiasi punto del sito.

7. Link precedenti / successivi

Campione veloce

Pagina precedente | Pagina successiva

Che cosa fa lo snippet di JavaScript?

Questo frammento è ottimo se hai più pagine su un articolo o tutorial. Permetterà all'utente di navigare tra le pagine con facilità. È anche piccolo e leggero dal punto di vista delle risorse.

8. Aggiungi una pagina ai segnalibri

Campione veloce

Aggiungi ai preferiti

Che cosa fa lo snippet di JavaScript?

Questo snippet consentirà all'utente di aggiungere facilmente la tua pagina ai segnalibri; tutto ciò che devono fare è cliccare sul link. Le sue piccole funzioni come questa possono aumentare l'esperienza complessiva degli spettatori.

9. Link alla pagina di stampa facile

Campione veloce

Stampa pagina

Che cosa fa lo snippet di JavaScript?

Questo piccolo collegamento consentirà alle tue visualizzazioni di stampare facilmente la tua pagina. Utilizza la funzione di stampa rapida già configurata dal browser e non utilizza risorse finché non viene cliccato.

10. Mostra data formattata

Campione veloce

Capo:
  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);
  }


Body: showDate();

Che cosa fa lo snippet di JavaScript?

Questo snippet ti consente di visualizzare la data corrente in qualsiasi punto della pagina web e non è necessario aggiornarla. Basta metterlo in posizione e non pensarci più.

11. Separatore di virgole

Campione veloce

Capo:
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);
}


Body: addCommas("4550989023");

Che cosa fa lo snippet di JavaScript?

Questo frammento sarebbe utilizzato principalmente dai siti che utilizzano spesso i numeri. Questo snippet manterrà i tuoi numeri allo stesso modo su tutta la linea. Tutto quello che devi fare è copiare la linea del corpo dove vuoi aggiungere un numero e sostituire il numero lì con il tuo numero.

12. Ottieni l'area di visualizzazione di un browser

Campione veloce

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

//-->

Che cosa fa lo snippet di JavaScript?

Questo frammento ti permetterà di ottenere la larghezza e l'altezza dell'area di visualizzazione nel tuo browser delle visualizzazioni. Ciò consentirà al progettista di creare e utilizzare display diversi in base alle dimensioni della finestra del browser dell'utente.

13. Reindirizzamento con ritardo opzionale

Campione veloce

setTimeout( "window.location.href =

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

Che cosa fa lo snippet di JavaScript?

Questo snippet ti consentirà di reindirizzare gli spettatori su un'altra pagina e ha la possibilità di impostare un ritardo. L'uso di questo frammento è abbastanza auto-esplicativo ed è uno strumento molto prezioso da avere nella cintura.

14. Rileva iPhone

Campione

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

    }

}

Che cosa fa lo snippet di JavaScript?

Questo frammento ti consentirà di rilevare se il tuo spettatore è su un iPhone o iPod e ti consente di visualizzare contenuti diversi. Questo frammento di codice è inestimabile per quanto grande è il mercato della telefonia mobile e continuerà a crescere.

15. Stampa messaggio sulla barra di stato

Campione veloce

 
"; 
// --> 

Che cosa fa lo snippet di JavaScript?

Questo piccolo frammento ti permetterà di stampare un messaggio sulla barra di stato. Puoi visualizzare notizie recenti o importanti in un'area che attirerà l'attenzione dell'utente.

Informazioni su WHSR Guest

Questo articolo è stato scritto da un collaboratore ospite. Le viste dell'autore di seguito sono interamente sue e potrebbero non riflettere le opinioni di WHSR.