191_자바스크립트에서 사운드 재생 조절하기 [적용] 사운드 재생 시간을 조절하고 싶을 때 [문법] 속성 의미 타입 currentTime 재생 헤드 값(second), 읽기/쓰기 기능 숫자 duration 사운드의 길이(second), 읽기 기능 숫자 [내용] audio 요소의 currenTime 속성을 사용해 현재 재생 위치(초 단위) 확이나 설정이 가능하며, 스크립트로 스킵 기능을 사용할 때도 유용하다. 사운드의 길이(Duration) 보다 작은 값을 설정하지 않도록 주의하자. JavaScript main.js const audio = document.querySelector('#myAudio'); audio.currnetTime = 1.0; duration 속성은 사운드의 길이를 확인할 수 있다. ..

190_자바스크립트에서 스크립트로 사운드 제어하기 [적용] 스크립트로 사운드 재생 상태를 관리하고 싶을 때 [문법] 메소드 의미 반환 play() 재생 Promise pause() 일시정지 없음 [내용] audio 요소의 play()와 pause()를 사용해 사운드를 재생하거나 정지할 수 있다. HTML index.html 재생 정지 JavaScript (부분) main.js const audio = document.querySelector('#myAudio'); 재생은 play()를 사용한다. audio.play(); 일시정지는 pause()를 사용한다. 사운드 재생 바가 해당 위치에서 멈춘다. audio.Pause(); 실행결과 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스..

189_자바스크립트 사운드 사용하기 [적용] 시운드를 HTML 태그로 조절하고 싶을 때 사운드를 반복 재생하고 싶을 때 사운드 컨트롤 UI를 표시하고 싶을 때 [문법] 속성 의미 타입 src 리소스 지점 문자열 controls 컨트롤 바 표시 없음 loop 루프 지정 없음 preload 미리 불러오기 문자열 [내용] audio 태그는 사운드 파일 재생 멀티미디어 관련 태그이다. HTML 내 audio 요소를 배치하고 src 속성에 사운드 파일을 지정한다. HTML index.html 재생이나 일시정지 등의 버튼을 사용할 수 있으며, controls를 사용하지 않으면 화면에는 버튼이 표시되지 않는다. 컨트롤 바는 브라우저에 따라 독자적인 디자인을 가진다. HTML index.html audio 요소의 사운..

188_자바스크립트에서 스크립트로 이미지 요소 추가하기 [적용] 동적으로 이미지를 배치하고 싶을 때 대량의 이미지를 효율적으로 배치하고 싶을 때 [문법] 메소드 의미 반환 new image() img 요소 인스턴스 생성 img 요소 [내용] img 요소의 인스턴스는 Image 객체를 사용해 생성하며, new Image() 대신 document.createElement('img')를 사용할 수도 있다. 작성한 요소는 DOM 트리에 추가가 필요하며, body 요소 내 표시하고자 할 때는 document.body.appendCHild()를 사용한다. HTML index.html JavaScript main.js // 삽입하고 싶은 요소를 참조 const container = document.querySelec..

187_자바스크립트에서 Base64 형식 이미지 표시하기 [적용] 프로그램으로 생성한 이미지 데이터를 표시하고 싶을 때 [내용] JPEG와 PNG 파일은 바이너리(Binary) 파일이므로 텍스트 에디터로 열 수 없지만, Base64를 사용하면 이미지를 문자열 상태로 관리할 수 있다. 자바스크립트는 Base64 문자열을 사용해 src 속성에 해당 문자열을 대입하여 이미지를 표시할 수 있다. Base64의 시작 문자열은 'data:image/jpeg;base64' 또는 'data:image/png;base64' 이다. HTML index.html JavaScript main.js const img = document.querySelector('#myImage'); img.src = 'data:image/jp..

186_자바스크립트에서 이미지 로딩 지연시키기 [적용] 이미지 로딩 중인 상태를 표시하고 싶을 때 이미지 로ㅛ딩 후 이미지 데이터에 엑세스하고 싶을 때 [내용] 웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성값을 비운다. src가 아닌 data-src를 사용하는 이유는 src속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문이다. 로딩하고 싶은 시점에 Map에 보관한 값을 src 속성에 넣어 작업을 처리한다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 예시를 확인해 보자. HTML index.html 그림 로딩하기 JavaScript main.js // 데이터 보관을 위한 M..

185_자바스크립트에서 이미지 로딩 후 작업하기 [적용] 이미지 로딩을 지연시키고 싶을 때 [문법] 구문 의미 onload 로딩 완료 시점의 처리 작업 지정 [내용] onload 이벤트를 사용해 이미지 로딩 완료 시점의 처리 작업을 지정할 수 있다.예를 들어, 로딩 중인 상황에서는 '로딩 중'을 표시하고 완료되면 완료 표시로 변경하는 작업이 가능하다.기능 구현을 위해 HTML의 src 속성 초기값은 설정하지 않고 공백으로 둔다. HTML index.html JavaScript main.js const img = document.querySelector('#myImage'); img.onload = () => { // 이미지 로딩 완료 후 처리 작업 img.classList.remove('loading')..

184_자바스크립트에서 스크립트로 이미지 로딩하기 [적용] 이미지를 로딩하여 사용하고 싶을 때 [문법] 속성 의미 타입 src 리소스 지정 문자열 [내용] 스크립트의 이미지 표시는 HTML 내 img 요소를 배치하고 src 속성에 문자열을 대입한다. document.querySelector()로 요소를 참조하기 위해서는 해당 요소에 id 속성을 할당한다. HTML 내 src 속성은 공백으로 처리할 수 있다. img 요소는 기본적으로 페이지를 읽어 오는 시점에 자동으로 로딩되지만, 스크립트를 사용해 임의의 시점에 이미지를 표시할 수 있다. HTML의 src 속성을 공백으로 설정해 두고 필요할 때 설정하여 사용하는 방법이다. HTML index.html JavaScript main.js const imgA ..

183_자바스크립트 requestAnimationFrame 사용하기 (HTML) [적용] 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때 [내용] requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌다. HTML요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절한다. 앞서 사용한 tick 함수를 다시 사용하여 확인해 보자. https://stonefree.tistory.com/369 [JavaScript] 자바스크립트 requestAnimationFrame 사용하기 182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때..

182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때 [문법] 메소드 의미 반환 requestAnimationsFrame(함수) 시간 경과에 따른실행 함수 등록 숫자 [내용] requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명령으로, 이 메소드를 사용하면 시간 경과에 따른 지속적인 변화를 줄 수 있다. 일반적인 디스플레이는 초당 60프레임이 표시되며, 이는 한 프레임단 약 16밀리초의 시간이다. 만약 setTimeout()과 setInterval()을 사용해 16밀리초 이하의 시간을 설정한다면, 화면에는 표시되지 않으므로 불필요한 처리가 발..