JavaScript 입출력방법
나는 자바스크립트로 실행결과를 출력할 때 대부분 alert나 console만 사용해서 다른 출력방법을 잊어버렸다. 입력방법도,,
하지만 코드를 작성하다 보면 알림창을 띄울 때도 있고, 확인창을 띄울 때도 있고, 입력을 받아야 할 때도 있는데 그
때 가서 모르면 굉장히 당혹스럽겠지,,,? 데이터 입출력방법 다시 공부하고 이번엔 절대 잊지 말아야쥥
데이터 출력 방법
1. alert("알림창에 출력할 문구");
=> window.alert("");로도 작성할 수 있는데, 최상위가 window이기때문에 window.은 생략하고 alert만 작성해도 된다.
=> 간단한 실행결과를 표시할 때 사용한다. 브라우저에 대화상자를 띄울 수 있다.
2. console.log("콘솔창에 출력할 문구");
=> 개발자도구의 console에 실행결과를 출력할 수 있다.
3. document.write("화면상에 출력할 문구");
=> 실행결과를 화면에 출력할 수 있다.
function documentWrite(){
document.write("자바스크립트<br />");
document.write("<b>안녕하세요</b><br /><h2>반가워요</h2>");
}
4. 선택한 요소.innerText = "요소에 출력할 문구";
=> 자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성이다.
=> 내용을 읽어올 때 태그는 모두 무시,
=> 내용을 변경할 때 태그는 문자열 자체로 해석(태그 해석 X)
<button onclick="getInnerText()">innerText로 읽어오기</button>
<button onclick="setInnerText()">innerText로 변경하기</button>
<p id="test1" class="box">
테스트1 입니다
<br />
<strong>안녕하세요?></strong>
</p>//innerText 읽어오기
function getInnerText(){
//HTML 문서 내에서 아이디가 "test1"인 요소를 얻어와
//test1 변수에 대입
const test1 = document.getElementById("test1");
//test1 변수에 대입된 요소에서 내용을 얻어와 console에 출력
console.log(test1.innerText);
}
//innerText로 변경하기
function setInnerText(){
const test1=document.getElementById("test1");
//test1 변수에 대입된 요소에 새로운 내용을 작성
test1.innerText = "innerText로 <br /> 변경된 내용입니다.";
}
5. 선택한 요소.innerHTML = "요소에 출력할 문구";
=> 자바스크립트에서 요소 전체를 (태그 + 속성 + 내용) 읽어들이거나 변경하는 속성
=> 내용을 읽어올 때 태그, 속성 모두 포함
=> 내용을 변경할 때 태그는 HTML요소로 해석(태그 해석 O)
<button onclick="getInnerHTML1()">innerHTML로 읽어오기</button>
<button onclick="setInnerHTML1()">innerHTML로 변경하기</button>
<p id="test2" class="box">
테스트2 입니다
<br />
<strong>안녕하세요?></strong>
</p>
<hr />
//innerHTML 읽어오기
function getInnerHTML1(){
//HTML 문서 내에서 아이디가 "test2"인 요소를 얻어와
//test2 변수에 대입
const test2 = document.getElementById("test2");
//test2 변수에 대입된 요소에서 내용을 얻어와 console에 출력
console.log(test2.innerHTML);
}
//innerHTML로 변경하기
function setInnerHTML1(){
const test2=document.getElementById("test2");
//test2 변수에 대입된 요소에 새로운 내용을 작성
test2.innerHTML = "innerHTML로 <br /> 변경된 내용입니다.";
}
데이터 입력 방법
1. 변수 = confirm("내용");
=> 질문에 대한 예/아니오 결과를 얻고자 할 때 사용하는 대화 상자 출력 함수
=> 선택 결과에 따라 확인 버튼 클릭시 true, 취소 버튼 클릭시 false가 반환됨
function fnConfirm(){
const confirmBtn = document.getElementById("confirmBtn");
if(confirm("버튼 배경색을 오렌지색으로 바꾸시겠습니까?")){
confirmBtn.style.backgroundColor = "orange";
}else{
confirmBtn.style.backgroundColor = "green";
}
}
2. 변수 = prompt("내용");
=> 텍스트를 작성할 수 있는 대화상자
=> 확인 : 입력한 값 반환(문자열), 취소 : null 반환
=> prompt("내용","기본값"); 이렇게 작성하면 기본값을 설정할 수 있다.
<button onclick="fnPrompt1()">클릭</button>
<div id="area2"></div>
function fnPrompt1(){
const name = prompt("당신의 이름은 무엇입니까?","홍길동");
const age = prompt("당신의 나이는 몇 살입니까?","30");
console.log(name);
console.log(age);
const divEl = document.getElementById("area2");
divEl.innerHTML = "<b>앗, 당신이 바로 " + age + "살 " + name + "님이군요..!</b>";
}
3. 변수 = 선택한 요소.속성(className, innerHTML, innerText 등);
<button onclick="fnPrompt2()">확인하기</button>
<p id="area3"></p>
function fnPrompt2(){
const input = prompt("이름을 입력해주세요.");
const promptResult = document.getElementById("area3");
if(input != null) { //이름이 입력되었을 때
promptResult.innerText = input + "님 환영합니다.";
} else{ //취소버튼 눌렀을 때
promptResult.innerText = "이름을 입력해주세요.";
}
}
4. 변수 = 선택한 input요소.value;
<label>아이디 : </label><input type="text" id="userId"> <br />
<label>비밀번호 : </label><input type="password" id="userPwd"> <br />
<button onclick="fnInput()">클릭</button>
<br />
<label>결과: </label><input type="text" id="result">
function fnInput(){
const input1 = document.getElementById("userId"); //아이디 input 요소
const input2 = document.getElementById("userPwd"); //비밀번호 input 요소
const id = input1.value; //변수 = input1에 입력한 값
const pwd = input2.value; //변수 = input2에 입력한 값
const result = document.getElementById("result");
if(id != "" && pwd != ""){
result.value = id + ", " + pwd;//result요소의 값으로 = 다음의 값 대입
} else {
result.value = "다시 확인해 주세요";
}
//id = "";
input1.value = "";
input2.value = "";
}