JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

JavaScript

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

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

1分でわかる JavaScript の基本 ~ 演算子 ~

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

10秒でわかる JavaScript の基本 ~ コメントの書き方 ~

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

30秒でわかる JavaScript の基本 ~ データ型 ~

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

JavaScript の基本 ~ 要素内の高さ(ピクセル)を取得したい ~

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

JavaScript の基本 ~ 自分を含む要素内のHTMLを取得したい ~

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

JavaScript の基本 ~ 要素内のHTMLを取得したい ~

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

JavaScript の基本 ~ 選択されている文字列を取得したい ~

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

JavaScript の基本 ~ JavaScript でウィンドウを閉じる ~

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

JavaScript の基本 ~ 新しいウィンドを開く ~

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

JavaScript の基本 ~ ページの読み込み完了時に処理を実行したい ~

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

JavaScript の基本 ~ マウスの左ボタンを押したときに処理を実行する ~

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

JavaScript の基本 ~ マウスアウト時に処理を実行する ~

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

JavaScript の基本 ~ マウスオーバー時に処理を実行する ~

~ マウスオーバー時に処理を実行する ~ マウスオーバー時に処理を実行するには「onmouseover」イベントを使用します。 例)onmouseover=" this.style.backgroundColor = 'lightgreen' " サンプルソース <div onmouseover=" this.style.backgroundColor = 'lightgreen' ">この行にマウスカーソルを乗せると背景色が変わりま</div>…

JavaScript の基本 ~ 確認ダイアログを表示する ~

~ 確認ダイアログを表示する ~ 確認ダイアログを表示するには「confirm()」メソッドを使用します。 例)confirm("ラーメンが好きですか?"); サンプルソース var kotae = confirm("ラーメンが好きですか?");if(kotae == true){ alert("OKが押されました…

JavaScript の基本 ~ 警告(アラート)を表示する ~

~ 警告(アラート)を表示する ~ 警告(アラート)ダイアログを表示するには「alert()」メソッドを使用します。 例)aleat("ここに警告内容を書く"); サンプルソース <input type="button" value="押してください" onclick="alert('押されました!')" /> 実行結果 END //

JavaScript の基本 ~ JavaScript を記述する場所 ~

~ JavaScript の記述場所 ~ JavaScript を記述する場所は以下の3つです。スクリプトの長さや使用する目的に応じてこの3つの記述場所を使い分けるようにします。 ① jsファイルを作成してHTML文書とリンクする サイズが大きい(長い)スクリプトをHTML内に…

JavaScript + jQuery でストップウォッチを作る方法

// JavaScript + jQuery でストップウォッチを作る 今回は JavaScript と jQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところです。 動作サンプル …

【JavaScript + jQuery】ドキュメント(ページ)上にあるマウスポインターの座標位置を取得する方法

// マウスポインタの座標を取得する マウスポインターの移動を検出するのは jQuery の「mousemove」を、座標を取得するのは JavaScript の「clientX」「clientY」を利用します。

JavaScript でカウントアップタイマーを作る方法

JavaScript でカウントアップ 今回は、JavaScript でカウントアップタイマーを作ります。 メインのタイマー部分には一定の時間で繰り返し指定の関数を実行する「setInterval」関数を使います。 var tm = setInterval("sample()", 1000); この場合の動作:100…