3월 중 fromt 마무리
3월 말 uml
이력서 포트폴리오 문서 작성법
4월 말 서버 프로그래밍 Servlet/JSP -> 웹사잍 구현, DB 연동
--이쯤 팀을 짤 것
5월 중 FrameWork MyBatis/ Spring -> 기획/설계
~종강 파이널 프로젝트(4주) -> 개발
HTML 화면 구조
CSS 화면 스타일
Javascript 화면 동작
🔍 타이머(Timer) 함수
➰ setInterval( callback, millis ) : timerid ➡ 반환값
지정된 millis(밀리초)마다 callback 함수를 반복적으로 호출하고
타이머 객체의 id를 반환(timerid)
➰ setTimeout( callback, millis ) : timerid
지정될 millis(밀리초) 이후에 callback 함수를 한 번 호출
타이머객체의 id를 반환(timerid)
➰ clearInterval( timerid ) : undefined ➡ 반환값 없음
지정된 타이머객체를 즉시 종료
🔍 자바스크립트의 주요 요소 4가지
1. 자바스크립트 코어 문법
기본 문법
데이터타입, 변수, 제어문, 함수, ...
클래스, 내장객체, ...
2. BOM, Brower Object Model, 브라우저 객체 모델
웹 브라우저의 윈도우(창)을 자바스크립트 코드로 관리할 수 있도록 객체로 만들어놓은 구조
-
window 객체 : BOM 객체들의 최상위 객체 👉🏻 있을까? 싶은 것들은 다 들어있음
- window객체의 멤버필드(프로퍼티), 멤버 메소드(함수)로 자바스크립트를 구성하는 각종 요소들과 그에 대한 기능들이 들어있음
- 자바스크립트 코드로 정의한 모든 전역변수, 전역함수, 객체들을 프로퍼티(Property, 속성)로 등록해두고 사용
✔window.을 이용하여 window객체의 속성, 함수에 접근할 수 있음 👉🏻window.을 생략하고 사용할 수 있음ex) window.alert("메세지") ➡ alert("메세지")
-
navigator 객체 : 브라우저의 정보, 운영체제의 정보를 제공하는 객체
-
location 객체 : 인터넷 주소 관련 정보를 제공하는 객체 👉🏻 URL 관련
➡ 어떤 동작을 하는지 알아야 함
-
history 객체 : 사용자의 인터넷 방문기록 관련 객체
-
screen 객체 : 사용자의 모니터 관련 정보 객체
-
document 객체 : 웹문서(웹 페이지) 관련 객체 👉🏻 엄청 많이 사용 / 사용할 것 중 절반 이상 차지
<body>태그에 작성된 내용들을 관리하는 객체
3. DOM, Document Object Model, 문서 객체 모델
document 객체를 이용하여 문서(<body>)태그를 객체화 시킨 것
브라우저 화면에 보이는 태그요소들을 객체로 만들어서 관리
4. Event, 이벤트
사용자의 입력 또는 특정 상황에 따라 실행되도록 코드를 작성하는 것
🔍 DOM, Document Object Model, 문서 객체 모델
HTML문서의 <body>태그의 내용물(태그)들을 객체(Object)로 만들어서 제공하는 기술
- 자바스크립트 코드로 HTML문서의 요소(Element, 태그)들에 접근하고 관리할 수 있음
👉🏻 CSS 변경, HTML 속성 변경 등 - window객체의 내장 객체 중 하나인 document 객체를 이용하여 관리
➰ DOM 관련 용어
-
요소, Element
HTML문서의 태그들을 뜻함- 태그, Tag : <열기></닫기>로 표현되는 문법요소
- 요소, Element : 태그를 브라우저가 해석하여 객체화시키고 화면에 표현한 것
-
문서 객체, Document Object
요소를 자바스크립트 코드로 접근할 수 있도록 객체화 한 것 = DOM 객체 -
DOM 트리, DOM Tree
HTML문서의 모든 DOM 객체를 트리 구조로 표현한 것
계층적 구조로 문서 객체들을 모두 정리해놓은 것 -
노드, Node 👉🏻 결국은 돔 객체
DOM 트리의 구성 요소- 요소노드 : 태그요소를 객체화한 노드
- 텍스트 노드 : 태그요소가 감싸고 있는 텍스트를 객체화한 노드 👉🏻 innerHTML
<h1 id="header1">Hello</h1>
<h1> 👉🏻 요소 노드
"Hello" 👉🏻 텍스트 노드➰ DOM객체를 사용하는 코드(DOM API)를 적용하는 방법
DOM트리에 DOM객체가 추가된 이후에 DOM API가 실행되도록 작성
방법 1. <head>태그 내에서 <script>태그로 window.onload 이벤트 함수를 이용하여 작성
방법 2. </body> 닫는 태그 바로 위에 <script>태그를 작성하고 DOM API를 사용 👉🏻 DOM 트리가 완성된 후
방법 3. 태그에 이벤트처리 함수를 작성하고 그 안에서 DOM API를 사용
➰ DOM 객체 API 함수
- 노드 생성
document.createElement("tagName"): 요소 노드를 만들어서 DOM 객체로 반환document.createTextNode("text"): 텍스트 노드를 만들어서 DOm 객체로 반환
- 노드를 자식으로 추가하기
DOM 객체.appendChild(대상 DOM객체): DOM객체의 자식노드로 대상 DOM객체를 추가
- 요소의 속성값 얻어오기 👉🏻 일종의 getter
요소 -> DOM 객체 / 태그 -> HTML태그 👉🏻 결국은 같은 것이지만 표현하는 방식이 다름DOM객체.표준속성
표준속성 ➡ Global Attribute / id, class, style, title,<a>href,<img>src 등등DOM객체.getAttribute("속성명")
✔ 프로퍼티 방식은 표준속성만 가능
✔ getAttribute() 방식은 표준, 비표준 속성 모두 가능
- 요소의 속성값 지정하기
DOM객체.표준속성 = 속성값DOM객체.setAttribute("속성명", "속성값")
✔ 프로퍼티 방식은 표준속성만 가능
✔ setAttribute() 방식은 표준, 비표준 속성 모두 가능
