基礎プログラミング演習1

連絡先

秋山優: maooon@gmail.com

評価について

• 毎回の課題
• テスト
• 最終課題

注意

Webで検索したコード、友人や先輩に書いてもらったコード、生成AIが出力したコードをそのまま提出する人がたまにいますが、そのような行為は剽窃とみなされ「不可」となります。気をつけてください。AIを活用して勉強するのはもちろんOKです。

課題のプログラムには必ずコメントをつけてください。コメントがついていないプログラムは採点対象外です。小学生でもわかるようにプログラムを説明してください。

第１回　オリエンテーション

• スライド

授業で使用するソフトウェア

以下からダウンロードしてください。ブラウザは必ずFireFoxを使ってください。エディタは好きなもので結構です。授業では（教卓のPCでは）VSCodeを使います。

• FireFox
• VScode

課題の提出方法

1. ycReportsフォルダ内の「基礎プログラミング演習1a(秋山)」（後半学期は1b）というフォルダの中に、「自分の氏名(学籍番号)」というフォルダを新規作成してください。このフォルダが第2回目以降の課題提出用フォルダになります。学籍番号は半角英数です。
2. 各自の課題提出用フォルダの中に、さらに毎授業ごとに「02」「03」・・のようにフォルダを作成し、各回の授業で作成した課題ファイルを保存してください。他の人のフォルダに提出しないよう注意。
3. 学外から自分のPCで課題を提出するためには、学内ネットワークにVPN接続をする必要があります。情報基板センターの学外からの利用(VPN接続)を参考にしてPulse Secureを使ってVPN接続をしてください。
4. VPN接続したら、同じく情報基板センターのネットワークドライブの接続を参考にして、ycReportsフォルダにアクセスしてください。

課題

1. 01というフォルダを作成し、エディタで作成したHTMLファイルを提出しなさい。内容は何でもよい。ファイルを保存する際に、拡張子を「.html」とすること。他人の提出フォルダに入れないように気をつけて下さい。

第2回　HTMLの基礎

今週の目標

• HTMLの概要について理解する。
• 基本的なタグを使ってWebページを作ることができる。

課題

1. 基本的なタグについてWebで調べ、自己紹介ページを作成しなさい。
2. W3CのValidatorで正しくHTMLが書けたか検証しましょう。エラーがなくパスすると、その証をページに貼ることができます。余裕のある方はトライしてみましょう。

参考

• 授業で一緒に書いた自己紹介ページのHTMLタグたち
• HTMLクイックリファレンス

第3回　CSSの基礎

目標

• 基本的なタグを使ってWebページを作成できる（復習）。
• CSSを使ってWebページをデザインすることができる。

参考ページ（とほほ）

課題

先週作成したHTMLファイル（自己紹介ページ）をCSSで装飾しなさい。以下の条件を満たすこと。スタイルは自由に決めてよい。スタイルシートは外部ファイル（.cssファイル）として作成し、提出する際には、HTMLファイル、CSSファイル、画像ファイルを全てアップしてください。

1. まず、自己紹介ページに東京都市大学のロゴを表示します。次に、aタグでロゴ画像を囲んでリンクにし、クリックすると都市大のトップページに遷移するようにリンクを貼りなさい。
2. 指定したid名の要素に任意のスタイルを適用すること（例えば箇条書きの要素（<li>aaa</li>)が３つあるとき、一つ目は背景色が赤、二つ目は青、、、等）。
3. 指定したclass名の要素すべてに任意のスタイルを適用すること。
4. 指定したid名のimg要素について、任意の縦横幅を指定すること。
5. 表組み（時間割）の枠線を自分の好きなように変更してみましょう。
6. グラデーションや透明度を指定すること。
7. その他自分で調べて自由にスタイルを適用すること。
8. W3CのCSS Validationを通してみましょう。パスすると、パスした証としてアイコン（このページの一番下参照）をページに貼ることができるので、頑張ってみてください。

第4回 hello world

今週の目標

• Hello world! のアラートを出すことができる。
• 変数を使ったプログラムを作ることができる。
• 文字列と数値を結合することができる。

課題

ボタンは作らなくてよい。ページが読み込まれたら、順番に実行されるようにすること。

1. Hello world!をアラート表示するプログラムを作りなさい。
2. プロンプト(2つ出す)からそれぞれ名前と学籍番号を入力すると、「〇〇さんの学籍番号はXXですね」とアラート表示するプログラムを作りなさい。
3. プロンプト(2つ出す)からそれぞれ身長と体重を入力すると、「あなたのBMI値は〇〇です」とアラート表示するプログラムを作りなさい。BMIの計算方法はぐぐること。
4. プロンプト（2つ出す）から数字を2コ入力すると、その和、差、積、商、余りをアラート表示するプログラムを作りなさい。入力された値を足し算するには、a = Number(a);のように変数に記憶されている値を数値に変換する。また、割り算の余りは%で求められる。

第5回　関数

今週の目標

• 関数を定義し、ボタンをクリックすると呼び出せるようになる。
• テキストボックスを作り、入力された値を取得(document.getElementById().value)することができる。
• 変数の有効範囲について理解する。

課題

1. テキストボックスを作り、ボタンをクリックすると入力された文字列をそのままアラート表示するプログラムを作成せよ。
2. テキストボックスを3つ作り、学部、学年、名前を入力しボタンをクリックすると、「〇〇さんはXX学部の△△年生ですね」とアラート表示するプログラムを作成せよ。
3. 先週のBMI算出プログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。
   • できたら、cmで入力できるようにすること。
   • できたら、小数点第2位で四捨五入すること。小数点以下を四捨五入するには、Math.round()を用いる。例）alert(Math.round(1.234));
4. 先週の和、差、積、商、余りを求めるプログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。
5. 二次方程式 ax² + bx + c = 0 の解の公式は二次方程式の解の公式に説明があります。係数a, b, cの値をテキストボックスから入力し、ボタンをクリックすると2つの解をアラート表示するプログラムを作成せよ。実数解がない場合はエラーが出てもよい。ルートを求めるには、Math.sqrt();を使う（例：ルート2はMath.sqrt(2);で求められる）。また、xのy乗は、Math.pow(x, y)で求められる。

第６回　条件分岐(1)

今日の目標

• 条件分岐（場合分け）を使ったプログラムを書けるようになる。
  • 比較演算子と論理演算子を使って条件式を書けるようになる。
  • if, else if, else構文をマスターする。

今週の課題

1. BMI判定プログラムを完成させなさい。
   1. BMIの値によって、表示するメッセージを変えなさい。
   2. 身長をセンチメートルで入力した際にも正しい計算結果が得られるようにしなさい。
   3. 算出したBMI値を小数点第二位で四捨五入して表示しなさい（21.67...ならば21.7）。Math.round()を使う。
2. テキストボックスに入力した整数が３で割り切れるなら「FIZZ」を、５で割り切れるなら「BUZZ」を、両方で割り切れるなら「FIZZBUZZ」をアラート表示するプログラムを作成せよ。
3. 条件分岐を使って前回の二次方程式を解くプログラムを完成させなさい。
   • ルートの中（b²-4ac)が0未満　→ 　「実数解がありません」とアラート
   • ルートの中（b²-4ac)が0と等しい　→ 重解なので解を一つアラート
   • ルートの中（b²-4ac)が0より大きい　→ 解を2つアラート

第７回　条件分岐(2)

今週の課題

学期前半の最後です。

1. JavaScriptには、乱数（出鱈目な数）を作る関数があります。alert(Math.random());を実行すると、0以上1未満の乱数をアラート表示します。let n = Math.random();を実行すると、変数nに0~1未満の実数が代入されます。これを利用して、おみくじプログラムを作りなさい。ボタンをクリックすると、生成した乱数の値に応じて「大吉」「中吉」「小吉」「凶」「大凶」のアラートを表示します。0.1未満なら大凶、0.3未満なら「凶」・・・のような感じ。
2. if文を使って、以下のような数当てゲームを作ってみましょう。動作サンプル
   1. ユーザは、テキストボックスに1から100の整数を入力し、ボタンをクリックします。
   2. 正解の数として、Math.random()を使い1から100の乱数を生成しておきます。Math.random()を使って1~100までの乱数を生成するには、例えば以下のように書きます。原理は自分で考えて下さい。

      let rand = Math.floor(Math.random() * (101-1)+1); //1から100の整数をランダムに生成し、変数randに入れる。

   3. 入力された数が生成した乱数より大きければ「もっと小さいよ」、小さければ「もっと大きいよ」とアラート表示します。もし、入力された数が生成した乱数と等しければ、「当たり！」とアラート表示します。
   4. 当てるのに何回かかったかも表示できるようにしましょう（例：「当たり！３回目だよ」）。
   5. テキストボックスに入力された数が1から100の整数ではない場合、「1から100の整数を入力して下さい」とアラート表示するようにしましょう。

      ヒント：乱数の生成は、ボタンをクリックするたびに変わってしまうとまずいので、関数定義(function f(){})の外側に書きます。回数を記憶する変数も同様。

3. テキストボックスから西暦年を入力すると、その年が閏年かどうかをアラート表示するプログラムを作成せよ。条件はできれば１行で書いてみましょう。閏年の条件は以下の通り(Wikipediaより）。わかりづらければ、コンピュータシステムと閏年も参照。
   1. 西暦年が4で割り切れる年は(原則として)閏年。
   2. ただし、西暦年が100で割り切れる年は(原則として)平年。
   3. ただし、西暦年が400で割り切れる年は必ず閏年。

課題2に関しては、採点を考慮して、事前に正解をアラート表示するようにしてください。

第8回　繰り返し(1)

今日の目標

• 繰り返し文を使ったプログラムを書けるようになる。
  • for文、while文、for文を使ってプログラムが書ける。
    • ループ用変数の適切な初期化、条件式作成、インクリメントを行うことができる。

今週から前期後半学期なので、ycreports内の「基礎プログラミング演習1b(秋山)」に各自の氏名、学籍番号を記したフォルダを作り、先週までと同様に提出してください。

今週の課題

ボタンをクリックすると実行されるようにすること。ブラウザ上に値を表示するには、document.write()を使う（いける人はinnerHTMLを使ってみましょう）。

1. 100から0までの整数を降順にブラウザに表示するプログラムを書きなさい。
2. 1~1000までの整数の和を求めるプログラムを書きなさい。
3. 1からNまでの奇数の和をアラート表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
4. テキストボックスに入力された数の約数の個数をアラート表示するプログラムを書きなさい。
5. 1から100までの数を表示するプログラムを書きなさい。ただし、3で割り切れる場合は「FIZZ」、5で割り切れる場合は「BUZZ」、両方で割り切れる場合は「FIZZBUZZ」と（数の代わりに）表示するようにしなさい。
6. 何年か前に世界のナベアツが「3の倍数と3が付く数字の時だけアホになります」というネタをやっていました。1から99までの数字を順に表示し、3の倍数の時、1の位が3の時、10の位が3の時、数字の後に「アホ」と表示してみましょう。できれば論理演算子を使ってif文1個だけで書いてみましょう。
7. テキストボックスに入力された数が素数かどうか判定しアラート表示するプログラムを次の手順で作りなさい。ループから脱出するにはbreak;を使う。
   1. 入力された数について、2から順に（その数-1まで）割り切れるかどうかを試します。
   2. 割り切れたら「素数ではありません」と表示して、break;で脱出します。
   3. 繰り返しが終了した時点でどの数でも割り切れてなければ「素数です」と表示します（ヒント：変数を一つ用意して0を入れます。上の手順の繰り返しの中で、入力された数が割り切れたら（break;で脱出する前に）その変数に1を代入します。繰り返しが終了した時点で、その変数が1であれば「素数じゃないよ」、0であれば「素数だよ」とアラート表示します。）もちろん他のやり方でもOK。動作サンプル

第9回　繰り返し(2)　繰り返しの繰り返し（入れ子）

今日の目標　

• 繰り返しの入れ子を書けるようになる。

今週の課題

ボタンをクリックすると実行されるようにすること。

ピラミッドを建立するには、まずビルを建てるところから始めるとよいでしょう。例えば、横にTCUが10こ並んだ10F建てのビルを建てるには、どのようなプログラムを書けばよいでしょうか。

問題1~3は先週の復習です。問題4~7については必ず二重ループ（繰り返しの入れ子）を使って下さい。

1. 1~100までの整数について、それぞれを2乗した数を表示するプログラムを書きなさい。
2. 1~Nまでの整数のうち3の倍数だけを表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
3. 1~Nまでの整数のうち3の倍数だけを足し合わせた結果をアラート表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
4. 10階建てのTCUピラミッドを建立しなさい。
5. N階建てのTCUピラミッドを建立しなさい。Nはテキストボックスから入力するものとする。
6. 課題5を変更して、逆ピラミッドにしなさい。
7. *テキストボックスに入力された数をnとした時、n以下の素数を全て表示するプログラムを作りなさい。動作サンプル

3F建てのTCUピラミッドと逆ピラミッド

第10回　配列

今日の目標

• 配列を作れるようになる。
• 配列の要素を取得、変更、追加できるようになる。
• 繰り返し文を使って配列を操作できるようになる。

⭐︎⭐︎⭐︎配列の基本⭐︎⭐︎⭐︎

1. 配列の作り方

複数のデータを並べたものを配列と呼びます。変数に数値を代入する場合、一つの変数は一つの数値しか持つことができません。他の値を代入すると、元々記憶していた値は上書きされて消えてしまいます。

配列を使うと、変数に複数のデータを同時に記憶させることができ、色々と便利です。例を見てみましょう。

右辺を見ると、[]（角カッコ）の中に3つの文字列がカンマ区切りで並んでいます。これが配列です。この時、'Alice'や'Bob'を配列の要素と呼びます。上記は、要素数3の配列を作り、変数xに代入したことになります。配列には様々な種類のデータを混在させることができます。配列自体もデータなので、次のように配列を配列の要素にすることもできます。

また、要素が0の空配列を作ることもできます。

2. 配列の要素を取り出す

配列の要素を取り出すにはどうすればよいでしょうか？例えば、最初の配列の中から'Alice'を探し出してアラート表示するには次のようにします。

配列はアパートのようなもので、xというアパートの中が複数の部屋に分かれており、それぞれの部屋にデータ（ここでは'Alicce', 'Bob', 'Carol'）が住んでいると考えるとわかりやすいでしょう。部屋には番号がついていますが、0号室から始まることに注意です。上記のように、x[0]は配列xの0号室に記憶されているデータ（すなわち'Alice'）を意味します。ちなみに、配列の部屋番号のことをプログラミングではindex（添字）と言います。

3. 要素の変更

配列の要素を書き換えるには次のように書き換えるデータを代入します。

'Bob'が上書きされて、'Dave'が新たな要素になりました。

4. 要素の追加

配列に新しい要素を加えるには、配列名.push()を使います（メソッドと呼ばれますが、関数のようなものだと思っておいてください）。

配列名.push(追加したい要素)のように書きます。こうすると、['Alice', 'Bob, 'Carol', '太郎']のように配列の末尾に要素が追加されます。他にも要素を削除したり、選択した範囲の要素を複数取り出したり色々な操作ができるので、必要に応じて調べてみてください。

5. 繰り返しと配列

配列は繰り返し文と組み合わせて使うことが多いです。例えば、最初の配列から要素を一つずつ取り出してアラート表示するには次のように書きます。

ここで、x.lengthは、配列xの要素の数を表しています。ここでは要素が3つあるので、 i < x.length の部分は3 と同じ意味になります。そして、ループ用変数iがx[i]の部屋番号に対応している点がミソです。。

また、例えば1~100の整数を要素とする配列を作るには、let x = [1,2,3,4,,,,,,98,99,100]とすればいいのですが、大変なので、繰り返しを使って次のように書けます。

確認問題

1. 文字列'apple', 'strawberry', 'banana', 'melon', 'qui'を要素とする配列を作りなさい。
2. 1. で作った配列に、文字列'peach'を追加しなさい。
3. 上の配列の2つ目の要素(strawberry)をアラート表示しなさい。
4. 空の配列を作りなさい。
5. 空の配列に文字列'hoge', 'fuga', 'piyo'を追加しなさい。

今週の課題

ボタンをクリックすると実行されるようにすること。

1. 適当な要素を5個持つ配列（['apple', 'banana',・・])という配列を作り、配列の要素を順番にアラート表示するプログラムを書きなさい（5回アラートが出る）。繰り返しを使うこと。
2. 課題1の配列について、逆順にアラート表示するプログラムを書きなさい。繰り返しを使うこと。
3. 次のようなプログラムを書きなさい。
   1. 変数xに0から99までの整数を並べた配列を代入します。繰り返しを使うこと。
   2. 配列の各要素を、それを2乗した数で置き換えます。
   3. 結果の配列をアラートで表示します（99回アラートを出すのではなく、一つのアラートで結果を表示すること）。
4. これまで学習したことを使って、じゃんけんプログラムを作ってください。条件は以下になります。動作サンプル
   1. ユーザが入力したぐーちょきぱーに対して、コンピュータが出した手と比べて勝敗を表示するプログラムです。
   2. ユーザの手はテキストボックスから入力すること。入力は文字列'ぐー'、'ちょき'、'ぱー'でもカタカナでも構いません。ボタンを使ってもOKです。
   3. 相手の手はランダムに決めること。0, 1, 2をそれぞれ'ぐー'、'ちょき'、'ぱー'に割り当てるとすると、Math.random()を使ってどのように0,1,2の乱数を作るかは第7回参照。
   4. 結果（あなたの手は「ぐー」でCOMの手は「ぱー」なので、あなたの負け」）をアラート表示すること。
   5. それ以外のルールについては自由にしてください。変わったルールの場合は説明書きお願いします。
5. **以下の配列numbersの中から素数の配列を作成し、アラート表示するプログラムを書きなさい。alert(result);で配列の要素が一覧表示されます。
   let numbers = [3177, 6191, 123, 7651, 57, 101, 9111, 1111];

第11回　Webサービス　-Open Street Map-

今週の目標

• Open Streat Mapを表示できる
• マーカー等を使うことができる

今週の課題

Open Street Mapを使って地図を表示するページのソースコードを参考にして、練習問題をやってください。

1. テキストボックスから緯度と経度を入力し、ボタンがクリックされると入力された緯度、経度を中心とした地図が表示されるようにしなさい。
2. 同様に、テキストボックスから縮尺率を入力できるようにしなさい。ただし、入力された縮尺率が0以下の場合は1に、21以上の場合は20にするようにすること。
3. 地図上でクリックした点を中心とした地図を再描画するようにしなさい。地図の中心点を変える場合は、地図オブジェクトのsetView()をコールバック関数内で使う。 例えば、地図オブジェクトが変数mapに入っている場合（サンプルコードの場合）は、map.setView(e.latlng, zoom)のようにする。 ここで、e.latlngは緯度経度が入ったオブジェクト、zoomは拡大率を記憶する変数である。
4. 地図上でクリックした点にマーカーを設置し、設置した順に1,2,,,のようにタイトルを表示するようにしなさい（ひんと1：click_callback関数の中に以下のように書くと、マーカーに1が表示される。L.marker(e.latlng).bindPopup(’1’).addTo(map);）。ひんと2：数値を文字列に変換するにはString()を使う。

動作サンプル

第12回 最終課題に向けて　ラジオボタンとチェックボックス

今日の目標

• ラジオボタンやチェックボックスを使ったプログラムを作れるようになる。

今週は、最終課題で何かと使うこともある（であろう）ラジオボタンとチェックボックスについて扱います。

今週の課題

1,2,3はラジオボタン、4はチェックボックスの問題になります。ラジオボタンはどれか一つしか選択できないのに対し、チェックボックスは複数選択可能です。

1. ラジオボタンを使ったサンプルプログラムを改良し（コメントを参考にして繰り返しを使う）、チェックされた性別をアラート表示するプログラムを作成しなさい(あなたの性別はXXですね）。動作サンプルラジオボタンは一つしかチェックできないので、チェックされていた場合、break；を使って繰り返しを抜けるとよいでしょう（なくても動く）。
2. 同様に、チェックされた血液型をアラート表示するプログラムを作成しなさい（あなたの性別はXXで、血液型はYYですね）。上のサンプルを参考に、繰り返しを使うこと。
3. 12星座のラジオボタンを作り、チェックされた星座もアラートするようにしなさい（あなたの性別はXXで、血液型はYY型、星座はZZですね）。
4. チェックボックスを使ったサンプルプログラムを改良し（コメントを参考にして繰り返しを使う）、チェックした果物の合計金額をアラートするプログラムを作成しなさい。valueの値は文字列なのでそのまま足し算するとつながってしまうので、注意。動作サンプル

第13回　innerHTMLを使ってHTMLを書き換える

目標

• JSからHTMLを操作することができる
  • document.getElementById('...').innerHTMLを使い、タグの内容を書き換えられるようになる

キーフレーズ

• document.getElementById('...').innerHTML;

HTMLを操作する方法 document.getElementById().innerHTML

はじめに、HTML中の任意のタグの中身を書き換える方法について説明します。次のようなHTMLがあるとします。

<h1 id='a'> ここが書き変わるよ </h1>

この時、h1タグの中身（すなわち「ここが書き変わるよ」という文字列）を書き換えるには、innerHTMLを使って以下のように書きます。

document.getElementById('a').innerHTML = '書き換わったよ！';

ここで、document.getElementById('a')の部分は、HTML内から'a'というidがついたタグを探してこい、という意味になります。idは一つのページ（HTMLファイル）内で被ってはならないため、一つだけタグが見つかります。その時、.innerHTMLの中には、探してきたタグのタグを除いた部分、すなわち、タグに挟まれた部分が入っています。この場合だと、document.getElementById('a').innerHTMLには「ここが書き変わるよ」という文字列が入ります（alert(document.getElementById('a').innerHTML);で中身が表示されます）。

書き換えるためには、代入を行う=記号を使って書き換えたい内容をinnerHTMLに代入してあげます。

もとの内容を消さずに、値をつなげていくには+=を使います。

これを繰り返すと文字列hogeがつながっていきます。

練習問題

今日習ったinnerHTMLを使ってください。

• 問題1, 2の動作サンプル（下二つは無視してください）。
• 問題3, 4の動作サンプル（一番下は無視してください）。

1. Webページに適当なid名を付けたpタグを作り、ボタンをクリックするとpタグの内容がテキストボックスに入力した文字列に置き換わるようにしなさい。
2. 画像を表示し、ボタンをクリックすると画像が他の画像に切り替わるようにしなさい。また、「元に戻る」ボタンをクリックすると、最初の画像に切り替わるようにしなさい。
   • 画像を表示させるためのimgタグは、divタグで囲ってあげます。その上で、innerHTMLを使ってdivタグの中身（つまりimgタグ）自体を書き換えます。具体的には、imgタグをクォーテーションで囲んでinnerHTMLに代入します。
   • その際、クォーテーションに注意。ダブルとシングルをうまく使うこと。"<img src="hoge.jpg" alt="hoge">"だとhoge.jpg手前のダブルクォーテーションが最初のクォーテーションに対応してしまいエラーになります。"<img src='hoge.jpg' alt='hoge'>"のようにシングルとダブルのクォーテーションを組み合わせて整合性が取れるようにして下さい。
3. コラッツ予想についての問題
   • コラッツの問題と呼ばれる数学の未解決問題があります。コラッツ先生は、任意の正の整数nについて、以下の操作を有限回繰り返すことで最終的にnが必ず1になると予想しました。
   • nが偶数ならば2で割る
   • nが奇数ならば3倍して1を足す
   • テキストボックスに入力された正の整数について、これらの操作を繰り返した過程と、nが1になるまでに何ステップかかったかを表示するプログラムを作成しなさい。
4. コラッツ先生の予想によると、上記の操作を有限回繰り返すことでどのような正の整数も必ず1になるのですが、値によって1になるまでのステップ数は様々です。そこで、1~nまでの整数について、どの数が一番ステップ数が多いのか、また、何ステップかかったかを表示するプログラムを作成しなさい。nはテキストボックスから入力すること。