I-Shou University Institutional Repository:Item 987654321/11264

全文

(1)義守大學資訊工程研究所碩士論文碩士論文 Backword 利用在英文個人字庫上之研究利用在英文個人字庫上之研究 Applying Backword on Personal Wordbank. 研究生：研究生：林美玲指導教授：指導教授：張佑康教授. 中華民國九十九年六中華民國九十九年六月. I.

(2) Backword 利用在英文個人字庫上之研究利用在英文個人字庫上之研究. Applying Backword on Personal Wordbank. 研究生：林美玲指導教授：張佑康博士. Student： Mei-Ling Lin Advisor： Dr. Yukon Chang. 義守大學資訊工程研究所碩士論文 A Thesis Submitted to Department of Information Engineering I-Shou University In Partial Fulfillment of the Requirements For the Master Degree in Information Engineering June, 2010 Kaohsiung, Taiwan, Republic of China. 中華民國九十九年六月. II.

(3) III.

(4) 致謝就讀研究所這段期間，很高興的完成本篇論文，這些研究並非是學生我自己一個人一朝一夕就能完成的，在這當中非常感謝身旁諸多師長與好友們的幫忙與鼓勵，使得學生能順利的完成學業，特此將成果獻給每一位幫助過我的人。首先由衷的感謝我的指導教授張佑康張老師，在這段期間內，很感謝老師一直很有耐心且不厭其煩的指導與糾正學生邏輯思考及想法之外，也教我平常為人處事方面應該要注意的事情，讓學生在這段期間培養了獨立思考與培養解決問題的能力。學生深深的覺得自己很幸運也很榮幸能成為張老師的學生。接著很感謝鄭老師總是提醒我什麼時候該做什麼事情，實驗室其他同學安排什麼行程或規劃什麼事情時，鄭老師都希望我能一同參與，例如：關山嶺山、實驗室迎新與送舊…等，另外，特別感謝鄭老師推薦學生參與科工館學生志工，讓學生從擔任學生志工的過程當中學習到很多書本上所學不到的經驗。再者很感謝林老師總是在每次碰面的時候會跟我說加油!!不僅給予學生很多鼓勵與打氣也在學生提計劃書申請的時候提供學生很多沒有想到的建議與問題。最後要謝謝學生的口試委員－陳璽煌陳老師，很謝謝陳老師在百忙當中參與學生的畢業口試與擔任畢業口試委員，也提供學生很多指導與建議給予學生莫大的幫助。再來非常感謝我的家人在我求學的這段期間內，不僅提供我學習所需要的開銷，也在我碰到瓶頸而感到煩悶時，會盡力的幫我想辦法或是尋求可以幫忙的人，非常感謝家人這一路上一直支持我、鼓勵我讓我可以順利的完成學業。另外要感謝學校的師長、同學與朋友，這邊首先萬分感謝實驗室的大學長兼室友的碩利學長，謝謝您不僅在課業及程式上給予我很大很多的幫忙，也很謝謝您在颱風天時，當我望著房間破掉的冷氣窗時且正煩惱該怎麼處理時，謝謝你幫我用巧拼先擋起來才不會讓我的房間成為一片汪洋；也謝謝您在颱風天中煮好吃的火鍋還有油飯以及提供手電筒，讓我平安且順利的度過八八風災。另外，感謝博班學姊兼室友的沛渝學姐，謝謝您總是陪我聊天以及運動，也很謝謝你常常送禮物給我，並時時刻刻提醒我一些女生要注意的事情，讓我們可以越變越漂亮。謝謝凌芹學姊跟我說「有空可以常來實驗室」，藉此讓我跟實驗室的大家們打成一片。謝謝閔中學長會帶好吃的薏仁來實驗室，以及謝謝小賴學長陪大家一同參與活動。謝謝我的直屬又菁學姊分享給我很多課業上與程式上的經驗，也很感謝您帶我去泰國旅 I.

(5) 遊，讓我體驗到自己的英文仍須多加強才行。謝謝坤達讓我從擔任系上網頁工讀生當中學習到網頁以及資料庫還有 Linux 的技術，還有煖媖，謝謝您陪我聊天聊到三更半夜還一起爬牆回宿舍，也謝謝您在我第一次去台東玩的時候開車帶我上山下海玩得不亦樂乎。謝謝阿光、易霖、存存、高人以及文玲平常時給我鼓勵與加油打氣，也謝謝阿光、易霖以及高人開車帶大家去南投玩。謝謝 97 級學弟們(常志、阿偉、郭威、秉鴻、狂刀以及小鄧)不時的相互關心彼此的進度，也會互相提醒該注意的事情；以及謝謝 98 級學弟們(宇峻、小民、銘斌、翱宇、紅茶以及韋任)不僅在口試時幫忙大家場地佈置與善後，平常當值日生時也都會很熱心的幫忙或提便當、搬東西等。最後要感謝我的朋友們，給同一天生日又愛鬥嘴的怡君姐，謝謝您平常時的照顧以及幫我留意論文裡中文及英文需修改的地方；感謝小游在我遇到瓶頸時會陪我說話以及幫我想點子解決問題，另外也很謝謝您在英文上幫我修改錯字或文法不通順的地方；謝謝我的大學同學、學弟妹以及學長姐、教育學程夥伴、社團夥伴、小麥夥伴以及科學工藝博物館的夥伴們，謝謝你們的鼓勵與打氣，讓我時時刻刻充滿著活力，也謝謝你們一直陪伴我走過這一段時光，這一切真的多虧有大家才能造就今天的我，萬分感激生命當中的每一人，在此再一次的謝謝你們！. 林美玲. 誌於. 義守大學資訊工程學系中華民國九十九年六月. II.

(6) 目錄圖目錄................................................................................................................... II 表目錄..................................................................................................................IV 摘要....................................................................................................................... V ABSTRACT .........................................................................................................VI 第1章. 緒論.................................................................................................... 1. 1.1. 研究動機............................................................................................ 1. 1.2. 研究目標............................................................................................ 1. 1.3. 論文架構............................................................................................ 2. 第2章. 文獻探討............................................................................................ 3. 2.1. 英語的重要性.................................................................................... 3. 2.2. 字彙增加有助於英語學習................................................................ 4. 2.3. CALL ................................................................................................. 4. 第3章. 個人英語學習輔助工具.................................................................... 6. 3.1. Backword 介紹 .................................................................................. 6. 3.2. Personal Wordbank 介紹 ................................................................. 10. 第4章. Firefox 附加元件技術 ..................................................................... 13. 4.1. XUL ................................................................................................. 13. 4.2. JavaScript ......................................................................................... 14. 4.3. Firefox 附加元件的檔案結構 ......................................................... 14. 4.3.1. 系統架構...................................................................................... 14. 第5章. 實驗結果.......................................................................................... 26. 5.1. 系統架構.......................................................................................... 26. 5.2. 系統功能.......................................................................................... 26. 5.3. 系統流程.......................................................................................... 27. 5.4. 成果展示.......................................................................................... 28. 第6章. 結論.................................................................................................. 36. 參考文獻.............................................................................................................. 37. I.

(7) 圖目錄圖 3.1 Firefox 中已完成安裝 Backword 之畫面 ......................................................... 7 圖 3.2 Backword 運作流程圖 ....................................................................................... 7 圖 3.3 Search and get word explanation ........................................................................ 8 圖 3.4 Backword Website .............................................................................................. 8 圖 3.5 Find other dictionary ........................................................................................... 9 圖 3.6 Included by backword ....................................................................................... 10 圖 3.7 Pronounce ......................................................................................................... 10 圖 3.8 Personal Wordbank 首頁 ................................................................................. 10 圖 3.9 Personal Wordbank 使用者介面(個人介面與查詢單字介面)....................... 11 圖 3.10 Personal Wordbank 使用者介面(單字列表)................................................. 12 圖 3.11 Personal Wordbank 使用者介面(課程介面) ................................................. 12 圖 4.1 Firefox 附加元件所使用到的網頁應用程式技術 .......................................... 14 圖 4.2 Backword 目錄架構圖 ..................................................................................... 15 圖 4.3 Backword 彈出式選單畫面 ............................................................................. 19 圖 4.4 Tooltip function ................................................................................................. 21 圖 4.5 Tooltip 之架構流程圖 ...................................................................................... 21 圖 4.6 addEventListener 架構流程圖 ......................................................................... 22 圖 4.7 Backword 查詢結果 ......................................................................................... 23 圖 4.8 查詢單字解釋之架構流程圖........................................................................... 25 圖 5.1 Backword 目錄架構圖 ..................................................................................... 26 圖 5.2 Backword 流程圖 ............................................................................................. 27 圖 5.3 使用者選單....................................................................................................... 28 圖 5.4 Verify username / password .............................................................................. 30 圖 5.5 查詢單字解釋................................................................................................... 32 圖 5.6 查詢單字解釋(個人字庫查無資料) ................................................................ 32 圖 5.7 查詢單字解釋(個人字庫查無此單字資料) .................................................... 34 圖 5.8 新增單字之視窗畫面....................................................................................... 34 圖 5.9 確認欲新增之單字資料視窗畫面................................................................... 34 II.

(8) 圖 5.10 再一次查詢所出現之畫面............................................................................. 34 圖 5.11 使用者查詢個人單字字庫之畫面 ................................................................. 35. III.

(9) 表目錄表 2.1 外語教學與電腦發展過程表............................................................................. 5 表 4.1 chrome.manifest ................................................................................................ 15 表 4.2 install.rdf ........................................................................................................... 16 表 4.3 setting.js ............................................................................................................ 17 表 4.4 backword.dtd ..................................................................................................... 18 表 4.5 options.xul 部分程式 ........................................................................................ 20 表 4.6 Tooltip function ................................................................................................. 21 表 4.7 backword.xul 事件型態 .................................................................................... 22 表 4.8 addEventListener 事件型態表 ......................................................................... 23 表 4.9 DoMouseOut function ...................................................................................... 23 表 4.10 Backword 查詢單字解釋功能 ....................................................................... 24 表 5.1 新增 User Account 之部分程式碼 ................................................................... 29 表 5.2 使用者驗證之部分程式碼............................................................................... 30 表 5.3 查詢單字解釋之部分程式碼........................................................................... 31 表 5.4 新增單字之部分程式碼................................................................................... 33. IV.

(10) 摘要近年來隨著電腦科技的快速發展與網際網路的普及，無形中縮小了國與國之間的距離，使得各國之間的資訊能更快速、更方便的相互交流，同時也逐漸的將人類帶往國際化的時代，而在我們所取得的資料中大多數以英文為主，也因應網路無弗屆的需求，其英語的重要性更是日趨顯著。大量的英文字彙量有助於提升英語能力，學習者透過經常閱讀英文書籍或報章雜誌無形中其個人英文字彙量與日俱增，因此本研究希望能藉此發展出一套具有即時查詢單字查詢功能並結合個人英文字庫系統來增進並累積使用者的個人英文字彙量，並期望能透過廣泛以及大量的閱讀更能增加學習者自己個人的英文字彙量也期望能藉此提升學習者英語能力。本研究以 Firefox 附加元件之 Backword 即時翻譯之功能，並結合 Personal Wordbank 英文個人字庫之功能，讓使用者隨時隨地可以在 Firefox 瀏覽器閱覽資料或查詢資料時能即時查詢使用者所面臨之不熟悉的英文單字或未曾見過的生字。若使用者登入並驗證帳號密碼成功後，在進行查詢單字時會先以個人字庫系統裡的資料做搜尋，若於個人字庫系統中成功查得該單字時，則會累加並記錄該單字之查詢次數；若個人字庫系統中查無該單字資料時，則會選擇其他字典資料進行查詢，使用者可於查詢後將該單字資料新增至個人英文字庫中，反之，若使用者驗證失敗或不進行驗證時，則保留原本 Backword 所提供的英文單字查詢之功能。. 關鍵詞：關鍵詞：Personal Wordbank、Backword、字彙. V.

(11) ABSTRACT In recent years, due to the rapid development of computer and the internet, the distance between countries has become closer and closer. We are living in an increasingly internationalized world, and it goes without saying that English, being the most widely used global language, is very important in many ways. The size of the vocabulary of a person has a direct effect on his or her English ability. This study aims to help increase a person’s vocabulary by developing a simple tool that can conveniently look up the meaning of new words and insert them into a personalized database. Our study uses an existing Firefox extension called Backword as the basis for real-time translation and integrates it with Personal Wordbank, a database that keeps track of individual vocabulary of a user. When viewing or searching for information using the Firefox browser, a user can look up the meaning of a word by hovering the mouse on top of the word. If an account of a user is verified successfully, he or she can add the word to the Personal Wordbank. Otherwise, the original functionality of Backword is kept.. Keyword: Personal Wordbank, Backword, vocabulary. VI.

(12) 第1章章緒論 1.1 研究動機電腦科技的快速發展與網際網路的普及，不僅改變人類的生活、工作、學習、經濟、文化、政治等各層面，同時也將人類帶進了資訊化時代的社會。資訊化時代的來臨，使得各行各業的人們所處理的工作漸漸的轉變為電腦化，其中不少資料也逐漸從紙本形式轉變為數位形式，因此人類手邊可以即時取得的資源也就日益增加。由於電腦與網際網路的普及，漸漸帶動了國際化時代的來臨，而早期一直被視為世界語言的英語產生了戲劇性的增長，逐漸提升其重要性。也因為目前網路上的資源較多來自於國外，其中以英文網頁為居多，然而在一個非良好學習英文的環境，例如在非英語系國家的英語學習者，由於日常生活當中沒有學習英語的習慣，當使用者在閱讀、瀏覽或查詢資料時，往往會先遇到大量的英文單字，使用者會因為其中有多數單字為沒有學習過的單字，因此而感到不安。但隨著科技不斷的進步，學習英文的輔助工具由厚重的紙本字典漸漸轉變為電子字典、線上翻譯等輔助工具。在 Firefox 上，一套由 gneheix 所開發出來的附加元件稱為 Backword， Backword 的功能在於使用者瀏覽網頁或查詢資料時，可以直接將滑鼠游標放置在欲查詢的英文單字上，此時會自動跳出視窗顯示該英文的中文解釋。Backword 在使用上不僅操作簡單，也因為是屬於 Firefox 的附加元件，所以 Backword 也有著 Firefox 可擴充性之優點，使用者不僅可以方便的使用，同時也可以因為不同的需求來做修改。. 1.2 研究目標本研究藉由 Backword 以及搭配英文個人字庫(Personal Wordbank)的使用來設計架構出一套以個人英語單字學習為主的輔助工具，可讓使用者在使用 Firefox 瀏覽器瀏覽網頁或查詢資料的過程中，遇到不熟悉的英文單字時，不僅可以快速的取得該單字之中文解釋，同時使用者在個人的學習歷程中也可以記錄當時所學. 1.

(13) 習到的單字、學習過的單字或是較常用到以及會用到的英文單字等，同時使用者可以於過程中自行修改或添加其單字之解釋以及例句。. 1.3 論文架構在本篇論文的架構，首先第一章主要是介紹研究動機以及研究方法，第二章主要是探討與英文學習相關的研究，第三章則是介紹本篇論文所使用到的相關技術；另外，第四章的部分將針對於 Firefox 的附加元件 Backword 做進一步詳細的介紹，而第五章則是本研究的研究結果，在此介紹我們研究成果，並以各功能為分類的方式進行圖文說明，最後第六章是本論文之結論。. 2.

(14) 第2章章文獻探討 2.1 英語的重要性邁入 21 世紀，隨著電腦科技與網際網路的普及化，無形中縮小了國與國之間的距離，慢慢的營造了地球村的社會，讓彼此之間的政治、經濟、文化往來更加密切，同時也漸漸將人類帶往國際化的時代，讓彼此的資訊及文化等方面進行交流，而語言則是溝通的基礎。在國際化的趨勢下，國際語言的能力不可或缺，而英語正是主要的溝通語言。根據一份調查顯示，國際上重要的學術報告近百分之八十使用英語；全世界的報刊幾乎有一半是用英語印刷的；全世界使用英語的廣播電視占五分之三；全世界的來往郵件有四分之三用的是英語[1]，由此可知英語已成為國際間交流的重要語言。郤佳源[2]提到，由於國內長期以來一直將英語當成一種外國語言，學習者在日常生活中沒有學習英語的習慣，多半還是以母語溝通為主。另外也提到某次詢問學生有關學習英語的難處，學生多半認為單字是學習英文上的一大障礙，因此期望學生要多加強單字方面的背誦，以利應用於英語其他方面(如：句型、對話等)的學習。全球使用英語的人口大致上分為三類[3]： 1. 第一類是以英語為母語(ENL, English as a Native Language)的人，也就是指英語國家的人民，包括美國、加拿大、英國、澳洲及紐西蘭等。 2. 第二類是以英語為第二語言(ESL, English as a Second Language)的人，嚴格說起來，指的是英語系國家裡的外國移民，他們雖然都有各自的母語，但因為身處於英語系國家，必須以英語做為主要溝通語言，所以英語就成為他們的第二語言。另外，像新加坡、菲律賓及印度等以英語為官方語言(EOL, English as an Official Language)的國家，也可以算在這一類裡面。對這些國家的人而言，英語雖然不是母語，但往往因為歷史、文化或政治因素而將英語成為各族群普遍使用的共同語言。 3. 第三類則是把英語當成一種外國語言(EFL, English as a Foreign Language) 的人，基本上所有不屬於第一類及第二類的英語使用者，都歸屬於這一類。比方說，對身在台灣的我們來說，英語既不是我們的母語或第二語 3.

(15) 言，也不是官方語言，一般大眾平時不用英語溝通，只在有需要的時候才會這麼做，那麼英語對我們而言就是一種外國語言。. 2.2 字彙增加有助於英語學習 “提昇英語能力的一個基本原則：就是隨時隨地留神所聽到或讀到的字、詞、片語、表達語等”[4]。由此可知，大量的英文字彙有助於提升英語能力，學習者可透過廣泛且大量的閱讀來增加自己個人的字彙量，經常閱讀英文書籍或報章雜誌的學習者無形中其字彙量日與俱增，長時間下來與沒有接觸書籍、報章雜誌的學習者兩者相較之下，其字彙量會明顯增加許多。黃靜怡[5]提到 2006 年她曾針對 278 名南部私立大學英語系學生實施字彙量測驗，根據測驗結果，未通過 1000 字的字彙量測驗高達 36%，其中通過 1000 字的字彙量測驗有 47%，通過 2000 字的字彙量測驗只有 15%，通過 3000 字的字彙量測驗僅有 1.4%。由此測驗結果得知，目前學生字彙量明顯不足，有些學習者甚至提到自己會面臨單字背過就忘的情形發生，根據王舒葳[6]表示其實不只是學習者會發生這樣子的狀況，連老師也會發生這樣子的情況，其原因之一是因為學習的過程中，單字只背記過一次是不夠的，必須加上反覆複習直到真正學習起來為止。因此，我們的系統除了針對學習者查詢單字的部分，未來也將著手進行單字測驗的部分，目前構思是以每一次學習者查詢單字解釋後，會彈出小視窗詢問學習者查詢動機為何？(例如：此單字為第一天遇到的新單字、此單字之前查過但忘了等查詢原因)。另外，也可藉由使用者回饋之查詢動機，並設計出一套測驗，系統會定期記錄學習者最近新查詢之單字與時常查過但一直忘記之單字，藉由測驗使得學習者可以不斷反覆的練習，直到單字記起來為止，同時系統也會記錄學習者記住此單字共經過多少時間等。. 2.3 CALL CALL[7-13]為電腦輔助語言學習(Computer-assisted language learning)之英文縮寫，它是一種在語言教學以及學習過程中，藉由電腦來進行教學，同時可以幫. 4.

(16) 助學生學習的一種方式，稱之為電腦輔助語言學習。劉繼仁和陳世威[14]將應用於語言課程的網路科技統分為三大類型：第一類為電腦媒介通訊科技(CMC)，它提供了一個學習環境，可以使同儕之間藉此相互合作以及相互輔助，例如聊天室、討論區、論壇、BBS、MSN Messenger 和 Skype 等。第二類為學習管理系統(LMS)，例如 Moodle、Blackboard 以及開放式學習平台等，它提供一個師生一個雙向即時與非即時的網路教學平台，教師能藉此將教學中會用到的資料放置於此，學生也可以從中隨時隨地使用資源以及可以應用的評量，同儕之間也可以藉此彼此相互交流。第三類為電腦輔助語言學習(CALL) 軟體，例如 BBC Learning English 英語學習網站、Personal Wordbank 英文個人字庫以及其他英語學習網站，學習者可以從中按照自己的步調來進行學習。 Kern 和 Warschauer[15]指出，由於外語教學和電腦科技發展階段相似，因此也影響了電腦輔助語言學習的發展，如表 2.1[16]。由於電腦具有聲音以及影像等多媒體功能，因此電腦輔助語言學習將教學內容以及過程與電腦結合，並結合網路技術，再加上文字整合，可以使授課教師藉此呈現更多元化的教學。因電腦輔助語言學習具有內容生動活潑有趣、知識及訊息較大量較新，且教學資源易於共享以及教師可進行個別化教學等優點，可營造出多元、互動的學習環境，因此能引發學生學習興趣，並提升學習效果。. 表 2.1 外語教學與電腦發展過程表電腦在語言學習中所扮演的角色. 時間. 外語教學觀點. 1960-1970 年代. 結構觀點 (語言為一個獨立架構，重視文法結構). 1980 年代. 認知觀點 (語言架構可由學習者內心建構而成). 提供微世界學習環境、供學習者探索和解決問題. 1990 迄今. 社會認知觀點 (語言可視為一種社會認知發展出的成品). 透過網路協助人們之間的互動. 5. 提供反覆練習式教材.

(17) 第3章章個人英語學習輔助工具本研究所使用到的工具有二種：Backword 與 Personal Wordbank。 Backword 的功能為在 Firefox 瀏覽器中擷取使用者欲查詢之單字，並將該單字進行翻譯後顯示在瀏覽器上，藉此可以讓使用者在瀏覽網頁時可以立即取得欲查詢之單字的解釋。 Personal Wordbank 的功能在於使用者可以在 Personal Wordbank 中自行新增單字列表與單字，藉由單字列表可以將各種單字細分為各種專業單字列表，使用者可以自行新增單字進而達到增加個人的英文單字量。. 3.1 Backword 介紹 Backword 為 Firefox 瀏覽器下的一個附加元件，其主要功能在於當使用者往往在瀏覽網頁或查詢資料時，會遇到不熟悉的英文單字，這時候使用者可以將滑鼠鼠標移到欲查詢的英文單字並停留數秒鐘後，Backword 便會自動彈出小視窗，小視窗裡則會顯示出該英文的中文解釋，因此，使用者可以在短時間內取得該英文單字之中文解釋。其 Backword 作者為 gneheix，圖 3.1 為 Firefox 中已完成安裝 Backword 之畫面。當執行 Backword 時，圖中的十字顯示為綠色時為正常，反之，若十字顯示為紅色時，則為異常。另外，若使用者不想使用 Firefox 可以在圖中十字的位置點擊滑鼠左鍵一次，此時可以看到圖中十字由原先的綠色轉變為灰色，就代表已關閉 Backword。若要再打開 Backword，則在圖中十字的位置點擊滑鼠左鍵一次，此時會由灰色轉變為綠色，就表示已完成開啟 Backword。若在圖中十字的位置點擊滑鼠右鍵一次，則會彈出選項小視窗，使用者可以藉此調整 Backword。以上介紹完 Backword 的開啟與關閉等簡單操作，接著以下利用圖 3.2 來講解 Backword 運作流程。當 Backword 被讀取並進行運作時，可以直接查詢單字，或是先選擇語系後再進行單字查詢以及連結到討論組或是作者的 Blog 網頁。當使用者查詢到該單字後，可以藉由該單字之讀音音檔來學習該單字之發音。另外，使用者也可以另外增加其它字典並查詢其它字典之解釋。. 6.

(18) 圖 3.1 Firefox 中已完成安裝 Backword 之畫面. 圖 3.2 Backword 運作流程圖 . Onload Onload 為「當頁面載入時」的意思，屬於 JavaScript 的一種「事件」。當頁. 面載入時會去觸發某些功能或透過即時處理所產生的某些效果。. 7.

(19) . Search and get word explanation 如圖 3.3 Search and get word explanation 為當使用者將滑鼠指標移到欲查詢. 的單字上後，backword 會去 Google 查詢單字解釋並取得該單字之解釋，藉此使用者可以透過 backword 瞭解該單字之意思。. 圖 3.3 Search and get word explanation . Select the language family Backword 中，除了英漢字典外，另外使用者也可以依照個人使用需求來選. 擇語系( Select the language family)，像是英英辭典、英漢字典等。 . Backword website 如圖 3.4，當使用者點擊滑鼠右鍵開啟選單頁面，並點選各網頁，Backword. 便能連結到其它的網頁，例如：Backword Google 討論組、作者的 Blog 等網頁。. 圖 3.4 Backword Website. 8.

(20) 圖 3.5 Find other dictionary . Find other dictionary 當使用者在十字的位置上點擊右鍵後會出現選單，接著選擇選項後，可以自. 行增減其它字典網址於地址列表。如圖 3.5，當新增其他網址後，會出現放大鏡的圖示，將滑鼠游標移置到該圖示時，會顯示〝搜索詳細解釋：(網址)〞，最後點擊放大鏡圖示後，則會將剛完成新增的網址開啟該網頁頁面，這邊以 Yahoo 奇摩字典做範例。 . Included by backword 使用者藉由 Backword 查詢到單字解釋時，藉由點擊 Backword 的十字圖示，. Backword 會收錄目前查詢之單字以及此單字所關連的句子。圖 3.6 為比較 Backword 收錄前與收錄後不同之處。. 9.

(21) 圖 3.6 Included by backword . Pronounce 如圖 3.7，當使用者藉由 Backword 查詢到單字解釋後，可以點擊圖上的喇叭圖示，此時 Backword 會連結到 Dr. eye 的單字音檔做為播放。. 圖 3.7 Pronounce. 3.2 Personal Wordbank 介紹 Personal Wordbank 為義守大學資工系王正浩學長與義守大學資工系張佑康老師共同開發，其主要的目的為支援教師在教授專業科目的同時鼓勵學生增強字彙，亦支援學生自主性增強個人字彙之功能。圖 3.8 為 Personal Wordbank 系統首頁畫面。. 圖 3.8 Personal Wordbank 首頁 Personal Wordbank 的創作理念來自於現今大學生，由於現今的大學生越來越看不懂英文教科書，進一步瞭解後大致整理出原因為單字片語背的太少以及專業知識或背景不足，因此期望能藉由 Personal Wordbank 能有系統的增進個人字彙 10.

(22) 量。 Personal Wordbank 的系統功能分下列四種： 1. 學生學習過程中自行記錄所遇到的單字 2. 學生個人字庫中單字被查詢次數記錄 3. 學生個人學習歷程呈現 4. 教師功能(新增課程、管理修課學生、管理單字作業、管理線上考試、管理離線考試(紙本試題測驗)以及結算學期成績等)。. 當使用者於首頁輸入個人資訊後，經過驗證通過後即可開始使用 Personal Wordbank 裡面使用者的功能。如圖 3.9，使用者驗證成功後，可以新增單字與查詢單字。使用者可以先新增單字列表，接著新增單字時可以選擇該單字所新增的列表位置，藉此可以將個人所有單字分為各種不同的列表並整理為各種專業列表。. 圖 3.9 Personal Wordbank 使用者介面(個人介面與查詢單字介面) 圖 3.10 為使用者新增單字以及新增單字列表，點擊其中一個單字列表，可以看到該單字列表裡面所有增加過的單字、新增時間、查詢次數、中文解釋與例句，其中可以利用查詢次數分析並整理成一份常用到的單字列表。. 11.

(23) 圖 3.10 Personal Wordbank 使用者介面(單字列表). 最後，可以由圖 3.11 得知 Personal Wordbank 涵蓋了課程的部分，授課教師可以藉此管理學生並安排作業及測驗，其中值得特別一提的是授課教師可以從學生的狀態當中了解到學生目前的學習狀況，並視學生學習狀況加以輔導；學生可以藉由測驗來了解到哪些單字是自己目前還不夠熟練的單字抑或是需要加強背記的單字。. 圖 3.11 Personal Wordbank 使用者介面(課程介面). 12.

(24) 第4章章 Firefox 附加元件技術 Firefox 附加元件其使用技術結合了 XUL (XML User Interface Language)、 JavaScript、RDF (Resource Description Framework)、CSS (Cascading Style Sheets)、 XML (eXtensible Markup Language)、XBL (XML Binding Language) 以及 HTML (HyperText Markup Language)等多項技術，由於 XUL 以及 JavaScript 資料較多，因此以下先簡單介紹 XUL 以及 JavaScript，其他部分後面會有詳細介紹。. 4.1 XUL XUL (XML User Interface Language)[17-20]是一種應用 XML 來描述使用者界面的標示語言。XUL 立基於 W3C 標準 XML 1.0 的一個 XML 語言，XUL 可以很容易地讓應用程式在可執行 Mozilla 系列軟體(例如：Mozilla Firefox 和 Mozilla Thunderbird)的作業系統上面使用而開發的使用者界面標示語言。一般大部分網頁應用程式是把使用者介面跟程式流程緊緊的結合在一起，而不同的是，XUL 將應用程式的各個組成分成以下三個部份︰ (1) Content：定義使用者界面的 XUL 檔。(以 XUL、XBL 與 JavaScript 組成) (2) Skin：定義程式外觀的 CSS 和圖檔。(以 CSS 和圖檔組成) (3) Locale：定義各種特定語言界面的文字標籤的 DTD 檔。特定語言的文字標籤。(以 DTD 以及在 .properties 檔案中對應的字串) XUL 應用程式的外觀可以自由地改變，且應用程式可以為任何語言或地區，完全獨立於程式流程或外觀。另外 XUL 定義了一套豐富的元素，例如： Menubars、Buttons、Images 及 Tabs 等多項元素，可在 XUL 中定義界面中每一個組件的各個元素，這樣就不需要使用者自己編寫很多 JavaScript 來維護和控制很多界面元素。. 13.

(25) 圖 4.1 Firefox 附加元件所使用到的網頁應用程式技術. 4.2 JavaScript JavaScript[21-26]是一種直譯式的程式語言，它可在網頁上製作動態變化的效果，並可直接在網頁上執行。JavaScript 是由 Netscape 公司與 Sun 公司發展出的 Java 語言，JavaScript 和 Java 兩者除了在語法上有相似之處，以及兩者都可以在瀏覽器中提供可執行的內容，不過這兩種是不同的程式語言。 JavaScript 與 Java 的最大不同之處是 JavaScript 不需編譯，可直接撰寫在 HTML 文件中，在撰寫 JavaScript 時，只要在 HTML 檔案的標籤中註明以下為 JavaScript 的程式碼，就可在該標籤內撰寫 JavaScript 程式碼，當瀏覽器讀取含有 JavaScript 的 HTML 檔案後，便可執行 JavaScript。其中 Firefox 採用 JavaScript 做為附加元件的開發語言。. 4.3 Firefox 附加元件的檔案結構 4.3.1 系統架構 Firefox 附加元件現今已多達上萬種，其每一個附加元件的設計皆有迥然不同的設計風格，這邊以 Backword 說明 Firefox 附加元件的架構。Backword 的架構如圖 4.2。Backword 整個資料夾中包含有 chrome、components 以及 defaults 上述三個資料夾與 chrome.manifest[27-30]以及 install.rdf[31-34]這兩個檔案。其細部目錄架構如下：. 14.

(26) 圖 4.2 Backword 目錄架構圖 . chrome.manifest 程式碼請參見表 4.1，chrome.manifest 檔案記載 Overlay[35-36]、locale[37]. 以及 skin[38]等對應位置。例如：overlay chrome://browser/content/browser.xul chrome://backword/content/backword.xul，當 chrome://browser/content/browser.xul 加載的時候，也一併將 chrome://backword/content/backword.xul 加載進來。. 表 4.1 chrome.manifest # XUL Overlays content backword chrome/content/ content backword chrome/content/ contentaccessible=yes overlay chrome://browser/content/browser.xul chrome://backword/content/backword.xul overlay chrome://messenger/content/messenger.xul chrome://backword/content/backword.xul overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://backword/content/backword.xul. # All locales locale. backword en-US. chrome/locale/en-US/. locale. backword zh-CN. chrome/locale/zh-CN/. locale. backword zh-TW. chrome/locale/zh-TW/. # Skin related overlays skin. backword classic/1.0. chrome/skin/classic/. 15.

(27) . install.rdf install.rdf 檔案為 Firefox、Thunderbird 等軟體擴充套件中的安裝描述檔。程. 式碼請參見表 4.2。. 表 4.2 install.rdf  <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">.  <Description about="urn:mozilla:install-manifest">.  <em:id>[email protected]</em:id> <em:name>backword</em:name> <em:version>2.0.1.4</em:version> <em:description>Backup every word ever met</em:description> <em:creator>gneheix</em:creator> <em:homepageURL>http://backword.gneheix.com</em:homepageURL> <em:iconURL>chrome://backword/skin/openPage.gif</em:iconURL> <em:contributor>passerby - Traditional Chinese</em:contributor> <em:optionsURL>chrome://backword/content/options.xul</em:optionsURL> <em:extension>true</em:extension> <em:type>2</em:type>.  <em:file> <Description about="urn:mozilla:extension:file:backword.jar"> <em:package>content/</em:package> <em:skin>skin/classic/</em:skin> <em:locale>locale/en-US/</em:locale> <em:locale>locale/zh-CN/</em:locale> <em:locale>locale/zh-TW/</em:locale> </Description> </em:file>. 16.

(28)     <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>3.5.*</em:maxVersion> </Description> </em:targetApplication>. </Description> </RDF>. . defaults defaults 資料夾中的 setting.js 儲存某些參數。例如：apiurl、apiweburl 的連結. 位置等。由於資料隱私考量的關係，表 4.3 只附上部分程式碼。. 表 4.3 setting.js pref("backword.translator", "google.zh-CN"); pref("backword.searchweburl", "http://sh.dict.cn/search/?q="); pref("backword.apiurl", "http://localhost:3000/backend/xmlrpc"); pref("backword.apiweburl", "http://localhost:3000/");. . chrome chrome 資料夾中有三個資料夾(content、locale 及 skin)以及 backword.jar 壓. 縮檔。backword.jar 壓縮檔為安裝附加元件 backword 會使用到的檔案，將 chrome 資料夾(content、locale 及 skin 三個資料夾)中的資料，以 zip 方式壓縮而成的檔案，其內容與資料夾中的檔案完全相同。 . skin skin 資料夾裡放置所有 backword 會使用到的圖檔。. . locale locale 資料夾中的資料夾(en-US、zh-CN 及 zh-TW)為 Backword 各種語. 系，使用者可依造自己的語系來選擇 Backword 所呈現出來的界面。部分程 17.

(29) 式碼請參見表 4.4。. 表 4.4 backword.dtd <!ENTITY options.windowtitle "設置"> <!ENTITY options.settingstab "選項"> <!ENTITY options.helptab "幫助"> <!ENTITY options.groupbox.translator "詞典"> <!ENTITY options.translator.google.es "Google - 西班牙語"> <!ENTITY options.translator.google.zh-TW "Google - 繁體中文"> <!ENTITY options.translator.dictcn.tw "Dict.cn - 繁體中文"> <!ENTITY options.translator.showphonetics "顯示音標 (可能導致 Firefox 假死)"> <!ENTITY options.help.link.lable.homepage "首頁:"> <!ENTITY options.help.link.lable.blog "作者 Blog："> <!ENTITY options.help.link.lable.email "作者 E-mail："> <!ENTITY options.help.title.searchweb "搜索詳細解釋"> <!ENTITY menu.options.label "選項(O)"> <!ENTITY menu.options.accesskey "O"> <!ENTITY menu.pages.label "網頁(P)"> <!ENTITY menu.pages.accesskey "P"> <!ENTITY menu.dictionary.label "詞典(D)"> <!ENTITY menu.dictionary.accesskey "D"> <!ENTITY menu.usingapi.label "使用後臺(S)"> <!ENTITY menu.usingapi.accesskey "S"> <!ENTITY menu.usinglocalapi.label "使用本地存儲(L)"> <!ENTITY menu.usinglocalapi.accesskey "L"> <!ENTITY menu.showpronunciation.label "使用 Flash 即時發音"> <!ENTITY menu.showpronunciation.accesskey "F"> <!ENTITY menu.quotesentence.label "自動選中當前句子(A)"> <!ENTITY menu.quotesentence.accesskey "A"> <!ENTITY menu.ctrl.label "在 Ctrl 鍵被按下時取詞"> <!ENTITY menu.ctrl.accesskey "C"> <!ENTITY menu.autoback.label "自动收集"> <!ENTITY menu.autoback.accesskey "U"> <!ENTITY menu.enable.label "即時翻譯(E)"> <!ENTITY menu.enable.accesskey "E">. 18.

(30) . content 資料夾 option.xul 及 option.js 為使用者於十字之處按下滑鼠右鍵後，所彈出的. 選項視窗內容。 backword.xul 及 backword.js 則是 Backword 附加元件主要運用到的程式碼。這邊以區塊方式來做說明。. . option(選單) 如表 4.5 Part1 的部分，則是圖 4.3 第 1 區塊的部分，每一個<tab></tab>為一. 個 tab(分頁)[39-40]，每一個<tabs></tabs>為一整組 tabs 的部分，其 tab 所顯示的值請參見表 4.5 Part1 的部分，每一個 tab 所對應的值為程式的 label 值，例如： help-tab 的 label 值為“&options.helptab;”，對應到表 4.4 backword.dtd 第 3 行，即可得知為 label 值為“幫助”。. 圖 4.3 Backword 彈出式選單畫面如表 4.5 Part2 的部分，則是圖 4.3 第 2 區塊的部分，每一個<menupopup> </menupopup> 為一個 menupopup( 下拉式選單 )[41] ， <menuitem> 為 menuitem[42]，下拉式選單中一個子項的部分，其值如同上述方法，例如： <menuitem>所對應到的 label 值為“&options. translator.dictcn.tw;”，對應到表 4.4. 19.

(31) backword.dtd 程式碼第 7 行，即可得知該 label 值為“繁體中文”。另外<checkbox id="showphonetics" label="&options.translator.showphonetics;" />即為表 4.4 第 8 行之“顯示音標(可能導致 Firefox 假死)”這一個 checkbox。另外，<menuseparator />為分隔線[43-44]。最後，如表 4.5 Part3 的部分，則是圖 4.3 第 3 區塊的部分，藉此可以得知 “&options.help. title.searchweb;”為表 4.4 第 12 行之“搜索詳細解釋”。. 表 4.5 options.xul 部分程式 <tabs id="options-tabs"> <tab id="settings-tab" label="&op.settingstab; I"/> Part 1 :. <tab id="settings2-tab" label="&op.settingstab; II"/> <tab id="help-tab" label="&op.helptab;"/> </tabs> <groupbox orient="vertical"> <caption label="&op.groupbox.trans;" /> <menupopup> <menuitem label="&op.trans.googlefr;" value="googlefr" id="googlefr" /> <menuseparator />. Part 2 :. <menuitem label="&op.trans.dictcn;" value="dictcn" id="dictcn" /> <menuitem label="&op.trans.dictcntw;" value="dictcntw" id="dictcntw" /> <menuseparator /> <menuitem label="&op.trans.outlook;" value="outlook" id="outlook" /> </menupopup> <checkbox id="showphonetics" label="&op.trans.showphonetics;" /> </groupbox>. Part 3 :. . <description value="&op.help.title.searchweb;" class="h3" />. backword tooltip 當使用者在查詢單字時，backword 可以將查詢結果顯示在彈出來的小視窗. 中，如圖 4.4，因為考量到未來 backword 會有再延伸擴展的機會，因此這邊介紹有關於彈出來的視窗(tooltip)[45-46]。首先先定義一個名為 addWordButton 的 function，並且於 function 裡先設定好圖檔相關資料，例如：title、src 等。待設定完畢之後，再至 updateLayout function 呼叫 addWordButton function 即可，其程式碼如表 4.6，架構流程圖請參見圖 4.5。. 20.

(32) 圖 4.4 Tooltip function. 圖 4.5 Tooltip 之架構流程圖表 4.6 Tooltip function BW_Layout.prototype.addWordButton = function () { var button = BW_createElement("IMG"); button.setAttribute("align", "absmiddle"); button.style.cursor = "pointer"; button.style.backgroundColor = "#FFFACE"; button.setAttribute("title", "Open WebService"); button.setAttribute("src", "chrome://backword/skin/addWord.gif"); this.getDiv().appendChild(button); };. 21.

(33) 表 4.7 backword.xul 事件型態 <script> var backword = new BW_Layout(); addEventListener("load", backword.doLoad, false); addEventListener("unload", backword.doUnload, false); addEventListener("mousemove", backword.doMouseMove, false); addEventListener("mouseout", backword.doMouseOut, false); addEventListener("mousedown", backword.doMouseDown, false); addEventListener("mouseup", backword.doMouseUp, false); addEventListener("scroll", backword.doScroll, false); addEventListener("blur",. backword.doBlur, false);. </script>. . backword addEventListener 首先先提到 backword 的 addEventListener(事件型態)[47-49]， addEventListener 用法就是當某個事件(狀況)被觸發了之後就會去呼叫並執. 行某個 Function。backword.xul 檔案一共使用到八個事件型態，其程式碼如表 4.7 。其型態內容如表 4.8 ，例如： “ addEventListener("mouseout", backword.doMouseOut, false); ” ，當滑鼠離開元素時，則會去呼叫並執行 doMouseOut function 。此時 doMouseOut function 執行時則會去呼叫 doMouseOutImpl function，當 doMouseOutImpl function 執行時會去呼叫 killTimer function，最後將計時器結束。其程式碼請參見表 4.9，其 addEventListener 之架構流程圖請參見圖 4.6。. 圖 4.6 addEventListener 架構流程圖 22.

(34) 處理程式 doload dounload domousemove domouseout domousedown domouseup doscroll doblur. 表 4.8 addEventListener 事件型態表何時引發事件載入完畢卸載或網頁離開結束滑鼠移動滑鼠離開元素按下滑鼠鍵時滑鼠鍵放開時滑鼠滾輪捲動頁面時元素失去輸入焦點表 4.9 DoMouseOut function. BW_Layout.prototype.doMouseOut = function (e) { backword.doMouseOutImpl(e); }; BW_Layout.prototype.doMouseOutImpl = function (e) { this.killTimer(); };. . Backword 查詢單字解釋功能 Backword 查詢單字解釋功能是發送請求至 Google 翻譯工具，待 Google 回. 傳解釋結果後，Backword 會彈出一個小視窗，並顯示查詢解釋結果。程式碼請詳見表 4.10。如圖 4.7，使用者使用 backword 查詢結果與 Google 回應解釋結果兩者是一樣的。其架構流程圖請參見圖 4.8。. 圖 4.7 Backword 查詢結果 23.

(35) 表 4.10 Backword 查詢單字解釋功能 var tolang = this._tolang; var host = "www.google.com"; var lang = "en|" + tolang; var url = BW_DictionaryUrl(host, text, lang, tolang); var request = new XMLHttpRequest(); request.open("GET", url, false); request.send(null); if (request.status == 200) { if (/^zh/.test(tolang)) { response = request.responseText.replace(/ /g, ""); } else { response = request.responseText; } }. function BW_ComposeUrl(prefix, host, restrict, searchStringTerms) { var parts = []; parts.push("http://"); parts.push(prefix); parts.push(host.substr(3)); parts.push("/"); parts.push(restrict); parts.push("?"); parts.push(searchStringTerms.join("&")); return parts.join(""); }. function BW_DictionaryUrl(host, text, lang, hl) { var queryParts = []; queryParts.push("sourceid=navclient-ff"); queryParts.push("ie=UTF-8"); queryParts.push("oe=UTF-8"); queryParts.push("text=" + text); queryParts.push("langpair=" + lang); queryParts.push("hl=" + hl); queryParts.push("sig=8" + GPR_awesomeHash(text)); return BW_ComposeUrl("www", host, "tbproxy/dictionary", queryParts); }. 24.

(36) 圖 4.8 查詢單字解釋之架構流程圖. 25.

(37) 第5章章實驗結果本章所要介紹的為本論文所提出的方法，本章節將介紹本方法的架構、功能、流程與展示。. 5.1 系統架構以 Backword 為基礎來發展本系統，其架構如圖 5.1。Backword 整個資料夾中包含有 chrome、components 以及 defaults 上述三個資料夾與 chrome.manifest 以及 install.rdf 這兩個檔案。其細部架構同 4.3.1 系統架構，這邊就不重覆介紹。. 圖 5.1 Backword 目錄架構圖. 5.2 系統功能本系統是結合 Backword 與 Personal Wordbank。當使用者於 Firefox 瀏覽器安裝完畢後，即可至 User Account 輸入個人資料進行資料驗證，當使用者驗證通過後，系統將自動與 Personal Wordbank 相互連接。當使用者開始於 Firefox 瀏覽器瀏覽網頁時，途中遇到需要查詢的英文單字時，即可將滑鼠移至欲查詢的英文單字上，並停留數秒鐘後則會顯示該單字資料。在等候數秒鐘的這段時間內，系統首先先連到 Personal Wordbank 進行單字查詢，若使用者個人字庫中有該單字的資料，則 Personal Wordbank 會記錄該單 26.

(38) 字之查詢次數，同時並回傳該單字之解釋，當 Backword 收到該單字之解釋後，則會彈出小視窗顯示該單字之解釋。反之，若使用者個人字庫中沒有該單字時，系統則會連接到 Google 翻譯進行單字查詢，待取得該單字之解釋後，則會彈出小視窗顯示使用者的個人字庫中無此單字資料，並顯示由 Google 翻譯該單字之查詢結果，最後，使用者也可以自行新增該單字資料於 Personal Wordbank。. 5.3 系統流程在系統流程方面，流程圖如圖 5.2，當系統載入時，使用者輸入資料進行帳號驗證，若驗證成功則與 Personal Wordbank 相互連接；反之，若使用者驗證失敗或不驗證，則不與 Personal Wordbank 做連接。. 圖 5.2 Backword 流程圖當使用者移動滑鼠指標到欲查詢的英文單字時，會因為驗證結果而分兩種： (1) 驗證失敗或不驗證當使用者驗證失敗或不進行驗證時，查詢單字時則會保留原本 Backword 採用的 Google 翻譯為該單字解釋之字典來源。 27.

(39) (2) 驗證成功：當使用者驗證成功後，Backword 會與 Personal Wordbank 相互連接，當使用者查詢單字時則改為優先連接到 Personal Wordbank。若使用者個人字庫中無單字資料時，則一樣改採用 Google 翻譯為該單字解釋之字典來源。反之，若使用者個人字庫中有該單字資料時，則從 Personal Wordbank 取得該單字之解釋，並將該單字之查詢紀錄累加 1。. 5.4 成果展示本章節主要介紹為本研究實作 Backword 結合 Personal Wordbank 的部分，為了區分原始 Backword 以及結合 Personal Wordbank 後的 Backword，以下會依各步驟做介紹並以兩者相互對比的方式呈現。 (1) 使用者選單如圖 5.3，左圖為 Backword 原始版，右圖添加了 User Account，供使用者輸入個人資訊進行帳號驗證，其使用者選單之部分程式碼請參見表 5.1。. 圖 5.3 使用者選單. 28.

(40) 表 5.1 新增 User Account 之部分程式碼 <tabpanel> <vbox> <groupbox orient="vertical"> <caption label="&op.pwb.wsoption;"/> <hbox align="center"> <label value="&op.pwb.wsusername;" /> <textbox id="wsusername"/> </hbox> <hbox align="center"> <label value="&op.pwb.wspassword;" /> <textbox id="wspassword" type="password"/> </hbox> <hbox align="center"> <button id="wslogin" label="&op.pwb.wslogin;" onclick="BW_op.loginWS();"/> <button id="wslogout" label="&op.pwb.wslogout;" onclick="BW_op.logoutWS();"/> </hbox> <description id="checklogin" value=""/> </groupbox> <separator class="thin" /> </vbox> </tabpanel>. (2) 使用者驗證如圖 5.4，使用者輸入個人資訊後點擊 PWB login 進行驗證，若使用者通過驗證，則會顯示 Login Success! Welcome [使用者]，反之，若驗證失敗，則會顯示 Failed! Incorrect Username / Password，其使用者驗證之部分程式碼請參見表 5.2。. 29.

(41) 圖 5.4 Verify username / password 表 5.2 使用者驗證之部分程式碼 var usern = document.getElementById('wsusername').value; var passw = document.getElementById('wspassword').value; var elemt = document.getElementById('checklogin');. var request = new XMLHttpRequest(); request.open("POST", Url, false); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); request.send(null);. if (request.readyState == 4){ if (request.status == 200){ var xmldoc = request.responseXML;. if(Result == "1"){ // Success str = "Login success! Welcome " + UserName; elemt.setAttribute('value',str); } else{ str = "Failed! Incorrect username / password"; elemt.setAttribute('value',str); } } }. 30.

(42) (3) 查詢單字解釋如圖 5.5，使用者驗證成功後，查詢單字解釋時則連接到 Personal Wordbank 非 Google 翻譯；若個人字庫中找不到該單字資料時，則改連接到 Google 翻譯為字典來源。相反的，若使用者不進行驗證或驗證失敗時，查詢單字解釋時則維持原 Google 翻譯不變，請詳見圖 5.6。其查詢單字解釋之部分程式碼請參見表 5.3。. 表 5.3 查詢單字解釋之部分程式碼 var request = new XMLHttpRequest(); request.open("GET", PWBurl, false); request.send(null); if (request.status == 200) { var xmldoc = request.responseText; if (xmldoc == "") { var GoogleUrl = BW_DictionaryUrl(host, text, lang, tolang); var Grequest = new XMLHttpRequest(); Grequest.open("GET", GoogleUrl, false); Grequest.send(null); if (Grequest.status == 200) { response = "<br>Oops! 您的字庫裡沒有這個字!<br>原始: " + Grequest.responseText; } } else { if (/^zh/.test(tolang)) { var StoW = xmldoc.split("=v="); response = "<br>解釋: " + StoW[1] + " <br>例句: " + StoW[2] ; } } }. 31.

(43) 圖 5.5 查詢單字解釋. 圖 5.6 查詢單字解釋(個人字庫查無資料) (4) 新增單字如圖 5.7 時，當使用者驗證成功後，並於查詢單字解釋查無該單字資料時，改由查詢 Google 翻譯取得該單字之解釋的結果。此時使用滑鼠右鍵點擊紅色打勾之圖樣後會彈跳出視窗進行新增單字，圖 5.8 為點擊打勾圖樣後所彈跳出來的視窗畫面。當使用者確認欲新增此單字並點擊 Send 時，系統會彈跳出另一視窗讓使用者再一次確認所新增之單字資料是否正確，圖 5.9 為確認欲新增之單字資料畫面。當使用者點擊確認後，系統則會將此單字資料傳送到 Personal Wordbank 進行新增單字之動作，當完成此單字之新增動作後，則會回傳 OK 字樣並彈跳出視窗讓使用者可藉此得知單字已新增成功；反之，若使用者點擊取消後，系統則會彈跳出顯示 Cancel 字樣之視窗，使用者可藉此得知已取消該單字之新增動作。 32.

(44) 當此單字成功被新增後，使用者可藉由再一次查詢該單字或是查詢自己的個人單字字庫來得知是否成功新增此單字，圖 5.12 為再一次查詢時出現之畫面，可以得知此單字因為使用者新增後，則會顯示該單字之解釋與例句，與圖 5.7 所呈現之畫面不同。如圖 5.13，使用者藉由查詢自己的個人單字字庫來得知已成功新增此單字，同時由於該單字稍早被查詢過一次的緣故，使得該單字之查詢次數顯示為 1，可藉此得知完成該單字新增後，下一次進行該單字之查詢動作後則會記錄該單字之查詢次數。其新增單字部分之部分程式碼請參見表 5.4。. 表 5.4 新增單字之部分程式碼 var word = document.getElementById("PWBword").value; var resp = document.getElementById("PWBexplanation").value; var sent = document.getElementById("PWBsentence").value; var checkagain = "Add this word?\n";. if(confirm(checkagain+"Word:"+word+"\nExplanation:"+resp+"\nSentence:"+sent)) { var request = new XMLHttpRequest(); request.open("GET", Url, false); request.send(null); if (request.status == 200) { alert("OK!! " + request.responseText); } else { alert("Add word failed!!"); } } else { alert("Cancel!!"); }. 33.

(45) 圖 5.7 查詢單字解釋(個人字庫查無此單字資料). 圖 5.8 新增單字之視窗畫面. 圖 5.9 確認欲新增之單字資料視窗畫面. 圖 5.10 再一次查詢所出現之畫面. 34.

(46) 圖 5.11 使用者查詢個人單字字庫之畫面. 35.

(47) 第6章章結論本論文主要是以 Backword 即時翻譯功能結合 Personal Wordbank 個人字庫系統來設計架構出一套以個人英語單字學習為主的輔助工具。其功能在於使用者在使用的過程中，遇到不熟悉的英文單字時，不僅可以快速的取得該單字之中文解釋，同時加以記錄使用者在使用過程中所學習過的單字以及較常用到英文單字，藉由記錄過程中所取得的資料由 Personal Wordbank 的資料庫整合並分析出較常查詢或較常使用的單字。相較於一般傳統翻譯網站及翻譯軟體，Backword 其中一項特點在於使用者於使用過程當中，不需要將瀏覽器以及翻譯程式兩邊頁面一直切換，例如：使用者查詢單字時，原先得要暫停目前瀏覽的頁面，接著切換到翻譯網站的頁面進行查詢，待查詢完後再切換回原先瀏覽的頁面。如此一來一往的切換結果往往會耗費較多時間。關於本研究實做的部分，由於目前 Backword 以及 Personal Wordbank 兩者資料之間的傳遞方式都是以明碼的方式傳遞，因此，安全性的部分仍待改進，以防止駭客盜取資料，以及不肖人士入侵並做不法的事情與損壞 Personal Wordbank 系統與資料庫的資源。最後，在未來工作方面，將加入問卷調查部分以及測驗部分，一來可以藉由問卷分析的數值以及結果來得知本研究是否能確實有效的提升使用者的英文能力，這一方面也是未來將加入的測驗部分，藉由使用者不熟悉的英文單字，透過反覆測驗與複習直到真正學習起來為止。二來可以藉由問卷來評估使用者觀感，並從使用者回饋的部分來了解本研究是否尚有需要改進之處或是還有其他可以擴充發展之處。. 36.

(48) 參考文獻 [1] 朱俊哲，學英文的竅門，創興出版社，1989。 [2] 郤佳源, “偏遠地區國中生學習英語之難處與建議,” Available: http://ejee.ncu.e du.tw/showarticles.asp?CO_no=960. [3] 王星威，EIL 趨勢與台灣英語教學政策之關連性探討，專業英語文教學特輯，第 28 期，第 34 頁，2009。 [4] 王清平, “用心查字典，增進英語字彙,” Available: http://www.cavesbooks.com.t w/webpage/topic/phonepass/9206_1/index.htm. [5] 黃靜怡, “對於大學生增進英語字彙量的建議,” Available: http://ejee.ncu.edu.t w/showarticles.asp?CO_no=958. [6] 王舒葳,“Back to Basics--單字篇,”Available: http://www.cet-taiwan.com/ET/0 7_ET_show.asp?serno=233. [7] WIKIPEDIA, “Computer-assisted language learning,” Available: http://en.wikipe dia.org/wiki/Computer-assisted_language_learning. [8] Mark Warschauer, “Computers and language learning: An overview,” Available: http://www.gse.uci.edu/person/warschauer_m/overview.html. [9] 英語教師資訊科技補給站, “Computer Assisted Language Learning,” Available: http://vlc.eng.ntnu.edu.tw/et&t/課程區/1-4.htm. [10] COMPUTER-ASSISTED LANGUAGE LEARNING, “COMPUTER-ASSISTE D LANGUAGE LEARNING,” Available: http://www.rong-chang.com/call.htm. [11] Computer Assisted Language Learning, “Computer Assisted Language Learning, ” Available: http://www.terra.es/personal/nostat. [12] Mark Warschauer, “Computer Assisted Language Learning: an Introduction,” Available: http://www.ict4lt.org/en/warschauer.htm. [13] EJEE, “電腦與網路輔助英語的教與學,” Available: http://ejee.ncu.edu.tw/show articles.asp?CO_no=541. [14] 劉繼仁、陳世威, “網路科技融入語言課程之分類法,” Available: http://conf.nck u.edu.tw/research/articles/c/20071102/4.html. [15] M. Warschauer & R. Kern (Eds.), Network-based language teaching: Concepts and practice, Cambridge University Press, 2000. [16] EJEE, “遠距教學所帶動之學習變遷,” Available: http://ejee.ncu.edu.tw/showfe 37.

(49) ature.asp?CO_no=868. [17] mozilla, “XUL,” Available: https://developer.mozilla.org/en/XUL. [18] mozilla, “The Joy of XUL,” Available: https://developer.mozilla.org/zh_tw/The_ Joy_of_XUL. [19] Creating Applications with Mozilla, “Creating Applications with Mozilla,” Available: http://books.mozdev.org/html/index.html. [20] mozilla wiki, “XUL,” Available: https://wiki.mozilla.org/XUL:Home_Page. [21] w3schools.com, “JavaScript Tutorial,” Available: http://www.w3schools.com/jS/ default.asp. [22] 半場方人，最新詳解 JavaScript & Dynamic HTML 語法辭典，碩博文化，2008。 [23] David Flanagan，JavaScript 大全(第五版)，O’REILLY，2007。 [24] 曾順，精通 JavaScript + jQuery，松崗，2009。 [25] 德瑞工作室，網頁程式設計師，文魁，2008。 [26] 楊水清，深入淺出 JavaScript 與 Ajax 網頁程式設計，碩博文化，2008。 [27] mozilla, “Chrome Registration,” Available: https://developer.mozilla.org/en/Chro me_Registration. [28] Open Source @ Seneca, “Chrome.manifest File,” Available: http://zenit.senecac. on.ca/wiki/index.php/Chrome.manifest_File. [29] mozillaZine, “Getting started with extension development,” Available: http://kb. mozillazine.org/Getting_started_with_extension_development. [30] Extend Firefox, “Firefox Extension Development Tutorial :: Configuration Files, ” Available: http://www.rietta.com/firefox/Tutorial/conf.html. [31] mozillaZine, “Install.rdf,” Available: http://kb.mozillazine.org/Install.rdf. [32] mozilla, “Install Manifests,” Available: https://developer.mozilla.org/en/install_m anifests. [33] Ben Goodger, “Packaging Firefox/Thunderbird Extensions,” Available: http://ww w.bengoodger.com/software/mb/extensions/packaging/extensions.html. [34] Songbird, “Display Panes,” Available: http://wiki.songbirdnest.com/Developer/A rticles/Getting_Started/Display_Panes. [35] mozilla, “XUL Overlays,” Available: https://developer.mozilla.org/en/XUL_Over lays. [36] mozilla, “Creating a status bar extension,” Available: https://developer.mozilla.or g/en/creating_a_status_bar_extension. 38.

(50) [37] WIKIPEDIA, “Locale,” Available: http://en.wikipedia.org/wiki/Locale. [38] XUL Tutorial, “XUL Tutorial - Modifying the Default Skin,” Available: http://w ww.ar-ent.net/dar/arlib32/out/html/man/xul/defskin.html. [39] mozilla, “tab,” Available: https://developer.mozilla.org/en/XUL/tab. [40] XML.com, “XUL-Enhanced Web Apps,” Available: http://www.xml.com/lpt/a/1 690. [41] mozilla, “menupopup,” Available: https://developer.mozilla.org/en/XUL/menupo pup. [42] mozilla, “menuitem,” Available: https://developer.mozilla.org/en/XUL/menuite m. [43] mozilla, “menuseparator,” Available: https://developer.mozilla.org/en/XUL/menu separator. [44] Java Tutorial, “17. 30. 2. Add Menu Separator,” Available: http://www.java2s.co m/Tutorial/Java/0280__SWT/AddMenuSeparator.htm. [45] The Java Tutorials, “How to Use Tool Tips,” Available: http://java.sun.com/docs/ books/tutorial/uiswing/components/tooltip.html. [46] DYNAMIC DRIVE, “Cool DHTML Tooltip,” Available: http://www.dynamicdri ve.com/dynamicindex5/dhtmltooltip.htm. [47] mozilla, “element.addEventListener,” Available: https://developer.mozilla.org/en/ DOM/element.addEventListener。 [48] QuirksMode, “Advanced event registration models,” Available: http://www.quirk smode.org/js/events_advanced.html. [49] W3C Recommendation, “Document Object Model Events,” Available: http://ww w.w3.org/TR/DOM-Level-2-Events/events.html.. 39.

(51)