2021. 12. 22. 22:52ㆍWeb
저는 잔나비를 삼행시로 한번 지어봤습니다.
밑의 잔 / 나 / 비 버튼을 하나씩 클릭하면 잔 = ~ / 나 = ~ / 비 = ~ 에 대한 삼행시 문구가 한 줄씩 출력되는 프로그램입니다. html과 Javascript를 이용하였습니다.
'잔' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다.
'나' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다.
'비' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다.
꼭 잔>나>비 순서대로 누르지 않아도 '나' 버튼만 클릭하였을 때 '나를 설레게 만든다' 문구가 먼저 출력될 수 있습니다. 다른 버튼도 마찬가지입니다.
사용환경은 VSCode입니다.
html 코드
<body> 태그 안에서 index.js 파일을 가져오기 위하여 <script src="./index.js"></script> 코드를 사용하였습니다.
삼행시 문구가 출력되기 위해 잔,나,비 글자를 h1 크기로 설정하였으며
잔,나,비 버튼을 클릭하였을 때 index.js 내의 함수들을 호출하여 Text가 바뀔 수 있도록 onclick 메소드를 이용하였습니다.
index.js
index.js 파일 내에서는 잔,나,비 각각의 버튼을 클릭하였을 때 HTML내에서 h1 크기로 지정한 Text들이 바뀔 수 있도록 함수를 구현하였습니다.
잔,나,비 글자 3개가 각각 바뀔 수 있도록 함수는 3개로 구현하였으며 DOM객체에 접근하기 위해
document.getElementsByTagName('h1')을 사용하여 h1 태그값을 이용하였습니다.
그런데, 왜 변수명이 전부 var h1일까요? 만약 changeText2()의 변수명을 var h2로 선언해본다면 어떤 문제가 발생할까요?
- '잔' 버튼을 클릭했을 때는 잔나비 노래는 이라는 문구가 정상적으로 출력되었지만,
'나' 버튼을 클릭했을 때는 '잔'부분이 나를 설레게 만든다 문구로 바뀌었습니다.
바꾼 코드
function changeText2() {
var h2 = document.getElementsByTagName('h1')
h2[0].innerHTML="나를 설레게 만든다"
}
아마도 var h1의 태그값들이 모두 h1으로 동일한데, 앞선 html 페이지에서 잔,나,비를 모두 h1 태그로 설정했기 때문에 h1에 걸리는 변수들을 모두 변수명 h1으로 설정하고 거기서 배열이 정해진것이어서(getElementsByTagName은 배열을 return하므로)
잔=0 나=1 비=2 순서대로 배열 인덱스 번호가 정해지지 않았을까 싶습니다.
일단 제가 코딩을 해보고 느낀 점은 이러합니다.
잘못된 부분이 있다면 지적 환영합니다!!!
읽어주셔서 감사합니다 : )
'Web' 카테고리의 다른 글
| [firebase 설치 오류] firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해결방법 (1) | 2022.01.13 |
|---|---|
| JavaScript의 내부동작원리는? (0) | 2022.01.12 |
| @ 미디어쿼리에 대하여 (0) | 2022.01.07 |
| 웹개발 빠른 마크업을 위한 Emmet 정리 (0) | 2022.01.07 |
| Web 1.0부터 Web 3.0까지 정리해보기 (1) | 2021.12.22 |