google-code-prettify を利用して、Webページでソースコードをカラーリング表示する手順を紹介します。google-code-prettify の入手google-code-prettify はgitHub(https:/
HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。概要こちらの記事では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事
JavaScriptを利用してファイルをアップロードするコードを紹介します。概要JavaScriptでファイルをアップロードする方法には何種類かありますが、この記事ではHTMLHttpRequestを利用してファイルのアップロードをするコー
JavaScriptで確認ダイアログを表示するコードを紹介します。概要JavaScriptで確認ダイアログを表示させるには、windowオブジェクトの confirm()メソッドを利用します。confirm()メソッドでは確認のためのダイア
jQueryを利用して、ボタンやリンクがクリックされたタイミングで処理をするコードを紹介します。ボタンがクリックされた場合の実装ボタンがクリックされた場合の実装はこちらの記事を参照してください。リンクがクリックされた場合の実装リンクがクリッ
jQueryでの $(function(){ ... } の意味について紹介します。意味$(function(){ ... } はページが読み込み完了し、DOMの構築が完了した時点でfunction()内が実行されます。コードの読み替え$
jQueryのメソッドを拡張するコードを紹介します。概要jQueryのextendメソッド, fn.extendメソッドを利用すると、jQueryのメソッドを拡張できます。書式$.extend({ (メソッド名) :
jQueryを利用して、オブジェクトをマージするコードを紹介します。概要2つのオブジェクトをjQueryでマージするには、extend メソッドを利用します。jQueryを利用しない場合jQueryを利用せずにオブジェクトのマージをするコー
jQueryを利用して、ウェブブラウザのスクロール量を取得するコードを紹介します。概要jQueryでスクロール量を取得する場合は以下のメソッドを利用します。$(this).scrollTop()$(this).scrollLeft()プログ
一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠を作成するコードを紹介します。補足jQueryを利用するほうが簡単に実装できます。jQueryを利用した実装はこちらの記事を参照してください。プログラムコード下記のHTM
一定量スクロールするとヘッダやツールバーがスクロールせずに固定される枠を作成するコードを紹介します。概要一定量スクロールするとヘッダが固定される画面を実装します。jQueryを利用しない実装方法はこちらの記事を参照してください。プログラム事
ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加するコードを紹介します。概要JavaScriptの処理などで、ボタンをクリックなどイベントが発生した時に、ページの遷移はしていないが、ページ遷移したようにURLを見せたいこ
JavaScriptでひとつ前のページに戻るコード、ひとつ次のページへ進むコードを紹介します。概要JavaScriptでWebブラウザの[戻る]ボタンや[進む]ボタンをクリックしたときと同じ動作をします。書式ひとつ前のページに戻るhisto
JavaScriptとjQueryを利用してURLのパラメーターを取得するコードを紹介します。概要jQueryを利用しても、URLパラメーターを取得するメソッドは用意されていないため、実装はJavaScriptでの実装とほぼ変わりません。プ
連想配列のすべてのキーを取得するコード、連想配列のすべての要素を取得するコードを紹介します。概要連想配列のすべての要素にアクセスするには、for in 文を利用します。書式for (var [変数名] in [連想配列名]){ ...処理
ページのDOMツリーが構築された直後、Webブラウザの画面にページが表示される前にJavaScriptを実行するコードを紹介します。概要Webブラウザにページの内容がレンダリングされて画面表示される前にJavaScriptを実行する場合、D
文字列の前後の空白を除去するコードを紹介します。概要文字列の前後の空白を取り除くには、stringオブエジェクトのtrimメソッドを利用します。プログラム例コード下記のHTMLファイルを作成します。<!DOCTYPE html>
JavaScriptで文字列から、指定した開始位置位置から終了位置までの部分文字列を取得するコードを紹介します。概要JavaScriptで文字列から部分文字列を取得するには、文字列クラスのsubstring()メソッドを利用します。書式(文
JavaScriptで文字列を区切り文字で分割するコードを紹介します。概要文字列を区切り文字で分割するにはSplitメソッドを利用します。Splitメソッドの引数に区切り文字を与えて呼び出すと、分割された文字列配列が戻り値として返ります。プ
JavaScriptで警告ダイアログを表示するコードを紹介します。概要JavaScriptで警告ダイアログを表示する場合は、alert関数を利用します。書式alert([ダイアログに表示するメッセージのテキスト]);コード下記のコードを記述
jQuery.Cookie を利用して Cookieへの書き込み、読み込み、削除のコードと実行結果を紹介します。概要jQuery.Cookie を利用すると、シンプルなコードでCookieへ情報の書き込みや、読み込みができます。また、パーシ
JavaScriptでCookieからデータを削除するコードを紹介します。概要Cookieからデータを削除するには、指定したキーに何も代入しないことでクリアできます。または、Cookieの有効期限を過去日に設定することでCookieを削除す
Javascriptで指定したキーが連想配列に存在するか確認するコードを紹介します。概要Javascriptで指定したキーが連想配列に存在するかを調べるには in 演算子を利用します。連想配列名 in キー名連想配列にキーが含まれていれば
Javascriptで連想配列を利用するコードを紹介します。書式宣言と初期化連想配列の宣言と初期化は以下の書式を利用します。var 連想配列名 = new Array();代入代入は以下の書式を利用します。連想配列への代入は"[","]"で
JavaScriptでCookieに書き込まれた値を読み込むコードを紹介します。Cookieからの読み込みコード<!DOCTYPE html><html><head> <meta http-equ
JavascriptでCookieに書き込むコードを紹介します。単純なCookieへの書き込みコード<!DOCTYPE html><html><head><meta http-equiv="Cont
JavaScriptで Aタグのリンク先URLを動的に変更するコードを紹介します。概要Aタグのリンク先のURLを変更する場合は、Aタグの要素を取得し、href プロパティに遷移先のURLを設定します。プログラム例コード下記のHTMLファイル
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生するコードを紹介します。方法1: ページの表示時にHttpRequestを初期化する方法ページの表示時にHttpRequestを初期化するコードを紹介し
Web Audio API を利用してWebブラウザでサウンドを再生するコードを紹介します。注意Web Audio APIはInternet Explorerでは利用できないため、Microsoft Edge, FireFox, Chrom
JavaScriptのAudio オブジェクトを利用してサウンドを再生するコードを紹介します。サウンドの再生サウンドの再生をするコードです。コード下記のHTMLファイルを作成します。<!DOCTYPE html><html
iOSのMobile Safari でWeb Audio API でサウンドが再生されない現象のうち、タッチ制約による制限について紹介します。タッチ制限iOSのMobile Safariではタッチ制約があり、最初のstart()メソッドの呼
イベントリスナーとイベントの動作の違いを紹介します。イベントリスナーとイベントイベントリスナーはオブジェクトのaddEventListener()メソッドを呼び出し、イベントリスナーをオブジェクトに追加します。イベントはオブジェクトのonc
JavaScriptで無名関数を利用するコードを紹介します。概要JavaScriptで一度しか参照しない関数は関数名をつけずに定義することができます。これを無名関数と呼びます。無名関数の用途の多くはコントロールやクラスなどのイベントハンドラ
ページ読み込み時に JavaScriptを実行するコードと実行結果を紹介します。概要ページ読み込み時にJavaScriptを実行するには、大きく分けると以下の2つの方法があります。JavaScriptのイベントに設定する方法JavaScri
JavaScriptでの16進数の記述コードを紹介します。概要JavaScriptで16進数を表記する場合は、数字の前に "0x"を記述します。ヒント記号文字の16進数のコードはこちらの記事を参照してください。補足JavaScriptのコー
JavaScriptで押下されたマウスボタンを取得するコードを紹介します。概要こちらの記事では、マウスボタンの押下の検出とその座標を取得するコードを紹介しました。この記事ではマウスボタンのどのボタンが押されたかを判別するコードを紹介します。
