15 gratis JavaScript-provavsnitt för dina webbplatser

Javascript används överallt online i dessa dagar – för att förbättra webbplatsens interaktivitet, för att validera information och / eller för att förbättra webbplatsens synpunkter.


JavaScript kom först ut 1995 och har kommit långt sedan dess när det gäller att accepteras och hur det används. Syntaxen som användes i JavaScript påverkades starkt av C; men Java, Pearl, Python och Scheme spelade också sin roll.

JavaScrip nybörjartips: Vad du behöver veta?

Till att börja med är några grunder som du behöver veta:

  • JavaScript kan stängas av i webbläsaren
  • JavaScript körs varje gång en sida laddas
  • JavaScript tar tid att ladda på en långsam Internet-anslutning
  • JavaScript körs fortfarande från cachade sidor
  • Du kan vara värd för JavaScript på en webbsida eller externt från en .js-fil
  • JavaScript är helt annorlunda än Java

Det är också viktigt att förstå att JavaScript faktiskt kommer att leda till en katastrof när det används på fel sätt.

Dåligt konfigurerade och slarviga kodade JavaScripts kommer att bromsa din webbplats och skada den övergripande navigeringen på webbplatsen. Detta påverkar i sin tur retursfrekvensen för dina besökare (på grund av dålig användarupplevelse) såväl som sökmotorsrankingen (på grund av långsam webbplatsresponsfrekvens och botgenomsökning). För att bekräfta mitt fall här, lägg dig själv i en tittares skor. Om en webbplats som du besökte laddade långsamt, var svår att navigera och i allmänhet, inte tilltalande – skulle du återvända till webbplatsen? Det skulle jag inte.

Nedan finns en liten lista över saker att tänka på när du lägger till JavaScript till din webbplats.

  • Kräver JavaScript för att webbplatsen ska fungera korrekt?
  • Hur ser webbplatsen ut om JavaScript har blockerats?
  • Kommer JavaScript att skada serverns prestanda?
  • Kommer att lägga till JavaScript-hjälp för att flytta din webbplats i den riktning du vill att den ska gå?

Nej, jag försöker inte skrämma bort dig med dessa punkter.

Var egentligen inte rädd för att använda JavaScript på dina webbplatser eftersom det ger massor av fördelar och som nämnt används det av majoriteterna. Den viktigaste punkten jag försöker komma över här är att inte bara fortsätta lägga till JavaScript-funktioner till en webbplats när de är onödiga. Vissa webbplatser kommer att behöva mer JavaScript än resten; vissa behöver bara mindre – Bara för att en webbplats gör det betyder det inte att du ska göra samma sak.

Freebies: 15 coola JavaScript-kodavsnitt för din webbplats

Låt oss nu komma till de saker du kom hit för – nedan är en lista med 15 JavaScript-utdrag som kommer att förbättra din webbplats i antingen funktionalitet eller utseende. Koden kommer att delas upp i två sektioner, huvudet och kroppen eller .js-filen. Om ingen avsnittstitel anges behövs det inte för det specifika utdraget.

1. Förstå HTML5-video

Snabbprov

funktionen förstår_video () {
return !! document.createElement (‘video’). canPlayType; // boolean
}

if (! förstår_video ()) {
// Måste vara äldre webbläsare eller IE.
// Kanske gör något som dölja anpassade
// HTML5-kontroller. Eller vad som helst…
videoControls.style.display = ‘ingen’;
}

Vad gör JavaScript-kodavsnittet?

Det här lilla utdraget kommer att förhindra att din webbplats försöker visa en video som webbläsaren inte kan stödja, vilket sparar bandbredd och bearbetningskraft.

2. JavaScript-kakor

Snabbprov

/ **

* Ställer in en cookie med det givna namnet och värdet.

*

* namn Cookies namn

* värde Kakans värde

* [löper ut] Cookies utgångsdatum (standard: slutet av den aktuella sessionen)

* [sökväg] Sökväg där cookien är giltig (standard: sökdokumentets sökväg)

* [domän] Domän där cookien är giltig

* (Standard: anropsdokumentets domän)

* [säker] Booleskt värde som indikerar om cookieöverföringen kräver a

* Säker transmission

* /

funktion setCookie (namn, värde, löper ut, sökväg, domän, säker) {

document.cookie = namn + "=" + escape (värde) +

((Löper ut) ? "; löper ut =" + expires.toGMTString (): "") +

((väg) ? "; path =" + väg: "") +

((domän) ? "; domän =" + domän: "") +

((säkra) ? "; säkra" : "");

}

/ **

* Hämtar värdet på den angivna cookien.

*

* namn Namn på önskad cookie.

*

* Returnerar en sträng som innehåller värdet på den angivna cookien,

* Eller null om cookie inte finns.

* /

funktion getCookie (namn) {

var dc = document.cookie;

var prefix = namn + "=";

var börja = dc.indexOf ("; " + prefix);

if (börja == -1) {

börja = dc.indexOf (prefix);

om (börja! = 0) returnera null;

} annat {

börja + = 2;

}

var end = document.cookie.indexOf (";", Börja);

if (slut == -1) {

slut = DC-längd;

}

returnera unescape (dc.substring (börja + prefix.length, end));

}

/ **

* Tar bort den angivna cookien.

*

* namn på kakan

* [sökväg] sökvägen för kakan (måste vara samma som sökvägen som används för att skapa cookie)

* [domän] domän i kakan (måste vara samma som domän som används för att skapa cookie)

* /

funktion deleteCookie (namn, sökväg, domän) {

if (getCookie (namn)) {

document.cookie = namn + "=" +

((väg) ? "; path =" + väg: "") +

((domän) ? "; domän =" + domän: "") +

"; löper ut = Thu, 01-Jan-70 00:00:01 GMT";

}

}

Vad gör JavaScript-kodavsnittet?

Det här utdraget är lite långt men mycket användbart, det gör att din webbplats kan lagra information på tittarens dator och sedan läsa den vid en annan tidpunkt. Detta utdrag kan användas på många olika sätt för att utföra olika uppgifter.

3. Ladda dina bilder

Snabbprov

var bilder = new Array ();

function preloadImages () {

för (i = 0; i < preloadImages.arguments.length; i ++) {

bilder [i] = ny bild ();

bilder [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

Vad gör JavaScript-kodavsnittet?

Det här utdraget förhindrar din webbplats från att ha den besvärliga tiden när den bara visar en del av webbplatsen; detta ser inte bara dåligt ut utan är också oprofessionellt. Allt du behöver göra är att lägga till dina bilder i avsnittet för laddning av bilder och du är redo att rulla.

4. Validering via e-post

Snabbprov

Huvud:

function validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
avkastning (true);
}
varna("Ogiltig e-postadress! Vänligen ange igen noggrant!.");
retur (false);
}

Kropp:

E-postadress:

Vad gör JavaScript-kodavsnittet?

Det här utdraget validerar att en korrekt formaterad e-postadress anges i ett formulär, det kan inte garantera att e-postadressen är riktig, det finns inget sätt att kontrollera om det med JavaScript.

5. Inga högerklicka

Snabbprov

funktion f1 () {
if (document.all) {returnera falsk; }
}
funktion f2 (e) {
if (document.layers || (document.getElementById &! document.all)) {
if (e.which == 2 || e.which == 3) {return falsk; }
}
}
if (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
annars {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = ny funktion ("returnera falskt");

Vad gör JavaScript-kodavsnittet?

Det här utdraget förhindrar att tittaren kan högerklicka på din sida. Detta kan avskräcka den genomsnittliga användaren från att låna bilder eller kod från din webbplats.

6. Visa slumpmässiga citat

Snabbprov

Huvud:

writeRandomQuote = funktion () {
var citat = new Array ();
citat [0] = "Handling är det verkliga måttet på intelligens.";
citat [1] = "Baseball har den stora fördelen framför cricket att bli förr slut.";
citat [2] = "Varje mål, varje handling, varje tanke, varje känsla man upplever, vare sig det är medvetet eller omedvetet känt, är ett försök att öka ens nivå av sinnesfrid.";
citat [3] = "Ett bra huvud och ett bra hjärta är alltid en formidabel kombination.";
var rand = Math.floor (Math.random () * citatlängd);
document.write (citat [rand]);
}
writeRandomQuote ();

Kropp:

writeRandomQuote ();

Vad gör JavaScript-kodavsnittet?

Ok, så detta är inte ett utdrag som alla webbplatser skulle använda men det kan användas för att visa mer än bara slumpmässiga citat. Du kan ändra innehållet och citaterna till vad du vill ha och slumpmässiga bilder eller text visas var som helst på din webbplats.

7. Föregående / nästa länkar

Snabbprov

Föregående sida | Nästa sida

Vad gör JavaScript-kodavsnittet?

Det här utdraget är bra om du har flera sidor i en artikel eller en självstudie. Det gör att användaren lätt kan bläddra mellan sidorna. Det är också litet och lätt ur resurssynpunkt.

8. Bokmärk en sida

Snabbprov

Lägg till i favoriter

Vad gör JavaScript-kodavsnittet?

Det här utdraget gör att användaren lätt kan bokmärka din sida; allt de behöver göra är att klicka på länken. Dess små funktioner som denna som kan öka dina tittares totala upplevelse.

9. Enkel utskriftslänk

Snabbprov

Skriv ut sidan

Vad gör JavaScript-kodavsnittet?

Den lilla länken gör att dina vyer enkelt kan skriva ut din sida. Den använder den snabba utskriftsfunktionen som redan har konfigurerats av din webbläsare och använder inga resurser förrän den klickas.

10. Visa formaterat datum

Snabbprov

Huvud:

funktion showDate () {
var d = nytt datum ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // månader är nollbaserade
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

Kropp:

showdate ();

Vad gör JavaScript-kodavsnittet?

Det här utdraget låter dig visa det aktuella datumet var som helst på din webbsida och behöver inte uppdateras. Sätt helt enkelt på plats och glöm det.

11. Kommaseparator

Snabbprov

Huvud:

funktion addCommas (num) {
num + = ”;
var n1 = num.split (‘.’);
var n2 = n1 [0];
var n3 = n1.längd > 1? ” + n1 [1]: ”;
var temp = / (d +) (d {3}) /;
medan (temp.test (n2)) {
n2 = n2.replace (temp, ” + ‘,’ + ”);
}
var ut = return n2 + n3;
document.write (ut);
}

Kropp:

addCommas ("4550989023");

Vad gör JavaScript-kodavsnittet?

Detta utdrag används främst av webbplatser som använder nummer ofta. Det här utdraget kommer att hålla dina nummer ser lika över hela linjen. Allt du behöver göra är att kopiera karaktärslinjen där du vill lägga till ett nummer och ersätta numret där med ditt nummer.

12. Hämta en webbläsares visningsområde

Snabbprov

Jeffrey Wilson Administrator

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