15 Free JavaScript Sample Snippets für Ihre Websites

Aktualisiert: 29 / Artikel von: WHSR Gast

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

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 Site-Navigation. Dies wirkt sich wiederum auf die Rücklaufquote Ihrer Besucher (aufgrund schlechter Benutzererfahrung) sowie auf die Platzierungen in Suchmaschinen (aufgrund langsamer Website-Antwortraten und Bot-Crawls) aus. Versetzen Sie sich in die Lage eines Betrachters, um meinen Fall hier zu bestätigen. Wenn eine Website, die Sie besucht haben, langsam geladen, schwer zu navigieren und insgesamt unattraktiv wäre - würden Sie zur Website zurückkehren? Ich würde 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 Tonnen Vorteile bietet und, wie erwähnt, von den Mehrheiten genutzt wird. Der entscheidende Punkt, den ich hier vermitteln möchte, ist, dass Sie einer Site nicht immer wieder JavaScript-Funktionen hinzufügen, wenn diese nicht erforderlich sind. Einige Websites benötigen mehr JavaScript als die anderen. Einige brauchen nur 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. Nachfolgend finden Sie eine Liste von 15 JavaScript-Snippets, die Ihre Website entweder in ihrer Funktionalität oder in ihrem Erscheinungsbild verbessern. Der Code wird in zwei Abschnitte unterteilt: Kopf und Körper oder .js-Datei. Wenn kein Abschnittstitel angegeben ist, wird er für dieses bestimmte Snippet nicht benötigt.

1. Grundlegendes zu HTML5-Video

Schnelle Probe

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';
}

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

/**

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

    }

}

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

var images = new Array();

function preloadImages(){

    for (i=0; i 

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:


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


Körper:: E-Mail-Addresse:

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

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

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

Deckel::
  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();


Körper:: writeRandomQuote();

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

Vorherige Seite | Nächste Seite

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

Zu den Favoriten hinzufügen

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

Seite drucken

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

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


Körper:: showDate();

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

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


Körper:: addCommas("4550989023");

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

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

//-->

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

setTimeout( "window.location.href =

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

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

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

    }

}

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

 
"; 
// --> 

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.

Weiterlesen:

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