✅HTML 속 Javascript(실제 코드 작성)
JS 스터디 2일차에서는 Javascript와 html을 연동하는 2가지 방법을 알아보았다. 이번에는 실제 코드를 작성하면서 자세히 알아보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<h1>안녕하세요 !</h1>
</body>
</html>위의 코드를 실행하면 웹브라우저에 다음과 같은 화면이 나온다.
이제 "안녕하세요 !"라는 글씨를 "저는 만두🥟입니다"로 바꿔서 나타나게 해보자.
위의 html 파일과 같은 폴더에 Javascript 파일을 하나 새로 만든다.
그리고 그 파일에 아래와 같은 코드를 작성한다.
let h1 = document.getElementsByTagName("h1");
h1[0].innerHTML = "저는 만두🥟입니다";이때 h1에는 태그명이 h1인 요소가 모두 저장되고 h1은 배열이 되므로 배열의 첫 요소, h1[0]인 "안녕하세요"만 선택한 후에 innerHTML을 "저는 만두🥟입니다"로 바꿔준다.
이후 script 태그의 src 속성을 이용하여 html 파일에 Javascript 파일을 연동해준다. 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<h1>안녕하세요 !</h1>
<script src="example.js"></script>
</body>
</html>이때 자신이 선택할 요소의 하단에 script 태그가 위치해야 한다.
바뀐 코드를 다시 실행해 보면 아래와 같은 화면이 나온다.
여기에 버튼을 추가하고 Javascript 파일의 원래 코드를 함수 안에 넣어 h1 태그의 내용이 바뀐 것을 직관적으로 알 수 있게 해보자.
html 코드를 먼저 수정하자. 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<h1>안녕하세요 !</h1>
<button onclick="changeH1()">클릭해주세요^_^</button>
<script src="example.js"></script>
</body>
</html>html 코드를 다음과 같이 수정하면 버튼이 추가된다.
위의 바뀐 코드를 실행하면 아래와 같은 결과가 나온다.
이어서 Javascript 코드도 수정하자. 코드는 다음과 같다.
function changeH1() {
let h1 = document.getElementsByTagName("h1");
h1[0].innerHTML = "저는 만두🥟입니다";
}원래 javascript 코드를 함수화시킨 함수명이 changeH1이기 때문에 html 파일 button 태그의 onclick 속성에서 changeH1() 함수를 실행하도록 코드를 구현했다.
버튼을 클릭하면, 다음과 같은 화면이 나온다.
'WEB > JS' 카테고리의 다른 글
| [JS] 4-2. 과제 - 콘솔 사용법 (0) | 2021.09.19 |
|---|---|
| [JS] 4-1. 콘솔 사용법 (0) | 2021.09.19 |
| [JS] 3-2. 과제 - HTML + Javascript(2) (0) | 2021.09.19 |
| [JS] 2. HTML + Javascript(1) (2) | 2021.09.14 |
| [JS] 1. JS 알아보기 (0) | 2021.09.14 |
