15 gratis JavaScript-prøveuddrag til dine websteder

JavaScript bruges overalt online i disse dage – for at forbedre webstedets interaktivitet, til at validere information og / eller for at forbedre et webstedssyn.


JavaScript kom først ud i 1995 og er nået langt siden da med hensyn til at blive accepteret og hvordan det bruges. Syntaks brugt i JavaScript var stærkt påvirket af C; men Java, Pearl, Python og Scheme spillede også sin rolle.

JavaScrip Begyndertips: Hvad du skal vide?

For det første er et par grundlæggende, du har brug for at vide:

  • JavaScript kan slukkes i browseren
  • JavaScript kører hver gang en side indlæses
  • JavaScript tager tid at indlæse på en langsom internetforbindelse
  • JavaScript køres stadig fra cachelagrede sider
  • Du kan være vært for JavaScript på en webside eller eksternt fra en .js-fil
  • JavaScript er helt anderledes end Java

Det er også vigtigt at forstå, at JavaScript faktisk vil føre til katastrofe, når det bruges på en forkert måde.

Dårligt konfigurerede og slurvede kodede JavaScripts bremser dit websted og beskadiger den overordnede navigationsside. Dette påvirker igen afkastet for dine besøgende (på grund af dårlig brugeroplevelse) såvel som søgemaskinens placering (på grund af langsom respons på webstedet og botcrawling). For at hjælpe med at validere min sag her skal du lægge dig selv i en seers sko. Hvis et websted, du besøgte blev indlæst langsomt, var vanskeligt at navigere og i det hele taget ikke tiltalende – ville du vende tilbage til stedet? Det ville jeg ikke.

Nedenfor er en lille liste over ting, du skal tænke på, når du tilføjer JavaScript til dit websted.

  • Er JavaScript påkrævet for at webstedet skal fungere korrekt?
  • Hvordan ser webstedet ud, hvis JavaScript blev blokeret?
  • Vil JavaScript skade serverens ydeevne?
  • Vil tilføje JavaScript-hjælp til at flytte dit websted i den retning, du vil have det til at gå?

Nej, jeg prøver ikke at skræmme dig væk med disse punkter.

Vær faktisk ikke bange for at bruge JavaScript på dine websteder, da det giver mange fordele og, som nævnt, det bruges af flertallet. Det vigtigste punkt, jeg forsøger at komme over her, er ikke blot at tilføje JavaScript-funktioner til et websted, når de er unødvendige. Nogle steder har brug for mere JavaScript end resten; nogle har bare brug for mindre – Bare fordi et websted gør det, betyder det ikke, at du skal gøre det samme.

Freebies: 15 seje JavaScript-kodestykker til dit websted

Lad os nu komme ned på de ting, du kom hit til – nedenfor er en liste over 15 JavaScript-kodestykker, der vil forbedre dit websted i enten funktionalitet eller udseende. Koden opdeles i to sektioner, hoved- og krops- eller .js-fil. Hvis der ikke gives nogen afsnitstitel, er det ikke nødvendigt for det pågældende uddrag.

1. Forståelse af HTML5-video

Hurtig prøve

funktion forstår_video () {
return !! document.createElement (‘video’). canPlayType; // boolsk
}

hvis (! forstår_video ()) {
// Skal være ældre browser eller IE.
// Måske gør noget som at skjule brugerdefineret
// HTML5-kontroller. Eller hvad som helst…
videoControls.style.display = ‘ingen’;
}

Hvad gør JavaScript-kodestykket?

Dette lille uddrag forhindrer dit websted i at prøve at vise en video, som browseren ikke kan understøtte, hvilket sparer båndbredde og behandlingskraft.

2. JavaScript-cookies

Hurtig prøve

/ **

* Sætter en cookie med det givne navn og værdi.

*

* navn Cookie-navn

* værdi Cookies værdi

* [udløber] Udløbsdato for cookien (standard: slutningen af ​​den aktuelle session)

* [sti] Sti, hvor cookien er gyldig (standard: stien til det kaldende dokument)

* [domæne] Domæne, hvor cookien er gyldig

* (Standard: opkaldsdokumentets domæne)

* [sikker] Boolsk værdi, der angiver, om cookie-transmission kræver a

* Sikker transmission

* /

funktion setCookie (navn, værdi, udløber, sti, domæne, sikker) {

document.cookie = navn + "=" + escape (værdi) +

((Udløber) ? "; udløber =" + udløber.toGMTString (): "") +

((sti) ? "; path =" + sti: "") +

((domæne) ? "; domæne =" + domæne : "") +

((sikker) ? "; sikker" : "");

}

/ **

* Henter værdien af ​​den specificerede cookie.

*

* navn Navn på den ønskede cookie.

*

* Returnerer en streng, der indeholder værdien af ​​den specificerede cookie,

* Eller null, hvis cookien ikke findes.

* /

funktion getCookie (navn) {

var dc = document.cookie;

var præfiks = navn + "=";

var begynde = dc.indexOf ("; " + præfiks);

hvis (begynde == -1) {

begynde = dc.indexOf (præfiks);

hvis (start! = 0) returnerer null;

} andet {

begynde + = 2;

}

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

if (slut == -1) {

ende = dc.længde;

}

returnere unescape (dc.substring (begynde + præfiks. længde, slut));

}

/ **

* Sleter den angivne cookie.

*

* Navn på cookien

* [sti] -stien til cookien (skal være den samme som stien, der bruges til at oprette cookie)

* [domæne] domæne i cookien (skal være det samme som domæne brugt til at oprette cookie)

* /

funktion deleteCookie (navn, sti, domæne) {

if (getCookie (navn)) {

document.cookie = navn + "=" +

((sti) ? "; path =" + sti: "") +

((domæne) ? "; domæne =" + domæne : "") +

"; udløber = Thu, 01-Jan-70 00:00:01 GMT";

}

}

Hvad gør JavaScript-kodestykket?

Dette uddrag er lidt langt, men meget nyttigt, det giver dit websted mulighed for at gemme oplysninger på seerens computer og derefter læse det på et andet tidspunkt. Dette uddrag kan bruges på mange forskellige måder til at udføre forskellige opgaver.

3. Forlæs dine billeder

Hurtig prøve

var images = new Array ();

function preloadImages () {

for (i = 0; i < preloadImages.arguments.length; i ++) {

billeder [i] = nyt billede ();

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

}

}

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

Hvad gør JavaScript-kodestykket?

Dette uddrag forhindrer dit websted i at have det akavelige tidspunkt, når det kun viser en del af webstedet; dette ser ikke kun dårligt ud, men er også uprofessionelt. Alt hvad du skal gøre er at tilføje dine billeder til sektionen for indlæses billeder, og du er klar til at rulle.

4. Validering af e-mail

Hurtig prøve

Hoved:

funktion validateEmail (theForm) {
hvis (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
tilbagevenden (sand);
}
alert("Ugyldig emailadresse! Indtast venligst omhyggeligt!.");
returnere (falsk);
}

Legeme:

Email adresse:

Hvad gør JavaScript-kodestykket?

Dette kodestykke validerer, at en korrekt formateret e-mail-adresse indtastes i en form, det kan ikke garantere, at e-mail-adressen er ægte, der er ingen måde at kontrollere for det med JavaScript.

5. Intet højreklik

Hurtig prøve

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

Hvad gør JavaScript-kodestykket?

Dette uddrag forhindrer seeren i at være i stand til at højreklikke på din side. Dette kan afskrække den gennemsnitlige bruger fra at låne billeder eller kode fra dit websted.

6. Vis tilfældige citater

Hurtig prøve

Hoved:

writeRandomQuote = funktion () {
var citater = new Array ();
citater [0] = "Handling er det reelle mål for intelligens.";
citater [1] = "Baseball har den store fordel i forhold til cricket ved at være før slutt.";
citater [2] = "Hvert mål, enhver handling, enhver tanke, enhver følelse man oplever, hvad enten det er bevidst eller ubevidst kendt, er et forsøg på at øge ens niveau af ro i sindet.";
citater [3] = "Et godt hoved og et godt hjerte er altid en formidabel kombination.";
var rand = Math.floor (Math.random () * citater. længde);
document.write (noteringer [rand]);
}
writeRandomQuote ();

Legeme:

writeRandomQuote ();

Hvad gør JavaScript-kodestykket?

Ok, så dette er ikke et uddrag, som alle sider ville bruge, men det kan bruges til at vise mere end blot tilfældige citater. Du kan ændre indholdet ok citaterne til hvad du vil og få tilfældige billeder eller tekst vist hvor som helst på dit websted.

7. Forrige / næste links

Hurtig prøve

Forrige side | Næste side

Hvad gør JavaScript-kodestykket?

Dette uddrag er godt, hvis du har flere sider på en artikel eller en tutorial. Det giver brugeren let at gennemse mellem siderne. Det er også lille og let vægt fra et ressource synspunkt.

8. Bogmærke en side

Hurtig prøve

Tilføj til favoritter

Hvad gør JavaScript-kodestykket?

Dette uddrag giver brugeren mulighed for at bogmærke din side med lethed; alt hvad de skal gøre er at klikke på linket. Dens små funktioner som denne, der kan øge dine seeres samlede oplevelse.

9. Easy Print Page Link

Hurtig prøve

Udskriv side

Hvad gør JavaScript-kodestykket?

Dette lille link gør det muligt for dine visninger nemt at udskrive din side. Den bruger den hurtige udskrivningsfunktion, der allerede er konfigureret af din browser, og bruger ingen ressourcer, før det klikkes på.

10. Vis formateret dato

Hurtig prøve

Hoved:

funktion showDate () {
var d = ny dato ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // måneder er nulbaseret
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}

Legeme:

VisDato ();

Hvad gør JavaScript-kodestykket?

Dette uddrag giver dig mulighed for at vise den aktuelle dato hvor som helst på din webside og behøver ikke at blive opdateret. Bare sæt det på plads og glem det.

11. Kommaseparator

Hurtig prøve

Hoved:

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

Legeme:

addCommas ("4550989023");

Hvad gør JavaScript-kodestykket?

Dette uddrag bruges hovedsageligt af websteder, der ofte bruger numre. Dette uddrag holder dine numre de samme overalt. Alt hvad du skal gøre er at kopiere hovedlinjen, hvor du vil tilføje et nummer og erstatte nummeret der med dit nummer.

12. Hent visningsområdet for en browser

Hurtig prøve

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me
    0
    Like this post? Please share to your friends:
    Adblock
    detector
    map