intro.
자바스크립트를 이용하여 문서에 이름을 표시하는 방법은 여러가지가 있다. 우리가 아는 가장 단순한 방식은 이런 것이다.
<body>
<script>
let name = prompt("이름을 입력하세요!","");
document.write(`${name}님 환영합니다!`);
</script>
</body>자바스크립트의 document.write()를 사용하는 것이다. document.wrtie()메소드를 사용하면 할당받은 변수나 문자열, 숫자 등을 브라우저에 표시할 수 있다. 하지만 여기서 생기는 의문점. html 문서가 이미 존재하는데 입력받은 사용자에 따라 문서에 표시되는 내용을 다르게 바꾸고 싶다면 어떨까? 예를 들면 이런 상황이다.
<body>
<div class="test">
<h3>환영합니다 guest님</h3>
</div>
</body>이 코드를 입력하면 브라우저에 위와 같이 나타난다. 해당 화면을 매번 다른 사용자가 열람하고, 열람할 때마다 사용자의 다른 이름을 입력받아 "환영합니다 000님"이라고 표시할 수 있는 방법에 대해 알아보려고 한다.
* 문제상황: javascript prompt()를 이용해서 이름을 입력받고 html 문서에 있는 <h3> 태그 안의 '알 수 없는 사용자'를 실제 문서를 열람하는 사람의 이름으로 바꾸고 싶음.
이 문제를 해결하기 위해 우리가 알아야 할 것은 세가지이다.
01. $(document).ready(function(){ ...... });
(제이쿼리 CDN 사용방법에 대해서는 여기서 따로 설명하지 않겠다.) ready()메서드는 '사용자가 사이트를 방문할 때' 요청한 HTML 문서 객체의 로딩이 끝나면 이벤트를 발생시킨다. 쉽게 말하자면 HTML 문서를 불러들인 다음 이 함수를 실행시키겠다는 의미이다.
- 표현방법
$(document).ready(function(){ .... });
$(document).on("ready", function() {.......});
{}안에는 자바스크립트 코드를 입력하면 된다.
02. document.getElementById("id");
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. (출처: https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById)
* 이 메서드를 사용할 때 주의할 점.
- 보통 제이쿼리를 사용시 선택자를 입력할 때 클래스의 경우 $(".className")으로, 아이디의 경우 $("#idName")으로 선택하나 getElementById는 문서에서 유일한 id를 찾는 메서드이므로, #를 적어줄 필요가 없다.
- 만약 클래스와 아이디를 모두 구분없이 선택하고 싶다면 Document.querySelector()를 사용하면 된다.
<body>
<div class="test">
<h3>환영합니다 <span id="name">guest</span>님</h3>
</div>
<script>
$(document).ready(function(){
let name = prompt("이름을 입력하세요.");
//'사용자1'이라고 입력
//문자열로 이름을 입력받음
if(name){
//if(true) 이름을 입력받은 경우 실행되는 코드
const showName = document.getElementById("name");
//id = "name"인 객체, 곧 <span>의 객체를 반환받는다.
console.log(showName);
//<span id="name">guest</span>가 반환된다.
}
})
</script>
</body>
03. innerText()
위 코드에서 console.log(showName);을 입력하니 <span id ="name">guest</span>이라고 반환되었다. 입력받은 이름을 name이라는 변수에 할당하기만 했지, 할당된 이름을 <span>태그의 내용으로 바꾸지 않았기 때문이다. 'guest'라는 문자열을 입력받은 '사용자1'로 바꾸기 위해서는 innerText method를 사용해주면 된다.
const showName = document.getElementById("name");
//showName => <span id="name">guest</span>
showName.innerText = `${name}`;
//showName의 내용을 입력받은 name 변수 '사용자1'로 바꾼다.
결과
<body>
<div class="test">
<h3>환영합니다 <span id="name">guest</span>님</h3>
</div>
<script>
$('.test').hide();
$(document).ready(function(){
let name = prompt("이름을 입력하세요.");
if(name){
const showName = document.getElementById("name");
console.log(showName);
showName.innerText = `${name}`;
}
$('.test').show();
})
</script>
</body>
'Javascript' 카테고리의 다른 글
| Javascript로 HTML 조작하기: onclick, function (0) | 2023.02.02 |
|---|---|
| Javascript로 HTML 조작하기: selector(id, class, tag...) (2) | 2023.02.01 |
| js/gsap plugin 배경색 바꾸기 (0) | 2022.11.29 |
| images marquee banner 만들기 (0) | 2022.11.25 |
| var, let, const , scope(스코프), hoisting(호이스팅) (0) | 2022.10.25 |