～ 絶対値を求める ～ ある数値の絶対値を求めるには「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 = …

～ JavaScript で作るシンプルカウンター ～ 今回は JavaScript でボタンを押すたびにカウントがアップする「シンプルカウンター」を作ります。 ＜設計＞ 今回作成するシンプルカウンターで使う部品は「カウント表示部」「カウントアップボタン」「リセット…

～ JavaScript の演算子 ～ JavaScript の演算子の種類は下記表となります。 シンボル 説 明 例 + 加算、連結 1+2、"hogehoge" + "gehogeho" - 減算 5-3 * 乗算 3*2 / 除算 8/4 = 代入 var moji = "test"; === 等価 var x === 100;、val === 5; ! , !== 否定…

～ コメントの書き方 ～ JavaScript のコメントの書き方は以下の2種類です。 /* この中にコメントを記述 （改行も可能） */ // ダブルスラッシュの後にコメントを記述 END

～ JavaScript のデータ型 ～ JavaScript のデータ型は下記表にある5種類です。 データ型 説 明 例 String 文字列型 var str = "test"; Number 数値型 var num = 100; Boolean 論理型 var hantei = true; Array 複数 var hairetsu = ["a","b","c"]; Object …

～ 要素内の高さ（ピクセル）を取得したい ～ 要素内の高さ（ピクセル）を取得するには「clientHeight」プロパティを使用します。 例）get_takasa = element.clientHeight; // 要素内の高さ（ピクセル）を取得 サンプルソース 下のサンプルでは「takasa」と…

～ 自分を含む要素内のHTMLを取得したい ～ 自分を含む要素内のHTMLを取得するには「outerHTML」プロパティを使用します。 例）get_html = element.outerHTML; // 自分を含む要素内のHTMLを取得 サンプルソース 下のサンプルでは「outer」という id 名が付け…

～ 要素内のHTMLを取得したい ～ 要素内のHTMLを取得するには「innerHTML」プロパティを使用します。 例）get_html = element.innerHTML; // element内のHTMLを取得 サンプルソース 下のサンプルでは「test」という id 名が付けられた要素内のHTMLを取得した…

～ 選択されている文字列を取得したい ～ 選択されている文字列を取得するには「getSelection」メソッドを使用します。Chrome と Edge で確認したところ例1～3は同じ結果になりました。 例1）window.document.getSelection(); // 選択されている文字列を取得…

～ JavaScript でウィンドウを閉じる ～ JavaScriptでウィンドを閉じるには「close」メソッドを使用します。ただし、セキュリティー上「close」で閉じることができるのは「open()」で開かれたウィンドウだけに制限されています。 例1）ウィンドウ名.close ()…

～ 新しいウィンドを開く ～ JavaScriptで新しいウィンドを開くには「window.open」メソッドを使用します。( ) の中のパラメータは省略することができますが、URLを省略した場合は空白のウィンドウが開かれます。 例）window.open(URL,任意のウィンドウ名,オ…

～ ページの読み込み完了時に処理を実行したい ～ ページの読み込み完了時に処理を実行させるには「window.onload」を使用します。 例）window.onload = function() { ～ ここに処理を記述 ～ }; ※window を省略しても動作しますが、省略はあまりおすすめで…

～ マウスの左ボタンを押したときに処理を実行する ～ マウスの左ボタン※1を押した時に処理を実行するには「onmousedown」イベントを使用します。※1 マウスの主と副のボタンを入れ替えてある場合は右ボタンになります。 例）onmousedown=" alert('メッセージ…

～ マウスアウト時に処理を実行する ～ マウスアウト時に処理を実行するには「onmouseout」イベントを使用します。 例）onmouseout=" alert('メッセージ') " サンプルソース <div onmouseout=" alert('メッセージ') ">この行からマウスカーソルが外れるとメッセージが表示されます…</p> 実行結果 この行か…