개발 프로세스/Front-end
-
[JavaScript] 폼과 이벤트 활용 : 라디오버튼과 체크박스개발 프로세스/Front-end 2021. 6. 17. 15:10
라디오버튼 객체 name : 태그의 name 프로퍼티가 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성 값으로 radio 객체를 찾아야 한다. (ex) document.getElementsByName("city") 해당 메소드를 이용하면 name 속성 값이 일치하는 HTML 태그를 모두 찾아 컬렉션을 만들어 리턴한다. checked : 선택 상태인 라디오 버튼을 알아낼 수 있다. function findChecked() { var found = null; var kcity = document.getElementsByName("city"); for(var i=0; i
-
[JavaScript] 폼과 이벤트 활용 : onfocus와 onblur개발 프로세스/Front-end 2021. 6. 17. 15:03
포커스 (focus) 키 입력에 대한 독점권. 여러 개의 텍스트 창이나 라디오버튼, 체크 박스 등이 있을 떄, 마우스로 선택하면 그 폼 요소로 포커스가 옮겨가며 포커스를 가지고 있던 것은 포커스를 잃게 된다. onfocus, onblur HTML 요소가 포커스를 받게 될 때 onfocus 리스너가 호출되고, 포커스를 잃는 요소에는 onblur 리스너가 호출된다. function checkFilled(obj) { if(obj.value == "") { alert("enter name!"); obj.focus(); // obj에 다시 포커스 } } onfocus와 onblur 이름을 입력하지 않고 다른 창으로 이동할 수 없습니다. 이름 학번 http://webprogramming.co.kr/ 명품 웹 프로그..
-
[JavaScript] 문서와 이미지 로딩, onload개발 프로세스/Front-end 2021. 6. 17. 14:35
onload HTML 문서나 이미지의 로딩이 완료되는 시점에 호출되는 이벤트 리스너이다. 문서의 로딩 완료와 onload 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다. 주로 태그에 onload 리스너를 만든다. 이미지 로딩 완료와 onload 이미지를 출력하는 과정은 이미지 파일로부터 로딩하는 과정과 로딩된 이미지가 출력되는 두 과정으로 나뉜다. 이미지 로딩이 완료된 후에야 이미지를 사용할 수 있으므로 이미지 로딩을 지시하기 전에 onload 리스너를 먼저 등록한다. src 이미지 주소 width 이미지가 출력될 폭 height 이미지가 출력될 높이 complete 이미지 로딩이 완료되었는지 여부. true/false /* Script */ function chang..
-
[JavaScript] 마우스 핸들링개발 프로세스/Front-end 2021. 6. 17. 14:00
마우스 이벤트 객체의 프로퍼티 프로퍼티 x, y 타겟 객체의 부모 객체(대부분 body=브라우저) 내에서의 마우스 좌표 clientX, clientY 브라우저 윈도우의 문서출력 영역 내에서의 마우스 좌표 (브라우저) screenX, screenY 스크린을 기준으로 한 마우스 좌표 (컴퓨터 화면) offsetX, offsetY 타겟 객체 내에서의 마우스 좌표 (HTML 태그) button 눌러진 마우스 버튼 0 : 아무 버튼도 눌러지지 않았음 1 : 왼쪽 버튼이 눌러졌음 2 : 오른쪽 버튼이 눌러졌음 3 : 왼쪽, 오른쪽 버튼이 모두 눌러졌음 4 : 중간 버튼이 눌러졌음 wheelDelta 마우스 휠이 구른 방향 양수 : 위쪽으로 굴린 경우 (120) 음수 : 아래쪽으로 굴린 경우 (-120) onclic..
-
[JavaScript] 이벤트 리스너 만들기개발 프로세스/Front-end 2021. 6. 17. 13:26
이벤트 이벤트는 사용자가 마우스나 키보드로 입력하거나 체크 박스를 선택하는 등의 행위를 브라우저가 자바스크립트 코드에게 알려주는 통지이다. 이 외에도 다른 태스크로부터 메시지가 오거나 네트워크 연결이 오는 경우에도 이벤트가 발생한다. 이벤트 리스너 이벤트를 처리하기 위해 만든 자바스크립트 코드. 이벤트 리스너 만들기 HTML 태그 내에 작성 DOM 객체의 이벤트 리스너 프로퍼티에 작성 DOM 객체의 addEventListener() 메소드 이용 HTML 태그 내에 이벤트 리스너 작성 마우스 올리면 orchid 색으로 변경 /* Script */ function calculate() { var exp = document.getElementById("exp"); var result = document.get..
-
[JavaScript] HTML 문서의 동적 구성개발 프로세스/Front-end 2021. 6. 16. 21:26
HTML 문서의 로드가 완료된 document에도 새로운 HTML 태그를 추가할 수 있다. 이를 위해서는 'DOM 객체 동적 생성 → DOM 트리에 삽입'하는 과정을 거친다. DOM 객체를 삭제할 수도 있다. DOM 객체 동적 생성 var newDIV = document.createElement("div");// 태그를 새로 추가 newDIV.innerHTML = "새로 생성된 DIV입니다."; // 태그에 HTML 텍스트 삽입 newDIV.setAttribute("id", "myDiv"); newDIV.style.backgroundColor = "yellow"; ↓↓↓↓ 새로 생성된 DIV입니다. DOM 트리에 삽입 /* DOM 객체를 부모의 마지막 자식으로 삽입 */ 부모.appendCild(DOM객..
-
[JavaScript] 브라우저 제공 내장 객체 : DOM 트리의 최상위 객체, document개발 프로세스/Front-end 2021. 6. 15. 00:12
document 객체 DOM 트리의 최상위 객체 HTML 문서 전체를 대변하는 객체 모든 DOM 객체를 접근하는 경로의 시작점 여러 메소드를 통해 DOM 객체의 검색, 새로운 DOM 객체 생성 등 HTML 문서의 전반적인 제어를 지원한다. document에 등록할 수 있는 주요 이벤트 리스너 onabort, onblur, onchange, onclick, oncontextmenu, ondblclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmouseleave, onmouseenter, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onr..
-
[JavaScript] 브라우저 제공 내장 객체 : DOM 객체 다루기개발 프로세스/Front-end 2021. 6. 14. 23:50
DOM 객체 찾기, document.getElementById() 안녕하세요 안녕하세요 /* id 속성 값이 firstP인 DOM 객체를 찾아 글자 색을 red로 변경 */ var p = codument.getElementByID("firstP"); p.style.color = "red" ; DOM 객체의 CSS3 스타일 동적 변경 var span = document.getElementById("mySpan"); span.style.color = "green"; span.style.fontSize = "30px"; span.style.display = "block"; span.style.width = "6em"; span.style.border = "3px dotted magenta"; span.styl..