블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.01.29 21:48 Languages/CoffeeScript

정규표현식과 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



<참조>

  - 자바스크립트 정규표현식

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식