はじめようプログラミング「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ

Size: px

Start display at page:

Download "はじめようプログラミング「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ"

あきおそめや
7 years ago
Views:

1 はじめようプログラミングアルゴロジック 1 時間で学ぶソフトウエアの仕組みを経て JavaScript へ東京都立三鷹中等教育学校情報科能城茂雄 ( のしろしげお ) [email protected]

2 プログラミングをはじめる訳世界最先端 IT 国家創造宣言官民データ活用推進基本計画平成 29 年 5 月 30 日改訂 ettei/pdf/ /honbun.pdf プログラミングで PDF を検索するだけでもさらに気になる言葉がデータサイエンス

3 社会 or 科学 -> 情報 I へプログラミング教育は難しい? 特別なソフトウェアが必要教材がない専門家じゃないし詳しくないだれでもできる 3 時間 +α プログラミング

4 はじめてのプログラミング ( 実践報告 ) 1. アルゴロジック時間で学ぶソフトウェアの仕組み 3. JavaScript

5 はじめの 1 時間アルゴロジック

6 本時の目的次回学習するプログラミングの前に経験して欲しいアルゴリズムを体験理解する

7 アルゴリズムとはコンピュータを使ってある特定の目的を達成するための処理手順別の表現アルゴリズムというのはコンピューターで計算を行うときの計算方法物事を考えるときのやり方

8 キュウリを輪切りにする手順効率よくキュウリを切るために処理手順を見直すと

9 キュウリを輪切りにする手順 2 効率よくキュウリを切るために処理手順を見直すと

10 本日の手順遊び方を見る操作方法を動画で見る ( オプション ) チャレンジ問題にチャレンジ! は完ぺき ( 無駄なし ) はできたけど無駄があるアルゴロジックで検索すると自宅でも出来ます 5 点 2 点最後に印刷して集計結果を見せる ( 検印有 )

11 授業でのポイント ( 能城の感想 ) アルゴロジックは 2 時間やると飽きるページは検索して開かせるのではなくショートカットブックマークなどを利用検索すると答えがでてしまいますチェックは手間がかかるが検印点数の計算は生徒に行わせる

12 2 時間目 1 時間で学ぶソフトウェアの仕組み

13 ドリトル教育用プログラミング言語ドリトルオンライン版 BitArrow オフライン (Java 版 ) 1 時間で学ぶソフトウェアの仕組み user noshiro pass aomori2017

14 教科書 P.114~ 3 時間目 ~ JavaScript 編

15 JavaScript でコーディングメリットブラウザ (Internet Explore) で動作特別なソフトウェアがいらない市販の解説書がたくさんある教科書指導書に解説があるデメリットデバッグが難しいメモ帳が使いにくい

16 JavaScript 1 時間目画面に文字を出してみよう

17 本時の目的 ( 以下のことを理解する ) コンピュータにとってのプログラムがどのようなものか体験する JavaScript という言語を使ってみる教科書資料 P.13 も参照

18 簡単なプログラムプログラム (program) とはコンピュータが行う処理手順を指示したものをプログラムというプログラムはコンピュータが動作するために必須コンピュータは柔軟に判断できないあらかじめこういう状況ではこうするという処理を人間がプログラムとして指示している

19 プログラム作成の手順 1. プログラムを作成するソフトウェアを起動例メモ帳などのテキストエディタ 2. プログラムを入力し保存エディタでプログラム言語の文法に従って命令を記述する 3. プログラムが動作するか確認例ブラウザで動作確認 4. 動作しない場合にプログラムを編集例バグがないかデバッグする

20 世界初のバグ (bug) 10-first-computer-bug/

21 具体的な作業 Z ドライブ ( 個人用ドライブ ) にフォルダ作成 js というフォルダを作る (js は JavaScript の略 ) 1. Terapad( エディタ ) を起動 2. ファイル名を付けて保存プログラム毎に名前を付ける 3. プログラムを入力動作確認 & バグがあれば修正

22 保存の時の注意点 js となっているか? 名前は? moji.html

23 文字列を表示するプログラム教科書 P.114 重要ファイル名 moji.html <html> <body> <script> document.write( MITAKA ); </script> </body> </html> ダブルクォート Shift を押しながらセミコロン実行結果 2 ふ MITAKA

24 注意すべき点文字は半角 ( つまり ASCII 文字 ) で打つ特に記号は注意する命令の文字は正確に入力するコンピュータは間違いを自ら訂正できない

25 文字列を 3 個表示するプログラムファイル名 moji2.html <html> <body> <script> document.write( MITAKA_ ); document.write( MITAKA_ ); document.write( MITAKA_ ); </script> </body> </html> 実行結果 MITAKA_MITAKA_MITAKA_

26 本時の目的 ( 以下のことを理解できた?) コンピュータにとってのプログラムがどのようなものか体験する JavaScript という言語を使ってみる

27 授業のポイント手順でつまずかないように丁寧に日本語 ( 日本語入力 ) は使わない指示はポインターオプションを使用おまけ : 落ちゲー

28 JavaScript 2 時間目流れ図と制御構造

29 本時の目的 ( 以下のことを理解する ) フローチャート ( 流れ図 ) を理解するアルゴリズムの基本構造を学ぶ順次処理繰り返し ( 判断分岐 )

30 フローチャート (flowchart) 処理手順を示した図流れ図とも呼ばれる記号や書き方がJISで定められている

31 文字列を表示するプログラムの流れ図ファイル名 moji.html <html> <body> <script> document.write( MITAKA ); </script> </body> </html> はじめ MITAKA おわり document.write の代わりに alert でも OK この形は画面表示の時に使用

32 文字列を 3 個表示するプログラムファイル名 moji2.html <html> <body> <script> document.write( MITAKA_ ); document.write( MITAKA_ ); document.write( MITAKA_ ); </script> </body> </html> はじめ MITAKA_ MITAKA_ MITAKA_ おわり

33 課題 1 結果を予想してみようファイル名 ex01.html はじめ <html> <body> <script> document.write(103-62); </script> </body> </html> 実行結果 41 おわり document.write( ) との差は? 実行結果

34 順次処理 <html> <body> <script> var a=1; document.write( number=,a); </script> </body> </html> ファイル名 var.html 実行結果はじめ var a=1 number=,a a number=1 おわり

35 var a=1; とは? var a で変数宣言 a=1は変数 aに1を代入する ; で文の終わり a と 1 は等しいではない数学と違うところ等しいを意味する記述は a==1 1 a

36 順次処理 ( 入力を読み取る ) <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

37 ポップアップブロックを無効にするポップアップはブロックされました上記メッセージが出た場合は 2か所クリック prompt 命令によってポップアップが出るため 2 1

38 繰り返し ( 文字を 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_ ループおわり

39 for 文 for(c=1;c<=4;c=c+1){ document.write( TAKA_ ); } for( 初期化 ; 実行条件 ; 増分処理 ){ 初期化 : 変数 cは初期値として1が代入される実行条件 :cが4 以下の場合 { } の間が実行される増分処理 :1 回 { } の間を実行すると変数 c の値が1 増加する

40 本時の目的 ( 以下のことを理解できた?) フローチャート ( 流れ図 ) を理解するアルゴリズムの基本構造を学ぶ順次処理繰り返し ( 判断分岐 )

41 JavaScript 3 時間目制御構造 2 繰り返し処理復習編

42 本時の目的 ( 以下のことを理解する ) アルゴリズムの基本構造を学ぶ 2 順次処理繰り返し判断分岐

43 繰り返し ( 総和を求める ) ファイル名 <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

44 繰り返し ( 奇数の総和を求める ) はじめファイル名 <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 おわりループ

45 入力した数までの総和を求める <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 おわりループ

46 本時の目的 ( 以下のことを理解できた?) アルゴリズムの基本構造を学ぶ 2 順次処理繰り返し判断分岐

47 JavaScript 4 時間目制御構造 3 判断分岐編

48 本時の目的 ( 以下のことを理解する ) アルゴリズムの基本構造を学ぶ 3 順次処理繰り返し判断分岐

49 <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 以外を入力したら

50 if 文教科書 P.119 if( 条件式 ){ 文 1; } else { } 文 2; 条件式がみたされた場合に文 1 が実行され条件式が満たされない場合には文 2 が実行される

51 判断分岐 (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!!

52 偶数奇数の判定をするファイル名 <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

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

54 配列を使ったプログラム教科書 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

55 本時の目的 ( 以下のことを理解できた?) アルゴリズムの基本構造を学ぶ 3 順次処理繰り返し判断分岐追加で配列

56 サンプル問題 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>

57 サンプル問題 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> ループおわり

58 最後に個人的な思い本来 PC の操作やファイルディレクトリの概念などは義務教育段階で修得してほしいプログラミングの基礎も今後高等学校としてのプログラミング教育は確実に現在より科学的な内容に変化するので私たちも準備が必要

59 参考資料 1 情報最新トピック集 2017 高校版社会科の資料集を意識した内容科学的な理解を助ける手立てに紙面例より引用

60 参考資料 2 Progate オンラインプログラミング学習サービスアカデミックプラン有

61 参考資料 3 micro:bit

JavaScriptでプログラミング

JavaScriptでプログラミング JavaScript でプログラミング JavaScript とはプログラミング言語の 1 つ Web ページ上でプログラムを動かすことが主目的 Web ブラウザで動かすことができる動作部分の書き方が C や Java などに似ている 2 JavaScript プログラムを動かすにはの範囲を 1. テキストエディタで入力 2..html というファイル名で保存

はじめようプログラミング 「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ

はじめようプログラミング「アルゴロジック」「1時間で学ぶソフトウエアの仕組み」を経て、JavaScriptへ