はじめようプログラミング アルゴロジック 1 時間で学ぶソフトウエアの仕組み を経て JavaScript へ 東京都立三鷹中等教育学校情報科能城茂雄 ( のしろしげお ) http://noshiro.shigeo.jp/ noshiro@shigeo.jp
プログラミングをはじめる訳 世界最先端 IT 国家創造宣言 官民データ活用推進基本計画 平成 29 年 5 月 30 日改訂 http://www.kantei.go.jp/jp/singi/it2/k ettei/pdf/20170530/honbun.pdf プログラミング で PDF を検索するだけでも さらに 気になる言葉が データサイエンス
社会 or 科学 -> 情報 I へ プログラミング教育は難しい? 特別なソフトウェアが必要 教材がない 専門家じゃないし 詳しくない だれでも できる 3 時間 +α プログラミング
はじめてのプログラミング ( 実践報告 ) 1. アルゴロジック http://home.jeita.or.jp/is/highschool/algo/ 2. 1 時間で学ぶソフトウェアの仕組み http://dolittle.eplang.jp/index.php?1h 3. JavaScript
はじめの 1 時間 アルゴロジック
本時の目的 次回学習するプログラミングの前に経験して欲しい アルゴリズム を体験 理解する
アルゴリズムとは コンピュータを使ってある特定の目的 を達成するための処理手順 別の表現 アルゴリズム というのは コンピューターで計算を行うときの 計算方法 物事を考えるときの やり方
キュウリを輪切りにする手順 効率よくキュウリを切るために 処理手順を見直すと
キュウリを輪切りにする手順 2 効率よくキュウリを切るために 処理手順を見直すと
本日の手順 遊び方を見る 操作方法を動画で見る ( オプション ) チャレンジ問題にチャレンジ! は完ぺき ( 無駄なし ) はできたけど無駄がある アルゴロジック で検索すると自宅でも出来ます 5 点 2 点 最後に印刷して 集計結果を見せる ( 検印有 )
授業でのポイント ( 能城の感想 ) アルゴロジックは 2 時間やると飽きる ページは 検索して開かせるのではなく ショートカット ブックマークなどを利用 検索すると 答えがでてしまいます チェックは 手間がかかるが検印 点数の計算は 生徒に行わせる
2 時間目 1 時間で学ぶソフ トウェアの仕組み
ドリトル 教育用プログラミング言語 ドリトル http://dolittle.eplang.jp/ オンライン版 BitArrow オフライン (Java 版 ) 1 時間で学ぶソフトウェアの仕組み http://dolittle.eplang.jp/index.php?1h http://noshiro.shigeo.jp/2017aomori/ user noshiro pass aomori2017
教科書 P.114~ 3 時間目 ~ JavaScript 編
JavaScript でコーディング メリット ブラウザ (Internet Explore) で動作 特別なソフトウェアがいらない 市販の解説書がたくさんある 教科書 指導書に解説がある デメリット デバッグが難しい メモ帳が使いにくい
JavaScript 1 時間目 画面に文字を出してみよう
本時の目的 ( 以下のことを理解する ) コンピュータにとってのプログラムがどのようなものか体験する JavaScript という言語を使ってみる 教科書資料 P.13 も参照
簡単なプログラム プログラム (program) とは コンピュータが行う処理手順を指示したものをプログラムという プログラムはコンピュータが動作するために必須 コンピュータは柔軟に判断できない あらかじめ こういう状況ではこうする という処理を人間がプログラムとして指示している
プログラム作成の手順 1. プログラムを作成するソフトウェアを起動 例メモ帳などのテキストエディタ 2. プログラムを入力し保存 エディタでプログラム言語の文法に従って命令を記述する 3. プログラムが動作するか確認 例ブラウザで動作確認 4. 動作しない場合にプログラムを編集 例バグがないかデバッグする
世界初のバグ (bug) http://gigazine.net/news/201209 10-first-computer-bug/
具体的な作業 Z ドライブ ( 個人用ドライブ ) にフォルダ作成 js というフォルダを作る (js は JavaScript の略 ) 1. Terapad( エディタ ) を起動 2. ファイル名を付けて保存 プログラム毎に名前を付ける 3. プログラムを入力 動作確認 & バグがあれば修正
保存の時の注意点 js となっているか? 名前は? moji.html
文字列を表示するプログラム 教科書 P.114 重要 ファイル名 moji.html <html> <body> <script> document.write( MITAKA ); </script> </body> </html> ダブルクォート Shift を押しながら セミコロン 実行結果 2 ふ MITAKA
注意すべき点 文字は半角 ( つまり ASCII 文字 ) で打つ 特に記号は注意する 命令の文字は正確に入力する コンピュータは間違いを自ら訂正できない
文字列を 3 個表示するプログラム ファイル名 moji2.html <html> <body> <script> document.write( MITAKA_ ); document.write( MITAKA_ ); document.write( MITAKA_ ); </script> </body> </html> 実行結果 MITAKA_MITAKA_MITAKA_
本時の目的 ( 以下のことを理解できた?) コンピュータにとってのプログラムがどのようなものか体験する JavaScript という言語を使ってみる
授業のポイント 手順でつまずかないように丁寧に 日本語 ( 日本語入力 ) は使わない 指示は ポインターオプションを使用 おまけ : 落ちゲー
JavaScript 2 時間目 流れ図と制御構造
本時の目的 ( 以下のことを理解する ) フローチャート ( 流れ図 ) を理解する アルゴリズムの基本構造を学ぶ 順次処理 繰り返し ( 判断分岐 )
フローチャート (flowchart) 処理手順を示した図 流れ図とも呼ばれる 記号や書き方がJISで定められている
文字列を表示するプログラムの流れ図 ファイル名 moji.html <html> <body> <script> document.write( MITAKA ); </script> </body> </html> はじめ MITAKA おわり document.write の代わりに alert でも OK この形は画面表示の時に使用
文字列を 3 個表示するプログラム ファイル名 moji2.html <html> <body> <script> document.write( MITAKA_ ); document.write( MITAKA_ ); document.write( MITAKA_ ); </script> </body> </html> はじめ MITAKA_ MITAKA_ MITAKA_ おわり
課題 1 結果を予想してみよう ファイル名 ex01.html はじめ <html> <body> <script> 103-62 document.write(103-62); </script> </body> </html> 実行結果 41 おわり document.write( 103-62 ) との差は? 103-62 実行結果 103-62
順次処理 <html> <body> <script> var a=1; document.write( number=,a); </script> </body> </html> ファイル名 var.html 実行結果 はじめ var a=1 number=,a a number=1 おわり
var a=1; とは? var a で 変数宣言 a=1は変数 aに1を代入する ; で 文の終わり a と 1 は等しいではない 数学と違うところ 等しいを意味する記述は a==1 1 a
順次処理 ( 入力を読み取る ) <html> <body> <script> var namae=prompt( What is your name? ); document.write( hello,,namae); </script> </body> </html> ファイル名 hyouji.html 実行結果 taka と入力したら What is your name? hello,taka namae
ポップアップブロックを無効にする ポップアップはブロックされました 上記メッセージが出た場合は 2か所クリック prompt 命令によってポップアップが出るため 2 1
繰り返し ( 文字を 4 個表示 ) ファイル名 juu.html <html> <body> <script> var c; for(c=1;c<=4;c=c+1){ document.write( TAKA_ ); } </script> </body> 実行結果 </html> TAKA_TAKA_TAKA_TAKA_ はじめ var c ループ i=1;i<=10;i++ c=1;c<=4;c=c+1 TAKA_ ループおわり
for 文 for(c=1;c<=4;c=c+1){ document.write( TAKA_ ); } for( 初期化 ; 実行条件 ; 増分処理 ){ 初期化 : 変数 cは初期値として1が代入される 実行条件 :cが4 以下の場合 { } の間が実行される 増分処理 :1 回 { } の間を実行すると変数 c の値が1 増加する
本時の目的 ( 以下のことを理解できた?) フローチャート ( 流れ図 ) を理解する アルゴリズムの基本構造を学ぶ 順次処理 繰り返し ( 判断分岐 )
JavaScript 3 時間目 制御構造 2 繰り返し処理復習編
本時の目的 ( 以下のことを理解する ) アルゴリズムの基本構造を学ぶ 2 順次処理 繰り返し 判断分岐
繰り返し ( 総和を求める ) ファイル名 <html> <body> <script> var c,sum=0; sum.html var c, sum=0 for(c=1;c<=10;c=c+1){ sum=sum+c; } document.write(sum); </script> </body> 実行結果 </html> 55
繰り返し ( 奇数の総和を求める ) はじめ ファイル名 <html> <body> <script> var d,sum=0; sum02.html var d,sum=0 ループ d=1;d<=5;d=d+2 sum, +,d, = for(d=1;d<=5;d=d+2){ document.write(sum, +,d, = ); sum=sum+d; document.write(sum, <br> ); sum=sum+d sum, <br> } </script> </body> </html> 実行結果 0+1=1 1+3=4 4+5=9 おわり ループ
入力した数までの総和を求める <html> <body> <script> var e,num, 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> ファイル名 sum03.html 実行結果 10 と入力したら Input num -> 10 sum=55 終わった人は sum03kai.html にチャレンジ はじめ var e, sum=0; Input num-> num ループ e=1;e<=num;e=e+1 sum=sum+e sum=,sum おわり ループ
本時の目的 ( 以下のことを理解できた?) アルゴリズムの基本構造を学ぶ 2 順次処理 繰り返し 判断分岐
JavaScript 4 時間目 制御構造 3 判断分岐編
本時の目的 ( 以下のことを理解する ) アルゴリズムの基本構造を学ぶ 3 順次処理 繰り返し 判断分岐
<html> <body> <script> var moji; moji=prompt("y or N ->"); if(moji=="y"){ document.write("y!!"); } else { } 判断分岐 (Y かどうか判定する ) ファイル名 document.write("n!!"); </script> </body> </html> Y or N -> Y Y!! ifbasic.html 実行結果 Y と入力したら Y or N -> N N!! はじめ var moji moji Y or N -> moji== Y Y!! おわり N!! 実行結果 Y 以外を入力したら
if 文 教科書 P.119 if( 条件式 ){ 文 1; } else { } 文 2; 条件式がみたされた場合に文 1 が実行され 条件式が満たされない場合には文 2 が実行される
判断分岐 (Y か y であるか判定する ) ファイル名 ifbasic2.html <html> <body> <script> var moji; moji=prompt("y or N ->"); if(moji=="y" moji =="y"){ document.write("y!!"); } else { } document.write("n!!"); </script> </body> </html> 実行結果 Y と入力 Y or N -> Y Y!! Shift + - を 2 個入力 実行結果 Y 以外を入力 Y or N -> N N!! はじめ var moji moji Y or N -> moji== Y moji== y Y!! おわり N!!
偶数奇数の判定をする ファイル名 <html> <body> <script> if.html var kazu=parseint(prompt( NUMBER )); var ans=kazu%2; if(ans==0){ document.write( even number"); } else { } document.write( odd number"); </script> </body> </html> 実行結果 偶数を入力したら NUMBER 2 even number はじめ var kazu NUMBER var ans=kazu%2 ans==0 even number 実行結果 偶数以外 NUMBER 3 odd number おわり 教科書 P.119 odd number
演算子 プログラムで使用する演算子は数学などとは異なる
配列を使ったプログラム 教科書 P.120 ファイル名 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> 実行結果 11 と入力 Input 1-12> 11 30
本時の目的 ( 以下のことを理解できた?) アルゴリズムの基本構造を学ぶ 3 順次処理 繰り返し 判断分岐 追加で 配列
サンプル問題 1( 次のプログラムの結果を答えよ ) <html> <body> <script> document.write("document"); </script> </body> </html> <html> <body> <script> var red=3; document.write(red); </script> </body> </html> <html> <body> <script> var a; for(a=1 ; a<=4 ; a=a+1) { document.write( a ); } </script> </body> </html>
サンプル問題 2( 次のプログラム空欄を埋めよ ) <html> <body> <script> 1 </script> </body> </html> はじめ TAKa おわり <html> <body> <script> var a; for(a=1 4 3; a=a+1) { document.write("a"); } </script> </body> var a はじめ ループ a=1;a<=3;a=a+1 a </html> ループ おわり
最後に個人的な思い 本来 PC の操作やファイル ディレクトリの概念などは義務教育段階で修得してほしい プログラミングの基礎も 今後 高等学校としてのプログラミング教育は確実に現在より科学的な内容に変化するので 私たちも準備が必要
参考資料 1 情報最新トピック集 2017 高校版 社会科の資料集を意識した内容 科学的な理解を助ける手立てに 紙面例 http://nichibun.net/material/topics/ より引用
参考資料 2 Progate https://prog-8.com/ オンラインプログラミング学習サービス アカデミックプラン有
参考資料 3 micro:bit http://microbit.org/ja/