@bigakubu アートとプログラミングがあればいい。

【JavaScript ハノン】必修パターン②

forを使ってループ

See the Pen for by programmingbird (@programmingbird) on CodePen.

まず本題ではないがlet str=””の部分。strという変数を用意してその中に””(見えにくいかもしれないので補足するとダブルクォーテーション2つ)を入れている。これは「空っぽの文字列」という意味でよく使うので覚えておこう。そして本題のループ(繰り返し処理)を指示するfor (let i = 0; i < 10; i++)の部分、forに続くカッコの中に、セミコロン(;)で区切られて3つの式がある。最初はletでi という変数を用意し初期値として0をセットしている。次はi<10。これはループの終了条件を「iが10未満であるうちは繰り返せ」としているわけだ。最後のi++は、ループ1回やるごとにiを1増やす、という処理(増減式)。iが0の回から始まって、iを1ずつ増やしながら10未満(つまり9のときまで)で繰り返すということは、0,1,2,3,4,5,6,7,8,9と合計10回繰り返すことになる。こういう使い方をする変数(今回の例ではi)をカウンターと呼んだりする。ルールではないが、プログラミングの慣習的にカウンターは1ではなく0から始めることが多い。

繰り返す内容は{}の中に書く。この例では1回繰り返すごとに変数strに■を1つずつ追加していく処理。10回繰り返すことで、strには■が10個連なった文字列ができあがる。test.innerHTML = str でこれをtest(のidが振られたpタグ)に表示している。

for (☆;○;△){ ◇ }
☆…初期値、○…終了条件、△…増減式、◇…繰り返す処理内容

2重のループ

See the Pen for2 by programmingbird (@programmingbird) on CodePen.

ifで条件分岐

Google Ad

Google Ad

Recommend

【プログラミング教材#01】まず「ほぼ完成版」で遊んでみよう!

今日のレッスンの前半は、なんとゲームで遊ぶこと!簡単操作だけどなかなか難しいこのゲームで何点とれるか?競い合ってみましょう。レッスン後半では、JSFiddleというプログラミング練習画面を使って、さっ …

プログラミング教材・指導案

【序文】ゲーム作りは実用的スキルとプログラミング的思考を身につける絶好の教材!

プログラミングなんて自分もやったことないのに、児童生徒たちに教えなくてはいけなくなった。そんな先生へ提案です。プログラミング言語javascriptを使ってゲーム「Flappy Bird」を作ることを授業のテーマにしましょう。ゲームプログラミングは実用的なスキルとプログラミング的思考を身につける絶好の題材です。いきなりゲーム作りなんて難しそう、と思うかもしれません。確かに簡単ではないですが、このサイトでは「教える人」の視点に立った詳しい解説や教材・教案準備に応用しやすいテキストや画像、そしてプログラムのサンプル素材を多く提供しますので安心して始めてみてください。

プログラミング教材・指導案
no image

【JavaScript ハノン】必修パターン①

とりあえずHTML(pタグだけ) See the Pen 最初のHTML by programmingbird (@programmingbird) on CodePen. javascriptは基本 …

プログラミング教材・指導案

【プログラミング教材#06】背景表示と衝突判定をしよう

いよいよ完成間近です。今回は背景画像の表示をしたあと、ゲームの重要な要素である衝突判定を実装します。トリが土管や地面にぶつかったらゲームオーバー!その判定をコードでどう表現すればよいのか、じっくり考え …

プログラミング教材・指導案

【プログラミング教材#05】土管の高さをランダムにしよう

前回の教材でゲームの重要な要素である土管を次々と表示し動かすことができました。今回は土管一つ一つの高さをランダムに変化させることにより、ゲームにバリエーションを持たせてみましょう。ランダム性はプログラ …

プログラミング教材・指導案