javascript 에서 java의 stringformat 과 유사하게 사용하고 싶은 경우가 있다.

그렇다면 아래 로직을 추가하면된다.


if (!String.prototype.format) {

          String.prototype.format = function() {
               var args = arguments;
               return this.replace(/{(\d+)}/g, function(match, number) {
                    return typeof args[number] != 'undefined' ? args[number]
                              : match;
               });
          };
     }


{숫자} 를 해당 파라미터를 replace 함

(자바스크립트는 파라미터가 arguments 배열로 전달됨, 다른 포스트의 setTimeout 에 파라미터 넘기는 부분에서도 사용함  -> 해당예제)


사용방법 >

var str = "string replace : {0} , {1} => {1} , {0}".format("a","b") 
str 값은 "string replace : a , b => b , a"  가 된다.



저작자표시 비영리 변경금지

'IT > javascript' 카테고리의 다른 글

String fommat 2  (0) 2015.08.03
javascript 의 arguments  (0) 2014.12.03
yuicommpressor (js /css 압축)  (0) 2014.11.24
setTimeout , setInterval , clearTimeout , clearInterval 사용  (0) 2014.11.22
setTimeout 에 파라미터를 넘기는 법  (0) 2014.11.22

javascript 와 css 파일에 대해서는 많은 압축 프로그램들이 있다.

 

yuicommpressor 는 사용결과 다른 압축프로그램보다 압축률이 좋게 나오지는 않았다.

그렇지만 다른압축프로그램에서 발생한 한글문제가 발생하지 않기 때문에 이 압축프로그램을 사용하였다.

 

홈페이지 : http://yui.2clics.net/

 

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

 

Global Options

-h, --help                Displays this information(도움말)

--type <js|css>           Specifies the type of the input file(변경하고자 하는 파일의 타입 js 또는 css)

--charset <charset>       Read the input file using <charset>(사용하는 파일의 charset 지정)

--line-break <column>     Insert a line break after the specified column number(특정 컬럼 번호뒤에 줄바꿈 삽입)

-v, --verbose             Display informational messages and warnings(콘솔정보 표시)

-o <file>                 Place the output into <file>. Defaults to stdout.(압축된 파일의 파일명)

 

JavaScript Options

--nomunge                 Minify only, do not obfuscate (난독을 제외한 압축)

--preserve-semi           Preserve all semicolons (세미콜론 유지)

--disable-optimizations   Disable all micro optimizations

                          (foo['bar] => foo.bar and {'bar':x} => {bar:x} 의 형태로 변환을 사용하지 않음)

           

* disable-optimizations 의 추가 설명

disable-optimizations 을 설정하지 않을 경우 아래와 같은 소스로 두가지 메소드가 호출된다.

if (!disableOptimizations) {

        optimizeObjectMemberAccess(this.tokens);

        optimizeObjLitMemberDecl(this.tokens);

    }

optimizeObjectMemberAccess 메소드의 경우 obj["foo"] 를 obj.foo 로 변환하여 3bytes 를 절약한다. 

[]"" 의 4바이트가 제외되고,  . 의 1바이트가 추가된다.

 

optimizeObjLitMemberDecl 의 경우에는 json 내부의 멤버 선언부의 스트링 선언 'foo' 을 foo 로 변환하여

'' 2바이트를 절약한다.

 

사용법>

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

저작자표시 비영리 변경금지

'IT > javascript' 카테고리의 다른 글

String fommat 2  (0) 2015.08.03
javascript 의 arguments  (0) 2014.12.03
javascript 에서 string.format 사용  (0) 2014.11.24
setTimeout , setInterval , clearTimeout , clearInterval 사용  (0) 2014.11.22
setTimeout 에 파라미터를 넘기는 법  (0) 2014.11.22

이번 장에서는 효과에 대해서 알아보자.


효과란 어떤 태그에 대해 상태의 변경을 화면상으로 보여주는 것들을 말한다.

대표적인 효과는 보임(show)과 숨김(hide)이 있다.


syntax> show/hide

$(셀렉터).show(속도, 콜백함수);

$(셀렉터).hide(속도, 콜백함수);


$(셀렉터).show();                            // 옳바른 구문

$(셀렉터).show(속도);                      // 옳바른 구문

$(셀렉터).show(속도, 콜백함수);        // 옳바른 구문

$(셀렉터).show(콜백함수);                // 잘못된 구문

위와 같이 파라미터를 원하는대로 사용할 수 있으나 앞의 파라미터를 제외하고 뒤에 파라미터를 사용할 수는 없다


속도는 1/1000초의 숫자 또는 'fast', 'slow' , 'normal' 의 문자열이 가능하다.


이렇게 제이쿼리는 매우 간단한 방법으로 해당 태그를 숨기고 보여줄 수가 있다.


* 소스 예시

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery effect</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


<script type="text/javascript">

    $(function(){

$("#clickBtn").click(function(){

        $(".divLabel").hide();

});

    });

</script>

</head>

<body>

<input type="button" id="clickBtn" value="버튼" />

<div class="divLabel">

라벨~

</div>

</body>

</html>


소스를 보다시피 매우 간단하다. 셀렉터를 선택 후 show() 또는 hide() 호출만으로 보이고 숨김을 할 수가 있다.


단 보임과 숨김은 보통 쌍으로 이루어진다.

hide 상태 -> 보임버튼 클릭 -> show 상태

show 상태 -> 숨김버튼 클릭 -> hide 상태

이런 식으로 말이다.


이런 기능을 위해 제이쿼리에서는 toggle 이라는 function 을 제공해 준다.

syntax> toggle

$(셀렉터).toggle();


위와 같이 toggle 호출 한번만으로 hide/show 의 상태 변경이 자동으로 이루어 진다.(toggle 의 경우 스위치형태로 function 을 호출하도록 사용할 수도 있다)


아래는 toggle 로 구현된 예시이다.


테스트 예시


버튼 클릭 =>


show/hide 에 대한 예시 화면




이상~

저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

jQuery 플러그인 화면 도시여부 체크  (0) 2016.01.20
[제이쿼리(jQuery)] lesson 6  (0) 2014.12.16
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24

이번 장에서는 이벤트에 대해 조금더 상세히 다루도록 하겠다.


* 마우스 이벤트의 종류


마우스 이벤트 

설명 

 click

 마우스를 클릭했을 때 발생

 dblclick

 마우스를 더블 클릭했을 때 발생

 mouseenter

 마우스가 해당요소 안으로 진입했을 때 발생

 mouseleave

 마우스가 해당요소 밖으로 나갔을 때 발생

 mousedown

 마우스의 왼쪽키가 눌린 경우

 mouseup

 마우스의 눌렸던 왼쪽키가 풀린 경우

 hover

 mouseenter 와 mouseleave 이벤트의 묶음


syntax>

$(셀렉터).이벤트액션(실행할 function)


mouseenter 와 mouseleave 이벤트는 다음 그림과 같다.



해당 태그 안으로 진입할 경우 mouseenter 이벤트가 밖으로 나갈 경우는 mouserleave 이벤트가 발생한다. 이 두가지 동작을 하나로 합친 이벤트가 hover 이다



$("table").mouserenter(function(){

alert("테이블에 들어옴");

});

$("table").mouserleave(function(){

alert("테이블에서 나감");

});


▼

hover 로 변경

syntax>

$(셀렉터).이벤트액션(마우스 enter 이벤트 function , 마우스 leave 이벤트 function)


$("table").hover(function(){

alert("테이블에 들어옴");

    },

    function(){

    alert("테이블에서 나감");

});



* 키보드 이벤트의 종류


키보드 이벤트 

설명 

 keypress

 키입력에 대한 이벤트, keydown,keyup 과 다른 것은 쉬프트, 탭 등의 키는 이벤트를 발생시키지 않는다. 또한 한글에 대해서 이벤트를 발생하지 않는다.

 keydown

 키가 눌렸을 때 이벤트

 keyup

 키의 눌림이 풀렸을 때 이벤트


* 폼 이벤트의 종류


폼 이벤트 

설명 

 submit

 서버의 전송을 위한 이벤트

 change

 내용이 변경되었을 때 이벤트

 focus

 해당 요소가 포커스되었을 때 발생

 focusin

 해당 요소가 포커스되었을 때 발생하지만 focus 와의 차이는 focus 이벤트보다 먼저 발생한다.( focusin은 focus에 진입되는 순간, focus 완료되는 순간 focus 이벤트)

 blur

 해당 요소의 포커스가 빠져나갔을 때 발생

 focusout

 해당 요소의 포커스가 빠져나갔을 때 발생하지만 blur 와의 차이는 blur 이벤트보다 먼저 발생한다.


* document/window 이벤트의 종류


document/window 이벤트 

설명 

 load

 로딩이 완료되었을 때의 이벤트

 resize

 크기가 변경되었을 때의 이벤트

 scroll

 스크롤이 변경되었을 때의 이벤트

 unload

 종료시 발생하는 이벤트




아래에서 발생되는 간단한 발생이벤트 및 순서를 테스트해보도록 하자.
(그려진 큰박스/작은박에 마우스 이동 또는 클릭을 해보자. 또는 그 하단의 textbox 에 focusing 을 해보도록 하자)


* 이벤트 테스트

큰박스
작은박스
발생이벤트




* 이벤트 테스트에 바인딩한 이벤트

 태그

 이벤트

 큰박스/작은박스
  • mouseenter
  • mouseleave
  • click
  • dblclick

 텍스트박스
  • focus
  • blur
  • focusin
  • focusout
  • keydown
  • keypress
  • keyup


저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 6  (0) 2014.12.16
[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24

이번에는 셀렉터에 대해 알아보도록 하자.

셀렉터는 해당 요소를 선택하기 위한 선택자이다. 정규식처럼 약속된 구문에 의해 해당하는 요소를 선택하여 반환해 준다.


제이쿼리의 셀렉터는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 사용하고 있다.

기본적으로 css 의 셀렉터를 생각하면 된다.


기본 흐름은 다음과 같다.




셀렉터의 검색엔진을 통해 해당 요소를 검색하고 jquery 구문의 action 이 실행된다. 검색된 요소가 없다면 aciton 이 실행되지 않는다. 


가장 많이 사용하는 기본 셀렉터는 다음과 같다.

  • 태그이름
  • # + id 이름
  • . + 클래스이름


셀렉터 예시


 예시

설명

 $("*")

 모든 요소

 $(this)

 객체 자신에 대한 요소

 $("span")

 해당 span 태그에 대한 요소

 $("#deviceID")

 해당 id 를 포함한 요소

 $("p,span")

 p 태그와 span 태그  요소

 $("p.title")

 해당하는 p 태그 중 해당 클래스를 포함한 요소

 $("ul li:first")

 첫번째 ul 태그의 첫번째 li 에 대한 요소

 $("ul li:first-child")

 모든 ui 태그의 첫번째 li 에 대한 요소

 $("[name]")

 속성 name 을 가진 모든 요소

 $("tr:even")

 tr 태그중 짝수번째 요소

 $("tr:odd")

 tr 태그중 홀수번째 요소

 $("tr:eq(5)")

 tr 태그중 5번째 요소

 $(":disabled")

 속성 tag 중 disabled 된 모든 요소



아래의 창에서 간단히 확인이 가능하다.

좌측의 셀렉터를 클릭하면 해당하는 태그들이 선택이 된다.


 테스트(해당문구클릭)

 확인창
  • $("*")
  • $("p")
  • $("p,span")
  • $(".title")
  • $("tr:even")
  • $("tr:odd")
  • $("tr:eq(2)")
  • $("p:last")
  • $(":text")

<span>span태그</span>

<p>p태그</p>

<p class="title">p태그</p>

<table>

<tr><td>0</td></tr>

<tr><td>1</td></tr>

<tr><td>2</td></tr>

<tr><td>3</td></tr>

</table>

  

<p> p태그 마지막 </p>


저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

지난 강습에는 jquery 의 기본 설정 및 로딩 이벤트를 바인딩하는 법에 대해 간단히 다루었다.


이번에는 클릭이벤트를 다는 법~에 대해 간단히 다루어 보도록 하겠다.



jquery 기본 syntax>

$(셀렉터).action()


$(document).ready(function(){});


지난 시간 이 구문도 같은 원리이다. document 가 로드되어 dom 을 사용할수 있게 되었을때 function 안에 구문이 동작하라는 의미이다.


click event syntax>

$(셀렉터).click(실행될 function) 


위와 같은 방식으로 클릭 이벤트를 해당 객체에 바인딩할 수 있다.

단~ 지난번 내용인 로딩 이벤트 안 또는 다른 이벤트 실행 이후에 바인딩해야 한다.

이유는 스크립트는 컴파일이 미리 되어있지 않은 언어이기 때문에 순차적으로 실행한다.


로딩 이벤트에 처리 안했다면 다음과 같은 상황이 된다.



코드로는 다음과 같다.


방법 A.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        $("#clickBtn").click(function(){

               alert("버튼 클릭");

        });

</script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

</html>


방법 B.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

</head>

<body>

        <input type="button" id="clickBtn" value="버튼" />

</body>

<script type="text/javascript">

        $("#clickBtn").click(function(){

               alert("버튼 클릭");

        });

</script>

</html>


방법 A 의 경우에는 script 동작 시점에 버튼을 찾지 못했기 때문에 바인딩할 요소가 없어서 이벤트가 바인딩 되지 않는다.

방법 B 의 경우는 button 객체 생성이후이기 때문에 바인딩이 된다.


이러한 차이가 없이 프로그래밍하기 위해서는 로딩완료 시점에 바인딩을 해주면 된다.


$(function(){

  $("#clickBtn").click(function(){

     alert("버튼 클릭");

});

});


여기서 또 하나~!

버튼을 선택하기 위해서 #clickBtn 을 사용하였는데 이를 셀렉터라고 한다.

우선 이번에는 간단히 이야기하자면

# 을 붙이면 id 를 가르킨다.

즉 clickBtn 이라는 id 를 가진 요소에 이벤트를 달았다고 생각하면 된다.


다음 장에서는 셀렉터에 대해 이야기 하도록 해보자.



저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 1  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21



제이쿼리(Jquery) 란?


제이쿼리(jquery)는 자바스크립트로 된 프레임웍으로 프로그래머의 브라우져별 자바스크립트의 api 차이를 고려할 필요없이 동일한 코드의 작성을 지원하며, 자바스크립트의 코딩을 단순화 하였다.


즉 간단히 제이쿼리는 자바스크립트를 편리하게 사용하게 해주는 라이브러리 정도로 생각하면 된다．




자 그럼 jquery를 사용하기 위해서는 어떻게 해야하는가？

 

１．Jquery 의 CDN 주소로 포함시킨다．


      CDN 은 Contents Delivery Network 의 약자. 간단히 외부서버에서 제공하는 jquery를 include 시킨다고 생각하면 된다.


자바스크립트 라이브러리들의 cdn 주소를 확인하는 사이트 : https://cdnjs.com/



jquery 홈페이지에서 cdn 주소확인 : http://jquery.com/download/

 


 

다음의 구문을 소스에 포함시킨다.


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>


따라서 우리는 위와 같이 jquery를 포함 시킬 것이다.(cdn 으로 jquery 를 제공하는 곳은 많기 때문에 꼭 위와 동일하지 않아도 된다)



 

2. 해당 시스템 또는 로컬 서버에 해당파일은 포함시키고 해당 주소를 작성 화면에 포함 시킨다．


http://jquery.com/download/ 에서 해당 jquery 다운로드 받고 로컬서버등에 위치시킨다.

 

<script src="jquery 파일의 주소"></script>

 

 


자 간단하게 cdn으로 jquery를 실행해 보자．



소스는 다음과 같다．


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery basic</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        jQuery(document).ready(function() {

               alert("hello jquery");

        })

</script>

</head>

<body>

</body>

</html>


hello jquery 라는 alert 창이 떳다면 정상 작동한 것이다.



이것을 자바스크립트로 구현하면 다음과 같다.


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>javascript</title>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

        function init(){

               alert("hello javascript");

        }

</script>

</head>

<body onload="init()">

</body>

</html>



둘 예시는 화면이 로드되는 시점에 alert의 내용을 도시하는 내용이다.


jquery 의 ready 이벤트는 다음과 같이 축약이 가능하다. 


방식 1.

jQuery(document).ready(function() {

        alert("hello jquery");

})；


방식 2. jQuery 를 $ 로 축약( jQuery  = $  동일하게 사용이 가능하다)

＄(document).ready(function() {

        alert("hello jquery");

})；


방식 3. ready 생략

＄(function() {

        alert("hello jquery");

})；


3가지의 결과는 동일하게 나온다.


첫강 끝~

저작자표시 비영리 변경금지

'IT > jquery' 카테고리의 다른 글

[제이쿼리(jQuery)] lesson 5  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 4  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 3  (0) 2014.11.24
[제이쿼리(jQuery)] lesson 2  (0) 2014.11.24
JQuery의 when  (0) 2014.11.21

setTimeout은 특정 시간이후 어떤 기능을 실행 할 때 사용하는 함수이다.

setInterval 과의 차이는 반복을 할 것인가, 한번만 실행할 것인가의 차이이다

두 function 모두 동일하게 호출될 function 과 시간을 입력한다(1000 ms = 1 second)

 

- setTimeout : 주어진 시간이 되면 한번 호출

- setInterval : 인터벌 시간마다 반복 호출

 

 

* setTimeout  

 syntax>

    myTimeout= setTimeout("javascript function",milliseconds);

 ex>

    setTimeout(function(){alert("Hello")}, 3000);


* setInterval 

syntax>

   setInterval(function,milliseconds,lang)

ex>

   setInterval(function(){alert("Hello")}, 3000);

  

이 2가지 function 을 초기화 하기 위해서는 clearTimeout, clearInterval 을 사용하며,

function 실행 후 리턴에 대한 값을 가지고 있어야 한다.

 

* clearTimeout 

 ex>

 var myTimeout = setTimeout(function(){

                             console.log("Hello")

                       }, 3000); 

 function myStopFunction() {

    clearTimeout(myTimeout);

 } 


 * clearInterval 


 ex>

 var myTimeout= setInterval(function(){

                             console.log("Hello")

                       }, 3000); 

 

 function myStopFunction() {

    clearInterval(myTimeout);

 }


 

저작자표시 비영리 변경금지

'IT > javascript' 카테고리의 다른 글

String fommat 2  (0) 2015.08.03
javascript 의 arguments  (0) 2014.12.03
javascript 에서 string.format 사용  (0) 2014.11.24
yuicommpressor (js /css 압축)  (0) 2014.11.24
setTimeout 에 파라미터를 넘기는 법  (0) 2014.11.22

Mapper 와 Reducer (Combiner도 Reducer 를 상속하여 구현한다) 는 job 에 의해

 

내부의 run 메소드가 실행된다.

 

Mapper 의 경우

 public void run(Context context) throws IOException, InterruptedException {

    setup(context);

    try {

      while (context.nextKeyValue()) {

        map(context.getCurrentKey(), context.getCurrentValue(), context);

      }

    } finally {

      cleanup(context);

    }

  }

 

 

위와 같은 로직이 동작하며, mapper 를 상속하여 구현하는 map 이 호출되기 전에 setup 이

완료후에는 cleanup 이 호출되는 것을 확인할 수 있다.

 

setup -> map (해당 datanode 에서 읽은 파일의 라인수 만큼 반복) -> cleanup


즉 이런 식으로 호출된다.

 

즉 initialize 형태의 로직이 필요하다면 setup 을 상속해서

완료이후의 로직이 필요하다면 cleanup을 상속해서 처리 할 수 있다.

저작자표시 비영리 변경금지

'IT > 빅데이터(bigData)' 카테고리의 다른 글

Hive 의 Serde 1  (0) 2014.11.25
MapReduce 데이터 흐름 분석  (0) 2014.11.25
여러 기능의 맵리듀스를 하나의 jar 로 묶을때  (0) 2014.11.22
Hadoop 의 Counter 이야기  (0) 2014.11.22
Reduce 에서 counter 조회  (0) 2014.11.22

 

여러 기능의 맵리듀스를 하나의 jar 로 묶을때 다음과 같이 ProgramDriver 에 해당 class 들을 등록하고

ProgramDriver  에 각 클래스를 등록한 class 를 jar 의 main 클래스로 잡아서 jar 로 압축한다.

 

실행시 해당 jar 에 등록된 alias 로 실행한다.

$ hadoop jar analyserDriver.jar max   < 기타 max 에서 구현된 파라미터 >

 

 public class AnalyserDriver {

 

   public static void main(String argv[]) {

     int exitCode = -1;

     ProgramDriver programDriver = new ProgramDriver();

     try {

          programDriver.addClass("standarddeviation", StandardDeviationDriver.class, 

                "A map/reduce program that calculate the standarddeviation in the input files.");

 programDriver.addClass("mode", ModeDriver.class, 

                "A map/reduce program that calculates the mode in the input files.");

programDriver.addClass("max", Max.class, 

  "A map/reduce program that max the total row in the input files.");

          programDriver.addClass("min", Min.class, 

                "A map/reduce program that min the total row in the input files.");

          programDriver.addClass("median", Median.class,

                "A map/reduce program that median the total row in the input files.");

        exitCode = programDriver.run(argv); 

    } catch (Throwable e) {

          e.printStackTrace();

    }

    System.exit(exitCode);

  }

}

 

 

저작자표시 비영리 변경금지

'IT > 빅데이터(bigData)' 카테고리의 다른 글

MapReduce 데이터 흐름 분석  (0) 2014.11.25
Mapper 클래스 구성 및 사용  (0) 2014.11.22
Hadoop 의 Counter 이야기  (0) 2014.11.22
Reduce 에서 counter 조회  (0) 2014.11.22
hadoop counter 사용  (0) 2014.11.21

+ Recent posts

티스토리툴바