JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

JavaScript

 jQuery 版「要素をマウスで移動できるようにする方法」② ドラッグ移動版

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみてください。 <サンプル> 下の要素(青いボッ…

 jQuery 版「要素をマウスで移動できるようにする方法」① クリック移動版

要素をマウスで移動できるようにする 今回は、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)が非表示になります。 $(…

JavaScript の基本 ~ 指定した日付の「曜日」を取得したい ~

~ 指定した日付の曜日を取得する ~ 指定した日付の曜日を取得するには「getDay」メソッドを使用します。曜日は0~6の数値で返されます。 0:日曜日 1:月曜日 2:火曜日 3:水曜日 4:木曜日 5:金曜日 6:土曜日 // 指定した日付の曜日を取得する例)var …

JavaScript の基本 ~ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ~

~ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得したい ~ 1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得するには「Date.now()」メソッドを使用します。 // 現在までの経過時間をミリ秒で取得する例)var genzai = Date.now();…

JavaScript の基本 ~ 文字列をJavaScriptコードとして評価したい ~

~ 文字列をJavaScriptコードとして評価する ~ 文字列をJavaScriptコードとして評価するには「eval」関数を使用します。 // 文字列(var a = "TEST";)をJavaScriptコードとして評価する例)eval('var a = "TEST";'); JavaScript サンプルコード eval('var …

JavaScript の基本 ~ 小数点以下を切り捨てたい ~

~ 小数点以下を切り捨てる ~ 数値の小数点以下を切り捨てるには「Math.floor」関数を使用します。 // 数値「a」の小数点以下を切り捨てた後、結果を「kekka」に返す例)var kekka = Math.floor(a); JavaScript サンプルコード var a = 9.9999;var kekka = …

JavaScript の基本 ~ 小数点以下を四捨五入したい ~

~ 小数点以下を四捨五入する ~ 数値を小数点以下で四捨五入するには「Math.round」関数を使用します。 // 数値「a」を小数点以下で四捨五入した結果(整数)を返す。例)var kekka = Math.round( a ); JavaScript サンプルコード var a = 1.85;var kekka =…

JavaScript の基本 ~ 乱数を発生させたい ~

~ 乱数を発生させる ~ 乱数を発生させるには「Math.random」関数を使用します。乱数は浮動小数点で発生します。 // 0~100までの乱数を発生させる例)var kekka = Math.random() * 100; JavaScript サンプルコード var kekka = Math.random() * 100;docume…

JavaScript の基本 ~ 絶対値を求めたい ~

~ 絶対値を求める ~ ある数値の絶対値を求めるには「Math.abs()」関数を使用します。絶対値とは「符号」を無視して得られる値です。 // 数値「a」の絶対値を求める例)var kekka = Math.abs(a); JavaScript サンプルコード var a = -3.141592653;var kekka…

JavaScript の基本 ~ 特定の位置から最後までの文字を取得したい ~

~ 特定の位置から最後までの文字を取得する ~ ある文字列の特定の位置から最後までの文字を取得するには、引数を一つにして「slice」メソッドを使用します。 // 文字列の3文字目から最後までの文字を取得する例)mojiretsu.slice( 2 ) ; JavaScript サンプ…

JavaScript の基本 ~ 配列のデータを任意の文字で区切った文字列に変換したい ~

~ 配列のデータを任意の文字で区切った文字列に変換する ~ 配列に格納されているデータを任意の文字で区切った文字列にするには「join」メソッドを使用します。 // 配列のデータをハイフンで区切った文字列に変換する例)hairetsu.join('-'); JavaScript …

JavaScript の基本 ~ 文字列の一部を切り出したい ~

~ 文字列の一部を切り出す ~ 文字列の一部を切り出すには「slice」メソッドを使用します。 // 文字列の3文字目から4文字目の範囲を切り出す例)mojiretsu.slice( 2,5 ) ; JavaScript サンプルコード var mojiretsu = "Android";var kekka = mojiretsu.slic…

JavaScript の基本 ~ 文字列を文字で分割して配列にしたい ~

~ 文字列を文字で分割して配列にする ~ 文字列を分割して配列にするには「split」メソッドを使用します。 // 文字列をカンマで区切って配列にする例)mojiretsu.split( ', ' ); JavaScript サンプルコード var mojiretsu = "赤,青,黄,緑,白,黒";var array_…

JavaScript の基本 ~ 配列の先頭にあるデータを削除したい ~

~ 配列の先頭にあるデータを削除する ~ 配列の先頭にあるデータを削除するには「shift」メソッドを使用します。 // 配列の先頭にあるデータを削除例)hairetsu.shift(); JavaScript サンプルコード var hairetsu = ['100','200','300','400','500'];hairet…

JavaScript の基本 ~ 配列の先頭にデータを追加したい ~

~ 配列の先頭にデータを追加する ~ 配列の先頭にデータを追加するには「unshift」メソッドを使用します。 < 配列の先頭にデータを追加 >例)hairetsu.unshift('フォルクスワーゲン'); JavaScript コード var hairetsu = ["アウディ","メルセデス","ルノ…

JavaScript の基本 ~ 配列の最後にあるデータを削除したい ~

~ 配列の最後にあるデータを削除する ~ 配列の最後にあるデータを削除するには「pop」メソッドを使用します。「pop」の後にある ( ) の中には何も記述する必要はありません。 // 配列の最後にあるデータを削除 //例)hairetsu.pop( ); JavaScript コード v…

JavaScript の基本 ~ 配列の最後にデータを追加したい ~

~ 配列の最後にデータを追加する ~ 配列の最後にデータを追加するには「push」メソッドを使用します。 < 配列の最後にデータを追加 >例)hairetsu.push('杏仁豆腐'); JavaScript コード var hairetsu = ["炒飯","餃子","拉麺","中華丼","麻婆豆腐"];hair…

JavaScript の基本 ~ 配列のデータをすべて取り出したい ~

~ 配列のデータをすべて取り出したい ~ 配列に格納されているデータをすべて取り出すには、「for」文で配列の長さ(length)の分だけ取り出し処理をループさせる必要があります。 // 配列の長さの分だけ処理をループする例)for ( var i = 0; i < hairetsu…

JavaScript の基本 ~ 配列の長さを調べたい ~

~ 配列の長さを調べたい ~ 配列の長さを調べるには「length」プロパティを使用します。 例)hairetsu.length; // 配列「hairetsu」の長さを取得 HTML ソース <p id="disp">var hairetsu = [100,200,300,400,500,600];</p><p><input id="btn" type="button" value="配列「hairetsu」の長さを取得する" /></p> JavaScript コード ボタンを押すと配列の長さを取得…

JavaScript の基本 ~ JavaScript のエスケープ文字 ~

~ JavaScript のエスケープ文字 ~ JavaScript のエスケープ文字はバックスラッシュ「\」ですが、環境によっては円マーク「¥」になります。 例)var sample = 'It\'s a small world'; HTML ソース <p id="disp">ボタンを押してください</p><p><input id="btn" type="button" value="表示を「It's a small world」に変更する" /></p> JavaScript コード ボタンを押すと…

JavaScript の基本 ~ 文字列の一部を書き換えたい ~

~ 文字列の一部を書き換えたい ~ 文字列の一部を書き換えるには「replace」メソッドを使用します。 例)var after = before.replace('味噌','醤油'); // 味噌を醤油に書き換える HTML ソース <p id="mojiretsu">味噌ラーメンが食べたい</p><p><input id="btn" type="button" value="味噌を醤油に書き換える" /></p> JavaScript コード ボタンを押すと現在…

JavaScript の基本 ~ 文字列が含まれているか調べる ~

~ 文字列が含まれているか調べる ~ 文字列が含まれているかを調べるには「indexOf」メソッドを使用します。 例)mojiretsu.indexOf('Hello'); // 「Hello」が含まれているかを調べる 探している文字列が見つかるとその位置(0以上)を返し、見つからなかっ…

JavaScript の基本 ~ 文字列の長さ(文字数)を取得したい ~

~ 文字列の長さ(文字数)を取得する ~ 文字列の長さを取得するには、「length」プロパティを使用します。 例)mojiretsu.length; // 文字列の長さを取得 JavaScript コード ボタンを押すと文字列の長さを取得してアラートで表示するサンプルです。 var el…

JavaScript の基本 ~ 現在の時刻を取得したい ~

~ 現在の時刻を取得したい ~ 現在の時刻を取得するには、日付と曜日を取得した場合と同じ「Date」メソッドを使用します。 例)var jikan = new Date(); // 現在日時を取得 JavaScript コード ボタンを押すと現在時刻を取得して表示するサンプルです。 var …

JavaScript の基本 ~ 現在の日付と曜日を取得したい ~

~ 現在の日付と曜日を取得したい ~ 現在の日付と曜日を取得するには「Date」メソッドを使用します。 例)var genzai = new Date(); // 現在日時を取得 JavaScript コード ボタンを押すと現在の日付と曜日を取得して表示するサンプルです。 var ele_date = …

JavaScript でシンプルカウンターを作ってみよう

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

JavaScript の基本 ~ JavaScript の演算子 ~

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

JavaScript の基本 ~ コメントの書き方 ~

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

JavaScript の基本 ~ JavaScript のデータ型 ~

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