고래씌
[JavaScript] 2. 데이터 입출력 본문
▶ 자바스크립트에서의 데이터 입/출력
- window : 자바스크립트의 내장 객체로 브라우저창이 열릴 때마다 딱 하나씩 만들어지는 객체.
브라우저 창안에 존재하는 모든 요소들의 최상위 객체
- document : 웹 문서(html)마다 하나씩 만들어지는 객체. HTML문서에 대한 정보들을 가지고 있음
☞ document 객체의 종류
자세한 내용은 아래 사이트를 참고하면 좋다.
https://www.tcpschool.com/javascript/js_dom_document
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
1. 데이터를 출력하는 기본 구문
1) window.alert("알람창에 출력할 문구")
2) window.console.log("콘솔창에 출력할 문구")
3) document.write("화면에 출력할 문구")
4) 선택한 요소.innerHTML/innerText = "해당요소에 출력할 문구"
3) document.write("화면에 출력할 문구");
■ 02_데이터입출력.html
<button onclick="documentWrite()">화면에 출력하기</button>
<script>
function documentWrite(){
document.write("document write 테스트 해봄");
document.write("<b>볼드처리</b><br><h2>안녕?</h2>");
}
</script>
☞ 버튼을 클릭하면 다음 화면으로 넘어가면서 출력됨
☞ 화면에 출력할 문자열에 html태그가 있을 경우 진짜 html태그로 해석돼서 보여짐
■ 02_데이터입출력.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_데이터입출력</title>
<link rel="stylesheet" href="resources/css/common.css">
</head>
<body>
<h1>자바스크립트에서의 데이터 입/출력</h1>
<h2>1. 데이터를 출력하는 기본 구문</h2>
<p>
1) window.alert("알람창에 출력할 문구") <br>
2) window.console.log("콘솔창에 출력할 문구") <br>
3) document.write("화면에 출력할 문구") <br>
4) 선택한 요소.innerHTML/innerText = "해당 요소에 출력할 문구"
</p>
<h3>3) document.write("화면에 출력할 문구");</h3>
<button onclick="documentWrite()">화면에 출력하기</button>
<script>
function documentWrite(){
document.write(document.querySelector("body").innerHTML) // document.querySelctor("body") => body 태그를 가져옴
}
</script>
</body>
</html>
▶ document.write(document.querySelector("body").innerHTML)
document.querySelector("body") => body 태그를 가져옴
▶ docuement.querySelector
☞ querySelector는 document 내의 요소를 검색하고 여러 결과를 찾았다면 첫 번째 요소만 리턴해주는 메소드이다.
☞ 이는 CSS 선택자 또는 선택자 그룹과 일치하는 요소를 찾고 일치하는 요소를 찾지 못한 경우 null을 리턴한다.
☞ 화면에 출력하기 클릭
☞ 버튼을 클릭한 결과, body태그의 내용이 모두 출력되는 것을 볼 수 있다!
4) 선택한 요소.innerHTML/innerText = "해당요소에 출력할 문구"
- 자바스크립트에서 어떤 요소(element) 안의 값(content값)을 가지고 온다거나 변경하고자 할때 innerHTML, innerText라는 속성에 접근하면 됨
▶ 특정 요소의 값을 가지고 온다거나 변경하고자 할때는 먼저 해당 요소객체를 가져와서 변수에 담아둘 것
■ 02_데이터입출력.html
<h3>4) 선택한 요소.innerHTML/innerText = "해당요소에 출력할 문구"</h3>
<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"); // 현재 문서에서 아이디값이 area1인 요소를 찾은 후 변수에 저장
console.log(divEl);
console.dir(divEl); // consle.dir : 해당 값의 디렉토리 구조를 통해 접근 가능한 모든 속성을 확인할 수 있다.
}
</script>
■ common.css
.area{
width:300px;
height: 100px;
border: 1px solid red;
}
.small{
height: 100px;
}
.big{
height: 200px;
}
▶ 선택된 요소내에 정보들을 알아내고자 한다면 속성들에 .을 통해 직접 접근이 가능
■ 02_데이터입출력.html
<h3>4) 선택한 요소.innerHTML/innerText = "해당요소에 출력할 문구"</h3>
<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"); // 현재 문서에서 아이디값이 area1인 요소를 찾은 후 변수에 저장
console.log(divEl);
console.dir(divEl); // consle.dir : 해당 값의 디렉토리 구조를 통해 접근 가능한 모든 속성을 확인할 수 있다.
console.log(divEl.id); // id : 해당 요소의 현재 아이디값
console.log(divEl.tagName); // tagName: 해당 요소의 태그명(대문자)
}
</script>
console.log(divEl.id); => id : 해당 요소의 현재 아이디 값
console.log(divEl.tagName); => tagName: 해당 요소의 태그명(대문자)
▶ 선택된 요소내의 값(content)을 알아내고자 한다면?
■ 02_데이터입출력.html 파일의 script태그안
console.log(divEl.innerHTML); => 요소 내부의 content영역값을 html 코드 포함해서 가져온다.
console.log(divEl.innerText); => 요소 내부의 content영역 값 중 텍스트만 포함해서 가져온다.
▶ 위처럼 속성에 직접 접근하여 값을 가져오는 것도 가능하지만, 직접 접근해서 값을 변경하는 것도 가능
■ 02_데이터입출력.html 파일의 script태그 안
divEl.innerHTML = "<b>innerHTML로 속성값을 변경함!</b>"
☞ 확인 버튼을 클릭하면 이와같이 값이 변하는데 <b>태그를 인식하여 글자가 굵게 변하는 것을 볼 수 있음
☞ 요소 내부의 content 영역값을 html 코드 포함해서 가져온다.
divEl.innerText = "<b>innerHTML로 속성값을 변경함!</b>"
☞ 확인 버튼을 클릭하면 이와같이 값이 변하는데 <b>태그를 인식하지 않고 text로 인식하여 출력하는 것을 볼 수 있음
☞ 요소 내부의 content 영역 값중 텍스트만 포함해서 가져온다.
즉,
☞ ineerHTML로 변경하면 출력할 문구에 HTML 태그 포함시 "태그"로 인식
☞ innerText로 변경하면 출력할 문구에 HTML태그 포함시 "문자열"로 인식
2. 데이터를 입력받는 기본 구문(변수에 기록 가능)
1) 변수 = window.confirm("질문내용")
2) 변수 = window.prompt("질문내용")
3) 변수 = 선택한요소.속성(id/className/innerHTML/innerText...)
4) 변수 = 선택한input요소.value;
1) window.confirm("질문내용");
- confirm 호출 시 "질문내용"과 "확인/취소"버튼이 존재하는 알림창 발생. 확인버튼 클릭시 true / 취소버튼 클릭시 false를 반환
■ 02_데이터입출력.html 파일의 script태그 안
<button onclick="testConfirm();">클릭</button>
<div class="area" id="area2"></div>
<script>
function testConfirm(){
var result = window.confirm("졸리면 확인, 아니면 취소를 누르세요"); // true/false
console.log(result);
var divEl = document.getElementById("area2");
// divEl.innerHTML = result;
if(result){
divEl.innerHTML = "<h2>너무 졸립니다..<h2>";
}else{
divEl.innerHTML = "<h2>하나도 안졸립니다 ^^</h2>";
}
}
</script>
■ common.css
.area{
width:300px;
height: 100px;
border: 1px solid red;
}
.small{
height: 100px;
}
.big{
height: 200px;
}
=> ① 클릭 버튼을 클릭하면...
=> ② 알림창이 뜨게 되고 확인 버튼을 클릭하면 console에 true 반환, 취소버튼을 누르면 console에 false반환함
=> ③ 내용에는 if문에 따라 출력된다.
2) window.prompt("질문내용")
prompt 호출 시 "질문내용"과 입력할 수 있는 "텍스트상자"와 "확인/취소"버튼이 보여지는 알림창 발생.
- 확인버튼 클릭시 텍스트 상자에 입력되어 있는 값이 반환
- 취소버튼 클릭시 null 값이 반환
■ 02_데이터입출력.html 파일의 script태그 안(common.css 연결되어 있음)
<button onclick="testPrompt();">클릭</button>
<div class="area" id="area3"></div>
<script>
function testPrompt(){
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇 살 입니까?");
// 당신은 xx살의 xx님 이군요. 반값습니다 ^^
var divEl = document.getElementById("area3");
// divEl.innerHTML = "<b>당신은 " + age + "살의 " + name + "님 이군요. 반갑습니다 ^^ </b>";
divEl.innerHTML = `당신은 ${age}살의 ${name}님 이군요. 반갑습니다 ^^ `;
}
</script>
☞ 클릭버튼을 누르면 알림창이 뜨는데 이때 취소를 누르면 null값이 출력되고, 값을 입력하고 확인버튼을 누르면 입력된 값이 출력되는 것을 볼 수 있다.
4) 선택한 input 요소.value
■ 02_데이터입출력.html 파일의 script태그 안(common.css 연결되어 있음)
아이디 : <input type="text" id="userId"> <br>
비밀번호 : <input type="password" id="userPwd"> <br>
<button onclick="testInput();" id="test-btn" data-hoho="data태그 테스트">클릭</button>
<script>
function testInput(){
var input1 = document.getElementById("userId");
var input2 = document.getElementById("userPwd");
var btn = document.getElementById("test-btn");
console.log(input1.value, input2.value);
// console.log(btn.value); // 값이 없어서 뜨지 않음
console.log(btn.dataset.hoho);
input1.value = "이고래";
}
</script>
☞ 아이디와 비밀번호를 입력하고 클릭버튼을 누르면....
☞
console.log(input1.value, input2.value); => console 창에 내가 입력한 값이 출력되는 것을 확인할 수 있다.
input1.value = "이고래"; => 클릭버튼을 누르면 input1의 text상자가 "이고래"로 바뀜
console.log(btn.dataset.hoho); => console창에 data태그 테스트 출력되는 것 확인
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 체크박스 실습문제 (0) | 2023.11.09 |
|---|---|
| [JavaScript] 5. 문자열과 숫자 (0) | 2023.11.08 |
| [JavaScript] 4. 변수와 자료형 (0) | 2023.11.08 |
| [JavaScript] 3. 요소선택 (0) | 2023.11.08 |
| [JavaScript] 1. 개요 (0) | 2023.11.07 |
