2017年度講義ノート

栗林ゆき絵


(8)WEB単語帳を作ってみよう--続Javascript入門--

[最終テスト]情報処理関連用語はここから(も)出題!

[1]はじめに

(1)「電子辞書(diccionario electrónico)」
単語入力→品詞、対訳、例文、活用形など、必要項目を表示

電子辞書のプログラム(programa)から、"辞書データ(通常は辞書ファイル)"を参照する。(規則活用は自動生成するプログラムも。)
プログラムはJavascript言語で書かれたものを利用する。


(2)サンプルファイルの動作確認

*JavascriptはHTMLファイル内で使用するプログラミング言語。
*htmファイルはメモ帳で作成(テキストファイル)。スペイン語日本語混在の場合は、unicodeを使用。

(3)[参考]代替表記 →UTF8で保存したファイルで上手く表示できない場合は、アクセント符号や特殊文字は代替表記に置き換える。(日本語版Windowsの入力コードの制約)
*今回の課題については、utf-8で保存・表示させれば大丈夫のようです。


á → 'a
í → 'i
ú → 'u
é → 'e
ó → 'o
ñ → ~n など

(4)サンプルファイルの説明・作成 ... ★全員で共通課題実習★プリント配布

[参考]本HPの右上「最終更新日」はJavaScriptにより自動表示!
HTML内に記述するオブジェクト指向*型スクリプト言語。入力やクリックなどによるHP内での動的な動作を実現。
*データやメソッド(=関数、処理のこと)が、必ずそれを所有するオブジェクト(ウインドウ、ドキュメント、フォームなど)に属しているという考え方に基づくプログラミングの手法。
(例 document.Myform.input.value HTMLドキュメント内のフォームMyform内のテキストボックスinputの値value)


*以下は経験者・中級者向け解説

[2]Formについて

ユーザ(usuario)のインタラクティブな操作に対応するためのHP上に貼り付ける「部品」。ボタン、ラジオボタン、テキストボックスなど。 これらの部品全体をフォームといい、フォームを貼り付ける場所をHTMLタグ<FORM>~</FORM>で示す。

*主要なタグ
FORM (フォーム)
IMPUT TYPE="☆" (☆: radio=ラジオボタン、button=ボタン、text=テキストボックス)
NAME(フォーム全体や各部品の名前)
VALUE(値)...ボタンの場合は表示文字列。テキストボックスの場合は入力文字列。ラジオボタンの場合はあらかじめ定義した文字列。
onClick(クリック時のイベント処理)

[3]プログラム(スクリプト)部分について

<HEAD>タグ内の<SCRIPT>~</SCRIPT>内に記述。

「辞書データ」は2つの「配列」(=変数の並び)を持ちいることで表現している。
*基本のアルゴリズム...文字列マッチ。配列要素の番号を利用した出力。
1.ユーザ入力... ラジオボタンで変換方向を選択。単語を入力。検索ボタンをクリック。

2.西日か日西かの確認... function radio1(){ } でラジオボタンの値を取得。

3.訳語表示(1)...西日ならば、スペイン語の配列を1個目(=0番目)から検索し、入力単語と一致したところで、 それと同じ番号の日本語の配列の要素(単語)を、出力用テキストボックスの値にセットする。

4.訳語表示(2)... 日西ならば、日本語の配列を1個目(=0番目)から検索し、入力単語と一致したところで、 それと同じ番号のスペイン語の配列の要素(単語)を、出力用テキストボックスの値にセットする。
*主要なJavaScriptの項目
文末はセミコロン ;
var 変数の宣言(変数名は自由につけてよい。サンプルではrv)
var x = new Array() 配列の宣言 (配列名は自由につけてよい。左の例ではx。要素番号(x[i]のi)は0始まり。)
function 関数の定義(関数名は自由につけてよい。サンプルではradio1(r)、translate()。rは引数。)
if(A){ B } 条件分岐1(もしAが成立すれば、Bを実行)
else if(C){ D } 条件分岐2 (そうではなくてCが成立すれば、Dを実行)
for(A){B} 繰り返し (Aの条件が成立する間、Bを実行)(iはカウンタ変数。配列の要素番号を管理する)
toLowerCase() 大文字を小文字に変換する。大文字が入力されても小文字データにマッチさせるために使用。(文字列オブジェクトのメソッド)
★プログラム理解のコツ... 変数はデータを入れる箱、配列は箱の並び、とイメージするとよい。

[参考文献] 河西朝雄「JavaScritp入門」(技術評論社)(ISBN4-7741-0651-8)


[4]実習

1.「単語帳1」(kadaiseiwa1.html)を大文字小文字の区別なく検索できるようにする。(大文字で入力された場合は小文字に変換)

⇒大文字にも対応。文字列比較時の入力文字列に.toLowerCase()をつける
        if(edic[i] == document.Myform.input.value.toLowerCase()){
          document.Myform.output.value = jdic[i];
        }

2.「単語帳1」
「動物編」を拡張。(「十二支編」または「基本語彙編」など。(授業中に指示します))
「辞書検索」「クリア」「ホーム」のボタンをスペイン語に。

3.単語を追加。(基本語彙編の場合は合計20語以上)◎全員で実習!!


* スペイン語と日本語を同時に追加すること。
* 単語を増やしたら、for文の繰り返し回数も単語数に合わせて書き換えること。
* 5語ごとくらいに語数カウントのための改行を入れておくと便利(動作には影響しません)

以上ができたら、スペイン語→日本語、日本語→スペイン語、の双方向でテスト。
アクセント符号や、ñの入力・表示も確認すること。

3.「単語帳4」(kadaiseiwa4.html)情報処理用語編を同様に各自で作成。30語以上。

4.余力のある人は...
(1)リンク先の「単語帳1」「単語帳4」の各ページのボタンの表示(辞書検索、クリア、等)をスペイン語に書き換え。
(2)リンク先の各ページにも「最終更新日」表示を追加。
(3)日⇒西検索時に、日本語入力が漢字・ひらがな・カタカナのいずれの表記であっても正しいスペイン語訳が出るようにする。


その他、下記 ◎課題欄の条件に従ってください。

[5](補足)プログラムと プログラミング言語(lenguaje de programación)

プログラム=コンピュータへの処理命令の集まり ....実はみんなプログラム!!(ソフトウエアと呼ぶことも)

アルゴリズム....処理の手順。順序、条件分岐、繰り返しなど。

プログラミング言語=プログラムを記述するための言語 ... C言語、Basic、Java、 Javascript、LISP、FORTRAN、Perl、Ruby、etc.

プログラミング=単語と文法による「作文」

◇本日の課題

◎課題◎
¡Ojo! 拡張子はすべて.html で統一します。

●表紙タイトル「welcame to my homepage.」および各ページのボタン「辞書検索」「クリア」「HOME」をスペイン語に変更!

●ジャンル別単語集....単語帳1(サンプルに単語を追加)、および単語帳4「情報処理編」(kadaiseiwa4.html)を作成。 プログラムで西和、和西を切り替えて使用できるようにする。


*拡張子は.htmlで統一します。

*動詞は不定詞を載せるものとする。

*トップページからのリンクも追加すること。

*必ず動作確認をしてから提出すること。動かない状態で提出した場合は採点しません。

●余力のある人は...「単語帳2」も作ってみよう。
時間表現(季節・曜日・月)編、挨拶・日常会話編、料理・食品編、ファッション編、住宅・インテリア編、ホテル・旅行編、国名・国籍・言語編など各自自由に。
●さらに余力のある人は...「単語帳3」に挑戦。(別途説明します。)

☆各ページのレイアウトや色は自由に変更して構いません。

(参考:情報処理用語の例)...*情報処理用語は期末テストに出題するのでWEBやメールに出てくる用語はチェックしておくこと。

ホームページ、 パソコン、 ウェブブラウザ、 メール、 パスワード、 リンク、 ファイル、 フォルダ、 コピーする、 ペーストする
ハードディスク、 マウス、 ディスプレイ、 キーボード, プリンタ、 ヘルプ、 検索する、 更新する、 アップロードする、 ダウンロードする、 ログインする、 ログアウトする、 印刷する、 入力する、
ノートパソコン、タブレット、 デスクトップ、カーソル、キイ、 クリック(click)する、(ボタンを)押す、 保存する、 インストールする、アンインストールする、 ドラッグ アンド ドロップする、 立ち上げる、再起動する、シャットダウンする、
(メールを)確認する、編集する、送信する、返信する、転送する、(送信)日時、From、To、件名、削除する、(ファイルを)添付する、 カーボンコピー、ブラインドカーボンコピー、アドレス、 電子辞書、 自動翻訳、 ソーシャルネットワークサービス

[応用(経験者向け)]「単語帳3」について(⇒cuaderno9参照)

必須課題ができた人は個人的に相談のこと。サンプルの説明をします。
⇒各自で単語を追加してください。
⇒各自のレベルに合わせ、レイアウト変更、「西→日」ページの作成等、改良・拡張してください。


[スペイン語情報処理HOME]

©Yukie Kuribayashi