Essence of Programming Written by Hiroshi Harimoto 1 目 次 第1部 XHTML・CSS・JavaScript 第 1 章 XHTML 1.1 XHTML とは 4 1.2 XHTML の構造 4 第 2 章 CSS 2.1 CSS とは 2.2 CSS の構造 2.3 セレクタ 2.4 プロパティ 14 14 16 17 第 3 章 JavaScript 3.1 JavaScript とは 23 3.2 JavaScript の文法Ⅰ 25 3.3 JavaScript の文法Ⅱ 42 2 第2部 Java 第 4 章 Java の文法Ⅰ 4.1 Java とは 70 4.2 基本データ型と変数 4.3 演算子 80 4.4 条件分岐 87 4.5 繰返し 4.6 配列 77 93 97 第 5 章 Java の文法Ⅱ 5.1 メソッド 102 5.2 クラスとオブジェクト 5.3 例外処理 114 5.4 GUI とイベント処理 5.5 スレッド 109 117 128 第 6 章 応用プログラミング問題 6.1 配列要素の変更と削除 6.2 数字のシャフル(shuffle) 132 132 6.3 サイコロゲーム(craps) 133 6.4 交換整列(bubble sort) 134 6.5 配列のソート(array sort) 135 3 第1部 XHTML・CSS・JavaScript 4 第1章 XHTML 1.1 XHTML とは ・eXtensible Hyper Text Markup Language ・Web ページの構造を記述(マークアップ)するための言語 見出し(title),段落(paragraph),リスト(list),表(table),フォーム(form),等々 のタグ(tag)を用いて Web ページを構築する。 ・Web 利用者や Web へのアクセス・デバイス(access device)などの増加,コンピ ュータによる Web ページの生成・処理,等々に対応するために,Web ページ内 のコンテンツ(contents)を標準仕様に基づいて マークアップする必要が出てき ている。 1.2 XHTML の構造 1.2.1 マークアップの基本 ・コンテンツを「<要素名>」と「</要素名>」で囲む。 開始タグ 終了タグ 例えば,Web ページに「テーブル」形式のコンテンツを表示するにはコンテン ツを「<table>」と「</table>」で囲む。 <table> ・・・・・・・・・・・・ </table> 開始タグ コンテンツ 終了タグ [注] タグはすべて「半角,小文字」で入力する。 ・属性と属性値 要素に持たせる特定の機能(属性)とその値(属性値) 例えば,< a href=" http://www.example.com/ " >見本のページ</a> の場合, 要素は「a」,属性は「href」 ,属性値は「http://www.example.com/」である。 属性と属性値の書き方は以下のとおりである。 ① 要素名と属性はスペースで区切る。 ② 属性と属性値はイコールで繋ぐ。 ③ 属性値は二重引用符( " )で囲む。 ④ 属性と属性値のセットはスペース区切りで複数指定が可能である。 5 1.2.2 ツリー構造 html head title meta link body div h1 p div h2 ul ほとんどの要素が,中に他の要素を含むことができる。例えば,コンテンツの 大まかな範囲を示す「div 要素」の中に,文字の大きさを規定する「h1 要素」を 含ませた場合,「div 要素」は「親要素」 , 「h1 要素」は「子要素」となる。 「親要素」 <div> <h1>東京国際大学/商学部</h1> </div> 「子要素」 * division(区分) 6 [XHTML の基本形] <html> <head> <title> intro.html </title> <meta http-equiv="Content-Type" content="text/html ; charset=shift_jis" /> <link rel="stylesheet" type="text/css" href="intro.css" /> </head> <body> <div class="one"><h1>東京国際大学/商学部</h1></div> <div class="two"><h3>情報ビジネス学科</h3></div> </body> </html> 1.2.3 head 要素 ・Web ページの基本情報を含む要素 ・子要素として,(1) meta 要素,(2) link 要素,(3) style 要素,(4) script 要素, 等々が含まれる。 (1) meta 要素(メタ情報) ・Web ページ全体に関わる基本データを表す要素 ・「http-equiv」属性でファイルのタイプを指定し,「content」属性で具体的な内 容を指定する。 <meta http-equiv="Content-Type" content="text/html ; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ・空要素(内容を持たない要素)であるため終了タグはなく,開始タグの最後に 「スペースと/」を書き入れることで終了とする。 7 (2) link 要素(文書間関係情報) ・そのページから見て,他のページやファイルがどのような役割を持つかを定義 する要素 ・目次に当たるページや CSS ファイルなどを指定するときに用いる。meta 要素同 様空要素である。 (3) style 要素(スタイルシート情報) ・CSS のソースコードを指定するための要素 ・ソースコードを直接 XHTML に記述すると,構造に無関係な情報が XHTML に 含まれることになってしまうので,CSS のソースコードは link 要素を利用して 外部ファイルとして読み込む方が望ましい。 ・外部 CSS ファイル(style01.css)の読み込み <link rel="stylesheet" type="text/css" href="style01.css" /> (4) script 要素(スクリプト情報) ・JavaScript のソースコードを指定するための要素 ・「head 要素」あるいは「body 要素」の中に指定する。 ・裏側の処理に関するスクリプトは「head 要素」の中に指定し,ある部分に表示 させたり埋め込むタイプのスクリプトは「body 要素」の中に指定する。 ・CSS のソースコード同様,JavaScript のソースコードも外部ファイルとして読 み込むこともできる。 ・外部 script ファイル(script01.js)の読み込み <script type="text/javascript" src="script01.js"></script> 8 [XHTML に直接 CSS ソースコードを記述する場合] <html> <head> <title> incss.html </title> <meta http-equiv="Content-Type" content="text/html ; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <style type="text/css"> body { text-align : center ; } . one { font-style : normal ; color : red ; } . two { font-style : italic ; color : blue ; } </style> </head> <body> <div class="one"><h1>東京国際大学/商学部</h1></div> <div class="two"><h3>情報ビジネス学科</h3></div> </body> </html> 9 [ XHTML に直接 script ソースコードを記述する場合] <html> <head> <title> inscript.html </title> <meta http-equiv="Content-Type" content="text/html ; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var msg=" 東京国際大学 商学部 情報ビジネス学科 " ; function disp( ) { setTimeout("disp( )", 300) ; msg=msg.substring(1, msg.length)+msg.substring(0, 1) ; document.Form1.box.value=msg ; } </script> </head> <body onLoad="disp( )"> <form name="Form1"> <input name="box" type="text" size="30"> </form> </body> </html> 10 1.2.4 本文(body 内)を構成する要素 (1)ブロックレベル要素(block level element) ・コンテンツのブロックを定義するための要素 ・h1~h6 要素(見出し),p 要素(段落),ul, ol, dl 要素(リスト),table 要素(表), form 要素(フォーム),等々 (2)インライン要素(inline element) ・ブロック内の一部のテキストに役割を与えたり,内容を埋め込むための要素 ・a 要素(アンカー),em 要素(強調), strong 要素(強調),等々 (3)空要素(null element) ・指定のところにパーツを埋め込むだけの役割を持ち,内容を持たない要素 ・Web ページにテキストを書きこむなどのときに用いられる。 ・meta 要素(メタ情報),link 要素(文書間関係情報),hr 要素(水平線),br 要素(改 行),img 要素(画像),input 要素(フォームパーツ),等々 ・終了タグはなく,開始タグの最後に「スペースと/」を書き入れることで終了 とする。 (4) div 要素(division element) ・コンテンツの大まかな範囲を示す要素 ・div 要素に id を振り, 「ここはこういう範囲」ということを具体的に示す。 当然のことながら,id 名は 1 回のみ使用可能である。 ・Web ページ内で複数出現する範囲については div 要素に class を割り振る。 11 [外部 CSS ファイル(out.css)の読み込み] <html> <head> <title> outcss.html </title> <meta http-equiv="Content-Type" content="text/html ; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="out.css" /> </head> <body> <div id="outline"> <div class="box-parent"> <div class="box-red">☆</div> <div class="box-blue">☆</div> </div> </div> </body> </html> 12 [外部 CSS ファイル(out.css)] /* out.css */ body { text-align : center ; } . box-parent { width : 300px ; height : 200px ; background-color : #FFCCCC ; } . box-red { width : 20px ; height : 20px ; margin : 20px 0px 0px 10px ; background-color : #CC0000 ; } . box-blue { width : 20px ; height : 20px ; margin : 30px 0px 0px 100px ; background-color : #66CCFF ; } 13 [Web ページ構成図] ヘッダー ページナビゲーション メイン left メイン right フッター [div 要素によるコンテンツの範囲決め] <div id="header"> <div id="page_navigation"> <div id="main_left"> <div id="main_right"> <div id="footer"> 14 2 章 CSS (Cascading Style Sheet) 2.1 CSS とは ・XHTML で構造化した Web ページに「ビジュアルデザイン(visual design)」とい う価値を付け加えるための言語 ・フラットな Web ページに色やメリハリを与えることによって,Web ページの 読み易さと使い易さを増やす。 ・読み込み専用の外部 CSS ファイルを複数用意し,それらを XHTML に読み込ん で利用する方法が一般的である。 2.2 CSS の構造 2.2.1 コメント(comment) ・コメントのテキストを「/*」と「*/」で囲む。 /* ここからはコメントです。 ここには複数行のコメントが書けます。 */ ・コメントは製作者が目印やメモとして利用するものであり,スタイルの適用に 影響を与えない。 2.2.2 セレクタ(selector),プロパティ(property),値(value) ・セレクタは「スタイルの適用対象」,プロパティは「スタイルの種類」 ,値は 「スタイルの具体的内容」を表す。 例えば,段落(p)の文字色を赤にする場合,「 p { color : red ; } 」と指定する。 この場合,セレクタは「p」,プロパティは「color」 ,値は「red」となる。 ・セレクタになれるもの : 要素名,id 名,class 名,等々 ・プロパティと値は「コロン( : )」で区切り,プロパティと値のセットは「セミコ ロン( ; )」で区切って複数指定ができる。例えば, p{ color : red ; font-size : 120% ; } 15 ・プロパティのそれぞれには, 「指定できる値」, 「初期値」 ,「適用できる要素」, 等々が予め決まっている。例えば, 「background-repeat プロパティ」では, 「repeat」 ,「repeat-x」, 「repeat-y」,「no-repeat」のいずれかが指定でき,初期 値は「repeat」 ,適用できる要素は「すべての要素」となっている。 ・使用可能単位 単位 意 味 例 pt ポイント,1/72 インチ 20pt pc パイカ,12pt 1pc in インチ,2.54cm 5in cm センチメートル 2.8cm mm ミリメートル 25mm px ピクセル em フォントの大きさを 1 とする単位 1.4em ex 小文字 x の大きさを 1 とする単位 2ex % パーセンテージ 7px 120% ・色の単位 6 桁の RGB 値(#rrggbb),3 桁の RGB 値(#rgb),カラー名(red など 17 色)が 利用できる。 ・カラー名 名前 色 aqua 水色 black 黒 blue RGB 値 名前 色 olive オリーブ色 #808000 #000000 orange オレンジ色 #ffa500 青 #0000ff purple 紫 #800080 fuchsia 紫紅色 #ff00ff red 赤 #ff0000 gray 灰色 #808080 silver 銀 #c0c0c0 green 緑 #008000 teal 青緑 #008080 lime 黄緑 #00ff00 white 白 maroon えび茶色 #800000 yellow 黄色 navy 紺 #000080 - - #00ffff RGB 値 #ffffff #0000ff - 16 2.3 セレクタ(selector) 2.3.1 セレクタの種類 (1) universal セレクタ(*) すべての要素にスタイルが適用される。 (2) type セレクタ(E) 要素名のセレクタ,その要素すべてにスタイルが適用される。 例えば,「body」 , 「p」などと指定する。 (3) son セレクタ(EF) 親要素に含まれる子孫要素名のセレクタであり,その子孫要素にスタイルが適 用される。例えば, 「 p em { color : #cc0000 ; } 」と指定する。 (4) class セレクタ( . classname) クラス属性でそのクラス名が指定された要素にスタイルを適用される。 例えば, 「. articles」は, 「class="articles"」が指定された要素に適用される。 class セレクタは要素名をつけて書くこともできる(例えば「div.articles」)が, その場合は div 要素の中で「class="articles"」が指定されたものに限定される。 (5) id セレクタ(#idname) id 属性でその id 名が指定された要素にスタイルが適用される。 例えば, 「#header」は, 「id="header"」が指定された要素に適用される。 id セレクタは要素名をつけて書くこともできる(例えば「div#header」)が, その場合は div 要素の中で「id="header"」が指定されたものに限定される。 2.3.2 セレクタの組み合わせ ・id や class の数を増やすより,「son」セレクタを使ってスタイルの適用対象を 絞り込む方が効率的である。 #header { background : #33cccc ; } #header h1 { padding-top : 17px ; padding-left : 12px ; color : #ffffff ; } 17 ・セレクタのグループ化 セレクタをカンマで区切ってグループ化すると,同じスタイルが複数の要素に 同時適用可能となる。 #global ul li a : link , #local ul li a : link { color : #ff0000 ; } #global ul li a : visited , #local ul li a : visited { color : #008080 ; } 2.4 プロパティ(property) 2.4.1 ボックスモデル(box model)のプロパティ ・ボックス : XHTML の要素それぞれのもつ四角形の領域 ・ボックスの構成要素 ① 内容(content) : 要素に含まれるテキストや画像などの内容 ② ボーダー(border) : 枠線 ③ マージン(margin) : 他の要素とボーダーとの間隔 ④ パディング(padding) : ボーダーと内容との余白 マージン(margin) パディング(padding) 内容(content) height border width 18 (1)「border」プロパティ 太さ,形状,色をスペース区切りで指定する。 例えば,「 border : 1px solid #ff6600 ; 」のように指定する。 (2)「margin」プロパティと「padding」プロパティ 指定される値の数によって上下左右のどこに適用されるかが変わってくる。 ・値が 1 つ : 「上下左右」 ・値が 2 つ : 「上下」 「左右」 ・値が 3 つ : 「上」 「左右」 「下」 ・値が 4 つ : 「上」 「右」 「下」 「左」 (* 時計の針の進行方向) 例えば,「 margin : 5px 10px 8px ; 」→ 上 5px, 左右 10px, 下 8px 「 padding : 5px 10px ; 」→ 上下 5px, 左右 10px 2.4.2 整形モデルのプロパティ (1)「display」プロパティ 「block」 ,「inline」 , 「list-item」, 「none」などの値を指定することができる。 例えば, 「 display : block ; 」,「 display : inline ; 」のように指定する。 (2)「position」プロパティ ボックスの配置方法を指定する。 相対配置「position : relative ; 」要素本来の位置が基準 絶対配置「position : absolute ; 」親ボックスの位置が基準 固定配置「position : fixed ; 」親ボックスの位置が基準,さらにスクロール に対して固定 復 帰「position : static ; 」元の位置に戻す * ボックスの重なり順序は「z-index」プロパティで指定する(説明省略)。 * 「z-index」の詳細については別の参考書を参照すること。 (3)「float」プロパティ ・「float」とは,ボックスを左右にシフトさせることである。 ・段組みレイアウトを実現するために用いるプロパティであり,画像を左や右に 配置しテキストを回り込ませるときに利用する。 ・「float」の解除には「clear」プロパティを用い, 「left」, 「right」, 「both」とい う解除方向を値として指定する。 19 [box model property] プロパティ margin 効 果 指定可能値 初期値 マージンの一括指定 長さ,%, auto 0 上下左右マージン 長さ,%, auto 0 margin-top, margin margin-right, margin-left, margin-bottom border ボーダーの一括指定 border-width ボーダーの太さ border-style ボーダーの形状 border-color ボーダーの色 border 太さ,形状,色を 各プロパ スペース区切りで ティ参照 長さ, thin, medium, thick solid, dotted, dashed, none, etc. medium none #rrggbb, #rgb, color プロ カラー名,etc. パティ値 太さ,形状,色を 各プロパ スペース区切り ティ参照 長さ,% 0 上下左右パディング 長さ,% 0 border -top, border-right, border-left, 上下左右ボーダー border-bottom padding padding パディングの一括指 定 padding -top, padding -right, padding -left, padding -bottom width/ width 内容の幅 長さ,% , auto auto height height 内容の高さ 長さ,% , auto auto 20 例えば,「中段の main 部分を左,side 部分を右に配置し,下段の footer 部分を クリアさせる」場合には次のように指定する。 #main { width : 70% ; header float : left ; } #side { width : 30% ; main side float : right ; } #footer clear clear : both ; footer } 2.4.3 文字色・背景のプロパティ (1)「color」プロパティ 文字色を RGB 値やカラー名で指定する。 次の背景とのコントラストが保たれていないと,テキストが読み難くなる。 (2)背景プロパティ body { background-color : #fff ; background-image : url(bg.gif) ; background-repeat : repeat-x ; background-position : 0px -10px ; } * 背景はボーダー領域まで塗られるが,マージン領域には塗られない。 21 [color & background property] プロパティ 効 color 文字色 background-color 背景色 background-image 背景画像 background-repeat 果 背景画像の繰り返し 方法 background-attachment 背景画像の移動・固定 background-position 背景画像の開始位置 background 背景の一括指定 指定可能値 初期値 #rrggbb, #rgb, カ ラ ブラウザに ー名, etc. 依存 #rrggbb, #rgb, カ ラ ー名, etc. url(……), none transparent none repeat, repeat-x, repeat-y, no- repeat repeat scroll, fixed left, right, center, top, bottom, %, 長さ scroll 0% 各プロパティ値をス 各プロパテ ペース区切り ィ参照 22 2.4.4 フォント・テキストのプロパティ [font & text property] プロパティ 効 果 指定可能値 初期値 フォント名をカンマで ブラウザ 区切って複数指定 に依存 font-family フォントの種類 font-style フォントのスタイル normal, italic, oblique normal font-weight フォントの太さ normal, bold, et. normal font-size フォントの大きさ 長さ,%, medium font フォントの一括指定 text-indent テキストの行頭の字下げ幅 medium 各プロパティ値をスペ 各プロパ ース区切りで ティ参照 長さ,% 0 テキスト text-align テキストの行揃え left, right, center, justify の表記方 法に依存 text-decoration underline, テキストの装飾 line-through, none, etc. none テキストの大文字・小文字 capitalize, uppercase, の変換 lowercase, none letter-spacing テキストの文字間隔 normal, 長さ normal word-spacing テキストの単語間隔 normal, 長さ normal text-transform none 2.4.5 表のプロパティ [table property] プロパティ 効 果 指定可能値 初期値 caption-side 表のキャプション位置 top, bottom top table-layout 表のレイアウト指定 auto, fixed auto border-collapse 表ボーダーの表示方法 collapse, separate separate border-spacing 表ボーダー同士の間隔 長さ 0 empty-cells 空セルを表示方法 show, hide show 23 第 3 章 JavaScript 3.1 JavaScript とは 3.1.1 概要 ・Web ページを動的に制御するためのスクリプト言語 ・XHTML(eXtensible Hyper Text Markup Language)ファイル内に記述する。 ・1995 年「Netscape Navigator 2.0」に初めて搭載される。 3.1.2 特徴 ・XHTML ファイルのスクリプトブロック(<script>と</script>の間)にスクリプト文 を記述する。 ・スクリプト文の最後には必ずセミコロン( ; )をつける。 ・ブラウザ(browser)で XHTML ファイルを開くと,JavaScript 文が実行される。 ・プログラムの言語仕様は C 言語や Java 言語に類似している。 ・オブジェクト(object)の扱いなどにおいて Java 言語とは異なる。 ・Web ページへのアウトプットコマンド : document.wirte("文字列") ; ・Java アプレット(Java Applet)のメソッド(method)を使用することができる。 ・クッキー(cookie)情報の取得と設定が可能である。 [スクリプトブロック] <html> <head> <title> scriptBlock.html </title> </head> <body> <script type="text/javascript"> document.write("<hr>") ; //① document.write("<h3>東京国際大学/情報ビジネス学科</h3>") ; //② document.write("<hr>") ; </script> </body> </html> 24 ① document.write("<hr>") ; document は Web ページを指すオブジェクトであり,「write( )」はブラウザへ の出力を担う document オブジェクトの中の組み込み関数である。write 関数 の( )の中には文字列,変数,XHTML タグ,等々を指定する。「<hr>」は Web ペ ージに水平線を引く XHTML タグである。 ② document.write("<h3>東京国際大学/商学部/経営学科</h3>") ; 「<h3>」は Web ページに表示する文字の大きさを指定する XHTML タグであ る。「<h1>~<h6>」が使え, 「<h1>」を指定するともっとも大きな文字で内容が 書かれる。 [繰り返し構造] <html> <head> <title> loop.html </title> </head> <body> <script type="text/javascript"> var i ; //① for(i=1 ; i<11 ; i++) { //② document.write("hello<br />") ; //③ } </script> </body> </html> ① var i ; 変数宣言の予約語「var」を用いて変数「i」を宣言する。 ② for(i=1; i<11; i++) { 繰り返しの予約語「for」を用いて,i の値を 1 から 10 まで,i の値を 1 ずつ 増やしながら,この for 文の後ろについている{ }の中の文を繰り返し実行す る。 ③ document.write("hello<br />") ; Web ページに"hello"の文字列を書いた後,改行する。 25 [問題 1] 1 桁の整数,1 桁の整数の 2 乗値,および 1 桁の整数の 3 乗値を表示するプロ グラムを作成せよ。 3.1.3 デバッグ(debug) ・プログラム中のエラーを見つけて修正すること ・スクリプトの記述に誤りがあると,ブラウザはエラーを報告する。 ・Internet Explorer では,画面下のステータスバー(status bar)の左端に表示される エラーアイコンをクリックするとエラー表示ウィンドウが開かれ,その中の 「詳細情報」ボタンをクリックするとエラーの詳細情報が表示される。 3.2 JavaScript の文法Ⅰ 3.2.1 プログラムの構成要素 [要素の分類] ①JavaScript 既定の要素 予約語,演算子(operator),オブジェクト(object),メソッド(method) ②ユーザー定義の要素 変数,定数,ユーザー定義のオブジェクトと関数 [命令文(statement)] ・コンピュータに対して処理を指示する文 ・文の最後には必ずセミコロン( ; )を置かなければならない。 ・文の集まり=プログラム(program) [制御の流れ] ・実行順序を変える命令文を書かない限り,プログラムの文は上の方から下の方 に向けて順次実行される。 ・分岐や繰り返しなどのように,実行順序を変える命令文によってプログラムの 実行の流れが変わる。 [オブジェクトと関数] ・オブジェクトとは「操作対象物」であり,JavaScript 既定のものとユーザー定 義のものに分けられる。 ・関数はオブジェクトを操作するために記述する文の集まりである。 26 3.2.2 プログラムの書式 ・ひとまとまりの文をブロック(block)といい,中括弧( { } )で囲む。 ・ブロックの中にブロックが入る構造をネスト(nest)という。 ・if, else, 中括弧などの後ろにはセミコロン( ; )を置かない。 [ネスト構造] <html> <head> <title> nest1.html </title> </head> <body> <script type="text/javascript"> var i, for(i=1 ; j ; //① i<11 ; i++) { //② j=i%2 ; //③ if(j == 0) document.write(i+"は偶数です<br />") ; //④ else document.write(i+"は奇数です<br />") ; //⑤ } </script> </body> </html> ① var i, j; 変数「i」と「j」を宣言する。 ② for(i=1; i<11; i++) { 変数「i」の値を 1 から 10 まで,変数「i」の値を 1 ずつ増やしながら,for ブロックの中の文を繰り返し実行する。 ③ j=i%2 ; 変数「i」の値を 2 で割った余りを求めて,その値を変数「j」に代入する。 ④ if(j == 0) document.write(i+"は偶数です<br />") ; 変数「j」の値がゼロの場合, 「 *は偶数です」の文字列を表示する。 ⑤ else document.write(i+"は奇数です<br />") ; 変数「j」の値がゼロでない場合, 「 *は奇数です」の文字列を表示する。 27 [問題 2] 2桁の奇数の合計値と偶数の合計値を求めて表示するプログラムを作成せよ。 3.2.3 予約語 ・JavaScript 専用の単語として予め使用用途が決められている単語 if, else, for, while, do, var, void, switch, case, default, new, break, try, catch, true, false, throw, null, continue, delete, finally, function, in, instanceof, return, this, typeof, with, ・予約語を変数名として用いると,ブラウザはエラーを報告する。 3.2.4 定数と変数 [定数] ・数値定数 : 整数値(12, 345, 等)や実数値(1.2, 3.45, 等) ・文字列定数 : 2 重引用符("……")で囲んだ文字 ・真偽値定数 : 論理値の真を true,偽を false で表わす。 [変数] ・定数の保管場所 ・変数を宣言すると,メモリの中に変数が作られる。 ・変数宣言には予約語「var」を用いる。例えば, 「var hensu1 ; 」のように変数 を宣言する。 「var hensu1, dummy ; 」のように,カンマで区切ることによっ て複数の変数を宣言することができる。 [変数名] ・変数を識別するためにつける名前 ・変数名は英文字で始まるものでなければならない。 ・大文字と小文字を区別する。すなわち,GOUKEI, Goukei, GOUkei はいずれも異 なる変数名となる。 ・変数の役割を連想させる変数名をつけた方がいい。例えば,「heikin, goukei」 等のような変数名が望ましい。 28 3.2.5 演算子(operator) [代入演算子 : =] =の右側の定数を=の左側の変数に代入する。 [算術演算子 : +,-,*,/,%,-] +(加算),-(減算),*(乗算),/(除算),%(余乗算),-(マイナス符号) [文字列連結演算子 : +] 文字列と文字列をつなぐ。 [式] 定数を計算するために変数や定数を演算子で結んだもの 例えば, sum sum ( x * y / z ) ; [演算子] <html> <head> <title> operator.html </title> </head> <body> <script type="text/javascript"> var a=10, b=20, s, t ; //① document.write("初期状態 : a="+a+"/b="+b+"<br />") ; s=a ; a=b ; b=s ; //② document.write("値の交換後 : a="+a+"/b="+b+"<br />") ; t=a*b/s ; //③ document.write(a+"×"+b+"÷"+s+"="+t+"<br />") ; document.write("------------------------<br />") ; var str="Hello,"+"JavaScript" ; //④ document.write(str+"<br />") ; </script> </body> </html> 29 ① var a=10, b=20, s, t; 変数「a」 ,「b」,「s」,「t」を宣言し,変数「a」に 10,変数「b」に 20 を代 入する。変数「s」と「t」には何も代入しない。 ② s=a ; a=b ; b=s ; 変数「a」の値を変数「s」に代入し,変数「b」の値を変数「a」に代入する。 また,変数「s」の値を変数「b」に代入する。 ③ t=a*b/s ; 式「a×b÷s」の計算値を変数「t」に代入する。 ④ var str="Hello,"+"JavaScript" ; 文字列「Hello, 」と文字列「JavaScript」を連結した文字列を変数「str」に 代入する。 [問題 3] 5 つの変数にそれぞれ異なる数値を代入し,その平均値と分散を求めて表示す るプログラムを作成せよ。 (注) 分散:(データ-平均値)の 2 乗値の合計値/データの数 3.2.6「if/else」構造 ・条件に応じて2方向に分岐する。 if(条件式) { 文1 } 条件式が成り立つ(真の)場合は文 1 を実行し, else { 条件式が成り立たない(偽の)場合は文 2 を実行する。 文2 } 30 [比較演算子] 条件式において大小の比較を行うために用いる演算子 比較演算子 意 味 比較演算子 意 味 a == b a と b が等しい a != b a と b が等しくない a<b a が b より小さい a <= b a が b 以下 a>b a が b より大きい a >= b a が b 以上 [論理演算子] いくつかの条件を組み合わせるために用いる演算子 論理演算子 a!b 意 味 a と b が同じでない(not) a && b a と b が同時に成り立つ(and) a || b a と b のうちどちらか 1 つがなり立つ(or) [if/else 構造] <html> <head> <title> ifelse.html </title> </head> <body> <script type="text/javascript"> var eng=45, math=84 ; if(eng >= 60) document.write("英語(合 else 格)<br />") ; //① document.write("英語(不合格)<br />") ; //② document.write("-----------------<br />") ; //③ if(math >= 60) document.write("数学(合 格)<br />") ; else </script> </body> </html> document.write("数学(不合格)<br />") ; 31 ① if(eng >= 60) document.write("英語(合 格)<br />") ; 変数「eng」の値が 60 以上の場合,文字列「英語(合 格)」を表示し,次の行 ②を実行せず③の行に制御を移す。 ② else document.write("英語(不合格)<br />") ; 変数「eng」の値が 60 未満の場合,文字列「英語(不合格) 」を表示し,次の 行③に制御を移す。 [問題 4] 英語と数学の点数が一方でも 60 点未満の場合は「不合格」になるとする。 3 人の学生の英語と数学の点数(A : 英語 87 点,数学 54 点/B : 英語 46 点,数 学 72 点)/C : 英語 72 点,数学 68 点)に対して合格か不合格かを判別して表示 するプログラムを作成せよ。 [問題 5] 西暦の年度を入力しその年度が閏年であるかどうかを調べてその結果を表示す るプログラムを作成せよ。閏年は次のいずれかを満たす年度である。 ・年度が 400 で割り切れる。 ・年度が「4 で割り切れる」&&「100 で割り切れない」 3.2.7「else/if」構造 ・条件に応じて複数方向に分岐する。 if(条件式 1) { 文1 } 条件式 1 が成り立つ場合には文 1 を実行し, else if(条件式 2) { 条件式 1 が成り立たず,条件式 2 が成り立つ 文2 } 両方成り立たない場合には文 3 を実行する。 else{ 文3 } 場合には文 2 を実行し,条件式 1 と条件式 2 が 32 [else/if 構造] <html> <head> <title> elseif.html </title> </head> <body> <script type="text/javascript"> var i, n; var a=new Array(91, 65, 43, 85, 72) ; //① n=a.length ; //② for(i=0 ; i < n ; i++) { //③ if(a[i] > 90) document.write("("+(i+1)+")"+a[i]+"点(評価 S)<br />") ; else if(a[i] > 80) document.write("("+(i+1)+")"+a[i]+"点(評価 A) <br />") ; else if(a[i] > 70) document.write("("+(i+1)+")"+a[i]+"点(評価 B) <br />") ; else if(a[i] > 60) document.write("("+(i+1)+")"+a[i]+"点(評価 C) <br />") ; else document.write("("+(i+1)+")"+a[i]+"点(評価 F)<br />"); } </script> </body> </html> ① var a=new Array(91, 65, 43, 85, 72) ; 配列「a」を生成すると同時に,その配列要素に初期値を与える。 ② n=a.length ; 配列「a」の要素数を求めて,その値(5)を変数「n」に代入する。 ③ for(i=0; i < n; i++) { 繰り返し構造を用いて配列 a[ ]のなかの点数を S~F に変換する。 33 [問題 6] 「else/if」文を用いて成績「A, B, F, S, B, C,」の GPA(S→4 点,A→3 点,B→2 点,C→1 点,F→0 点としたときの平均値)を求めるプログラムを作成せよ。 3.2.8「switch/case」構造 ・条件に応じて複数方向に分岐する。 switch(式) { case 定数式 1 : 文1 ; break ; switch の式と各 case の定数式を case 定数式 2 : 文2 ; break ; 比較し,一致したところの文を ・・・・・・・・・・・ case 定数式 m : 文 m ; break ; default break ; : 文n ; 実行してから,break 文により switch 文から抜ける。 } [switch/case 構造] <html> <head> <title> switchCase.html </title> </head> <body> <script type="text/javascript"> var i, n, sum=0, gpa ; var score=new Array("A", "B", "F", "S", "B", "C") ; //① n=score.length ; //② for(i=0 ; i < n ; i++) { //③ switch( score[i] ) { //④ case "S" : sum+=4 ; break ; //⑤ case "A" : sum+=3 ; break ; case "B" : sum+=2 ; break ; case "C" : sum+=1 ; break ; default : sum+=0 ; break ; //⑥ 34 } //The end of switch-case block } //The end of for block gpa=sum/n ; //⑦ document.write("* GPA="+gpa+"<br />") ; </script> </body> </html> ① var score=new Array("A", "B", "F", "S", "B", "C") ; 配列「score」を生成すると同時に,その配列要素に初期値を代入する。これ によって,score[0]="A", score[1]="B", ・・・, score[5]="C" となる。 ② n=score.length ; 配列「score」の要素数(6)を求めて,その値を変数「n」に代入する。 ③ for(i=0 ; i < n ; i++){ 変数「i」の値を 0 から n-1 まで,変数「i」の値を 1 ずつ増やしながら,以下 の for ブロックを繰り返し実行する。 ④ switch( score[i] ) { 配列「score」の要素値に基づいて以下の switch-case ブロックを実行する。 ⑤ case "S" : sum+=4 ; break ; 配列「score」の要素値が「S」の場合,変数「sum」の値に 4 を加えた後, switch-case ブロックを抜ける。 ⑥ default : sum+=0 ; break ; 配列「score」の要素値が「S」,「A」 , 「B」 ,「C」でない場合,変数「sum」の 値に 0 を加えた後,switch-case ブロックを抜ける。 ⑦ gpa=sum/n ; 変数「sum」の値を変数「n」の値で割り,その計算値を変数「gpa」に代入す る。 [問題 7] 上記のプログラム(switchCase.html)を拡張することによって,「S, A, B, C」の場 合は「合格」,F の場合は「不合格」と表示し,最後に合格の科目数と不合格の科 目数を調べて表示するプログラムを作成せよ。 35 3.2.9「for」構造 ・予め決めておいた回数を繰り返す。 for(式 1 ; 式 2 ; 式 3) { 式 1 : 初期値の指定式 文 式 2 : 繰り返し終了値の指定式 } 式 3 : 増減値の指定式 [for 構造] <html> <head> <title> signleLoop.html </title> </head> <body> <script type="text/javascript"> var i, sum1=0, sum2=0 ; for(i=10 ; i < 100 ; i++) { //① sum1=sum1+i ; //② sum2=sum2+i*i ; //③ } document.write("2 桁整数の合計値="+sum1+"<br />") ; document.write("2 桁整数の 2 乗値の合計値="+sum2+"<br />") ; </script></body></html> ① for(i=10; i < 100; i++) { 変数「i」の値を 10 から 99 まで,変数「i」の値を 1 ずつ増やしながら,for ブロックの中の文を繰り返し実行する。 ② sum1=sum1+i ; 変数「sum1」の値に変数「i」の値を足し,その合計値を変数「sum1」に代入 する。 ③ sum2=sum2+i*i ; 変数「sum2」の値に変数「i」の値の 2 乗値を足し,その合計値を変数 「sum2」に代入する。 36 [問題 8] n 日目に 2 n 円ずつ貯金していく場合,はじめて 100 万円を超える日数を求めて 表示するプログラムを作成せよ。 3.2.10 多重「for」構造 <html> <head> <title> multipleLoop.html </title> </head> <body> <script type="text/javascript"> var i, j; document.write("<pre>") ; for(i=0 ; i<5 ; i++) { //① for(j=i ; j < 5 ; j++) document.write("*") ; //② document.write("<br />") ; //③ } document.write("</pre> ") ; </script> </body> </html> ① for(i=0; i < 5; i++) { 変数「i」の値を 0 から 4 まで,変数「i」の値を 1 ずつ増やしながら,for ブロ ックの中の文を繰り返し実行する。 ② for(j=i; j < 5; j++) document.write("*") ; 変数「j」の値を変数「i」の値から 4 まで,変数「j」の値を 1 ずつ増やしなが ら,document.write 文を繰り返し実行する。これによって "*" が複数個横に描 き並べられる。 ③ document.write("<br />") ; 改行した後,外の繰り返し文(①)に制御を移す。 37 [問題 9]以下のように表示するプログラムを作成せよ。 * ** *** **** ***** 3.2.11 配列(array) (1) 1 次元配列 ・1 次元配列の生成 JavaScript の Array クラスのコンストラクター(constructor)を利用してメモリの 中に配列要素を生成する。 例えば, 「var a=new Array(5) ;」の文は,メモリの中に a[0], a[1], a[2], a[3], a[4] の配列要素を生成する。 * JavaScript では配列要素の index は「0」から始まる。 ・1 次元配列の初期化法 ① 生成と初期化を別々に行う方法 var a=new Array(5) ; //5 つの要素をもつ配列「a」の生成 for(i=0 ; i<a.length ; // a[0]=999, i++) a[1]=999, a[i]=999 ; //配列「a」の初期化 a[2]=999, a[3]=999, a[4]=999 ② 生成と初期化を同時に行う方法 var b=new Array(91, 65, 43, 85, 72) ; //配列「b」の初期化 // b[0]=91, b[1]=65, b[2]=43, b[3]=85, b[4]=72 38 [1 次元配列の生成とコピー] <html> <head> <title> array.html </title> </head> <body> <script type="text/javascript"> var i, n; var a=new Array(5) ; //① var b=new Array(91, 65, 43, 85, 72) ; //② n=b.length ; //③ for(i=0 ; i < n ; i++) { //④ a[i]=b[i] ; //⑤ document.write("a["+i+"]="+a[i]+"/b["+i+"]="+b[i]+"<br />") ; } </script> </body> </html> ① var a=new Array(5) ; メモリの中に 5 つの要素をもつ配列「a」を生成する。 ② var b=new Array(91, 65, 43, 85, 72) ; メモリの中に 5 つの要素をもつ配列「b」を生成し,その配列要素に初期値を 代入する。これによって,b[0]=91, b[1]=65, b[2]=43, b[3]=85, b[4]=72 とな る。 ③ n=b.length ; 配列「b」の要素数(5)を求めて,その値を変数「n」に代入する。 ④ for(i=0 ; i < n ; i++) { 変数「i」の値を 0 から n-1 まで,変数「i」の値を 1 ずつ増やしながら,以下 のブロックを繰り返し実行する。 ⑤ a[i]=b[i] ; 配列「b」の値を配列「a」に代入する。 39 [問題 10] 初期化した配列要素 a[ ]の値を次のように逆順に配列要素 b[ ]にコピーして表示 するプログラムを作成せよ。 a[0]=72 / b[0]=91 a[1]=85 / b[1]=65 a[2]=43 / b[2]=43 a[3]=65 / b[3]=85 a[4]=91 / b[4]=72 [問題 11] 上記問題の配列要素 a [ ]の値の中から最大値を選んで表示するプログラムを作 成せよ。 (2) 2 次元配列 ・3 行 4 列の配列の生成 var i ; var a=new Array(3) ; //3 行 for(i=0 ; i<a.length ; a[i]=new i++) { Array(4) ; //各行ごとに 4 列 } 0列 1列 2列 3列 0行 a[0][0] a[0][1] a[0][2] a[0][3] 1行 a[1][0] a[1][1] a[1][2] a[1][3] 2行 a[2][0] a[2][1] a[2][2] a[2][3] 40 国語 数学 英語 平均値 学生 1 34 83 55 0 学生2 67 49 75 0 平均値 0 0 0 0 [2 次元配列の初期化と表示] <html> <head> <title> initialization.html </title> </head> <body> <script type="text/javascript"> var i, j, m, n; var a=new Array(3) ; //① a[0]=new Array(34, 83, 55, 0) ; //② a[1]=new Array(67, 49, 75, 0) ; //③ a[2]=new Array(0, 0, 0, 0) ; //④ m=a.length ; //⑤ n=a[0].length ; //⑥ document.write("<pre>") ; for(i=0 ; i < m ; i++) { for(j=0 ; j<n; j++) document.write("a["+i+"]["+j+"]="+a[i][j]+",") ; document.write("<br />") ; } document.write("</pre>") ; </script> </body> </html> 41 ① var a=new Array(3) ; 3 行の配列 a[ ]を宣言する。 ② a[0]=new Array(34, 83, 55, 0) ; 配列 a[ ]の 0 行の 4 列に初期値を与える。 ③ a[1]=new Array(67, 49, 75, 0) ; 配列 a[ ]の 1 行の 4 列に初期値を与える。 ④ a[2]=new Array(0, 0, 0, 0) ; 配列 a[ ]の 2 行の 4 列に初期値を与える。 ⑤ m=a.length ; 配列 a[ ]の行数を求めて,その値を変数「m」に代入する。 ⑥ n=a[0].length ; 配列 a[ ]の 0 行の列数を求めて,その値を変数「n」に代入する。 [問題 12] 上記のプログラム(initialization.html)で作成した配列 a[ ]を用いて,学生別の平 均値と科目別の平均値を求めて表示するプログラムを作成せよ。 42 3.3 JavaScript の文法Ⅱ 3.3.1 関数(function) ・特定の処理を受け持つ文の集まり プログラムの中で同じ処理を複数回実行しなければならない場合,その処理プ ロセスを複数回記述するのは効率的でない。同じ処理を一箇所にまとめてお き,その処理を使いたいときに呼び出して使うようにすれば効率がよい。この ように,特定の処理を一箇所にまとめたものを「関数」という。 2 2 ・数学における関数 : f ( x ) x x 1 f (2) 2 2 1 7 ・JavaScript における関数 : 呼び出し側 関数定義部 実引数(2)を x に渡す var y function f(x) { y=f(2) return x*x+x+1 ; ・・・ } 戻り値(7)を y に返す ・通常関数は<head>部に定義し,<body>部で呼び出して利用する。 ・プログラムの中に複数個の関数を定義することができるので,個々の関数の区 別ができるように,各関数には固有の名前をつける。関数名の付け方は変数名 のそれと同じである。 ・関数に何らかの処理を行わせるために必要な情報を「引数」という。関数の定 義部に書く引数を「仮引数」といい,変数を指定する。関数の呼び出し側に書 く引数を「実引数」といい,数値や式などを指定する。 ・JavaScript の引数渡しは「値渡し」で行う。 ・関数の処理結果は関数定義部のなかの「return」指定により関数の呼び出し側に 戻される。これを「戻り値」という。 43 [関数の定義と実行] <html> <head> <title> function.html </title> <script type="text/javascript"> function f(x) { //① return x*x+x+1 ; //② } </script> </head> <body> <script type="text/javascript"> var y ; y=f(2) ; //③ document.write("f(x)=x*x+x+1→") ; document.write("f(2)="+y+"<br />") ; </script> </body> </html> ① function f(x) { 1 つの仮引数(x)を持つ関数「f」を定義する。仮引数「x」には呼び出し側で指 定する実引数が与えられる。 ② return x*x+x+1 ; ( x 2 x 1) を計算し,その計算値を関数の呼び出し側に戻す。 ③ y=f(2) ; 仮引数「x」に実引数(2)を与えながら関数「f」を呼び出し(関数が実行され), 関数の実行による処理結果(戻り値)を変数「y」に代入する。 44 [問題 13] 階乗(例えば,5 ! = 5×4×3×2×1=120)を求める関数「factorial」を定義し, その関数を用いて 0 !~10 ! を求めて表示するプログラムを作成せよ。 [値渡しと参照渡し] ・値渡し 通常の変数は「値渡し」でデータが渡されるので,関数定義部の仮引数を使っ て呼び出し側の実引数の内容を変更することはできない。 ・参照渡し オブジェクトや配列などは個々の値が渡されるのではなく,「参照(アドレス)」 が渡されるので,関数定義部の仮引数を使って呼び出し側の実引数の内容を変 更することができる。 [変数のスコープ] ・グローバル変数(global variable) 関数の外で宣言された変数はファイルのどこからでもアクセスすることができ る。 ・ローカル変数(local variable) 関数の中で宣言された変数はその関数の中でしかアクセスすることができな い。 [実引数の数が一定でない関数] 一定でない「幾つかの数値」を処理する関数の場合,仮引数を持たない関数と して定義し,「arguments オブジェクト」で引数の数を決める。 arguments[0]→1 番目の実引数, arguments[1]→2 番目の実引数, arguments[2]→3 番目の実引数, ・・・・・・・・・・・・・・ 45 [仮引数を持たない関数] <html> <head> <title> functionWithoutParameter.html </title> <script type="text/javascript"> function maxValue( ) { //① var i, n, result=0 ; n=arguments.length ; //② for(i=0 ; i<n ; i++) { if(result < arguments[i]) result=arguments[i] ; //③ document.write(arguments[i]+"/") ; } document.write("この中の最大値="+result+"<br />") ; //return result ; } </script> </head> <body> <script type="text/javascript"> maxValue(2, 4, 11, 3, 8, 5, 4, 6) ; //④ document.write("<br />") ; maxValue(21, 65, 38, 24) ; //⑤ </script> </body> </html> 46 ① function maxValue( ) { 仮引数を持たない関数 maxValue( )を定義する。 ② n=arguments.length ; 実引数の数を求めて,その値を変数「n」に代入する。 ③ if(result < arguments[i]) result=arguments[i] ; 変数「result」の値と実引数の 1 つ(arguments[i])を比較して,実引数の値が変 数「result」の値より大きい場合,実引数の値を変数「result」に代入する(変 数「result」の値を更新する)。 ④ maxValue(2, 4, 11, 3, 8, 5, 4, 6) ; ⑤ maxValue(21, 65, 38, 24) ; 関数 maxValue( )を呼び出す(実行する)。 [問題 14] 配列値が-値の場合それを+値に変換する関数「henkan」を定義し,その関数 を用いて元の配列値をすべて+値に変換した後,元の配列値と変換後の配列値の 両方を表示するプログラムを作成せよ。 [問題 15] 2 つの「2 行 3 列の配列」を加算する関数「add」を定義し,その関数を用い て下記の「2 行 3 列の配列」を加算して表示するプログラムを作成せよ。 1 2 3 10 20 30 + 4 5 6 11 22 33 = 40 50 60 44 55 66 47 3.3.2 オブジェクト(object) (1)オブジェクトとは ・プロパティ(property)とメソッド(method)で構成されるデータ構造 プロパティ=オブジェクトの状態や特性を表わす値 メソッド=オブジェクトを操作するための関数 (2)生成方法 ・ 「=new」演算子と「コンストラクター(constructor)」を使ってオブジェクトを生 成する。 ・コンストラクターとは,オブジェクトを生成・初期化するために用いる「戻り値 を持たないメソッド」である。 ・コンストラクターは JavaScript のクラスの中に定義されている。 例えば,Date クラスのオブジェクト「present」を生成するには次のように書 く。 var present=new Date( ) ; //Date( )がコンストラクター これによって,Date クラスとまったく同じ中身をもつオブジェクト「present」 が生成される。 (3)利用方法 ・「オブジェクト.メソッド」あるいは「オブジェクト.プロパティ」と指定する。 例えば, var present=new Date( ) ; present . setTime ( present . getTime( )+x*3600000) ; (オブジェクト) (メソッド) msg=present . getHours( )+"時" ; ・オブジェクトを生成せず,クラス名をそのまま用いてそのクラスの中のプロパテ ィとメソッドを利用するクラスがある。Math クラスがその代表例である。 48 [オブジェクトとメソッド] <html> <head> <title> object.html </title> <script type="text/javascript"> function presentTime(x) { //① var msg ; var present=new Date( ) ; //② present.setTime(present.getTime( )+x*3600000) ; //③ msg=present.getHours( )+"時" ; //④ msg+=present.getMinutes( )+"分" ; //⑤ msg+=present.getSeconds( )+"秒" ; //⑥ return msg ; //⑦ } </script> </head> <body> <script type="text/javascript"> document.write("東京の時刻 : "+presentTime(0)+"<br />") ; //⑧ document.write("NYの時刻 : "+presentTime(-14)+"<br />") ; //⑨ </script> </body> </html> ① function presentTime(x) { 1 つの仮引数(x)をもつ関数「presentTime」を定義する。 ② var present=new Date( ) ; JavaScript の Date クラスのオブジェクト「present」を生成する。 このオブジェクトには現在の時刻が記憶される。 ③ present.setTime(present.getTime( )+x*3600000) ; 現在の時刻を設定する。 49 ④ msg=present.getHours( )+"時" ; ⑤ msg+=present.getMinutes( )+"分" ; ⑥ msg+=present.getSeconds( )+"秒" ; 時刻を「○○時○○分○○秒」の形式の文字列に変換し,変数「msg」に代入 する。 ⑦ return msg ; 変数「msg」の値("○○時○○分○○秒")を戻り値として返す。 ⑧ document.write("東京の時刻 : "+presentTime(0)+"<br />") ; 関数「presentTime」に東京との時差(0)を与え,東京の時刻を求め表示する。 ⑨ document.write("NYの時刻 : "+presentTime(-14)+"<br />") ; 関数「presentTime」に東京との時差(-14)を与え,NY の時刻を求め表示する。 [問題 16] 現在の日時を取得しそれを表示するとともに,現在の時刻が午前か午後かを判 断して次のように表示するプログラムを作成せよ。 今日は「○○○○年○○月○○日」です。 現在の時刻は「午前○○時○○分」です。 50 3.3.3 JavaScript の定義済みオブジェクト (1) document オブジェクト ・HTML ファイルおよびそこに記述されるドキュメント情報の提供・操作を行うた めのオブジェクトである。画面上に表示されているページに関するあらゆる情報 (文字列,画像,フォーム,リンクなど)を持つ。 ・document オブジェクト自体が window オブジェクトのプロパティでもある。 ・document オブジェクト自身も,Link オブジェクト,Image オブジェクト,Area オブジェクト,Anchor オブジェクト,Form オブジェクト,等々の多くのオブジ ェクトをプロパティとして含んでいる。 ・document オブジェクトを記述する場合,最上層オブジェクトの「window」オブ ジェクトは省略可能である。 ・document オブジェクトのプロパティとその機能 プロパティ 機 能 cookie クッキーの設定/取得 forms フォーム配列 lastModified 最終更新日時の取得 referrer コール元のURLの取得 title ドキュメントのタイトルの取得 URL 現ページのURLの取得 ・document オブジェクトのメソッドとその機能 メソッド close( ) 機 能 表示ストリーム (open で開始したドキュメントの出力) を閉じる。 open( ) 表示ストリーム(ドキュメントの出力) を開始する。 getElementById( ) 特定の ID 名のオブジェクトにアクセスする。 getElementsByName( ) 特定の要素名のオブジェクト全てにアクセスする。 write(“文字列”) ページに指定した文字列を表示する。 writeln(“文字列”) ページに指定した文字列を表示して改行する。 51 [getElementById( )] <html> <head> <title> byId.html </title> </head> <body> <font id="f1" size="3" color="blue">JavaScript<br /></font> //① <font id="f2" size="3" color="blue">JavaScript<br /></font> //② <script type="text/javascript"> var obj=document.getElementById("f2") ; //③ obj.size="6" ; //④ obj.color="red" ; //⑤ </script> </body> </html> ① <font id="f1" size="3" color="blue">JavaScript<br /></font> id 名「f1」のフォントオブジェクトを生成し,そのフォントで「JavaScript」の 文字列を書く。 ② <font id="f2" size="3" color="blue">JavaScript<br /></font> id 名「f2」のフォントオブジェクトを生成し,そのフォントで「JavaScript」の 文字列を書く。 ③ var obj=document.getElementById("f2") ; id 名「f2」のフォントオブジェクトを取得し,それを変数「obj」に代入する。 ④ obj.size="6"; 変数「obj」のフォントサイズを「6」に変更する。 ⑤ obj.color="red"; 変数「obj」のフォント色を「red」に変更する。 52 [getElementByName( )] <html> <head> <title> byName.html </title> </head> <body> <font id="f1" size="3" color="blue">JavaScript<br /></font> //① <font id="f1" size="3" color="blue">JavaScript<br /></font> //② <script type="text/javascript"> var obj=document.getElementsByName("f1") ; //③ obj[0].size="6" ; //④ obj[0].color="red" ; //⑤ obj[1].size="9" ; //⑥ obj[1].color="green" ; //⑦ </script> </body> </html> ① <font id="f1" size="3" color="blue">JavaScript<br /></font> ② <font id="f1" size="3" color="blue">JavaScript<br /></font> 同じサイズと色をもつフォントで文字列("JavaScript")を書く。 ③ var obj=document.getElementsByName("f1") ; id 名「f1」のフォントオブジェクトをすべて取得し,それらを配列「obj」に 代入する。 ④ obj[0].size="6" ; ⑤ obj[0].color="red" ; id 名「f1」のフォントオブジェクトの中の最初のフォントオブジェクトのサイ ズと色を変更する。 ⑥ obj[1].size="9" ; ⑦ obj[1].color="green" ; id 名「f1」のフォントオブジェクトの中の 2 番目のフォントオブジェクトのサ イズと色を変更する。 53 (2) form オブジェクト ・form に関する情報を提供したり,操作を行うためのオブジェクト ・HTML の「form」要素を,JavaScript のオブジェクトとして取り扱う。 ・データ入力を受け付けて送信するだけでなく,入力内容のチェックや入力された データの計算を,ブラウザ側で行ったり,リアルタイムでフォームの内容を変化 させるなど,フォームの利用方法を広げることが可能である。 ・form オブジェクトはそれ自体が document オブジェクトのプロパティとなる。 ・form オブジェクトを記述する場合,最上層の「window」オブジェクトは省略可 能である。 ・form オブジェクトには,Textarea オブジェクト,Text オブジェクト,FileUpload オブジェクト,Password オブジェク ト,Hidden オブジェクト, Submit オブジ ェクト,Reset オブジェクト, Radio オブジェクト,Checkbox オブジェクト, Button オブジェクト,Select オブジェクト,等々の多くのオブジェクトをプロパ ティとして持っている。 ・form オブジェクトのプロパティとその機能 プロパティ 機 能 action フォームデータの送り先 encoding フォームの MINE エンコード情報 method フォームデータの送信方法 length オブジェクト(配列)の数 name オブジェクト名 ・form オブジェクトのメソッドとその機能 メソッド 機 能 submit フォームの内容を送信する。 reset フォームをリセットする。 toString オブジェクトを文字列で返す。 valueOf オブジェクト内の値を返す。 toSource オブジェクト内の値を文字列で返す。 54 [form オブジェクト] <html> <head> <title> form.html </title> <script type="text/javascript"> function presetMsg( ){ document.myForm.msgBox.value="ここに自由な意見を お書きください。" ; //① } </script> </head> <body> <form name="myForm" action="#" <input type="button" method="post"> //② name="attn" value="案内" onClick="presetMsg( )"> //③ <input type="text" name="msgBox" size="50"> //④ <input type="submit" name="send" value="送信"> //⑤ </form> </body> </html> ① document.myForm.msgBox.value="ここに自由な意見をお書きください。"; 文字列「ここに自由な意見をお書きください。」を document オブジェクトの 「myForm.msgBox.value」に代入する。 ② <form name="myForm" action="#" method="post"> フォームデータの名前,送信先,送信方法,等々を指定する。ここでは送信先 を指定していない。 ③ <input type="button" name="attn" value="案内" onClick="presetMsg( )"> 案内ボタンを生成し,それがクリックされたら関数「presetMsg」を呼び出して 実行する。 ④ <input type="text" name="msgBox" size="50"> メッセージ入力欄を生成する。 55 ⑤ <input type="submit" name="send" value="送信"> 送信ボタンを生成する。 [document オブジェクトのメソッド] <html> <head> <title> document.html </title> <script type="text/javascript"> function documentObj( ) { //① var text=document.getElementById("textBox") ; //② var copy=document.getElementById("displayBox") ; //③ copy.innerHTML=text.value ; //④ } </script> <style type="text/css"> p#displayBox { //⑤ padding : 10px ; background-color : #ccccff ; } </style> </head> <body> <form action="#"> <input type="button" value="右側のテキストボックスにテキスト を入力してクリックせよ" onclick="documentObj( )" /> //⑥ <input type="text" value="テキスト入力欄" id="textBox" /> //⑦ <p id="displayBox">ボタンをクリックすると,テキストボックス の入力値がここに表示されます。</p> //⑧ </form> </body> </html> 56 ① function documentObj( ) { 関数「documentObj」を定義する。 ② var text=document.getElementById("textBox") ; id 名が「textBox」のフォーム要素を取得して変数「text」に代入する。 ③ var copy=document.getElementById("displayBox") ; id 名が「displayBox」のフォーム要素を取得して変数「copy」に代入する。 ④ copy.innerHTML=text.value ; 変数「text」の中身を HTML ページに表示する。 ⑤ p#displayBox { id 名が「displayBox」のブロックの修飾を指定する。 ⑥ <input type="button" value="右側のテキストボックスにテキストを 入力してクリックせよ" onclick="documentObj( )" /> Web ページ上に文字列「右側のテキストボックスにテキストを入力してクリッ クせよ」を含んだボタンを設け,そのボタンがクリックされたら関数 「documentObj」を実行する。 ⑦ <input type="text" value="テキスト入力欄" id="textBox" /> id 名が「textBox」のテキスト入力欄を設ける。 ⑧ <p id="displayBox">ボタンをクリックすると,テキストボックスの入力値が ここに表示されます。</p> id 名が「displayBox」のテキスト表示欄を設ける。 [問題 17] 以下のような形式で足し算と引き算ができるようにプログラムを作成せよ。 * 左側のボックスに数字を入力してイコールのボタンをクリックせよ。 clear + = - = 57 (3) Math オブジェクト ・数学に関わるプロパティとメソッドを集めたオブジェクト ・Math オブジェクトの主なプロパティ プロパティ 値 E 自然対数の底。2.71828…… LN2 2 の自然対数。0.69314…… LN10 10 の自然対数。2.30258…… LOG2E 2 を底とする自然対数の底 e の対数。1.44269…… LOG10E 10 を底とする自然対数の底 e の対数。0.43429…… PI 円周率。3.14159…… ・Math オブジェクトの主なメソッド メソッド 戻り値 abs(x) x の絶対値 max(v1, v2, ……,vn) v1~vn のなかの最大値 min(v1, v2, ……,vn) v1~vn のなかの最小値 random( ) 0 以上 1 未満のランダムな数 round(x) x の四捨五入 ceil(x) x の小数点以下を切り上げる。 floor(x) x の小数点以下を切り捨てる。 exp(x) e(自然対数の底)の x 乗 log(x) x の自然対数 pow(x, y) xのy乗 sqrt(x) x の平方根 58 [Math オブジェクトのメソッド] <html> <head> <title> math.html </title> </head> <body> <script type="text/javascript"> var deme1=Math.floor(Math.random( )*6)+1 ; //① var deme2=Math.floor(Math.random( )*6)+1 ; var wa=deme1+deme2 ; document.write("出目1("+deme1+")/出目2("+deme2+")<br />") ; document.write("<br />") ; document.write("出目の和 : "+wa+"<br />") ; document.write("<br />") ; document.write("root("+deme+")="+Math.sqrt(wa)+"<br />") ; //② </script> </body> </html> ① var deme1=Math.floor(Math.random( )*6)+1; Math オブジェクトのメソッド「random」を利用してサイコロの目(1~6)を生成 する。 ② document.write("root("+deme+")="+Math.sqrt(wa)+"<br />"); Math オブジェクトのメソッド「sqrt」を利用してサイコロの出目の和の平方根 を求める。 [問題 18] 2 つのサイコロを 1000 回投げたとき,同じ目の出た回数を求めて表示するプ ログラムを作成せよ。 59 (4) String オブジェクト ・文字列を処理するためのオブジェクト ・String オブジェクトのプロパティ プロパティ length 機 能 文字列の長さを取得する。 ・String オブジェクトの主なメソッド メソッド 戻り値 charAt(x) 先頭から x 文字目の 1 文字を取得する。 concat(s1[, s2……] s1, s2……で示す文字列を連結する。 slice(x) 先頭から x 文字目以降のすべての文字を取得する。 slice(x, y) 先頭から x 文字目~(y-1)文字目を取得する。 subString(x, y) 先頭から x 文字目~(y-1)文字目を取得する。 toLowerCase( ) 小文字に変換する。 toUpperCase( ) 大文字に変換する。 split(区切り文字) 文字列を区切り文字で分割する。 [String オブジェクトのメソッド] <html> <head> <title> string.html </title> </head> <body> <script type="text/javascript"> var str="0123456789" ; //① document.write("slice(2) = "+str.slice(2)+"<br />") ; //② document.write("slice(5, 8) = "+str.slice(5, 8)+"<br />") ; //③ </script> </body> </html> 60 ① var str="0123456789" ; String オブジェクト「str」に文字列「0123456789」を代入する。 ② document.write("slice(2)="+str.slice(2)+"<br />") ; String オブジェクト「str」に代入されている文字列の 2 文字目以降のすべての 文字を切り出す。 ③ document.write("slice(5, 8)="+str.slice(5, 8)+"<br />") ; String オブジェクト「str」に代入されている文字列の 2 文字目から(8-1)文字目 までを切り出す。 [String オブジェクトの split( )] <html> <head> <title> split.html </title> </head> <body> <script type="text/javascript"> var str="orange, apple, banana" ; var fruit=str.split(",") ; //① for(i=0 ; i<fruit.length ; i++) document.write(fruit[i]+"<br />") ; //② </script> </body> </html> ① var fruit=str.split(","); 文字列変数「str」のなかの文字列を区切り文字(カンマ)で分割し,配列 「fruit」の中に代入する。 ② for(i=0 ; i<fruit.length ; i++) document.write(fruit[i]+"<br />"); 配列「fruit」を書き出す。 [問題 19] 商品の単価と購入数量を入力すると, 「税抜金額」 ,「消費税」,および「税込金 額」を計算して表示するプログラムを作成せよ。 61 3.3.4 イベント(event) ・フォーム(form)のボタンをクリックしたり,テキストボックスに文字を入力した 後エンターキーを押したなどのときに生じる事象をイベントという。 ・イベントが発生すると,<input>タグの中に指定する「イベント処理関数」が呼 び出されてイベントが処理される。 ・諸イベント (1)マウスイベント マウス操作(クリック,ダブルクリック,マウスダウン,マウスアップ,マウス 移動)が行われたときに発生する。 (2)キーボードイベント キーボード操作(キーダウン,キープレス,キーアップ)が行われたときに発生 する。 (3)フォームイベント フォーム上で何らかの操作が行われたときに発生する。 (4)ウインドウイベント ウィンドウが移動・サイズ変更されたときに発生する。 (5)ページイベント フォーム上でオブジェクトの状態が変化したり,フォーカスされたりしたときに 発生する。 (6)イメージイベント イメージ(画像)の読み込みの完了・中断・失敗したときに発生する。 (7)タイマーイベント ユーザーが何かをするというのではなく,時間経過に従ってある処理を行う場合 に使われる。 (8)暗黙のイベント スクリプトや HTML ファイル の中で特に定義しなくても発生するイベント。 HTML ファイルの中に書かれたソースはページが読み込まれると自動的に実行 され, ハイパーリンクをクリックすればマウスクリックイベントと同じイベン トが発生する。 62 ・ イ ベ ン ト を 記 述 す る に は 「 <input type="button" onClick=" ( 処 理 ) "> 」 や 「window.onMouseMove =(関数)」のように,「on+イベント名」で表すことが多 いが,タイマーイベントは実際には別のイベント(ボタンをクリックする,ペー ジが読み込まれる,等々)から呼び出されるため異なる書き方になる。また暗黙 のイベントにはイベント名は使われない。 ・イベントを明示的に呼び出す場合,「<input type="button" onClick="(処理)">」 のようにタグの属性(attribute)にイベントを記述する方法, スクリプトの中で 「window.onMouseMove=(関数)」のようにオブジェクトのプロパティとして記述 する方法,「<script for="window" event="onLoad">」のように<script> タグの event 属性の値として呼び出す方法などがある。 ・イベントアトリビュート(event attribute) イベント イベントが発生するとき 対象オブジェクト アトリビュート onLoad イベントがロードされたとき <body> onUnload イベントがアンロードされたとき <body> onClick クリックされたとき ほとんどのタグが対象 onDblClick ダブルクリックされたとき ほとんどのタグが対象 onChange 値が変化したとき <input><select><textarea> onSelect テキストが選択されたとき <input><textarea> onReset フォームのリセットボタンが押されたとき <form> onSubmit フォームのサブミットボタンが押されたとき <form> onKeyDown キーが押されたとき ほとんどのタグが対象 onKeyPress キーが押されて離されたとき ほとんどのタグが対象 onKeyUp キーが離されたとき ほとんどのタグが対象 onMouseDown マウスボタンが押されたとき ほとんどのタグが対象 onMouseUp マウスボタンが離されたとき ほとんどのタグが対象 onMouseOut マウスがオブジェクトから出たとき ほとんどのタグが対象 onMouseOver マウスがオブジェクトに入ったとき ほとんどのタグが対象 onMouseMove マウスがオブジェクト上を移動したとき ほとんどのタグが対象 onFocus オブジェクトがフォーカスをもったとき <area><a> 63 [onClick Event attribute] <html> <head> <title> onClick.html </title> <script type="text/javascript"> function view(c) { document.myForm.box.value=document.myForm.box.value+c ; // ① } function cls( ) { document.myForm.box.value=" " ; //② } </script> </head> <body> ボタンをクリックして数字を選択してください。 <form name=myForm> <input type="button" value="1" onClick="view('1')"> //③ <input type="button" value="2" onClick=" view ('2')"> <input type="button" value="3" onClick=" view ('3')"> <input type="button" value="4" onClick=" view ('4')"> <input type="button" value="5" onClick=" view ('5')"> <input type="button" value="6" onClick=" view ('6')"> <input type="button" value="7" onClick=" view ('7')"> <input type="button" value="8" onClick=" view ('8')"> <input type="button" value="9" onClick=" view ('9')"> <input type="button" value="0" onClick=" view ('0')"><br> <input type="text" name="box" size="35"><br> <input type="button" </form> </body> </html> value="クリア" onClick="cls( )> //④ 64 ① document.myForm.box.value=document.myForm.box.value+c ; クリックされた数字ボタンの数字「c」を「document.myForm.box.value(テキス トフィールドの値)」に追加し, 「document.myForm.box.value」に代入する。 ② document.myForm.box.value=" " ; 「document.myForm.box.value」を空白にする。 ③ <input type="button" value="1" onClick="view('1')"> 数字 1 のボタンがクリックされたら,関数「view('1')」を呼び出して実行す る。 ④ <input type="button" value="クリア" onClick="cls( )> クリアボタンがクリックされたら, 関数「cls」を呼び出して実行する。 [onChange Event Attribute] <html> <head> <title> onChange.html </title> <script type="text/javascript"> function check(obj) { document.myForm.img.src=obj.options[obj.selectedIndex].value ; //① } </script> </head> <body> <form name="myForm"> <img name="img" src="img/a4.jpg"> <select onChange="check(this)"> //② <option value="img/a1.jpg">image 1 <option value="img/a2.jpg">image 2 <option value="img/a3.jpg">image 3 </select> </form> </body> </html> 65 ① document.myForm.img.src=obj.options[obj.selectedIndex].value ; 選択ボックス(select box)の中から選ばれたオブジェクト(ここでは画像)を表示 する。 ② <select onChange="check(this)"> 選択されるオブジェクトが変わると,関数「check(this)」を呼び出して実行す る。 [onMouse Event Attribute] <html> <head> <title> onMouse.html </title> <script type="text/javascript"> function over( ) { var obj=document.getElementById("myImg") ; obj.src="img/a2.jpg" ; } function out( ) { var obj=document.getElementById("myImg") ; obj.src="img/a3.jpg" ; } </script> </head> <body> <img name="img" id="myImg" src="img/a1.jpg" onMouseOver="over( )" onMouseOut="out( )"> //① </body> </html> ① <img name="img" id="myImg" src="img/a1.jpg" onMouseOver="over( )" onMouseOut="out( )"> id 名が「myImg」のオブジェクトにマウスポインターが入ったら関数「over」 を呼び出して実行し,そのオブジェクトからマウスポインターが出たら関数 「out」を呼び出して実行する。 66 [mouse stalker program] <html> <head> <title> mouseStalker.html </title> <script type="text/javascript"> var i ; var imgNumber=4 ; //① var length=10 ; //② var counter=0 ; var mx=new Array( ) ; var my=new Array( ) ; for(i=0; i<imgNumber; i++) { mx[i]=0 ; my[i]=0 ; } function start( ) { counter++ ; counter%=length ; if(counter) return ; mx[imgNumber]=event.x-2 ; //③ my[imgNumber]=event.y-2 ; //④ trace( ) ; } function trace( ) { for(i=0; i<imgNumber; i++) { mx[i] = mx[i+1] ; //⑤ my[i] = my[i+1] ; //⑥ document.all["icon"+i].style.left= mx[i] ; //⑦ document.all["icon"+i].style.top= my[i] ; //⑧ } } document.onmousemove=start ; //⑨ 67 </script> </head> <body> <div id="icon0" style="position:absolute;"> <img src="img/ast0.gif"></div> <div id="icon1" style="position:absolute;"> <img src="img/ast1.gif"></div> <div id="icon2" style="position:absolute;"> <img src="img/ast2.gif"></div> <div id="icon3" style="position:absolute;"> <img src="img/ast3.gif"></div> </body> </html> ① var imgNumber=4 ; 変数「imgNumber」に数値 4(表示する画像の数)を代入する。 ② var length=10 ; 変数「length」に数値 10(画像の間の間隔)を代入する。この数値が大きいほど 画像の間の間隔が長くなる ③ mx[imgNumber]=event.x-2 ; ④ my[imgNumber]=event.y-2 ; 最初に各画像を表示するX座標とY座標を設ける。 ⑤ mx[i] = mx[i+1] ; ⑥ my[i] = my[i+1] ; 各画像の表示位置を 1 つずつずらす。 ⑦ document.all["icon"+i].style.left= mx[i] ; ⑧ document.all["icon"+i].style.top= my[i] ; 各画像の表示位置に各画像を表示する。 ⑨ document.onmousemove=start ; マウスを動かすたびに関数「start」を呼び出す。 68 [問題 20] 上記のプログラム(mouseStalker.html)を拡張することによって,マウスを動かし たときには 4 つの画像がマウスポインターを追いかけ,マウスの左ボタンを押し たときには 4 つの画像をマウスポインターの上方に縦列させ,マウスの左ボタン を離したときには 4 つの画像をマウスポインターの上方に横列させるプログラム を作成せよ。 69 第 2 部 Java 70 第 4 章 Java の文法Ⅰ 4.1 Java とは 4.1.1 プログラミング言語(programming language) 種 類 言 語 命令型プログラミング言語 Fortran, Cobol, Pascal, C, C++ 関数型プログラミング言語 Lisp, Scheme 論理型プログラミング言語 Prolog オブジェクト指向型プログラミング言語 Java, Smalltalk ・Java はオブジェクト指向型プログラミング言語である。 ・オブジェクト(object) クラスを元として作られ,データを格納するだけでなく,操作することもできる。 オブジェクト指向型プログラミング言語では,多数のオブジェクトを作り,それ らを組み立て利用することによって目的とするより大きな作業を遂行する。 ・Java 言語は手続き型プログラミング言語の持つ機能をすべて備えるとともに, グラフィカル・インタフェース(graphical interface)をも備える。 ・1995 年,Sun MicroSystems 社によって作られ,インターネットの普及に伴いコ ンピュータや OS(オペレーティングシステム)の種類に依存しないプログラミン グ言語として幅広く使われるようになっている。 4.1.2 プログラムの実行方式 (1)コンパイラ(compiler)方式 ・コンパイラでプログラムをすべて機械語に書き換えてから実行する方式 ・実行速度は速いが,コンピュータや OS が異なればプログラムの再コンパイルが 必要となる。 (2)インタープリタ(interpreter)方式 ・インタープリタでプログラムを機械語に書き換えながら実行する方式 ・実行速度は遅いが,コンピュータや OS が異なってもインタープリタさえ備えて あればプログラムの実行が可能となる。 71 (3)バイトコード(byte code)方式 ・プログラムを仮想マシン(virtual machine)の解釈できるバイトコード(byte code) に書き換えてから実行する方式 ・実行速度が早く,コンピュータや OS が異なっても仮想マシンを装備させておけ ばどのコンピュータでもプログラムの実行が可能となる。 ・Java プログラムの実行方式 4.1.3 Java の開発環境 Java Program (source code) compile (Java compiler) Class File(binary code) run (Java Virtual Machine) 実 行 結 果 ・Java コンバイラー(Java compiler) Java program(source code)を class file(byte code)に変換するプログラム ・Java 仮想マシン(Java Virtual Machine) class file(byte code)を解釈・実行するプログラム 多種多様なプラットフォーム(ハードや OS)に合わせて用意されているので, class file(byte code)はプラットフォームに依存せず実行可能 4.1.4 Java program (1) Java applet ・Java 仮想マシンが搭載されているブラウザ(あるいはアプレットビューア)上で 動作する特殊なプログラム ・高度なアニメーション処理,マウス制御,データ入力,等々の様々な利用方法が ある。 72 (2) Java application ・ConsoleWindow 上で動作するプログラム ・比較的単純な構造を持ち,単独で動くプログラム(stand alone program)として用 いられる場合が多い。 (3) Java servlet ・Web サーバー側で実行されるプログラム ・主にユーザーの要求(request)を処理することを目的とする。 [Java applet のサンプル] import java.awt.* ; //① import java.awt.event.*; //② import java.applet.* ; //③ //<applet code=appletSample.class width=700 height=500></applet>//④ public class appletSample extends Applet { //⑤ Font font; //⑥ public void init( ) { //⑦ font=new Font("TimesNewRoman", Font.PLAIN, 24);//⑧ setFont(font); } //The end of init( ) public void paint(Graphics g) { //⑨ g.drawString("--------------------------------", 50, 50) ; //⑩ g.drawString("This is AppletViewer", 75, 80) ; g.drawString("AppletWindow", 110, 110) ; g.drawString("Browser", 140, 140) ; g.drawString("--------------------------------", 50, 170) ; } //The end of paint( ) } //The end of appletSample.java 73 ① import java.awt.* ; ・ 「java」システムの中にある「awt」パッケージの中の「*(すべて)」のクラスを import する。 ・Java の組み込みクラスライブラリを利用する際,システムにクラスの置いてあ る場所を示す必要がある。import の後にはプログラム内で使用するクラスの存在 位置をクラス名だけで指定することができる。 ② import java.awt.event.*; ・ 「java.awt」システムの中にある「event」パッケージの中の「*(すべて)」のクラ スを import する。 ③ import java.applet.* ; ・ 「java」システムの中にある「applet」パッケージの中のすべてのクラスを import する。 ④ //<applet code= appletSample.class width=300 height=200></applet> ・ブラウザで Java applet を実行するために必要な「HTML タグ」 ・実行する class file,ブラウザのサイズ,等々を指定する。 ⑤ public class appletSample extends Applet { ・「appletSample」クラスの始まり。クラス名を「appletSample」と指定している。 ⑥ Font font; ・Font クラスのオブジェクト font の宣言 ⑦ public void init( ) { ・init メソッド ・Java applet の実行時に最初に必ず 1 回実行されるので,普通変数やオブジェク トの初期化に利用される。 ⑧ font=new Font("TimesNewRoman", Font.PLAIN, 24); ・オブジェクト font のの生成 ⑨ public void paint(Graphics g) { ・paint メソッド ・文字列や図形などをブラウザに描画するメソッド ・このメソッドも Java applet の実行時に最初に必ず 1 回実行される。 ・このメソッドを再度呼び出して実行するには「repaint( )」と指定する。 ⑩ g.drawString("---------------------------------", 50, 50) ; ・文字列や変数値をブラウザに出力する Graphics クラスのメソッド 74 [Java application のサンプル] public class applicationSample { //① //メイン・メソッド(main method) public static int void main(String[ ] args) { //② x, y ; //③ double z ; //④ x=10 ; //⑤ y=20 ; //⑥ z=x*y ; //⑦ System.out.println( "Welcome to Java World ! " ) ; System.out.println( "10*20=" + z) ; } //The end of main( ) } //The end of applicationSample.java ① public class applicationSample { ・「applicationSample」クラスの始まり ・クラス名を「applicationSample」と指定している。 ② public static void main(String[ ] args) { ・main メソッド ・プログラムが実行されると,OS が最初にこのメソッドを呼び出して実行する。 ・オブジェクト「args」以外はすべて予約語である。 ③ int x, y ; 整数変数「x」と「y」を宣言する。 ④ double z ; 実数変数「z」を宣言する。 ⑤ x=10 ; 整数変数「x」に 10 を代入する。 ⑥ y=20 ; 整数変数「y」に 20 を代入する。 ⑦ z=x*y ; 整数変数「x」の値と整数変数「y」の値を掛け,その計算値を実数変数「z」に 代入する。 75 [Java servlet のサンプル] //画像を生成してユーザーに返す。 import java.io.* ; import java.awt.* ; import java.awt.image.* ; import javax.servlet.* ; import javax.servlet.http.* ; import com.sun.image.codec.jpeg.* ; public class servletSample extends HttpServlet { public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { // BufferedImage の画像情報の作成 BufferedImage bimage=new BufferedImage(200, 200, BufferedImage.TYPE_INT_RGB) ; //画像の生成 Graphics g=bimage.getGraphics( ) ; g.setColor(Color.blue) ; g.fillRect(0, 0, 200, 200) ; g.setColor(Color.yellow) ; int x[ ] = {100, 50, 150} ; int y[ ] = {150, 50, 50} ; g.fillPolygon(x, y, 3) ; g.setColor(Color.white) ; g.drawString("Hello Servlet", 10, 150) ; //JPEG 画像としてユーザーに送信 res.setContentType("image/jpeg") ; ServletOutputStream out=res.getOutputStream( ) ; JPEGImageEncoder jie=JPEGCodec.createJPEGEncoder(out) ; jie.encode(bimage) ; } //The end of doGet( ) } //The end of servletSample.java 76 4.1.5 エラー(error)とその処理 (1)構文エラー(syntax error) ・Java 文法上のエラー ・構文エラーの原因 文の終わりのセミコロン( ; )の欠如 文字エル( l )と数字 1 の書き間違え 大文字にすべきところに小文字を使用 閉じる中括弧( } )や閉じる引用符( ' , " )の欠如 誤字の混じった予約語/( )抜きのメソッド/全角文字の混入 ドット( . )の欠如/ドット( . )を用いるべきところにカンマ( , )を使用 (2)実行時エラー(runtime error) ・実行時に警告の対象となる例外的エラー ・実行時エラーの原因 分母にゼロを使用 生成されていない配列要素を指定 存在しないファイルの読み込み指定 ・実行時エラーに対しては,プログラムの中に try{ }文と catch{ }文を組み込み, catch{ }文の中に実行時エラーの処理法を記述して実行時エラーを処理する。 4.1.6 その他 (1)クラス ・Java のプログラム ・Java のシステムにすでに組み込まれているクラス(組み込みクラス)の他に, 個人の作成するクラス(ユーザークラス)がある。 ・クラスの構成要素:変数(variable),オブジェクト(object),メソッド(method) (2)予約語:Java のシステムによってその用途が予め決まっている単語 abstract, boolean, break, byte, cast, catch, char, class, const, continue, default, do, double, else, extends, final, false, finally, float, for, goto, if, implements, import, instanceof, int, interface, long, native, new, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, void, vlatile, while 77 4.2 基本データ型と変数 4.2.1 基本データ型 内 名 容 型 型 例 整数型 int, long 小数点のつかない数 12, 実数型 float, double 小数点のつく数 1.2, 123.45678, 等々 文字型 char 1 文字 'a','学',等々 文字列型 String 複数文字 "文字列" 真偽値型 boolean 真あるいは偽 true, false 2345, 等々 ・整数型 数えることのできる数(小数点のつかない数)を表現するのに用いられる型 表現することのできる数の範囲は以下のとおりである。 int(4 byte) : -2147483648~2147483648 long(8 byte) : -9223372036854775808~9223372036854775808 ・実数型 連続数(小数点のつく数)を表現するのに用いられる型 表現することのできる数の範囲は以下のとおりである。 float(4byte) : 1.40129846432481707e-45~3.40282346638528860e+38 double(8byte) : 4.94065645841246544e-324~1.78769313486231570e+308 ・文字型 1 文字で表わせる英数字,ひらがな,漢字,等々を表現するのに用いられる型 文字定数はシングルクォーテーション( ' )で囲む。 ・文字列型 複数の文字の連なりを表現するのに用いられる型 文字列定数はダブルクォーテーション( " )で囲む。 ・真偽値型 条件が満たされているかどうかを表すために用いられる型 真偽値は「true」あるいは「false」の値を取り,繰り返しや条件分岐などで 条件を判定するときに用いられる。 78 4.2.2 変数 (1)変数と変数名 ・変数とは,データの保管場所である。 ・プログラムでは普通多くの変数を使うので,各変数には変数名を付けて識別する。 ・変数名の付け方 変数名はユーザーが自由に付けることができるが,英文字で始まらなければなら ず,「英字,数字,ドル記号($),下線( _ )」等々を使うことができる。大文字と 小文字は区別され,予約語を変数名として用いるとエラーが報告される。 (2)変数の宣言 ・変数はデータの型を指定し宣言することによってメモリの中に作られる。 ・変数宣言の書式 : 型名 ① 整数変数の宣言:int 変数名[, 変数名] ; a, b ; long c ; ② 実数変数の宣言:float d, e ; double f ; ③ 文字変数の宣言:char one, two, three ; ④ 真偽値変数の宣言:boolean ⑤ 文字列変数の宣言 : String flag ; str1, str2 ; (3)変数の宣言と初期化 ・変数の宣言と同時に変数に値を代入(初期化)することができる。 ・変数宣言と初期化の書式 : 型名 ① 整数変数の宣言と初期化:int ② 実数変数の宣言と初期化:float 変数名=定数[, 変数名=定数] ; a=12, b=34 ; long c=56789101112 ; d=1.2, e=3.4 ; double f=5.67891011 ; ③ 文字変数の宣言と初期化:char one=' 1 ' , two=' 2 ' , three=' 3 ' ; ④ 真偽値変数の宣言と初期化:boolean flag=true ; ⑤ 文字列変数の宣言と初期化 : String str1="東京" , str2="国際大学" (4)変数への値の代入 ・代入文の書式 : 変数=定数あるいは変数あるいは式 ; ・=の左側には変数しか書けない。 ・=の右側には定数,変数,式,などを持ってくることができる。 ・=の右側の値を=の左側の変数に代入する。 ・代入を行うと,代入前の変数値は飛ばされ,新しい値が変数に保存される。 int x=20 ; //変数「x」に整数「20」が保存される。 x=x-10 ; //変数「x」に新しい整数「10 (= x-10 = 20-10)」が保存される。 79 [基本データ型と変数] public class dataType { public static void main(String[ ] args) { //変数の宣言と初期化 int uCode, seisu ; int a=12, b=5, c, d ; double e, f ; String str ; char moji ; boolean TrueOrFalse ; //文字のユニコード(整数) uCode='0' ; System.out.println("[0]のユニコード→"+uCode) ; //48 uCode='学' ; System.out.println("[学]のユニコード→"+uCode) ; //23398 System.out.println( ) ; //式と代入 c=a*b ; e=a*b ; d=a/b ; f=a/b ; System.out.println(a+"×"+b+"を整数変数に保存すると,「"+c+ "」となる。") ; System.out.println(a+"×"+b+"を実数変数に保存すると,「"+e+ "」となる。") ; System.out.println(a+"÷"+b+"を整数変数に保存すると,「"+d+ "」となる。") ; System.out.println(a+"÷"+b+"を実数変数に保存すると,「"+f+ "」となる。") ; } //The end of main( ) } //The end of dataType.java 80 4.3 演算子 4.3.1 算術演算子 演算子 意 味 内 容 a+b 加算 変数「a」の値と変数「b」の値を加える。 a-b 減算 変数「a」の値から変数「b」の値を引く。 a*b 乗算 変数「a」の値と変数「b」の値を掛ける。 a/b 除算 変数「a」の値を変数「b」の値で割る。 a%b 乗余算 変数「a」の値を変数「b」の値で割った余りを求める。 ・算術演算の優先規則 ①括弧内の演算が最初に評価される。 ②乗算,除算,剰余算が次に評価される。 ③加算,減算は最後に評価される。 ・Java における算術演算の優先規則は数学における演算のそれと同じである。 ・算術演算の結果は単一の値(定数)となる。 int x=20, y; y = (x-10) * 3-12 ; 20-10 10 * 3 30 - 12 18 ・整数の除算で商が整数でない場合は,小数点以下の数値は切り捨てられる。 ・ゼロによる除算は実行時エラーとなる。 ・文字列型変数を加算すると,文字列が連結される。 String str="東京"+"国際大学" ; // str="東京国際大学" 81 4.3.2 単項演算子 演算子 意 味 内 容 +a 正 数 変数「a」の値の正値(変数「a」の値と同じ) -a 負 数 変数「a」の値の負値(変数「a」の値×-1) 4.3.3 インクリメント演算子とデクリメント演算子 演算子 意 味 内 容 ++a 前置インクリメント 変数「a」の値を 1 増やした後で変数「a」を評価する。 --a 前置デクリメント 変数「a」の値を 1 減らした後で変数「a」を評価する。 a++ 後置インクリメント 変数「a」を評価した後で変数「a」の値を 1 増やす。 a-- 後置デクリメント 変数「a」を評価した後で変数「a」の値を 1 減らす。 int x=1, y ; y=++x ; // x=2, y=2 となる。 y=x++ ; // x=3, y=2 となる。 4.3.4 比較演算子 演算子 意 味 a == b 等しい a != b 等しくない a<b より小さい a>b より大きい a <= b 以下 a >= b 以上 真偽(true/false) 変数「a」の値と変数「b」の値が等しければ true,それ 以外は false 変数「a」の値と変数「b」の値が等しくなければ true,そ れ以外は false 変数「a」の値が変数「b」の値より小さければ true,それ 以外は false 変数「a」の値が変数「b」の値より大きければ true,それ 以外は false 変数「a」の値が変数「b」の値以下であれば true,それ 以外は false 変数「a」の値が変数「b」の値以上であれば true,それ 以外は false 82 ・文字列型変数の内容を比較するときには,「文字列型変数.equals("比較文字列")」 を用いる。比較演算子「==」を用いると,オブジェクトが等しいかどうかが 比較される。 String str1="TIU ", str2 ; if(str1.equals("TIU ")) str2=" Tokyo International University " ; else str2=" Incorrect name ! " // str2=" Tokyo International University "となる。 4.3.5 論理演算子 演算子 意 味 真偽(true/false) a&b 論理積 a と b が true ならば true,それ以外は false a|b 論理和 a と b が false ならば false,それ以外は true !a 論理否定 a && b 論理積(確定後未評価) a と b が true ならば true,それ以外は false a || b 論理和(確定後未評価) a と b が false ならば false,それ以外は true a が true ならば false,false ならば true ・確定後未評価 論理積の場合,a が false ならば演算結果は必ず false となるので,a が false ならばその時点で b は評価されない。 83 [加算プログラム] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=sum.class width=700 height=500></applet> public class sum extends Applet implements ActionListener { Font font ; Label disp ; //① TextField tf ; //② int num, sum ; public void init( ) { font=new Font("TimesNewRoman", Font.PLAIN, 24) ; setFont(font) ; disp=new Label("整数を入力して Enter キーを押す") ; //③ add(disp) ; //④ tf=new TextField(10) ; //⑤ add(tf) ; //⑥ sum=0 ; //⑦ tf.addActionListener(this) ; //⑧ } //The end of init( ) public void actionPerformed(ActionEvent e) { //⑨ num=Integer.parseInt(tf.getText( )) ; //⑩ sum+=num ; //⑪ tf.setText("") ; //⑫ showStatus(""+sum) ; //⑬ } //The end of actionPerformed( ) } //The end of sum.java 84 ① Label disp ; Label クラスのオブジェクト「disp」を生成することを宣言する。 ② TextField tf ; TextField クラスのオブジェクト「tf」を生成することを宣言する。 ③ disp=new Label("整数を入力して Enter キーを押す") ; Label クラスのオブジェクト「disp」を生成する。 ④ add(disp) ; オブジェクト「disp」をブラウザに表示する。 ⑤ tf=new TextField(10) ; TextField クラスのオブジェクト「tf」を生成する。 ⑥ add(tf) ; オブジェクト「tf」をブラウザに表示する。 ⑦ sum=0 ; 変数「sum」の値を 0 に初期化する。 ⑧ tf.addActionListener(this) ; this(applet)のオブジェクト「tf」にイベントが発生した(テキストフィールドに 文字列が入力されてエンターキーが押された)とき,ActionListener がそのイベ ントをキャッチし所定のメソッド(actionPerformed メソッド)を呼び出して実行 するようにする。 ⑨ public void actionPerformed(ActionEvent e) { テキストフィールドイベント(TextField event)やボタンイベント(Button event) などが発生したときに実行されるメソッド ⑩ num=Integer.parseInt(tf.getText( )) ; オブジェクト「tf」から文字列を取得してそれを整数値に変換し,その整数値を 変数「num」に代入する。 ⑪ sum+=num ; 変数「sum」の値に変数「num」の値を足し,その合計値を変数「sum」に代入 する。 ⑫ tf.setText("") ; オブジェクト「tf」を空白にする。 ⑬ showStatus(""+sum) ; ステータスバー(status bar)に変数「sum」の値を表示する。 85 [文字と数字] //文字列型によるデータの授受 import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=charNum.class height=700 width=500></applet> public class charNum extends Applet implements ActionListener { Font font ; Label disp ; TextField tf ; String str ; String attention="文字と数字は型(type)が異なる" ; char mojiZero, mojiOne, mojiTwo ; int num, sujiZero, sujiOne, sujiTwo ; boolean tof=false ; public void init( ) { font=new Font("TimesNewRoman", Font.PLAIN, 24) ; setFont(font) ; disp=new Label("3 桁の整数を入力せよ") ; tf=new TextField(10) ; add(disp) ; add(tf) ; tf.addActionListener(this) ; } //The end of init( ) public void actionPerformed(ActionEvent e) { str=tf.getText( ) ; mojiZero=str.charAt(0) ; mojiOne=str.charAt(1) ; 86 mojiTwo=str.charAt(2) ; num=Integer.parseInt(str) ; sujiZero=num/100 ; sujiOne=(num-sujiZero*100)/10 ; sujiTwo=num-sujiZero*100-sujiOne*10 ; if(mojiZero == sujiZero) tof=true ; tf.setText("") ; tf.requestFocus( ) ; repaint( ) ; } //The end of actionPerformed( ) public void paint(Graphics g) { g.drawString("1 番目の文字→"+mojiZero+" sujiZero, 50, 100) ; g.drawString("2 番目の文字→"+mojiOne+" sujiOne, 2 番目の数字→"+ 50, 135) ; g.drawString("3 番目の文字→"+mojiTwo+" sujiTwo, 1 番目の数字→"+ 3 番目の数字→"+ 50, 170) ; if(tof != true) showStatus("入力された文字 : "+str+" / "+ attention) ; } //The end of paint( ) } //The end of charNum.java [問題 1] 5 つの変数にそれぞれ異なる数値を代入し,その 5 つの数値の平均値と分散を 求めて表示する Java applet を作成せよ。 (注) 分散:(データ-平均値) 2 の合計値÷(データの数) [問題 2] 3 つの実数 (a, b, c) を読み込み,それらを係数とする 2 次方程式 ax2 bx c 0 の根を計算して表示する Java applet を作成せよ。 87 4.4 条件分岐 4.4.1 単一選択 if 構造 ・条件が成立する(条件式が真の)場合には指定の処理を行うが,条件が成立しない (条件式が偽の)場合には何も行わない構造 if(条件式) { 条件式が真のときに実行される文 (条件式が偽の場合には実行されず,if 構造の外に制御が移る。) } //変数「score」の値が 90 点以上の場合には「90 点以上」と表示し, //90 点未満の場合には何も表示せず下の行に制御が移る。 if(score >= 90) System.out.println("90 点以上") ; randomNumber=Math.random( ) ; 4.4.2 二重選択 if/else 構造 ・条件が成立する(条件式が真の)場合と条件が成立しない(条件式が真の)場合に それぞれ別の処理を行う構造 if(条件式) { 条件式が真の場合に実行される文 } else { 条件式が偽の場合に実行される文 } //変数「score」の値が 60 点以上の場合には「合格」と表示し, //60 点未満の場合には「不合格」と表示する。 if(score >= 60) System.out.println("合格") ; else System.out.println("不合格") ; 88 [問題 3] 三角形の 3 辺の長さ(a,b,c)を読み込み,三角形の面積を求めて表示する Java applet を作成せよ。 (注) 三角形の面積はヘロンの公式により求められる。 k=(a+b+c)/2, s=k(k-a)(k-b)(k-c), s>0 の場合, S s 4.4.3 多重選択 else/if 構造 if(条件式 1) { 条件式 1 が真の場合に実行される文 } else if(条件式 2) { 条件式 2 が真の場合に実行される文 } else { 条件式 1 と条件式 2 がともに偽の場合に実行される文 } [多重選択 else/if 構造による GPA の計算] //ConsoleWindow 上で複数科目の成績(S,A,B,C,F)を入力する。 //S→4 点,A→3 点,B→2 点,C→1 点,F→0 点とする。 //入力した成績の GPA を求める。 //途中で入力を中止する場合は文字「z」を入力する。 import java.io.* ; public class gpa1 { public static void int main(String[ ] args) throws IOException { i, counter, grade ; float sum=0, gpa ; for(i=0; i<100; i++) { //① System.out.print("成績を入力(終了の場合は z を入力)せよ : ") ; 89 grade=System.in.read( ) ; //② //z が入力されたら作業を中止する。 if(grade == 'z') break ; //③ //成績が入力されたら所定の作業を行う。 if(grade == 'S' || grade=='s') sum+=4 ; //④ else if(grade == 'A' || grade=='a') sum+=3 ; //⑤ else if(grade == 'B' || grade=='b') sum+=2 ; //⑥ else if(grade == 'C' || grade=='c') sum+=1 ; //⑦ else sum+=0 ; //⑧ System.in.skip(2) ; //⑨ } //The end of for( ) counter=i ; gpa=sum/counter ; System.out.println(counter+"科目の平均:" +gpa) ; } //The end of main( ) } //The end of gpa1.java ① for(i=0; i<100; i++) { for 繰返し構造を用いて, 「i の値を 0 から 99 まで,i の値を 1 ずつ増やしな がら,for ブロックの中の文を繰り返し実行する。」 ② grade=System.in.read( ) ; Java の組み込みメソッド「read」を用いて ConsoleWindow 上から文字を読み 込む。 ③ if(grade == 'z') break ; 変数「grade」の値が文字「z」と一致したら,繰り返し(処理)を中止する。 ④ if(grade == 'S' || grade=='s' ) sum+=4 ; ⑤ else if(grade == 'A' || grade=='a') sum+=3 ; ⑥ ⑦ ⑧ else if(grade == 'B' || grade=='b') sum+=2 ; else if(grade == 'C' || grade=='c') sum+=1 ; else sum+=0 ; 90 変数「grade」の値が文字「S/s」 , 「A/a」 , 「B/b」, 「C/c」と一致したら,変数「sum」 の値にそれぞれ「4」,「3」,「2」,「1」を加える。変数「grade」の値がそれ以 外だったら,変数「sum」の値に「0」を加える。 ⑨ System.in.skip(2) ; 改行文字分(半角 2 文字分)をスキップする。 4.4.4 多重選択 switch/case 構造 ・式の値に基づいて指定された処理が行われる。 switch(式) { case 値1 : 文1 ; break ; case 値2 : 文2 ; break ; ・・・・・・・・・・・・ default : 文n ; break ; } //The end of switch-case block * 式の値が値 1 と等しい場合には文 1 が実行され,式の値が値 2 と等しい 場合には文 2 が実行され,………,それ以外の場合には文 n が実行される。 文を実行した後は break 文により switch-case ブロックを抜ける。 * 式として指定できるのは,暗黙の型変換で int 型に変換できる型(char, byte, short, int)に限られる。 * break 文は,switch-case ブロックから抜け出すための命令文である。 break 文を指定しないと,1 つの文が実行された後,すぐ下の行の文が実行 されるようになる。 switch(shoe_size) { } case 22 : price=8800 ; break ; case 23 : price=9200 ; break ; default break ; : price=9000 ; 91 [多重選択 switch/case 構造による GPA の計算] import java.io.* ; public class gpa2 { public static void main(String[ ] args) throws IOException { int i, k=0, counter, grade ; double sum=0, gpa ; for(i=0; i<100; i++) { System.out.print("成績を入力(終了の場合は z を入力)せよ : ") ; grade=System.in.read( ) ; if(grade == 'z') break ; switch(grade){ case 'S' : case 's' : sum+=4 ; break ; case 'A' : case 'a' : sum+=3 ; break ; case 'B' : case 'b' : sum+=2 ; break ; case 'C' : case 'c' : sum+=1 ; break ; case 'F' : case 'f' : sum+=0; break ; default : System.out.println( ) ; System.out.println("★成績を正しく入力せよ★") ; System.out.println( ) ; k++ ; break ; } //The end of switch( ) System.in.skip(2) ; } //The end of for( ) counter=i-k ; gpa=sum/counter ; System.out.println(counter+"科目の GPA:"+gpa) ; } //The end of main( ) } //The end of gpa2.java 92 [問題 4] 上記のプログラム(gpa2.java)を拡張することによって,「S, A, B, C」の場合は 「合格」,F の場合は「不合格」とし,合格の科目数と不合格の科目数を調べて追 加表示するプログラムを作成せよ。 [問題 5] 4 つの整数 (a, b, c, x) を読み込み,次の関数 f (x) を求めて表示する Java applet を作成せよ。ただし,「 a c b 」 , 「 a x b 」でなければならない。 2( x a) (b a)(c a) 2 f ( x) (b a) 2(b x) (b a)(b c) for a x c for x c for c x b [問題 6] 3 つのサイコロを投げるときの出目の合計値が「7 以下,8~12,13 以上」と なる回数を求めて次のように表示する Java applet を作成せよ。 クリック(サイコロを投げる) 出 目 結 果 サイコロ1: 2 7 以下 : 1 回 サイコロ 2 : 3 8〜12 : 0 回 サイコロ 3 : 2 13 以上 : 0 回 合 計 :7 計 :1回 93 4.5 繰返し構造 4.5.1 for 文による繰返し for(式 1; 式 2; 式 3) { 式 1 で指定される制御変数の初期値から 実行文 式 2 で指定される制御変数の最終値まで ・・・ 実行文を繰返し実行する。 } そのときの制御変数の増分は式 3 で指定する。 [for 文による繰返し] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=loop1.class public class loop1 Font font=new width=700 height=500></applet> extends Applet { Font("TimesNewRoman", Font.PLAIN, 24); public void paint(Graphics g) { g.setFont(font); int i, num2, num3, yPos=100 ; g.drawString("基 数", 50, 50) ; g.drawString("2 乗値", 150, 50) ; g.drawString("3 乗値", 250, 50) ; for(i=1; i <10; i++) { //① num2=i*i ; //② num3=i*i*i ; //③ g.drawString(" "+i , 60, yPos) ; //④ g.drawString(" "+num2, 160, yPos) ; g.drawString(" "+num3, 260, yPos) ; yPos+=30 ; 94 } //The end of for( ) } //The end of paint( ) } //The end of loop1.java ① for(i=1; i<=10; i++) { for 繰返し構造を用いて, 「i の値を 1 から 10 まで,i の値を 1 ずつ増やしな がら,for ブロックの中の文を繰り返し実行する。」 ② num2=i*i ; 変数「i」の値を 2 乗し,その 2 乗値を変数「num2」に代入する。 ③ num3=i*i*i ; 変数「i」の値を 3 乗し,その 3 乗値を変数「num3」に代入する。 ④ g.drawString(""+i, 60, yPos) ; 変数「i」の値を所定の位置(60, yPos)に表示する。 [for 文による繰返しと繰返しからの抜け出し] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=loop2.class public class loop2 Font font=new width=700 height=500></applet> extends Applet { Font("TimesNewRoman", Font.PLAIN, 24); public void paint(Graphics g) { g.setFont(font) ; int count, xPos=30 ; for(count=1; count<20; count++) { if(count == 10) break ; //① g.drawString(" "+count, xPos, 50) ; xPos+=20 ; } //The end of for( ) 95 g.drawString("繰返しを抜けたときの count="+count, 30, 100) ; } //The end of paint( ) } //The end of loop2.java ① if(count == 10) break ; 変数「count」の値が 10 と等しかったら,繰返しから抜け出す。 4.5.2 while 文による繰返し while(条件) { 実行文 条件が真である限り実行文を繰返し実行する。 ・・・ } [while 文による繰返し] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=loop3.class public class loop3 Font font=new width=700 height=500></applet> extends Applet { Font("TimesNewRoman", Font.PLAIN, 24); public void paint(Graphics g) { g.setFont(font) ; g.setColor(Color.blue) ; int x, y=10 ; while(y <= 250) { //① x=10 ; while(x <= 250) { //② 96 g.fillRect(x, y, 20, 20) ; x+=40 ; } //The end of inner while( ) y+=40 ; } //The end of outer while( ) } //The end of paint( ) } //The End of loop3.java ① while(y <= 250) { 変数「y」の値が 250 以下である限り,外の while ブロックの中の文を繰り返 し実行する。 ② while(x <= 250) { 変数「x」の値が 250 以下である限り,中の while ブロックの中の文を繰り返 し実行する。 [問題 7] ブラウザに次のように表示する Java applet を作成せよ。 1 55555 999999999 [問題 8] 正数 n と実数 x を読み込み x x2 x3 x4 xn の値を求めて表 (1) n1 1 2 3 4 n 示する Java applet を作成せよ。 97 4.6 配列 4.6.1 1 次元配列 ・基本データ型(整数型,実数型,文字型,真偽型)の変数は宣言するだけでメモリ の中に変数に対応する記憶領域が自動的に生成されるが,参照型変数(配列とオ ブジェクト)は宣言に加え,new 演算子を用いて明示的に記憶領域を生成しなけ ればならない。 ・配列の宣言・生成の書式 * 宣 言: 型名 配列名[ ] ; int seisu[ ] ; (宣言だけでは配列は生成されない。) * 生 成: 配列名=new 型名[要素数] ; seisu=new int[3] ; (明示的な生成によりメモリの中に配列領域が作られる。) * 宣言+生成: 型名 配列名[ ]=new 型名[要素数] ; int seisu[ ]=new int[3] ; * 配列のイメージ 配列名[要素番号] 内 容 seisu[0] 0 seisu[1] 0 seisu[2] 0 98 [アンケート調査分析プログラム] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=array1.class public class array1 width=700 height=500></applet> extends Applet{ Font font ; int resp[ ]={2,3,6,8,2,7,9,1,5,7,3,4,5,6,10,9,4,3,9,3} ; int i, j, n, freq[ ] ; public void init( ){ font=new Font("TimesNewRoman", Font.PLAIN, 24) ; setFont(font) ; freq=new int[11] ; n=resp.length ; for(i=0; i<n; i++) ++freq[resp[i]] ; }//The end of init( ) public void paint(Graphics g) { int yPos=25 ; g.drawString("ランク", 25, yPos) ; g.drawString("集計結果", 100, yPos) ; for(j=1; j<freq.length; j++) { yPos+=25 ; g.drawString(" "+j, 40 , yPos) ; g.drawString(" "+freq[j], 130, yPos) ; } //The end of for( ) } //The end of paint( ) }//The end of array1.java 99 [問題 9] 100 までの整数のなかの素数(どの数の倍数でもない数)を判別して表示する Java applet を作成せよ。 (注)素数とは,正の約数が 1 と自分自身のみである自然数のことである。ただし 1 は 含めない。 素数は,正の約数の個数が 2 である自然数と言い換えることもできる。 4.6.2 2 次元配列 ・配列の宣言・生成の書式 * 宣 * 生 言: 成: 型名 配列名[ ][ ] ; int seisu[ ][ ] ; 配列名=new 型名[行数][列数] ; seisu=new int[3][3] ; * 宣言+生成: 型名 配列名[ ][ ]=new int seisu[ ][ ]=new 型名[行数][列数] ; int[3][3] ; * 配列のイメージ 配列名[行][列] 内 容 配列名[行][列] 内 容 配列名[行][列] 内 容 seisu[0][0] 0 seisu[0][1] 0 seisu[0][2] 0 seisu[1][0] 0 seisu[1][1] 0 seisu[1][2] 0 seisu[2][0] 0 seisu[2][1] 0 seisu[2][2] 0 100 * 各行ごとに列の数が異なる配列の宣言と生成 型名 配列名[ ][ ]=new 型名[行数][ ] ; 配列名[行番号]=new 型名[列数] ; ・・・・・・・・・・・・・ int seisu[ ][ ]=new int[3][ ] ; seisu[0]=new int[1] ; //0 行の列数は 1 seisu[1]=new int[2] ; //1 行の列数は 2 seisu[2]=new int[3] ; //2 行の列数は 3 4.6.3 配列の初期化 ・1 次元配列の初期化 : 型名 配列名[ ]={ 要素の値 } ; int seisu[ ]={10, 20, 30 } ; seisu[0]=10, seisu[1]=20, seisu[2]=30 ・2 次元配列の初期化 : 型名 配列名[ ][ ]={ {要素の値}, {要素の値}, … } ; int seisu[ ][ ]={ { 10, 20, 30 } , { 40, 50, 60 } , { 70, 80, 90 } } ; seisu[0][0]=10, seisu[0][1]=20, seisu[0][2]=30 seisu[1][0]=40, seisu[1][1]=50, seisu[1][2]=60 seisu[2][0]=70, seisu[2][1]=80, seisu[2][2]=90 101 ・配列生成時の初期値 型 名 初 期 値 char(文字型) ‘\u0000’ boolean(真偽値型) false int, long(整数型) 0 float, double(実数型) 0.0 String(文字列型) null object(参照型) null [問題 10] 2 つの配列の和を求めて表示するプログラムを作成せよ。 1 2 3 10 20 30 + 4 5 6 11 22 33 = 40 50 60 44 55 66 102 第 5 章 Java の文法Ⅱ 5.1 メソッド(method) 5.1.1 概要 ・頻繁に行なう特定の処理を記述したもの ・Java の諸クラスには多くのメソッドがすでに組み込まれている。 ・ユーザーは Java 固有の組み込みメソッドを利用するだけでなく,独自のメソッ ドを作成しそれを別のプログラムで呼び出して利用することができる。 ・メソッドは呼び出しによって起動され実行される。呼び出しのときには,そのメ ソッドの名前を指定し,呼び出されたメソッドが所定の作業を行うのに必要な情 報を引数として渡す。 5.1.2 main メソッド ・Java application の必須メソッド ・書式 public static void main(String[ ] args) { main メソッドの本体 } ・オペレーティングシステム(OS)から直接呼び出されて最初に実行される。 したがって, 「public」かつ「static」メソッドとして定義しなければならない。 ・main メソッドの処理が終了すればプログラム全体が終了するので,main メソッ ドは戻り値の持たないメソッドとして定義しなければならない。 5.1.3 public メソッドと private メソッド (1) public メソッド ・他のプログラムにも開放されていて,あらゆるプログラムから呼び出すことので きるメソッド (2) private メソッド ・当該プログラムの中からのみ呼び出し可能となるように制限されたメソッド ・当該プログラムの内部処理用として用いられる。 103 5.1.4 static メソッドと instance メソッド (1) static メソッド ・メソッドを作成するとき「static」指定をすると,そのメソッドは static メソッ ドとなる。 ・static メソッドはクラスに 1 つしか存在しないクラス固有のメソッドであり,オ ブジェクトを生成せず「クラス名.メソッド名(実引数) ; 」の形で呼び出して実 行する。 (2) instance メソッド ・クラスからオブジェクトを生成すると,そのオブジェクトにはクラスのメソッド も作られる。これを instance メソッドという。 ・instance メソッドは「オブジェクト名.メソッド名(実引数) ; 」の形で呼び出し て実行する。 5.1.5 ユーザーメソッドの書式 修飾語 戻り値の型 メソッド名(仮引数) { メソッド本体 } (1)修飾語 「public」または「private」を指定する。 「static」指定も可能である。 (2)戻り値の型 ・メソッドが呼び出し側に戻す値のデータ型(基本データ型,配列型,クラス型, 等々)を指定する。 ・戻り値の要らない場合には「void」と指定する。 (3)メソッド名 メソッド名の付け方は変数名のそれと同じであり,当該メソッドがどのような役 割を果たすのかがわかるような名前をつけた方がいい。 (4)仮引数 ・呼び出し側からメソッドに渡されるデータを受け取る変数であり,0 個以上を 定義する。 104 ・複数個を定義する場合には各仮引数をカンマで区切る。 ・仮引数はメソッドの中だけで有効であり,メソッドの終了と同時に消滅する。 5.1.6 Math クラスのメソッド メソッド 機 能 Math.abs(x) x の絶対値 Math.ceil(x) x より大きい最小の整数値(小数点以下切り上げ) Math.floor(x) x より小さい最大の整数値(小数点以下切り捨て) Math.exp(x) x の指数関数値 ( e Math.log(x) x の自然対数値 Math.max(x, y) x と y のうち大きい値 Math.min(x, y) x と y のうち小さい値 Math.pow(x, y) xのy乗 Math.sqrt(x) x の平方根 x ) ・static メソッドであるので, 「Math.メソッド名(実引数) ; 」として呼び出す。 ・Math.PI(円周率 3.14159…),Math.E(自然対数の底 2.71828…) [main メソッドの中からユーザーメソッドを呼び出す場合] ・・・・・・・・・・・・・ double int menseki, pai=3.14 ; hankei=10 ; menseki=myMethod(hankei, pai) ; //① ・・・・・・・・・・・・・ } //main メソッドの終わり public double myMethod( int r, double p) { //② double menseki ; menseki=r*r*p ; return menseki ; //③ } //The end of myMethod( ) 105 ① menseki=myMethod(hankei, pai) ; 変数「hankei」の値と変数「pai」の値を実引数としてユーザーメソッド「myMethod」 を呼び出す。ここの変数「menseki」はグローバル変数である。 ② public double myMethod(int r, double p) { 実数値の戻り値と 2 つの仮引数(整数値 1 つと実数値 1 つ)を持つユーザーメソ ッド「myMethod」を定義する。 ③ return menseki ; ユーザーメソッド「myMethod」の中で計算した変数「menseki」の値をメソッド の呼び出し側に戻す。ここの変数「menseki」はローカル変数である。 [ユーザーメソッド] //3 つの数値の中から最大値を見つけ出すメソッド import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=um.class width=700 height=500></applet> public class um extends Applet { Font font; int num1=12, num2=34, num3=56, max ; public void init( ){ font=new Font("TimesNewRoman", Font.PLAIN, 24); setFont(font); }//The end of init( ) public void paint(Graphics g) { max=maxMethod(num1, num2, num3) ; //① g.drawString("["+num1+","+num2+","+num3+"]→最大値="+max, 30, 50) ; }//The end of paint( ) 106 public int maxMethod(int x, int y, int z) { //② int max=Math.max(x, Math.max(y, z)) ; //③ return max ; } //The end of maxMethod( ) } //The end of um.java ① max=maxMethod(num1, num2, num3) ; ユーザーメソッド「maxMethod」を呼び出し,3 つの実引数(整数値)を与える。 ユーザーメソッド「maxMethod」からの戻り値を整数変数「max」に代入する。 ここの整数変数「max」は paint メソッドの中だけで用いることのできるローカ ル変数である。 ② public int maxMethod(int x, int y, int z) { 整数値の戻り値と 3 つの仮引数(整数変数)を持つユーザーメソッド「maxMethod」 を定義する。 ③ int max=Math.max(x, Math.max(y, z)) ; Java の組み込みメソッド「Math.max」を用いて 3 つの仮引数の中から最大値を 見つけ,それを整数変数「max」に代入する。ここの整数変数「max」はユーザー メソッド「maxMethod」の中だけで用いることのできるローカル変数である。 [問題 1] 2 つの正整数(x, y)を受け取りその最大公約数(greatest common divisor)と最小公 倍数(least common multiple)を求めるメソッドを組み込んだ Java applet を作成せよ。 整数 1 (x) 12 整数 2 (y) 18 (12, 18)の最大公約数(GCD) : 6 (12, 18)の最小公倍数(LCM) : 36 107 [問題 2] I K M を行い,その結果を分数 で表示する Java applet を作 J L N 分数の加算 成せよ。 [4 行 4 列の配列] 列 行 0列 1列 2列 3列 国語 英語 数学 学生平均 0行 学生 1 57 35 76 0 1行 学生 2 45 78 63 0 2行 学生 3 92 72 67 0 3行 科目平均 0 0 0 0 [2 次元配列] //2 次元配列 import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=doubleArray.class public class doubleArray width=700 height=700></applet> extends Applet{ Font font ; // 科目 1, 科目 2, 科目 3, 学生平均 int score[ ][ ]={{ 57, 35, 76, 0 }, { 45, 78, 63, 0 }, //学生2 { 92, 72, 67, 0 }, //学生3 0, 0, 0} }; //科目平均 { 0, int xPos, yPos, high=0, low=100, sum=0; ; int i, j, k, subjects, students ; //学生1 108 public void init( ){ font=new Font("TimesNewRoman", Font.PLAIN, 24) ; setFont(font) ; students=score.length-1 ; //① subjects=score[0].length-1 ; //② }//The end of init( ) public void paint(Graphics g){ displayArray(g) ; }//The end of paint( ) //配列値を表示するメソッド public void displayArray(Graphics g){ xPos=120 ; yPos=50 ; for(i=0; i<subjects+1; i++){ k=i+1; if(i == subjects) g.drawString("学生平均", xPos, yPos) ; else g.drawString("科目["+k+"]", xPos, yPos) ; xPos+=100 ; } for(i=0; i<students+1; i++){ xPos=25 ; yPos+=35 ; k=i+1; if(i == students) g.drawString("科目平均", xPos, yPos) ; else g.drawString("学生["+k+"]", xPos, yPos); xPos=150 ; for(j=0; j<subjects+1; j++){ g.drawString(""+score[i][j], xPos, yPos) ; xPos+=100 ; } } }//The end of dispalyArray( ) }//The end of doubleArray.java 109 [問題 3] 上記の Java applet(doubleArray.java)に次の機能を追加せよ。 (1)各学生の点数の平均値を求めるメソッドを追加し,それを利用することに よって各学生の 3 科目の点数の平均値を求めて表示する。 (2)各科目の点数の平均値を求めるメソッドを追加し,それを利用することに よって各科目の 3 学生の点数の平均値を求めて表示する。 (3)「学生別の 3 科目の点数」と「科目別の 3 学生の点数」を棒グラフで表示 する。 5.2 クラス(class)とオブジェクト(object) 5.2.1 クラス ・クラスは「変数」と「メソッド」によって構成され,1 つのプログラムの中に複 数のクラスを書き入れることができる。 ・クラスの書式 [修飾子] class クラス名 { 変数とメソッドの定義 } 5.2.2 オブジェクト ・クラスを元にして作ったものであり,クラスと全く同じ中身をもつ。 したがって,クラスをオリジナル品とすれば,オブジェクトはその複製品である。 ・オブジェクトの生成 クラス名 オブジェクト名=new ・オブジェクトへのアクセス オブジェクト名.変数名 ; オブジェクト名.メソッド名(実引数) ; クラス名( ) ; 110 ・カプセル化とデータ隠蔽 メソッドを用いて変数の内容を変更することをカプセル化といい,カプセル化に よって変数の内容を外部から変更できないように完全に遮断したオブジェクト を作ることをデータ隠蔽という。 [複数のクラスを持つ Java application] class class1 { public static class1 void objt=new main(String[ ] args) { class1( ) ; //① System.out.println("main method") ; objt.myMethod1( ) ; //② } //The end of main( ) void myMethod1( ) { class2 objt=new class2( ) ; //③ System.out.println("myMethod1") ; objt.myMethod2( ) ; //④ } //The end of myMethod1( ) } //The end of class1 class class2 { void myMethod2( ) { System.out.println("myMethod2") ; } //The end of myMethod2( ) } //The end of class2 ① class1 objt=new class1( ) ; クラス「class1」のオブジェクト「objt」を生成する。 ② objt.myMethod1( ) ; クラス「class1」のオブジェクト「objt」の中のユーザーメソッド「myMethod1」 を呼び出して実行する。 ③ class2 objt=new class2( ) ; 「クラス class2」のオブジェクト「objt」を生成する。 111 ④ objt.myMethod2( ) ; クラス「class2」のオブジェクト「objt」の中のユーザーメソッド「myMethod2」 を呼び出して実行する。 5.2.3 オーバーロード(overload) ・同名のメソッドを複数定義すること ・オーバーロードされたメソッドの引数は,引数の「型,台数,並び方」のいずれ かが異なる必要がある。 [メソッドのオーバーロード] class class3 { public static void main(String[ ] args) { overloadClass objt=new overloadClass( ) ; //① objt.myMethod(999) ; //② objt.myMethod("東京国際大学") ; //③ } //The end of main( ) } //The end of class3 class overloadClass { void myMethod(int k) { //④ System.out.println("引数"+k+"は整数です。") ; } //The end of myMethod(int k) void myMethod(String str) { //⑤ System.out.println("引数"+str+"は文字列です。") ; } //The end of myMethod(String str) } //The end of overloadClass ① overloadClass objt=new overloadClass( ) ; クラス「overloadClass」のオブジェクト「objt」を生成する。 ② objt.myMethod(999) ; ➂objt.myMethod("東京国際大学") ; 112 ク ラ ス 「 overloadClass 」 の オ ブジ ェ クト 「 objt 」 の 中の ユ ー ザー メソ ッ ド 「myMethod」を呼び出して実行する。呼び出されるメソッドは引数の型によっ て異なる。 ④ void myMethod(int k) { ⑤ void myMethod(String str) { ユーザーメソッド「myMethod」をオーバーロード定義する。 5.2.4 クラスの継承 ・継承の仕組みを用いると,作成済の親クラスの機能をそのまま子クラスで利用す ることができる。継承は予約語「extends」により実現する。 ・継承の書式 class 子クラス名 extends 親クラス名 { 変数およびメソッド } [クラスの継承] class class4 { public static void main(String[ ] args) { subClass objt=new subClass( ) ; System.out.println("main method") ; objt.subMethod( ) ; //① objt.superMethod( ) ; //② } //The end of main( ) } //The end of class4 class superClass { void superMethod( ) { System.out.println("親クラス") ; } //The end of superMethod( ) 113 } //The end of superClass class subClass extends superClass { //③ void subMethod( ) { System.out.println("子クラス") ; } //The end of subMethod( ) } //The end of subClass ① objt.subMethod( ) ; ② objt.superMethod( ) ; クラス「subClass」のオブジェクト「objt」の中のユーザーメソッド「subMethod」 と「superMethod」を呼び出して実行する。 ③ class subClass extends superClass { クラス「superClass」の機能を継承するクラス「subClass」を定義する。 5.2.5 インタフェース(interface) ・引数が決まっているだけで,実際の処理を記述しないクラス ・インタフェースの定義 interface インタフェース名 { 定数およびメソッド } ・クラスと異なる点 ①宣言のキーワードは「interface」 ②定数を書くことはできるが,変数を定義することはできない。 ③メソッドの形式を記述することはできるが,メソッドの処理を記述する ことはできない。 ④インタフェースのオブジェクトを生成することはできない。 114 ・インタフェースの参照 class クラス名 implements インタフェース名 { 変数およびメソッド } 5.3 例外処理 5.3.1 エラー(error)と例外(exception) ・Java 文法上の過ちをエラーといい,実行時の過ちを例外という。 ・例外の種類と原因 例外の種類 Exception 原 因 例外のうち,プログラムで復旧可能なすべての 例外 RuntimeException 例外のうち,例外処理が不要なすべての例外 IOException 入出力における例外 ArithmeticException 分母がゼロの除算などの不正演算 ArrayindexOutOfBoundsException 存在しない配列要素の呼び出し FileNotFoundException 存在しないファイルの呼び出し 115 5.3.2 例外処理の仕組み try { try ブロック ・・・・・・・ 発生可能な例外を記述するブロック } catch(例外の型名 変数名) { ・・・・・・・ catch ブロック スローされた例外をキャッチし,処理 } catch(例外の型名 変数名) { するブロック ・・・・・・・ } finally { finally ブロック ・・・・・・・ 例外の発生如何に関わらず,必ず実行 } されるブロック [例外処理] class exceptionExample { public static void main(String[ ] args) { int i ; int a[ ]=new int[5] ; //① try{ for(i=0; i<6; i++) { //② a[i]=99 ; System.out.println(" "+a[i]) ; } //The end of for( ) } catch(ArrayIndexOutOfBoundsException e) { //③ System.out.println(" 例外発生! ") ; System.out.println("存在しない配列要素を指定している。") ; return ; } finally { System.out.println("finally ブロックを実行") ; } //The end of try-catch block } //The end of main( ) } //The end of exceptionExample.java 116 ① int a[ ]=new int[5] ; 5 つの要素数をもつ整数配列「a」を生成する。 ② for(i=0; i<6; i++) { 変数「i」の値を 0 から 5 まで 1 ずつ増やしながら 6 回繰り返す。 ③ } catch(ArrayIndexOutOfBoundsException e) { 配列の指定要素数を超えたインデックスを指定したときに発生する例外を処理 する catch ブロック * このプログラムでは,配列「a」の要素として a[0]から a[4]までの 5 つの要素し か生成されていないのに,存在しない配列要素 a[5]を繰り返しブロックの中で指 定するようになっているので,配列要素数の逸脱が起こり catch ブロックが実行 され例外を処理する。 117 5.4 GUI(Graphical User Interface)とイベント処理 5.4.1 GUI ・マウスなどを使って画面表示を操作するユーザーインタフェース ・GUI パッケージ 基本的な画面表示の操作には「AWT(Abstract Window Toolkit)パッケージ」が使 われ,高度な画面表示の操作には「Swing パッケージ」が使われる。 ・オブジェクト表示位置の指定 setLayout(null) : 標準レイアウト(flowLayout)を解除する。 setBounds( x, y,幅, 高さ) : オブジェクトの表示位置(オブジェクトの左上角の x 座標値と y 座標値)と 大きさ(オブジェクトの幅と高さ)をピクセル単位で指定する。 左上角の x 座標値 左上角の y 座標値 幅 オブジェクト 高さ 5.4.2 イベント処理 ・マウスクリックやキー打鍵などで生じるコンポーネントの状態の変化(イベント の発生)に応じて行う処理 ・AWT に属するコンポーネントによって発生させられるイベントはすべて 「java.awt.Event」クラスのサブクラスである。 ・イベント関連用語 EO (Event Object) : イベントが発生するオブジェクト EL (Event Listener):イベントの発生を感知するコンポーネント LI (Listener Interface) : イベント関連インタフェース ・EO とそれに対応する LI Button オブジェクト , TextField オブジェクト → ActionListener Checkbox オブジェクト, Choice オブジェクト → ItemListener Mouse オブジェクト → MouseLisneter, MouseMotionListener 118 ・イベント駆動アプレットの書式 import 文 アプレット・タグ //イベント処理を行うために LI を実装する。 public class **** extends public Applet implements ActionListener { void init( ) { //EO を生成し,それを渡す EL を登録する。 ***.addActionListener(this) ; } //The end of init( ) //Event 処理メソッドを定義する。 public void actionPerformed(ActionEvent e) { //アプレット上の EO にユーザーが何らかの操作を行った //(イベントが発生した)ときに処理すべきことを記述する。 } //The end of actionPerformed( ) public void paint(Graphics g){ //アプレットに描画命令が出たときに行う処理を記述する。 } //The end of paint( ) }//The end of Java applet [イベント処理] //「UP ボタン」をクリックすると,表示数字を+1 して表示する。 import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=up.class width=700 height=500></applet> public class up extends Applet implements ActionListener { int count=0 ; Font font ; Button bt ; 119 public void init( ) { setLayout(null) ; font=new Font("TimesNewRoman", Font.BOLD, 72) ; setFont(font) ; bt=new Button("UP") ; //① add(bt) ; bt.setBounds(165, 50, 80, 50) ; //② bt.addActionListener(this) ; //③ } //The end of init( ) public void actionPerformed(ActionEvent e) { count++ ; repaint( ) ; } //The end of actionPerformed( ) public void paint(Graphics g) { g.setColor(Color.red) ; if(count < 10) g.drawString(" "+count, 178, 200) ; else g.drawString(" "+count, 167, 200) ; } //The end of paint( ) } //The end of up.java ① bt=new Button("UP") ; Button クラスのオブジェクト「bt」を生成する。 ② bt.setBounds(165, 50, 80, 50) ; オブジェクト「bt」を指定の位置(左上角の x 座標値 165, 左上角の y 座標値 50)に指定の大きさ(オブジェクトの幅 80 ピクセル,オブジェクトの高さ 50 ピ クセル)で表示する。 ③ bt.addActionListener(this) ; オブジェクト「bt」(UP ボタン)がクリックされたら,「ActionListener」がこの イベントを感知し指定のメソッド(actionPerformed メソッド)を呼び出して実行 するようにする。 120 [問題 4] 上記の Java applet (up.java) を拡張することによって,「MOVE」 ・ 「RESET」ボタ ンを設け, 「MOVE」ボタンをクリックするとブラウザの真ん中に位置する「半径 20 ピクセルの円」が上下左右にランダムに移動(移動方向および移動距離ともにラン ダム)し,「RESET」ボタンをクリックすると「半径 20 ピクセルの円」がブラウザ の真ん中に戻るようにする Java applet を作成せよ。移動方向ごとの総移動距離も 求めて表示するようにせよ。 5.4.3 図形処理 (1) Point クラス ・二次元平面上に点を表示するクラス ・Point クラスのオブジェクト生成 Point p1=new Point( ) ; //座標(0, 0)を生成 Point p2=new Point(100, 100) ; //座標(100, 100)を生成 Point p3=new Point(Point p2) ; //点 p2 と同じ座標の点を生成 ・p3 の座標を(150, 200)に変更するには,各座標値を次のように指定する。 p3.x=150 ; p3.y=200 ; ・Point クラスのメソッド メソッド 戻り値 機 能 setLocation(int x, int y) void この点の座標を(x, y)に変更 setLocation(Point p) void この点の座標を点 p と同じ座標に設定 void この点の位置(x+dx, translate(int dx, int dy) distance(double x, distance(Point p) double y) y+dy)に移動 double この点から点(x, y)までの距離 double この点から点 p までの距離 (2) Rectangle クラス ・二次元平面上に長方形を表示するクラス ・Rectangle クラスのオブジェクト生成 //左上角の座標が(0, 0)で,幅と高さがゼロの長方形を生成 Rectangle r1=new Rectangle( ) ; //左上角の座標が(50, 50)で,幅が 100px,高さが 80px の長方形を生成 Rectangle r2=new Rectangle(50, 50, 100, 80) ; 121 ・r2 の左上角の座標および幅と高さを(100, 100, 150, 200)に変更するには,各 数値を次のように指定する。 r2.x=100 ; r2.y=100 ; r2.width=150 ; r2.height=200 ; ・Rectangle クラスのメソッド メソッド 戻り値 機 能 setLocation(int x, int y) void この長方形の左上角を(x, y)に設定 setLocation(Point void この長方形の左上角を点 p と同じ座標に設定 void この長方形の左上角を(x+dx, y+dy)に移動 translate(int dx, p) int dy) contains(int x, int y) boolean この長方形が点(x, y)を含むかどうかを判定 contains(Point p) boolean この長方形が点 p を含むかどうかを判定 [図形処理] //2 点の座標と 2 点を結ぶ直線を表示する //ブラウザの中心点 : p0(500,400) //入力する座標 : p1(x 座標入力値,y 座標入力値) import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=pointEvent.class width=1000 height=800></applet> public class pointEvent extends Applet Rectangle r; Point p0, p1, p2, p3; Label xLabel, yLabel, zLabel; TextField tf11, tf12; int i, j, k, p1x, p1y; double dt ; public void init( ) { r=getBounds( ); p0=new Point(500, 400) ; implements ActionListener{ 122 xLabel=new Label("x 座標"); yLabel=new Label("y 座標"); zLabel=new Label("点(p1)"); tf11=new TextField(50); tf12=new TextField(50); setLayout(null); xLabel.setBounds(110, 10, 50, 30); yLabel.setBounds(165, 10, 50, 30); zLabel.setBounds(50, 50, 50, 30); tf11.setBounds(100, 50, 50, 30); tf12.setBounds(160, 50, 50, 30); add(xLabel); add(yLabel); add(zLabel); add(tf11); add(tf12); tf12.addActionListener(this); } //The end of init( ) public void actionPerformed(ActionEvent e){ p1x=Integer.parseInt(tf11.getText( )); p1y=Integer.parseInt(tf12.getText( )); p1=new Point(p1x, p1y); tf11.setText(""); tf12.setText(""); tf11.requestFocus( ); repaint( ); }//The end of actionPerformed( ) public void paint(Graphics g) { g.drawLine(p0.x, 0, p0.x, r.height); g.drawLine(0, p0.y, r.width, p0.y); g.setColor(Color.red) ; g.fillOval(p0.x-5, p0.y-5, 10, 10) ; if(p1 != null){ g.fillOval(p1.x-5, p1.y-5, 10, 10) ; 123 g.drawLine(p0.x, p0.y, p1.x, p1.y) ; dt=p1.distance(p0) ; k=(int)(dt/3) ; g.drawString(" ("+p0.x+","+p0.y+")", p0.x, p0.y) ; g.drawString(" ("+p1.x+","+p1.y+")", p1.x, p1.y) ; g.drawOval(p0.x-k, p0.y-k, 2*k, 2*k) ; } } //The end of paint( ) } //The end of pointEvent.java [問題 5] 「直角三角形 ABC」における「B の座標(x, y)」と「直角を挟む二辺の長さ(a, b)」 の 4 値を受け取り,その三角形を描くとともに, 「三角形の頂点(A, B, C)の座標」 と「各辺の長さ(a, b, c)」を表示する Java applet を作成せよ。 124 5.4.4 マウスイベント(mouse event) (1) マウスイベントの処理 ① Listener Interface の実装 public class クラス名 extends Applet implements MouseListener {……} ② Event Listener の登録 マウスのオブジェクト. addMouseListener(this) ; ③マウスイベント処理メソッドの定義 void mouseClicked(MouseEvent e) {……} void mouseEntered(MouseEvent e) {……} void mouseExited(MouseEvent e) {……} void mousePressed(MouseEvent e) {……} void mouseReleased(MouseEvent e) {……} ・マウスイベントクラスのメソッド メソッド 戻り値 機 能 getX( ) int イベントの発生した位置の x 座標値を返す。 getY( ) int イベントの発生した位置の y 座標値を返す。 getPoint( ) Point イベントの発生した位置を示す点を返す。 ・マウスイベントの処理メソッドが呼ばれる順番 * マウスボタンを押したままマウスを移動し,ボタンを離したとき mousePressed メソッド→mouseReleased メソッド * マウスボタンをクリックしたとき mousePressed メソッド→mouseReleased メソッド→mouseClicked メソッド (2) マウスモーションイベントの処理 ① Listener Interface の実装 public class クラス名 extends Applet implements MouseMotionListener {……} ② Event Listener の登録 マウスのオブジェクト. addMouseMotionListener(this) ; 125 ③マウスイベント処理メソッドの定義 void mouseDragged(MouseEvent e) {……} void mouseMoved(MouseEvent e) {……} [マウスイベント] import java.awt.* ; import java.awt.event.* ; import java.applet.* ; //<applet code=mouseEvent.class width=1000 height=800></applet> public class mouseEvent extends Applet implements MouseListener, MouseMotionListener { Point p0=new Point(500, 400) ; Point p1 ; double dt ; int k, m ; public void init( ) { addMouseListener(this) ; addMouseMotionListener(this) ; } //The end of init( ) public void mouseMoved(MouseEvent e) { p1=e.getPoint( ) ; m=1 ; repaint( ); } //The end of mouseMoved( ) public void mouseDragged(MouseEvent e) { } public void mouseClicked(MouseEvent e) { p1=e.getPoint( ) ; 126 m=2 ; repaint( ) ; } //The end of mouseClicked( ) public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void paint(Graphics g) { g.setColor(Color.red) ; g.fillOval(p0.x-3, p0.y-3, 6, 6) ; if(p1 != null) { g.fillOval(p1.x-3, p1.y-3, 6, 6) ; g.drawLine(p0.x, p0.y, p1.x, p1.y) ; dt=p1.distance(p0) ; k=(int)(dt/2) ; if(m == 1) { g.drawString(" ("+p0.x+","+p0.y+")", p0.x, p0.y) ; g.drawString(" ("+p1.x+","+p1.y+")", p1.x, p1.y) ; g.setColor(Color.blue) ; g.drawOval(p1.x-k, p1.y-k, 2*k, 2*k) ; } //The end of inner if block else{ g.setColor(Color.blue) ; g.drawOval(p0.x-k, p0.y-k, 2*k, 2*k) ; } //The end of inner else block } //The end of outer if block } //The end of paint( ) } //The end of mouseEvent.java 127 [問題 6] 次の動作をする Java applet を作成せよ。 (1) ブラウザの中央のポイント(p0)を中心とする半径 60 ピクセルの円を描く。 (2) ブラウザの中央のポイント(p0)とマウスポインタの位置するポイント(p1)を 結ぶ線を引き,その線の中央に線長を表示する。 (3) ブラウザの中央のポイント(p0)を中心とする半径 60 ピクセルの円に内接する 半径 20 ピクセルの円を描く。内接の円の中心点はブラウザの中央のポイント (p0)とマウスポインタの位置するポイント(p1)を結ぶ線の上に位置するように する。 [問題 7] マウス・ストーカー(mouse stoker) マウスを動かすと,半径と色の異なる 5 つの円が列をなしてマウスを追いかけ る Java applet を作成せよ。 128 5.5 スレッド(thread) 5.5.1 概要 ・同時に複数のプログラムを並行して動作させる仕組み ・スレッドにより,GUI(Graphical User Interface)制御,計算処理,I/O 処理,等々を 同時に実行することができる。 ・「移動する背景の前でボールが動く」という画面の場合, 「ボールが動く処理」 と,「背景が移動する処理」を別々にプログラミングし,同時に実行させる。 ボールが動く 背景が移動する 5.5.2 スレッドの生成 (1)「java.lang.Thread」を継承して,「run( )」をオーバーライドする方法 class スレッドクラス名 public extends Thread { void run( ) { ・・・・・・ } //The end of run( ) } //The end of this class (2) Runnable インタフェースを実装する方法 アプレットはその定義上「Applet クラス」を継承しなければならないので, アプレットのスレッドは常にこの方法を用いる。 class スレッドクラス名 public void run( ) { ・・・・・・ } //The end of run( ) } //The end of this class implements Runnable { 129 5.5.3 スレッドの起動 「start( )」によりスレッドクラスの中の「run( )」が呼び出される。 スレッドクラス名 オブジェクト=new スレッドクラス名( ) ; オブジェクト. start( ) ; [スレッドⅠ] class exThread extends Thread { //① String word ; int i, delay ; public exThread(String str, int delayTime) { //② word=str ; delay=delayTime; } //The end of exThread( ) public void run( ) { //③ try { for(i=0; i<10; i++) { System.out.print(word+" ") ; sleep(delay) ; } //The end of for( ) } catch(InterruptedException e) { return ; } //The end of try-catch block } //The end of run( ) public static void main(String[ ] args) { new exThread("sing", 50). start( ) ; //④ new exThread("a Song/", 100). start( ) ; //⑤ } //The end of main( ) } //The end of exThread.java 130 ① class exThread extends Thread { クラス「Thread」を継承するクラス「exThread」を定義する。 ② exThread(String str, int delayTime) { クラス「exThread」のコンストラクター ③ public void run( ) { 「start( )」により呼び出され実行されるメソッド ④ new exThread("sing", 50). start( ) ; ⑤ new exThread("a Song/", 100). start( ) ; クラス「exThread」のオブジェクトを生成し, 「start( )」によりそのオブジェ クトの中の「run( )」が呼び出され実行される。 5.5.4 スレッドのライフサイクル ・スレッドは,「run( )」から制御が戻るか,「stop( )」を呼び出して強制的に実行 を中止させるかによって実行終了となる。再実行するには新しいスレッドを再度 作らなければならない。 ・一時的にスレッドを停止した後再開するには 「suspend( )」と「resume( )」を用 いる。 ・制御を他のスレッドに明渡すためには「yield( )」を用いる。「yield( )は」自身 の実行を一時中断して他のスレッドに実行権を渡す。 [スレッドⅡ] //赤い円が左上から右下に移動するスレッド import java.awt.* ; import java.awt.event.* ; public class threadFrame int x0, extends Frame implements Runnable { y0, w, h ; Thread th=null ; public threadFrame ( ) { setSize(500, 500) ; setTitle("単純スレッド") ; 131 addWindowListener(new WindowAdapter( ) { public void windowClosing(WindowEvent e) { System.exit(0) ; } }) ; x0=10 ; y0=10 ; w=20 ; h=20 ; th=new Thread(this) ; th.start( ) ; } //The end of threadFrame( ) public void paint(Graphics g) { g.setColor(Color.red) ; g.drawOval(x0, y0, w, h) ; } //The end of paint( ) public void run( ) { while(true) { try { Thread.sleep(500) ; } catch(InterruptedException e) { } x0+=10 ; y0+=10 ; repaint( ) ; } //the end of while( ) } //The end of run( ) public static void main(String[ ] Frame args) { w=new threadFrame( ) ; w.show( ) ; } //The end of main( ) } //The end of threadFrame.java [問題 8] 上記の Java application(threadFrame.java)を拡張することによって,赤い円が左 上から右下に移動し,青い四角形が右下から左上に移動するようにせよ。 132 第 6 章 応用プログラミング問題 6.1 配列要素の変更と削除 ○変更データの数値 99 変更 ○変更位置(要素番号) 6 ●削除データの要素番号 要 素 番 号 : 削除 0 1 2 3 4 5 6 変更前のデータ : 23 5 12 22 78 -1 -1 変更後のデータ : 23 5 12 22 78 -1 99 6.2 数字のシャフル(shuffle) 例えば,1~8 の数字をシャフルして書き並べる。そのアルゴリズムは以下のと おりである。 ① k=1 とする。 ② 配列 num[0]~num[7] の中に 999 を入れておく。 ③ 0~7 の整数(ran)を生成する。 ④ num[ran]の中身が 999 だったら,num[ran]=k とし,k++ とする。 num[ran]の中身が 999 でなかったら,k をそのままにして別の整数を 生成し,前の操作をする。 ➄ k=8 となるまで 3 と 4 の操作を繰り返す。 133 6.3 サイコロゲーム(craps) ・2 個のサイコロを振り,1 回目に出目の合計が「7, 11」のいずれかならプレー ヤーの勝ち,「2 , 3 , 12」のいずれかならプレーヤーの負けとする。 ・1 回目に出目の合計が「4 , 5 , 6 , 8 , 9 , 10」のいずれかならそれをプ レーヤーの持ち点とし,サイコロを振り続ける。 ・以後,その持ち点が出た時点でプレーヤーの勝ち,もし途中で 7 が出るとプレー ヤーの負けとする。 出目Ⅰ 出目Ⅱ 合 計 持ち点 CLICK ! (サイコロを振る) ☆プレーヤーの勝ち。 ○プレーヤーの勝ち数 : 0 回 ●プレーヤーの負け数 : 0 回 134 6.4 交換整列(bubble sort) 隣り合ったデータの大小を比較し逐次交換することで整列を行うのが交換整列 である。この整列法は簡単ではあるが,比較や交換の回数が多くなるのが短所であ る。例えば,「 41, 23, 18, 45, 29, 54, 37 」に並んでいるデータを交換整列で昇 順に整列する場合の手順は以下のとおりである。 [41, 23], 18, 45, 29, 54, 37 23, [41, 18], 45, 29, 54, 37 23, 18, [41, 45], 29, 54, 37 23, 18, 41, [45, 29], 54, 37 23, 18, 41, 29, [45, 54], 37 23, 18, 41, 29, 45, [54, 37] 23, 18, 41, 29, 45, 37, 54 第 1 段階の操作終了 (第 1 段階の操作終了後のデータに対して同様の操作を継続) 第 6 段階の整列終了後 [18, 23, 29, 37, 41, 45, 54] 元のデータ 昇順整列 降順整列 元のデータ 33/54/67/84/25/76/93/45/47/75/ 39/64/57/62/73/55/27/68/36/83/ 135 6.5 配列のソート ソート対象科目のボタンをクリックせよ 番号 名前 国語 英語 数学 1 安藤 28 43 70 2 三浦 32 57 35 3 神田 56 37 89 国語の成績によるソート後のデータ 3 神田 56 37 89 2 三浦 32 57 35 1 安藤 28 43 70 136 張本 浩(ハリモト ヒロシ) 1953 年生まれ。 一橋大学大学院 商学研究科修了 東京国際大学 商学部 教授(管理工学専攻) Essence of Programming 発行日 : 2016 年 8 月 25 日 著 者 : 張本 浩(harimoto@tiu.ac.jp) (Tel. 050-3536-0169 内線 5591)
© Copyright 2024 Paperzz