[JavaScript] 2021.01.18. DAY_58 window.onload window창이 모두 열리고 나서 동작하게하는 방법
2021. 1. 18. 11:17ㆍWeb_Front-end/JavaScript
※ 아래와 같은 코드를 실행하면,
html이 만들어지기 전에 스크립트가 실행되기 때문에 alert창이 보이지 않는다
==> 읽어들일 수 없기 때문에
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window창이 모두 열리고 나서 동작하는 방법</title>
<script type="text/javascript">
/* html이 만들어지기 전에 실행되기 때문에 id name을 찾을 수 없다 */
/* body의 태그에 담긴값을 가져오려면 innerHTML을 사용한다 */
var name = document.getElementById("name").innerHTML;
alert(name);
</script>
</head>
<body>
<h2 id="name">홍길동</h2>
</body>
</html>
※ window.onload를 사용해서,
html(window)를 먼저 실행시키고, function을 수행하도록 처리한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window창이 모두 열리고 나서 동작하는 방법</title>
<script type="text/javascript">
/* html이 만들어지기 전에 실행되기 때문에 id name을 찾을 수 없다 */
/* body의 태그에 담긴값을 가져오려면 innerHTML을 사용한다 */
window.onload = function(){
var name = document.getElementById("name").innerHTML;
alert(name);
}
</script>
</head>
<body>
<h2 id="name">홍길동</h2>
</body>
</html>
'Web_Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 2021.01.18. DAY_58 template String (0) | 2021.01.18 |
|---|---|
| [JavaScript] 2021.01.18. DAY_58 유효성검사 (2) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 자동형변환, ===연산, const(상수) (0) | 2021.01.18 |
| [JavaScript] 2021.01.18. DAY_58 JavaScript의 기능, 연산, 문자열, 표현식 (0) | 2021.01.18 |
| [JavaScript] 2021.01.14. DAY_56 JavaScript란? (0) | 2021.01.15 |