[javascript] 데이터 입/출력

자바 스크립트 데이터 입출력 관련 객체들

1. window

자바스크립트 내장객체로 브라우저 창이 하나 열릴때마다

하나씩 만들어지는 객체

브라우저 창 안에 존재하는 모든 요소들의 최상위 객체

(즉, 모든곳에 적용되기 때문에 생략 가능) extends Object

=> window.alert(); == alert();

=> conso.log(); == window.console.log();

 

 

 

2. document 

 

웹문서(HTML)마다 하나씩 만들어지는 객체

HTML문서에 대한 정보들을 가지고 있다.

=> document.getElementById();

 

 

 

 

1. 데이터를 출력하는 기본 구문

• window.alert('알림창에 출력할 문구');
• window.console.log('콘솔창에 출력할 문구');
• document.write('화면에 출력할 문구');
• 선택한요소.innerHTML / innerText = '해당 요소에 출력할 문구';

 

 

document.write('화면에 출력할 문구')

 

 

 

선택한요소.innerHTML / innerText = '해당 요소에 출력할 내용';

innerHTML 과 innerText

자바 스크립트에서 어떤 요소(element)안에 값(content)을 가지고 오고나서 변경하고자 할 때 'innerHTML', 'innerText' 라는 속성에 접근 가능 

=> 가지고 올 때 : 변수 = 선택한 요소. innertHTML / innerText;

=> 변경하고자 할 때 : 선택한요소.innerHTML / innerText = '변경할 값';

 

확인을 누르면 내가 변경한 값으로 출력된다.

---

2. 데이터를 입력받는 기본 구문(변수에 대입 가능)

 

window.confirm('질문내용')

confirm 호출 시 "질문 내용"과 "확인/취소"버튼이 존재하는 알림창 발생

확인 버튼 클릭 시 ture값, 취소 버튼 클릭 시  false를 반환한다.

 

 

 

window.prompt('질문내용');

prompt 호출 시 "질문 내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소"버튼이 보여지는 알림창 발생

• 확인 버튼 클릭 시 텍스트 상자에 입력되어있는 값이 반환
• 취소 버튼 클릭 시 null값을 반환

 

응용) 사용자에게 입력받은 수만큼 list 출력하기

 

 

 

선택한 input요소.value;

 

변수명으로 vlaue속성에 접근하여 값을 변경할 수도 있다.