JavaScriptで プログラミング

Transcription

1 JavaScript でプログラミング

2 JavaScript とは プログラミング言語の 1 つ Web ページ上でプログラムを動かすことが主目的 Web ブラウザで動かすことができる 動作部分の書き方が C や Java などに似ている 2

3 JavaScript プログラムを動かすには <script> </script> の範囲を 1. テキストエディタで入力 2..html というファイル名で保存 3. ブラウザでそのファイルを開く 3

4 準備 TeraPad を開く [ スタート ] [TeraPad] [ TeraPad] 保存する 1. [ ファイル ] [ 名前をつけて保存 ] 2. 左側 [PC] をクリック 3. 右側下の [ 自分のID] をダブルクリック 4. [ ファイル名 ] に エイチティーエムエル rei1.html と入力 5. [ 保存 ] をクリック 4

5 例題 1 数値を 2 つ読み込み その合計を表示するプログラム テキストエディタで入力する入力できたら次のページへ進み 入力と仕組みの確認をする 5

6 例題 1 数値を 2 つ読み込み その合計を表示するプログラム <script> </script> この範囲が JavaScript プログラムであるとブラウザに知らせる 6

7 例題 1 数値を 2 つ読み込み その合計を表示するプログラム " " プログラム中に文字列を入れるときには " " で囲む文字列内には日本語も利用可能 7

8 例題 1 数値を 2 つ読み込み その合計を表示するプログラム parsefloat( ) 文字列から数値に変換する 8

9 例題 1 数値を 2 つ読み込み その合計を表示するプログラム var x = 値を x という変数 ( 値を保持できる入れもの ) に格納 9

10 例題 1 数値を 2 つ読み込み その合計を表示するプログラム ; 文の区切りを示す 10

11 例題 1 数値を 2 つ読み込み その合計を表示するプログラム var y = parsefloat(prompt("y? ")) メッセージを表示して文字列を入力させ 数値に変換して y という変数に格納 11

12 例題 1 数値を 2 つ読み込み その合計を表示するプログラム var z = x + y 変数 x と y に入っている値を取り出して足し算し 結果を変数 z に格納 12

13 例題 1 数値を 2 つ読み込み その合計を表示するプログラム document.write("x + y = " + z) x + y = という文字列と変数 z の値を連結し 画面に出力 13

14 例題 1 数値を 2 つ読み込み その合計を表示するプログラム 正しく入力できているか確認出来たら 保存する [Ctrl]+[S] を押す 実行する TeraPad のツールバーにあるをクリック 14

15 例題 1 1. X? と表示 数値を入力 2. Y? と表示 数値を入力 3. 答えが表示される うまく動作しないときは 入力内容を確認して再度実行 15

16 問題 1 1. 引き算の結果を表示させるプログラムに修正し rei1-1.html という名前で保存する 1. プログラムの4 行目と5 行目を修正する 2. [ ファイル ] [ 名前をつけて保存 ] をクリック 3. [ ファイル名 ] に rei1-1.html と入力する 4. [ 保存 ] をクリック 5. ツールバー上の をクリックして動作を確認する 16

17 問題 1 2. 掛け算の結果を表示させるプログラムに修正し rei1-2.html という名前で保存する 3. 割り算の結果を表示させるプログラムに修正し rei1-3.html という名前で保存する 4. 剰余の結果を表示させるプログラムに修正し rei1-4.html という名前で保存する 剰余とは 割り算の余りのこと 保存方法 1. [ ファイル ] [ 名前をつけて保存 ] 2. [ ファイル名 ] を正確に入力 3. [ 保存 ] をクリック 引き算 掛け算 割り算 剰余の演算は演算記号 - * / % で表される 17

18 準備 TeraPadで新規作成ツールバーのをクリック 保存する 1. [ ファイル ] [ 名前をつけて保存 ] 2. [ ファイル名 ] に rei2.html と入力 3. [ 保存 ] をクリックエイチティーエムエル 18

19 例題 2 1 から指定した数 n までを順に表示するプログラム テキストエディタで入力する入力できたら次のページへ進み 入力と仕組みの確認をする 19

20 例題 2 1 から指定した数 n までを順に表示するプログラム for(var i = 1; i <= n; i = i + 1) { } i を 1 から n 以下で i を 1 ずつ増やす 中かっこ内の範囲を繰り返し実行することを指示変数 i には1 回目では1 2 回目では2 最後の回にはnが入る 20

21 例題 2 1 から指定した数 n までを順に表示するプログラム parseint( ) 文字列を整数に変換する 21

22 例題 2 1 から指定した数 n までを順に表示するプログラム document.write(i + " ") 繰り返しの中で i の値と空白文字を表示する 22

23 例題 2 1 から指定した数 n までを順に表示するプログラム 正しく入力できているか確認出来たら 保存する [Ctrl]+[S] を押す 実行する TeraPad のツールバーにあるをクリック 23

24 例題 2 1. n? と表示 数値を入力 2. 入力した数まで表示 24

25 問題 2 プログラムを以下のように修正する 1. 空白を開けずに表示するように修正し rei2-1.html という名前で保存する 2. 大きい順に表示するように修正し rei2-2.html という名前で保存する ヒント i でなく n+1-i を表示するようにする 3. 1 行に 1 つずつ表示するように修正し rei2-3.html という名前で保存する ヒント空白でなく <br> を数の後ろにつける 25

26 準備 TeraPadで新規作成ツールバーのをクリック 保存する 1. [ ファイル ] [ 名前をつけて保存 ] 2. [ ファイル名 ] に rei3.html と入力 3. [ 保存 ] をクリックエイチティーエムエル 26

27 例題 3 5 の倍数だけ太字にするプログラム テキストエディタで入力する入力できたら次のページへ進み 入力と仕組みの確認をする 27

28 例題 3 5 の倍数だけ太字にするプログラム if( ) { 太字にする <b>~ </b> でくくる } else { } () 内の条件を調べて成り立っていたら {} の部分 成り立っていなかったら else{} の部分を実行 28

29 例題 3 5 の倍数だけ太字にするプログラム 正しく入力できているか確認出来たら 保存する [Ctrl]+[S] を押す 実行する TeraPad のツールバーにあるをクリック 29

30 例題 3 1. n? と表示 数値を入力 2. 入力した数まで 5 の倍数を太字にして表示 30

31 問題 3 プログラムを以下のように修正する 1. 5の倍数だけ 2 回 現れるように修正し rei3-1.html という名前で保存する 2. 5の倍数をそもそも画面に表示しないように修正し rei3-2.html という名前で保存する 3. いくつの倍数を太字にするかも入力で指定できるように修正し rei3-3.html という名前で保存する 31

32 準備 TeraPadで新規作成ツールバーのをクリック 保存する 1. [ ファイル ] [ 名前をつけて保存 ] 2. [ ファイル名 ] に rei4.html と入力 3. [ 保存 ] をクリックエイチティーエムエル 32

33 例題 4 を並べて三角形を書くプログラム テキストエディタで入力する入力できたら次のページへ進み 入力と仕組みの確認をする 33

34 例題 4 を並べて三角形を書くプログラム <script> document.write('<tt>'); var n = parseint(prompt("n? ")); for(var i = 1;i <= n;i = i + 1) { for(var j = 1;j <= i;j = j + 1){ document.write(" "); } document.write("<br>"); } </script> 文字列を等幅フォントで表示する 文字を使った図形が綺麗に書ける 34

35 例題 4 を並べて三角形を書くプログラム 正しく入力できているか確認出来たら 保存する [Ctrl]+[S] を押す 実行する TeraPad のツールバーにあるをクリック 35

36 例題 4 1. n? と表示 数値を入力 2. 入力した数を最大数として を書き並べて表示 36

37 問題 4 プログラムを以下のように修正する 1. 図 Aのような図形を書くように修正し rei4-1.html という名前で保存する 2. 図 Bのような図形を書くように修正し rei4-2.html という名前で保存する 3. 図 Cのような図形を書くように修正し rei4-3.html という名前で保存する それぞれ 5 6 を入力したとき 図 A 図 B 図 C 37

38 準備 TeraPadで新規作成ツールバーのをクリック 保存する 1. [ ファイル ] [ 名前をつけて保存 ] 2. [ ファイル名 ] に rei5.html と入力 3. [ 保存 ] をクリックエイチティーエムエル 38

39 例題 5 を並べて三角形を書くプログラム 2 テキストエディタで入力する入力できたら次のページへ進み 入力と仕組みの確認をする 39

40 例題 5 を並べて三角形を書くプログラム 2 正しく入力できているか確認出来たら 保存する [Ctrl]+[S] を押す 実行する前にどのような図形を描くか予想してみよう 40

41 例題 5 1. 実行する TeraPad のツールバーにあるをクリック 2. n? と表示 数値を入力 3. で図形が描かれる 41

42 問題 5 それぞれ 5 6 を入力したとき プログラムを以下のように修正する 1. 図 Aのような図形を書くように修正し rei5-1.html という名前で保存する 2. 図 Bのような図形を書くように修正し rei5-2.html という名前で保存する 3. 図 Cのような図形を書くように修正し rei5-3.html という名前で保存する 図 A 図 B 図 C 42

43 問題 5 プログラムを以下のように修正する 4. 図 Dのような図形を書くように修正し rei5-4.html という名前で保存する 5. 図 Eのような図形を書くように修正し rei5-5.html という名前で保存する 6. 図 Fのような図形を書くように修正し rei5-6.html という名前で保存する それぞれ 5 6 を入力したとき 図 D 図 E 図 F 43