2023. 4. 17. 16:13ㆍ카테고리 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
var heading = document.querySelector('#heading');
heading.onclick = function () {
heading.style.color = 'red';
};
</body>
</html>
이러한 코드가 있다. 위 코드를 아래의 코드로 나눌 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script src="js/change.js">
</script>
</body>
</html>.html
var heading = document.querySelector('#heading');
heading.onclick = function () {
heading.style.color = 'red';
};change.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>
<script>
var name = prompt("이름을 입력하세요", "홍길동");
//console.log(name)
document.write(name)
</script>
</body>
</html>이러한 코드가 있다. 우리는 script코드만 확인하겠다.
우선
여기서 name를 prompt를 대입한다. 두개의 파라미터를 받는데, 첫번째는 프롬프트창에 나올 문구이며, 두번째 파라미터는 프롬프트창에 넣을 값을 미리 넣어준 값이다. 위 값을 넣으면 name에는 두번째 파라미터 값이 들어간다.
취소를 누르면 두번째 값에는 null이 들어간다.
그리고 consle, document로 확인해보면 두번째 파라미터 값이 잘 나오는 것을 확인 할 수 있다.
<!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>
document.open();
document.write("<h1>Out with the old, in with the new!</h1>")
document.close();
</script>
</body>
</html>
아래와 같은 결과가 나오게 된다.
-코드 설명
-요약 문서를 열고 거기에 <h1>~을 적고 문서를 닫아준다.
질문: documet.close()를 작성 안 해도 잘 돌아가는데 왜 작성해야하나요?
document.close() 함수는 document.open() 함수로 열린 문서를 닫는 역할을 합니다. document.write() 함수를 사용하여 HTML 내용을 추가하면, 문서가 열려있는 동안 새로운 HTML을 작성할 수 있습니다. 하지만 document.write() 함수가 문서를 닫지 않기 때문에, document.close() 함수를 호출하여 문서를 닫아야 합니다.
따라서, document.write() 함수를 사용하여 동적으로 HTML을 생성하는 경우, document.close() 함수를 호출하지 않으면 예기치 않은 결과가 발생할 수 있습니다. 예를 들어, 동적으로 생성된 HTML이 문서의 끝을 넘어가거나, 이미 닫혀있는 태그를 열거나 닫는 등의 문제가 발생할 수 있습니다.
그러므로 document.write() 함수를 사용하여 HTML을 동적으로 생성할 때, document.open() 함수와 함께 document.close() 함수를 사용하여 문서를 명시적으로 닫아주는 것이 좋습니다.
- alert
<!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>
var name = prompt("이름을 입력하세요", "홍길동");
alert(name)
</script>
</body>
</html>