자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강
alert, confirm, prompt, if~else
※What? Object.. 객체란?
객체란 무엇일까요?
프로그램 개발에 대해 공부를 하면 아주 많이 듣는 단어입니다.
객체에 대해 정확히 이해하는것도 중요하고, 어떠한 방식으로 사용하는지도 중요하죠.
사전적인 의미에서의 객체는 사물, 물건, 목표 등의 여러가지 의미를 가지고 있습니다.
우리가 생활하면서 쉽게 접할수 있는 자동차를 예를들어 설명을 해볼게요.
자동차는 하나의 객체.. 즉 사물입니다.
그런데 그 사물을 여러개로 나눌 수 있습니다.
바퀴, 엔진, 도어, 베터리.. 등등 여러가지로 구성되죠.
그것들도 객체입니다.
객체를 쪼개고 나누다 보면 하나의 부품까지 나눌 수 있을거에요.
부품도 객체입니다.
각각의 객체는 어떠한 곳에서 씀씀이가 있습니다.
그 부품들은 자동차에서만 필요한게 아니죠.
프로그램도 마찬가지 입니다.
하나의 부품.. 하나의 객체가 어떠한 기능을 하는 객체.. 즉 프로그램을 만들죠.
그러한 객체.. 프로그램들이 모여서 더 큰 하나의 프로그램이 되기도 하고요.
※Why? 객체를 지향하는 이유.
자동차에 들어가는 모든 부품들이 나눌수 없는 하나의 객체라면..
예를 들어 엔진이 고장나면 자동차 자체를 바꿔야 겠죠?
효율성이 너무 떨어집니다. 그리고 교체하는 비용도 비싸죠.
바로 그 이유입니다.
하나의 부품은 다른곳에서 사용이 가능해야 합니다.
그리고 수리도 편해야 하죠.
하나의 프로그램은 다른곳에서도 사용할 수 있어야 하고, 수정도 편해야 합니다.
그것이 객체를 지향하는 이유입니다.
자바스크립트는 객체를 갖추고 있고 사용할 수 있습니다.
※Window 객체
윈도 객체는 전역객체라고도 합니다.
윈도에서 사용하는 창이나 프레임을 의미하죠.
△alert : 메시지를 담고있는 경고창
사용법)
window.alert('메시지');
혹은 alert('메시지');
예제)
<script>
window.alert('안녕하세요1');
alert('안녕하세요2');
</script>
결과)
△confirm : 사용자의 동의를 구하고, 동의할 경우 실행하는 확인창
사용법)
if(confirm('동의를 구하는 메시지?')){
확인을 클릭할 경우 실행될 프로그램
} else {
취소를 클릭할 경우 실행될 프로그램(생략가능)
}
예제)
<script>
function sampleConfirm(){
if(confirm('좋아요?')){
alert('네 좋아요.');
} else {
alert('아니요.');
}
}
</script>
<body>
<div id="wrap">
<input type="button" onclick="sampleConfirm()" value="눌러보세요">
</div>
</body>
결과)
확인을 클릭할 경우
취소를 클릭할 경우
△prompt : 사용자의 입력값을 확인하고 입력값에 따른 결과를 실행하는 확인창
사용법)
if(prompt('질문내용') === '원하는답변'){
alert('일치할경우');
} else {
alert('불일치할경우');
}
예제)
<script>
function samplePrompt(){
if(prompt('당신의이름?') === 'kiara77'){
alert('welcome');
} else {
alert('fail');
}
}
</script>
<body>
<div id="wrap">
<input type="button" onclick="samplePrompt()" value="눌러보세요">
</div>
</body>
결과)
일치할경우
불일치할경우
윈도 객체를 설명하다 보니 if else 문을 사용했는데요.
예제를 보면 아시겠지만 간단히 설명을 하겠습니다.
△if else 조건문
원하는 조건을 만족할 경우, 혹은 그렇지 않을 경우..
결과에 따른 값을 리턴하는 문장입니다.
사용법)
if(조건문1){
조건문1을 만족할 경우
}else if(조건문2){
조건문2를 만족할 경우
}else{
모두 만족하지 않을 경우
}
예제)
<script>
//sampleObj 라는 변수에 kiara77이라는 임의의 값을 저장
var sampleObj = "kiara77";
if(sampleObj === "kiara77"){
alert("sampleObj is kiara77");
}else if(sampleObj === "kiara1977"){
alert("sampleObj is kiara1977");
}else{
alert("no idea");
}
</script>
결과)
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
|---|---|
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |
| 자바스크립트 location/navigator - 자바스크립트 강좌 3강 (3) | 2016.04.15 |
| 자바스크립트 개념 / 기본구성 자바스크립트 강좌 1강 (0) | 2016.04.06 |