자바 스크립트 데이터 입/출력
객체 :
window : 자바스크립트의 내장 객체로 브라우저 창이
열릴 때마다 하나씩 만들어지는 객체이다
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체이다
document : 웹 문서마다 하나씩 만들어지는 객체 (HTML 문서에 대한 정보들을 가지고 있다)
[window.]alert("출력하고자 하는 내용");
[window].console.log("콘솔창에 출력하고자 하는 내용");
document.write("화면 상에 출력하고자 하는 내용");
선택한요소.innerHTML | .innerText = "선택된 요소에 출력할 내용";
문서가 열릴 때 뜬다.
alert
<button onclick="documentWrite();">화면에 출력</button>
function documentWrite(){
let table = "<table border='1'>"
+ "<tr>"
+ "<th>이름</th>"
+ "<td>최종군</td>"
+ "</tr>"
+"</table>";
document.write(table);
}
document.write() - > 화면에 출력하고자 하는 내용을 출력한다.
요소에 출력하기
자바 스크립트에서 어떤 요소(Element) 안에 값(content)을 가지고 오거나
변경하고자 할 때 innerHTML, innerText라는 속성에 접근한다.
divEl.innerHTML = "<h4>innerHTML 을 사용하여 속성 변경!</h4>";
innerHTML 사용 시
태그는 해석이 되어 표시가 된다
divEl.innerText = "<h4>innerText 을 사용하여 속성 변경!</h4>";
innerText 사용시 텍스트 그대로 표기가 된다.
데이터를 입력받는 구문(변수에 저장과 기록)
변수 = [window.]confirm("질문 내용 작성");
변수 = [window.]prompt ("질문 내용");
선택한요소.속성; (id, className, innerText, value...)
변수 = 선택한 input요소.value;
confirm 호출 시 질문 내용, 확인/취소 버튼이 존재하는 알림창이 표시가 된다
확인 버튼 클릭시 true, 취소 버튼을 클릭 시 false를 반환한다.
<button onclick="confirmTest()">클릭</button>
<div id="area2"></div>
<script>
function confirmTest(){
let result = confirm("졸려요? (졸리면 확인/아니면 취소)");
console.log(result);
// 아이디 속성이 area2인 요소 접근
let divEl2 = document.getElementById("area2");
if(result){
// result의 값이 true인 경우 --> 졸리다
divEl2.innerHTML = "<h3>정신 차리세요!!</h3>";
}else{
//result 값이 false인 경우 -> 졸리지 않다
divEl2.innerHTML = "<h3>좋습니다 굳!</h3>";
}
}
</script>
promp 호출시 "질문 내용"과 입력할 수 있는 "텍스트 상자";
확인/취소 버튼이 보여지는 알림창이 표시됨
확인 버튼 클릭 시 텍스트 상자에 입력된 값을 문자열로 반환한다
취소 버튼 클릭 시 null을 반환하게 된다(값이 입력 되어 있어도 취소버튼 클릭 시 null이 반환된다)
<button onclick="promptTest()">클릭</button>
<div id="area3"></div>
<script>
function promptTest(){
// 이름, 나이 입력 받아 변수에 저장
let name = prompt("이름을 입력하시오");
let age = prompt("나이를 입력하시오");
// area3이라는 id 속성을 가진 요소에 접근
let divEl3 = document.getElementById("area3");
// 입력된 정보 : 이름 (<b>{나이})
divEl3.innerHTML = "입력된 정보 : " + name + "(<b> " + age + "</b>)"
}
</script>
선택한 input 요소의 값(content) 접근하기
아이디 : <input type="text" id="userId">
비밀번호 : <input type="password" id="userPwd">
<input type="button" value="로그인" onclick="loginTest()">
<input type="text" id="area4">
</div>
<script>
function loginTest(){
let idEl = document.getElementById("userId");
let pwdEl = document.getElementById("userPwd");
let rebtn = document.getElementById("rebtn");
console.log(idEl.Value == null);
console.log(pwdEl.Value == "");
document.getElementById("area4").value = idEl.value + ", " + pwdEl.value ;
idEl.value = '';
pwdEl.value = "";
}
</script>