第7回it人材育成会議資料 - 首相官邸ホームページ第7回it人材育成会議資料...

第７回 IT 人材育成会議資料東京都立三鷹中等教育学校情報科主幹教諭能城茂雄

全国高等学校情報教育研究会事務局長 [email protected]

Debian GNU/Linux Official Developer [email protected]

事例紹介：情報教育・プログラミングを実践していくために

【資料】

プログラミング教育についてのアンケート実際に授業で使用した PowerPoint 資料(第 22 回～第 25 回)

Keyword: ・タブレット/スマートフォンの普及による、PC リテラシーの欠如・義務教育段階で求められるスキル（タイピング・文書作成等）・高等学校で行う情報教育と、義務教育における情報活用能力の接続・高等学校における情報教育の現状１（教員採用）・高等学校における情報教育の現状２（生徒の状況）・高等学校における情報教育の現状３（学習の位置づけ）・教員による IT スキルの格差（プログラミング経験を含む）

資料７

7%8%

85%

61%36%

3%

13%

46%

41%

6%

84%

10%

資料　７

情報の科学第22回プログラミングI

東京都立三鷹中等教育学校情報科

能城茂雄（のしろしげお）

http://noshiro.shigeo.jp/[email protected]

教科書P.110～

ログインしてね

能城茂雄 http://noshiro.shigeo.jp/

本時の目的（以下のことを理解する）

コンピュータにとってのプログラムがどのようなものか体験する

JavaScriptという言語を使ってみる

教科書資料12も参照


簡単なプログラム

「プログラム(program)」とは

コンピュータが行う処理手順を指示したものをプログラムという

プログラムはコンピュータが動作するために必須

コンピュータは柔軟に判断できない

あらかじめ「こういう状況ではこうする」という処理を人間がプログラムとして指示している


プログラム作成の手順

1. プログラムを作成するソフトウェアを起動

例メモ帳などのテキストエディタ

2. プログラムを入力し保存

エディタでプログラム言語の文法に従って命令を記述する

3. プログラムが動作するか確認

例ブラウザで動作確認

4. 動作しない場合にプログラムを編集

例バグがないかデバッグする

世界初のバグ（bug)

http://gigazine.net/news/20120910-first-computer-bug/



具体的な作業

Zドライブ（個人用ドライブ）にフォルダ作成

js というフォルダを作る(jsはJavaScriptの略)1. Terapad（エディタ）を起動

2. ファイル名を付けて保存

プログラム毎に名前を付ける

3. プログラムを入力

動作確認＆バグがあれば修正


保存の時の注意点

ｊｓとなっているか？

名前は？moji.html


文字列を表示するプログラム

ファイル名 moji.html<html>

<body>

<script>

document.write(“MITAKA”);

</script>

</body>

</html>

MITAKA

実行結果

ダブルクォート

セミコロン

教科書P.159重要

Shiftを押しながら

“

２ふ


注意すべき点

文字は半角（つまりASCII文字）で打つ

特に記号は注意する

命令の文字は正確に入力する

コンピュータは間違いを自ら訂正できない


文字列を３個表示するプログラム

ファイル名 moji2.html<html>

<body>

<script>

document.write(“MITAKA＿”);



</script>

</body>

</html>

MITAKA_MITAKA_MITAKA_

実行結果


本時の目的（以下のことを理解できた？）

コンピュータにとってのプログラムがどのようなものか体験する

JavaScriptという言語を使ってみる

おしまい

情報の科学第23回プログラミングII




教科書P.110～




フローチャート（流れ図）を理解する

アルゴリズムの基本構造を学ぶ

順次処理

繰り返し

(判断分岐）

フローチャート(flowchart)処理手順を示した図

流れ図とも呼ばれる

記号や書き方がJISで定められている



文字列を表示するプログラムの流れ図

ファイル名 moji.html<html>

<body>

<script>

document.write(“MITAKA”);

</script>

</body>

</html>

はじめ

“MITAKA”

おわり

この形は画面表示の時に使用

文字列を３個表示するプログラム

ファイル名 moji2.html<html>

<body>

<script>




</script>

</body>

</html>

はじめ

“MITAKA_”

おわり

“MITAKA_”

“MITAKA_”

課題１結果を予想してみよう

ファイル名 ex01.html

document.write(“103-62”)との差は？

<html>

<body>

<script>

document.write(103-62);

</script>

</body>

</html>

はじめ

103-62

おわり

“103-62”

４１

実行結果

１０３－６２

実行結果


順次処理

<html>

<body>

<script>

a=1;

document.write(“number=”,a);

</script>

</body>

</html>

ファイル名 var.html

a

はじめ

“number=”,a

おわり

a=1

number=1

実行結果


a=1 とは？

「a=1は変数aに１を代入する」

aと1は等しいではない ※数学と違うところ

等しいを意味する記述は a==1

a

１


順次処理（入力を読み取る）

<html>

<body>

<script>

namae=prompt(“What is your name?”);

document.write(“hello,”,namae);

</script>

</body>

</html>

ファイル名 hyouji.html

“What is your name?”

namae

hello,taka

実行結果 ※takaと入力したら

ポップアップブロックを無効にする

ポップアップはブロックされました。

上記メッセージが出た場合は、２か所クリック

prompt命令によってポップアップが出るため


１

２

繰り返し（文字を4個表示）

ファイル名 juu.html<html>

<body>

<script>

for(c=1;c<=4;c=c+1){

document.write(“TAKA＿”);

}

</script>

</body>

</html>

はじめ

“TAKA＿”

おわり

ループ

c=1;c<=4;c=c+1

TAKA_TAKA_TAKA_TAKA_

実行結果


for文

for(初期化;実行条件;増分処理）{ 初期化：変数cは初期値として1が代入される

実行条件：cが4以下の場合、｛｝の間が実行される

増分処理：１回｛｝の間を実行すると変数cの値が１増加する

for(c=1;c<=4;c=c+1){

document.write(“TAKA＿”);

}



フローチャート（流れ図）を理解する

アルゴリズムの基本構造を学ぶ

順次処理

繰り返し

(判断分岐）

おしまい

情報の科学第24回プログラミングIII




教科書P.110～




アルゴリズムの基本構造を学ぶ２

順次処理

繰り返し

判断分岐


繰り返し（総和を求める）

ファイル名 sum.html<html>

<body>

<script>

sum=0;

for(c=1;c<=10;c=c+1){

sum=sum+c;

}

document.write(sum);

</script>

</body>

</html> 55

実行結果

繰り返し（奇数の総和を求める）

ファイル名 sum02.html<html>

<body>

<script>

sum=0;

for(d=1;d<=5;d=d+2){

document.write(sum,”+”,d,”=“);

sum=sum+d;

document.write(sum,”<br>”);

}

</script>

</body>

</html>

0+1=11+3=44+5=9

実行結果

はじめ

おわり

sum=0;

sum=sum+d

sum,”<br>”

ループd=1;d<=5;d=d+2

ループ

sum,”+”,d,”=“

入力した数までの総和を求める

<html>

<body>

<script>

sum=0;

num=parseInt(prompt(“Input num->”));

for(e=1;e<=num;e=e+1){

sum=sum+e;

}

document.write(“sum=”,sum);

</script>

</body>

</html>

はじめ

おわり

sum=0;

sum=sum+e

“sum=“,sum

ループe=1;e<=num;e=e+1

ループ

“Input num->”num

ファイル名 sum03.html

Input num -> 10sum=55

実行結果 ※10と入力したら

※終わった人は sum03kai.html にチャレンジ



アルゴリズムの基本構造を学ぶ2 順次処理

繰り返し

判断分岐

おしまい

情報の科学第25回プログラミングIV





教科書P.113～114



アルゴリズムの基本構造を学ぶ３

順次処理

繰り返し

判断分岐


判断分岐（Yかどうか判定する）

ファイル名 ifbasic.html<html>

<body>

<script>

moji=prompt("Y or N ->");

if(moji=="Y"){

document.write("Y!!");

} else {

document.write("N!!");

}

</script>

</body>

</html>

Y or N -> YY!!

実行結果 ※Yと入力したら

Y or N -> NN!!

実行結果 ※Y以外を入力したら

はじめ

moji“Y or N ->”

moji==“Y”

”Y!!” ”N!!”

おわり

if文


条件式がみたされた場合に文1が実行され、条件式が満たされない場合には文２が実行される

if(条件式）｛文1;

} else {文2;

}

教科書P.113


判断分岐（Yかyであるか判定する）

ファイル名 ifbasic2.html<html>

<body>

<script>

moji=prompt("Y or N ->");

if(moji=="Y" || moji =="y"){

document.write("Y!!");

} else {

document.write("N!!");

}

</script>

</body>

</html>Y or N -> YY!!

実行結果 ※Yと入力

Y or N -> NN!!

実行結果 ※Y以外を入力

Shift + ｜

￥－

を2個入力

はじめ

moji“Y or N ->”

moji==“Y” || moji==“y”

”Y!!” ”N!!”

おわり


偶数奇数の判定をする

ファイル名 if.html<html>

<body>

<script>

kazu=parseInt(prompt(“NUMBER”));

ans=kazu%2;

if(ans==0){

document.write(“even number");

} else {

document.write(“odd number");

}

</script>

</body>

</html>

NUMBER 2even number

実行結果 ※偶数を入力したら

NUMBER 3odd number

実行結果 ※偶数以外

はじめ

kazu“NUMBER”

ans==0

おわり

ans=kazu%2

even number odd number

教科書P.113

演算子

プログラムで使用する演算子は数学などとは異なる


配列を使ったプログラム

ファイル名 array.html<html>

<body>

<script>

d=new Array(31,28,31,30,31,30,31,31,30,31,30,31);

m=parseInt(prompt(“Input 1-12>”));

document.write(d[m-1]);

</script>

</body>

</html>

Input 1-12> 1130

実行結果 ※11と入力

教科書P.114



アルゴリズムの基本構造を学ぶ3 順次処理

繰り返し

判断分岐

追加で、配列

サンプル問題１（次のプログラムの結果を答えよ）


<html><body><script>document.write("document");</script></body></html>

<html><body><script>red=3;document.write(red);</script></body>

</html>

<html><body><script>for(a=1 ; a<=4 ; a=a+1) {document.write(“a”);

}</script></body></html>

サンプル問題２（次のプログラム空欄を埋めよ）


<html><body><script>①</script></body>

</html>

はじめ

“TAKa”

おわり

<html><body><script>for(a=1 ④ 3; a=a+1) {document.write("a");

}</script></body>

</html>

はじめ

“a”

おわり

ループ

a=1;a<=3;a=a+1

ループ

おしまい

第7回it人材育成会議資料 - 首相官邸ホームページ第7回it人材育成会議資料...

Documents