how_to_javascript_3 - PukiWiki

[ トップ ] [ 編集 | 凍結解除 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

前回までの簡単な復習 †

if構文、for構文

（余談）特にifチェックは変数を利用しなくてもよいです。

if( 6/2 == 3 ) {
  alert("チェックOK");
}

もうプログラム読めるよね
http://k-tateno.s-tanno.com/wiki/sample/js301.html

メソッド・プロパティとは †

数字の四捨五入

「JavaScript 四捨五入」でググルとこんなページが……
http://keicode.com/jsref/number.tofixed.php

var a;
a = 1/6;
b = a.toFixed(2);
alert(b);

変数には、

もれなく「メソッド」がついてきます！
もれなく「プロパティ」もついてきます。
　→　メソッド＝操作・指示
　→　プロパティ＝状態
変数に入っている種類で使える「メソッド」「プロパティ」は変わります。

※正確には変数（箱）ではなくオブジェクト（数字や文字列）にメソッドとプロパティは定義されています。

変数に文字列が入ったとき

var s = "JAVA SCRIPT";
alert( s.length );

var s = "JAVA SCRIPT";
var len = s.length;
alert( s + "の文字長は" + len );

var s = 'hello world!';
alert( s );
alert( s.toUpperCase() );

オブジェクト †

JavaScriptで用いられるオブジェクトはwindowオブジェクトを頂点としたツリー構造で定義されています。

■ JavaScriptオブジェクトリファレンス
http://www.scollabo.com/banban/java/object.html
■ JavaScriptリファレンス（オブジェクト別）
http://www.htmq.com/js/index.shtml
■ JavaScript のコア・リファレンス
http://keicode.com/jsref/

navigatorオブジェクトの中身の一部を見よう

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
かんがえ<br />
ると<br />
いずれしけいになるか<br />
てまねきしている あい<br />
つにころされるだけだ。<br />
しってい<br />
る。おれは、キラのそんざいを<br />
えものにされる。<br />
(DEATH NOTE)

<SCRIPT LANGUAGE="JavaScript">
<!-- 
alert( navigator.appVersion );
-->
</SCRIPT>

</body>
</html>

windowオブジェクトの中身の一部を見よう

alert( window.document.body.innerHTML );

alert( window.document.body.innerText );

alert( window.document.body.innerText.length );

ちなみに

document.write()　→　window.document.write()

windowオブジェクトは省略可能！

alert()　→　window.alert()

Dateオブジェクト †

日時関係を扱うオブジェクト（一番よく使います）

■ JavaScriptオブジェクトリファレンス（Dateオブジェクト）
http://www.scollabo.com/banban/java/ref_15.html

変数（オブジェクト）作成（「箱」を作成）

var now = new Date();

var now = new Date();
alert( now.getHours() + "時" + now.getMinutes() + "分" + now.getSeconds() + "秒" );

Dateオブジェクトメソッド一覧 †

※ 表に「参照する」と書いてあるのは「箱から取り出す」ということです。

getDate()	日にちを参照する
getDay()	曜日を参照する（0～6、日曜～土曜）
getFullYear()	４桁の西暦年を参照する
getHours()	現在の時間を参照する
getMilliseconds()	ミリ秒（1000=1秒）を参照する
getMinutes()	分を参照する
getMonth()	月を参照する（0～11、1月～12月）
getSeconds()	秒を参照する
getTime()	1970年1月1日午前0時からの経過時間（秒数）を参照する
getTimezoneOffset()	世界協定時間との時差を参照する
getUTCDate()	世界協定時間の日にちを参照する
getUTCDay()	世界協定時間の曜日を参照する（0～6、日曜～土曜）
getUTCFullYear()	世界協定時間の４桁の西暦年を参照する
getUTCHours()	世界協定時間の現在の時間を参照する
getUTCMilliseconds()	世界協定時間のミリ秒（1000=1秒）を参照する
getUTCMinutes()	世界協定時間の分を参照する
getUTCMonth()	世界協定時間の月を参照する（0～11、1月～12月）
getUTCSeconds()	世界協定時間の秒を参照する
getYear()	年（西暦の下２桁）を参照する
parse()	1970年1月1日午前0時から指定した日付までの経過秒数を参照
setDate()	日にちを設定する
setFullYear()	４桁の西暦年を設定する
setHours()	現在の時間を設定する
setMilliseconds()	ミリ秒（1000=1秒）を設定する
setMinutes()	分を設定する
setMonth()	月を設定する（0～11、1月～12月）
setSeconds()	秒を設定する
setTime()	1970年1月1日午前0時からの経過時間（秒数）を設定する
setUTCDate()	世界協定時間の日にちを設定する
setUTCFullYear()	世界協定時間の４桁の西暦年を設定する
setUTCHours()	世界協定時間の現在の時間を設定する
setUTCMilliseconds()	世界協定時間のミリ秒（1000=1秒）を設定する
setUTCMinutes()	世界協定時間の分を設定する
setUTCMonth()	世界協定時間の月を設定する（0～11、1月～12月）
setUTCSeconds()	世界協定時間の秒を設定する
setYear()	年（西暦の下２桁）を設定する
toGMTString()	グリニッジ（GMT）標準時間を文字列として参照する
toLocalString()	ローカル（地域別）時間を文字列として参照する
toUTCString()	世界協定（UTC）時間を文字列として参照する
UTC()	1970年1月1日午前0時から指定した日付までの経過秒数を参照

使ってみましょう

var now;
now = new Date();

now という変数に色々なデータ（日時データ）が入ります。

そのデータの中から、西暦を取り出して、yearという変数に入れます。

var now;
now = new Date();

var year; 
// nowという箱の中にあるデータの中の「西暦」を取り出す
year = now.getFullYear();

alertで year の中に何が入っているか見て見ましょう。

var now;
now = new Date();

var year; 
// nowという箱の中にあるデータの中の「西暦」を取り出す
year = now.getFullYear();

alert( year );

配列 †

１つの変数（箱）に複数のデータが入るよ

var week = new Array(7);

week[0] = "sun";
week[1] = "mon";
week[2] = "tue";
week[3] = "wed";
week[4] = "thu";
week[5] = "fri";
week[6] = "sat";

document.write(week[3]);

0～6の7要素を持つ配列が作成されます。
配列番号は0から始まるので注意！

具体的には、week[0] ～ week[6] までの箱が出来ます。

配列の処理はfor構文が良く使われます

var week = new Array(7);

week[0] = "sun";
week[1] = "mon";
week[2] = "tue";
week[3] = "wed";
week[4] = "thu";
week[5] = "fri";
week[6] = "sat";

for( var i=0; i<7; i++ ) {
   document.write( week[i] + " " );
}

「i」は 0～6まで変化（ループ）します。
ですので week[i] は、week[0]～week[6] まで変化（ループ）します。
その結果、すべての曜日が表示されます。

ちなみに存在しない番号を指定すると？

alert( week[7] );

何も入力されていない状態を表わす「 undefined 」

配列を指定する †

その1

youbi = new Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日");

その1（見やすく）

youbi = new  Array(
"日曜日",
"月曜日",
"火曜日",
"水曜日",
"木曜日",
"金曜日",
"土曜日"
);

その2

youbi = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"];

宿題 †

挨拶と曜日を表示するページを作ってください。

6時から10時までの間

おはようございます。今日は水曜日です。

10時から17時までの間

こんにちは。今日は水曜日です。

17時から24時までの間

こんばんは。今日は水曜日です。

Dateオブジェクトを使ってください
Dateオブジェクトのメソッドはググってください
曜日は配列を使って表示してください
表示は document.write() で行ってください

余裕のある人は †

CSSを定義して曜日ごとに文字の色を変えてください
DIV等で定義するIDを配列に入れてそれを使ってください。

var div_id = new Array(7);
div_id[0] = "color_sun";
div_id[1] = "color_mon";
div_id[2] = "color_tue";
div_id[3] = "color_wed";
……

ヒント

document.write('<div id="' + div_id[i] + '">～</div>';

実際になにが表示されているか確認する場合は、FireFoxプラグイン「FireBug」で表示を確認できます。

Last-modified: 2009-12-09 (水) 23:47:10 (272d)