Front/jQuery17 응용 예제 - <canvas> 태그 응용 예제 - 태그 (2) 태그 도형이나 이미지 출력 canvas.html - 사각형과 이미지 출력 사각형 그리기 캔버스 지우기 이미지 출력 pose.html 포즈 인식 결과 확인 포즈 인식 결과를 이미지에 좌표로 표시 pose.js /* pose.js */ $(function(){ // [결과확인] 버튼 클릭하면 서버에서 좌표 받아서 // 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지 src 전달 $('#showBtn').on('click', () => { // 서버에서 응답 결과로 좌표 값 받았다고 가정 var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0.22}, {"x":0.42, "y".. 2021. 12. 15. 응용 예제 - 음성녹음 응용 예제 - 음성녹음 (1) 음성 녹음 음성 녹음 ([녹음] / [정지]) 컨트롤 출력 play 파일로 저장 WebRTC 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능 https://webrtc.org voiceRecord.html 녹음 정지 voiceRecord.js $(document).ready(function(){ const record = document.getElementById('record'); const stop = document.getElementById('stop'); const soundClips = document.getElementById('sound-clip.. 2021. 12. 15. jQuery - 효과 jQuery 효과 jQuery로 가능한 시각적 효과 Basic 효과 hide() / show() / toggle() Sliding 효과 slideDown() / slideUp() / slideToggle() Fading 효과 fadeIn() / fadeOut() / fadeToggle() / fadeTo() Animate 효과 animate(속성) 공통 인수 duration : 효과 진행 속도 (slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : sin 곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려짐) liner : 선형 Basic 효과 hide() : 요소 .. 2021. 12. 15. jQuery - DOM 요소의 속성 추가 및 삭제 DOM 요소의 속성 추가 및 삭제 attr('속성명', 값) : 속성 추가 removeAttr('속성명') : 속성 제거 DOMattr.html DOM 요소 속성 추가 연습문제 DOMattrIndex.html DOM 요소의 클래스 속성 CSS 효과 동적 적용 CSS의 클래스 선택자에 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') : CSS 효과 적용 removeClass('클래스명') : 적용된 CSS 효과 제거(해제) toggleClass('클래스명') 사용 addClass()와 removeClass()를 번갈아 가면서 실행하는 결과 DOMaddClass.html 이미지에 마우스를 올려보세요 toggle.. 2021. 12. 15. jQuery - DOM 요소 조작 jQuery DOM 요소 조작 동적으로 쉽고 간단하게 DOM 요소 조작 가능 DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성 DOM 요소 조작 관련 메소드 text() : 글자와 관련된 내용을 반환하거나 설정 html() : HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입 $(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입 $(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입 $(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입 $(선택자).after(A) : 선택자 뒤에 A 삽입 $(선택자).before(A) : 선택자 앞에 A 삽입 $(A).. 2021. 12. 15. jQuery - 이벤트 객체 메소드 이벤트 객체 메소드 preventDefault() : 현재 이벤트의 기본 동작 중지 stopPropagation() : 상위 element로 이벤트가 전파되는 것 중지 stopImmediatelyPropagation() : 현재 이벤트의 다른 리스너 중지 및 상위로 전파되는 것 중지 (1) preventDefault() return false jQuery에서는 preventDefault() + stopPropagation() JavaScript 에서는 preventDefault() HTML 요소의 기본 동작 태그 클릭 시 href 속성에 지정된 url로 이동 document에서 오른쪽 마우스 클릭 시 contextmenu (팝업메뉴) 출력 preventDefault.html 네이버로 이동 이벤트 전파(P.. 2021. 12. 15. jQuery - 이벤트(키보드 이벤트, 입력 양식 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 입력 양식 이벤트 입력 양식 이벤트 종류 submit : submit(전송) 버튼 눌렸을 때 발생 reset : reset(취소) 버튼 눌렀을 때 발생 change : 입력 양식의 내용을 변경할 때 발생 (select 입력 시) focus : 입력 양식에 커서를 놓을 때 발생 blur : 입력 양식이 커서를 잃을 때 발생 입력 양식 관련메소드 value : val() focus : focus() 체크 되었는 지 : is(':checked') 입력란에서 엔터키 쳤을 때 문제 입력란에서 엔터키를 치면 무조건 submit() 호출되면서 서버로 전송 현재 ID 입력란에서 엔터키 치면 submit 이벤트가 발생하면 "아이디를 .. 2021. 12. 14. jQuery - 이벤트(마우스 이벤트, 동적 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 마우스 이벤트 마우스 이벤트 종류 click : 마우스를 클릭했을 때 발생 dbclick : 마우스를 더블 클릭했을 대 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove : 마우스를 움직일 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseover : 마우스가 요소 안에 들어올 때 발생 hover : 마우스를 over 했을 때, out 했을 때 발생 contextmenu : 마우스 오른쪽 버튼을.. 2021. 12. 14. jQuery - 이벤트(윈도우 이벤트) 이벤트 유형 윈도우 이벤트 입력 양식 이벤트 마우스 이벤트 키보드 이벤트 윈도우 이벤트 윈도우 이벤트 종류 ready(document) : 문서 객체 요소(DOM 요소)가 로드 되었을 때 발생 문서 객체 요소가 자바스크립트에서 사용 가능한 상태인지 확인하고 작동이 가능한 안전 상태일 때 발생 resize : 윈도우 창 크기 변경 시 발생 scroll : 윈도우 창 스크롤 이동 시 발생 load : 문서 객체 요소가 모두 로드 되었을 때 발생. ready와 차이점은 리소스, 이미지 또는 음악 등 로드가 완료된 경우 unload : 문서 객체를 닫을 때 발생 $(document).ready() document의 DOM 객체가 로드되고, 브라우저가 DOM 트리를 생성한 직후 외부 리소스, 이미지 등의로드 여부.. 2021. 12. 14. 이전 1 2 다음