Selection과 Range

 안녕하세요? 김성중입니다.

 Google Web Speech API를 테스트하던 중, STT를 통해 변환된 텍스트를 획득하기 위한 방법으로 Selection을 사용하였습니다. Selection(MSDN은 TextRange)은 웹 페이지에서 텍스트 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자 위에서 더블 클릭을 하는 이벤트를 자바스크립트 영역에서 획득할 수 있게 해주는 Web API입니다.

 예제 코드를 실행해보고 콘솔에서 선택된 텍스트를 직접 확인해 보세요.

 Selection은 window.getSelection()이나 다른 메소드의 호출로 생성되는 객체입니다. 그리고 이러한 Selection 객체는 사용자가 선택한 'range'로 표현됩니다. 보통 한 개의 range만 갖고 있고, 다음과 같은 코드로 가져올 수 있습니다.

var selObj = window.getSelection();    // Selection 객체
var range = selObj.getRangeAt(0);      // Range 객체

 선택된 값은 Selection 객체의 toString()을 호출해서 가져올 수 있습니다.


 저는 Web Speech API를 통해 사용자가 입력한 음성을 텍스트로 변환(Speech-To-Text, STT)한 다음, 해당 텍스트를 획득하기 위해 Selection 객체를 사용하였습니다.

if (window.getSelection) {
    window.getSelection().removeAllRanges();
    var range = document.createRange();
    range.selectNode(document.getElementById('final_span'));
    window.getSelection().addRange(range);
}

 위 코드는 음성 인식이 종료되었을 때 호출되는 코드입니다. 윈도우에 텍스트가 존재할 경우, 전체 텍스트를 삭제하고, range 객체를 새로 생성하여 Selection에 지정해주는 코드입니다. 이러한 방법으로 웹에서 Selection객체와 Range 객체를 사용하면 사용자를 대신해서 특정 텍스트 영역을 선택, 삭제 할 수 있고, 사용자가 임의로 선택한 영역의 텍스트도 가져올 수 있습니다.

감사합니다.



참조
MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
MSDN, http://msdn.microsoft.com/en-us/library/ie/ms536401(v=vs.85).aspx

백준 알고리즘 1915 가장 큰 정사각형

안녕하세요.

전상수 입니다.

오늘은 가장 큰 정사각형 문제를 풀겠습니다.

입력이 들어왔을 때 1로 만들어 지는 가장큰 정사각형의 넓이를 구하면 되는 문제입니다.

 위와 같은 입력이 들어왔다고 예를 들어보겠습니다. 여기서 가장큰 정사각형의 길이는 2가 되겠죠.

어떻게 알수 있을까요? j,i 기준에서 세방향을 봅니다. 

세방향에서 각각 가지고 있는 정사각형 길이가 같다면 (j,i)에 이전 정사각형 길이 +1을 한 식으로 입력해 줍니다. 

아니라면 세방향 값중 가장 작은 값에 +1을 시켜줍니다.

위의 방식대로 풀어보면 

1 1 1  이라는 입력이 들어오면 DP에 저장 되는 값은 1 1 1 이 됩니다.

1 1 1                                                             1 2 2

1 1 1                                                             1 2 3

점화식을 세워보면 

1일때

DP[j][i] = min(DP[j-1][i], DP[j][i-1], DP[j-1][i-1]) 이 됩니다.

코드는 위와 같습니다.

DP는 설명하기가 너무 어려운것 같네요.. 질문있으시면 댓글 달아주세요!

백준 알고리즘 2133 타일 채우기

안녕하세요.

전상수 입니다.

오늘 풀어볼 문제는 타일 채우기 입니다.

푸는 방식이 생각이 안나면 까다로운 문제인데 풀어보겠습니다.

위의 그림과 같이 n x 3 크기의 벽을 2 x 1, 1 x 2 타일로 채우는 경우의 수를 구하는 문제입니다.

벽에 타일을 놓았다고 할때 만들어질 수 있는 타일의 경우의 수는 9가지 입니다.

◻︎◻︎  ◼︎◻︎  ◼︎◼︎  ◻︎◻︎  ◼︎◼︎  ◼︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎

◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◼︎  ◻︎◻︎  ◼︎◼︎  ◼︎◼︎  ◼︎◻︎

◻︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◼︎◻︎   

여기서 4,6,7,8 의 경우가 이상하다고 생각하실 겁니다.  어떤식으로 저런 타일이 나왔냐면

4의 경우 ◼︎◻︎ 타일인데 왼쪽 한줄 완성된걸 지워버렸습니다. 6번도 마찬가지고, 7,8 번의 경우 4,6번에서 

              ◼︎◻︎

              ◼︎◼︎

파생되는 타일입니다.

1번 타일에서 갈 수 있는 타일은 1,2번이고, 

2번에서 갈 수 있는 타일은 4번,

3번에서 갈 수 있는 타일은 5,6 번 입니다. 

그러면서 3칸이 완성된 부분은 제거해 나갔습니다. 

완성된 코드를 보면 남은 타일의 줄(len)과 타일 패턴(state)으로 dp배열을 만들어서 사용했습니다.

그리고 남은 타일이 없을때 갯수를 증가 시켜주는 식으로 코드를 구현하였습니다.

감사합니다.