Javascript [ Alert ]

양혜정·2024년 4월 6일
day51
0

HTML/CSS/JS 실행

목록 보기
24/60
post-thumbnail

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 태그속에 결과물을 넣어주는 innerHTML 사용하기</title>

<link rel="stylesheet" href="./css/01.css">
<script type="text/javascript" src ="./js/03.js"></script>

</head>
<body>
    <h1>안녕하세요? 저의 이름은&nbsp;<span id="name"></span>&nbsp;입니다.</h1>
    <p>제 이름을 알고싶으면 아래의 확인 버튼을 클릭하세요.</p>

    <button type="button" onclick="myFunction()">확인</button>
    <button type="button" onclick="myClear()">지우기</button>
</body>
</html>

JS

function myFunction() {

    // 일반적으로 window 는 생략한다. \n 이 줄바꿈을 말하는 것이다.
    window.alert("확인버튼을 클릭하셨군요~~^^");
    // 알림창이 뜬다.
    alert("좋은하루 \n행복한 하루 되세요!!");
    // window 생략 가능

    document.getElementById("name").innerHTML = "양혜정";   
}

function myClear(){
    document.getElementById("name").innerHTML = "";
}
// clear 는 명령어이므로 함수명으로 사용이 불가능하다.

정리

  • 02_output -> 03_window_alert.html, 03.js
profile
양혜정
이전 포스트

Javascript [ document.write ]

다음 포스트

Javascript [ Console.log ]

0개의 댓글

관련 채용 정보