15 Snippet di esempio JavaScript gratuiti per i tuoi siti web

Articolo scritto da:
  • Articoli consigliati
  • Aggiornato: Sep 23, 2019

JavaScript è usato ovunque online in questi giorni - migliorare l'interattività del sito Web, convalidare le informazioni e / o 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.

Gli script Java scarsamente configurati e con codici sciatti rallentano il tuo sito Web e danneggiano la navigazione generale del sito. Ciò a sua volta influisce sul tasso di restituzione dei tuoi visitatori (a causa della cattiva esperienza dell'utente) e sui ranking dei motori di ricerca (a causa di tassi di risposta del sito Web lenti e 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 tonnellate di benefici e, come detto, è utilizzato dalle maggioranze. Il punto chiave che sto provando a comunicare qui è non solo 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 alle cose per cui sei venuto qui - di seguito è un elenco di snippet JavaScript 15 che miglioreranno il tuo sito in termini di funzionalità o aspetto. Il codice sarà suddiviso in due sezioni, il file head e body o .js. Se non viene fornito alcun titolo di sezione, non è necessario per quel particolare frammento.

1. Comprensione del video HTML5

Campione veloce

<script type = "text / javascript"> function understands_video () {return !! document.createElement ('video'). canPlayType; // booleano} if (! understands_video ()) {// Deve essere un browser o IE precedente. // Forse fai qualcosa come nascondere i controlli // HTML5 personalizzati. O qualunque altra cosa ... videoControls.style.display = 'none'; } </script>

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

<script type = "text / javascript"> / ** * Imposta un cookie con il nome e il valore indicati. * * nome Nome del cookie * valore Valore del cookie * [scade] Data di scadenza del cookie (impostazione predefinita: fine della sessione corrente) * [percorso] Percorso in cui il cookie è valido (impostazione predefinita: percorso del documento chiamante) * [ dominio] Dominio in cui il cookie è valido * (impostazione predefinita: dominio del documento chiamante) * [sicuro] Valore booleano che indica se la trasmissione di cookie richiede una * trasmissione sicura * / funzione setCookie (nome, valore, scadenza, percorso, dominio, sicuro) {document.cookie = name + "=" + escape (value) + ((expires)? "; expires =" + expires.toGMTString (): "") + ((path)? "; path =" + path: "") + ((domain)? "; domain =" + domain: "") + ((secure)? "; secure": ""); } </script> <script type = "text / javascript"> / ** * Ottiene il valore del cookie specificato. * * nome Nome del cookie desiderato. * * Restituisce una stringa contenente il valore del cookie specificato, * o null se il cookie non esiste. * / function getCookie (nome) {var dc = document.cookie; prefisso var = name + "="; var begin = dc.indexOf (";" + prefisso); if (begin == -1) {begin = dc.indexOf (prefisso); if (begin! = 0) restituisce null; } else {begin + = 2; } var end = document.cookie.indexOf (";", inizio); if (end == -1) {end = dc.length; } return unescape (dc.substring (inizio + prefisso.lunghezza, fine)); } </script> <script type = "text / javascript"> / ** * Elimina il cookie specificato. * * nome nome del cookie * [percorso] percorso del cookie (deve essere uguale al percorso utilizzato per creare il cookie) * [dominio] dominio del cookie (deve essere uguale al dominio utilizzato per creare il cookie) * / funzione deleteCookie ( nome, percorso, dominio) {if (getCookie (name)) {document.cookie = name + "=" + ((path)? "; path =" + path: "") + ((domain)? "; domain = "+ dominio:" ") +"; scade = Gio, 01-Jan-70 00: 00: 01 GMT "; }} </script>

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

<script type = "text / javascript"> var images = new Array (); funzione preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = new Image (); images [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </ Script>

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:

<script type = "text / javascript"> function validateEmail (theForm) {if (/^w+([.- lasting?w+)*@w+([.-[?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } avviso ("Indirizzo e-mail non valido! Inserire nuovamente con attenzione !."); tornare (false); } </script>

Corpo: <form onSubmit = "return validateEmail (this);" action = ""> Indirizzo e-mail: <input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </form>

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

<script type = "text / javascript"> function f1 () {if (document.all) {return false; }} funzione 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 = nuova funzione ("return false"); </ Script>

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: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "L'azione è la vera misura dell'intelligenza."; quotes [1] = "Il baseball ha il grande vantaggio rispetto al cricket di essere presto concluso."; quotes [2] = "Ogni obiettivo, ogni azione, ogni pensiero, ogni sentimento che uno prova, sia esso consciamente o inconsciamente conosciuto, è un tentativo di aumentare il proprio livello di tranquillità."; quotes [3] = "Una buona testa e un buon cuore sono sempre una combinazione formidabile."; var rand = Math.floor (Math.random () * quotes.length); document.write (citazioni [rand]); } writeRandomQuote (); </ Script>

Corpo: <script type = "text / javascript"> writeRandomQuote (); </script>

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

<a href="javascript:history.back(1)"> Pagina precedente </a> | <a href="javascript:history.back(-1)"> Pagina successiva </a>

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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Your Site Name')"> Aggiungi ai preferiti </a>

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

<a href="javascript:window.print();"> Stampa pagina </a>

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: <script type = "text / javascript"> funzione showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // i mesi sono basati su zero var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Corpo: <script type = "text / javascript"> showDate (); </script>

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: <script type = "text / javascript"> funzione 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); } </script>

Corpo: <script type = "text / javascript"> addCommas ("4550989023"); </script>

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // i browser più conformi agli standard (mozilla / netscape / opera / IE7) usano window.innerWidth e window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 in modalità conforme agli standard (vale a dire con un tipo di documento valido come prima riga nel documento) altrimenti se (tipo di documento.documentElement! = 'Undefined' && tipo di document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // versioni precedenti di IE else {viewportwidth = document.getElementsByTagName ('body') [0] .getClientBot. ('body') [0] .clientHeight} document.write ('<p> La larghezza della finestra è' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

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

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

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

<script type = "text / javascript"> 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"; }} </script>

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

<script language = "javascript" type = "text / javascript"> <! - window.status = "<Digita il tuo messaggio>"; // -> </script>

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.