15 Free JavaScript Sample Snippets für Ihre Websites

Artikel geschrieben von:
  • Featured Articles
  • Aktualisiert: Sep 23, 2019

JavaScript ist Wird heutzutage überall im Internet verwendet - Verbesserung der Website-Interaktivität, Validierung von Informationen und / oder Verbesserung der Website-Perspektiven.

JavaScript erschien zuerst in 1995 und hat seitdem einen langen Weg zurückgelegt, um akzeptiert zu werden und wie es verwendet wird. Die in JavaScript verwendete Syntax wurde stark von C beeinflusst. Aber auch Java, Pearl, Python und Scheme spielten eine Rolle.

Tipps für JavaScrip-Anfänger: Was müssen Sie wissen?

Für den Anfang sind ein paar Grundlagen, die Sie wissen müssen, sind:

  • JavaScript kann im Browser deaktiviert werden
  • JavaScript wird jedes Mal ausgeführt, wenn eine Seite geladen wird
  • Das Laden von JavaScript über eine langsame Internetverbindung nimmt Zeit in Anspruch
  • JavaScript wird weiterhin von zwischengespeicherten Seiten ausgeführt
  • Sie können JavaScript innerhalb einer Webseite oder extern von einer .js-Datei aus hosten
  • JavaScript ist völlig anders als Java

Es ist auch wichtig zu verstehen, dass JavaScript bei falscher Verwendung zu einer Katastrophe führt.

Schlecht konfigurierte und schlampig codierte JavaScripts verlangsamen Ihre Website und beschädigen die gesamte Seitennavigation. Dies wirkt sich wiederum auf die Rücklaufquote Ihrer Besucher (aufgrund einer schlechten Benutzererfahrung) sowie auf die Platzierung in Suchmaschinen (aufgrund langsamer Website-Antwortraten und Bot-Crawls) aus. Versetzen Sie sich in die Lage eines Betrachters, um meinen Fall hier zu überprüfen. Wenn eine Website, die Sie besuchten, langsam geladen, schwer zu navigieren und insgesamt unattraktiv wäre - würden Sie zur Website zurückkehren? Würde ich nicht.

Im Folgenden finden Sie eine kleine Liste von Dingen, an die Sie denken sollten, wenn Sie JavaScript hinzufügen deine Website.

  • Ist JavaScript erforderlich, damit die Website ordnungsgemäß funktioniert?
  • Wie sieht die Seite aus, wenn JavaScript blockiert wurde?
  • Wird das JavaScript die Serverleistung beeinträchtigen?
  • Verschiebt das Hinzufügen von JavaScript Ihre Website in die gewünschte Richtung?

Nein, ich versuche nicht, Sie mit diesen Punkten abzuschrecken.

Hab keine Angst davor Verwenden Sie JavaScript auf Ihren Websites da es tonnenweise Vorteile bietet und, wie bereits erwähnt, von den Mehrheiten genutzt wird. Der wichtigste Punkt, den ich hier zu vermitteln versuche, ist, nicht immer wieder JavaScript-Funktionen zu einer Site hinzuzufügen, wenn sie nicht benötigt werden. Einige Websites benötigen mehr JavaScript als die anderen. Manche brauchen einfach weniger - Nur weil eine Site dies tut, heißt das nicht, dass Sie dasselbe tun sollten.

Freebies: 15 Coole JavaScript-Snippets für Ihre Website

Kommen wir nun zu den Dingen, für die Sie hierher gekommen sind. Unten finden Sie eine Liste von 15-JavaScript-Snippets, die Ihre Website in Bezug auf Funktionalität oder Erscheinungsbild verbessern. Der Code wird in zwei Abschnitte unterteilt, die Datei head and body oder .js. Wenn kein Abschnittstitel angegeben wird, wird dieser für das betreffende Snippet nicht benötigt.

1. Grundlegendes zu HTML5-Video

Schnelle Probe

<script type = "text / javascript"> Funktion understands_video () {return !! document.createElement ('video'). canPlayType; // Boolescher Wert} if (! understands_video ()) {// Muss ein älterer Browser oder IE sein. // Tun Sie vielleicht so etwas wie benutzerdefinierte // HTML5-Steuerelemente ausblenden. Oder was auch immer ... videoControls.style.display = 'none'; } </ script>

Was macht das JavaScript-Snippet?

Dieser kleine Ausschnitt verhindert, dass Ihre Website versucht, ein Video anzuzeigen, das der Browser nicht unterstützt, und spart Ihnen Bandbreite und Rechenleistung.

2. JavaScript-Cookies

Schnelle Probe

<script type = "text / javascript"> / ** * Setzt ein Cookie mit dem angegebenen Namen und Wert. * * Name Name des Cookies * Wert Wert des Cookies * [läuft ab] Ablaufdatum des Cookies (Standard: Ende der aktuellen Sitzung) * [Pfad] Pfad, in dem das Cookie gültig ist (Standard: Pfad des aufrufenden Dokuments) * [ Domäne] Domäne, in der das Cookie gültig ist * (Standard: Domäne des aufrufenden Dokuments) * [sicher] Boolescher Wert, der angibt, ob für die Cookie-Übertragung eine * sichere Übertragung erforderlich ist * / Funktion {document.cookie = name + "=" + escape (value) + ((expires)? "; expires =" + expires.toGMTString (): "") + ((path)? "; path =" + path: "") + ((Domäne)? "; Domäne =" + Domäne: ") + ((sicher)?"; sicher ":"); } </ script> <script type = "text / javascript"> / ** * Ruft den Wert des angegebenen Cookies ab. * * name Name des gewünschten Cookies. * * Gibt eine Zeichenfolge zurück, die den Wert des angegebenen Cookies enthält. * Oder null, wenn das Cookie nicht vorhanden ist. * / function getCookie (name) {var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf (";" + Präfix); if (begin == -1) {begin = dc.indexOf (Präfix); if (begin! = 0) gibt null zurück; } else {begin + = 2; } var end = document.cookie.indexOf (";", begin); if (end == -1) {end = dc.length; } return unescape (dc.substring (begin + prefix.length, end)); } </ script> <script type = "text / javascript"> / ** * Löscht das angegebene Cookie. * * Name Name des Cookies * [Pfad] Pfad des Cookies (muss mit dem zum Erstellen des Cookies verwendeten Pfad identisch sein) * [Domäne] Domäne des Cookies (muss mit der zum Erstellen des Cookies verwendeten Domäne identisch sein) * / Funktion deleteCookie ( name, path, domain) {if (getCookie (name)) {document.cookie = name + "=" + ((path)? "; path =" + path: "") + ((domain)? "; domain = "+ domain:" ") +"; verfällt = Do, 01-Jan-70 00: 00: 01 GMT "; }} </ script>

Was macht das JavaScript-Snippet?

Dieses Snippet ist etwas lang, aber sehr nützlich. Es ermöglicht Ihrer Site, Informationen auf dem Computer des Betrachters zu speichern und sie dann zu einem anderen Zeitpunkt zu lesen. Dieses Snippet kann auf viele verschiedene Arten verwendet werden, um verschiedene Aufgaben zu erfüllen.

3. Laden Sie Ihre Bilder vor

Schnelle Probe

<script type = "text / javascript"> var images = new Array (); Funktion preloadImages () {für (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"); </ script>

Was macht das JavaScript-Snippet?

Dieses Snippet verhindert, dass Ihre Site diese unangenehme Zeit hat, wenn sie nur einen Teil der Site anzeigt. das sieht nicht nur schlecht aus, sondern ist auch unprofessionell. Alles, was Sie tun müssen, ist, Ihre Bilder zum Abschnitt preloadImages hinzuzufügen, und Sie können loslegen.

4. E-Mail-Validierung

Schnelle Probe

Kopf:

<script type = "text / javascript"> Funktion validateEmail (theForm) {if (/^w+([.-[?w+)*@w+([.-[?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert ("Ungültige E-Mail-Adresse! Bitte nochmals sorgfältig eingeben!"); falsch zurückgeben); } </ script>

Körper: <form onSubmit = "return validateEmail (this);" action = ""> E-Mail-Adresse: <input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </ form>

Was macht das JavaScript-Snippet?

Dieses Snippet überprüft, ob eine richtig formatierte E-Mail-Adresse in einem Formular eingegeben wurde. Es kann nicht garantiert werden, dass die E-Mail-Adresse echt ist. Dies kann mit JavaScript nicht überprüft werden.

5. Kein Rechtsklick

Schnelle Probe

<script type = "text / javascript"> Funktion f1 () {if (document.all) {return false; }} Funktion 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 = neue Funktion ("return false"); </ script>

Was macht das JavaScript-Snippet?

Dieses Snippet verhindert, dass der Betrachter mit der rechten Maustaste auf Ihre Seite klicken kann. Dies kann den durchschnittlichen Benutzer davon abhalten, Bilder oder Code von Ihrer Site auszuleihen.

6. Zufällige Anführungszeichen anzeigen

Schnelle Probe

Kopf: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "Aktion ist das wahre Maß für Intelligenz."; quotes [1] = "Baseball hat gegenüber Cricket den großen Vorteil, dass es früher beendet wird."; quotes [2] = "Jedes Ziel, jede Handlung, jeder Gedanke, jedes Gefühl, ob bewusst oder unbewusst bekannt, ist ein Versuch, den eigenen Seelenfrieden zu stärken."; quotes [3] = "Ein guter Kopf und ein gutes Herz sind immer eine beeindruckende Kombination."; var rand = Math.floor (Math.random () * quotes.length); document.write (Anführungszeichen [rand]); } writeRandomQuote (); </ script>

Körper: <script type = "text / javascript"> writeRandomQuote (); </ script>

Was macht das JavaScript-Snippet?

Ok, das ist kein Ausschnitt, den alle Websites verwenden würden, aber es kann verwendet werden, um mehr als nur zufällige Anführungszeichen anzuzeigen. Sie können den Inhalt der Angebote nach Belieben ändern und Bilder oder Text an beliebiger Stelle auf Ihrer Website anzeigen lassen.

7. Vorherige / Nächste Links

Schnelle Probe

<a href="javascript:history.back(1)"> Vorherige Seite </a> | <a href="javascript:history.back(-1)"> Nächste Seite </a>

Was macht das JavaScript-Snippet?

Dieses Snippet ist großartig, wenn Sie mehrere Seiten in einem Artikel oder Tutorial haben. Es wird dem Benutzer das einfache Durchsuchen zwischen den Seiten ermöglichen. Es ist auch klein und leicht aus Sicht der Ressource.

8. Eine Seite mit einem Lesezeichen versehen

Schnelle Probe

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Ihr Site-Name')"> Zu Favoriten hinzufügen </a>

Was macht das JavaScript-Snippet?

Mit diesem Snippet kann der Benutzer Ihre Seite ganz einfach mit einem Lesezeichen versehen. Alles was sie tun müssen, ist auf den Link zu klicken. Diese kleinen Funktionen können das Gesamterlebnis Ihres Betrachters verbessern.

9. Easy Print Page Link

Schnelle Probe

<a href="javascript:window.print();"> Seite drucken </a>

Was macht das JavaScript-Snippet?

Über diesen kleinen Link können Ihre Ansichten Ihre Seite problemlos drucken. Es verwendet die Schnelldruckfunktion, die bereits von Ihrem Browser eingerichtet wurde, und verwendet keine Ressourcen, bis darauf geklickt wird.

10. Formatiertes Datum anzeigen

Schnelle Probe

Kopf: <script type = "text / javascript"> Funktion showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // Monate sind nullbasiert var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </ script>

Körper: <script type = "text / javascript"> showDate (); </ script>

Was macht das JavaScript-Snippet?

Mit diesem Snippet können Sie das aktuelle Datum an einer beliebigen Stelle auf Ihrer Webseite anzeigen und müssen nicht aktualisiert werden. Einfach einbauen und vergessen.

11. Komma-Trennzeichen

Schnelle Probe

Kopf: <script type = "text / javascript"> Funktion 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); } </ script>

Körper: <script type = "text / javascript"> addCommas ("4550989023"); </ script>

Was macht das JavaScript-Snippet?

Dieses Snippet wird hauptsächlich von Sites verwendet, die häufig Zahlen verwenden. Mit diesem Snippet sehen Ihre Zahlen auf der ganzen Linie gleich aus. Sie müssen lediglich die Textzeile kopieren, in der Sie eine Nummer hinzufügen möchten, und die Nummer dort durch Ihre Nummer ersetzen.

12. Holen Sie sich den Anzeigebereich eines Browsers

Schnelle Probe

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // Die standardkonformeren Browser (Mozilla / Netscape / Opera / IE7) verwenden window.innerWidth und window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 im standardkonformen Modus (dh mit einem gültigen Doctype als erste Zeile im Dokument) else if (Typ des Dokuments.documentElement! = 'Undefined' && Typ des Dokuments.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // ältere Versionen von IE else {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheight = document.getElementsB ('body') [0] .clientHeight} document.write ('<p> Ihre Ansichtsfensterbreite ist' + Ansichtsfensterbreite + 'x' + Ansichtsfensterhöhe + '</ p>'); // -> </ script>

Was macht das JavaScript-Snippet?

Mit diesem Snippet können Sie die Breite und Höhe des Anzeigebereichs in Ihrem Ansichtsbrowser abrufen. Auf diese Weise kann der Designer je nach Größe des Browserfensters des Benutzers verschiedene Anzeigen erstellen und verwenden.

13. Umleiten mit optionaler Verzögerung

Schnelle Probe

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

Was macht das JavaScript-Snippet?

Mit diesem Snippet können Sie Ihre Betrachter auf eine andere Seite umleiten und eine Verzögerung einstellen. Die Verwendung dieses Snippets ist ziemlich selbsterklärend und ein sehr wertvolles Werkzeug, das Sie in Ihrem Gürtel haben sollten.

14. Erkennen Sie iPhones

Probe

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

Was macht das JavaScript-Snippet?

Mit diesem Snippet können Sie feststellen, ob sich Ihr Viewer auf einem iPhone oder iPod befindet, sodass Sie anderen Inhalt anzeigen können. Dieser Ausschnitt ist von unschätzbarem Wert für die Größe des mobilen Marktes und wird nur weiter wachsen.

15. Nachricht in Statusleiste drucken

Schnelle Probe

<script language = "javascript" type = "text / javascript"> <! - window.status = "<Geben Sie Ihre Nachricht ein>"; // -> </ script>

Was macht das JavaScript-Snippet?

Mit diesem kleinen Snippet können Sie eine Nachricht in der Statusleiste ausdrucken. Sie können aktuelle oder wichtige Nachrichten in einem Bereich anzeigen, der die Aufmerksamkeit des Benutzers auf sich zieht.

Über WHSR Guest

Dieser Artikel wurde von einem Gastbeitragsteller verfasst. Die nachstehenden Ansichten des Autors sind völlig seine eigenen und spiegeln möglicherweise nicht die Ansichten von WHSR wider.