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

書かれた記事:
  • 特集記事
  • 更新:9月23、2019

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

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が必要です。 必要なものが少ない–あるサイトがそれを行っているからといって、同じことをする必要があるわけではありません。

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

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

1。 HTML5ビデオについて

クイックサンプル

<script type = "text / javascript"> function Understandings_video(){return !! document.createElement( 'video')。canPlayType; //ブール値} if(!understands_video()){//古いブラウザまたはIEでなければなりません //たぶんカスタムのHTML5コントロールを隠すようなことをします。 または何でも... videoControls.style.display = 'none'; } </ script>

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

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

2。 JavaScript Cookie

クイックサンプル

<script type = "text / javascript"> / ** *指定された名前と値でCookieを設定します。 * * name Cookieの名前* value Cookieの値* [expires] Cookieの有効期限(デフォルト:現在のセッションの終了)* [パス] Cookieが有効なパス(デフォルト:呼び出し元ドキュメントのパス)* [ドメイン] Cookieが有効なドメイン*(デフォルト:呼び出し側ドキュメントのドメイン)* [セキュア] Cookieの送信に*セキュアな送信が必要かどうかを示すブール値* / 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": ""); } </ script> <script type = "text / javascript"> / ** *指定された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を返す; } 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"> / ** *指定されたCookieを削除します。 * * Cookieの名前* [パス] Cookieのパス(Cookieの作成に使用されるパスと同じである必要があります)* [ドメイン] Cookieのドメイン(Cookieの作成に使用されるドメインと同じである必要があります)* / function deleteCookie(名前、パス、ドメイン){if(getCookie(name)){document.cookie = name + "=" +((path)? "; path =" + path: "")+((domain)? "; domain = "+ドメイン:" ")+"; expires = Thu、01-Jan-70 00:00:01 GMT "; }} </ script>

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

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

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

クイックサンプル

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

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

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

4。 電子メールの検証

クイックサンプル

頭:

<script type = "text / javascript"> function validateEmail(theForm){if(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)){return(true); } alert( "無効な電子メールアドレスです。再度慎重に入力してください!。"); return(false); } </ script>

ボディ:<form onSubmit = "return validateEmail(this);" action = "">電子メールアドレス:<input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </ form>

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

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

5。 右クリックなし

クイックサンプル

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

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

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

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

クイックサンプル

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

ボディ:<script type = "text / javascript"> writeRandomQuote(); </ script>

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

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

7。 前/次のリンク

クイックサンプル

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

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

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

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

クイックサンプル

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Your Site Name')">お気に入りに追加</a>

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

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

9。 Easy Print Page Link

クイックサンプル

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

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

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

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

クイックサンプル

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

ボディ:<script type = "text / javascript"> showDate(); </ script>

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

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

11。 コンマ区切り

クイックサンプル

:<script type = "text / javascript"> 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 = n2 + n3を返します。 document.write(out); } </ script>

ボディ:<script type = "text / javascript"> addCommas( "4550989023"); </ script>

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

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

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

クイックサンプル

<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を使用)else if(typeof document.documentElement!= 'undefined' && typeof document.documentElement.clientWidth!= 'undefined' && document.documentElement.clientWidth != 0){viewportwidth = document.documentElement.clientWidth、viewportheight = document.documentElement.clientHeight} // IEの古いバージョンelse {viewportwidth = document.getElementsByTagName( 'body')[0] .clientWidth、viewportheight = document.getElementsByTagName ( 'body')[0] .clientHeight} document.write( '<p>ビューポートの幅は' + viewportwidth + 'x' + viewportheight + '</ p>'); //-> </ script>

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

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

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

クイックサンプル

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

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

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

14。 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"; }} </ script>

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

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

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

クイックサンプル

<script language = "javascript" type = "text / javascript"> <!-window.status = "<TYPE YOUR MESSAGE>"; //-> </ script>

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

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

WHSR Guestについて

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

接続します。