728x90 반응형 교육/JavaScript9 JavaScript 개발자 수업 66일차 - CSS 조작 JavaScript CSS 조작 JavaScript CSS 조작 [ JS CSS 조작 규칙 ] 1) style 프로퍼티 사용(Collection) 2) 태그.style.CSS속성명 = CSS속성값 - html 방식: - JavaScript 방식: box.style.color = 'red'; - 대부분의 속성명은 그대로 사용한다. - 'background-color' 같은 경우 캐멀 표기법('backgroundColor')으로 수정해서 사용한다. 3) 속성값은 숫자를 제외하고, 대부분 문자열 이다. 4) JavaScript를 통해서 접근한 CSS의 속성 상태는 인라인 스타일 시트로 선언한 값만 접근이 가능하다. (임베디드, 외부 스타일 시트는 접근이 불가능) [ JS에서 CSS 숫자단위 표기법 ] 1) 숫.. 2021. 7. 1. JavaScript 개발자 수업 65일차 - 부모-자식-형제 태그, DOM 제어, DOM 이벤트 1. 부모-자식-형제태그 2. DOM 제어 3. DOM 이벤트 1. 부모-자식-형제태그 [ DOM Tree의 구성요소 ] - 페이지의 소스의 모든 요소들이 구성요소가 된다. - 선언문(), 주석, 태그, PCDATA, 속성 등... [ 자식 노드 접근 프로퍼티 ] 이름 설명 hasChildNodes 현재노드 기준으로, 자식노드가 있는지 없는지 true, false로 반환한다. childNodes 자식 노드 리스트를 확인한다. 유사 배열이며, 모든 타입의 노드를 자식으로 받는다. firstChild 첫번째 자식 노드를 확인한다. lastChild 마지막 자식 노드를 확인한다. [ 자식 노드 접근 예제 ] 나 첫째 자식 둘째 자식 셋째 자식 [ 자식 태그 접근 프로퍼티 ] 이름 설명 children 자식 태.. 2021. 6. 29. JavaScript 개발자 수업 64일차 - Timer, DOM, Content 1. Timer 2. DOM 3. Content 1. Timer [ 정의 ] - window 객체 메소드이다. - 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 해준다. 이름 설명 number setTimeout(함수, 시간(ms)) - 해당 함수 실행 후 지정한 시간이 되는 순간 함수를 실행한다. - 실행횟수: 1회 실행한다. - 초기화 메소드: void clearTimeout(타이머 ID) number setInerval(함수, 시간(ms)) - 해당 함수 실행 후 지정한 시간마다 함수를 실행한다. - 실행횟수: 반복(무한) 실행한다. - 초기화 메소드: void clearInterval(타이머 ID) [ setTimeout 예제 1 - bgColor 변환 ] See the Pen timer 예제1.. 2021. 6. 28. JavaScript 개발자 수업 63일차 - message box, form 1. message box 2. form 1. message box - 메세지 박스, Dialog Box - 속성값 속성명 설명 alert() 메세지 전달 confirm() 메세지 전달, 사용자의 의사를 확인한다.(Yes or No 선택) prompt() 사용자의 정보 입력, 디자인 수정이 불가하다.(지금은 전혀 안쓰인다.) [ alert(), confirm(), prompt() 예제 ] 2021. 6. 27. JavaScript 개발자 수업 62일차(2) - Collection, Window, Screen, Location, History , Links, Images 1. Collection 2. Window 3. Screen 4. Location 5. History 6. Links 7. Images 1. Collection [ 정의 ] - JavaScript Built-in Collection - 브라우저가 HTML 문서를 로딩하는 과정에서 자동으로 만드는 배열 window.document.images // 문서 내의 모든 태그 배열 window.document.links // 문서 내의 모든 태그 배열 window.document.anchors // 문서 내의 모든 태그 배열 window.document.forms // 문서 내의 모든 태그 배열 window.document.forms[index].elements // 해당 폼 태그의 자식 태그 배열 window... 2021. 6. 27. JavaScript 개발자 수업 62일차(1) - event(mouse, key) 1. event 2. mouse event 3. key event 1. event [ 정의 ] - 사용자와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 정의하는 모델이다. [ 적용 방식 ] - 이벤트 적용하는 것을 이벤트 매핑(Event Mapping) 이라고 한다. - 특정 태그 검색 + 이벤트 정의 + 코드(함수) 등록 1) 정적 방식 (BOM 정적 이벤트 모델) - 하려는 작업이 고정 일때 쓰는 방식이다. (변화가 없을 때) - 이벤트가 발생할 태그에 onXXX 속성을 미리 정의한다. - onXXX 속성: 이벤트 핸들러(Event Handler): 사건이 발생하면 일을 처리하는 담당자를 의미한다. 2) 동적 방식 (BOM 동적 이벤트 모델) - 자바스크립트로 객체.. 2021. 6. 26. 이전 1 2 다음 728x90 반응형
