Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Size: px

Start display at page:

Download "Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일"

미원 표
5 years ago
Views:

1 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대

2 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner Blog: Facebook:

3 Dirty Coding

4 What is Javascript? Javascript는 Java가아님웹페이지의제어및동적효과등 Prototype 기반 OOP 원시데이터타입, 혼합데이터타입 ( 클래스 ) Interpreter (Execute a Line by Line) Server Side Language로도개발중.

5 What is Eclipse 오픈소스확장가능한 IDE Javascript이외에많은언어를지원수많은플러그인을가지고있음 Java 기반 IDE 거의모든 PC 운영체제지원 (Linux, Windows, Mac)

6 Javascript Debugging is Hard!

7 What is JSDoc Javascript 문서화 HTML, XML, XMI로문서출력지원 Eclipse나기타 IDE에서자동완성및기타기능보조가능 Javadoc 기반으로만들어짐 Eclipse 지원플러그인있음

8 What is Web Inspector View the page source Live DOM Hierarchy Script Debugging Web Packet Capture Profiling

9 Not Found Javascript Document

10 What is JSDoc JSDoc 기술하지않았을때 JSDoc 기술하였을때

11 따라해보기 Eclipse EE(Indigo) 다운로드 JSDT가포함되어있음 Firefox 또는 Google 크롬설치 Firefox일경우 Firebug와같은 Add-on 설치 Eclipse로프로젝트작성뒤코딩시작!

12 따라해보기 - Index.html <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <script type="text/javascript" src="dictionary.js"></script> <script type="text/javascript"> var word; dic = new WordRepository(); dic.addword(new Word("Dog", " 강아지 ")); dic.addword(new Word("Cat", " 고양이 ")); </script> </head> <body> </body> </html>

13 따라해보기 - Dictionary WordRepository -words : Word +addword(newword:word) +delword(text:string) +getword(text:string) Word -text : string -mean : string Word(newText:string, newmean:string) +gettext() +getmean()

14 따라해보기 - Dictionary.js /** newtext newmean */ function Word(newText, newmean) { var text = newtext; } var mean = newmean; /** * Get a Text */ this.gettext = function() { }; /** return text; * Get a Text Mean */ this.getmean = function() { return mean; }; /** */ function WordRepository() { /** {Array} */ var words = new Object(); } /** {String} */ this.delword = function(text) { delete words[text]; }; /** {Word} */ this.addword = function(newword) { words[newword.gettext()] = newword; }; /** {String} Word */ this.getword = function (text) { return words[text]; }; this.debug = function () { for ( var key in words) { console.debug(key); } };

15 따라해보기 - JSDoc 생성 Run > External Tools > Open External Tools Dialog New (Name: Generate JSDoc) Location: jre bin path Working Directory: JS-Toolkit Path Argument: -jar jsrun.jar app/run.js "project_path" - t=templates/jsdoc -d="project_path/jsdoc"

16 따라해보기 - JSDoc 결과

17 따라해보기 - Web Inspector Firefox Firebug 설치 ( 추가기능 ) 도구 > Web 개발도구 > Firebug > Firebug 열기 Safari 환경설정 (Ctrl or Command +,) > 고급메뉴막대에서개발자용메뉴보기체크 Chrome Ctrl + Shift + I(Windows)

18 따라해보기 - 콘솔 콘솔에서 dic.debug();

19 따라해보기 - 콘솔사용 Firebug Command_Line_API Safari #documentation/appleapplications/conceptual/ Safari_Developer_Guide/DebuggingYourWebsite/ DebuggingYourWebsite.html

20 Javascript Programing! Eclipse JSDoc Web Inspector

21 감사합니다.

3장

C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX