Oggigiorno JavaScript viene utilizzato ovunque online – per migliorare l’interattività del sito Web, convalidare le informazioni e / o migliorare le prospettive di un sito Web.


JavaScript è apparso per la prima volta nel 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 sapere sono:

  • JavaScript può essere disattivato nel browser
  • JavaScript verrà eseguito ogni volta che viene caricata una pagina
  • JavaScript richiede tempo per caricarsi su una connessione Internet lenta
  • JavaScript viene ancora eseguito dalle 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 aggiungi JavaScript al tuo sito web.

  • È necessario JavaScript per il corretto funzionamento del sito?
  • Come sarà il sito se JavaScript fosse bloccato?
  • JavaScript danneggerà le prestazioni del server?
  • L’aggiunta di JavaScript aiuta 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 offre molti vantaggi e, come detto, è utilizzato dalle maggioranze. Il punto chiave che sto provando a comunicare qui non è semplicemente 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 fantastici frammenti JavaScript per il tuo sito web

Ora passiamo alle cose per cui sei venuto qui – di seguito è un elenco di 15 frammenti JavaScript 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 rapido

funzione understands_video () {
return !! document.createElement (‘video’). canPlayType; // booleano
}

if (! understands_video ()) {
// Deve essere un browser o IE precedente.
// Forse fai qualcosa di simile a hide custom
// Controlli HTML5. O qualunque cosa…
videoControls.style.display = ‘none’;
}

Cosa fa lo snippet JavaScript?

Questo piccolo frammento impedirà al tuo sito Web di provare a visualizzare un video che il browser non può supportare, risparmiando larghezza di banda e potenza di elaborazione.

2. Cookie JavaScript

Campione rapido

/ **

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

*

* nome Nome del cookie

* valore Valore del cookie

* [scadenza] 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 a

* Trasmissione sicura

* /

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

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

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

((sentiero) ? "; Path =" + sentiero : "") +

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

((sicuro) ? "; sicuro" : "");

}

/ **

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

* /

funzione getCookie (nome) {

var dc = document.cookie;

prefisso var = nome + "=";

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

if (inizio == -1) {

begin = dc.indexOf (prefisso);

if (begin! = 0) restituisce null;

} altro {

inizio + = 2;

}

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

if (end == -1) {

end = dc.length;

}

return unescape (dc.substring (inizio + prefisso.lunghezza, fine));

}

/ **

* 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 = nome + "=" +

((sentiero) ? "; Path =" + sentiero : "") +

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

"; scade = Gio, 01-gen-70 00:00:01 GMT";

}

}

Cosa fa lo snippet JavaScript?

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

3. Precarica le tue immagini

Campione rapido

var images = new Array ();

function preloadImages () {

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

Cosa fa lo snippet JavaScript?

Questo frammento impedirà al tuo sito di avere quel momento imbarazzante quando mostra solo una parte del sito; questo non solo ha un aspetto negativo, ma è anche poco professionale. Tutto quello che devi fare è aggiungere le tue immagini alla sezione Immagini precaricate e sei pronto per iniziare.

4. Convalida e-mail

Campione rapido

Testa:

funzione validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
ritorno (true);
}
mettere in guardia("Indirizzo email non valido! Ti preghiamo di inserire di nuovo con attenzione!.");
tornare (false);
}

Corpo:

Indirizzo email:

Cosa fa lo snippet JavaScript?

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

5. Nessun clic con il tasto destro

Campione rapido

funzione 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;
}
altro {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = nuova funzione ("restituire false");

Cosa fa lo snippet JavaScript?

Questo frammento impedirà allo spettatore di 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. Visualizza quotazioni casuali

Campione rapido

Testa:

writeRandomQuote = function () {
virgolette var = new Array ();
virgolette [0] = "L’azione è la vera misura dell’intelligenza.";
virgolette [1] = "Il baseball ha il grande vantaggio rispetto al cricket di essere presto concluso.";
virgolette [2] = "Ogni obiettivo, ogni azione, ogni pensiero, ogni sentimento che uno prova, sia consciamente o inconsciamente conosciuti, è un tentativo di aumentare il livello di pace mentale.";
virgolette [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:

writeRandomQuote ();

Cosa fa lo snippet JavaScript?

Ok, quindi questo non è uno snippet che tutti i siti utilizzerebbero, ma può essere utilizzato per visualizzare più di semplici citazioni casuali. Puoi modificare il contenuto e le virgolette con quello che vuoi e avere immagini casuali o testo visualizzati ovunque sul tuo sito.

7. Link precedenti / successivi

Campione rapido

Pagina precedente | Pagina successiva

Cosa fa lo snippet JavaScript?

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

8. Aggiungi una pagina ai segnalibri

Campione rapido

Aggiungi ai preferiti

Cosa fa lo snippet JavaScript?

Questo frammento consentirà all’utente di aggiungere facilmente la pagina ai segnalibri; tutto quello che devono fare è fare clic sul collegamento. Le sue piccole funzionalità come questa possono aumentare l’esperienza complessiva dei tuoi spettatori.

9. Facile collegamento alla pagina di stampa

Campione rapido

Stampa pagina

Cosa fa lo snippet JavaScript?

Questo piccolo link consentirà alle tue visualizzazioni di stampare facilmente la tua pagina. Utilizza la funzione di stampa rapida già impostata dal browser e non utilizza risorse fino a quando non viene cliccato.

10. Mostra data formattata

Campione rapido

Testa:

funzione showDate () {
var d = new Date ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // i mesi sono a base zero
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

Corpo:

showdate ();

Cosa fa lo snippet JavaScript?

Questo frammento ti consentirà di visualizzare la data corrente ovunque sulla tua pagina web e non ha bisogno di essere aggiornato. Basta metterlo in atto e non pensarci più.

11. Separatore di virgole

Campione rapido

Testa:

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 = restituisce n2 + n3;
document.write (out);
}

Corpo:

addCommas ("4550989023");

Cosa fa lo snippet JavaScript?

Questo frammento verrebbe utilizzato principalmente da siti che usano spesso numeri. Questo frammento manterrà i tuoi numeri uguali su tutta la linea. Tutto quello che devi fare è copiare la linea del corpo in cui desideri aggiungere un numero e sostituire il numero lì con il tuo numero.

12. Ottieni l’area di visualizzazione di un browser

Campione rapido

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me