JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

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

文字列の長さ(文字数)を取得する ~

文字列の長さを取得するには、「length」プロパティを使用します。

例)mojiretsu.length;     // 文字列の長さを取得

JavaScript コード

ボタンを押すと文字列の長さを取得してアラートで表示するサンプルです。

var ele_akeome = document.getElementById("disp_akeome");
var btn_nagasa = document.getElementById("btn_nagasa");
// ボタンのクリックイベントを監視
btn_nagasa.onclick = function(){
     var mojiretsu = ele_akeome.innerHTML;     // 文字列を取得
     alert(mojiretsu.length + "文字です!");     // 文字列の長さをアラートで表示
}

HTML ソース

<p><strong><em id="disp_akeome">明けましておめでとうございます。</em></strong></p>
<p><input id="btn_nagasa" type="button" value="文字列の長さを取得する" /></p>

実行結果

明けましておめでとうございます。

※このページの読み込みが完了してから試してください。

 

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

現在の時刻を取得したい

現在の時刻を取得するには、日付と曜日を取得した場合と同じ「Date」メソッドを使用します。

例)var jikan  = new Date();     // 現在日時を取得

JavaScript コード

ボタンを押すと現在時刻を取得して表示するサンプルです。

var ele_jikan = document.getElementById("disp_jikan");
var btn_jikan = document.getElementById("btn_jikan");
btn_date.onclick = function(){
     var
current_jikan = new Date();
     var genzai_jikan = "現在は" +
current_jikan.getHours() + "時"
          +
current_jikan.getMinutes() + "分"
          +
current_jikan.getSeconds() + "秒です。";
          ele_jikan.innerHTML = genzai_jijkan;
}

HTML ソース

<p><strong><em id="disp_jikan">ボタンを押してください</em></strong></p>
<p><input id="btn_jikan" type="button" value="現在の時刻を取得する" /></p>

実行結果

ボタンを押してください

※このページの読み込みが完了してから試してください。

 

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

現在の日付と曜日を取得したい

現在の日付と曜日を取得するには「Date」メソッドを使用します。

例)var genzai  = new Date();     // 現在日時を取得

JavaScript コード

ボタンを押すと現在の日付と曜日を取得して表示するサンプルです。

var ele_date = document.getElementById("disp_date");
var btn_date = document.getElementById("btn_date");
btn_date.onclick = function(){
     var current = new Date();
     var youbi = ["日","月","火","水","木","金","土"]
     var genzai = "現在は" + current.getFullYear() + "年"
          + current.getMonth() + 1 + "月"
          + current.getDate() + "日"
          + youbi[current.getDay()] + "曜日です。";
          ele_date.innerHTML = genzai;
}

HTML ソース

<p><strong><em id="disp_date">ボタンを押してください</em></strong></p>
<p><input id="btn_date" type="button" value="現在の日付と曜日を取得する" /></p>

実行結果

ボタンを押してください

※このページの読み込みが完了してから試してください。

 

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

JavaScript で作るシンプルカウンター ~

今回は JavaScript でボタンを押すたびにカウントがアップする「シンプルカウンター」を作ってみます。

<設計>

今回作成するシンプルカウンターで使う部品は「カウント表示部」「カウントアップボタン」「リセットボタン」の3種類で、部品はdiv要素とbutton要素で作ります。

1.カウント表示部・・・div要素
2.カウントアップボタン・・・button要素
3.リセットボタン・・・button要素

動作・・・カウントアップボタンをクリックすると表示部のカウントが1ずつアップして、リセットボタンをクリックするとカウントが「0」に戻します。

<HTMLソース>

HTMLでシンプルカウンターの部品を用意します。

<div id="disp_count">0</div>
<input type="button" value="カウントアップ" id="btn_count_up" />
<input type="button" value="リセット" id="btn_reset" />

JavaScript コード>

ポイントはページが読み込まれたらすぐに実行して、2つのボタンにイベントを登録するところです。最初にこの処理をしておかないとボタンをクリックしても反応してくれませんので忘れずに…。

// ページが読み込まれたら実行
window.onload = function() {

     // オブジェクトと変数の準備
     var count_disp = document.getElementById("disp_count");  
     var count_up_btn = document.getElementById("btn_count_up");
     var reset_btn = document.getElementById("btn_reset");
     var count_value = 0;

     // カウントアップボタンクリック処理
     count_up_btn.onclick = function (){
          count_value += 1;
          count_disp.innerHTML = count_value;
     };
     // カウントアップボタンのマウスダウン処理
     count_up_btn.onmousedown = function() {
          count_up_btn.style.backgroundColor = "#00FF00";
     }
     // カウントアップボタンのマウスアップ処理
     count_up_btn.onmouseup = function() {
          count_up_btn.style.backgroundColor = "";
     }
     // リセットボタンのクリック処理
     reset_btn.onclick = function (){
          count_value = 0; count_disp.innerHTML = count_value;
     }
     // リセットボタンのマウスダウン処理
     reset_btn.onmousedown = function() {
          reset_btn.style.backgroundColor = "#00FF00";
     }
     // リセットボタンのマウスアップ処理
     reset_btn.onmouseup = function() {
          reset_btn.style.backgroundColor = "";
     }
};

CSS

CSSで表示とボタンのスタイルを設定します。

#disp_count {
     background-color: #093;
     color: #FFF;
     font-size: 72px;
     border-radius: 10px;
     padding: 20px;
     display: table-cell;
}

#btn_count_up {
     font-size: 36px;
     border-radius: 10px;
     padding: 10px;
     margin-top: 10px;
}

#btn_reset {
     font-size: 36px;
     border-radius: 10px;
     padding: 10px;
     margin-top: 10px;
}

#btn_count_up:hover { background-color:#F30 }
#btn_reset:hover { background-color:#F30 }

<結果サンプル>

カウントアップボタンでカウントアップして、リセットボタンでカウントした数値が0に戻る、シンプルなカウンターが完成しました。

0

※サンプルはページが完全に読み込まれるとt正しく動きます。

JavaScript の基本 ~ JavaScript の演算子 ~

JavaScript演算子

JavaScript演算子の種類は下記表となります。

シンボル 説 明
+ 加算、連結 1+2、"hogehoge" + "gehogeho"
- 減算 5-3
* 乗算 3*2
/ 除算 8/4
= 代入 var moji = "test";
=== 等価 var x === 100;、val === 5;
! , !== 否定、非等価 !(a = 5)、a !== 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 オブジェクト var obj = document.getElementById("sample");