1. HTML 에서 JavaScript 사용

* 생활코딩 유튜브 영상을 토대로 정리함

HTML 과 JavaScript(줄여서 "JS) 는 완전히 다른 언어이다.

HTML은 정보를 제공하는 역할을 하고, JS는 제어를 담당하는 역할을 한다.

JS를 작성하는 방식은 크게 3가지가 있다.

1. Inline 방식

태그에 직접 JavaScript(js)를 작성하는 방식이다.

태그에 연관된 js가 분명하게 드러나는게 장점이지만, 정보를 담당하는 HTML과 제어를 담당하는 JS가 섞여있어 가치가 떨어지며 유지보수가 어려운 단점이 있어 HTML과 분리하는 것을 권장하기에 잘 사용되지 않는다.

간단한 코드로 살펴보면,

<!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>Document</title>
</head>
<body>
    <h1 type="button" onclick="alert('SJH');">test</h1>
</body>
</html>

다른 부분은 visual studio code에서 'html:5' 키워드를 통해 자동으로 생성된 코드이며 body 영역만 작성했다.

h1은 문자 크기를 나타내는데 중요하지 않다.

button 타입의 태그를 만들었고 onclick 이라는 속성안에 JS를 작성하였다.

onclick은 onclick이 속해있는 태그. 즉 여기선 button 타입의 태그를 '클릭' 했을 때 onclick 안에있는 코드가 JS로 실행되는 HTML의 속성이다.

onclick:"" 부분은 HTML 문법이고, alert('SJH'); 는 JS의 문법이다.

알람창을 띄우는 alert 이라는 JS가 실행된 모습이다.

2. Internal 방식

HTML 문서 안에서 별도의 영역에 JS를 작성하는 방식이다.

그 별도의 영역은 <script>와 </script> 사이를 말하며 다음과 같이 쓴다.

<script> <!-- <script type="text/javascript"> -->
JS 코드
</script>

주석처리 되어있는 type="text/javascript" 는 html5 부턴 별도로 작성하지 않아도 기본적으로 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>Document</title>
</head>
<body>
    <input type="button" id="so1" value="Click" />
    <script>
        var a = document.getElementById('so1');
        a.addEventListener('click', function(){
            alert('SJH');
        })
    </script>
</body>
</html>

마찬가지로 body 영역을 제외한 나머지는 직접 작성한 것이 아닌 vscode의 html:5 를 통한 기본적인 틀이다.

위 Inline 방식과 비교해보면 HTML 태그내에 JS 코드가 없어지고 id 라는 것을 사용했다.

또한 위에선 h1 으로 단순 텍스트로만 표시했는데 이번엔 input 태그를 사용했다.

input 태그를 사용한 것은 중요하지 않다.

여기서 <script> 태그를 사용하여 JS 코드를 별도로 작성했다.

안에있는 내용은 본인도 100% 이해하진 못하지만 대충,

document.getElementById('so1') 는 id가 so1 이라는 Element(태그)에 접근할 때 쓰는 함수인 것 같다.

위 내용을 a라는 변수에 담았고, addEventListner는 구글링 했을 때 이벤트를 등록하는 것이라고 나와있는데 어쨌든

대충 click 이 발생하면 function(){alert('SJH')}; 를 실행하겠다는 내용인 것 같다.

자 다시 큰 틀을보면, HTML 과 JS 코드를 분리했다.

여기서 <script>와 </script>는 HTML의 문법이며 <script>를 만나면 그 다음부터는 JS로 해석하고 닫히는 태그인 </script>를 만나면 다시 HTML로 읽는다.

위 Inline 방식의 코드와 웹브라우저의 결과는 같다.

이렇게 정보와 제어부분을 분리시켜 놓는게 여러가지 측면에서 바람직한 방식이다.

3. External 방식

이름 그대로 외부로 빼는 방식이다.

<script src="JS코드파일"></script>

위 같은 방식이다.

바로 코드로 확인한다.

<!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>Document</title>
</head>
<body> 
    <form type="button" id="so1">Click</form>
    <script src="test.js"></script>
</body>
</html>

# test.js

var a = document.getElementById('so1');
a.addEventListener('click', function(){
    alert('SJH');
})

script 태그 안에 JS 내용이 없어졌고 src로 해서 별도의 파일을 불러온다.

이번에는 그냥 form 이라는 태그를 사용해봤다.(뭔지 잘 모르지만 그냥 써봄)

test.js 파일에는 두번째 방식에서 사용했던 코드를 그대로 복사한 것이다.

역시나 동일하게 잘 나온다.

하지만 위 코드에서 id가 so1인 HTML 태그의 아랫부분에 script 를 작성했다.

만약 이것보다 윗 부분에 작성되면 어떻게 될까?

<!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>Document</title>
</head>
<body> 
    <script src="test.js"></script>
    <form type="button" id="so1">Click</form>
</body>
</html>

alert 창이 뜨지 않는다.

이것은 JS를 읽으면서 so1 이라는 id를 가진 엘레먼트를 찾아야 하는데 아직 해당하는 부분이 읽히지 못해 정상적으로 동작하지 않는 것이다.

좀 더 설명하자면

var a = document.getElementById('so1');
a.addEventListener('click', function(){
    alert('SJH');
})

so1 이라는 id를 가진 엘레먼트(태그)를 읽기 전이라 무엇인지 알지 못하게 되어 var a 에서 a가 null 혹은 undefined 같은 값이 되버린다.

즉, 아무것도 아닌 객체에서 addEventListener 라는 메소드를 호출하기 있기 때문에 에러가 발생하는 것이다.

JS 코드에 따라 어떤 부분에 놓던 잘 작동되는 것들이 있겠지만 body 태그가 끝나기 전의 영역에 script를 작성하는것이 가장 좋다고 한다.

4. window.onload

일단 바로 코드로 확인해 본다.

<!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>Document</title>
</head>
<body> 
    <script src="test.js"></script>
    <form type="button" id="so1">Click</form>
</body>
</html>

마찬가지로 JS 코드의 script 태그를 HTML 태그 상위에 위치시켰다.

window.onload = function(){
var a = document.getElementById('so1');
a.addEventListener('click', function(){
    alert('SJH');
})
}

window.onload 라는 것을 사용했다.

잘 뜬다.

실행이 되는 이유는 다음과 같다.

"모든 코드가 다 읽히고 여러가지 이미지나 script가 웹페이지가 다 완성이 되었을 때 웹브라우저는 window객체의 onload라고 하는 메소드를 호출하도록 약속되어있다."

따라서 위 처럼 상단에 위치되어 있어도 window.onload 메소드를 통해 마지막에 해당 JS 코드를 실행시켜 동작할 수 있다.

또한 body 영역이 아닌 head 영역 내에도 위치시킬 수 있는데 script 영역을 다 읽고 나서 그 다음의 코드를 읽는 것이기 때문에 렌더링 지연이 발생된다(사용자 입장에서는 하얀색 화면이 계속됨)

따라서 head 영역이 아닌 body의 끝부분에 놓아야 상단에 있는 코드들이 모두 읽히고 나서 script 부분이 읽히기 때문에 사용자 입장에선 웹페이지가 빠르게 로드되는 것과 같은 느낌을 들게 한다.

'Javascript' 카테고리의 다른 글

6. window.open 활용 (0)	2021.09.07
5. window.open (0)	2021.09.06
4. location 객체 (0)	2021.09.05
3. 사용자와 커뮤니케이션[alert, confirm, prompt] (0)	2021.09.04
2. 전역객체 window (0)	2021.09.03

1. Inline 방식

2. Internal 방식

3. External 방식

4. window.onload

'Javascript' 카테고리의 다른 글

티스토리툴바