Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대
Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae
Dirty Coding
What is Javascript? Javascript는 Java가아님웹페이지의제어및동적효과등 Prototype 기반 OOP 원시데이터타입, 혼합데이터타입 ( 클래스 ) Interpreter (Execute a Line by Line) Server Side Language로도개발중.
What is Eclipse 오픈소스확장가능한 IDE Javascript이외에많은언어를지원수많은플러그인을가지고있음 Java 기반 IDE 거의모든 PC 운영체제지원 (Linux, Windows, Mac) http://code.google.com/p/jsdoc-toolkit/w/list
Javascript Debugging is Hard!
What is JSDoc Javascript 문서화 HTML, XML, XMI로문서출력지원 Eclipse나기타 IDE에서자동완성및기타기능보조가능 Javadoc 기반으로만들어짐 Eclipse 지원플러그인있음
What is Web Inspector View the page source Live DOM Hierarchy Script Debugging Web Packet Capture Profiling
Not Found Javascript Document
What is JSDoc JSDoc 기술하지않았을때 JSDoc 기술하였을때
따라해보기 Eclipse EE(Indigo) 다운로드 JSDT가포함되어있음 Firefox 또는 Google 크롬설치 Firefox일경우 Firebug와같은 Add-on 설치 Eclipse로프로젝트작성뒤코딩시작!
따라해보기 - Index.html <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>
따라해보기 - 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()
따라해보기 - Dictionary.js /** * @class * @param newtext * @param 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; }; /** * @class */ function WordRepository() { /** * @type {Array} */ var words = new Object(); } /** * @param {String} */ this.delword = function(text) { delete words[text]; }; /** * @param {Word} */ this.addword = function(newword) { words[newword.gettext()] = newword; }; /** * @param {String} * @return Word */ this.getword = function (text) { return words[text]; }; this.debug = function () { for ( var key in words) { console.debug(key); } };
따라해보기 - JSDoc 생성 http://code.google.com/p/jsdoc-toolkit/downloads/list 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"
따라해보기 - JSDoc 결과
따라해보기 - Web Inspector Firefox Firebug 설치 ( 추가기능 ) 도구 > Web 개발도구 > Firebug > Firebug 열기 Safari 환경설정 (Ctrl or Command +,) > 고급메뉴막대에서개발자용메뉴보기체크 Chrome Ctrl + Shift + I(Windows)
따라해보기 - 콘솔 콘솔에서 dic.debug();
따라해보기 - 콘솔사용 Firebug http://getfirebug.com/wiki/index.php/ Command_Line_API Safari http://developer.apple.com/library/safari/ #documentation/appleapplications/conceptual/ Safari_Developer_Guide/DebuggingYourWebsite/ DebuggingYourWebsite.html
Javascript Programing! Eclipse JSDoc Web Inspector
감사합니다.