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

連絡先

秋山優: maooonあっとgmail.com

評価について

注意

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

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

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

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

以下からダウンロードしてください。ブラウザは必ずFireFoxを使ってください。エディタは好きなもので結構です。授業では（教卓のPCでは）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の基礎

今週の目標

課題

  1. 基本的なタグについてWebで調べ、自己紹介ページを作成しなさい。以下を含むこと。
  2. Webページが正しい文法で書かれたかをW3CのValidatorで検証します。エラーがなくパスすると、その証をページに貼ることができます。

参考

第3回　CSSの基礎

目標

参考ページ（とほほ）

課題

先週の分と合わせて提出してください。

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

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

第4-5回 hello world

今週の目標

スライド

課題

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

  1. Hello world!をアラート表示するプログラムを作りなさい。
  2. プロンプト(2つ出す)からそれぞれ名前と学籍番号を入力すると、「〇〇さんの学籍番号はXXですね」とアラート表示するプログラムを作りなさい。
  3. プロンプト(2つ出す)からそれぞれ身長と体重を入力すると、「あなたのBMI値は〇〇です」とアラート表示するプログラムを作りなさい。BMIの計算方法はぐぐること。動作サンプルはこちら。
  4. プロンプト（2つ出す）から数字を2コ入力すると、その和、差、積、商、余りをアラート表示するプログラムを作りなさい。入力された値を足し算するには、a = Number(a);のように変数に記憶されている値を数値に変換する。また、割り算の余りは%で求められる。
  5. 簡単なお買い物プログラムを作ります。動作サンプルはこちら。
    1. 商品をいくつ購入するかをプロンプトから入力させる（「りんご(100円)をいくつ買いますか？」→ ユーザは例えば「3」を入力。
    2. 商品の数（3つくらい？）だけ繰り返す(入力された個数は変数に代入する)。
    3. 各商品の数と価格から合計金額を計算し、変数に代入する。
    4. 「合計金額は〇〇円です。」とアラート表示する。

第6回　関数とイベント

今週の目標

解説

説明はこちら

課題

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


正当なCSSです!