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

JavaScriptは、最近、オンラインのあらゆる場所で使用されています。Webサイトの対話性を向上させ、情報を検証し、Webサイトの見通しを改善しています。.


JavaScriptが最初に登場したのは1995年で、それ以来、JavaScriptは受け入れられ、その使用方法に関して長い道のりを歩んできました。 JavaScriptで使用される構文は、Cの影響を強く受けました。 Java、Pearl、Python、Schemeもその役割を果たしました.

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

まず、知っておくべき基本事項をいくつか紹介します。

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

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

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

以下は、JavaScriptをWebサイトに追加するときに考慮すべき事項の小さなリストです.

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

いいえ、私はこれらのポイントであなたを怖がらせようとはしていません.

実際、JavaScriptは多くの利点を提供し、多くの人が使用しているため、WebサイトでJavaScriptを使用することをためらわないでください。私がここで理解しようとしている重要なポイントは、JavaScript機能が不要になったときにサイトに追加し続けることだけではありません。一部のサイトでは、他のサイトよりも多くのJavaScriptが必要になります。必要なものは少ない–あるサイトがやっているからといって、同じことをするべきだという意味ではない.

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

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

1. HTML5ビデオについて

クイックサンプル

function理解する_ビデオ(){
return !! document.createElement( ‘video’)。canPlayType; //ブール値
}

if(!understands_video()){
//古いブラウザまたはIEである必要があります.
//多分カスタムを隠すようなことをする
// HTML5コントロール。または何でも…
videoControls.style.display = ‘none’;
}

JavaScriptスニペットの機能?

この小さなスニペットは、ブラウザーがサポートできないビデオをWebサイトが表示しないようにし、帯域幅と処理能力を節約します.

2. JavaScriptクッキー

クイックサンプル

/ **

*指定された名前と値でCookieを設定します.

*

*名前Cookieの名前

*値Cookieの値

* [expires] Cookieの有効期限(デフォルト:現在のセッションの終了)

* [パス] Cookieが有効なパス(デフォルト:呼び出し元ドキュメントのパス)

* [ドメイン] Cookieが有効なドメイン

*(デフォルト:呼び出しドキュメントのドメイン)

* [セキュア] Cookieの送信に必要なものかどうかを示すブール値

*安全な送信

* /

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

document.cookie = name + "=" + エスケープ(値) +

((期限切れ) ? ";期限切れ=" + expires.toGMTString(): "") +

((道) ? ";パス=" + 道 : "") +

((ドメイン) ? ";ドメイン=" + ドメイン: "") +

((安全) ? ";安全な" : "");

}

/ **

*指定したCookieの値を取得します.

*

* name目的のcookieの名前.

*

*指定したCookieの値を含む文字列を返します,

*またはCookieが存在しない場合はnull.

* /

function getCookie(name){

var dc = document.cookie;

var prefix = name + "=";

var begin = dc.indexOf("; " + プレフィックス);

if(begin == -1){

begin = dc.indexOf(prefix);

if(begin!= 0)はnullを返します。

} そうしないと {

開始+ = 2;

}

var end = document.cookie.indexOf(";", ベギン);

if(end == -1){

end = dc.length;

}

unescape(dc.substring(begin + prefix.length、end));を返します。

}

/ **

*指定したCookieを削除します.

*

* name cookieの名前

* [パス] Cookieのパス(Cookieの作成に使用したパスと同じである必要があります)

* [ドメイン] Cookieのドメイン(Cookieの作成に使用したドメインと同じである必要があります)

* /

function deleteCookie(name、path、domain){

if(getCookie(name)){

document.cookie = name + "=" +

((道) ? ";パス=" + 道 : "") +

((ドメイン) ? ";ドメイン=" + ドメイン: "") +

"; expires =木、01-Jan-70 00:00:01 GMT";

}

}

JavaScriptスニペットの機能?

このスニペットは少し長くなりますが非常に便利です。これにより、サイトで閲覧者のコンピュータに情報を保存し、別の時点で読み取ることができます。このスニペットは、さまざまなタスクを実行するためにさまざまな方法で使用できます.

3.画像をプリロードします

クイックサンプル

var images = new Array();

function preloadImages(){

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

JavaScriptスニペットの機能?

このスニペットは、サイトの一部のみを表示しているときに、サイトがその厄介な時間を過ごすのを防ぎます。これは見た目が悪いだけでなく、専門家ではありません。あなたがしなければならないすべてはあなたの画像をpreloadImagesセクションに追加することです、そしてあなたは回転する準備ができています.

4.電子メールの検証

クイックサンプル

頭:

function validateEmail(theForm){
if(/ ^ w +([.-]?w +)* @ w +([.-]?w +)*(。w {2,3})+ $ /。test(theForm.email-id.value)){
return(true);
}
アラート("無効なメールアドレス!もう一度注意して入力してください!.");
return(false);
}

電子メールアドレス:

JavaScriptスニペットの機能?

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

5.右クリックしない

クイックサンプル

関数f1(){
if(document.all){falseを返す; }
}
関数f2(e){
if(document.layers ||(document.getElementById &! document.all)){
if(e.which == 2 || e.which == 3){falseを返す; }
}
}
if(document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = f1;
}
そうしないと {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu =新しい関数("falseを返す");

JavaScriptスニペットの機能?

このスニペットは、閲覧者がページを右クリックできないようにします。これにより、平均的なユーザーがサイトから画像やコードを借用するのを阻止できます。.

6.ランダムな引用を表示する

クイックサンプル

writeRandomQuote = function(){
var quotes = new Array();
quotes [0] = "アクションはインテリジェンスの本当の尺度です.";
quotes [1] = "野球はクリケットよりも早く終了するという大きな利点があります.";
quotes [2] = "すべての目標、すべての行動、すべての思考、すべての人が経験するすべての感情は、それが意識的であろうと無意識であろうと、心の平和のレベルを高めるための試みです.";
quotes [3] = "良い頭と良い心は常に手ごわい組み合わせです.";
var rand = Math.floor(Math.random()* quotes.length);
document.write(quotes [rand]);
}
writeRandomQuote();

writeRandomQuote();

JavaScriptスニペットの機能?

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

7.前/次のリンク

クイックサンプル

前のページ|次のページ

JavaScriptスニペットの機能?

このスニペットは、記事またはチュートリアルに複数のページがある場合に最適です。これにより、ユーザーは簡単にページ間を閲覧できます。また、リソースの観点からも小型軽量です。.

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

クイックサンプル

お気に入りに追加

JavaScriptスニペットの機能?

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

9. Easy Print Pageリンク

クイックサンプル

ページを印刷

JavaScriptスニペットの機能?

この小さなリンクにより、ビューでページを簡単に印刷できます。ブラウザですでに設定されているクイック印刷機能を利用し、クリックされるまでリソースを利用しません.

10.フォーマットされた日付を表示

クイックサンプル

function showDate(){
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth()+ 1; //月はゼロベースです
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.ブラウザの表示領域を取得する

クイックサンプル

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me
    0
    Like this post? Please share to your friends:
    Adblock
    detector
    map