window : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능)
document : 웹 문서마다 하나씩 만들어지는 객체
(html 문서에 대한 정보들을 가지고 있음)
1) [window.]alert("알림창에 출력할 문구");
2) [window.]console.log("콘솔창에 출력할 문구");
3) document.write("화면상에 출력할 문구");
4) 선택한요소.innerText = "요소에 출력할 문구";
5) 선택한요소.innerHTML = "요소에 출력할 문구";
<!-- 클릭 시 "alert 버튼 클릭됨" 대화상자 출력 -->
<button onclick="fnAlert()">alert 확인</button>
// alert 확인
function fnAlert(){
window.alert("alert 버튼 클릭됨");
// window는 브라우저 자체를 나타내는 객체
// -> JS 코드는 브라우저(window) 내부에서 실행되는 코드이다 보니
// window를 생략할 수 있다.
}
<button onclick="documentWrite()">화면에 출력</button>
// document.write 확인
function documentWrite(){
// document.write("안녕하세요");
// document.write("<b>안녕하세요</b><br><br><h2>반가워요</h2>");
// 출력할 문구에 html 태그가 있을 경우 해석해서 시각적인 요소로 보여짐
let a = "<table border='1'>";
a += "<tr>";
a += "<td>1</td>";
a += "<td>2</td>";
a += "</tr></table>"
document.write(a);
}
자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
<button onclick="getInnerText()">InnerText로 읽어오기</button>
<button onclick="setInnerText()">InnerText로 변경하기</button>
<p id="test1" class="box">
테스트1 입니다.
<br>
<b>안녕하세요?</b>
</p>
// innerText 읽어오기
function getInnerText(){
// HTML 문서 내에서 아이디가 "test1"인 요소를 얻어와
// test1 변수에 대입
const test1 = document.getElementById("test1");
// test1 변수에 대입된 요소에서 내용을 얻어와 console에 출력
console.log(test1.innerText);
}
// innerText로 변경하기
function setInnerText(){
// id가 "test1"인 요소를 얻어와
// test1 변수에 대입
const test1 = document.getElementById("test1");
// test1 변수에 대입된 요소에 새로운 내용을 작성
test1.innerText = "innerText로 변경된 <br> 내용입니다.";
}
자바스크립트에서 요소 전체(태그 + 속성 + 내용)를 읽어들이거나 변경하는 속성
<button onclick="getInnerHTML1()">innerHTML로 읽어오기</button>
<button onclick="setInnerHTML1()">innerHTML로 변경하기</button>
<p id="test2" class="box">
테스트2 입니다.
<br>
<b>안녕하세요?</b>
</p>
<hr>
<h3>innerHTML 응용</h3>
<button onclick="add()">추가하기</button>
<div id="area1">
<div class="box2"></div>
</div>
// innerHTML로 읽어오기
function getInnerHTML1(){
// id가 test2인 요소를 얻어와
// test2 변수에 대입
const test2 = document.getElementById("test2");
// test2 요소 내부에 내용(태그 + 속성 + 내용)을 읽어서 콘솔에 출력
console.log(test2.innerHTML);
}
function setInnerHTML1(){
const test2 = document.getElementById("test2");
test2.innerHTML = "<b>innerHTML로 변경된 내용</b> <br>반갑습니다."
}
// innerHTML 응용
function add(){
// 1) 아이디가 area1인 요소 얻어오기
const area1 = document.getElementById("area1");
// 2) area1 내부 내용(태그, 속성, 내용 포함)을 모두 읽어오기
// const content = area1.innerHTML;
// 3) area1에 이전 내용 + 새로운 요소(div.box2) 추가
// area1.innerHTML = content + "<div class='box2'></div>";
// 2번 + 3번
area1.innerHTML += "<div class='box2'></div>";
}
아무 버튼도 누르지 않았을 때
'innerHTML로 읽어오기' 버튼을 눌렀을 때
'innerHTML로 변경하기' 버튼을 눌렀을 때
아무 버튼도 누르지 않았을 때
'추가하기' 버튼을 눌렀을 때
1) 변수 = [window.]confirm("질문내용");
2) 변수 = [window.]prompt("질문내용");
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText, ..);
4) 변수 = 선택한input요소.value;
질문에 대한 "예" / "아니오" 결과를 얻고자 할 때 사용하는 대화 상자 출력 함수
-> 선택 결과에 따라 확인 버튼 클릭 시 true 또는 취소 버튼 클릭 시 false가 반환됨
<button id="confirmBtn" onclick="fnConfirm()">confirm 확인하기</button>
// confirm 확인하기
function fnConfirm(){
// 확인
if(confirm("버튼 배경색을 분홍색으로 바꾸시겠습니까?")){
document.getElementById("confirmBtn").style.backgroundColor = "pink";
} else{
document.getElementById("confirmBtn").style.backgroundColor = "green";
}
}
'confirm 확인하기' 버튼을 눌렀을 때
'확인'을 눌렀을 때
'취소'를 눌렀을 때
- 확인 : 입력한 값 반환(문자열)
- 취소 : null 반환
<button onclick="fnPrompt1()">클릭</button>
<div id="area2"></div>
<br>
<button onclick="fnPrompt2()">확인하기</button>
<p id="area3"></p>
// prompt 확인하기
function fnPrompt1(){
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇 살입니까?");
// console.log(name);
// console.log(age);
const divE1 = document.getElementById("area2");
divE1.innerHTML = "<b>앗, 당신이 바로 " + age + "살 " + name + " 님이시군요..!!</b>"
}
function fnPrompt2(){
const input = prompt("이름을 입력해 주세요.");
const promptResult = document.getElementById("area3");
if(input != null){ // 이름이 입력되었을 때
promptResult.innerHTML = input + "님 환영합니다.";
} else{ // 취소 버튼 눌렀을 때
promptResult.innerText = "이름을 입력해 주세요.";
}
}
아이디 : <input type="text" id="userId"> <br>
비밀번호 : <input type="password" id="userPwd"> <br>
<button onclick="fnInput()">클릭</button>
<br>
<input type="text" id="area4">
// 선택한 input요소.value 확인하기
function fnInput(){
const input1 = document.getElementById("userId")// 아이디 input 요소
const input2 = document.getElementById("userPwd")// 비밀번호 input 요소
// console.dir(input1);
const id = input1.value;
const pwd = input2.value;
console.log(id);
console.log(pwd);
document.getElementById("area4").value = id + ", " + pwd;
input1.value = '';
input2.value = "";
}