JavaScript
「表」を横スクロールできるようにする スマートフォンのようなタテ型画面で「表（テーブル）」を表示すると、表の中の文字が縦書きのような状態になってしまい見づらくなる場合があるので、あまりにも酷い場合はCSSで横スクロールができるように設定しまし…
折れ線グラフを作ってみよう Chart.js を使った折れ線グラフの作り方です。ちょっとコツが必要ですが Chart.js を使うと動的にグラフが作成できます。 ※今回作成するグラフのイメージ画像 ※この有料記事で Chart.js を使用した折れ線グラフの基本的な作り方…
JavaScript でデバイスを判別して CSS を切り替える 今回は、JavaScript で取得したユーザーエージェントの文字列からデバイスを判別して CSS を切り替える方法です。 var get_useragent = navigator.userAgent; ～ 主な仕様 ～ JavaScript でユーザーエージ…
Audioでサウンドファイルを再生する JavaScript でサウンドファイルを再生させるには「Audio」オブジェクトを使用します。まず、Audio()のコンストラクタをインスタンス化し、サウンドファイルを指定します。 ※この記事では、JavaScript を使ってサウンドフ…
要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみて下さい。 ※この記事では、画面上にある任意の…
要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。 …
～ 要素を非表示にする ～ jQueryで要素を非表示にするには「hide()」メソッドを使用します。 例）$("#youso").hide(); // 要素を非表示にする HTML ソース <p id="youso">Hello World</p><p><input id="btn" type="button" value="非表示にする" /></p> JavaScript コード ボタン（id=btn）を押すと要素（id=youso）が非表示になります。 $(…
～ 指定した日付の曜日を取得する ～ 指定した日付の曜日を取得するには「getDay」メソッドを使用します。曜日は0～6の数値で返されます。 0：日曜日 1：月曜日 2：火曜日 3：水曜日 4：木曜日 5：金曜日 6：土曜日 // mydate で指定した日の曜日を取得する…
～ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ～ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得するには「Date.now()」メソッドを使用します。 // 現在までの経過時間をミリ秒で取得する例）var genzai = Date.now();…
～ 文字列をJavaScriptコードとして評価する ～ 文字列をJavaScriptコードとして評価するには「eval」関数を使用します。 // 文字列（var a = "TEST";）をJavaScriptコードとして評価する例）eval('var a = "TEST";'); JavaScript サンプルコード eval('var …
～ 小数点以下を切り捨てる ～ 数値の小数点以下を切り捨てるには「Math.floor」関数を使用します。 // 数値「a」の小数点以下を切り捨てた後、結果を「kekka」に返す例）var kekka = Math.floor(a); JavaScript サンプルコード var a = 9.9999;var kekka = …
～ 小数点以下を四捨五入する ～ 数値を小数点以下で四捨五入するには「Math.round」関数を使用します。 // 数値「a」を小数点以下で四捨五入した結果（整数）を返す。例）var kekka = Math.round( a ); JavaScript サンプルコード var a = 1.85;var kekka =…
～ 乱数を発生させる ～ 乱数を発生させるには「Math.random」関数を使用します。乱数は浮動小数点で発生します。 // 0～100までの乱数を発生させる例）var kekka = Math.random() * 100; JavaScript サンプルコード var kekka = Math.random() * 100;docume…
～ 絶対値を求める ～ ある数値の絶対値を求めるには「Math.abs()」関数を使用します。絶対値とは「符号」を無視して得られる値です。 // 数値「a」の絶対値を求める例）var kekka = Math.abs(a); JavaScript サンプルコード var a = -3.141592653;var kekka…
～ 特定の位置から最後までの文字を取得する ～ ある文字列の特定の位置から最後までの文字を取得するには、引数を一つにして「slice」メソッドを使用します。 // 文字列の3文字目から最後までの文字を取得する例）mojiretsu.slice( 2 ) ; JavaScript サンプ…
～ 配列のデータを任意の文字で区切った文字列に変換する ～ 配列に格納されているデータを任意の文字で区切った文字列にするには「join」メソッドを使用します。 // 配列のデータをハイフンで区切った文字列に変換する例）hairetsu.join('-'); JavaScript …
～ 文字列の一部を切り出す ～ 文字列の一部を切り出すには「slice」メソッドを使用します。 // 文字列の3文字目から4文字目の範囲を切り出す例）mojiretsu.slice( 2,5 ) ; JavaScript サンプルコード var mojiretsu = "Android";var kekka = mojiretsu.slic…
～ 文字列を文字で分割して配列にする ～ 文字列を分割して配列にするには「split」メソッドを使用します。 // 文字列をカンマで区切って配列にする例）mojiretsu.split( ', ' ); JavaScript サンプルコード var mojiretsu = "赤,青,黄,緑,白,黒";var array_…
～ 配列の先頭にあるデータを削除する ～ 配列の先頭にあるデータを削除するには「shift」メソッドを使用します。 // 配列の先頭にあるデータを削除例）hairetsu.shift(); JavaScript サンプルコード var hairetsu = ['100','200','300','400','500'];hairet…
～ 配列の先頭にデータを追加する ～ 配列の先頭にデータを追加するには「unshift」メソッドを使用します。 ＜ 配列の先頭にデータを追加 ＞例）hairetsu.unshift('フォルクスワーゲン'); JavaScript コード var hairetsu = ["アウディ","メルセデス","ルノ…
～ 配列の最後にあるデータを削除する ～ 配列の最後にあるデータを削除するには「pop」メソッドを使用します。「pop」の後にある ( ) の中には何も記述する必要はありません。 // 配列の最後にあるデータを削除 //例）hairetsu.pop( ); JavaScript コード v…
～ 配列の最後にデータを追加する ～ 配列の最後にデータを追加するには「push」メソッドを使用します。 ＜ 配列の最後にデータを追加 ＞例）hairetsu.push('杏仁豆腐'); JavaScript コード var hairetsu = ["炒飯","餃子","拉麺","中華丼","麻婆豆腐"];hair…
～ 配列のデータをすべて取り出したい ～ 配列に格納されているデータをすべて取り出すには、「for」文で配列の長さ（length）の分だけ取り出し処理をループさせる必要があります。 // 配列の長さの分だけ処理をループする例）for ( var i = 0; i < hairetsu…
～ 配列の長さを調べたい ～ 配列の長さは配列変数に「length」を接続して取得します。 例）hairetsu.length; // 配列「hairetsu」の長さを取得 HTML ソース 実際に配列を作成しているのは JavaScript コードの中です。 <p id="disp">var hairetsu = [100,200,300,400,500</p>…
～ JavaScript のエスケープ文字 ～ JavaScript のエスケープ文字はバックスラッシュ「\」です。 例）var sample = 'It\'s a SONY'; //シングルクォーテーションをそのまま認識させる HTML ソース <p id="disp">ボタンを押してください</p><p><input id="btn" type="button" value="表示を「It's a SONY」に変更する" /></p> JavaScript コード ボタンが押され…
～ 文字列の一部を書き換えたい ～ 文字列の一部を書き換えるには「replace」メソッドを使用します。 例）var after = before.replace('味噌','醤油'); // 味噌を醤油に書き換える HTML ソース <p id="mojiretsu">味噌ラーメンが食べたい</p><p><input id="btn" type="button" value="味噌を醤油に書き換える" /></p> JavaScript コード ボタンを押すと現在…
～ 文字列が含まれているか調べる ～ 文字列が含まれているかを調べるには「indexOf」メソッドを使用します。 例）mojiretsu.indexOf('Hello'); // 「Hello」が含まれているかを調べる 探している文字列が見つかるとその位置（0以上）を返し、見つからなかっ…
～ 文字列の長さ（文字数）を取得する ～ 文字列の長さを取得するには、「length」プロパティを使用します。 例）mojiretsu.length; // 文字列の長さを取得 JavaScript コード ボタンを押すと文字列の長さを取得してアラートで表示するサンプルです。 var el…
～ 現在の時刻を取得したい ～ 現在の時刻を取得するには、日付と曜日を取得した場合と同じ「Date」メソッドを使用します。 例）var jikan = new Date(); // 現在日時を取得 JavaScript コード ボタンを押すと現在時刻を取得して表示するサンプルです。 var …
～ 現在の日付と曜日を取得したい ～ 現在の日付と曜日を取得するには「Date」メソッドを使用します。 例）var genzai = new Date(); // 現在日時を取得 JavaScript コード ボタンを押すと現在の日付と曜日を取得して表示するサンプルです。 var ele_date = …
