JavaScriptその3
今日はJRで朝から人身事故、
思ったより遅刻した生徒さんは少なかったですが
バタバタしました。
途中から授業を拝聴いたしました。
▼文字数の取得 教科書128ページ
▼文字列の一部を抜き出す 教科書125ページ
▼切り上げ、切り捨て、四捨五入 教科書163ページ
▼現在の日時の取得1 教科書139ページ
▼現在の日時の取得2 教科書148ページ
▼(練習問題)時刻によって挨拶を変える
▼(練習問題)今日から大みそかまでの日にちを計算する 教科書160ページ
▼一定時間後に処理、一定時間ごとに処理 教科書106ページ、110ページ
●文字数の取得 教科書128ページ
↓コードはこんな感じ
●文字列の一部を抜き出す 教科書125ページ
↓コードはこんな感じ
↓画面表示はこんな感じ(以下、画像はクリックで拡大します)
●切り上げ、切り捨て、四捨五入 教科書163ページ
↓コードはこんな感じ
↓画面表示はこんな感じ
●現在の日時の取得1 教科書139ページ
↓コードはこんな感じ
↓画面表示はこんな感じ
これでは見づらいと言うことで・・・
●現在の日時の取得2 教科書148ページ
↓コードはこんな感じ
↓画面表示はこんな感じ
●(練習問題)時刻によって挨拶を変える ↓コードはこんな感じ
↓画面表示はこんな感じ
●(練習問題)今日から大みそかまでの日にちを計算する 教科書160ページ
↓コードはこんな感じ
▼一定時間後に処理、一定時間ごとに処理 教科書106ページ、110ページ
↓コードはこんな感じ
↓画面表示はこんな感じ
この「一定時間ごと」の方がOKしたらずーっと出っぱなしになるので
ブラウザを閉じるタイミングをみはからわないといけなかったです
思ったより遅刻した生徒さんは少なかったですが
バタバタしました。
途中から授業を拝聴いたしました。
▼文字数の取得 教科書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したらずーっと出っぱなしになるので
ブラウザを閉じるタイミングをみはからわないといけなかったです

2014年07月22日(火) | 新・職業訓練-JavaScript- ▲PageTop