ウェブデザイン演習

課題の提出方法

1. ycreportフォルダに「ウェブデザイン演習(秋山)」というフォルダがあるので、そこに「自分の名前(学籍番号)」を記したフォルダを作ります
2. 作成したフォルダの中に、o02のように授業毎にフォルダを作り、各回の課題で作成したファイルを保存します

評価について

• 毎回の課題(50点)
• 最終課題(50点)

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

上記の課題の提出方法をよく読み、以下の練習問題を来週の水曜日(9/27)までに提出して下さい。

現時点での理解度を測るための練習問題

1. 好きな食べ物について見出しと箇条書きを使ったHTMLファイルを作り、Webブラウザで表示できることを確認せよ（ex1-1.htmlを提出）
2. ファイルを読み込むと「こんにちは！」とアラート表示するJavaScriptファイル（以下jsファイル）とHTMLファイルを作成し、ブラウザで動作を確認せよ(ex1-2.htmlとex1-2.jsを提出。もしくは、jsはHTMLに含めてもよい。以下同様）
3. ボタンをクリックすると「こんにちは！」とアラート表示するjsファイルとHTMLファイルを作成し、ブラウザで動作を確認せよ（ex1-3.htmlとex1-3.jsを提出）
4. ボタンをクリックすると、1から100までの整数が改行つきでブラウザに表示されるようにせよ。ただし、3で割り切れる時はFIZZ、5で割り切れる時はBUZZ、両者で割り切れるときはFIZZBUZZと表示されるようにせよ（ex1-4.htmlとex1-4.jsを提出）

第２回　JavaScriptの復習その１-変数、及びイベントと関数-

今日の目標

• 変数について理解し、変数と文字列を連結することができる
• イベントモデルと関数について理解し、ボタンをクリックすると関数が実行することができる
• テキストボックスに入力された値をdocument.getElementById()を使って取得することができる
• innerHTMLを使うことができる

練習問題

課題の提出ですが、それぞれ一つのHTMLファイルとJSファイルにまとめて下さい（一つのページの中で、練習問題１、２、３のように分ける）

1. 「0にする」「1増やす」「1減らす」「2倍する」「1/2する」というボタンを作り、それぞれのボタンがクリックされるとその結果をアラート表示するプログラムを作成せよ。ただし、初期値は0とする。
2. テキストボックスを作り、ボタンをクリックすると「こんにちは！〇〇さん」とアラート表示するプログラムを作成せよ。
3. ボタンをクリックすると、「現在〇〇〇〇年△月×日です」とアラート表示するプログラムを作成せよ。現在時刻、月、日の取得方法はぐぐって調べること。
4. 画像を表示し、changeボタンをクリックすると別の画像に変わるようにせよ。また、resetボタンをクリックすると元の画像が表示されるようにせよ。
   • imgタグはdivタグで囲み、divタグにidを指定する。
   • document.getElementById().innerHTMLを使う。

第３回　JavaScriptの復習その２-条件分岐-

今日の目標

• 条件分岐(if、else if, else)を使ったプログラムを作ることができる

練習問題

1. テキストボックスに入力された数値が2の倍数であれば「2の倍数」、3の倍数であれば「3の倍数」、2の倍数かつ3の倍数であれば「2と3の倍数」、それ以外であれば「2の倍数でも3の倍数でもありません」とアラート表示するプログラムを作成せよ。ボタンをクリックすると実行されるようにすること。
2. おみくじプログラムを作成せよ。ボタンをクリックすると乱数が発生し、乱数が0.1未満であれば「凶」、0.1以上0.33未満であれば「小吉」、0.33以上0.66未満であれば「中吉」、0.66以上であれば「大吉」とアラート表示されるようにすること。乱数の生成方法はぐぐること。
3. 先週の練習問題1を改良し、値が10を超えたら0に初期化されるようにせよ。
4. テキストボックスに入力された数値が0より大きければ「正の数です」、0より小さければ「負の数です」、それ以外であれば「0です」とアラート表示するプログラムを作成せよ。ボタンをクリックすると実行されるようにすること。
5. テキストボックスを2つ作り、それぞれに入力された数のうち大きい方をアラート表示するプログラムを作成せよ。両者が等しい場合は「同じ値です」とアラート表示すること。ボタンをクリックすると実行されるようにすること。

第４回　JavaScriptの復習その３-繰り返し-

今日の目標

• 繰り返し(for文、while文)を使ったプログラムを作ることができる

練習問題

1. while文を用いて、0から10までの数字の中で、偶数のみを「0, 2, 4, 6, 8, 10」とアラート表示するプログラムを作成せよ。ボタンをクリックすると実行されるようにすること（以下同様）。
2. for文を用いて、0から10までの数字の中で、奇数のみを「1, 3, 5, 7, 9」とアラート表示するプログラムを作成せよ。
3. 1から100までの整数を表示するプログラムを作成せよ。ただし、2で割り切れる場合はFIZZ、3で割り切れる場合はBUZZ、両者で割り切れる場合はFIZZBUZZを数の代わりに表示すること。
4. 1からNまでの積を求めるプログラムを作成せよ。ただし、Nはテキストボックスから入力するものとする。
   1. まず、1から5までの積を求めるプログラムを書く（計算結果を記憶する変数を用意する）。
   2. 次に、上記を繰り返しを使って書く。規則的に変化する部分を変数にする。
   3. 最後に、「1から5」の「5」の部分をNに置き換える。
5. *テキストボックスに入力した数が素数かどうかを判定するプログラムを作成せよ。繰り返しのループから抜けるにはbreak;を使う。

第５回　JavaScriptの復習その4-数当てゲーム-

先週までの積み残しがある方はそれをやってもらってもよいです。

練習問題

数当てゲームを作ってみましょう。

• テキストボックスに1から100の整数を入力させ、ボタンをクリックさせます。
• Math.random()を使って、1から100の乱数を生成します（作り方はぐぐること、、というのも不親切なので、以下のように書きます。原理はググって理解してみて下さい）。
  • var rand = Math.floor(Math.random() * (101-1)+1); //1から100の整数をランダムに生成し、変数randに入れる。
• 入力された数が生成した乱数より大きければ「もっと小さいよ」、小さければ「もっと大きいよ」とアラート表示します。
• もし、入力された数が生成した乱数と等しければ、「当たり！」とアラート表示します。その際、当てるのに何回かかったかも表示できるようにしましょう（例：「当たり！３回目だよ」）。
• テキストボックスに入力された数が1から100の整数ではない場合、「1から100の整数を入力して下さい」とアラート表示するようにしましょう。
• ヒント：乱数の生成は、ボタンをクリックするたびに変わってしまうとまずいので、関数定義(function hoge(){})の外側に書きます。回数を記憶する変数も同様。

第６回　JavaScriptの復習その5-配列-

今日の目標

• 配列の概念について理解する
• 配列を生成し、配列の要素を参照できるようになる

練習問題

1. prompt()を使って6つの名前を入力してもらって配列に入れ、その中から3つずつ2回に分けてalert()で表示するプログラムを作成せよ。
2. prompt()を使って5つの文字列を入力してもらい、辞書順に1つずつalert()で表示するプログラムを作成せよ。ヒント: sort()メソッドを使うことができる。
3. 下記のプログラムをex6-3.html, ex6-3.jsに作成し、時間を計測せよ。
4. 下記のプログラムを改良し、小文字アルファベットを使った英数字3桁の総当たりプログラムをex6-4.html, ex6-4.jsに作成し、時間を計測せよ。
5. 下記のプログラムを改良し、大文字アルファベットも使った英数字3桁の総当たりプログラムをex6-5.html, ex6-5.jsに作成し、時間を計測せよ。
6. 数字3桁でなく、数字6桁を総当たりするプログラムをex6-6.html, ex6-6.jsに作成し、時間を計測せよ。

• bruteforce.html
• bruteforce.js

第８回 CSSとJavascript

今日の目標

• スタイルシートを用いてページを装飾できる
• JavaScriptでCSSを操作することができる

教材

練習問題

1. 教材の第６回 2-1-1以下をよく読み、自己紹介ページをCSSで装飾しなさい。以下の条件を満たすこと。スタイルは自由に決めてよい。
   1. 指定したid名のdiv要素にスタイルを適応すること
   2. 指定したclass名のdiv要素すべてにスタイルを適応すること
   3. 指定したid名のdiv要素の中にあるp要素にスタイルを適応すること
   4. カーソルが乗っている要素にスタイルを適応すること
   5. 未訪問のリンク要素にスタイルを適応すること
   6. 訪問済のリンク要素にスタイルを適応すること
   7. グラデーションや透明度を指定すること
2. 上記の自己紹介ページにテキストボックスとボタンを作り、ボタンをクリックすると指定したclass名の要素の文字色をテキストボックスに入力した値（redなど）に変更するようにしなさい。
3. リセットボタンを作り、クリックすると文字色が黒に初期化されるようにしなさい。

できる人は問題2,3まで進んで下さい。

第９回　タイマー

今日の目標

• タイマー関数(setTimeout()とsetInterval()を使えるようになる

練習問題

1. スタートボタンを押してから3秒後に1回だけ「3秒経過！」とアラートで表示するプログラムを、setTimeout()を使って作成しなさい。
2. スタートボタンを押してからから3秒毎に「3秒経過!」とアラートで表示するプログラムを、setInterval()を使って作成しなさい。 また、ストップボタンを押すと止まるようにしなさい。
3. テキストボックスから文字列を入力してボタンを押すと、その文字列をページ内に予め用意したp要素内に1秒ごとに1文字ずつ表示するプログラムを作成しなさい。 例えば、テキストエリアに「tcu」と入力してボタンが押された場合、 1秒目に「t」、2秒目に「tc」、3秒目に「tcu」とp要素に表示される。
   • ヒント1:文字列のn文字目を取り出すためには、charAt()を使う。使い方は自分で調べてみましょう。
   • ヒント2:p要素内に文字を表示するには、document.getElementById('...').innerHTMLを使う。以下、サンプルコード。
     (html)
     <p id='sample'></p>
     (js)
     var str = 'tcu'; //変数strに文字列「tcu」を代入する
     document.getElementById('sample').innerHTML = document.getElementById('sample').innerHTML + str.charAt(0); //「t」が表示される
     document.getElementById('sample').innerHTML = document.getElementById('sample').innerHTML + str.charAt(1); //「tc」が表示される
     document.getElementById('sample').innerHTML = document.getElementById('sample').innerHTML + str.charAt(2); //「tcu」が表示される
     
     のように、文字列を連結していく。
4. 1. 画像ファイルを２枚用意します。
   2. HTMLファイルの中のimgタグをid属性付きのdivタグで囲んで<div id=”...”><img...></div>という形にし、１枚目の写真を表示させます。
   3. 上記のdivタグの中身（１枚目の画像ファイルのimgタグ）を２枚目の画像のimgタグに書き換える関数を作りなさい。document.getElementById('...').innerHTMLを使い、imgタグを代入する。画像ファイルを切り替えるボタンを作り、ボタンをクリックすると画像ファイルが切り替わるようにすること。
   4. setTimeout()を使って、画像ファイルを切り替えて３秒たつと自動的に元の写真に戻るボタンを作りなさい。
5. ボタンをクリックすると、画像が１秒毎に拡大するようにしなさい。予め、imgタグにwidth='100'のようにサイズを指定しておくこと。
   • ヒント1:setInterval()を使う。
   • ヒント2:imgタグ内のwidth属性の値を取得するにはNumber(document.getElementById(’...’).getAttribute(’width’));を使う。width値を変更するには、document.getElementById(’...’).setAttribute(’width’, 変数);を使う。
   • ヒント3:取得したwidth値を代入する変数は、関数の外でグローバル変数として宣言しておくこと。
6. 練習問題6について、width値が500を超えたらタイマーが停止するようにしなさい。clearInterval()を使う。

第１０回　Webサービス　APIを使う?Google Map再び?

今日の目標

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

練習問題

1. 以下のサンプルコードをダウンロードし、都市大学を中心としたGoogle Mapを表示しなさい。
2. 以下のサンプルコードをダウンロードし、Google Mapを表示し、地図上でクリックした場所の緯度経度をアラート表示するようにしなさい。
3. 以下のサンプルコードをダウンロードし、Google Mapを表示し、地図の中心にマーカーを設定しなさい。
4. Google Mapを表示し、地図上でクリックした任意の場所にマーカーを設定しなさい。その際、マーカーに"1", "2", "3"とラベルが設定されるようにしなさい。
   • ラベルは、Markerオブジェクトを生成する際にlabelプロパティとして指定する。その値は文字列でなければならないことに注意（数値を文字列に変換するにはString()などを用いる）。
5. Google Mapを表示し地図上をクリックすると、その場所を中心とした地図が表示されるようにしなさい（そこにマーカーが設定される）。地図の中心を変える場合は、地図オブジェクトのsetCenter()関数を使う。例えば、今回のプログラムだと変数mapに地図オブジェクトが入っているので、map.setCenter(e.latLng);のようにする。

サンプルコード

• HTML（右クリックでソースを開いて下さい）
• 都市大学を中心としたGoogle Mapを表示するJSコード
• 都市大学を中心としたGoogle Mapを表示し、クリックした場所の緯度軽度をアラート表示するJSコード
• 都市大学を中心としたGoogle Mapを表示し、そこにマーカーを設置するJSコード

第１１回 Mathオブジェクト

今日の目標

• 基本的なMathオブジェクトの関数を使うことができる

小数点以下を 切り上げる 切り下げる 四捨五入 する、あるいは平方根やべき乗を求める等、JavaScriptには数学に関わる演算を行う関数があらかじめ用意されています。ここでは、それらの中から代表的な関数について勉強します。

練習問題

1. テキストボックスに実数を入力して、小数点以下を切り捨てた値をアラート表示するプログラムを作りなさい。
2. テキストボックスに”20180112″のような文字列を入力されたら”2018年1月12日”とアラート表示するプログラムを作りなさい。
3. 角度を表す単位には度とラジアンがあります。ラジアンを度に変換する関数toDegrees()と、度をラジアンに変換する関数toRadians()を作りなさい。テキストボックスとボタンを作りそれぞれの関数を呼ぶようにしてください。
4. 1?6までの数値をアラート表示するサイコロプログラムを作りなさい。

第１２回　最終課題

授業で勉強したことを使って、面白いor役に立つWebサイトを制作して下さい。要件は以下の通りです。

最終課題の要件

• トップページにサイトの概要(目的、対象者、概要、捜査方法等)をわかりやすく記載すること
• 繰り返し(for文、またはwhile文)を使うこと
• 条件分岐(if文)を使うこと
• 配列を使うこと
• マッシュアップを使うこと(必須ではないですが、使って入れば加点します)
• その他自分で調べた技術を使っていれば加点
• コードにはコメントとインデントを適切につけ、読みやすいように工夫すること
• 必ず「自力で」やること(パクリ不可)

注意事項(重要)

毎年どこかのWebサイトからコードをパクってくる、または、友達の作品と同じものを提出する人がいます(毎回の課題も同様です)。これらは剽窃と見なされDとなります。必ず、自力でやって下さい。参考にしたサイトや本がある場合、必ずコメントで記載して下さい。友達や先輩に質問するのはよいですが、コードは必ず自分で書いて下さい。

課題の提出

制作したサイトは大学内のWebサーバから公開し、URLを webdesigntcu2018@gmail.com に送って下さい。また、毎回の授業での課題と同様に、ycReportsの自分のフォルダ内にも作成したファイルを置いてください。

締め切り日は7月30日です。