15 Gratis JavaScript-voorbeeldfragmenten voor uw websites

Bijgewerkt: 29 april 2021 / Artikel door: WHSR Guest

openbaring: WHSR wordt door lezers ondersteund. Wanneer u via onze links koopt, kunnen we een commissie verdienen.

JavaScript is tegenwoordig overal online gebruikt - om de interactiviteit van de website te verbeteren, om informatie te valideren en / of om het uiterlijk van een website te verbeteren.

JavaScript verscheen voor het eerst in 1995 en heeft sindsdien een lange weg afgelegd wat betreft acceptatie en hoe het wordt gebruikt. De syntax die in JavaScript wordt gebruikt, werd sterk beïnvloed door C; maar Java, Pearl, Python en Scheme speelden ook een rol.

JavaScrip Beginners Tips: Wat u moet weten?

Om te beginnen, een paar basics die je moet weten zijn:

  • JavaScript kan in de browser worden uitgeschakeld
  • JavaScript wordt uitgevoerd elke keer dat een pagina wordt geladen
  • JavaScript kost tijd om te laden via een trage internetverbinding
  • JavaScript wordt nog steeds uitgevoerd vanuit de cachepagina's
  • U kunt JavaScript binnen een webpagina hosten of extern van een JS-bestand
  • JavaScript is heel anders dan Java

Het is ook belangrijk om te begrijpen dat JavaScript daadwerkelijk tot een ramp zal leiden wanneer het op een verkeerde manier wordt gebruikt.

Slecht geconfigureerde en slordig gecodeerde JavaScripts zullen uw website vertragen en de algehele sitenavigatie beschadigen. Dit heeft op zijn beurt invloed op het terugkeerpercentage van uw bezoekers (vanwege een slechte gebruikerservaring) en op de rankings van zoekmachines (vanwege de trage reactiesnelheid van de website en het crawlen van botten). Verplaats jezelf in de schoenen van een kijker om mijn zaak hier te helpen valideren. Als een website die u bezoekt langzaam wordt geladen, moeilijk te navigeren is en over het algemeen onaantrekkelijk, zou u dan terugkeren naar de site? Ik zou het niet doen.

Hieronder vindt u een kleine lijst waar u aan moet denken bij het toevoegen van JavaScript aan jouw website.

  • Is JavaScript vereist voor de goede werking van de site?
  • Hoe ziet de site eruit als JavaScript is geblokkeerd?
  • Zal JavaScript de prestaties van de server schaden?
  • Kan het toevoegen van JavaScript u helpen uw site in de gewenste richting te verplaatsen?

Nee, ik probeer u niet weg te jagen met deze punten.

Wees in feite niet bang om dat te doen gebruik JavaScript op uw websites omdat het tonnen voordelen biedt en, zoals gezegd, wordt het door de meerderheden gebruikt. Het belangrijkste punt dat ik hier probeer over te brengen, is niet alleen JavaScript-functies aan een site blijven toevoegen wanneer ze niet nodig zijn. Sommige sites hebben meer JavaScript nodig dan de rest; sommigen hebben gewoon minder nodig - Alleen omdat één site het doet, betekent niet dat u hetzelfde moet doen.

Freebies: 15 Cool JavaScript-fragmenten voor uw website

Laten we nu eens kijken naar de dingen waarvoor u hier bent gekomen - hieronder vindt u een lijst met 15 JavaScript-fragmenten die uw site zowel qua functionaliteit als uiterlijk zullen verbeteren. De code wordt opgesplitst in twee secties, de head en body of .js-bestand. Als er geen sectietitel is opgegeven, is deze niet nodig voor dat specifieke fragment.

1. HTML5-video begrijpen

Snel voorbeeld

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

Wat doet het JavaScript-fragment?

Dit kleine fragment voorkomt dat uw website probeert een video weer te geven die de browser niet kan ondersteunen, waardoor u bandbreedte en verwerkingskracht bespaart.

2. JavaScript-cookies

Snel voorbeeld

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

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

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

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

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

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

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

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

    if (end == -1) {

        end = dc.length;

    }

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

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

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

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

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

Wat doet het JavaScript-fragment?

Dit fragment is een beetje lang maar erg handig, het zal uw site toestaan ​​om informatie op de computer van de kijker op te slaan en deze vervolgens op een ander tijdstip te lezen. Dit fragment kan op veel verschillende manieren worden gebruikt om verschillende taken uit te voeren.

3. Laad uw afbeeldingen vooraf

Snel voorbeeld

var images = new Array();

function preloadImages(){

    for (i=0; i 

Wat doet het JavaScript-fragment?

Dit fragment voorkomt dat uw site die lastige tijd heeft wanneer het slechts een deel van de site weergeeft; dit ziet er niet alleen slecht uit, maar is ook onprofessioneel. Het enige wat u hoeft te doen is uw afbeeldingen toevoegen aan de sectie preloadImages en u bent klaar om te rollen.

4. E-mail validatie

Snel voorbeeld

Hoofd:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Lichaam: E-mailadres:

Wat doet het JavaScript-fragment?

Dit fragment valideert dat een correct opgemaakt e-mailadres in een formulier wordt ingevoerd, het kan niet garanderen dat het e-mailadres echt is, er is geen manier om dat te controleren met JavaScript.

5. Geen rechtermuisknop

Snel voorbeeld

function f1() {
  if(document.all) { return false; }
}
function 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 = new function("return false");

Wat doet het JavaScript-fragment?

Dit fragment zal voorkomen dat de kijker met uw rechtermuisknop op uw pagina kan klikken. Dit kan de gemiddelde gebruiker ontmoedigen om afbeeldingen of code van uw site te lenen.

6. Toon willekeurige citaten

Snel voorbeeld

Hoofd:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Lichaam: writeRandomQuote();

Wat doet het JavaScript-fragment?

Ok dus dit is geen fragment dat alle sites zouden gebruiken, maar het kan worden gebruikt om meer weer te geven dan alleen willekeurige aanhalingstekens. U kunt de inhoud van de aanhalingstekens wijzigen in wat u maar wilt en willekeurige afbeeldingen of tekst overal op uw site laten weergeven.

7. Vorige / volgende links

Snel voorbeeld

Vorige pagina | Volgende bladzijde

Wat doet het JavaScript-fragment?

Dit fragment is geweldig als u meerdere pagina's over een artikel of zelfstudie gebruikt. Hiermee kan de gebruiker met gemak door de pagina's bladeren. Het is ook klein en licht in resource-perspectief.

8. Voeg een bladwijzer toe voor een pagina

Snel voorbeeld

Toevoegen aan favorieten

Wat doet het JavaScript-fragment?

Met dit fragment kan de gebruiker gemakkelijk een bladwijzer maken voor uw pagina; alles wat ze moeten doen, is op de link klikken. De kleine functies zoals deze kunnen de algehele ervaring van je kijkers vergroten.

9. Gemakkelijke paginakoppeling

Snel voorbeeld

Print pagina

Wat doet het JavaScript-fragment?

Met deze kleine link kunt u uw pagina eenvoudig afdrukken. Het maakt gebruik van de snelafdrukfunctie die al door uw browser is ingesteld en gebruikt geen bronnen totdat erop wordt geklikt.

10. Opgemaakte datum weergeven

Snel voorbeeld

Hoofd:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Lichaam: showDate();

Wat doet het JavaScript-fragment?

Met dit fragment kunt u de huidige datum overal op uw webpagina weergeven en hoeft deze niet te worden bijgewerkt. Plaats het gewoon op zijn plaats en vergeet het.

11. Komma-scheidingsteken

Snel voorbeeld

Hoofd:
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);
}


Lichaam: addCommas("4550989023");

Wat doet het JavaScript-fragment?

Dit fragment wordt voornamelijk gebruikt door sites die vaak nummers gebruiken. Dit fragment zorgt ervoor dat uw cijfers er overal hetzelfde uitzien. Het enige dat u hoeft te doen, is de hoofdtekst kopiëren waar u een nummer wilt toevoegen en het nummer daar vervangen door uw nummer.

12. Download het weergavegebied van een browser

Snel voorbeeld

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Wat doet het JavaScript-fragment?

Met dit fragment kunt u de breedte en hoogte van het weergavegebied in uw browsers weergeven. Dit geeft de ontwerper de mogelijkheid om verschillende weergaven te maken en te gebruiken op basis van de grootte van het browservenster van de gebruiker.

13. Omleiden met optionele vertraging

Snel voorbeeld

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

Wat doet het JavaScript-fragment?

Met dit fragment kunt u uw kijkers naar een andere pagina omleiden en heeft u de mogelijkheid om een ​​vertraging in te stellen. Het gebruik van dit fragment is behoorlijk duidelijk en het is een zeer waardevol hulpmiddel om aan je riem te hebben.

14. Detecteer iPhones

Voorbeeld van een

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

    }

}

Wat doet het JavaScript-fragment?

Met dit fragment kunt u detecteren of uw kijker op een iPhone of iPod staat, zodat u verschillende inhoud kunt weergeven. Dit fragment is van onschatbare waarde met hoe groot de mobiele markt is en het zal alleen maar blijven groeien.

15. Print bericht naar statusbalk

Snel voorbeeld

 
"; 
// --> 

Wat doet het JavaScript-fragment?

Met dit kleine fragment kunt u een bericht afdrukken naar de statusbalk. U kunt recent of belangrijk nieuws weergeven in een gebied dat de aandacht van de gebruiker trekt.

Lees verder:

Over WHSR Gast

Dit artikel is geschreven door een gastbijdrager. De onderstaande standpunten van de auteur zijn volledig van hemzelf en komen mogelijk niet overeen met de mening van WHSR.