프로그래밍 남기기

미디어 재생 API 정리

- 속성

- 함수

 - html body에서 id가 canvas인 canvas태그를 생성한다.

 - canvas태그내에 글씨를 삽입함으로써, canvas를 지원하지 않는 브라우저에 대해서 대응할수 있도록 한다.

 - script에서 getElementById를 사용하여 드로잉 컨텍스트를 생성한다.

 - 아래와 같은 순서로 진행하여 선/ 도형 그리기를 진행한다. 

1. 패스 그리기 시작

 - beginPath();

2. 서브 패스 그리기

2.1 직선을 그리는 메소드 (line)

- moveTo(x, y);

- lineTo(x, y);

2.2 사각형을 그리는 메소드 (rect)

      - rect(x, y, 사각형의 폭, 사각형의 높이 );

2.3 원 또는 원호를 그리는 메소드 (arc)

- arc( x, y, 반지름, 시작각도, 종료각도, 시계/반시계 );

3. 패스 그리기 닫기

 - closePath();

4. 그리기/채우기

 - stroke(); or fill();

 - 기본적으로 사각형을 그리기는 함수가 제공되어 있다.

 - stroke()나 fill()을 호출하기 전에 context에 스타일을 지정한다.

Textarea 태그에는 장문의 글을 넣을 수 있지만, 장문에 따라 생기는 스크롤로 인하여

페이지가 표시될 때, Textarea의 최하단에 focus가 될 수 있도록 하는 기능이 필요함.

함수로 구현하여 활용.

//콤마 추가

public String 함수명(String data){

int result= Integer.parseInt(data);

return new java.text.DecimalFormat("#,###").format( result );

}

//콤마 제거

public String 함수명(String data){

return data.replaceAll("\\,","");

}

간만에 Tomcat을 기동하려니 아래와 같은 에러가 발생하였다.

에러 내용

Could not load the Tomcat server configuration at ~ at localhost-config. 

The configuration may be corrupt or incomplete.

Resource is out of sync with the file system: '~ at localhost-config/server.xml'.

해결 방법

 별도의 수정이 필요없이 Project Explorer에 있는 Servers 프로젝트를 Refresh(F5) 해주면 해결된다.

여러 엘리먼트에 어떠한 작업 ( ex: css 변경 ) or 이벤트( ex: click )를 적용하려면, 

여러 엘리먼트에서 각각 엘리먼트에 대해 적용하여야 하나, jQuery에서는 .each()를 제공하고 있다.

먼저, 기본 문법은 아래와 같다.

function의 매개변수로 index와 Element가 있지만 하나만 생략해도 되고, 둘다 생략 가능하다.

.each( function(){} ) <- 이와 같은 일반적인 .each()의 형태가 되겠으나,

각각 엘리먼트를 제어하기 위해서는 function() 내부에서 $('this') 를 사용하면, 

현재 일치되는 엘리먼트에 대해서 제어할수 있게 된다.

위의 내용은 모든 p태그의 색상을 빨강으로 변경하게 된다.

$('this')를 활용하여 각각의 엘리먼트 중에서도 특정한 엘리먼트에 대해서도 제어를 진행할 수 있으므로,

다양하게 활용될 수 있다.

IE ( chrome 포함 ) 에서는 event.KeyCode를 사용하여 사용자 입력을 자바스크립트로 제어할 수 있다.

하지만 FireFox( 이하 FF )에서는 event.KeyCode가 적용되지 않기 때문에 사용자 입력을 제어할 수 없게 된다.

이러한 상황이 발생하는 이유는 브라우저에 따라 이벤트가 다르게 인식된다.

IE는 window.event 객체가 인식하고, FF는 event 객체가 인식한다.

이러한 이유로, IE와 FF 모두 동작하는 자바스크립트를 작성하려면 이와 같은 경우도 고려를 해야될 것이다.

기본적인 사용법은 아래와 같이 사용 하면 될 것이다.

HTML Element에 대해서 추가적인 정보를 제공하는 것이 Attribute가 되겠다.

그리고 name/value 형식(pairs)으로 구성되어 추가적인 정보를 제공할 수 있게 되어있다.

( ex: name="MOON" )

Attribute에 담겨져 있는 추가적인 정보를 활용하게 위해서는 attr() 을 사용하면 보다 편리하게 

Attribute의 값을 제어 할 수 있게 된다.

먼저 문법을 살펴보자.

위와 같이 기본 문법이 있다.

1. .attr( attributeName )

이 경우는 셀럭터에 의해서 선택된 엘리먼트 안에 attributeName에 대한 value값을 리턴하여 사용하게 되는 경우이다.

위의 결과는 name이라는 attribute의 value값을 리턴 받게 될 것이다.

2. attr( attributeName, value )

이 경우는 셀럭테에 의해서 선택된 엘리먼트에 attributeName/value 형식(pairs)으로 를 설정(set)하는 경우 이다. 

위의 결과는 input 엘리먼트에 id="inputId" 라는 atttirbute를 설정(set)하게 될 것이다.

jQuery.each() or $.each()는 자바스크립트 개체 및 배열을 통해서 Iterating에 대한 generic iterator function 이다.

.each()는 jQuery 객체를 통해 반복하여, 일치하는 Element에 대해 실행되는 함수를 가진 Iterator이다.

(이하 내용은 jQuery.each() or $.each()이지만 jQuery.each()로 통일하여 작성 하였습니다. )

위와 같이 jQuery.each()와 .each()이 차이가 있다는 것을 알 수 있다.

그렇다면 각각의 기본 문법을 살펴보자.

문법을 살펴보게 되면 확연하게 차이가 있음을 보여준다.

jQuery.each()는 입력받은 collection에 대한 callback이 이루어지는 반면, 

.each()는 셀렉터( $(' ') )에 일치하는 엘리먼트에 대해 function이 동작하게 된다.

이제는 성능에 대해서 알아보기 되면, 결론은 jQuery.each() > .each() 이다.

그렇다고 매우 차이가 날 정도로 jQuery.each()가 빠른것이 아니라 약간의 나은 성능을 보여준다는 것이다.