[JavaScript] 자바스크립트 데이터 입/출력

📌 데이터를 출력하는 구문 

 

🔊 1) [window.]alert("알림창에 출력할 문구");

:  alert (알리다, 경보, 경고) 브라우저에 대화상자를 띄우는 함수 

html 파일 
<button onclick ="fnAlert()">alert 확인</button>

js 파일
funcion fnAlert(){
alter("alter 버튼 클릭됨!");
}

🔊 2) [window.]console.log("콘솔창에 출력할 문구");

: 작성된 내용을 새 페이지에서 화면상에 출력하는 함수 

 -> 한번 확인할때 쓰면 어디서 오류가 났는지 바로 확인이 가능하다. 

-> 개발자모드를 켜서 F12번을 누르면 확인 할 수 있다. 

HTML 코드 
 <button onclick="getInnerHTML1()">innerHTML로 읽어오기</button>
 
RS 코드 
function getInnerHTML1() {
    // id가 test2인 요소를 얻어와 
    // test2 변수에 대입
    const test2 = document.getElementById("test2");

    // test2 요소 내부에 내용(태그 + 속성 + 내용)을 읽어서 콘솔에 출력
    console.log(test2.innerHTML);
}

🔊 3) document.wirte("화면상에 출력할 문구");

: 작성된 내용을 새 페이지에서 화면상에 출력하는 함수 

html 파일 
<button onclick="documentWriter()">화면에 출력</button>

js 파일 
function (){
document.writer("안녕하세요");
}

 

🔊 4) 선택한요소.innerText = "요소에 출력할 문구";

: 자바 스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성 

- 내용을 읽어올 때 태그는 모두 무시함 

- 내용을 변경할때 태그는 문자열 자체로 해석됨(태그 해석x)

html 파일 
<button onclick="setInnerText()">InnerText로 읽어오기</button>

<p id="test1" class="box">
    테스트1입니다.
    <br>
    <b>안녕하세요 ? </b>
</p>

rs 파일 
function setInnerText() {
    //아이디가 "test1"인 요소를 얻어와
    //test1 변수에 대입
    const test1 = document.getElementById("test1");

    // test1 변수에 대입된 요소에서 새로운 내용을 작성
    test1.innerText = "innerText로 변경된 <br> 내용입니다.";

🔊 4) 선택한요소.innerHTML = "요소에 출력할 문구";

:자바 스크립트에서 요소 전체를 (태그+속성+내용) 읽어들이거나 변경하는 속성

 - 내용을 읽어 올때 태그+속성 모두 포함

 - 내용을 변경할 때 태그는 HTML 요소로 해석됨( 태그 해석 O)

html 코드 
    <button onclick="setInnerHTML1()">innerHTML로 변경하기</button>

    <p id="test2" class="box">
        테스트2 입니다.
        <br>
        <b>안녕하세요?</b>
    </p>


rs 코드 
function setInnerHTML1() {
    const test2 = document.getElementById("test2");

    test2.innerHTML = "<b>innerHTML로 변경된 내용</b> <br>반갑습니다."
}

 

* 기존에는 태그가 하나도 해석되지 않았는데 innerHTML은 내용+속성+태그 모두 읽어들일 수 있다! 

 

 

---

📌 데이터를 입력 받는 구분(변수에 기록 가능) 

 

🔊 1) 변수 = [window.]confirm("질문내용");

: 질문에 대한 "예" / "아니요" 결과를 얻고자 할때 사용하는 대화 상자 출력 함수

-> 선택 결과에 따라 확인 버튼 클릭 시 true 또는 취소 버튼 클릭시 false가 반환됨

html 코드 
<button id="confirmBtn" onclick="fnConfirm()">confirm 확인하기</button>

rs 코드 
function fnConfirm() {
    // 확인 
    if (confirm("버튼 배경색을 분홍색으로 바꾸시겠습니까?")) {
        document.getElementById("confirmBtn").style.backgroundColor = "pink";
    } else {
        document.getElementById("confirmBtn").style.backgroundColor = "green";
    }
}

 

🔊 2) 변수 = [window.]prompt("질문내용");

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

- 확인 : 입력한 값 반환(문자열)

- 취소 : null 반환 

html 코드
<button onclick="fnPrompt1()">클릭</button>
<div id="area2"></div>

rs 코드 
function fnPrompt1() {
    var name = prompt("당신의 이름은 무엇입니까?");
    var age = prompt("당신의 나이는 몇살입니까?");

    //console.log(name);
    //console.log(age);

    const divE1 = document.getElementById("area2");
    divE1.innerHTML = "<b>앗, 당신이 바로 " + age + "살" + name + "님이시군요..!!</b>"

}

 

🔊 3) 변수 = 선택한요소.속성(id,className,innerHTML,innerText,..);

🔊 4) 변수 = 선택한 input요소.value;

: input 요소를 사용하면 value로 값을 불러와야한다!

( innertText가 아닌 value로 받아야한다! 이유는 input 내용이 없다!)

 html 코드 
 아이디 : <input type="text" id="userId"><br>
 비밀번호 : <input type="password" id="userPwd"><br>

 <button onclick="fnInput()">클릭</button>
 <br>
 <input type="text" id="area4">

 rs 코드 
 function fnInput(){

    const input1 = document.getElementById("userId"); //아이디 input요소 
    const input2 = document.getElementById("userPwd"); //비밀번호  input요소 

    //console.dir(input1);

    const id = input1.value;
    const pwd = input2.value;

    //console.log(id);
    //console.log(pwd);

    /* input에는 innerText가 아닌 value 값으로 받아야합니다! */
    document.getElementById("area4").value = id + "," +pwd;

    input1.value=null;
    input2.value='';


 }