📗 self-study/📗 KH정보교육원 당산지원
[JavaScript] 02_데이터 입출력
천재강쥐
2022. 9. 22. 10:51
더보기
JavaScript의 데이터 입출력에 대해 알아보자
window와 document
✔️ window: 브라우저 창 자체,
자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체!
브라우저 창 안에 존재하는 모든 요소들의 최상위 부모 객체
(즉, 모든 곳에 적용되기 때문에 생략 가능)
=> window.alert() -> alert()
=> window.console.log() -> console.log()
✔️ document: html 파일,
자바스크립트 내장 객체로 웹 문서(html 파일)마다 하나씩 만들어지는 객체
html 문서에 대한 정보들을 가지고 있음, 이 문서에 존재하는 html 태그들의 최상위 부모
*window 객체는 브라우저 창 하나를 의미한다고 보면 되고, document 객체는 html 문서 하나를 의미한다고 보면 됨
데이터를 출력하는 기본 구문
1 👉🏻 window.alert("알람창에 출력할 문구");
2 👉🏻 window.console.log("콘솔창에 출력할 문구");
3 👉🏻 document.write("화면에 출력할 문구");
4 👉🏻 선택한요소.innerHTML/innerText = "해당 요소에 출력할 문구";
1 👉🏻 window.alert("알람창에 출력할 문구");
<button onclick="alert('잘 출력되나...?')">알람창에 출력</button>
2 👉🏻 window.console.log("콘솔창에 출력할 문구");
<button onclick="console.log('잘 출력되나...?')">콘솔창에 출력</button>
<!-- 자바로 따지면 System.out.println() 메소드와 같은 역할을 함 -->
3 👉🏻 document.write("화면에 출력할 문구");
<button onclick="documentWrite()">화면에 출력</button>
<script>
function documentWrite() {
document.write("3방식 잘 출력되나...?"); // 테스트 1
// body 태그 내의 내용물을 아예 바꿔 주는 역할 (페이지 이동의 개념이 아님)
}
</script>
👉🏻 화면을 아예 바꿔 주기 때문에 뒤로 가기 창이 활성화되지 않은 것을 알 수 있음
<그럼 혹시 태그도 적용이 될까?> 👉🏻 가능함!
<button onclick="documentWrite()">화면에 출력</button>
<script>
function documentWrite() {
document.write("<b>태그도 잘 출력되나...?</b><br><h2>안녕?</h2>"); // 테스트 2
// html 태그가 포함된 문자열의 경우에는 html 태그가 진짜 태그로 해석돼서 보여짐
}
</script>
<document.write 함수를 이용해서 테이블 만들기>
<button onclick="documentWrite()">화면에 출력</button>
<script>
function documentWrite() {
var table ="<table border='1'>"; // 원래 border="1"이지만 이미 쌍따옴표 안에 있으므로 이때는 홑따옴표 씀
table += "<tr>";
table += "<td>1</td>";
table += "<td>2</td>";
table += "</tr>";
table += "</table>";
document.write(table);
}
</script>
4 👉🏻 선택한요소.innerHTML/innerText = "해당 요소에 출력할 문구";
<특정 요소의 값을 가지고 오거나 변경하기 위해 먼저 변수에 요소 객체를 담을 것>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
// 특정 요소의 값을 가지고 온다거나 변경하고자 할 때
// 먼저 해당 요소 객체를 코드상으로 끌고 와서 변수에 담아 둘 것!
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
console.log(divEl); // 잘 담겨 있는지 변수에 담긴 내용물 출력
}
</script>
</body>
<기본 속성값 모두 출력해 보기>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
// 특정 요소의 값을 가지고 온다거나 변경하고자 할 때
// 먼저 해당 요소 객체를 코드상으로 끌고 와서 변수에 담아 둘 것!
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
console.dir(divEl); // console.dir: 해당 요소의 모든 속성들에 대한 정보를
// 디렉토리 형식으로 보여 주는 함수
}
</script>
</body>
<원하는 속성값만 출력해 보기>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
// 선택된 요소 내의 정보들을 알아내고자 한다면 속성들에 직접 접근이 가능 (.을 통해서)
console.log(divEl.id); // id: 해당 요소의 아이디값
console.log(divEl.className) // className: 해당 요소의 클래스값
}
</script>
</body>
<innerHTML, innerText 사용해 보기>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
// 선택된 요소의 content 영역의 값에도 접근 가능
// 시작태그와 종료태그 사이에 문구를 나타내 준다는 동일한 특징
console.log(divEl.innerHTML); // 요소의 content 영역 안의 html 태그까지 다 포함
console.log(divEl.innerText); // 요소의 content 영역 안의 텍스트만 포함, html 태그는 가져오지 않음
}
</script>
</body>
<대입을 통해서 직접 접근해 값을 변경>
위와 같이 속성에 직접 접근해서 값을 가지고 오는 것도 가능하지만 대입을 통해서 직접 접근해 값을 변경하는 것도 가능함
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
// 선택된 요소의 content 영역의 값에도 접근 가능
// 시작태그와 종료태그 사이에 문구를 나타내 준다는 동일한 특징
// console.log(divEl.innerHTML); // 요소의 content 영역 안의 html 태그까지 다 포함
// console.log(divEl.innerText); // 요소의 content 영역 안의 텍스트만 포함, html 태그는 가져오지 않음
// 위와 같이 속성에 직접 접근해서 값을 가지고 오는 것도 가능하지만
// 직접 접근해서 값을 변경하는 것도 가능함 (대입을 통해서)
divEl.innerHTML = "<b>innerHTML로 속성값을 변경함</b>";
}
</script>
</body>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
// 선택된 요소의 content 영역의 값에도 접근 가능
// 시작태그와 종료태그 사이에 문구를 나타내 준다는 동일한 특징
// console.log(divEl.innerHTML); // 요소의 content 영역 안의 html 태그까지 다 포함
// console.log(divEl.innerText); // 요소의 content 영역 안의 텍스트만 포함, html 태그는 가져오지 않음
// 위와 같이 속성에 직접 접근해서 값을 가지고 오는 것도 가능하지만
// 직접 접근해서 값을 변경하는 것도 가능함 (대입을 통해서)
// divEl.innerHTML = "<b>innerHTML로 속성값을 변경함</b>";
divEl.innerText = "<b>innerText로 속성값을 변경함</b>";
}
</script>
</body>
👉🏻 innerHTML로 변경하면 출력할 문구에 html 태그가 있을 경우 태그로 인식
👉🏻 innerText로 변경하면 출력할 문구에 html 태그가 있을 경우 문자열로 인식
<문자열이 아닌 함수도 대입 가능>
<style>
/* 눈에 잘 안 띄어서 영역 표시를 위해 설정해 줌 */
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
<body>
<div class="area" id="area1">
자바스크립트에서 어떤 요소 (element) 안의 값 (content 값)을 가지고 온다거나 <br>
변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근할 수 있음
</div>
<button onclick="tagValue();">요소에 출력</button>
<script>
function tagValue() {
var divEl = document.getElementById("area1"); // div 요소 객체를 변수에 담음
// 선택된 요소의 content 영역의 값에도 접근 가능
// 시작태그와 종료태그 사이에 문구를 나타내 준다는 동일한 특징
// console.log(divEl.innerHTML); // 요소의 content 영역 안의 html 태그까지 다 포함
// console.log(divEl.innerText); // 요소의 content 영역 안의 텍스트만 포함, html 태그는 가져오지 않음
// 위와 같이 속성에 직접 접근해서 값을 가지고 오는 것도 가능하지만
// 직접 접근해서 값을 변경하는 것도 가능함 (대입을 통해서)
// divEl.innerHTML = "<b>innerHTML로 속성값을 변경함</b>";
divEl.innerText = "<b>innerText로 속성값을 변경함</b>";
divEl.onclick = function() {
alert("안녕");
}; // 변수에 함수를 대입한 꼴
console.dir(divEl);
}
}
</script>
</body>
<활용법>
<h4>회원가입</h4>
아이디: <input type="text" name="userId" id="userId">
<input type="button" id="idCheck" value="아이디 중복체크" onclick="idCheck();">
<!-- 버튼이 클릭됐을 때 function idCheck() 함수가 실행될 수 있도록 설정 -->
<div id="result"></div>
<script>
function idCheck() {
// admin 이라는 아이디가 이미 존재한다고 가정
// 사용자로부터 입력받은 아이디값을 끌고 와야 함
// => id 속성값이 userId인 input 태그의 value 속성으로 존재함
var userId = document.getElementById("userId");
var userIdStr = userId.value; // 사용자가 입력한 아이디값
// input 타입 text박스에서의 value 속성은 기본값으로 박스 안에 들어가는 텍스트를 의미함
var result = document.getElementById("result");
if(userIdStr == "admin") {
// 아이디가 중복인 상태 => 사용 불가한 아이디 출력
result.innerHTML = "사용 불가한 아이디입니다.";
} else {
// 아이디가 중복이 아닌 상태 => 사용 가능한 아이디 출력
result.innerHTML = "사용 가능한 아이디입니다.";
}
}
</script>
데이터를 입력받는 기본 구문 (변수에 기록 가능)
👉🏻 변수 = window.confirm("질문 내용");
👉🏻 변수 = window.prompt("질문 내용");
👉🏻 변수 = 선택한요소.속성(id/className/innerHTML/innerText/...);
👉🏻 변수 = 선택한input요소.value;
1 👉🏻 변수 = window.confirm("질문 내용");
confirm 함수 호출 시 "질문 내용"과 "확인/취소" 버튼이 존재하는 알림창 발생
확인 버튼 클릭 시 true / 취소 버튼 클릭 시 false를 반환함
<button onclick="testConfirm();">confirm으로 입력</button>
<div class="area" id="area2"></div>
<script>
function testConfirm() {
// window.confirm();
// window는 생략 가능함
var result = confirm("졸리면 확인, 아니면 취소를 누르세요.");
console.log(result);
}
</script>
<button onclick="testConfirm();">confirm으로 입력</button>
<div class="area" id="area2"></div>
<script>
function testConfirm() {
// window.confirm();
// window는 생략 가능함
var result = confirm("졸리면 확인, 아니면 취소를 누르세요.");
// console.log(result);
var divEl = document.getElementById("area2");
if(result) {
divEl.innerHTML = "<h2>졸려요ㅜㅜ</h2>";
} else {
divEl.innerHTML= "<h2>안졸립니다!!!</h2>";
}
}
</script>
2 👉🏻 변수 = window.prompt("질문 내용");
prompt 함수 호출 시 "질문 내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소" 버튼이 보여지는 알림창 발생
- 확인 버튼 클릭 시 텍스트 상자에 입력되어 있는 값이 반환
- 취소 버튼 클릭 시 null을 반환
<head>
<style>
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
</head>
<body>
<button onclick="testPrompt();">prompt로 입력</button>
<div class="area" id="area3"></div>
<script>
function testPrompt() {
// window.prompt();
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇 살입니까?");
// 만약 아무 입력을 하지 않은 채 "확인"을 누르면 "빈 문자열"이 넘어감
// 만약 아무 입력을 하지 않은 채 "취소"를 누르면 "null" 값이 넘어감
console.log(name);
console.log(age);
}
</script>
</body>
<head>
<style>
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
</head>
<body>
<button onclick="testPrompt();">prompt로 입력</button>
<div class="area" id="area3"></div>
<script>
function testPrompt() {
// window.prompt();
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇 살입니까?");
// 만약 아무 입력을 하지 않은 채 "확인"을 누르면 "빈 문자열"이 넘어감
// 만약 아무 입력을 하지 않은 채 "취소"를 누르면 "null" 값이 넘어감
// console.log(name);
// console.log(age);
// 앗! 당신이 바로 xx살 xxx님이군요...! 반갑습니다 ^^ 형태로 출력
var divEl = document.getElementById("area3");
divEl.innerHTML = "<b>앗! 당신이 바로 " + age + "살 " + name + "님이군요...! 반갑습니다 ^^</b>";
}
</script>
</body>
<head>
<style>
.area {
border : 1px solid black;
width : 300px;
height : 100px;
}
</style>
</head>
<button onclick="testPrompt2();">숫자 입력</button>
<ul id="ul1"></ul>
<script>
function testPrompt2() {
var num = prompt("숫자만을 입력해 주세요.");
// 사용자가 숫자값을 정확하게 입력했다라는 가정 하에 반복문 쓰기
/*
자바에서의 for문
for(int i = 0; i < num; i++) {
반복하고자 하는 코드;
}
*/
var str = "";
for(var i = 0; i < num; i++) {
str +="<li>안녕하세요" + i + "</li>";
}
var ulEl = document.getElementById("ul1");
ulEl.innerHTML = str;
// 만약 사용자가 숫자가 아닌 값을 입력했을 경우 반복문을 돌 때 오류
// 단, 자바처럼 비정상적인 오류로 프로그램이 종료되지는 않는다!
}
</script>
3 👉🏻 변수 = 선택한요소.속성(id/className/innerHTML/innerText/...);
<h3>3. 선택한요소.속성;</h3>
<div id="div1">
안녕하세요!
</div>
<button onclick="test();">속성에 접근해서 입력</button>
<script>
function test() {
var divEl = document.getElementById("div1");
alert(divEl.innerHTML);
}
</script>
4 👉🏻 변수 = 선택한input요소.value;
<h3>4) 선택한input요소.value;</h3>
<br>
아이디 : <input type="text" name="userId" id="userId1"><br>
비밀번호: <input type="password" name="userPwd" id="userPwd1"> <br>
<button onclick="testInput();">로그인</button>
<script>
function testInput() {
// input 요소 객체들을 코드상으로 끌고 오기
var input1 = document.getElementById("userId1");
// input1에는 이제 아이디를 직접 입력받을 수 있는 태그 자체가 담겨 있음
var input2 = document.getElementById("userPwd1");
// input2에는 이제 패스워드를 직접 입력받을 수 있는 태그 자체가 담겨 있음
console.dir(input1);
console.dir(input2);
}
</script>
 |
 |
<h3>4) 선택한input요소.value;</h3>
<br>
아이디 : <input type="text" name="userId" id="userId1"><br>
비밀번호: <input type="password" name="userPwd" id="userPwd1"> <br>
<button onclick="testInput();">로그인</button>
<script>
function testInput() {
// input 요소 객체들을 코드상으로 끌고 오기
var input1 = document.getElementById("userId1");
// input1에는 이제 아이디를 직접 입력받을 수 있는 태그 자체가 담겨 있음
var input2 = document.getElementById("userPwd1");
// input2에는 이제 패스워드를 직접 입력받을 수 있는 태그 자체가 담겨 있음
// console.dir(input1);
// console.dir(input2);
// 각각의 input 요소들은 value 속성을 갖고 있음
// => 이 value 속성에 사용자가 키보드로 입력한 값이 들어 있음
console.log(input1.value);
console.log(input2.value);
}
</script>
<br>
아이디 : <input type="text" name="userId" id="userId1"><br>
비밀번호: <input type="password" name="userPwd" id="userPwd1"> <br>
<button onclick="testInput();">로그인</button>
<script>
function testInput() {
// input 요소 객체들을 코드상으로 끌고 오기
var input1 = document.getElementById("userId1");
// input1에는 이제 아이디를 직접 입력받을 수 있는 태그 자체가 담겨 있음
var input2 = document.getElementById("userPwd1");
// input2에는 이제 패스워드를 직접 입력받을 수 있는 태그 자체가 담겨 있음
// user01 - pass01 라는 계정이 있다는 가정 하에 로그인 처리
var userId = input1.value;
var userPwd = input2.value;
if(userId == "user01" && userPwd == "pass01") {
alert("로그인에 성공했습니다.");
} else {
alert("로그인에 실패했습니다.");
}
}
</script>
<h4>게시글 작성</h4>
제목: <input type="text" name="title" id="title"> <br>
내용: <textarea name="content" id="content"></textarea> <br>
<button onclick="testInput2();">작성하기</button>
<br>
<table border="1">
<thead>
<tr>
<th>제목</th>
<th>내용</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<script>
function testInput2() {
// 사용자가 입력한 게시글의 제목, 내용을 불러와야 함
var title = document.getElementById("title");
var content = document.getElementById("content");
// tbody 영역에 들어갈 문자열 구성
var str = "<tr>";
str += "<td>" + title.value + "</td>";
str += "<td>" + content.value + "</td>";
str += "</tr>";
// tbody 영역에 위의 str 삽입 => 누적 삽입 (+=)
var list = document.getElementById("list");
// list.innerHTML = str;
// = 으로 입력 시 새 게시글이 기존 게시글을 덮어버림
list.innerHTML += str;
}
</script>