プログラムって何？
実際のプログラム
自分で作ってみよう！
解答（サンプル）
プログラムを作ってみよう！
プログラムって何？ → やりたいこと（処理）をコンピュータに分かる形（プログラム言語）で記述した物（プログラム）
チャレンジ１ ： 自分の名前を入力して（処理１）、好きな色で（処理２）、表示してみる（処理３）！
チャレンジ２ ： 好きな素材を選んで（処理４）、指定した回数繰り返し（処理５）、表示してみる（処理６）！
・・結果表示域・・
ここに表示するよ！1 |
ここに表示するよ！2 |
|
|
<![CDATA[
<script type="text/javascript" language="javascript">
//値の保持用に、変数を作成 ここで作成するとどのfunction（処理のまとまり）でも使用できる
// 【 値の代入 】 x = a: x に a を 代入（セット）する
var sname = "";
var scolor = "black";
var ssozai = 0;
var sfor = 0;
//配列に写真をセット 配列に入れておくと、後から、配列の何番目！とうい命令で取り出せる
// 【 配列の定義 】 array = [a,b,c] array という配列に a,b,c という要素をセット
// EX)array[0] は a , array[1] は b ,... 【 要素の場所を表す[x]は、０ から始まる！！（1 ではない！！） 】
var array = ['img/f_flower1390.jpg', 'img/f_flower1392.jpg', 'img/f_flower2381.jpg', 'img/f_floral360.jpg', 'img/f_floral400.jpg', 'img/f_fruit260.jpg', 'img/f_fruit590.jpg', 'img/f_set70.jpg', 'img/f_vegetable350.jpg'];
function change1() {
// *
//値の保持用に、変数を作成 ここで作成するとこのfunctionでのみ使用できる
var id = "shori1";
// *
//”shori1”というidのvalue(値)を取得し、valueという変数にセットする
var value = document.getElementById(id).value;
//valueという変数に入っている値をsnameという変数にセットする snameには、入力した名前がセットされる
sname = value;
// *****
//snameという変数の値を表示する
alert(sname + "\n" + "が入力されました");
// *****
}
// ★ヒント★ チャレンジ３ change1 を コピーして change7 を作ろう！ shori1=>shori7 sname=>smoji
// ★ヒント★ チャレンジ３ 注意：smoji という変数をいろいろなfunction で使いたいので、sname を真似して、 変数 smojiを上の方で作成しておく
function change2() {
var id = "shori2";
var value = document.getElementById(id).value;
//valueという変数に入っている値をscolorという変数にセットする scolorには、選択した色がセットされる
scolor = value;
alert(scolor + "\n" + "が選択されました");
}
function onclick1() {
var id = "test1";
var elem = document.getElementById(id);
//”test1”というidのhtml(Web画面への表示を定義する言語)を以下の内容に置き換える 太字・選択した色・入力した名前
// 【 条件分岐 】 選択された色 が 黄色 と 等しいとき（if)、バックグラウンドの色を青色に変更する（サイズも指定する）（バックグラウンドの色と重なって見づらいので） それ以外の時は(else)、バックグラウンドの色はそのまま
if(scolor == "yellow"){
elem.innerHTML = "<p style='font-weight: bold; width: 200px; height: 50px; background-color: #0000FF; color: " + scolor + ";'>" + sname + "</p>";
}
else{
elem.innerHTML = "<p style='font-weight: bold;color: " + scolor + ";'>" + sname + "</p>";
}
}
function change4() {
var id = "shori4";
var value = document.getElementById(id).value;
//valueという変数に入っている値をssozaiという変数にセットする ssozaiに、(選択した素材の番号 － 1) をセットする
// 【 四則演算 】 足し算 + 、引き算 - 、掛け算 * 、割り算 / などがある 右辺の結果を、左辺に代入する
ssozai = value - 1;
alert("0番目から数えて" + ssozai + "\n" + "が選択されました");
}
function change5() {
// *
var id = "shori5";
// *
var value = document.getElementById(id).value;
//valueという変数に入っている値をsforという変数にセットする sforには、繰り返し数がセットされる
sfor = value;
// ****
alert(sfor + "\n" + "が選択されました");
// ****
}
// ★ヒント★ チャレンジ３ change5 を コピーして change8 を作ろう！ shori5=>shori8 sfor=>sfor2
// ★ヒント★ チャレンジ３ 注意：sfor2 という変数をいろいろなfunction で使いたいので、sfor を真似して、 変数 sfor2を上の方で作成しておく
function onclick2() {
// *
var id = "test2";
// *
var elem = document.getElementById(id);
//配列の要素の ｎ番目を取り出して ssrcという変数へセット ｎ番目は、選択した素材の番号（配列の要素は１番目が[0]になる）
var ssrc = array[ssozai];
// *************************
var shtml = "";
//”test2”というidのhtml(Web画面への表示を定義する言語)を以下の内容に置き換える 選択した素材＊繰り返し数
// 【 繰り返し 】 forは繰り返す命令 { から } までの内容を繰り返す （iという変数が、０から ； i < sfor の条件を満たす間 繰り返す ； iは１づつカウントアップする)
for (i=0; i<sfor; i++) {
// ****
shtml = shtml + "<img src=" + ssrc + " alt='写真' width='50px' height='50px'>";
// ***************************************************************
}
elem.innerHTML = "<p>" + shtml + "</p>";
}
// ★ヒント★ チャレンジ３ onclick2 を コピーして onclick3 を作ろう！ test2=>test3 ・ 素材の写真ではなく文字を繰り返し出したいので、 ssrc の行はいらない ・ sfor=>sfor2
// shtml = shtml + smoji;
</script>
</head>
<body onLoad="document.formp1.shori1.focus()">
<form name="formp1" id="formp1" style="background-color: #A9F5F2;">
<div class="tabbox">
<p class="tabs">
<a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">プログラムって何？</a>
<a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">実際のプログラム</a>
<a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">自分で作ってみよう！</a>
</p>
<div id="tab1" class="tab">
<div id="contentp1" style="background-color: #00FF80;">
<h1 style="margin-bottom: 0px;">プログラムを作ってみよう！</h1>
<h3 style="margin-top: 0px; margin-bottom: 0px;">プログラムって何？ → やりたいこと（処理）をコンピュータに分かる形（プログラム言語）で記述した物（プログラム）</h3>
<h4 style="margin-bottom: 0px;">チャレンジ１ ： 自分の名前を入力して（処理１）、好きな色で（処理２）、表示してみる（処理３）！</h4>
<h4 style="margin-bottom: 0px;">チャレンジ２ ： 好きな素材を選んで（処理４）、指定した回数繰り返し（処理５）、表示してみる（処理６）！</h4>
<!-- ↓ ↓ ↓ ↓ ↓ チャレンジ３ 用の html は この下の部分を参考に 変更して 作ってみよう 必要な部分をコピー＆ペーストして やりたいことに合わせて変更する！！ ↓ ↓ ↓ ↓ ↓ -->
<table border="0" style="margin-top: 0px;">
<tr>
<th colspan="2">チャレンジ１</th>
<th colspan="2">チャレンジ２</th>
<!-- ** -->
<!-- ★ヒント★ チャレンジ３ 上の2行を1行削除して チャレンジ３ にすればいい！ -->
</tr>
<tr>
<td><b>処理１ 名前：</b></td>
<!-- ** **** -->
<!-- ★ヒント★ チャレンジ３ 処理７ 文字： にすればいい！ -->
<!–– 名前を入力する 場所を作成 [textタイプの入力域・初期値に”名前”という文字を出す・内容が変わったとき、”change1”というJavascriptを実行] -->
<td><input type="text" id="shori1" value="名前" tabindex="1" onchange="change1()" /></td>
<!-- * **** * * -->
<!-- ★ヒント★ チャレンジ３ 文字の入力は名前と同じ考え textタイプの入力域・初期値に”文字”という文字を出す・内容が変わったとき、"change7"というJavascriptを実行 にすればいい！ -->
<!-- ★ヒント★ チャレンジ３ 注意：id="" の値は同じものを定義できないのでshori1ではなくshori7などにする！ tabindex="1"は画面でカーソルが飛ぶ順番1から2、3...の順に飛ぶ -->
<!–– ここから A-->
<td style="padding-left: 80px"><b>処理４ 好きな素材：</b></td>
<!–– 素材を選択する 場所を作成 [選択肢タイプの入力域・選択肢は”１”、”２”、・・・・選択肢の番号を素材で指定した物にする・内容が変わったとき、”change4”というJavascriptを実行] -->
<td style="width:100px;">
<select id="shori4" tabindex="4" onchange="change4()">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
</select>
</td>
<!–– ここまで A-->
<!-- ★ヒント★ チャレンジ３ 処理４の定義は、処理１の横に出るのでここにあるが（表形式なので行単位で定義する） チャレンジ３では、処理７の横はないので「ここから」「ここまで」はいらない（削除） -->
</tr>
<tr>
<td><b>処理２ 好きな色：</b></td>
<!-- ** ****** -->
<!-- ★ヒント★ チャレンジ３ 処理８ 繰り返し： にすればいい！ -->
<!–– ここから B-->
<td>
<!–– 色を選択する 場所を作成 [選択肢タイプの入力域・選択肢は”黒”、”赤”、・・・・選択肢の文字色をcolorで指定した物にする・内容が変わったとき、”change2”というJavascriptを実行] -->
<select id="shori2" tabindex="2" onchange="change2()">
<option value="black" style="color: #000000;">黒</option>
<option value="red" style="color: #FF0000;">赤</option>
<option value="blue" style="color: #0000FF;">青</option>
<option value="yellow" style="color: #FFFF00;">黄</option>
<option value="green" style="color: #00FF00;">緑</option>
</select>
</td>
<td style="padding-left: 80px"><b>処理５ 繰り返し：</b></td>
<!–– ここまで B-->
<!-- ★ヒント★ チャレンジ３ 処理２ 色の選択用の定義場所 ・ 処理５ タイトル定義場所だが、チャレンジ３では、「ここから」「ここまで」はいらない（削除） 処理５ の繰り返しの定義を使う！似てるから -->
<!–– 繰り返す数を選択する 場所を作成 [選択肢タイプの入力域・選択肢は”１”、”２”、・・・・選択肢の番号回、素材を繰り返し表示する・内容が変わったとき、”change5”というJavascriptを実行] -->
<td style="width:100px;" >
<select id="shori5" tabindex="5" onchange="change5()">
<!-- * * * -->
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
</td>
<!-- ★ヒント★ チャレンジ３ 繰り返す数の選択は処理５と同じ 選択肢タイプの入力域・内容が変わったとき、"change8"というJavascriptを実行 にすればいい！ -->
<!-- ★ヒント★ チャレンジ３ 注意：id="" の値は同じものを定義できないのでshori5ではなくshori8などにする！ tabindex="5"は画面でカーソルが飛ぶ順番1から2、3...の順に飛ぶ -->
</tr>
<tr>
<td><b>処理３ 表示する1：</b></td>
<!-- ** * -->
<!-- ★ヒント★ チャレンジ３ 処理９ 表示する3： にすればいい！ -->
<!–– 表示する命令を実行する 場所を作成 [ボタンタイプの入力域・”表示”という文字を出す・クリックされたとき、”onclick1”というJavascriptを実行] -->
<td><input type="button" id="shori3" value="表示" tabindex="3" onclick="onclick1()" /></td>
<!-- * **** * * -->
<!-- ★ヒント★ チャレンジ３ 表示する命令は処理３と同じ考え ボタンタイプの入力域・”表示”という文字を出す・クリックされたとき、"onclick3"というJavascriptを実行 にすればいい！ -->
<!-- ★ヒント★ チャレンジ３ 注意：id="" の値は同じものを定義できないのでshori3ではなくshori9などにする！ tabindex="3"は画面でカーソルが飛ぶ順番1から2、3...の順に飛ぶ -->
<!–– ここから C-->
<td style="padding-left: 80px"><b>処理６ 表示する2：</b></td>
<!–– 表示する命令を実行する 場所を作成 [ボタンタイプの入力域・”表示”という文字を出す・クリックされたとき、”onclick2”というJavascriptを実行] -->
<td><input type="button" id="shori6" value="表示" tabindex="6" onclick="onclick2()" /></td>
<!–– ここまで C-->
<!-- ★ヒント★ チャレンジ３ 処理６の定義は、処理３の横に出るのでここにあるが（表形式なので行単位で定義する） チャレンジ３では、処理９の横はないので「ここから」「ここまで」はいらない（削除） -->
</tr>
</table>
</div>
<div id="contentp2" style="height: 100px; background-color: #F3F781;">
<h4 style="margin-bottom: 0px;"> ・・結果表示域・・ </h4>
<table>
<tr>
<!–– ここから D-->
<td><p style="background-color: #F3F781;" id="test1">ここに表示するよ！1</p></td>
<!–– ここまで D-->
<!-- ★ヒント★ チャレンジ３ チャレンジ３では、結果表示は1つでよいので「ここから」「ここまで」はいらない（削除） -->
<td><p id="test2">ここに表示するよ！2</p></td>
<!-- * * -->
<!-- ★ヒント★ チャレンジ３ id="test3" ここに表示するよ！3 にすればいい！ -->
</tr>
</table>
<!-- ↑ ↑ ↑ ↑ ↑ ↑ チャレンジ３ 用の html 参考 ここまで ↑ ↑ ↑ ↑ ↑ -->
</div>
]]>
自分で作ってみよう！ チャレンジ３ ★ヒント★ を見ながらプログラムを作って動かしてみよう！ *** の部分が変更するところだよ！
【手順】ソースを表示 → コピー → メモ帳に張り付け → ★ヒント★を参考にして変更する → w2.html という名前で保存／実行！
※解答（サンプル）タブの一番下に、操作方法があります。
チャレンジ３ ： 好きな文字を入力して（処理７）、指定した回数繰り返し（処理８）、表示してみる（処理９）！