15 Gratis JavaScript-voorbeeldfragmenten voor uw websites

Artikel geschreven door:
  • Aanbevolen artikelen
  • Bijgewerkt: sep 23, 2019

JavaScript is tegenwoordig overal online gebruikt - om de interactiviteit van de website te verbeteren, informatie te valideren en / of de vooruitzichten 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 rendement van uw bezoekers (vanwege een slechte gebruikerservaring) en op de rankings van zoekmachines (vanwege de trage website-responspercentages en botcrawl). Om me te helpen mijn zaak hier te valideren, plaats jezelf in de schoenen van een kijker. Als een website die u bezoekt langzaam wordt geladen, moeilijk te navigeren is en over het algemeen onaantrekkelijk - zou u terugkeren naar de site? Zou ik 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 veel voordelen biedt en, zoals gezegd, door de meerderheid wordt gebruikt. Het belangrijkste punt dat ik hier probeer over te brengen, is niet alleen JavaScript-functies aan een site blijven toevoegen als ze niet nodig zijn. Sommige sites hebben meer JavaScript nodig dan de rest; sommige hebben gewoon minder nodig - Alleen omdat een site bezig is, betekent dit 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 kwam - hieronder vindt u een lijst met 15 JavaScript-fragmenten die uw site in functionaliteit of uiterlijk zullen verbeteren. De code wordt opgesplitst in twee secties, de head en body of .js-bestand. Als er geen sectietitel wordt opgegeven, is deze niet nodig voor dat specifieke fragment.

1. HTML5-video begrijpen

Snel voorbeeld

<script type = "text / javascript"> functie begrijpt_video () {retour !! document.createElement ('video'). canPlayType; // boolean} if (! begrijpt_video ()) {// Moet oudere browser of IE zijn. // Misschien doe je zoiets als aangepaste HTML-besturingselementen verbergen. Of wat dan ook ... videoControls.style.display = 'none'; } </script>

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

<script type = "text / javascript"> / ** * Stelt een cookie in met de opgegeven naam en waarde. * * naam Naam van de cookie * waarde Waarde van de cookie * [verloopt] Vervaldatum van de cookie (standaard: einde van huidige sessie) * [pad] Pad waar de cookie geldig is (standaard: pad van aanroepend document) * [ domein] Domein waar de cookie geldig is * (standaard: domein van aanroepend document) * [veilig] Booleaanse waarde die aangeeft of de cookietransmissie een * beveiligde verzending * / functiesetCookie vereist (naam, waarde, vervalt, pad, domein, veilig) {document.cookie = name + "=" + escape (waarde) + ((verloopt)? "; expires =" + expires.toGMTString (): "") + ((pad)? "; path =" + pad: "") + ((domein)? "; domein =" + domein: "") + ((beveiligd)? "; veilig": ""); } </script> <script type = "text / javascript"> / ** * Hiermee wordt de waarde van de opgegeven cookie opgehaald. * * naam Naam van de gewenste cookie. * * Retourneert een tekenreeks met de waarde van de opgegeven cookie, * of null als de cookie niet bestaat. * / functie getCookie (naam) {var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf (";" + voorvoegsel); if (begin == -1) {begin = dc.indexOf (voorvoegsel); if (begin! = 0) retourneert null; } anders {begin + = 2; } var end = document.cookie.indexOf (";", begin); if (end == -1) {end = dc.length; } retourneer unescape (dc.substring (begin + prefix.lengte, einde)); } </script> <script type = "text / javascript"> / ** * Verwijdert de opgegeven cookie. * * naam van de cookie * [pad] pad van de cookie (moet hetzelfde zijn als het pad dat wordt gebruikt om de cookie te maken) * [domein] domein van de cookie (moet hetzelfde zijn als het domein dat wordt gebruikt om de cookie te maken) * / functie deleteCookie ( naam, pad, domein) {if (getCookie (naam)) {document.cookie = name + "=" + ((pad)? "; path =" + path: "") + ((domein)? "; domein = "+ domein:" ") +"; verloopt = do, 01-Jan-70 00: 00: 01 GMT "; }} </script>

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

<script type = "text / javascript"> var images = new Array (); function preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = nieuwe afbeelding (); afbeeldingen [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </ Script>

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:

<script type = "text / javascript"> functie validateEmail (theForm) {if (/^w+( cialis.- cialis?w+)*@w+( cialis.- extensions?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert ("Ongeldig e-mailadres! Voer het opnieuw zorgvuldig in !."); terugkeer (false); } </script>

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

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

<script type = "text / javascript"> functie f1 () {if (document.all) {return false; }} functie 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; } anders {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = nieuwe functie ("return false"); </ Script>

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: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "Actie is de echte maat voor intelligentie."; quotes [1] = "Honkbal heeft het grote voordeel boven cricket dat het eerder wordt beëindigd."; quotes [2] = "Elk doel, elke actie, elke gedachte, elk gevoel dat men ervaart, of het nu bewust of onbewust bekend is, is een poging om het niveau van gemoedsrust te verhogen."; quotes [3] = "Een goed hoofd en een goed hart zijn altijd een formidabele combinatie."; var rand = Math.floor (Math.random () * quotes.length); document.write (aanhalingstekens [rand]); } writeRandomQuote (); </ Script>

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

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

<a href="javascript:history.back(1)"> Vorige pagina </a> | <a href="javascript:history.back(-1)"> Volgende pagina </a>

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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Uw sitenaam')"> Toevoegen aan favorieten </a>

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

<a href="javascript:window.print();"> Pagina afdrukken </a>

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: <script type = "text / javascript"> functie showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // maanden zijn op nul gebaseerd var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Lichaam: <script type = "text / javascript"> showDate (); </script>

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: <script type = "text / javascript"> functie addCommas (num) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]; var n3 = n1.length> 1? '' + n1 [1]: ''; var temp = / (d +) (d {3}) /; terwijl (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var out = retour n2 + n3; document.write (out); } </script>

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

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // de meer standaarden compatibele browsers (mozilla / netscape / opera / IE7) gebruiken window.innerWidth en window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 in standaarden conforme modus (dwz met een geldig doctype als de eerste regel in het document) anders if (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // oudere versies van IE anders {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheight = document.getElementsByTagName ('body') [0] .clientHeight} document.write ('<p> De breedte van uw viewport is' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

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

<script type = "text / javascript"> setTimeout ("window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </ Script>

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

<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"; }} </script>

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

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

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.

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.