Webサイト用の15無料JavaScriptサンプルスニペット

更新日:23年2019月XNUMX日/記事:WHSRGuest

JavaScriptは 最近どこでもオンラインで使用されています – Webサイトの双方向性を改善するため、情報を検証するため、および/またはWebサイトの見通しを改善するため。

JavaScriptは1995で最初に登場し、それ以来、受け入れられ、どのように使用されるかという点で大きな進歩を遂げました。 JavaScriptで使用される構文は、Cの影響を強く受けました。 しかし、Java、Pearl、Python、およびSchemeもその役割を果たしました。

JavaScrip初心者向けのヒント:知っておくべきことは?

初心者のために、あなたが知る必要があるいくつかの基礎は次のとおりです:

  • JavaScriptをブラウザでオフにすることができます
  • ページが読み込まれるたびにJavaScriptが実行されます
  • 遅いインターネット接続ではJavaScriptがロードに時間がかかる
  • JavaScriptはまだキャッシュされたページから実行されています
  • Webページ内または.jsファイルの外部でJavaScriptをホストできます。
  • JavaScriptはJavaとはまったく異なります

また、JavaScriptを誤った方法で使用すると、実際にJavaScriptが災害につながることを理解することも重要です。

設定が不十分でコードがずさんなJavaScriptを使用すると、Webサイトの速度が低下し、サイトナビゲーション全体が損傷します。 これは、訪問者のリピーター率(ユーザーエクスペリエンスの悪さによる)と検索エンジンのランキング(Webサイトの応答率の低下とボットのクロールによる)に影響します。 ここで私のケースを検証するために、視聴者の立場になってください。 訪問しているWebサイトの読み込みが遅く、ナビゲートが難しく、全体的に魅力がない場合、サイトに戻りますか? 私はしません。

以下は、JavaScriptを追加する際に考慮すべき事項の小さなリストです。 あなたのウェブサイト.

  • サイトが正しく機能するためにはJavaScriptが必要ですか?
  • JavaScriptがブロックされた場合、サイトはどのようになりますか?
  • JavaScriptはサーバーのパフォーマンスに悪影響を及ぼしますか?
  • JavaScriptを追加すると、サイトを目的の方向に移動できますか。

いいえ、これらの点であなたを追い払おうとはしていません。

実際、恐れることはありません WebサイトでJavaScriptを使用する それはたくさんの利益を提供し、前述のように、それは大多数によって使用されているので。 私がここで理解しようとしている重要なポイントは、JavaScript機能が不要なときにサイトに追加し続けることではありません。 一部のサイトでは、他のサイトよりも多くのJavaScriptが必要になります。 必要なものが少ないものもあります– XNUMXつのサイトが実行しているからといって、同じことを実行する必要があるとは限りません。

景品:あなたのウェブサイトのための15クールなJavaScriptスニペット

それでは、ここに来たものに取り掛かりましょう。以下は、機能または外観のいずれかでサイトを強化する15のJavaScriptスニペットのリストです。 コードは、headとbodyまたは.jsファイルのXNUMXつのセクションに分割されます。 セクションタイトルが指定されていない場合、その特定のスニペットには必要ありません。

1。 HTML5ビデオについて

クイックサンプル

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

JavaScriptスニペットは何をしていますか?

この小さな断片は、あなたのウェブサイトがブラウザがサポートできないビデオを表示しようとするのを防ぎ、あなたの帯域幅と処理能力を節約します。

2。 JavaScript Cookie

クイックサンプル

/**

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

    }

}

JavaScriptスニペットは何をしていますか?

このスニペットは少し長いですが非常に便利です、それはあなたのサイトが情報を閲覧者のコンピュータに保存してから別の時点でそれを読むことを可能にするでしょう。 このスニペットは、さまざまなタスクを実行するためにさまざまな方法で使用できます。

3。 画像をプリロードする

クイックサンプル

var images = new Array();

function preloadImages(){

    for (i=0; i 

JavaScriptスニペットは何をしていますか?

このスニペットは、サイトの一部しか表示されていないときに、そのサイトがその厄介な時間を過ごすのを防ぎます。 これは見栄えが悪いだけでなく、専門外でもあります。 あなたがしなければならないのはpreloadImagesセクションにあなたのイメージを追加することだけです、そしてあなたはロールする準備ができています。

4。 電子メールの検証

クイックサンプル

頭:


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


ボディ: 電子メールアドレス:

JavaScriptスニペットは何をしていますか?

このスニペットは、適切な形式の電子メールアドレスがフォームに入力されていることを検証します。電子メールアドレスが本物であることを保証することはできません。JavaScriptでそれを確認する方法はありません。

5。 右クリックなし

クイックサンプル

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

JavaScriptスニペットは何をしていますか?

この断片は、閲覧者があなたのページを右クリックすることを妨げるでしょう。 これは平均的なユーザーがあなたのサイトから画像やコードを借りるのを妨げる可能性があります。

6。 ランダムな引用を表示

クイックサンプル

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


ボディ: writeRandomQuote();

JavaScriptスニペットは何をしていますか?

わかりましたので、これはすべてのサイトが使用するスニペットではありませんが、単なるランダムな引用符以上のものを表示するために使用できます。 あなたはあなたが望むものに引用符の中身を変更してあなたのサイトのどこかにランダムな画像やテキストを表示させることができます。

7。 前/次のリンク

クイックサンプル

前のページ| 次のページ

JavaScriptスニペットは何をしていますか?

このスニペットは、記事やチュートリアルに複数のページがある場合に最適です。 それはユーザーが簡単にページ間を閲覧することを可能にするでしょう。 リソースの観点からも小さくて軽量です。

8。 ページをブックマークする

クイックサンプル

お気に入りに追加

JavaScriptスニペットは何をしていますか?

このスニペットにより、ユーザーは簡単にあなたのページをブックマークすることができます。 リンクをクリックするだけです。 このような小さな機能は、視聴者の全体的な経験を増やすことができます。

9。 Easy Print Page Link

クイックサンプル

ページを印刷する

JavaScriptスニペットは何をしていますか?

この小さなリンクはあなたの意見があなたのページを簡単に印刷することを可能にするでしょう。 ブラウザによって既に設定されているクイック印刷機能を利用し、クリックされるまでリソースを利用しません。

10。 書式設定された日付を表示

クイックサンプル

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


ボディ: showDate();

JavaScriptスニペットは何をしていますか?

このスニペットを使用すると、Webページ上のどこにでも現在の日付を表示できます。更新する必要はありません。 単純に配置して、それを忘れてください。

11。 コンマ区切り

クイックサンプル

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


ボディ: addCommas("4550989023");

JavaScriptスニペットは何をしていますか?

このスニペットは、主に数字を頻繁に使用するサイトで使用されます。 このスニペットはあなたの番号が全面的に同じように見えるようにします。 あなたがしなければならないのはあなたが番号を追加したいあなたの番号でそこに番号を取り替えたいと思うボディラインをコピーすることだけです。

12。 ブラウザの表示領域を取得する

クイックサンプル

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

//-->

JavaScriptスニペットは何をしていますか?

このスニペットを使用すると、ビューブラウザの表示領域の幅と高さを取得できます。 これにより、設計者はユーザーのブラウザウィンドウのサイズに基づいてさまざまな表示を作成して使用することができます。

13。 オプションの遅延を使用したリダイレクト

クイックサンプル

setTimeout( "window.location.href =

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

JavaScriptスニペットは何をしていますか?

このスニペットを使用すると、視聴者を別のページにリダイレクトできます。また、遅延を設定することもできます。 このスニペットの使い方は一目瞭然で、ベルトに入れるのは非常に貴重なツールです。

14。 iPhoneを検出する

サンプル

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

    }

}

JavaScriptスニペットは何をしていますか?

このスニペットを使用すると、あなたの視聴者がiPhoneまたはiPodにあるかどうかを検出し、さまざまなコンテンツを表示することができます。 このスニペットは、モバイル市場の規模が非常に重要であり、今後も成長し続けるつもりです。

15。 メッセージをステータスバーに出力する

クイックサンプル

 
"; 
// --> 

JavaScriptスニペットは何をしていますか?

この小さな断片はあなたがステータスバーにメッセージを印刷することを可能にします。 あなたはユーザーの目を引くような分野で最近の、あるいは重要なニュースを表示することができます。

WHSR Guestについて

この記事はゲストの貢献者によって書かれました。 以下の著者の意見は完全に自分のものであり、WHSRの見解を反映していない可能性があります。

接続します。