15 Cool Snippet di esempi JavaScript

Articolo scritto da:
  • Articoli consigliati
  • Aggiornato: Mar 06, 2012

Una rapida panoramica su JavaScript

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 su 1995 e ha fatto molta strada da allora in termini di accettazione e di utilizzo. La sintassi utilizzata in JavaScript è stata fortemente influenzata da C; ma anche Java, Pearl, Python e Scheme hanno fatto la loro parte.

Che cos'è JavaScript?

C'è un vecchio video di YouTube che risponde bene alla domanda. Ecco qui.

Suggerimenti per principianti: 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 in realtà porterà a un disastro quando viene utilizzato in modo errato. Script Java scarsamente configurati e sciatti rallenteranno il tuo sito web e danneggeranno la navigazione generale del sito. Ciò a sua volta influisce sul tasso di rendimento dei visitatori (a causa della cattiva esperienza dell'utente) e sul posizionamento nei motori di ricerca (a causa della bassa velocità di risposta del sito Web). Per aiutare a convalidare il mio caso qui, mettiti nei panni di uno spettatore. Se un sito web che stavi visitando caricasse lentamente, era difficile da navigare e, nel complesso, poco attraente, torneresti sul sito? Non lo farei

Di seguito è riportato un breve elenco di cose a cui pensare quando si aggiunge JavaScript al 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 abbiate paura di usare JavaScript sui vostri siti Web in quanto fornisce molti vantaggi e, come detto, viene utilizzato dalle maggioranze. Il punto chiave su cui sto cercando di passare qui non è solo continuare ad aggiungere funzionalità JavaScript a un sito quando non sono necessarie. Alcuni siti hanno bisogno di più JavaScript rispetto al resto; 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

Snippet JavaScript

Ora, passiamo alle cose per cui sei venuto qui: sotto c'è un elenco di snippet JavaScript 15 che miglioreranno il tuo sito sia in termini di funzionalità che di aspetto. Il codice sarà 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.

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 più vecchio o IE.
// Forse fai qualcosa come hide custom
// Controlli HTML5. O qualunque cosa ...
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.

Cookie JavaScript

Campione veloce

<script type="text/javascript">

/ **

* Imposta un cookie con il nome e il valore specificati.

*

* 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 (predefinito: percorso del documento chiamante)

* [dominio] Dominio in cui il cookie è valido

* (predefinito: dominio del documento chiamante)

* [sicuro] Valore booleano che indica se la trasmissione dei cookie richiede a

* trasmissione sicura

*/

function setCookie (nome, valore, scadenza, percorso, dominio, sicuro) {

document.cookie = nome + "=" + escape (valore) +

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

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

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

((Custodito) »; sicuro": "");

}

<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 (name) {

var dc = document.cookie;

var prefisso = nome + "=";

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

if (begin == -1) {

begin = dc.indexOf (prefisso);

se (begin! = 0) restituisce null;

} Else {

inizio + = 2;

}

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

if (end == -1) {

end = dc.length;

}

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

}

<script type="text/javascript">

/ **

* Elimina il cookie specificato.

*

* nome del cookie

* percorso [percorso] del cookie (deve essere uguale al percorso utilizzato per creare cookie)

* dominio [dominio] del cookie (deve essere uguale al dominio utilizzato per creare cookie)

*/

function deleteCookie (nome, percorso, dominio) {

if (getCookie (nome)) {

document.cookie = nome + "=" +

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

((dominio)? "; 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.

Precaricare le tue immagini

Campione veloce

<script type="text/javascript">

var images = new Array ();

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

Che cosa fa lo snippet di JavaScript?

Questo snippet impedirà al tuo sito di avere quell'imbarazzante momento in cui 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.

Convalida e-mail

Campione veloce

Capo:

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

Corpo:

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

Che cosa fa lo snippet di JavaScript?

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

Nessun clic col 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");

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.

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 sul fatto che il cricket sia finito prima.";
quotes [2] = "Ogni obiettivo, ogni azione, ogni pensiero, ogni sentimento che si sperimenta, che sia consapevole o inconsapevolmente conosciuto, è un tentativo di aumentare il livello di pace della mente.";
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 ();

Corpo:

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

Che cosa fa lo snippet di JavaScript?

Ok, questo non è uno snippet che tutti i siti userebbero ma può essere usato per mostrare più di semplici citazioni casuali. Puoi modificare il contenuto, le virgolette, in base a ciò che desideri e avere immagini o testo casuali visualizzati ovunque sul tuo sito.

Collegamenti 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.

Aggiungi una pagina ai segnalibri

Campione veloce

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Il tuo nome del sito')"> Aggiungi ai preferiti </a>

Che cosa fa lo snippet di JavaScript?

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

Easy Print Page Link

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.

Mostra data formattata

Campione veloce

Capo:

<script type = "text / javascript">
function showDate () {
var d = new Date ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // mesi sono a base zero
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

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 dimenticarlo.

Separatore di virgola

Campione veloce

Capo:

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

Corpo:

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

Che cosa fa lo snippet di JavaScript?

Questo frammento sarebbe utilizzato principalmente da 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.

Ottieni l'area di visualizzazione di un browser

Campione veloce

<script type="text/javascript">

<! -

var viewportwidth;

var viewportheight;

// più browser compatibili con lo 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 (cioè con un doctype valido come prima riga nel documento)

else if (typeof document.documentElement! = 'undefined'

&& typeof document.documentElement.clientWidth! =

'undefined' && document.documentElement.clientWidth! = 0)

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// versioni precedenti di IE

altro

{

viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('body') [0] .clientHeight

}

document.write ('<p> La larghezza della tua vista è' + viewportwidth + 'x' + viewportheight + '</ p>');

/ / ->

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.

Reindirizzamento con ritardo opzionale

Campione veloce

<script type = "text / javascript">

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.

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

}

}

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.

Stampa messaggio alla barra di stato

Campione veloce

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<TYPE YOUR MESSAGE>";
/ / ->

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.

Articolo dell'ospite WHSR

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.