1. HTML 태그의 이벤트 리스너 속성에 작성
HTML태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트가 발생할 때
처리하는 코드를 등록하는 리스너 속성이 있다. 이 속성에 자바스크립트 코드를 작성할 수 있다.ex) 이벤트 리스너 속성 중 onmouseover과 onmouseout을 사용한 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이벤트 리스너 속성에 자바스크립트 코드 작성</title> </head> <body> <h3>마우스를 올려보세요</h3> <hr> <img src="img/normal.png" onmouseover="this.src='img/crazy.png'" onmouseout="this.src='img/normal.png'"> </body> </html> *코드 미리 보기 - img같은 태그들은 하나의 객체로 볼 수 있다. 그 안의 src는 필드로 볼 수 있다. 따라서 img는 객체의 src라는 필드를 사용하는 것은 앞에 this가 생략 되어있는 것이다.
- 일반 상태
- 마우스를 이미지에 올린 상태
2. <script> </script> 내에 작성
<head></head>, <body></body>, body태그 밖 등 어디든 들어갈 수 있다. 웹 페이지 내에서 여러 번 작성할 수 있다. <script src="경로"></script> : 외부 js파일을 불러올 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h, initial-scale=1.0">
<title>script 태그에 자바스크립트 코드 작성</title>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<img src="img/normal.png" onmouseover="over(this)" onmouseout="out(this)">
</body>
<script>
function over(arg){
arg.src = "img/crazy.png";
}
function out(arg){
arg.src ="img/normal.png"
}
</script>
</html>
*코드 미리 보기 - 만약를
onmouseover="over(src)"이렇게 작성해 실행한다면
fuction over(src){
src = "img/crazy.png";
}
예외가 발생한다. 왜냐하면 src ="img/crazy.png"로 바뀌어도 객체의 src가 바뀐게 아니기 떄문이다.
따라서 this를 통해 주소로 접근하여 변경하여햐 한다.- 일반 상태
- 마우스를 이미지에 올린 상태
3. 자바스크립트 파일에 작성
자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장하고 <script src=".js경로></script>를 통해 불러서 사용한다.
- 확장자가 .js인 별도의 파일로 저장
/* author : jsj content: mouse event */ function over(arg){ arg.src = "img/crazy.png"; } function out(arg){ arg.src = "img/normal.png"; }
- <script src=".js경로>를 통해 불러서 사용한다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>외부 파일에 자바스크립트 코드 작성</title> </head> <body> <h3>마우스를 올려보세요</h3> <hr> <img src="img/crazy.png" onmouseover="over(this)" onmouseout="out(this)"> </body> <script src="script.js"></script> </html> <script></script>는 <head></head>, <body></body>, body태그 밖 등 어디든 들어갈 수 있다. 단, body태그 밖이 근소화게 더 빠르다고 한다.
4. URL부분에 작성
<a>태그의 href속성 등에도 자바스크립트 코드를 작성할 수 있다. 하지만 href속성에서 자바스크립트 코드를 쓸 때에는 javascript라는 키워드를 작성해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL에 자바스크립트 코드 작성</title>
</head>
<body>
<h3>링크의 href에 자바스크립트 코드작성</h3>
<hr>
//자바스크립트 키워드
<a href="javascript:alert('안녕')">클릭해보세요~~</a>
</body>
</html>호이스팅
>컴파일할 때 메소드를 사용할때 메소드 선언부가 아래에 있어서 인식 못하면 아래부터 끌고와서 인식하고 실행
개발자 지망생