정규표현식과 html안에 .coffee 확장자로 작성한 스크립트를 포함시키는 방법에 대하여 알아보자
1) 정규 표현식
- /// ..... /// 슬래쉬3개 앞뒤로 하여 그사이에 표현식을 넣는다
//////////////////////////////////////////
// regex.coffee
emails = ['ysyun@yuwin.co.kr', 'nulpulum@gamil.com', 'joe.567@gmail.com', 'andrew']
emailRegex = ///
([\w\.+-]+) # unique name
@ # at-sign
(\w+) # domain name
(\.\w+[\w\.]*) # tld
///
for email in emails
match = email.match emailRegex
if match?
console.log "#{email} matched"
else
console.log "#{email} didn't matched"
//////////////////////////////////////////
// 컴파일 내역
// Generated by CoffeeScript 1.4.0
var email, emailRegex, emails, match, _i, _len;
emails = ['ysyun@yuwin.co.kr', 'nulpulum@gamil.com', 'joe.567@gmail.com', 'andrew'];
// 한줄로 표현된다
emailRegex = /([\w\.+-]+)@(\w+)(\.\w+[\w\.]*)/;
for (_i = 0, _len = emails.length; _i < _len; _i++) {
email = emails[_i];
match = email.match(emailRegex);
if (match != null) {
console.log("" + email + " matched");
} else {
console.log("" + email + " didn't matched");
}
}
2) Coffeescript를 컴파일한 Javascript 파일을 포함한 경우의 html
- src/dom.coffee 파일 작성
- js/ 디렉토리 밑으로 컴파일된 .js 위치 : coffee -c --watch -o js src/dom.coffee
+ --watch 옵션 : 변경내용을 감시하여 자동 재컴파일 수행
- 브라우저에서 웹서버 도움없이 바로 index.html 파일을 호출하면 된다.
+ 단, jquery.js 파일은 동일 디렉토리에 위치 (첨부파일 참조)
////////////////////////////////////////// // index.html 파일 <!DOCTYPE html> <html> <head> <title> CoffeeScript in the Browser </title> </head> <body> <div id="menu"> <div>Tools</div> <div id="dropdown"> <ul> <li>Tool 1</li> <li>Tool 2</li> <li>Tool 3</li> </ul> </div> </div> <script src="jquery.js"></script> <script src="js/dom.js"></script> <!-- 컴파일한 dom.js 파일을 포함시킨다 --> </body> </html>
// dom.coffee 파일로 jquery 기반 코딩
$ ->
menu = $ '#menu'
dropdown = $ '#dropdown'
dropdown.hide()
menu.on 'mouseover', (e) -> dropdown.stop().show 200
menu.on 'mouseout', (e) -> dropdown.stop().hide 200
//////////////////////////////////////////
// 컴파일 내역
$(function() {
var dropdown, menu;
menu = $('#menu');
dropdown = $('#dropdown');
dropdown.hide();
menu.on('mouseover', function(e) {
return dropdown.stop().show(200);
});
return menu.on('mouseout', function(e) {
return dropdown.stop().hide(200);
});
});
3) dom.coffee 파일을 직접 html안에 포함시키기
- html안에 coffee-script.js 파일을 포함시킨다 (첨부파일 참조)
+ 다운로드 한 파일의 extras 디렉토리 파일임
- dom.coffee 파일을 포함시키고 type="text/coffeescript" 타입을 넣는다
////////////////////////////////////////// // index2.html 파일 <!DOCTYPE html> <html> <head> <title> CoffeeScript in the Browser </title> </head> <body> <div id="menu"> <div>Tools</div> <div id="dropdown"> <ul> <li>Tool 1</li> <li>Tool 2</li> <li>Tool 3</li> </ul> </div> </div> <script src="jquery.js"></script> <script src="coffee-script.js"></script> <!-- 컴파일한 coffee-script.js 파일을 포함 --> <script src="src/dom.coffee" type="text/coffeescript"></script> <!-- dom.coffee 포함 --> </body> </html>
- 브라우져에서 로컬파일을 불러오게 되면 오류가 발생한다
- 실행방법 : 웹서버 구동하여 브라우져에서 호출
+ node-static 을 설치한다 (블로그 참조)
+ $ static : dom.coffee 파일이 있는 곳에서 수행 (8080 포트로 브라우저에서 호출함)
- 최종 파일 구조
* 파일
coffeescript-5.zip<참조>
'Languages > CoffeeScript' 카테고리의 다른 글
| [CoffeeScript] Coffeebar 에서 커피한잔 합시다 (0) | 2013.03.30 |
|---|---|
| [CoffeeScript] 핵심 문법 정리하기 (1) (0) | 2013.01.31 |
| [CoffeeScript] 문법 사용하기 (4) - class, extends (0) | 2013.01.27 |
| [CoffeeScript] 문법 사용하기 (3) - @ :: 표현 (0) | 2013.01.27 |
| [CoffeeScript] 문법 사용하기 (2) - 조건, 반복문 (0) | 2013.01.24 |