0) 들어가기에 앞서
- 이 단계를 배우는 사람들은 javascript 를 비롯한 코딩이 입문 단계일 것이다.
- 물론 작성하는 나를 포함한 이야기이다..
- javascript 소스 코드는 '(파일명).js' 의 형식으로 따로 모아서 작성하는 편이다.
- js 파일이 아닌 html 에서 작성하는 방식을 inline event 라고 한다.
- 1-1)의 예시가 inline event 에 해당되며 <body> 에서 javascript를 작성할 수 있게 된다.
- 나머지 1-2 ~ 1-5) 또한 html 에서 작성하는 경우도 유사하다.
- 1-2) ~ 1-5) 는
- <head> 의 안에서 작성
- <body> 의 내부
- <body> 다음 부분에서 작성하기도 한다.
- javascript가 숙달되면 대부분 js 파일에서 작성된다는 것을 숙지하자
- 지금은 간략한 기능을 html 에서 구현하기 위함이라고 생각하자.
1) onmouseover & onmouseout : 마우스 액션 스크립트
마우스를 올리면 red, 벗어나면 white를 적용
(이미지 아래에 중앙 정렬된 글자 어떻게 쓰냐고 velog야...ㅠㅠ)
- onmouseover : 마우스의 커서가 특정 영역에 도달시 적용할 기능
- onmouseout : 마우스의 커서가 특정 영역에서 벗어날시 적용할 기능
1-1) onmouseover = "" 기능 정의 형태
<body>
<h3>on mouse over & out</h3><hr>
<p onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='white'"
>이 영역에 마우스를 올리면(onmouse) 색상 변경</p>
</body>- 해당 코드는 자주 쓰이지는 않는 것 같다.
- html 에서 js 코드를 대체로 쓰지 않기도 하며,
- style.background 는 따로 css에서 모아두는 편이기 때문이다.
1-2) .onmouseover = function 의 형태
현재 예시는 <head> 에서 작성한 경우
<script>
function a(){
p=document.getElementById("p"); // p의 위치는 p임을 선언
p.onmouseover = b; //p 에 마우스가 올라가면 function b 실행
p.onmouseout = c; //p 에 마우스가 떠가면 function c 실행
function b(){p.style.backgroundColor="red";} // b 실행시 배경색이 레드로
function c(){p.style.backgroundColor="white";} // c 실행시 배경색이 백색으로
}
</script>- p.onmouseover = b( ); 의 형태가 아님에 주의하자
- p.onmouseover = b( ); 로 작성시 작동이 안된다.
- 현재 html 에서 모든 소스코드를 처리중이므로 작성된 기능들이 잘 작동되도록 onload 를 추가함
1-3) addEventListener 를 활용한 지정
<script>
let p;
function a(){
p=document.getElementById("p");
p.addEventListener("mouseover", b); //p.onmouseover = b; 와 동일
p.addEventListener("mouseout", c); //p.onmouseout = c; 와 동일
function b(){p.style.backgroundColor="red";}
function c(){p.style.backgroundColor="white";}
}
</script>- .addEventListener(“mouseover”, b)
- .addEventListener('이벤트타입', 실행할 함수)
- .addEventListener() : (괄호안의 내용)을 듣고(listener) 처리(add)하겠다
- 이벤트가 발생했을때 그 처리를 담당하는 함수로 이벤트 핸들러라고도 함
- 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행
- mouseover : 이벤트타입, ‘마우스를 올리면’ 을 의미
- b : 실행할 함수명
- .addEventListener는 소스코드가 많아질 경우 사용하는 것이 권장
1-4) 참조변수 this
<script>
let p;
function a(){
p=document.getElementById("p");
p.onmouseover=function(){this.style.backgroundColor="red"};
p.onmouseout=function(){this.style.backgroundColor="white"};
}
</script>- 참조변수 this : 자기자신을 포함한 가장 가까운 객체를 호출(현재 a 를 의미)
- 앞서 function b,c 를 선언하지 않고 비교적 간략히 구성됨
1-5) EventListener + 참조변수 this
<script>
let p;
function a(){
p=document.getElementById("p");
p.addEventListener("mouseover", function(){this.style.backgroundColor="red";});
p.addEventListener("mouseout", function(){this.style.backgroundColor="white";});
}
</script>- .addEventListener('이벤트타입', 실행할 함수)
- 이벤트 타입 : mouseover 가 적용
- 실행할 함수 : 참조변수 this를 활용
코멘트
- getElementById 의 경우 사용하다보니 익숙해져서 바로 작성이 된다.
- addEventListener 의 경우 잘 안쓰니 여전히 조금 어색하다.
- p.style.backgroundColor="white" 를 통해 . 의 . 의 형태로 한줄로 쓰는 것이 가능하다는 것
- 보통 let p = document.getElementById("p"); 한줄과
- p.style.backgroundColor="white" 한줄로 구성되는데
- p = document.getElementById("p").style.backgroundColor="white" 이 가능하다는 의미다.
- 마우스 액션 스크립트의 경우 p.onmouseover = b; 의 구조로 b( )가 아님에 다시 한번 유념하자.
