JavaScript/繰り返し文
久々にブログを書く気になったので書こうと思う。
ブログのモチベーション保つの難しいよ〜。
夜まで勉強してるとどうしても書くのが深夜になっちゃうし・・・。
う〜ん、ちょっとやり方考えなきゃな。
とりあえず、今日はJavaScriptの繰り返し文について書こうかなと思う。
ここ一週間はTECH::EXPERTの中間試験、模試、本試験ばっかりでなかなか新しい知識がなかったんだけど、久々に。
ちょっと基礎を飛ばし気味になるけど、解説の中で説明するから許して。
ちなみにhtmlファイルの中の記述は下記で進めます。
htmlファイルの編集はしません。
ファイル名:blog.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="blog.js">
</script>
</body>
</html>
今回は以下のような仕様のものを作るよ。
・JavaScript上で英数国理社5教科それぞれの点数を打ち込む。
・それを足し合わせた合計点をhtml上のコンソールに表示。
・合計点に応じてA、B、Cのランク付をする。
・合計点＝500点⇨Aランク
・300<=合計点<500⇨Bランク
・合計点<300⇨Cランク
・ランクの結果もhtml上のコンソールに表示
ちなみに実行結果の様子と、コンソール画面は以下の画像みたいな感じになります。
htmlファイルをブラウザ上で開いて、F12を押すとコンソール画面に入れます。
色々と長くなったので、いつものごとくコードをどん。
var subjects=[
{subject: "英語" , score: 50 },
{subject: "数学" , score: 50 },
{subject: "国語" , score: 50 },
{subject: "理科" , score: 50 },
{subject: "社会" , score: 50 },
]
function rank_judge() {
var total_score=0
for (var i = 0 ; i < subjects.length ; i++){
total_score = total_score + subjects[i].score
}
console.log(`合計点は${total_score}点です。`)
if (total_score === 500){
console.log("ランクはAです。")
}else if(total_score >= 300 && total_score < 500 ){
console.log("ランクはBです。")
}else{
console.log("ランクはCです。")
}
}
rank_judge()
順繰りに解説していきます。
var subjects=[
{subject: "英語" , score: 50 },
{subject: "数学" , score: 50 },
{subject: "国語" , score: 50 },
{subject: "理科" , score: 50 },
{subject: "社会" , score: 50 },
]
まずここ。
配列subjectsの中にハッシュがある状態です。
JavaScriptの場合は、変数を定める際にvarという単語を入れます。
あとはrubyと完全に同じ。
配列sabjectsは順番で値を管理します。
subjects[2]={subject: 国語, score: 50}となります。
このハッシュの中に入っている値を取り出す場合は、
subjects[2].scoreと記載します。この場合は国語の50点という値が返ってきます。
function rank_judge()
次にこの記述。
rubyでいうところのdefに当たります。
独自のメソッドを作れますよっていう便利構文です。
見切れちゃってますけど、メソッド全体を{ }で囲む必要があります。
( )内は引数です。今回は使いません。盛り込みたかった・・・・。
var total_score=0
for (var i = 0 ; i < subjects.length ; i++){
total_score = total_score + subjects[i].score
}
次にfor文。rubyではeach文がよく使われましたが、for文で記載しています。
var total_score=0は、教科の合計点数を出すために変数total_scoreを作成し、0点と定義しています。
3行目では、「変数iを0として定義し、配列の値の数までiを増やし続けろ」と命令しています。i < subjects.lengthの意味合いを理解できるかどうかが肝でしょうか。
4行目では、「0点から始まったトータルスコアに対して、繰り返すたびに教科ごとのスコアを和算しろ」という意味になります。
subjects[ i ].scoreの意味を理解することが大事です。
繰り返すたびにiは0から1ずつ増えていくので、最終的に英数国理社全てを読み出すことになります。.scoreにより、その時の配列からscoreキーに入っている値を読み出して、total_scoreに和算することになりますね。
if (total_score === 500){
console.log("ランクはAです。")
}else if(total_score >= 300 && total_score < 500 ){
console.log("ランクはBです。")
}else{
console.log("ランクはCです。")
}
よくあるif文ですね。
ほとんどrubyとおなじ。
elsif ではなくてelse ifと記述するところ、条件を都度( )で覆うところ、
実行処理を{ }で覆うところが違うところでしょうか。
ほとんど同じ感覚で使ってます。
最後の文
rank_judge()
一番最初にfunctionによるメソッドとして定義したものは、
実行するためにこうやって記載して呼び出してあげないと動いてくれません。
これもrubyと一緒ですね。
今回は引数を用いないので、( )の中は何もなしです。
こんなところかぁ・・・。
JavaScriptに関しては、概ねrubyの基礎があれば同じ感覚で使えるんじゃないかなと思います。
うおおおおおおお眠い、眠いぞ。
明日は正規表現を書きたい・・・。
意味わからんのじゃ・・・正規表現は・・・。苦手なんじゃ・・。
