window
: 자바스크립트에 내장된 객체이며, 웹 브라우저 내에 존재하는 모든 요소들의 최상위 객체이다.
→ 모든 곳에 적용되기 때문에 생략할 수 있다. ex) window.alert ⇒ alert
document
: 웹 문서마다 하나씩 만들어지는 객체이며, HTML 문서에 대한 정보들을 가지고 있다.
데이터를 출력하는 기본 구문
1. window.alert("출력할 문구");
: 알림창을 띄워 문구를 출력시킨다.
2. window.console.log("출력할 문구");
: 콘솔창에 문구를 출력시킨다.
3. document.write("출력할 문구");
: 화면에 문구를 출력시킨다.
- 문자열에 html 태그가 포함돼있으면 태그로 읽어온다.
<body>
<button onclick="dw();">출력</button>
<script>
function dw(){
let table = "<table border = '1'>";
table += "<tr>";
table += "<td>1행1열</td>";
table += "<td>1행2열</td>";
table += "</tr>";
table+="<tr>";
table+="<td>2행1열</td>";
table+="<td>2행2열</td>";
table+="</tr>";
table += "</table>";
document.write(table); // 태그를 그대로 읽어온다.
}
</script>
</body>
4. 선택한 요소.innerHTML/innerText = "출력할 문구";
: 선택한 요소 안의 값을 가져오거나 변경할 때 사용한다.
<head>
<style>
.text{
border: 1px solid black;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="inner" class="text">
오늘은 날씨가 화창하네요. <br> 기온은 <b>23도</b>쯤 되겠네요.
</div>
<button onclick="tag();">출력</button>
<script>
function tag(){
let divE1 = document.getElementById("inner");
console.log(divE1.innerHTML);
// innerHTML: 해당 요소의 내용 영역 안에 있는 html 태그와 text 부분을 가져온다.
// 오늘은 날씨가 화창하네요. <br> 기온은 <b>23도</b>쯤 되겠네요.
console.log(divE1.innerText);
// innerText: 해당 요소의 내용 영역 안에 있는 text 부분만 가져온다.
// 오늘은 날씨가 화창하네요.
// 기온은 23도쯤 되겠네요.
divE1.innerText = "오늘은 날씨가 <b>별로</b>네요.";
console.log(divE1.innerHTML);
// 오늘은 날씨가 <b>별로</b>네요.
// innerHTML로 변경: 출력할 문구에 html 태그가 있으면 태그로 인식한다.
console.log(divE1.innerText);
// 오늘은 날씨가 <b>별로</b>네요.
// innerText로 변경: 출력할 문구에 html 태그가 있어도 문자열로 인식한다.
divE1.onclick = function(){
alert("출력하기");
}
}
</script>
</body>
데이터를 입력받는 기본 구문
1. 변수 = window.confirm("질문내용");
: confirm을 호출했을 때 "질문 내용"과 '확인/취소 버튼'이 존재하는 알림창이 생긴다.
확인 버튼을 클릭하면 true를 반환하고, 취소 버튼을 클릭하면 false를 반환한다.
<button onclick="confirm();">엄마가 좋아, 아빠가 좋아?</button>
<div class="window" id="cf"></div>
<script>
function confirm(){
let div1 = document.getElementById("cf");
let result = window.confirm("엄마가 좋으면 확인 누르고 아빠가 좋으면 취소 눌러");
if(result){
div1.innerHTML = "엄마만 좋아하면 안돼.<br>아빠한테 효도 좀 해라.";
} else {
div1.innerHTML = "아빠만 좋아하면 안돼.<br>엄마한테 효도 좀 해라.";
}
}
</script>
2. 변수 = window.prompt("질문내용");
: prompt를 호출했을 때 "질문 내용"과 입력받을 수 있는 '텍스트 상자', '확인/취소 버튼'이 있는 알림창이 생긴다.
확인버튼을 클릭하면 텍스트 상자에 입력된 입력값이 반환되고, 취소버튼을 클릭하면 null을 반환한다.
<button onclick="prompt();">궁금한 게 있어</button>
<div class="window" id="pr"></div>
<script>
function prompt(){
let div2 = document.getElementById("pr");
let hobby = window.prompt("무슨 음식 좋아해?"); // 알림창 뜸
div2.innerHTML = "오~ "+hobby+" 좋아하는구나!";
}
</script>
3. 변수 = 선택한 요소.속성(id/className/innerHTML/innerText, ...);
4. 변수 = 선택한 input 요소.value;
: 해당 input 요소의 값만 반환된다.
아이디: <input type="text" id="userId"> <br>
비밀번호: <input type="password" id="userPw"> <br>
<button onclick="log();">로그인</button>
<div class="login" id="val"></div>
<script>
function log(){
var id = document.getElementById("userId"); // 아이디
var pw = document.getElementById("userPw"); // 비밀번호
var div3 = document.getElementById("val");
divE1.innerHTML = "아이디 "+id.value+"<br> 비밀번호 "+pw.value;
}
</script>