02. JS 데이터 입출력

☑️ innerHTML

요소 전체를 읽어들이거나 변경하는 속성

• 내용을 읽어올 때 태그 + 속성 + 내용을 모두 포함함
• 내용을 변경할 때 태그 html 요소로 해석됨(html 해석 O)

function innerHTMLEX(){
	const test1 = document.getElementByID("test1");
    test1.innerHTML = "<strong class = 'red'> 변경된 내용 </strong>"

}

☑️ innerText

요소에 작성된 내용만을 읽어들이거나 변경하는 속성

• 내용을 읽어올 때 요소의 태그, 속성은 무시함
• 내용을 변경할 때 대입되는 태그는 모두 문자열로 해석됨(html 태그로 해석 X)

☑️ window.confirm("내용")

질문에 대한 "예"/"아니오" 결과를 얻고자 할 때 사용하는 대화상자를 띄우는 함수

• 예/ 확인 : true 반환
• 아니오/ 취소 : false 반환

function fnConfirm2(){
    const qes = confirm("배경색을 초록색으로 바꾸시겠습니까?");
    if(qes){
        document.getElementById("confirmTest").style.backgroundColor="green";
    }
}

☑️ window.prompt("내용")

텍스트를 작성할 수 있는 대화상자

• 확인 : 입력한 값을 반환
• 취소 : null 반환

function fnPrompt(){
    const input = prompt("변경할 버튼명을 입력하세요");
    // 입력한 값 or null

    if(input != null){
        document.getElementById("promptTest").innerText = input;
    } else{
        alert("취소되었습니다.")
    }
    // 비밀번호 확인할 때 !!!(프로젝트에서 쉽게 받기) --> 실무에선 안씀
}