15クールなJavaScriptサンプルスニペット

書かれた記事:
  • 特集記事
  • 最終更新日:Mar 06、2012

JavaScriptの概要

最近では、Webサイトの双方向性の向上、情報の検証、および/またはWebサイトの見通しの改善のために、JavaScriptがオンラインのいたるところで使用されています。 JavaScriptは1995で最初に登場し、それ以来、受け入れられ、その使用方法の点で大きな進歩を遂げました。 JavaScriptで使用されている構文はCの影響を強く受けています。 しかし、Java、Pearl、Python、Schemeもその役割を果たしました。

JavaScriptとは何ですか?

古いYouTubeクリップが問題にうまく答えています。 ここに行く。

初心者のヒント:あなたが知る必要があるもの

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

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

JavaScriptが間違った方法で使用されると、実際には災害につながることを理解することも重要です。 不適切に設定されたずさんなコードのJavaScriptは、あなたのウェブサイトを遅くし、全体的なサイトナビゲーションを損なうでしょう。 これは今度は(悪いユーザーエクスペリエンスによる)訪問者の返品率と(遅いWebサイトのレスポンス率による)検索エンジンのランキングに影響します。 ここで私の訴訟を検証するのを助けるために、視聴者の立場に身を置く。 あなたが訪れていたウェブサイトがゆっくりとロードされ、ナビゲートするのが難しく、そして全体的に見て魅力的でないなら - あなたはそのサイトに戻るでしょうか? しません。

下記はJavaScriptをあなたのウェブサイトに追加する際に考慮すべきことの小さなリストです。

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

いいえ、私はこれらの点であなたを怖がらせようとしていません。 実際のところ、あなたのウェブサイトでJavaScriptを使用することを恐れないでください。 ここで解決しようとしている重要な点は、不要なときにJavaScript機能をサイトに追加し続けることではありません。 一部のサイトでは、他のサイトよりも多くのJavaScriptが必要になります。 一部のサイトではそれほど必要ではありません - あるサイトで実行されているからといって、同じことを実行する必要があるわけではありません。

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

JavaScriptスニペット

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

HTML5ビデオについて

クイックサンプル

<script type="text/javascript">

関数understands_video(){
document.createElement( 'video')。canPlayType;を返します。 //ブール値
}

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

</スクリプト>

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

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

JavaScriptクッキー

クイックサンプル

<script type="text/javascript">

/ **

*与えられた名前と値でCookieを設定します。

*

* nameクッキーの名前

* valueクッキーの値

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

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

* [domain]クッキーが有効なドメイン

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

* [secure]クッキーの送信にaが必要かどうかを示すブール値

*安全な伝送

*/

関数setCookie(名前、値、期限切れ、パス、ドメイン、安全){

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

(expires)? "; expires =" + expires.toGMTString(): "")+

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

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

(()セキュア」、安全な」? "");

}

</スクリプト>

<script type="text/javascript">

/ **

*指定されたCookieの値を取得します。

*

* name目的のCookieの名前。

*

*指定されたクッキーの値を含む文字列を返します。

クッキーが存在しない場合はnull。

*/

関数getCookie(name){

var dc = document.cookie;

var prefix = name + "=";

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

if(begin == -1){

begin = dc.indexOf(接頭辞);

if(begin!= 0)がnullを返す。

場合} else {

begin + = 2;

}

var end = document.cookie.indexOf( ";"、begin);

if(end == -1){

end = dc.length;

}

戻り値unescape(dc.substring(begin + prefix.length、end));

}

</スクリプト>

<script type="text/javascript">

/ **

*指定されたCookieを削除します。

*

*名前クッキーの名前

* [パス]クッキーのパス(クッキーの作成に使用されたパスと同じでなければなりません)

* [ドメイン]クッキーのドメイン(クッキーの作成に使用されたドメインと同じである必要があります)

*/

関数deleteCookie(名前、パス、ドメイン){

if(getCookie(name)){

document.cookie = name + "=" +

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

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

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

}

}

</スクリプト>

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

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

画像をプリロードする

クイックサンプル

<script type="text/javascript">

var images = new Array();

関数preloadImages(){

for(i = 0; i <preloadImages.arguments.length; i ++){

画像[i] =新しい画像();

images [i] .src = preloadImages.arguments [i];

}

}

preloadImages( "logo.jpg"、 "main_bg.jpg"、 "body_bg.jpg"、 "header_bg.jpg")。

</スクリプト>

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

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

Eメール検証

クイックサンプル

頭:

<script type="text/javascript">
function validateEmail(theForm){
if(/ ^ w +([.-]?w +)* @ w +([.-]?w +)*(。w {2,3})+ $ /。test(theForm.email-id.value)){
リターン(真の);
}
alert( "無効な電子メールアドレスです。もう一度注意して入力してください。");
リターン(FALSE);
}
</スクリプト>

ボディ:

<form onSubmit = "return validateEmail(this);" action = "">
電子メールアドレス:
<input type = "テキスト" name = "emailid" />
<input type = "送信" value = "送信" />
<input type = "reset" value = "リセット" />
</ FORM>

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

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

右クリックなし

クイックサンプル

<script type="text/javascript">
関数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 = new function( "return false");
</スクリプト>

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

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

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

クイックサンプル

:

<script type="text/javascript">
writeRandomQuote = function(){
var quotes = new Array();
"; quotes [0] ="行動は知性の本当の尺度です。 ";
"; quotes [1] ="野球はクリケットよりも早く終了するという大きな利点があります。 ";
"[2] ="意識的にも無意識的に知られていようと、あらゆる目標、あらゆる行動、あらゆる思考、あらゆる経験の感覚は、自分の安心のレベルを上げるための試みです。 ";
"; quotes [3] ="頭の良さと心の良さは常に手ごわい組み合わせです。 ";
var rand = Math.floor(Math.random()* quotes.length);
document.write(引用符[rand]);
}
writeRandomQuote();
</スクリプト>

ボディ:

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

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

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

前へ/次へ

クイックサンプル

<a href="javascript:history.back(1)">前のページ</a> | <a href="javascript:history.back(-1)">次のページ</a>

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

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

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

クイックサンプル

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'あなたのサイト名')">お気に入りに追加</a>

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

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

簡単な印刷ページリンク

クイックサンプル

<a href="javascript:window.print();">ページを印刷</a>

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

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

書式設定された日付を表示する

クイックサンプル

:

<script type="text/javascript">
関数showDate(){
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth()+ 1; //月は0から始まります
var curr_year = d.getFullYear();
document.write(curr_date + " - " + curr_month + " - " + curr_year);
}
</スクリプト>

ボディ:

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

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

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

コンマセパレータ

クイックサンプル

:

<script type="text/javascript">
関数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 type = "text / javascript"> addCommas( "4550989023"); </script>

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

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

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

クイックサンプル

<script type="text/javascript">

<! -

var viewportwidth;

var viewportheight;

//標準に準拠したブラウザ(mozilla / netscape / opera / IE7)ではwindow.innerWidthとwindow.innerHeightを使用します

if(typeof window.innerWidth!= 'undefined')

{

viewportwidth = window.innerWidth、

viewportheight = window.innerHeight

}

//標準準拠モードでのIE6(つまり、ドキュメントの最初の行に有効なdoctypeがある)

そうでない場合(typeof document.documentElement!= 'undefined'

&& type.documentElement.clientWidth!=

'undefined' && document.documentElement.clientWidth!= 0)

{

viewportwidth = document.documentElement.clientWidth、

viewportheight = document.documentElement.clientHeight

}

// IEの古いバージョン

ほかに

{

viewportwidth = document.getElementsByTagName( 'body')[0] .clientWidth、

viewportheight = document.getElementsByTagName( 'body')[0] .clientHeight

}

document.write( '<p>ビューポートの幅は' + viewportwidth + 'x' + viewportheight + '</ p>');

// - >

</スクリプト>

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

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

オプションの遅延でリダイレクト

クイックサンプル

<script type="text/javascript">

setTimeout( "window.location.href =

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

</スクリプト>

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

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

iPhoneを検出する

サンプル

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

}

}

</スクリプト>

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

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

ステータスバーにメッセージを印刷する

クイックサンプル

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<あなたのメッセージを入力>";
/ / - >
</スクリプト>

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

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

WHSR Guestについて

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

接続します。