코드조각모음

제이쿼리를 쓰다보면 찾은 객체에서 여러 객체를 찾아가게 되는 경우가 종종 생깁니다.

이 때 좋은 api 중 하나가 closest()입니다.

closest(selector)

예제는 

li객체의 텍스트를 클릭하면 백그라운드가 파란색으로 바뀐다.

위와 같이 부모 객체를 찾는 유용한 API다.

jquery의 parents() API와 가장 큰 차이점은

하나의 객체만 반환한다는 점이다.

parents() API의 경우 여러개의 반환값으로 인해 loop를 이용하거나 특정 index를 선택해서 사용했지만 closest는 단 하나의 객체만 반환 하므로 그럴필요가 없다.

parent() API의 경우는 직계부모의 객체만 해당 되므로 다음과 같은 예제에는 사용할 수 없다.

위의 사항을 유의 하면서 parent(), parents(), closest()를 유용하게 사용해 보자.

자바스크립트에서 문자열을 자를때 쓰는 몇가지 방법

1. substring

- "자를문자열".substring(시작인덱스, 종료인덱스)

예제

2. substr

- "자를문자열".substr(시작인덱스, 길이)

예제

3. split

- "자를-문자열".split(문자)

예제

위의 3가지 방법을 이용하여 문자열을 잘라낼수 있다.

indexOf함수까지 사용하면 다음과 같이 사용할 수 있다.

예제

자바스크립트 없이....

버튼 클릭 없이....

코딩 없이 서밋이 가능하다.

일단 테스트를 해보자

첫번째 폼의 INPUT에 포커스를 맞추고 엔터를 누르면 블로그 페이지로 이동한다.

두번째 폼에서는 아무일도 일어나지 않는다.

왜 이런일이 일어나는지 찾아보니 스택오버플로우 에 다음과 같은 글이 있었다.

This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.

The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.

I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.

대충 번역해보면 사람들이 편하게 쓰라고 만들어 진것 같다는 글이 가장 공감을 많이 받고 있다.

위 사실을 알았으니 다음에 엔터이벤트 없이 서밋을 해보도록 하자. 

랜덤함수를 이용하여 자바스크립트로 guid 생성하기.

DOM에 버튼을 하나 만들고

<button id="makeGUID">GUID만들기</button>
<input id="Result" readonly />

자바스크립트 코드를 추가 합니다.

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

document.getElementById("makeGUID").addEventListener('click', function() {
  document.getElementById('Result').value = guid();
})

* syntaxhilight : higlight.js

위와 같이 코드를 만들고 버튼을 클릭하면

"a101b4ce-04f4-3e30-fcca-7d06145e2276"

이런 난수들이 발생합니다.

다음은 실행 예제