スライド - 名城大学

Download Report

Transcript スライド - 名城大学 

第４回学生スタッフ講座
プログラミング講座
～ コピペで学ぶJavaScript ～
情報センター学生スタッフ
丹羽俊徳
松久僚真
2011/11/17
1
目的・内容
• スロット作成を通して,動的なWEBページを作るた
めの基礎を学び,WEBプログラミングを始めるきっ
かけを作る. ---コピペで学ぶJavaScript --–
–
–
–
–
はじめに：JavaScriptって何？
1章：あいさつボタン
2章：カウンター
3章：3枠スロット
4章：スロット完成版（画像つき）
1章
2章
3章
4章
2
JavaScriptって何?
3
JavaScriptって何?
･プログラミング言語
・コンピュータに指示を与えるのに使用する言語
･主にWebサイトに組み込んで使う
・WebサイトはHTMLによって構成される（HTMLについては
補足資料）
・HTMLの中にJavaScript用のタグを書き込むことでWebサイト
上で動作する
･図のようにユーザーの操作によってWebサイトを変化
させることができる
JavaScriptを利用したWebサイトの例
（文字を打ち込むと候補が表示される）
4
メリット
･動きのあるページをつくることができる
･ブラウザ(IE,Chromeなど)さえあれば動作する
･Webサーバの設置者側で特別な設定は不要
･メモ帳だけで開発可能
･ライブラリがたくさん
‐他人がつくったよく使う複数のプログラムを、再利用可能な形でひとまとまりにしたもの‐
デメリット
･ブラウザによって動作が異なることも
･動作速度は遅い
5
配布資料説明(1/3)
• 1章：あいさつボタン
あいさつボタンをクリックするとHello world の文字が現れる
–01-HelloJavaScript.html:
ページの見栄え、ボタンの配置を行う。
• 2章：カウンター
スタートボタンを押すと数字がカウントされ○ボタンで止まる
–02-counter.html:
表示欄、停止ボタンなどを表示。
6
配布資料説明(2/3)
• 3章：3枠スロット
– 3つの表示部分と当たり外れの判定を持つスロット
– 03-slot.html:
ボタンの配置などの設定,03-slot.jsファイルを呼び出
す
7
配布資料説明(3/3)
• 4章：スロット完成版（画像付き）
3章に画像を付加したもの
– 04-image-slot.html：
初めにこのファイルが読み込まれ04-image-slot.js, 04-imageslot.cssが呼び出される
– 04-image-slot.css:
ボタンの配置などレイアウトについて記述してある
– imgフォルダ:
ページで使われる画像
8
どうやって開発するの?
9
開発するには
テキストエディタ(メモ帳や秀丸)とブラウザがあれば開発できます
10
HTMLのページについて
• WebページはHTMLという言語で書かれています。
–
–
–
–
–
書いた文字をタグで囲んで文書をレイアウト
<タグ名></タグ名>という構成
WebサーバにHTMLファイルを置いてページを公開
HTML単体では動きのあるページは作れない
JavaScriptを使ってHTMLに動きを付ける
<html>
<head>
<title>ウィンドウタイトル</title>
</head>
<body>
<h1>名城大学</h1>
名城大学は...<br/>
<img src="meijo-a.png" width="100"
height="100"/><br/>
<a href="http://www.meijo-u.ac.jp/index.html">
名城大学へのリンク</a><br/>
</body>
</html>
11
JavaScriptの書き方(1/3)
◇JavaScriptには２通りの記述方法があリます
①HTML内部に記述する方法
• scriptタグの内部に直接記述する
1-hello_1.html
②外部ファイルに記述する方法
• JavaScriptファイル（以下jsファイル）を別個に作成し
てHTMLから読み込む(拡張子は「.js」)
1-hello_2.html
1-hello_2.js
12
JavaScriptの書き方(2/3)
①HTML内部に記述する方法
<html>
<head>
</head>
<body>
<script type="text/javascript">
alert(“Hello”);
</script>
</body>
</html>
13
JavaScriptの書き方(3/3)
②外部ファイルに記述する方法
ファイル名を間違えると動作しないので注意
HelloJavaScript.html
<html>
<head>
<title>Hello, world!</title>
</head>
<script src="01-HelloJavaScript.js"
type="text/javascript"></script>
<body>
<input type="button" id="aisatsu" value="
あいさつ">
</body>
</html>
01-HelloJavaScript.js
window.onload = function(){
var aisa = document
.getElementById(“aisatsu”);
aisa.onclick = function(){
alert("Hello, world!");
};
};
14
JavaScriptの書き方(今回)
◇今日は②に統一
②外部ファイルに記述する方法
• JavaScriptファイル（以下jsファイル）を作成して読み
込む(拡張子は「.js」)
1-hello_2.html
1-hello_2.js
15
実際に
やってみましょう
1章：あいさつボタン
16
HTMLファイルを開いてみる
･HTMLファイル「HelloJavaScript.html」をブラウザで開いて下さい。
「HelloJavaScript.html」をダブルクリック
･「あいさつ」というボタンを押してみて下さい
･何も起きませんよね?
では、jsファイルを作り
ボタンを押したらHello,World!が表示されるようにしよう
次へ
17
ステップ1:JavaScriptファイルを作る
･「メモ帳」を開いてください
「スタート」→「すべてのプログラム」→「アクセサリ」
･「01-HelloJavaScript.js.txt」を開いて、内容をす
べてコピーしてメモ帳に貼り付けてください。
18
ステップ2:ファイルを保存する
• 「名前を付けて保存」を行います
– ファイルを保存するフォルダは「HelloJavaScript.html」と同じ
– ファイルの名前は「01-HelloJavaScript.js」
19
ステップ3:jsファイルを参照する
• メモ帳か秀丸で「HelloJavaScript.html」
を開いてください。
• 8行目の「ファイル名を入力」を
「01-HelloJavaScript.js」に変えてくださ
い。
• 大文字と小文字、拡張子に注意。
20
ステップ3:動作を確認
・プログラムを書いて保存したらWebブラウ
ザに戻ってF5キーを押してページを更新
（「HelloJavaScript.htmｌ」を更新）
･もう一度「あいさつ」ボタンを押してください
･動作しましたか?
正常に動作する方は
Hello,World!の文字が
表示されます
イベント駆動します
21
イベント駆動
ページの読み込みやボタンのクリック、キーボード操作な
どの様々なイベントに反応してページを書き換えたりする
ことができる
[ イベントの例]
1.window.onload → ページを読み込んだ時
2.(ボタン等の要素).onclick →ボタン等をクリックした時
では、ソースコードの中身について勉強しましょう
次へ
22
基本的なプログラム1
• function(){ }
– 複数の処理を一つにまとめる
– {}内のプログラムをひとまとまりにする
• var 変数名;
– 変数を宣言する
• データに対して名前ラベルをつけたもの
– aisaという変数名を宣言するときはvar aisa;
※詳しくは補足資料を参照
23
基本的なプログラム2
• document.getElementById(“要素のid”);
– HTML内にid付きで書いた要素を取得する
• alert(“文字列”);
– “”内の文字を別ウィンドウで表示させる
24
ボタンアクション～プログラム～
• aisa.onclickがボタンを押したときの動作
HelloJavaScript.html
<input type="button" id="aisatsu" value="あいさつ">
01-HelloJavaScript.js
window.onload = function(){
var aisa = document.getElementById('aisatsu');
aisa.onclick = function(){
alert("Hello, world!");
};
};
25
ステップ4:もう一度動作を確認
・ブラウザに戻ってください
（「HelloJavaScript.htmｌ」を実行）
･もう一度「あいさつ」ボタンを押してください
Hello,World!の文字が
表示されます
イベント駆動します
26
次はカウンター
を作りましょう
2章：カウンター
27
カウンターの詳細
• 1秒ごとに更新されるストップウォッチ
• 最初表示部分は「0秒」
• 「スタート」ボタンが押されたら
– 「スタート」ボタンは押せなくする。
– 1秒ごとに表示部分の数値を増やしていく(タイマー処
理)
• 「○」ボタンが押されたら
– 表示部分の数値を増やす処理を停止する
(タイマー処理の停止)
28
カウンターを作りましょう
1.開いているメモ帳は閉じて下さい
2.「02-counter.html」をブラウザとメモ帳で開いて下さい
3. 「02-counter.ｊｓ」は既にありますので開いてみてください。
4.次に配布資料「startボタン.txt」の内容を
jsファイルの12行目のコメントの下に
コピーして保存してください。
5.ブラウザの更新ボタンを押してください。
次へ
では、ソースコードの中身について勉強しましょう
29
カウントアップ～スタートボタン～
• “startButton.onclick”でスタートボタンが押され
たときに実行される関数を設定する
02-counter.html (20行目あたり)
<input type="button" id="start" value="スタート">
02-counter.js (23行目あたり)
var startButton = document.getElementById('start');
startButton.onclick = function(){
startButton.disabled = true;
timer = setInterval(function(){
counter.value = num + ‘秒’;
num++;
}, 1000);
}
<input type="button" id="start" value="スタート">
30
カウントアップ～開始ボタン～
• startButton.disabled = false; のfalseを
trueに書き換えてください。
• startButtonが押せなくなります。
02-counter.html (23行目あたり)
startButton.onclick = function(){
startButton.disabled = true;
var num = 0;
timer = setInterval(function(){
num++;
counter.value = num + ‘秒’;
}, 1000);
}
31
カウントアップ～開始ボタン～
• startButton.disabled = true; はスタートボタ
ンを押せないようにする
• setInterval(function(){ }, 1000)は1秒(1000
ミリ秒)ごとに呼び出される
02-counter.js (23行目あたり)
startButton.onclick = function(){
startButton.disabled = false;
var num = 0;
timer = setInterval(function(){
num++;
counter.value = num + ‘秒’;
}, 1000);
}
32
カウントアップ～停止ボタン～
• 配布資料「stopButton.txt」の内容をjsファイルに
コピーして挿入してください。
02-counter.js (25行目あたり)
stopButton.onclick = function(){
clearInterval(timer);
stopButton.disabled = true;
startButton.disabled = false;
}
33
カウントアップ～停止ボタン～
• 停止ボタンが押されたら、タイマーを停止する
02-counter.js (10行目あたり)
var stopButton = document.getElementById(‘button_0');
02-counter.js (25行目あたり)
stopButton.onclick = function(){
clearInterval(timer);
stopButton.disabled = true;
startButton.disabled = false;
}
<input type="button" id="btn_0" value="○">
34
カウントアップ～停止ボタン～
start.onclick = function(){
start.disabled = true;
timer = setInterval(function(){
bar.value = num + ‘秒’;
num++;
• 停止ボタンが押されたら、タイマーを停止する
}, 1000);}
02-counter.js (10行目あたり)
var stopButton = document.getElementById(‘button_0');
02-counter.js (25行目あたり)
stopButton.onclick = function(){
clearInterval(timer);
stopButton.disabled = true;
startButton.disabled = false;
}
スタートボタンが押された時の処理
ストップボタン→押せなくなる
スタートボタン→押せるようになる
35
カウンターに戻って
1.「スタート」ボタンをクリック
（startButton.onclick）
･1秒ごとにカウンタが更新されていく。
2.「○」ボタンをクリック(stopButton.onclick)
･カウンタの更新処理をストップする。
36
次は3枠スロット
を作りましょう
3章:3枠スロット
37
HTMLファイルを見てみる
配布資料の「 03-slot.html 」は以下のようになります
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<script src="./04-slot.js" type="text/javascript"></script>
<title>スロット</title>
</head>
<body>
<table>
< スロット用にレイアウト変更 >
.
<tr>
<td><input id="slot_0" type="text" value="0" size="1"></td>
<td><input id="slot_1" type="text" value="0" size="1"></td>
<td><input id="slot_2" type="text" value="0" size="1"></td>
</tr>
<tr>
<td><input id="button_0" type="button" value="○" size="1"></td>
<td><input id="button_1" type="button" value="○" size="1"></td>
<td><input id="button_2" type="button" value="○" size="1"></td>
</tr>
</table>
<input id="button_start" type="button" value="スタート">
</body>
</html>
.
38
jsプログラムを作る
1. 「3章：スロット3」フォルダを開く。
2. 「04-slot.html」をブラウザで開く。
3. 「04-slot.js」を編集しましょう。
39
jsプログラムを作る
1. 「04-slot.js」を編集しましょう。
– 「init.txt」の内容をコピーして貼付け
– 「startButton.txt」の内容をコピーして貼付け
– 「stopButtons.txt」の内容をコピーして貼付け
40
jsプログラム解説①
document.getElementByIdは全部で7つ！
window.onload = function(){
var startButton = document.getElementById('button_start');
var slots
= [];
slots[0]
= document.getElementById('slot_0');
slots[1]
= document.getElementById('slot_1');
slots[2]
= document.getElementById('slot_2');
var stopButtons = [];
stopButtons[0] =document.getElementById('button_0');
stopButtons[1] =document.getElementById('button_1');
stopButtons[2] =document.getElementById('button_2');
初期設定
// 初期化処理
-htmlで記述したタグを呼び出し
//
var init = function() {
startButton.disabled
= false;
stopButtons[0].disabled = true;
stopButtons[1].disabled = true;
stopButtons[2].disabled = true;
};
var timers = [];
init();//初期化処理
ストップボタンは押せないようにする
スタートボタンは押せるようにする
・
・
・
41
jsプログラムを作る
1. 「04-slot.js」を編集しましょう。
– 「init.txt」の内容をコピーして貼付け
– 「startButton.txt」の内容をコピーして貼付け
– 「stopButtons.txt」の内容をコピーして貼付け
42
・
・
・
jsプログラム解説②
/// スタートボタンが押されたら
startButton.onclick = function() {
stopButtons[0].disabled = false;
stopButtons[1].disabled = false;
stopButtons[2].disabled = false;
startButton.disabled = true;
var setCounter = function(slot) {
// 1-10の間の整数をランダムに生成
var num = Math.ceil(Math.random()*10);
スタートボタンが押された時の処理
ストップボタン→押せるように
スタートボタン→押せないように
スロットスタート
0.1秒ごとにスロットの数をカウントす
る
// タイマーを生成して返す
return setInterval(function() {
// numを1だけ増やす
num++;
if (num > 10) { // numが10より小さければ
num = 1;
// numを1に戻す
}
slot.value = num; // スロットの数をnumにする
}, 100);
// 100ミリ秒毎に実行
}; // setCounterここまで
// 上でつくられたプログラムをslots[0]で実行 100ミリ秒に一回
timers[0] = setCounter(slots[0]);
timers[1] = setCounter(slots[1]);
timers[2] = setCounter(slots[2]);・
}; ///
・
スタートボタンが押されたらここまで実行(startButton.onclick)
・
43
jsプログラムを作る
1. 「04-slot.js」を編集しましょう。
– 「init.txt」の内容をコピーして貼付け
– 「startButton.txt」の内容をコピーして貼付け
– 「stopButtons.txt」の内容をコピーして貼付け
44
・
・
・
// 指定されたスロットをストップして当たり判定を行う関数
var stopSlot = function(index) {
// タイマー停止 つまりスロット停止
clearInterval(timers[index]);
// ボタンが押された状態にする
stopButtons[index].disabled = true;
stopSlotの動作
-スロットの停止
-ストップボタン無効化
-あたりの判定
// 3つのボタンがすべて押されているか判定する
if (stopButtons[0].disabled == true &&
stopButtons[1].disabled == true &&
stopButtons[2].disabled == true) {
// スロットが揃っているか確認する
if (slots[0].value == slots[1].value &&
slots[1].value == slots[2].value) {
alert("あたり");
} else {
alert("はずれ");
}
init(); // 初期化処理
}
}; // stopSlotここまで
ストップボタンが押された時の動作
現在の状態を見て処理を変更
・
・
・
45
・
・
・
// ひとつめのストップボタンが押されたら
stopButtons[0].onclick = function() {
stopSlot(0); // 上で作ったプログラム実行
};
// ふたつめのストップボタンが押されたら
stopButtons[1].onclick = function() {
stopSlot(1);
};
// みっつめのストップボタンが押されたら
stopButtons[2].onclick = function() {
stopSlot(2);
};
}; // プログラムここまで(window.onload)
46
完成！
ブラウザを更新して完成したプログラムを動かしてみま
しょう。
47
次は画像を
をつけましょう
4章:スロット完成版（画像付き）
48
今回はレイアウトの指定にCSSを使います
→CSSの詳しい説明は次スライドで ...
CSSファイルの記述方法
01-hello_2.html
<html>
<head>
<link rel="stylesheet"
href="./05-slot.css" type="text/css">
</head>
<body>
<input id="button_0" class="stop_button"
type="button" disabled="" style="left: 160px;">
<img id="slot_0" src="img/1.png"
class="slot_class" style="left: 95px;">
</span>
<body>
</html>
05-slot.css
.slot_class{
position: absolute;
top: 195px;
width: 170px;
height: 147px;
border: none;
}
.stop_button{
position: absolute;
top: 400px;
width: 53px;
height: 54px;
border: none;
background-image: url('img/stop.png');
}
49
CSSファイルの説明
CSSとは
複数のHTML文書からCSSファイルに関連付けることで、
デザイン変更の際、CSSファイルに手を加えるだけで(そ
のCSSファイルを参照するすべての)HTML文書のスタイル
変更に対応できる
50
CSSがないと….
51
jsプログラムを作る
四角で囲んだ部分のコードを追加してください
var setCounter = function(slot) {
// 1-10の間の整数をランダムに生成
var num = Math.ceil(Math.random()*10);
// タイマーを生成して返す
return setInterval(function() {
// numを1だけ増やす
num++;
if (num > 10) { // numが10より小さければ
num = 1;
// numを1に戻す
}
slots[index].value = num; // スロットの数をnumにする
//<この部分を追加 >
slots[index].src = 'img/' + num + '.png';
.
.
}, 100);
}; // setCounterここまで
// 100ミリ秒毎に実行
画像を切り替える
52
スロットに画像を付ける
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="./05-slot.css" type="text/css">
<script src="./05-slot.js" type="text/javascript"></script>
<title>スロット画像版</title>
</head>
<body>
<画像付スロット用の記述に変更する>
<img src="img/back-wk.jpg">
<input id="start_button" type="button"
style="position: absolute;
left: 597px; top: 55px; width: 108px; height: 105px; border: none;
background-image: url('img/start01.png');">
<input id="button_0" class="stop_button" type="button" disabled="" style="left: 160px;">
<input id="button_1" class="stop_button" type="button" disabled="" style="left: 380px;">
<input id="button_2" class="stop_button" type="button" disabled="" style="left: 600px;">
<img id="slot_0" src="img/1.png" class="slot_class" style="left: 95px;">
<img id="slot_1" src="img/1.png" class="slot_class" style="left: 305px;">
<img id="slot_2" src="img/1.png" class="slot_class" style="left: 515px;">
</body>
</html>
.
.
53
今回作ったもの
1章
2章
3章
4章
•これまで作ったページを一つずつ開いてください。
•今日作ったものは正常に動作していますか?
•コピー＆ペーストでプログラムが作れましたか?
•JavaScriptを使って動的なWebページを作ることがで
きます。
54
全体のまとめ
• JavaScriptによるWebページ開発を通してプログラ
ミングの仕組みについて学んだ。
55
ご静聴ありがとうございました
56