JavaScriptコードの場所

24748 ワード
JavaScript テキストリンク

1.HTMLタグのイベントリスナー属性で作成


HTMLタグにイベントが発生した場合(マウスクリックやキーボードキーの入力など)、
処理コードを登録するリスナーのプロパティ.この属性にJavaScriptコードを記述できます.
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(this)"를 
onmouseover="over(src)"이렇게 작성해 실행한다면
fuction over(src){
	src = "img/crazy.png";
}
예외가 발생한다. 왜냐하면 src ="img/crazy.png"로 바뀌어도 객체의 src가 바뀐게 아니기 떄문이다.
따라서 this를 통해 주소로 접근하여 변경하여햐 한다.
  • 正常状態
  • マウスアップロード

    • 3.JavaScriptファイルで作成

    자바스크립트 코드를 확장자가 .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";
}
  •  <スクリプト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>

    がんばって


    >コンパイル時にメソッドを使用する場合、メソッド宣言子が下にあり認識できない場合は、下からドラッグして認識して実行します.
    🦎 [深潜学習]4-22this
    フレームなしのHTMLスライド