학습한 내용

이벤트

이벤트란 웹브라우저나 사용자가 행하는 동작이다
사용자가 웹 문서 영역을 벗어나 행하는 동작은 이벤트가 아니다
태그 안에서 이벤트를 처리할 때는 "on" + "이벤트명" (onclick등)을 사용한다

이벤트의 종류

마우스 이벤트

click: HTML요소를 마우스로 눌렀을 때 이벤트가 발생
dbclick: HTML요소를 마우스로 두 번 눌렀을 때 이벤트가 발생
mousedown: 요소 위에서 마우스로 누르는 동안 이벤트가 발생
mousemove: 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생
mouseover: 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생
mouseout: 마우스 포인터가 요소에서 벗어났을 때 이벤트가 발생
mouseup: 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트가 발생

키보드 이벤트

keypress: 키를 눌렀을 때 이벤트가 발생
keydown: 키를 누르는 동안 이벤트가 발생
keyup: 키에서 손을 뗄 때 이벤트가 발생

폼 이벤트

blur: 폼 요소에 포커스를 잃었을 때 이벤트가 발생
change: 목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생(input, select, textarea 태그에서 사용)
focus: 폼 요소에 포커스가 놓였을 때 이벤트가 발생(label, select, textarea, button 태그에서 사용)
reset: 폼이 다시 시작되었을 때 이벤트가 발생
submit: submit 버튼을 눌렀을 때 이벤트가 발생

문서 로딩 이벤트

abort: 웹 문서가 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생
error: 문서가 정확히 로딩되지 않았을 때 이벤트가 발생
load: 문서 로딩이 끝나면 이벤트가 발생
resize: 문서 화면 크기가 바뀌었을 때 이벤트가 발생
scroll: 문서 화면이 스크롤 되었을 때 이벤트가 발생
unload: 문서를 벗어날 때 이벤트가 발생

실습

위와 같은 코드를 작성하고, 사진을 첨부한다여기서 상세 설명 보기 버튼을 누르면 설명이 보이도록 설정하려고 한다
먼저 자바스크립트 파일을 만들고, 상세 설명이 열리는 스크립트를 작성한다
상세 설명이 닫히는 스크립트도 같이 작성한다
상세 설명 보기 버튼에 onclick속성을 작성하고, 외부 JS파일을 연결한다 ( /body태그 바로 위 )
그리고 상세 설명 보기 버튼을 누르면 설명이 보이게 된다
상세 설명 닫기 버튼에도 닫히는 속성을 작성하면
설명을 닫을 수 있게 된다

위와 같은 코드를 작성하고, 사진을 첨부한다
여기서 사진을 클릭했을 때 팝업 창이 뜨도록 하려고 한다
#cover 아이디를 변수로 지정하고, 함수를 작성한다그리고, 작성한 외부 JS파일을 연결한다
이미지를 클릭했을 때 모습
onmouseover, onmouseout함수를 이용해 이미지 위에 마우스를 올리면 테두리가 생기고,
이미지 밖으로 마우스를 옮기면 테두리가 사라지도록 작성해본다

객체

객체란 자료를 저장하고 처리하는 기본 단위이다
자바스크립트 프로그램에서 인식할 수 있는 모든 대상
자바스크립트에서는 var로 객체를 저장한다

내장 객체

미리 정의되어 있는 객체

문서 객체 모델(MOD): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
브라우저 객체 모델: 웹 브라우저 정보를 객체로 정리

사용자 정의 객체

필요할 때마다 사용자가 직접 만드는 객체

프로토타입과 인스턴스

프로토타입: 객체의 속성과 메서드를 모아놓은 틀
인스턴스: 프로토타입으로 찍어낸 객체. 프로토타입의 속성과 함수를 똑같이 사용

실습

간단한 실습은 웹 브라우저에서 console창으로 실습해본다

Date( )는 현재 날짜와 시간값을 가지고 있는 데이터 객체이다
이 객체를 인스턴스로 만들려면 new라는 키워드를 사용한다
이를 var을 이용해 now라는 이름의 인스턴스로 만들어준다

Math는 숫자 정보를 담고 있는 객체이다
ramdom을 사용하면 0 ~ 1 사이의 소수점 숫자가 나온다
뒤에 *10을 붙여주면, 0 ~ 9 사이의 값이 나오게 된다
여기에 +1을 붙여주면, 1 ~ 10 사이의 값이 나오게 된다
소수점 이하를 빼고 정수만 보이게 하려면 floor 키워드를 사용한다

어려운 내용

객체에 대략적인 개념은 잡혀갔지만, 아직 그 내용들을 상세히 정리하기에는 많이 부족함을 느낀다

해결방법

학습소감

오늘도 이론에 대한 부분이 많은 강의였다
특히 객체 부분은 이론 부분에서 오늘 배운 부분 외에도 많은 내용들이 연결되어 있어서
새삼 정말 공부할 양이 많다고 다시금 느끼게 된다