Javascript [ Console.log ]

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

HTML/CSS/JS 실행

목록 보기
25/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/04.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() {

    console.log("확인 버튼을 클릭하셨군요~~^^")
    // 크롬 웹브라우저에서 F12(개발자도구)를 눌러서 콘솔에서 확인하는 것이다.
    
    document.getElementById("name").innerHTML = "양혜정";   
}

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

정리

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

Javascript [ Alert ]

다음 포스트

Javascript [ Var ]

0개의 댓글

관련 채용 정보