DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

JavaScriptその3

今日はJRで朝から人身事故、
思ったより遅刻した生徒さんは少なかったですが
バタバタしました。

途中から授業を拝聴いたしました。

▼文字数の取得 教科書128ページ
▼文字列の一部を抜き出す 教科書125ページ
▼切り上げ、切り捨て、四捨五入 教科書163ページ
▼現在の日時の取得1 教科書139ページ
▼現在の日時の取得2 教科書148ページ
▼(練習問題)時刻によって挨拶を変える
▼(練習問題)今日から大みそかまでの日にちを計算する 教科書160ページ
▼一定時間後に処理、一定時間ごとに処理 教科書106ページ、110ページ

●文字数の取得 教科書128ページ
文字列.length文字列の文字数を返します。
たとえば、「今日は天気です」の場合、7が返されます。
↓コードはこんな感じ
<script type = "text/javascript">
var str1= "koube";
var str2="神戸";
document.write("str1"+str1+"
"); document.write("str2"+str2+"
"); var len1=str1.length; var len2=str2.length; document.write("str1の長さ"+len1+"
"); document.write("str2の長さ"+len2+"
"); </script>


●文字列の一部を抜き出す 教科書125ページ
文字列.substring(開始位置,終了位置)指定した文字列の開始位置から終了位置の前までを抜き出します。
たとえば「今日は天気です」から「天気」を抜き出す場合、↓のように記述します。
"今日は天気です".substring(3,5)
文字列は0(ゼロ)からカウントするので、注意しましょう。

↓コードはこんな感じ
<script type = "text/javascript">
var str1= "koube";
var str2="神戸";
document.write("str1"+str1+"
"); document.write("str2"+str2+"
"); var sub1=str1.substring(0,3); document.write("str1の0文字から3文字"+sub1+"
"); </script>

↓画面表示はこんな感じ(以下、画像はクリックで拡大します)

●切り上げ、切り捨て、四捨五入 教科書163ページ
小数点以下を切り上げるMath.ceil(数値または数式)
小数点以下を切り捨てるMath.floor(数値または数式)
小数点以下を四捨五入するMath.round(数値または数式)
↓コードはこんな感じ
<script type = "text/javascript">
var num1 = 12.5;
var num2 = 12.4;

//切り上げ
var ceil_num1 = Math.ceil(num1);
var ceil_num2 = Math.ceil(num2);

//切り捨て
var floor_num1 = Math.floor(num1);
var floor_num2 = Math.floor(num2);

//四捨五入
var round_num1 = Math.round(num1);
var round_num2 = Math.round(num2);

document.write("もとの値①"+num1+"
"); document.write("もとの値②"+num2+"
"); document.write("
"); document.write("切り上げ①"+ceil_num1+"
"); document.write("切り上げ②"+ceil_num2+"
"); document.write("
"); document.write("切り捨て①"+floor_num1+"
"); document.write("切り捨て②"+floor_num2+"
"); document.write("
"); document.write("四捨五入①"+round_num1+"
"); document.write("四捨五入②"+round_num2+"
"); </script>

↓画面表示はこんな感じ


●現在の日時の取得1 教科書139ページ
new Date(日付や時刻)指定した日付や時刻をもとに日付オブジェクトを作成します。
( )内に日付や時刻を記述します。
( )の中がない場合は今日の日付と時刻を取得します。
【例】2006年4月25日の場合
new Date("2006/4/25")

↓コードはこんな感じ
<script type = "text/javascript">
var day = new Date();
document.write("現在時刻"+day+"
"); </script>

↓画面表示はこんな感じ
これでは見づらいと言うことで・・・

●現在の日時の取得2 教科書148ページ
西暦年を返す日付オブジェクト.getFullYear()西暦の年を返します。
月を返す日付オブジェクト.getMonth()指定した日付オブジェクトから月を
[0]~[11]で返します。
1月は「0」、2月は「1」、3月は「2」・・・12月は「11」が返ってくる値になるので、
ブラウザで表示するときは「+1」をする必要があります。
日にちを返す日付オブジェクト.getDate()日にちを返します。

↓コードはこんな感じ
<script type = "text/javascript">
var day = new Date();
var year = day.getFullYear(); //西暦 new Date();が入った値がおおもとになる
var month = day.getMonth()+1; //月 0から始まるので表示をわかりやすくするため
var hi = day.getDate();  //日
var hour = day.getHours(); // 時間
var minutes = day.getMinutes(); //分
var secind = day.getSeconds(); //秒

document.write("西暦"+year+"年"+month+"月"+hi+"日
"); document.write(hour+"時"+minutes+"分"+secind+"秒
"); </script>

↓画面表示はこんな感じ


●(練習問題)時刻によって挨拶を変える ↓コードはこんな感じ
<script type = "text/javascript">
//日時の取得
//あいさつ文を変える
// 0~12 朝
// 13~17 昼
// 18~23 夜

var day = new Date();
var hour = day.getHours(); // 時間
var minutes = day.getMinutes(); //分

var msg ; //メッセージ

if(hour<12){
	msg="おはようございます";
	}else if(hour<18){
	msg="こんにちは";
	}else{
	msg="こんばんは";
	}	
	document.write(msg+"
"); document.write("現在"+hour+"時"+minutes+"分"); </script>

↓画面表示はこんな感じ


●(練習問題)今日から大みそかまでの日にちを計算する 教科書160ページ
1970/1/1/ 00:00:00 からの経過ミリ秒を返す日付オブジェクト.getTimer()
1970年1月1日00時00分00秒から、指定した日付オブジェクトまでの経過ミリ秒を返します。 経過した時間を求める時に使います。
↓コードはこんな感じ
<script type = "text/javascript">
//日時をもとに計算する
//大晦日までの日数を計算する

var day = new Date();

//大晦日 どの日を見ても常に大晦日を見る
var last = new Date(day.getFullYear(),11,31);

//残り時間
var dif = last.getTime()-day.getTime();

var keika = day.getTime();
	document.write("大晦日まで"+dif+"ミリ秒
"); //1秒が1,000ミリ秒 //日数に変換 160ページ 34.5日とか出たら35日に切り上げ var n = Math.ceil(dif/(1000*60*60*24)); //1000×60で秒に直して、×60で分に直して、×24で時間に直してから割っている document.write("大晦日まであと"+n+"日"); </script>
↓画面表示はこんな感じ


▼一定時間後に処理、一定時間ごとに処理 教科書106ページ、110ページ
一定時間後に処理を実行する
時間はミリ秒で指定(1000ミリ秒=1秒)
setTimeout(処理,時間)
一定時間ごとに処理を実行する
時間はミリ秒で指定(1000ミリ秒=1秒)
setInterval(処理,時間)

↓コードはこんな感じ
<head>
<title>JavaScript</title>
<meta http-equiv = "Content-Script-Type" content = "text/javascript">
<script type = "text/javascript">
//●秒後に 106ページ setTimeout
//●秒ごとに 110ページ setInterval

var str ="5秒たったよ"

</script>
</head>
<body>

<form>
<input type="button" value="ボタン" onclick="setTimeout('alert(str)',5000)">
<input type="button" value="ボタン" onclick="setInterval('alert(str)',5000)">
</form>

↓画面表示はこんな感じ
この「一定時間ごと」の方がOKしたらずーっと出っぱなしになるので
ブラウザを閉じるタイミングをみはからわないといけなかったです