자바스크립트 코드의 위치

진세종·2022년 1월 27일
0

Javascript

목록 보기
4/15
post-thumbnail

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가 생략 되어있는 것이다.
  1. 일반 상태
  2. 마우스를 이미지에 올린 상태
        

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를 통해 주소로 접근하여 변경하여햐 한다.
  1. 일반 상태
  2. 마우스를 이미지에 올린 상태

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>

호이스팅

>컴파일할 때 메소드를 사용할때 메소드 선언부가 아래에 있어서 인식 못하면 아래부터 끌고와서 인식하고 실행

profile
개발자 지망생

0개의 댓글