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したらずーっと出っぱなしになるので
ブラウザを閉じるタイミングをみはからわないといけなかったです

JavaScript-練習問題

・・・最終的な問題と同じか不明(↓いきさつ
さらに言うなら、先生の解答と自分のは若干違うので、
これでどうかというのはナゾ(^^;)
▼ループ練習
▼FizzBuzz
▼太り過ぎ?痩せすぎ?
▼あなたは合格?不合格?


●ループ練習 Hello Javascript![改行]を5回表示させてください。
<script type = "text/javascript">
for( i =1 ; i<=5 ; i++){ 
	document.write("Hello Javascript!
"); } </script>
↓画面表示はこんな感じ
2014-07-16-jsQ00.gif

●FizzBuzz
1から50まで順番に数を表示する。
その数が3で割り切れるなら"Fizz",5で割り切れるなら"Buzz",
両方で割り切れるなら"FizzBuzz"と表示する。
要するに"1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz ・・・"と出力される。
<script type = "text/javascript">
for(i = 1;i <= 50; i++){ //1から50まで繰り返し
	if((i % 3 == 0) && (i % 5 == 0)){ //もし(i÷3の余りが0と等しい)かつ(i÷5の余りが0と等しい)なら
		document.write("◎FizzBuzz ",i,"
"); //◎FizzBuzz数字 を表示 }else if(i % 3 == 0){ //もし(i÷3の余りが0と等しい)なら document.write("○Fizz ",i,"
"); //○Fizz数字 を表示 }else if(i % 5 == 0){ //もし(i÷5の余りが0と等しい)なら document.write("●Buzz ",i,"
"); //●Buzz数字 を表示 }else{ //それ以外の場合 document.write(i,"
"); //数字 を表示 } } </script>
↓画面表示はこんな感じ
2014-07-16-jsQ01.gif

●太り過ぎ?痩せすぎ?
体重(kg)と身長(m)からBMIにより肥満度を計算するプログラムを作って下さい。
BMIの計算式は,次のとおりです。
BMI=体重÷身長÷身長
結果を次のように分類して表示して下さい。
BMI結果
30以上肥満
25以上太りぎみ
18.5以上25未満普通
18.5未満やせすぎ
入力データは体重(kg)と身長(cm)です。
出力例:体重30キロで身長100cmの人は肥満
<script type = "text/javascript">
var kg = 30 //体重30kg
var cm = 100 //身長100cm
var m = cm/100; // 身長をmにする
var bmi = kg/m/m //BMI=体重÷身長÷身長

if (bmi >= 30){  //bmiが30以上なら
	document.write("体重" + kg + "キロで身長" + cm + "の人は肥満");
	}else if(bmi >= 25){  //bmiが25以上なら
	document.write("体重" + kg + "キロで身長" + cm + "の人は太りぎみ");
	}else if(bmi >= 18.5){  //bmiが18.5以上なら
	document.write("体重" + kg + "キロで身長" + cm + "の人は普通");
	}else{ //それ以外
	document.write("体重" + kg + "キロで身長" + cm + "の人はやせすぎ");
}
</script>
↓画面表示はこんな感じ
2014-07-16-jsQ02.gif

●あなたは合格?不合格?
3科目(国語・数学・英語)の試験結果から,
合格・不合格を判定するプログラムを作ってください。
以下の基準をひとつでも満たすと,残念ながら不合格です。

30点未満の科目が1科目でも存在する.
3科目の合計点が180点未満である.
出力例 (国語82点,数学73点,英語51点の人の場合) 合格
//3科目(国語・数学・英語)の試験結果から
//30点未満の科目が1科目でも存在する.不合格
//3科目の合計点が180点未満である.不合格
//出力例   (国語82点,数学73点,英語51点の人の場合) 合格

var kokugo = 82;
var suugaku = 73;
var eigo = 51;

if (( kokugo <30 ) || ( suugaku <30 ) || ( eigo <30 )) { //もし 国語30点以下 または 数学30点以下 または 英語30点以下 なら
	document.write("国語"+ kokugo +"点・数学"+ suugaku +"点・英語"+eigo+"点の人の場合【不合格】"); //不合格
}else if( kokugo+suugaku+eigo <=180 ) { //国語+数学+英語が180点以下なら
	document.write("国語"+ kokugo +"点・数学"+ suugaku +"点・英語"+eigo+"点の人の場合【不合格】"); //不合格
}else{  //それ以外なら
	document.write("国語"+ kokugo +"点・数学"+ suugaku +"点・英語"+eigo+"点の人の場合【合格】"); //合格
}
↓画面表示はこんな感じ
2014-07-16-jsQ03.gif



いきさつ(余談ですが) メイン講師から
「来週の16日と17日は就職指導の先生の個人面談により訓練は課題となります。
javascriptによる課題を作成したので、目を通しておいて下さい。」
とメール。
11問ありましたが、最初の2問をやって
3問目の「1から100までの素数を列挙しなさい」で
素数って、なに(?-?)。
・・・そういえば、学校の入口の棚にある「次の人へのエール」という
卒業生たちの言葉を集めた冊子の中に
母ライオンが子ライオンをガケから突き落としている写真で
子ライオンが「素数って?」みたいに言っているのがあったー、と
思い出しました(^^;)

先生に「やってみた?」と言われて
「2問しか分からんかったー。
3問目の“素数”って、何? むずかしー」などと、しつこく言っていると
ついに先生は
「こはる先生に、こんな問題解けるかっ、コノヤローって言われたー(´・ω・`)」と
職員室で問題を作り直していました(^^;)
・・・そんなわけで、内容が一部変更になったようです。
でも意味がわからないのと、ヤヤコシソウなのは私はしてないです(^^;)

↓参考・・・
フリー百科事典『ウィキペディア(Wikipedia)』 素数
素数ってなんですか?約数の意味もわかりやすく教えて欲しいです(Yahoo 知恵袋)
素数を求めるプログラム

JavaScriptその2

昨日に引き続き、JavaScritについて習いました。
↓もくじ ページ内移動
▼アラートを出す(教科書 186ページ)
▼変数について(教科書 53ページ)
▼関数について(教科書 48ページ)
▼配列について(教科書 156ページ)
▼【練習問題1】 1から10までを合計した値を求めよ
▼【練習問題2】 複利計算(配列を使用)

●アラートを出す(教科書 186ページ)
ジャバスクリプトが動かない時はバグがあると言うそうで
そのバグを取ることを「デバッグ」と言うそうです。
バグというのは虫のことで、昔コンピュータの中に虫が
紛れ込んでうまく動かなかったという話から来ている、とのことでした。

デバッグの時に便利なのがアラートで、今、この値が入っているというのを
画面に出すそうです。
2014-07-15-js02.gif
アラートを出して値を確認↓こんな感じ
2014-07-15-js01.gif
コードは↓こんな感じ
<script type = "text/javascript">
var a = "test"; //文字列
var b = 1; //数値
alert(a); //変数 a の値を見ることができる
alert(b); //変数 b の値を見ることができる
document.write(a*b); //文字と数値を掛け算しているのでうなくいかない
</script>
うまく動かない時はアラートを使いましょうとのことでした。


●変数について(教科書 53ページ) 昨日も変数をしましたが、今回も説明がありました。
たぶんポイントはここ↓
2014-07-15-js04.gif
変数に変数を入れることができる?

それから注意点。コードは↓こんな感じ
<script type = "text/javascript">
var a = 1000; 
var b = 500; 
var c =(a+b); //cは1500になっている
document.write(c); 
document.write("
"); var a = 2000; var b = 1000; document.write(c); //cは再計算しないので1500のまま </script>

↓画面はこんな感じ
2014-07-15-js03.gif


●関数について(教科書 48ページ)
これがイマイチわからなかったんですが・・・(^^;)
function 関数名(){
      処理
}
←関数を宣言します。関数名は任意で指定します。
 処理を{ }の間に記述します。
↓コードはこんな感じ
<title>JavaScript
<meta http-equiv = "Content-Script-Type" content = "text/javascript">
<script type = "text/javascript">
//関数の定義 <head>から</head>の間に書きます
function s(a,b){
	var c = a+b; //a+bを定義
	return c; //計算した値を返す
}
</script>
</head>
<body>
<script type = "text/javascript">
var a = 111; 
var b = 222; 
document.write(s(a,b)); //s たし算←足す関数を呼んでいる
</script>
↓画面表示はこんな感じ
2014-07-15-js05.gif

↓複数同じような式を入れる時に便利らしい
<title>JavaScript
<meta http-equiv = "Content-Script-Type" content = "text/javascript">
<script type = "text/javascript">
//関数の定義
function s(a,b){
	var c = a+b; //a+bを定義
	return c; //計算した値を返す
}
</script>
</head>
<body>
<script type = "text/javascript">
var a = 111; 
var b = 222; 
document.write(s(a,b)); //sたし算
document.write("
"); document.write(s(100,1)); document.write("
"); document.write(s(2,5)); document.write("
"); document.write(s(6,8)); </script>
↓画面表示はこんな感じ
2014-07-15-js06.gif

●配列について(教科書 156ページ)
配列名 = new Array () ;
配列名[0] = データ ;
配列名[1] = データ ;
配列名[2] = データ ;
配列名[3] = データ ;
 ・
 ・
 ・
←配列を宣言しデータを代入します。
複数の変数をまとめたようなもので
同じ型の連続的なデータを代入する時に使います。
↓コードはこんな感じ
<script type = "text/javascript">
var a = new Array();
	a[1] = 123;
	a[3] = "abc"; //配列は独立しているので文字数字混在OKらしい
	a[4] = 444; 
	
	for( var i =0 ; i<=4 ; i++){ 
	document.write("a["+i+"] = "+a[i]+"
"); } </script>
↓画面表示はこんな感じ
2014-07-15-js07.gif
0番と2番が指定されていなくても5つになるらしい。
指定されていない部分は「undefined」になっています。


●【練習問題1】 1から10までを合計した値を求めよ
これ、私は分からなかったので、まずは解答から↓
<script type = "text/javascript">
var sum = 0; //合計値 宣言はfor文の上でしておく
for( var i =1 ; i<=10 ; i++){ //1から10まで足していく iをどんどんsumに足す
	sum = sum+i; //sumにiを足していく
	}//ここで計算を閉じる
document.write("合計は",sum,"です
"); </script>
↓画面表示
2014-07-15-js08.gif
電卓で計算しても
1+2+3+4+5+6+7+8+9+10=55
でした。
・・・とはいえ、考え方がよくわからないんですよねー・・・
この解答の合計に至るまでを表示してみる↓
2014-07-15-js09.gif
↓コードはこんな感じ
<script type = "text/javascript">
var sum = 0; //合計値 宣言はfor文の上でしておく
for( var i =1 ; i<=10 ; i++){ //1から10まで足していく iをどんどんsumに足す
	document.write("iは",i,"です
"); sum = sum+i; //sumにiを足していく document.write("sumは",sum,"です
"); }//ここで計算を閉じる document.write("合計は",sum,"です
"); </script>
・・・と、いうことは
考え方としては↓こんな感じ?
繰返
の回数
していること考え方
1 ←まだ足されていない ←まだ足されていない
2 + 2 = 3 1 + 2 = 3
3 3 + 3 = 6 1 + 2 + 3 = 6
4 6 + 4 = 10 1 + 2 + 3 + 4 = 10
5 10 + 5 = 15 1 + 2 + 3 + 4 + 5 = 15
6 15 + 6 = 21 1 + 2 + 3 + 4 + 5 + 6 = 21
7 21 + 7 = 28 1 + 2 + 3 + 4 + 5 + 6 + 7 = 28
8 28 + 8 = 36 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 = 36
9 36 + 9 = 45 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 = 45
10 45 + 10 = 55 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55
・・・・これって、根本的に算数というか、数学が分かってないと
難しい気がする(--;)
そんなわけで、私にはやっぱりプログラムむずかしいなー・・・


●【練習問題2】 複利計算(配列を使用)
これはもうすでに意味がよくわからない↓
フリー百科事典『ウィキペディア(Wikipedia)』 複利(ふくり)

↓とりあえず、こんな感じ
<script type = "text/javascript">
var month = new Array();
	month[0] = 10000; //元金	
var r = 0.1; //利率10%

	document.write("元金"+month[0]+"
"); document.write("利率"+r+"
"); //1ヶ月め m1 = m0 + m0 * r //2ヶ月め m2 = m1 + m1 * r //3ヶ月め m3 = m2 + m2 * r for( i=1; i<=10; i++){ month[i] = month[i-1]+(month[i-1]*r); document.write(i+"ヶ月目"+month[i]+"
"); } </script>
↓画面表示はこんな感じ
2014-07-15-js10.gif

新・職業訓練-JavaScriptに入りました

本日、JavaScriptに入りました。
私も本日、教室に入りました(生徒さんたちと一緒に学習)
教科書は同じでも、先生が違うと授業の進め方も違いますね。

本日やったのは以下の通り↓
記事を書いたら長くなったので、ページ内移動をつけました。
●文字を表示(教科書 42ページ)
<meta http-equiv = "Content-Script-Type" content = "text/javascript">

</head>
<body>
<script type = "text/javascript">
document.write("

ABC

"); //表示するのにdocument.writeを書く </script>
JavaScriptを使う時は、HTMLにメタタグで使用を宣言します。
それからどこに書いても良いけど、今回 body の中に書きます。
document.write(表示内容); で、ページに表示されます。

文字を表示するときは("表示内容")のように「”」で囲みます。

●演算子も使える(教科書 41ページ)
<script type = "text/javascript">
document.write(1+2);  // 1+2の計算ができる、ブラウザでの表示は3
</script>

●使用できる算出演算子(教科書 41ページ)
演算子説明
数値を加算した結果を返します。(たし算)
数値を減産した結果を返します。(ひき算)
数値を乗算した結果を返します。(かけ算)
数値を除算した結果を返します。(わり算)
数値を除算して、余りを返します。(わり算して、その余りの数を返す)

●変数(教科書 53ページ)どの書き方でもOK
変数を宣言してデータを代入する
書き方A変数名 = データ
書き方Bvar 変数名 = データ
書き方Cvar 変数名;
変数名 = データ

<script type = "text/javascript">
var a = 36; //数値代入
var b = 24;
var c = a + b;
document.write(c); //ブラウザの表示は60
</script>

●文字列はつなぐことができる(教科書175ページ)どの書き方でもOK
+や , で 文字列はつなぐことができる
書き方A 例document.write("a="+a)
書き方B 例document.write('a='+a)
書き方C 例document.write("a=",a)
書き方D 例document.write('a=',a)

●if文(教科書58ページ)
条件によって処理を分岐する
if(条件){
   処理
}
( )の条件が、真(true)の場合は{ }内の処理を実行します。
偽(false)の場合は{ }内の処理は実行されません。

●if文 条件によって処理を分岐する(教科書61ページ)
条件によって処理を分岐する
if(条件){
   処理A 条件を満たしたとき
} else {
   処理B 条件を満たさなかったとき
}

●if文 複雑な条件分岐(教科書62ページ)
条件によって処理を分岐する
if(条件A){
   処理A 条件Aが真の場合
} else if (条件B) {
   処理B 条件Aは偽だか、条件Bは真の場合
} else if (条件C) {
   処理C 条件A・Bは偽だが、条件Cは真の場合
}



alse{
   処理Z 全ての条件が偽の場合
}

<script type = "text/javascript">
var k = 2;
if( k == 1){ //Kが1なら
	document.write(100*k,"
"); }else if( k == 2){ //Kが2なら document.write(200*k,"
"); }else{ //1でも2でもなかったら document.write(300*k,"
"); } </script>

●条件を書くための比較演算子(教科書 56ページ)
演算子説明
>a > ba が b より大きい
<a < ba が b より小さい
>=a >= ba が b 以上
<=a <= ba が b 以下
==a == ba と b がと同じ、等しい
!=a != ba が b ではない、等しくない

●条件を書くための理論演算子(教科書 194ページ)
演算子説明
&&AND条件の時につかう。~かつ~
||OR条件の時につかう。~または~

●条件が複雑になってきたら、switch文を使う(教科書 181ページ)
条件値によって処理を分岐する
switch(条件値){
case 条件値A : 処理A ; break;
case 条件値B : 処理B ; break;
case 条件値C : 処理C ; break;
   ・
   ・
   ・
default: 処理Z ;
}
条件値がAの時は、処理A。
条件値がBの時は、処理B。
条件値がCの時は、処理C。
どの条件値にも当てはまらないときは、処理Z
※ break; の記述を忘れないようにしましょう。
<script type = "text/javascript">
var k = 3;
switch(k){
	case 1: document.write(100*k,"
"); break; case 2: document.write(200*k,"
"); break; case 3: document.write(300*k,"
"); break; default: document.write(400*k,"
"); } </script>

●処理の繰り返し(教科書 64ページ)
処理の繰り返し
for ( 初期値 ; 条件; 更新 ){
  処理
}

●算術演算子(教科書 64ページ)
演算子説明
++変数の値に1を加算した結果を返す。インクリメントという。
--変数の値に1を減算した結果を返す。デクリメントという。

<script type = "text/javascript">
for( var i =1 ; i<=5 ; i++){
document.write("

ABC

"); } </script>

<script type = "text/javascript">
for( var i =1 ; i<=6 ; i++){
document.write("JavaScriptの世界へ");
document.write("ようこそ");
}
</script>